@font-face {
    font-family: 'NotoSansDisplay-Bold';
    src: url('../fonts/NotoSansDisplay-Bold.ttf');
}

@font-face {
    font-family: 'NotoSansDisplay-Regular';
    src: url('../fonts/NotoSansDisplay-Regular.ttf');
}

@font-face {
    font-family: 'NotoSansDisplay-Italic';
    src: url('../fonts/NotoSansDisplay-Italic.ttf');
}

@font-face {
    font-family: 'NotoSansDisplay_ExtraCondensed-SemiBoldItalic';
    src: url('../fonts/NotoSansDisplay_ExtraCondensed-SemiBoldItalic.ttf');
}

@font-face {
    font-family: 'NotoSans-Bold';
    src: url('../fonts/NotoSans-Bold.ttf');
}

@font-face {
    font-family: 'NotoSans-SemiBold';
    src: url('../fonts/NotoSans-SemiBold.ttf');
}

@font-face {
    font-family: 'Circe-Regular';
    src: url('../fonts/Circe-Regular.ttf');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.ttf');
}

@font-face {
    font-family: 'Roboto-Italic';
    src: url('../fonts/Roboto-Italic.ttf');
}

@font-face {
    font-family: 'Roboto-ExtraBold';
    src: url('../fonts/Roboto-ExtraBold.ttf');
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/OpenSans-Bold.ttf');
}

@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: url('../fonts/OpenSans-ExtraBold.ttf');
}

@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('../fonts/OpenSans-SemiBold.ttf');
}

@font-face {
    font-family: 'SourceSansPro-Black';
    src: url('../fonts/SourceSansPro-Black.ttf');
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('../fonts/SourceSansPro-Bold.ttf');
}

@font-face {
    font-family: 'SourceSansPro-SemiBold';
    src: url('../fonts/SourceSansPro-SemiBold.ttf');
}

@font-face {
    font-family: 'SourceSansPro-Light';
    src: url('../fonts/SourceSansPro-Light.ttf');
}

@font-face {
    font-family: "Lato-Black";
    src: url("../fonts/Lato-Black.ttf");
}

@font-face {
    font-family: "Inter-Black";
    src: url("../fonts/Inter-Black.otf");
}

@font-face {
    font-family: "Signika-Bold";
    src: url("../fonts/Signika-Bold.ttf");
}

@font-face {
    font-family: "SegoeUI-Regular";
    src: url("../fonts/SegoeUI.ttf");
}

@font-face {
    font-family: "SegoeUI-SemiBold";
    src: url("../fonts/SegoeUI-SemiBold.ttf");
}

@font-face {
    font-family: "SegoeUI-Bold";
    src: url("../fonts/SegoeUI-Bold.ttf");
}

* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: black;
}

span.scrollToForm {
    color: red;
    font-family: 'NotoSans-Bold';
}

.scrollToForm {
    cursor: pointer;
}

/* Main */

.title_main {
    font-family: 'NotoSansDisplay-Bold';
    font-size: 36px;
    color: #A61729;
    margin: 16px 70px;
}


.h3 {
    font-family: 'NotoSansDisplay-Bold';
    font-size: 24px;
    margin: 16px 70px;
}

.podzal {
    font-family: 'NotoSansDisplay-Bold';
    font-size: 28px;
    margin: 16px 70px;
    text-align: center;
}

.photo_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px auto;
    max-width: 1024px;
}

.photo_center img {
    width: 100%;
}

.jiri {
    margin: 8px 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user_left {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
}

.user_left p:nth-child(1) {
    font-family: "NotoSans-Bold";
}

.user_left p:nth-child(2) {
    font-family: "NotoSansDisplay-Regular";
}


.user_right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user_right img {
    width: 24px;
}

.face {
    padding: 8px;
    border-radius: 8px;
    background-color: #396FD8;
}

.twit {
    padding: 8px;
    border-radius: 8px;
    background-color: #1D1D1D;
}

.what {
    padding: 8px;
    border-radius: 8px;
    background-color: #00FF6A;
}

.link {
    padding: 8px;
    background-color: #F84C00;
    border-radius: 8px;
}

.text_simple {
    font-family: 'NotoSansDisplay-Regular';
    font-size: 20px;
    margin: 16px 70px;
}

.text__bold {
    font-family: 'NotoSans-Bold';
    font-size: 20px;
    margin: 16px 70px;
}

.text_red {
    font-family: 'NotoSans-Bold';
    font-size: 28px;
    margin: 16px 70px;
    color: red;
}

.photo_center1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px auto;
    max-width: 718px;
}

.photo_center1 img {
    width: 100%;
}

.photo_center1 span {
    text-align: center;
    padding: 8px 0 0;
    font-family: 'Circe-Regular';
    width: 100%;
    font-size: 12px;
    width: 95%;
}

/* Question/answer */

.question,
.answer {
    margin: 16px 70px;
    font-size: 20px;
    font-family: 'NotoSansDisplay-Regular';
}

.question {
    font-family: 'NotoSans-Bold';
    font-style: italic;
}


/*  */


/* Swiper */

.swiper {
    max-width: 700px;

}

.swiper-slide {
    max-width: 100%;

}

.swiper-slide img {
    max-width: 100%;
}


/*  */


/* Doctor */

.doctor {
    display: flex;
    padding: 16px;
    margin: 16px auto;
    max-width: 750px;
    gap: 16px;
    border: 1px solid black;
}

.doctor img {
    max-width: 290px;
}

.doctor_text p:nth-child(1) {
    font-family: "NotoSans-Bold";
    font-size: 24px;
}

.doctor_text p:nth-child(2) {
    font-family: "NotoSansDisplay-Regular";
    font-size: 14px;
    color: rgb(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

.doctor_text p:nth-child(3) {
    font-family: "NotoSansDisplay-Regular";
    font-size: 18px;
}

@media screen and (max-width: 920px) {
    .doctor {
        margin: 16px 70px;
        align-items: center;
    }
}

@media screen and (max-width: 769px) {
    .doctor {
        margin: 16px;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
    }
}

/* Final doctor */

/* Etape */

.etape {
    margin: 16px 70px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.etape p {
    font-family: "NotoSans-Bold";
    font-weight: bold;
    font-size: 24px;
}

.etap,
.etap1 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.etap img {
    width: 90px;
}

.etap1 img {
    width: 80px;
}

.etap p,
.etap1 p {
    font-family: "NotoSansDisplay-Regular";
    font-size: 20px;
    color: black;
}

.etap1 b {
    font-family: "NotoSans-Bold";
}

@media screen and (max-width: 769px) {
    .etape {
        margin: 16px;
    }
}

/* Final etape */

/* Product */

.product {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto;
    max-width: 450px;
}

.product img {
    max-width: 100%;
}


/*  */


/* Blue table */

.blue_table {
    margin: 16px 70px;
    border: 1px solid black;
    padding: 16px;
    background-color: #93c9f6;
    font-family: "NotoSansDisplay-Regular";
    font-size: 20px;
}


/*  */

/* Componente */

.comp {
    margin: 16px 70px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: "NotoSansDisplay-Regular";
    font-size: 18px;
}

.comp b {
    font-family: "NotoSans-Bold";
    font-size: 20px;
}

.comp img {
    max-width: 100px;
}

@media screen and (max-width: 769px) {
    .comp {
        margin: 16px;
    }

}

@media screen and (max-width: 610px) {
    .comp {
        flex-direction: column;
    }

}


/* Final componente */


.blue_left {
    display: flex;
    flex-direction: column;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 24px 0;
    gap: 8px;
    margin: 48px 70px;
    position: relative;
}

.blue_left p:last-of-type {
    font-family: "NotoSans-Bold";
    text-align: center;
    color: #CF2B33;
    font-size: 20px;
}

.blue_left img:first-of-type {
    position: absolute;
    background-color: white;
    padding: 8px;
    height: 35px;
    top: -35px;
    left: 30%;
    transform: translateX(-30%);
}

.blue_left img:last-of-type {
    position: absolute;
    background-color: white;
    padding: 8px;
    height: 35px;
    bottom: -35px;
    left: 70%;
    transform: translateX(-70%);
}

.keto {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.prod_ {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 32px;
    max-width: 1136px;
}

.prod {
    max-width: 565px;
}

.table {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 25px;

}

.text_bold {
    font-family: "Roboto-Bold";
    font-size: 40px;
    color: #CF2B33;
    text-align: center;
}

.point {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 731px;
}

.point_1 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.point_1 img {
    width: 64px;
}

.point_1 b {
    font-size: 24px;
    color: #CF2B33;
    font-family: "Roboto-Bold";
}



.garant_ {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0;
}

.garant_img {
    max-width: 367px;
}

.vlasta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 32px;
    background-color: #78BFF9;
    border-radius: 16px;
    padding: 24px;
    max-width: 572px;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.like {
    position: absolute;
    width: 98px;
    right: 8px;
    top: -24px;
}

.vlasta_img {
    display: flex;
    gap: 8px;
    flex-direction: column;
    width: 100%;
}

.paula {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: "NotoSans-Bold";
}

.vlasta__img {
    width: 64px;
}

.vlasta_ {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.vlasta_ p {
    font-family: "NotoSansDisplay-Italic";
    color: white;
    line-height: 22px;
}

.stars {
    display: flex;
}

.stars img {
    width: 24px;
}

.stars_ {
    display: none;
}

.stars_ img {
    width: 24px;
}

.warunki {
    border: 1px solid #04003B;
    background-color: #E5F7FF;
    margin: 32px auto 64px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    border-radius: 8px;
    gap: 48px;
    max-width: 768px;
}

.warunki_title {
    font-family: "Roboto-Black";
    font-size: 24px;
    text-transform: uppercase;
    color: #04003B;
    max-width: 529px;
    text-align: center;
}

.point_ {
    display: flex;
    align-items: center;
    gap: 24px;
}

.point_ img {
    width: 48px;
    height: 48px;
}

._point_ {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._point_ p:first-of-type {
    font-family: "Roboto-Black";
    font-size: 16px;
    color: #04003B;
}

._point_ p:last-of-type {
    font-family: "Roboto-Regular";
    font-size: 16px;
    color: #04003B;
}

.pozor {
    background: linear-gradient(68deg, #FCE478 0%, #FDEB9A 53%, #EAC76E 100%);
    margin: 56px auto;
    max-width: 536px;
    border-radius: 16px;
    padding: 8px 24px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.pozor img {
    width: 60px;
}

.pozor p:first-of-type {
    font-family: 'OpenSans-ExtraBold';
    color: #D60402;
}

.pozor p:last-of-type {
    font-family: 'OpenSans-SemiBold';
    text-align: center;
}



.nota {
    padding: 48px 24px 24px;
    display: flex;
    justify-content: center;
    margin: 88px auto 32px;
    flex-direction: column;
    gap: 36px;
    max-width: 658px;
    border: 2px dashed #429FD2;
    border-radius: 16px;
    position: relative;
}

.med_photo {
    position: absolute;
    width: 90px;
    height: 90px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.form_top {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-bottom: 36px;
}

.price {
    display: flex;
    align-items: center;
    gap: 4px;
}

.price p {
    font-family: "Lato-Black";
}

.price p:first-of-type {
    text-decoration: line-through;
    opacity: 40%;
    font-size: 24px;
}

.price p:nth-child(2) {
    font-size: 29px;
}

.price p:last-of-type {
    color: #FF4800;
    font-size: 29px;
}

.top_left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 304px;
}

.top_right {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 289px !important;
}

.top_right img {
    max-width: 290px;
}

.form_select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form_select p {
    font-family: 'SourceSansPro-Black';
    color: #429FD2;
    font-size: 18px;
}

select {
    padding: 8px 16px;
    border-radius: 8px;
    appearance: none;
    background-color: #F1F1F1;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7 10l5 5 5-5H7z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    border: none;
    font-family: 'SourceSansPro-Light';
    font-size: 16px;
}

select:focus {
    outline: none;
    border: none;
}

input {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background-color: #F1F1F1;
}

input:focus {
    outline: none;
    border: none;
}

.timer {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.hours,
.minutes,
.seconds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.timer p:first-of-type {
    font-family: 'Signika-Bold';
    font-size: 24px;
    color: #132125;
    background-color: white;
    padding: 8px 54px;
    border-radius: 8px;
    box-shadow: 0px 0px 16.6px rgba(36, 173, 245, 0.3);
}


.comand_button {
    margin: 36px auto 0;
    display: flex;
    width: fit-content;
    background-color: #429FD2;
    border-radius: 8px;
    border: none;
    padding: 16px;
    font-family: 'SourceSansPro-Bold';
    font-size: 24px;
    color: white;
    cursor: pointer;
}

.comand_button a {
    color: white;
}

.attention {
    font-family: "Inter-Black";
    font-size: 40px;
    margin: 0 16px;
    color: #F70004;
    display: flex;
    justify-content: center;
    text-align: center;
}

.comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 48px auto;
    max-width: 944px;
}

.comment {
    max-width: 100%;
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.comment1 {
    max-width: 100%;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin-left: 44px;
}

.comment_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.text_top {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    background-color: #F1F1F1;
    border-radius: 8px;
    padding: 8px 12px;
    gap: 4px;
}

.text_top p:first-child {
    font-family: 'SegoeUI-SemiBold';
    font-size: 13px;
    color: #080809;
}

.text_top p:nth-child(2) {
    font-family: 'SegoeUI-Regular';
    font-size: 15px;
    color: #080809;
}

.comm_img {
    max-width: 460px;
}

.photo_user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.likes_date {
    display: flex;
    align-items: center;
    gap: 32px;
}

.likes_date p {
    font-family: 'SegoeUI-Bold';
    font-size: 12px;
    color: #65686C;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}

.likes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.likes img {
    width: 18px;
}

.likes p {
    font-family: 'SegoeUI-Regular';
    font-size: 12px;
    color: #65686C;
}

.button_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px auto;
    background-color: #429FD2;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Inter-Black';
    font-size: 20px;
    color: white;
    cursor: pointer;
}

/* Final main */

/* Footer */

footer {
    background-color: #1D1D1D;
    padding: 32px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
}

footer ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    list-style: none;
    width: 100%;
}

footer ul li {
    font-family: "NotoSans-SemiBold";
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 8px 0;
}

.socials {
    display: flex;
    gap: 15px;
}

.socials img {
    width: 28px;
}

@media screen and (max-width: 852px) {
    footer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 16px;
    }

    footer ul li {
        text-align: center;
    }
}

@media screen and (max-width: 769px) {
    footer {
        padding: 16px 0;
    }
}

/* Final footer */

/* Adaptive */


@media screen and (max-width: 1280px) {
    .attention {
        margin: 0 70px;
    }

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


@media screen and (max-width: 1170px) {

    .photo_center {
        max-width: fit-content;
        width: 100%;
        margin: 8px 70px;
    }

}

@media screen and (max-width: 860px) {

    .photo_cente1r {
        max-width: fit-content;
        width: 100%;
        margin: 8px 70px;
    }

}

@media screen and (max-width: 1100px) {
    .comments {
        max-width: fit-content;
        width: 100%;
        margin: 48px 70px;
    }
}


@media screen and (max-width: 1015px) {
    .warunki {
        max-width: fit-content;
        width: 100%;
        margin: 32px 70px 64px;
    }
}


@media screen and (max-width: 850px) {
    .warunki {
        margin: 32px 70px 64px;
    }
}


@media screen and (max-width: 769px) {
    .title_main {
        font-size: 32px;
        margin: 16px 16px 8px;
    }

    .h3 {
        margin: 8px 16px;
        font-size: 20px;
    }

    .jiri {
        margin: 8px 16px;
    }

    .text_italic {
        margin: 8px 16px;
    }

    .photo_center {
        margin: 8px 0;
        width: auto;
    }

    .text_simple,
    .text__bold,
    .text_red,
    .question,
    .answer,
    .podzal,
    .blue_table {
        margin: 16px;
    }

    .product {
        max-width: 400px;
    }

    .blue_left {
        margin: 48px 16px;
        padding: 24px 0;
        gap: 8px;
    }

    .blue_left p {
        font-size: 16px;
    }

    .blue_left img:first-of-type {
        left: 10px;
    }

    .blue_left img:last-of-type {
        left: 97.4%;
    }

    .garant_ {
        margin: 16px 0;
    }

    .keto {
        margin: 0 16px;
        width: auto;
    }

    .prod {
        max-width: 360px;
    }

    .prod_ {
        max-width: fit-content;
    }

    .point {
        max-width: fit-content;
    }

    .point img {
        width: 64px;
    }

    .garant_img {
        width: 230px;
    }

    .garant {
        width: auto;
        margin: 0;
    }

    .vlasta {
        margin: 50px auto 16px;
    }

    .vlasta_img {
        justify-content: center;
    }

    .paula {
        flex-direction: column;
        position: relative;
    }

    .vlasta__img {
        position: absolute;
        top: -70px;
    }

    .stars {
        display: none;
    }

    .stars_ {
        display: flex;
    }

    .like {
        width: 57px;
    }

    .warunki {
        margin: 32px 0 64px;
        padding: 32px 16px;
        border: none;
    }

    .pozor {
        display: none;
    }

    .nota {
        margin: 88px 16px 32px;
    }

    .nota_text {
        font-family: 'SourceSansPro-Bold';
        font-size: 20px;
    }

    .form {
        padding: 16px 0 0 0;
    }

    .form_title {
        padding: 0 16px;
        font-size: 24px;
        font-family: 'SourceSansPro-Bold';
    }

    .formm {
        margin: 0 0 16px 0;
        width: auto !important;
        border-radius: 0;
    }

    .form_top {
        flex-direction: column;
        align-items: center;
        margin-bottom: 24px;
        gap: 24px;
    }

    .form_select p {
        font-family: 'SourceSansPro-SemiBold';
        font-size: 16px;
    }

    .name_prod {
        font-size: 32px;
    }


    .form_bottom p {
        font-family: 'Signika-Regular';
        font-size: 16px;
    }

    .form_bottom {
        margin: 0 24px;
    }

    .timer {
        margin: 32px 0;
        gap: 8px;
    }

    .timer p:first-of-type {
        font-size: 14px;
        padding: 6px 35px;
    }

    .comand_button {
        font-size: 24px;
        margin: 0 auto;
    }

    .attention {
        font-size: 24px;
        margin: 0 16px;
    }

    .comments {
        margin: 40px 16px 0 16px;
    }

    .comments_top p {
        font-size: 20px;
    }


    .comm_img {
        max-width: 360px;
    }

    .button_bottom {
        font-size: 20px;
    }
}

@media screen and (max-width: 640px) {
    .vlasta {
        margin: 50px 16px 16px;
    }
}

@media screen and (max-width: 610px) {
    .likes_date p:nth-child(4) {
        display: none;
    }
}


@media screen and (max-width: 530px) {
    .nota {
        padding: 48px 24px 16px;
    }
}

@media screen and (max-width: 480px) {
    .likes_date p:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 460px) {
    .comm_img {
        max-width: 100%;
    }
}

@media screen and (max-width: 420px) {
    .likes_date p:nth-child(2) {
        display: none;
    }

    .likes p {
        display: flex !important;
    }
}