@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica/HelveticaNeueRoman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica/HelveticaNeueBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

html {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0 auto;
    background-image: url(../images/bg.png);
    background-size: cover;
    font-family: Helvetica, sans-serif;
}

header,
main,
footer {
    padding: 0 195px 0;
    margin: 0 auto;
    width: 1530px;
}

header {
    margin-top: 66px;
    margin-bottom: 96px;
}

footer {
    background-color: #5276B7;
    color: #FFFFFF;
    padding-top: 120px;
}

h1 {
    font-size: 0px;
}

h2 {
    font-size: 64px;
    font-weight: bold;
    text-align: center;
    padding: 0;
    margin: 0 0 96px;
}

footer h2 {
    text-align: left;
    margin-bottom: 49px;
}

h3 {
    font-size: 32px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 24px;
    text-transform: uppercase;
}

.header__top-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 32px;
}

.lang {
    width: 58px;
    height: 28px;
    border-radius: 54px;
    padding: 2px 3px;
    background-color: #B2B3B4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang[data-lang="ru"] {
    flex-direction: row;
}

.lang[data-lang="uz"] {
    flex-direction: row-reverse;
}

.lang__flag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
}

.lang__flag--uz {
    background-image: url(../images/icon-uz.svg);
}

.lang__flag--ru {
    background-image: url(../images/icon-ru.svg);
}

.lang__name {
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
}

.lang__name--uz {
    margin-right: 5px;
}

.lang__name--ru {
    margin-left: 5px;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 0; 
    gap: 20px 50px; 
}

nav a {
    position: relative;
    font-weight: 500;
    font-size: 24px;
    color: #5276B7;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    text-decoration: none;
    display: flex;
}

nav a:hover {
    color: #FFFFFF;    
    background-color: #5276B7;
    padding: 13px 16px;
    border-radius: 80px;
}

.section1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    margin-bottom: 150px;
}

.section1::before {
    content: '';
    position: absolute;
    width: 954px;
    height: 786px;
    background-image: url(../images/woman-baby.png);
    background-repeat: no-repeat;
    top: 104px;
    left: -5px;
}

.slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    align-self: flex-end;
    z-index: 1;
}

.slider__slide-btn {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 1px;
    border-radius: 50%;    
    background-color: #5276B7;
    z-index: 1;
}

.slider__slide-btn::before {
    content: '';
    position: absolute;
    background-image: url(../images/arrow-right.svg);
    background-size: cover;
    width: 72px;
    height: 72px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider__slide-btn.inactive {
    background-color: #CBD1DA;
}

.slider__slide-btn--prev {
    transform: rotate(180deg);
    transform-origin: center;
}

.slider__item {
    flex-direction: column;
    width: 472px;
    display: none;
    opacity: 0;
    padding: 0 24px;
}

.slider__item[data-card="0"] {
    display: flex;
    opacity: 1;
}

.slider__image {
    margin-bottom: 32px;
}

.slider__title {
    font-size: 54px;
    margin: 0;
    margin-bottom: 32px;
    font-weight: 500;
}

.slider__title b {
    position: relative;
}

.slider__title sup {
    position: absolute;
    font-size: 20px;
    top: 5px
}

.slider__subtitle {
    font-size: 28px;
    margin: 0;
    margin-bottom: 32px;
    font-weight: 500;
}

.slider ul {
    list-style-type: none;
    padding: 0;
    margin: 0; 
}

.slider li {
    padding-left: 36px;
    font-size: 20px;
    margin-bottom: 29px;
    position: relative;
}

.slider li::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #5276B7;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.slider li[data-bullet] {
    font-size: 24px;
    padding-left: 70px;
}

.slider li[data-bullet]::before {
    width: 46px;
    height: 46px;
}

.slider li[data-bullet="1"]::before {
    background-image: url(../images/bullet-1.png);
}

.slider li[data-bullet="2"]::before {
    background-image: url(../images/bullet-2.png);
}

.slider li[data-bullet="3"]::before {
    background-image: url(../images/bullet-3.png);
}

.slider li[data-bullet="4"]::before {
    background-image: url(../images/bullet-4.png);
}

.slider__bottom-btns {
    display: flex;
    flex-direction: row;
    gap: 76px;
    align-items: baseline;
}

.slider__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 96px;
    overflow: visible;
}

.slider__nav div {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 22px;
    overflow: visible;
}

.slider__nav img {
    height: 96px;
    width: auto;
    flex-shrink: 0; 
    max-width: none;
    align-self: flex-end;
}

.slider__nav p {
    width: fit-content;
    font-size: 28px;
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-align: center;
}

.slider__nav.active {
    width: 128px;
}

.slider__nav.active div {
    width: 128px;
    height: 128px;
}

.slider__nav.active img {
    height: 128px;
}

.slider__nav.active p {
    padding-bottom: 5px;
    border-bottom: 3px solid;
}

#effect {
    padding: 0 125px;
    position: relative;
}

.effects div {
    font-size: 32px;
}

.effects p {
    padding: 0;
    margin: 0;
    line-height: 120%;
}

.effect-1 {
    width: 600px;
    margin-left: 296px;
    margin-bottom: 87px;
}

.effect-2 {
    width: 710px;
    margin-bottom: 48px;
}

.effect-3 {
    width: 948px;
    margin-left: 258px;
    margin-bottom: 48px;
}

.effect-3 div {
    font-size: 20px;
    color: #B2B3B4;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #B2B3B4;
}

.effect-4 {
    width: 820px;
    margin-bottom: 48px;
}

.effects__pic {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.effects__pic--1 {
    width: 262px;
    height: 293px;
    background-image: url(../images/effects-1.png);
    top: 140px;
    left: 125px;
}

.effects__pic--2 {
    width: 273px;
    height: 400px;
    background-image: url(../images/effects-2.png);
    top: 150px;
    left: 983px;
}

.effects__pic--3 {
    width: 250px;
    height: 250px;
    background-image: url(../images/effects-3.png);
    top: 760px;
    left: 125px;
}

.effects__pic--4 {
    width: 264px;
    height: 224px;
    background-image: url(../images/effects-4.png);
    top: 1170px;
    left: 1130px;
}

.effects__pic--5 {
    position: relative;
    margin: 0 auto 112px;
    width: 872px;
    height: 80px;
    background-image: url(../images/effects-5.png);
}

#benefits {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 8px 8px 32px rgba(5, 79, 190, 0.25);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 80px 224px 160px;
    margin-bottom: 241px;
}

.benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 128px;
}

.benefits__item {
    width: 480px;
    display: flex;
    flex-direction: column;
}

.benefits__img {
    width: 220px;
    height: 220px;
    filter: drop-shadow(8px 8px 32px rgba(5, 79, 190, 0.25));
    margin: 0 auto 48px;
}

.benefits__title {
    font-weight: bold;
    font-size: 48px;
    letter-spacing: -0.01em;
    color: #5276B7;
    padding: 0;
    margin: 0 0 24px;
}

.benefits__text {
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0.02em;
}

#instruction {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 8px 8px 32px rgba(5, 79, 190, 0.25);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 128px 152px 165px;
    margin-bottom: 240px;
    display: flex;
    flex-direction: column;
}

#instruction .slider {
    align-self: center;
}

#instruction .slider__item {
    width: 832px;
}

#instruction .slider__image {
    width: 530px;
    margin: 0 auto 52px;
}

.slider__list-title {
    font-size: 30px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 40px;
}

.slider__usage {
    font-size: 24px;
    margin: 0 0 40px;
}

.slider__instr-btn {
    position: relative;
    display: block;
    padding: 26px 84px 26px 38px;
    font-size: 22px;
    font-weight: 500;
    border-radius: 57px;
    background-color: #5276B7;
    color: #FFFFFF;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
}

.slider__instr-btn::after {
    content: '';
    position: absolute;
    width: 29px;
    height: 40px;
    background-image: url(../images/icon-pdf.svg);
    top: 14px;
    right: 38px;
}



#convenience {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 8px 8px 32px rgba(5, 79, 190, 0.25);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 128px 96px 80px;
    margin-bottom: 240px;
    display: flex;
    flex-direction: column;
}

.convenience__img {
    width: 95%;
    margin: 0 auto 64px;
}

.convenience__text1 {
    font-size: 24px;
    margin-bottom: 64px;
    line-height: 133%;
}

.convenience__text1 b {
    font-size: 28px;
}

.convenience__text1 sup {
    position: relative;
    font-size: 15px;
}

.convenience__benefits {
    display: flex;
    flex-direction: row;
    font-size: 24px;
    align-items: center;
    margin-bottom: 64px;
}

.convenience__benefits img {
    width: 45%;
    height: min-content;
}

.convenience__benefits-list {
    display: flex;
    flex-direction: column;
    gap: 63px;
}

.convenience__benefit-title {
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px 24px;
    border-radius: 40px;
    background-color: #5276B7;
    color: #FFFFFF;
    width: fit-content;
    margin-bottom: 24px;
}

.convenience__benefit-item p {
    padding: 0;
    margin: 0;
    line-height: 133%;
}

.convenience__benefit-item sup {
    position: relative;
    font-size: 15px;
}

.usage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 135px 64px;
}

.usage__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.usage__item {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}

.usage__item img {
    width: 90px;
    height: 90px;
}

.usage__item p {
    padding: 0;
    margin: 0;
}

.usage__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.usage__title {
    font-size: 34px;
    font-weight: bold;
    text-transform: uppercase;
    color: #5276B7;
}

.usage__text {
    font-size: 24px;
}

.video__head {
    text-align: center;
}

.video__wrapper {
    width: 66%;
    margin: 0 auto;
}

.video__wrapper p {
    padding: 0;
    margin: 0 0 32px;
    font-size: 24px;
    line-height: 133%;
}

.video__container {
    margin-bottom: 64px;
}

.video__notes {
    font-size: 21px;
    color: #B2B3B4;
    padding-top: 64px;
    border-top: 1px solid #B2B3B4;
    margin-top: 64px;
}

.video__preview {
    width: 100%;
    height: auto;
}

#feedback {
    margin-bottom: 368px;
}

.feedback__list {
    display: flex;
    flex-direction: row;
    gap: 38px;
}

.feedback__item {
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 32px rgba(5, 79, 190, 0.25);
    background-color: #FFFFFF;
}

.feedback__item:nth-child(2n) {
    flex-direction: column-reverse;
}

.feedback__card {
    padding: 20px 36px;
}

.feedback__title {
    font-size: 40px;
    font-weight: bold;
    color: #5276B7;
    margin: 0 0 24px;
}

.feedback__item:nth-child(2n) .feedback__title {
    margin-top: 54px;
}

.feedback__text {
    font-size: 24px;
    line-height: 110%;
    text-align: justify;
}

.feedback__item:nth-child(2n) img {
    margin-bottom: 48px;
}

.wheretobuy__wrapper {
    display: flex;
    flex-direction: row;
    gap: 153px;
    justify-content: center;
    margin: 0 auto 128px;
}

.wheretobuy__title {
    font-size: 30px;
    font-weight: 500;
}

.pharm-net {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.pharm-net__item {
    width: 182px;
    height: 123px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

.pharm-net div:nth-child(1) {
    width: 100%;
    grid-area: 1 / 1 / span 1/ span 3;
}

.pharm-online {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pharm-online a {
    width: 384px;
    height: 108px;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.pharm-online a:nth-child(1) {
    background-image: url(../images/pharm-online-1.png);
}

.pharm-online a:nth-child(2) {
    background-image: url(../images/pharm-online-2.png);
}

.pharm-online a:nth-child(3) {
    background-image: url(../images/pharm-online-3.png);
}

.pharm-online a:nth-child(4) {
    background-image: url(../images/pharm-online-4.png);
}

.safety__header {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.safety__award {
    width: 64px;
    height: 64px;
}

.safety__about-award {
    display: flex;
    flex-direction: row;
    gap: 32px;
    padding-bottom: 80px;
    border-bottom: 1px solid #FFFFFF;
}

.about-award__col:nth-child(1) {
    width: 55%;
}

.about-award__col:nth-child(2) {
    width: 45%;
}

.about-award__col p {
    padding: 0;
    margin: 0 0 32px;
    font-size: 24px;
    line-height: 130%;
    font-weight: normal;
}

.about-awards__badges {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.footer__nav {
    display: flex;
    flex-direction: row;
    padding: 80px 0 40px;
    justify-content: space-between;
    align-items: flex-start;
}

.footer__nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 32px 82px;
}

.footer__nav a {
    color: #FFFFFF;
    font-size: 26px;
}

.footer__nav a:hover {    
    padding: 0;
    border-radius: 0px;
}

.footer__logo {
    filter: brightness(0) invert(1);
    width: 421px;
}

.footer__about {
    display: flex;
    flex-direction: row;
    gap: 72px;
    margin-bottom: 80px;
}

.footer__about p {
    padding: 0;
    margin: 0;
    font-size: 24px;
    line-height: 120%;
    font-weight: 300;
    text-transform: uppercase;
    min-width: 435px;
}

.footer__about a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer__copyright {
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 80px;
    border-bottom: 1px solid #FFFFFF;
}

.footer__warning {
    padding: 80px 0 120px;
    font-weight: 500;
    font-size: 56px;
    line-height: 120%;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.up-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #5276B7;
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: .5;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.up-btn.visible {
    opacity: .5;
    visibility: visible;
}

.up-btn::before,
.up-btn::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 4px;
    background-color: #FFFFFF;
    top: 45px;
}

.up-btn::before {
    transform: rotate(-45deg);
    left: 17px;
}

.up-btn::after {
    transform: rotate(45deg);
    right: 17px;
}

@media screen and (max-width: 1536px) {
    header,
    main,
    footer {
        padding: 0 40px 0;
        width: 1456px;
    }

    footer {
        padding-top: 120px;
    }

    .section1::before {
        width: 763px;
        height: 629px;
        background-size: contain;
    }

    .feedback__list {
        flex-direction: column;
    }

    .feedback__item {
        flex-direction: row;
    }

    .feedback__item:nth-child(2n) {
        flex-direction: row-reverse;
    }

    .feedback__item:nth-child(2n) .feedback__title {
        margin-top: 0;
    }
    .feedback__item:nth-child(2n) img {
        margin-bottom: 0;
    }

    .feedback__card {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .up-btn {
        width: 70px;
        height: 70px;
    }

    .up-btn::before,
    .up-btn::after {
        width: 30px;
        top: 30px;
    }

    .up-btn::before {
        left: 11px;
    }

    .up-btn::after {
        right: 11px;
    }
}

@media screen and (max-width: 1366px) {
    header,
    main,
    footer {
        padding: 0 40px 0;
        width: 1286px;
    }

    footer {
        padding-top: 120px;
    }

    h2 {
        font-size: 50px;
    }

    nav a,
    .footer__nav a,
    .footer__about p,
    .footer__copyright {
        font-size: 20px;
    }

    .slider__title {
        font-size: 48px;
    }

    .slider__list-title {
        font-size: 24px;
    }

    .slider li[data-bullet],
    .slider__usage {
        font-size: 20px;
    }

    .slider__instr-btn {

    }

    .effects div {
        font-size: 28px;
    }

    .effect-1 {
        margin-left: 220px;
        margin-bottom: 60px;
    }

    .effect-3 {
        margin-left: 200px;
        width: 836px;
    }

    .effects__pic--1 {
        width: 183px;
        height: 205px;
    }

    .effects__pic--2 {
        width: 191px;
        height: 280px;
        left: 930px;
    }

    .effects__pic--3 {
        width: 175px;
        height: 175px;
    }

    .effects__pic--4 {
        width: 185px;
        height: 157px;
        left: 985px;
    }

    .effects__pic--5 {
        width: 70%;
    }

    #benefits,
    #instruction,
    #convenience,
    #feedback {
        margin-bottom: 168px;
    }

    .benefits {
        gap: 90px
    }

    .benefits__item {
        width: auto;
    }

    .benefits__title {
        font-size: 42px;
    }

    .benefits__text {
        font-size: 24px;
    }

    .benefits__img {
        width: 154px;
        height: auto;
    }

    .about-award__col p {
        font-size: 20px;
    }

    .about-awards__badges img {
        width: 67px;
    }

    .footer__warning {
        font-size: 50px;
    }
}

@media screen and (max-width: 1024px) {
    header,
    main,
    footer {
        padding: 0 40px 0;
        width: 944px;
    }

    footer {
        padding-top: 80px;
    }

    h3 {
        font-size: 28px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .section1 {
        align-items: center;
    }

    .section1::before {
        display: none;
    }

    .slider {
        align-self: center;
    }

    .effects {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .effects__pic {
        display: none;
    }

    .effects div {
        margin: 0;
        width: auto;
    }

    #effect,
    #feedback {
        margin-bottom: 120px;
    }

    #benefits,
    #instruction,
    #convenience {
        padding: 80px 120px 120px;
        margin-bottom: 120px;
    }

    .benefits {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .benefits__img {
        margin-bottom: 24px;
    }

    .benefits__title {
        text-align: center;
    }

    .benefits__text {
        margin: 0;
    }

    #instruction .slider__item {
        width: auto;
    }

    .convenience__benefits img {
        display: none;
    }

    .usage,
    .video__wrapper {
        margin: 0 0 64px;
        width: auto;
    }

    .feedback__item {
        align-items: center;
    }

    .feedback__item img {
        width: min-content;
        height: min-content;
    }

    .feedback__title {
        font-size: 32px;
    }

    .feedback__text {
        font-size: 18px;
        line-height: 120%;
    }

    .wheretobuy__wrapper {
        gap:unset
    }

    .footer__nav {
        gap: 100px;
    }

    .footer__nav ul {
        gap: 20px 40px;
    }
}

@media screen and (max-width: 768px) {
    header,
    main,
    footer {
        padding: 0 30px 0;
        width: 708px;
    }

    footer {
        padding-top: 80px;
    }

    h2 {
        font-size: 30px;
        margin-bottom: 50px;
    }

    .slider__title {
        font-size: 28px;
    }

    .slider__list-title {
        font-size: 20px;
    }

    .slider li[data-bullet], .slider__usage {
        font-size: 16px;
    }

    .slider__cards {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #instruction .slider__cards {
        width: 70%;
    }

    #instruction .slider__image {
        width: 100%;
    }

    #effect {
        padding: 0 60px;
    }

    #effect, #feedback,
    .footer__about {
        margin-bottom: 60px;
    }

    #benefits, #instruction, #convenience {
        padding: 60px;
        margin-bottom: 60px;
    }

    .effects div,
    .convenience__benefit-title {
        font-size: 20px;
    }

    .effect-3 div {
        margin-top: 20px;
    }

    .benefits__title {
        font-size: 24px;
    }

    .benefits__text,
    .convenience__text1,
    .usage__text,
    .video__wrapper p,
    .video__notes {
        font-size: 16px;
        margin-top: 0;
    }

    .convenience__benefits-list {
        gap: 32px;
    }

    .convenience__text1 b,
    .convenience__benefit-item p {
        font-size: 18px;
    }

    .convenience__benefit-item sup {
        font-size: 10px;
    }

    .video__wrapper {
        margin-bottom: 0;
    }

    .feedback__item img {
        width: 40%;
    }

    .wheretobuy__wrapper {
        flex-direction: column;
        align-items: center;
    }

    .wheretobuy__title {
        text-align: center;
    }

    .about-award__col p {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .footer__logo {
        width: 33%;
    }

    .footer__about {
        gap: 36px;
    }

    .footer__about p {
        min-width: auto;
        max-width: 50%;
        font-size: 12px;
    }

    .footer__copyright {
        margin: 0;
        padding-bottom: 40px;
    }

    .footer__warning {
        font-size: 36px;
        padding: 40px 0 60px;
    }

    .up-btn {
        width: 50px;
        height: 50px;
    }

    .up-btn::before,
    .up-btn::after {
        width: 20px;
        top: 23px;
        height: 2px;
    }

    .up-btn::before {
        left: 8px;
    }

    .up-btn::after {
        right: 8px;
    }
}

@media screen and (max-width: 640px) {
    header,
    main,
    footer {
        padding: 0 20px 0;
        width: 600px;
    }

    footer {
        padding-top: 50px;
    }

    h3 {
        font-size: 18px;
    }

    #benefits, #convenience {
        padding: 40px;
        margin-bottom: 40px;
    }

    #instruction {
        padding: 40px;
        margin-bottom: 40px;
    }

    .slider {
        justify-content: center;
    }
    
    #instruction .slider__image {
        width: 100%;
    }

    .slider__item {
        width: auto;
        padding: 0;
    }

    .slider__item img {
        width: 100%;
        height: auto;
    }

    .section1 {
        margin-bottom: 100px;
    }

    .slider__list-title,
    #convenience b {
        font-size: 16px;
    }

    .slider li {
        font-size: 16px;
        padding-left: 26px;
        margin-bottom: 19px;
    }

    .slider li[data-bullet], .slider__usage {
        font-size: 12px;
    }

    .slider li::before {
        width: 14px;
        height: 14px;
    }

    .slider__title {
        font-size: 20px;
    }

    .slider__instr-btn {
        font-size: 16px;
        padding: 13px 42px 13px 19px;
    }

    .slider__instr-btn::after {
        width: 15px;
        height: 20px;
        background-size: contain;
        top: 11px;
        right: 19px;
    }

    .slider__slide-btn::before {
        width: 40px;
        height: 40px;
    }

    .slider__slide-btn {
        width: 35px;
        height: 35px;
    }

    .slider__bottom-btns {
        margin-top: 12px;
        gap: 40px;
        justify-content: center;
        width: fit-content;
    }

    .slider__nav p,
    .slider__subtitle {
        font-size: 18px;

    }

    .slider__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%;
    }

    .convenience__text1 {
        margin-bottom: 32px;
    }

    .convenience__text1 sup {
        font-size: 10px;
    }

    .convenience__benefit-title {
        font-size: 16px;
        padding: 13px 19px;
    }

    .feedback__title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .feedback__text {
        font-size: 14px;
        margin: 0;
    }

    .wheretobuy__title {
        margin: 0;
        font-size: 20px;
    }

    .pharm-net {
        margin-bottom: 32px;
    }

    .pharm-online {
        margin-top: 32px;
    }

    footer h2 {
        margin-bottom: 32px;
    }

    .safety__header {
        align-items: baseline;
        gap: 16px;
    }

    .safety__about-award {
        padding-bottom: 40px;
    }

    .safety__award {
        width: 30px;
        height: auto;
    }

    .about-awards__badges img {
        width: 45px;
    }

    .footer__nav {
        gap: 32px;
        padding: 40px 0;
    }

    .footer__nav ul {
        gap: 14px 32px;
    }

    nav a, .footer__nav a, .footer__about p, .footer__copyright,
    #convenience p {
        font-size: 14px;
    }

    .footer__warning {
        font-size: 20px;
        padding: 40px 0 60px;
    }
}

@media screen and (max-width: 480px) {
    header,
    main,
    footer {
        padding: 0 20px 0;
        width: 440px;
    }

    footer {
        padding-top: 50px;
    }

    h3 {
        font-size: 18px;
    }

    .slider {
        gap: 10px;
    }

    .slider__wrapper {
        flex-direction: column-reverse;
    }

    .slider__nav div {
        display: none;
    }

    #instruction .slider__cards {
        width: 100%;
    }

    .slider__image {
        width: 80%;
        margin: 0 auto 32px;
    }

    .slider__bottom-btns {
        margin-top: 0;
        margin-bottom: 32px;
    }

    .slider__title sup {
        font-size: 16px;
        top: 0;
    }

    .section1 {
        margin-bottom: 60px;
    }

    .effects p,
    .effects div {
        font-size: 16px;
    }

    .convenience__benefit-title {
        line-height: 150%;
        text-align: center;
    }

    .feedback__item,
    .feedback__item:nth-child(2n) {
        flex-direction: column;
    }

    .feedback__item img {
        margin-top: 20px;
    }

    .pharm-net__item {
        width: calc(440px / 3);
    }

    .footer__nav {
        flex-direction: column-reverse;
        align-items: center;
    }

    .footer__about {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 40px;
    }

    .footer__about p {
        max-width: none;
        text-align: center;
    }
}

@media screen and (max-width: 360px) {
    header,
    main,
    footer {
        padding: 0 20px 0;
        width: 320px;
    }

    footer {
        padding-top: 50px;
    }

    header {
        margin-top: 32px;
        margin-bottom: 48px;
    }

    h2 {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .header__top-block img {
        width: 70%;
    }

    .slider {
        display: grid;
        grid-template-areas: 
            "card card"
            "prev next";
        align-items: center;
    }

    .slider__wrapper,
    #instruction .slider__cards {
        grid-area: card;
        margin: 0 auto;
    }

    .slider__slide-btn--prev {
        grid-area: prev;
        margin: 0 auto;
    }

    .slider__slide-btn--next {
        grid-area: next;
        margin: 0 auto;
    }

    .slider__bottom-btns {
        gap: 0;
        justify-content: space-between;
        width: 100%;
    }

    .slider__nav,
    .slider__nav.active {
        width: fit-content;
    }

    .slider__wrapper {
        width: 100%;
    }

    .slider__item {
        max-width: 320px;
    }

    #effect {
        padding: 0 20px;
    }

    .usage__item {
        flex-direction: column;
    }

    .video__container {
        margin-bottom: 32px;
    }

    .video__notes {
        padding-top: 32px;
        font-size: 14px;
    }

    .pharm-net__item {
        width: calc(320px / 3);
    }

    .wheretobuy__online, .pharm-online, .pharm-online a {
        width: 100%;
    }

    .wheretobuy__wrapper {
        margin-bottom: 64px;
    }

    .about-award__col p {
        font-size: 10px;
    }

    .about-awards__badges {
        flex-direction: column;
        align-items: center;
    }
}