@font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/SFProText-Semibold.eot');
    src: url('../fonts/SFProText-Semibold.eot#iefix') format('embedded-opentype'), url('../fonts/SFProText-Semibold.woff2') format('woff2'), url('../fonts/SFProText-Semibold.woff') format('woff'), url('../fonts/SFProText-Semibold.ttf') format('truetype'), url('../images/SFProText-Semibold.svg#SFProText-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/SFProText-Regular.eot');
    src: url('../fonts/SFProText-Regular.eot#iefix') format('embedded-opentype'), url('../fonts/SFProText-Regular.woff2') format('woff2'), url('../fonts/SFProText-Regular.woff') format('woff'), url('../fonts/SFProText-Regular.ttf') format('truetype'), url('../images/SFProText-Regular.svg#SFProText-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
    background: rgba(229, 229, 229, 1);
    font-family: "Inter", sans-serif;
    color: rgba(43, 43, 43, 1);
    margin: 0 0 10px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}
p,h1,h2,h3,h4,h5,h6 {
margin:0;
}
h1 {
    color: white;
    font-family: Inter;
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
    max-width: 730px;
}
h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 29.05px;
    margin-bottom:24px;
}
    h2 span {
       color: rgba(255, 59, 66, 1);
    }

h3 {
    font-size: 36px;
    font-weight: 500;
    line-height: 43.57px;
    text-align: center;
    margin-bottom:24px;
}
    h3 span {
        font-size: 48px;
        font-weight: 700;
        line-height: 58.09px;
        text-align: center;
        display: block;
       color: rgba(255, 59, 66, 1);
    }
p {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}
        .img {
            margin: 12px 0px 24px;
            max-width: 100%;
        }
ul li{
    list-style:none;
}
ul{
    padding:0;
    margin:0px 0px 24px;
}
li {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    margin-top: 8px;
    display: flex;
    align-items: center;
}
    li:before {
        content: '';
        border-radius: 100%;
        min-width: 5px;
        height: 5px;
        display: block;
        background: rgba(43, 43, 43, 1);
        margin-right: 12px;
    }
a {
    text-decoration: none;
    color: rgba(43, 43, 43, 1);
}
.link{
    font-weight:700;
}
    .link:hover {
        color: rgba(255, 59, 66, 1);
    }
a:hover{
    text-decoration:underline;
}
.wrapper {
    max-width: 1296px;
    margin: -128px auto 0px;
    background: rgba(255, 255, 255, 1);
}
header {
    background: url(../images/header.png) no-repeat center right, rgba(43, 43, 43, 1);
}
    header .container {
        max-width: 1256px;
        margin: auto;
        padding:40px 20px 160px;
    }
.header__content{
    display:flex;
    justify-content:space-between;
   align-items:center;
   margin-bottom:54px;
}

.header__nav{
    display:flex;
    align-items:center;
}
    .header__nav a {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        color:white;
        text-transform: none;
        margin-right: 24px;
    }
.header__search{
    display:flex;
    align-items:center;
}
    .header__search input {
        height: 50px;
        width: 247px;
        border-radius: 4px;
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        border: none;
        padding: 0px 20px;
        color: rgba(101, 101, 101, 1);
        background: url(../images/search.svg) no-repeat center right 22px,rgba(255, 255, 255, 1);
    }
        .header__search input::placeholder {
            font-family: 'Roboto';
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            color: rgba(101, 101, 101, 1);
        }
.header__search_icon{
    margin-left:36px;
}
    .header__search_icon a{
        margin-left:12px;
    }
.author__content{
    display:flex;
    align-items:center;
}
    .author__content .name {
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        color:white;
        margin-bottom:8px;
    }
    .author__content .date {
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        color: rgba(255, 255, 255, 1);
        opacity: 50%;
        margin-top: 8px;
    }
.author__text{
    margin-left:24px;
}
.main {
    display: flex;
    justify-content: space-between;
    padding:34px 24px 34px 34px;
}
.main__right {
    max-width: 316px;
    border-left: 1px solid rgba(189, 187, 187, 1);
    padding-left:24px;
    margin-left: 24px;
    box-sizing: border-box;
}
.column .item{
    margin-top:24px;
}
.main__right h3{
    margin-top:0px;
}
.column .item p {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 12px;
}
    .column .item img{
        width:100%;
    }
.main__left {
    width:100%;
    box-sizing:border-box;
}
.text{
    margin-bottom:12px;
}
.text2 {
    margin-bottom: 24px;
}

        .comment_block {
        margin: 60px 0px 0px;
    }
        .comment_block h5 {
            font-size: 36px;
            font-weight: 500;
            line-height: 47.99px;
            color: #01216A;
          
        }
.comment_block__comm {
    color: rgba(19, 20, 25, 1);
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin-top: 96px;
    margin-bottom: -16px;
}
.comment {
    margin: 40px 0px 0px;
    padding-top: 40px;
    border-top: 1px solid rgba(189, 187, 187, 1);
    display:flex;
}
.comment__img{
    min-width:60px;
}
.comment__img img {
    width: 100%;
}
.comment .name {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}
.comment__main{
    padding:0px 0px 0px 25px;
    width:100%;
}
    .comment .text {
        margin: 12px 0px 0px;
    }
.comm__date {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 5px;
}
.comm_btn {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: rgba(28, 33, 52, 1);
    background: rgba(229, 229, 229, 1);
    border-radius: 4px;
    padding: 6px 12px;
    min-width:80px;
    width: fit-content;
    display: block;
    margin-left:auto;
}

.comment__bottom{
    display:flex;
    align-items:center;
    justify-content:end;
    margin-top:48px;

}
    .comment__bottom div{
        display:flex;
    }
    .comment__bottom div a:first-child {
        margin-right: 24px;
    }

.comment_ans{
   margin-left:84px;
}


    .dop_comm {
        margin-top: 12px;
        width: 100%;
        max-width: fit-content;
    }
.added_comment {
    border-top: 1px solid rgba(189, 187, 187, 1);
    padding: 24px 0px 0px;
    margin-top: 40px;
}
    .added_comment p {
        color: rgba(28, 33, 52, 1);
        font-size: 24px;
        font-weight: 500;
        line-height: 29px;
    }
    .added_comment textarea {
        width: 100%;
        border: 1px solid rgba(189, 187, 187, 1);
        border-radius: 4px;
        min-height: 100px;
        margin: 12px 0px;
        resize: none;
    }
    a{
        cursor:pointer;
    }
.relative-1 div p {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}
.relative-1 .main_rel{
    margin-left:87px;
}
.relative-1 .main_rel p:first-child {
    margin-bottom: 56px;
}
    .relative-1 div p span {
        font-size: 32px;
        font-weight: 700;
        line-height: 26px;
        margin-right: 8px;
    }
    .relative-1 div p img{
        margin-right:8px;
    }
.relative-1 .border{
    padding:30px 15px 8px 0px ;
    position:relative;
    margin:22px 0px 0px;
}
.relative-1 .border:after {
    content:"";
    position:absolute;
    background:url(../images/border.svg) center right;
    width:74px;
    height:243px;
    top:0;
    bottom:0;
    right:0;
}
.relative-1 .border p {
    margin-bottom: 48px;
}
.relative-1{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:68px 0px 0px;
}
.dop {
    color: rgba(153, 153, 153, 1);
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    margin-bottom: 68px;
}
.relative-2{
    position:relative;
    width:890px;
    margin-bottom:24px;
    margin-top:12px;
}
.abs-1 {
    text-align: center;
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%, 0);
}
.abs-1 p{
margin-top:16px;
}
.abs-2{
    position:absolute;
    display:flex;
    justify-content:space-around;
    width:100%;
    top:155px;
}
.abs-3 {
    position:absolute;
    top:219px;
    left:50px;
}
.abs-4 {
    position: absolute;
    top: 266px;
    left: 130px;
}
.abs-5 {
    position: absolute;
    top: 313px;
    left: 60px;
}
.abs-6 {
    position: absolute;
    top: 219px;
    right:250px;
}
.abs-7 {
    position: absolute;
    top: 348px;
    right: 269px;
}
.abs-8 {
    position: absolute;
    top: 391px;
    right: 215px;
}
.abs-9 {
    position: absolute;
    top: 458px;
    right: 221px;
}
.abs-10 {
    position: absolute;
    top: 504px;
    right: 191px;
}
.abs-11 {
    position: absolute;
    max-width: 150px;
    bottom: 326px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align:center;
}
.abs-12 {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    width:100%;
}
    .abs-12 p {
        width:158px;
        text-align:center;
        margin:0px 17px;
    }
    .relative-2 h6 {
        font-family: 'Roboto';
        font-size: 30px;
        font-weight: 700;
        line-height: 35.16px;
        text-align: center;
    }
.relative-2 p {
    font-size: 20px;
    font-weight: 400;
    line-height: 23.44px;
    letter-spacing: -0.30000001192092896px;
    color: rgba(153, 153, 153, 1);
}
        .relative-2 p span {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            color: rgba(43, 43, 43, 1);
        }
.relative-3{
    position:relative;
    width:375px;
    margin:24px auto;
}
.relative-2 img {
    width: 100%;
}
    .relative-3 img{
        width:100%;
    }
    .relative-3 p {
        font-family: 'SF Pro Text';
        font-size: 16px;
        font-weight: 400;
        line-height: 1.3;
        text-align: left;
        color: rgba(0, 0, 0, 1);
    }
        .relative-3 p span {
            font-weight:600;
        }
.rel_abs-1{
    position:absolute;
    top:55px;
    left:110px;
}
.rel_abs-2 {
    position: absolute;
    right: 85px;
    top: 100px;
}
.rel_abs-3 {
    position: absolute;
    right:80px;
    top:135px;
}
.rel_abs-4{
    position: absolute;
    left:20px;
    top: 310px;
}
.rel_abs-5 {
    position: absolute;
    right: 80px;
    bottom: 430px;
}
.rel_abs-6 {
    position: absolute;
    max-width: 270px;
    right: 27px;
    bottom: 145px;
}
@media (max-width:1200px) {
    .main {
            flex-direction: column;
        }

        .main__right {
            border: none;
            padding: 0;
            margin: 48px auto 0px;
            max-width: 100%;
        }

        .column {
            display: flex;
            flex-wrap: wrap;
            margin: 0px auto;
            justify-content: center;
            max-width:800px;
        }

            .column a {
                margin: 12px;
                width: calc(50% - 24px);
            }

        .header__content {
            flex-direction: column;
            align-items: start;
            margin-bottom: 24px;
        }

        .header__nav {
            margin-bottom: 24px;
        }
        header {
            background-size: cover;
        }
    }
@media (max-width:930px) {
    .relative-2{
        max-width:500px;
    }
    .relative-2 {
        position: relative;
        margin:auto;
        margin-bottom: 24px;
        margin-top: 12px;
    }

    .abs-1 {
        text-align: center;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }

        .abs-1 p {
            margin-top: 10px;
        }

    .abs-2 {
        position: absolute;
        display: flex;
        justify-content: space-around;
        width: 100%;
        top: 80px;
    }

    .abs-3 {
        position: absolute;
        top: 110px;
        left: 45px;
        max-width:50px;
    }

    .abs-4 {
        position: absolute;
        top: 147px;
        left: 60px;
    }

    .abs-5 {
        position: absolute;
        top: 172px;
        left: 15px;
    }

    .abs-6 {
        position: absolute;
        top: 119px;
        right: 150px;
    }

    .abs-7 {
        position: absolute;
        top: 193px;
        right: 163px;
    }

    .abs-8 {
        position: absolute;
        top: 215px;
        right: 140px;
        max-width:50px;
    }

    .abs-9 {
        position: absolute;
        top: 253px;
        right: 125px;
    }

    .abs-10 {
        position: absolute;
        top: 279px;
        right: 110px;
    }
    .relative-2 p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.30000001192092896px;
        color: rgba(153, 153, 153, 1);
    }

        .relative-2 p span {
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            color: rgba(43, 43, 43, 1);
        }
    .relative-2 .abs-11 {
        position: absolute;
        max-width: 170px;
        bottom: 180px;
        line-height: 1;
        left: 50%;
        transform: translate(-50%, 0);
        text-align: center;
    }
        .relative-2 .abs-11 span {
            font-size: 14px;
            line-height:1;
        }
        .abs-12 {
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
    }

        .abs-12 p {
            width: 100px;
            text-align: center;
            margin: 0px 3px;
            font-size:12px;
        }

    .relative-2 h6 {
        font-family: 'Roboto';
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }


}
    @media (max-width:730px) {
        header {
            background:  rgba(43, 43, 43, 1);
        }

        .header__content {
            display: none;
        }

        .main {
            padding: 20px 10px;
        }
        .relative-1{
            flex-direction:column;
            margin:24px auto;
        }
            .relative-1 .main_rel{
                margin:20px auto 0px;
            }
            .dop{
                margin-bottom:44px;
            }
    }

    @media (max-width:550px) {
        h1 {
            font-size: 24px;
            line-height: 1.2;
        }

        h2 {
            font-size: 20px;
            line-height: 1.2;
        }
        h3 {
            font-size: 24px;
            line-height: 1.2;
        }
            h3 span {
                font-size: 30px;
                line-height: 1.4;
            }
            .comment__main {
                padding-left: 12px;
            }

        #terra-wrapper .order-wrapper .terra-btn, .btn-wrapper .terra-btn {
            box-sizing: border-box;
        }

        #terra-wrapper .prod-wrapper img {
            width: 100%;
        }

        .author__content img {
            width: 80px;
        }

        .author__text {
            margin-left: 12px;
        }

        .column a {
            width: 100%;
            margin: 12px 0px 0px;
        }

        .comment__bottom {
            flex-direction: column;
            align-items: start;
        }

            .comment__bottom div {
                flex-direction: column;
            }

        .comm_btn {
            margin-left:0px;
            margin-bottom: 12px;
        }

        .comment_ans {
            margin-left: 0px;
        }

        .column {
            max-width: 400px;
            margin: auto;
        }

        .main__right h3 {
            margin-bottom: 0px;
        }
        .relative-2 {
            max-width: 300px;
        }

        .relative-2 {
            position: relative;
            margin: auto;
            margin-bottom: 24px;
            margin-top: 12px;
        }

        .abs-1 {
            text-align: center;
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0);
        }

            .abs-1 p {
                margin-top: 5px;
            }

        .abs-2 {
            position: absolute;
            display: flex;
            justify-content: space-around;
            width: 100%;
            top: 45px;
        }

        .abs-3 {
            position: absolute;
            top: 70px;
            left: 35px;
            max-width: 50px;
        }

        .abs-4 {
            position: absolute;
            top: 89px;
            left: 42px;
        }

        .abs-5 {
            position: absolute;
            top: 103px;
            left: 15px;
        }

        .abs-6 {
            position: absolute;
            top: 72px;
            right: 85px;
        }

        .abs-7 {
            position: absolute;
            top: 117px;
            right: 93px;
        }

        .abs-8 {
            position: absolute;
            top: 130px;
            right: 60px;
            max-width: 50px;
        }

        .abs-9 {
            position: absolute;
            top: 152px;
            right: 75px;
        }

        .abs-10 {
            position: absolute;
            top: 168px;
            right: 68px;
        }

        .relative-2 p {
            font-size: 8px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.30000001192092896px;
            color: rgba(153, 153, 153, 1);
        }

            .relative-2 p span {
                font-size: 15px;
                font-weight: 700;
                text-align: center;
                color: rgba(43, 43, 43, 1);
            }

        .relative-2 .abs-11 {
            position: absolute;
            max-width: 100px;
            bottom: 110px;
            line-height: 1;
            left: 50%;
            transform: translate(-50%, 0);
            text-align: center;
        }

            .relative-2 .abs-11 span {
                font-size: 10px;
                line-height: 1;
            }

        .abs-12 {
            position: absolute;
            display: flex;
            justify-content: center;
            bottom: 25px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 100%;
        }

            .abs-12 p {
                width: 50px;
                text-align: center;
                margin: 0px 6px;
                font-size: 6px;
            }

        .relative-2 h6 {
            font-family: 'Roboto';
            font-size: 12px;
            font-weight: 700;
            line-height: 1.1;
            text-align: center;
        }
    }

@media (max-width:400px) {
    .relative-1 .img_1{
        width:100%;
    }
    .relative-3 {
        max-width: 300px;
    }
        .relative-3 p{
            font-size:12px;
        }
    .rel_abs-6 {
        max-width: 200px;
        right: 38px;
        bottom: 130px;
    }
    .rel_abs-4 {
        left: 21px;
        top: 248px;
    }
    .rel_abs-5 {
        right: 75px;
        bottom: 349px;
    }
    .rel_abs-3 {
        right: 75px;
        top: 108px;
    }
    .rel_abs-2 {
        right: 75px;
        top: 78px;
    }
    .rel_abs-1 {
        top: 45px;
        left: 85px;
    }
}