*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}
p {
    margin: 0px;
    padding: 0px;
}
:-webkit-any(article, aside, nav, section) h1 {
    font-size: inherit;
    margin-block-start: 0px;
    margin-block-end: 0px;
}
ul li{
    list-style: none;
}
:focus, :active {
    outline: none; 
}
a {
    text-decoration: none;
}
a:focus, a:active {
    outline: none;
}
html, body {
    background: #E97E50;
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.35);
    font-family: "Open Sans";
    margin: 0px;
    text-align: justify;
    font-weight: 400;
    padding: 0px;
    line-height: 170%;
    letter-spacing: 0.015em;
    font-size: 18px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; 
}
input, button, textarea {
    font-family: inherit; 
}
input::-ms-clear {
    display: none; 
}
button {
    cursor: pointer; 
}
button::-moz-focus-inner {
    padding: 0;
    border: 0; 
}
ul {
    padding: 0px;
    margin: 0px;
}
img {
    vertical-align: top; 
}
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit; 
}


.container {
    max-width: 1320px;
    margin: 0 auto;
}
.header {
    position: absolute;
    display: contents;
    min-width: 100%;
}
.header__body {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}
.header__body ul{
    display: flex;
}
.header__body ul li{
    position: relative;
    width: 180px;
    height: 70px;
    z-index: 1;
    margin: 10px 0 15px;
}
.header__body ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.header__body ul li a .list__icons{
    position: relative;
    display: block;
    line-height: 40px;
    font-size: 1.6em;
    transition: 0.2s ease;
    text-align: center;
    color: #fffC;
}
.header__body ul li a:hover .list__icons{
    font-size: 1.8em;
}
.header__body ul li a .list__text{
    color: #fff;
    transition: 0.5s;
    opacity: 0%;
}
.header__body ul li a:hover .list__text{
    opacity: 100%;
    transition: 0.5s;
}
.me {
    margin-bottom: 65px;
    display: flex;
}
.me__body {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.me__photo {
    flex: 0 0 30%;
}
.me__photo img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 100%;
    border: #212121 2px solid;
}
.me__about {
    flex: 0 1 65%;
    background-color: #fff;
    padding: 40px 60px;
    color: #212121;
    text-shadow: none;
}
.me__about h1 {
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    padding-bottom: 15px;
}
.me__about h2{
    font-size: 24px;
    font-weight: 400;
}
.me__about ul li {
    font-size: 20px;
    font-weight: 400;
}
.service {
    background-image: url("../img/background.png");
    padding-top: 65px;
    margin-bottom: 65px;
}
.service__card {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.card__body {
    flex: 0 1 30%;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background-color: #fff;
    margin-bottom: 5%;
    text-shadow: none;
}
.card__image {
    margin-bottom: 20px;
}
.card__image img {
    max-width: 100%;
    max-height: 100%;
}
.card__content {
    display: inherit;
    flex-direction: column;
}
.card__title {
    margin: 0 auto;
    width: 75%;
    color: #212121;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 15px;
}
.card__subtitle {
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 20px;
}
.card__btn {
    width: 50%;
    margin: 0 auto;
    color: #212121;
    font-weight: 600;
    text-underline-offset: 10px;
    text-decoration: underline #212121;
}
.card__btn:hover {
    transition: 0.15s ease;
    color: #E97E50;
    text-decoration: underline #E97E50;
}
.natcard, .astrogame, .talents,
.finance, .style, .finance__footer,
.solar, .match, .love {
    display: flex;
    justify-content: space-between;
}
.natcard__card, .astrogame__card, 
.talents__card, .finance__card,
.style__card, .solar__card,
.match__content, .love__card {
    flex: 0 0 47%;
}
.list {
    flex: 0 0 47%;
}
.card__text-top {
    width: 50%;
    line-height: 1.2;
    text-align: left;
    color: #212121;
    font-size: 45px;
    font-weight: 700;
}
.card__body span {
    display: block;
    width: 100%;
    margin: 30px 0;
    background-color: #212121;
    height: 3px;
}
.card__text-bottom {
    text-align: left;
    color: #212121;
    font-size: 18px;
    font-weight: 300;
    line-height: 180%;
}
.natcard, .natcard__more, .finance,
.finance__more, .talents, .talents__more,
.astrogame, .astrogame__how, .solar , .solar__more {
    padding-bottom: 30px;
}
.natcard__footer, .finance__footer, 
.talents__footer, .style, .match,
.love, .services__price {
    padding-bottom: 65px;
}
.natcard__list ol, .astrogame__list ol,
.talents__list ol, .finance__list ol,
.style__list ol, .solar__list ol,
.match__list ol, .love__list ol {
    list-style-type: decimal-leading-zero;
}
.natcard__list ol li, .astrogame__list ol li,
.talents__list ol li, .finance__list ol li,
.style__list ol li, .solar__list ol li,
.match__list ol li, .love__list ol li{
    margin-left: 1rem;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 180%;
    margin-bottom: 20px;
}
.natcard__list ol li::marker, .astrogame__list ol li::marker,
.talents__list ol li::marker, .finance__list ol li::marker,
.style__list ol li::marker, .solar__list ol li::marker,
.match__list ol li::marker, .love__list ol li::marker {
    color: #fff;
    font-size: 34px;
    font-weight: 300;
    margin-left: -10rem;
}
.more__list, .talents__more.list {
    display: flex;
    justify-content: space-between;
}
.more__list ul, .talents__more.list ul,
.solar__more ul {
    flex: 0 0 47%;
}
.more__list ul li, .talents__more.list ul li,
.solar__more ul li {
    padding-bottom: 15px;
}
.more__list ul li:last-child, 
.talents__more.list ul li:last-child
.solar__more ul li:last-child {
    padding: 0;
}
.more__list ul li::before, 
.talents__more.list ul li::before,
.solar__more ul li::before {
    content: '- ';
}
.natcard__footer {
    display: flex;
}
.natcard__footer .card__text-top,
.astrogame__footer .card__text-top,
.style__card .card__text-top {
    width: 75%; 
}
.natcard__footer .card__body,
.astrogame__footer .card__body,
.style__card .card__body{
    flex: 0 0 50%;
}
.how__steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.how__steps * {
    flex: 0 0 47%;
}
.step {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 180%;
}
.how__step1::before {
    content: 'Шаг 1. ';
    font-size: 24px;
    font-weight: 700;
}
.how__step2::before {
    content: 'Шаг 2. ';
    font-size: 24px;
    font-weight: 700;
}
.how__step3::before {
    content: 'Шаг 3. ';
    font-size: 24px;
    font-weight: 700;
}
.astrogame__how {
    margin-bottom: 30px;
}
.astrogame__footer {
    display: flex;
    justify-content: flex-end;
}
.astrogame__footer-btn {
    width: 40%;
    margin: 0 auto;
    background-color: #212121;
    color: #fff;
    padding: 6px 15px;
}
.talents__footer {
    display: flex;
    justify-content: space-between;
}
.talents__footer .card__text-top {
    width: 50%; 
}
.talents__footer .card__body {
    flex: 0 0 40%;
}
.talents__footer-info {
    flex: 0 0 55%;
}
.solar__card .card__text-top {
    width: 30%;
}
.solar__list ol li span,
.match__list ol li span {
    font-weight: 600;
    font-size: 18px;
}
.solar__list-title {
    width: 13%;
}
.solar__more ul {
    width: 50%;
}
.match__list-title {
    width: 60%;
}
.match__content-more {
    color: #fff;
}
.price__card .card__text-top {
    font-weight: 400;
    width: 100%;
}
.price__card .card__text-top span {
    font-weight: 700;
    display: contents;
}
.price__content {
    display: flex;
    justify-content: space-between;
}
.price__gift {
    color: #fff;
    flex: 0 0 47%;
}

.footer {
    background-color: #212121;
    padding: 50px 0 75px 0;
}
.footer__content {
    flex: 0 1 40%;
}
.footer__body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.footer__body a, .footer__social p {
    color: #fff;
    margin-bottom: 30px;
}
.footer__body i {
    font-size: 40px;
}
.footer__btn {
    display: block;
    align-items: center;
}
.footer__btn a {
    color: #fff;
    width: 20px;
    margin-right: 40px;
}
.footer__btn a:last-child {
    margin: 0;
}
.title {
    color: #fff;
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    line-height: 180%;
    margin-bottom: 65px;
}
.subtitle {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 180%;
    padding-bottom: 20px;
}
.services .list ul li{
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 180%;
}

@media (max-width: 1199px) {
    .map__image, .final__image {
        width: 450px;
    }
    .we__image {
        max-width: 370px;
    }
}
@media (max-width: 991px) {
    .quote__text h1 {
        font-size: 20px;
        letter-spacing: normal;
    }
    .quote__text h2 {
        font-size: 9px;
    }
    .quote__elements {
        padding: 20px 40px;
    }
    .content {
        display: block;
    }
    .feedback__content {
        display: flex;
    }
    .feedback__image {
        flex: 0 0 45%;
    }
    .price__text, .form__form {
        width: 60%;
    }    
}
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    .header__body {
        display: block;
    }
    .form__form form input, 
    .form__form form button  {
        width: 70%;
    }
    .me__body {
        flex: 0 0 80%;
        flex-direction: column;
        gap: 50px;
        justify-content: space-between;
        align-items: start;
    }
    .service__card, .card__body {
        flex: 0 0 80%;
        justify-content: center;
        align-items: center;
    }
    .natcard, .natcard__more, .natcard__footer,
    .astrogame, .astrogame__how, .astrogame__footer,
    .talents, .talents__more, .talents__footer,
    .finance, .finance__more, .finance__footer,
    .style, .solar, .solar__more, .match,
    .love, .price__content, .finance__more,
    .natcard__more .more__list, .how__steps,
    .finance__more .more__list {
        flex: 0 0 80%;
        display: flex;
        flex-direction: column;
    }
    .services__natcard, .services__astrogame,
    .services__finance, .services__love,
    .services__match, .services__talents,
    .services__style, .services__solar,
    .services__price {
        max-width: 80%;
        margin: 0 auto;
    }
    .solar__more .solar__list-title,
    .solar__more ul,
    .match__list-title {
        width: 100%;
    }
    .card__text-top {
        width: 70%;
        line-height: 1.2;
        text-align: center;
        color: #212121;
        font-size: 24px;
        font-weight: 700;
    }
    .card__text-bottom, .match__card {
        text-align: center;
    }
    .natcard__more .more__list, .how__steps,
    .finance__more .more__list {
        gap: 50px;
    }
    .how__arrow {
        display: none;
    }
    
}
@media (max-width: 575px) {
    .me__about li, .natcard__list ol li, .natcard__title,
    .more__list li, .more__title, .astrogame__list li,
    .how__steps, .talents__list li, .talents__list-title,
    .talents__more li, .finance__list li, .talents__foter-text,
    .style__list li, .solar__list li, .finance__list-title,
    .solar__more li, .match__list li, .match__list-title,
    .match__content-more, .love__list ol li, .love__list-title,
    .price__gift, .price__title, .list__title, .list li {
        text-align: left;
    }
    .header__body ul {
        justify-content: center;
    }
    .quote__text h1 {
        font-size: 14px;
    }
    .card__body {
        padding: 15px 30px;
    }
    .card__list li {
        padding: 0 0 10px 20px;
    }
    .feedback__content {
        display: block;
    }
    .feedback__image {
        justify-content: center;
    }
    .feedback__image img {
        max-width: 60%;
    }
    .quote__elements {
        padding: 10px 20px;
    }
    .quote__btn a {
        padding: 5px 50px;
    }
    .price__text, .form__form {
        width: 85%;
    }
    .form__form form input, .form__form form button {
        width: 85%;
    }
    .header__body ul li {
        width: 22vw;
    }
    .footer {
        padding: 0 10px;
        height: 250px;
    }
    .footer__site-name a p {
        margin: 15px 0;
    }
    .footer__social p {
        text-align: center;
    }
    .footer__body {
        flex-direction: column;
        align-items: center;
    }
    .footer__content {
        width: 50%;
        text-align: center;
    }

}
@media (min-width: 576px) { 
    .container {
        width: 540px !important;
    }
}
@media (min-width: 768px) {
    .container {
        width: 720px !important;
    }
}
@media (min-width: 992px) { 
    .container {
        width: 960px !important;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1140px !important;
    }
}
@media (min-width: 1400px) {
    .container {
        width: 1320px !important;
    }
}