:root {
    --white: #fff;
    --white-dark: #F9FDF7;
    --black: #000408;
    --gray: #AEAFAF;
    --gray-medium: #8e969e;
    --gray-light: #686D72;
    --blue: #149EC5;
    --blue-green: #22b7a5;
    --green: #20D086;
    --red: #EB5757;
    --main-grad-color: linear-gradient(90deg,#149EC5 0%,#20D086 100%);
    --font-color: var(--white);
    --font-color-second: var(--gray);
    --font-color-third: var(--black);
    --error-color: var(--red);
    --font-size: 2.7rem;
    --font-size-small: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-h1: 5.4rem;
    --font-size-h2: 4.2rem;
    --font-size-h3: 2.8rem;
    --font-size-h4: 2rem;
    --font-size-h5: 1.8rem;
    --font-size-h6: 1.6rem;
    --font-family: "Roboto", sans-serif;
}

.swiperPortfolioTop .portfolio-item__img {
    height: 49.5rem;
    text-align: center;
}
.swiperPortfolioTop .portfolio-item__img img {
    width: auto;
    height: 100%;
    max-height: 100%;
}
.portfolio-item__img:before {
    z-index: -1;
}
.portfolio-item--small .portfolio-item__img:before {
    width: 27rem;
    height: 22rem;
}
.stars {
    width: calc(2.9rem*5);
}
h1.entry-title {
    color: #fff;
    font-weight: 600;
    margin-bottom: 3.2rem;
    text-transform: uppercase;
    background: var(--main-grad-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.entry-content h3 {
    font-size: var(--font-size);
    margin:4.2rem 0 1.6rem
}
.entry-content p {
     font-size: 1.8rem;
     margin-bottom: 1rem
}
.breadcrumbs ul.list-unstyled {
    display: flex;
    margin-bottom: 6rem;
}
.breadcrumbs ul.list-unstyled li {
    margin-right: 1.5rem;
    position: relative;
}
.breadcrumbs ul.list-unstyled li,
.breadcrumbs ul.list-unstyled li span,
.breadcrumbs ul.list-unstyled li a {
    font-size: var(--font-size-small);
    color: var(--gray);
}
.breadcrumbs ul.list-unstyled li a:hover {
    color: var(--white);
}
.breadcrumbs ul.list-unstyled li:not(:last-child):before {
    content: '>';
    position: absolute;
    right: -1.2rem;
    top: 0;
    font-size: var(--font-size-small);
    color: var(--font-color-second);
    opacity: .8;
}
body.error404 {
    height: 100vh;
    max-height: 100%;
}
.error404 main {
    height: calc(100% - 12rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: initial;
}
.page-404-block {
    width: 76rem;
    max-width: 100%;
    text-align: center;
    margin: 3rem 0;
}
.error404 .footer {
    display: none;
}
.develop__title {
    font-size: 28rem;
    line-height: 1;
    font-weight: bold;
}
.develop__subtitle {
    margin: 0 0 3.2rem;
}
.develop__subtitle h1 {
    color: var(--blue);
    font-size: var(--font-size-h2);
    margin-bottom: 0;
    font-weight: 300;
}
.bg--decor-mod10 {
    width: 65rem;
    height: 68rem;
    background-image: url('../img/bg-decor-page1.svg');
    top: 0;
    right: 0;
}
.bg--decor-mod11 {
    width: calc(105.6rem - 38.3rem);
    height: calc(73.4rem - 23.5rem);
    background-image: url('../img/bg-decor-page2.svg');
    bottom: 0;
    left: 0;
}
input.wpcf7-form-control.wpcf7-submit {
    width: 100%;
}
.wpcf7-form .form__submit {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-border-radius: 3.2rem;
    -moz-border-radius: 3.2rem;
    border-radius: 3.2rem;
}
.wpcf7-form .form__submit:after {
    content: "";
    margin-left: 5rem;
    width: 4rem;
    height: 30rem;
    background: #fff;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    position: absolute;
    left: -4rem;
    top: -15rem;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation-name: slideme;
    animation-name: slideme;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.wpcf7-form .form__submit input {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    transition: all .3s;
}
.wpcf7-form .form__submit:hover {
    -webkit-box-shadow: 0 0 10px 10px rgba(20, 158, 197, 0.3);
    box-shadow: 0 0 10px 10px rgba(20, 158, 197, 0.3);
}
.wpcf7-form .form__submit:hover input {
    background-size: 150%;
}
span.wpcf7-spinner {
    position: absolute;
    right: -6rem;
}
.form__approval,
.form__approval a.link {
    font-size: 1.4rem;
    color: var(--font-color-second);
    line-height: 1.2;
}
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-weight: normal;
    display: block;
    position: absolute;
    font-size: 1.6rem;
    left: 0;
    top: calc(100% + 1.6rem);
}
.wpcf7 form .wpcf7-response-output {
    margin: 2rem 0 0;
    padding: 0;
    border: none;
    font-size: 1.9rem;
    color: #ffb900;
    position: absolute;
    left: 0;
    top: 100%;
}
.portfolio-item--small .portfolio-item__img {
    max-height: 100%;
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portfolio-item--small .portfolio-item__img img {
    object-fit: contain;
}
.contacts__data-item {
    margin-bottom: 3rem;
}
.form__control {
    letter-spacing: 3px;
}
.products__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.products__inner .products__item {
    width: calc(33.3333% - 1rem);
    margin-bottom: 2rem;
}
.link-created {
    text-decoration: underline;
}
.title p {
    font-weight: 600;
    text-transform: uppercase;
}
.section--reliable {
    padding: 13rem 0 4rem;
}
.section--portfolio {
    padding: 13rem 0;
}
.section--faq {
    padding: 12rem 0 4rem;
}
.section.section--feedback {
    padding: 3rem 0 0;
}
@media (max-width: 1024px) {
    .products__inner .products__item {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }
}
@media (max-width: 992px) {
    .section--reliable {
        padding: 9rem 0 13rem;
    }
    .section--portfolio {
        padding: 5rem 0;
    }
    .qr-code__item-link {
        width: 100%;
        height: 10rem;
        position: relative;
        background-color: var(--font-color-second);
        display: flex;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        -webkit-border-radius: 3.2rem;
        -moz-border-radius: 3.2rem;
        border-radius: 3.2rem;
    }
    .qr-code__item-link:before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 7rem;
        height: 7rem;
        background-position: center;
        -webkit-background-size: contain;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .qr-code__item-link img {
        display: none;
    }
    .qr-code__item-link--whatsapp {
        background-color: #2bd14b;
    }
    .qr-code__item-link--whatsapp:before {
        background-image: url(../img/ico-whatsapp-w.svg);
    }
    .qr-code__item-link--telegram {
        background-color: #27A6EC;
    }
    .qr-code__item-link--telegram:before {
        background-image: url(../img/ico-tg-w.svg);
    }
    .qr-code__item-link--vk {
        background-color: rgb(0, 119, 255);
    }
    .qr-code__item-link--vk:before {
        background-image: url(../img/ico-vk-w.svg);
    }
    .review__header-content,
    .review__header-info,
    .review__body,
    .accordion__title,
    .accordion__body {
        font-size: 1.9rem;
    }
}
@media (max-width: 768px) {
    :root {
        --font-size-small: 1.8rem;
    }
    .form--hero {
        width: 40rem;
        margin: auto;
    }
    .wpcf7 form .wpcf7-response-output {
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        text-align: center;
    }
    .module.module--price {
        text-align: center;
    }
    .section .btn--call {
        font-size: var(--font-size-h3);
    }
    .section .btn--call .btn__ico {
        margin-right: 1.2rem;
    }
}
@media (max-width: 575px) {
    .swiperPortfolioTop .portfolio-item__img {
        width: 100%;
        height: 65vw;
        margin-bottom: 2rem;
    }
    .swiperPortfolioTop .portfolio-item__img img {
        width: 100%;
        object-fit: contain;
    }
    .products__inner .products__item {
        width: 100%;
        margin-bottom: 4rem;
    }
    .review__header-content,
    .review__header-info {
        font-size: 2rem;
    }
    .review .link,
    .review__body,
    .accordion__title,
    .accordion__body {
        font-size: 2.2rem;
    }
    .review__body {
        height: 16rem;
    }
}
@media (max-width: 525px) {
    .steps__item--contacts {
        padding-right: 0;
    }
}
@media (max-width: 425px) {
    .portfolio-item__img:before {
        width: 50rem;
        height: 39rem;
    }
}
@media (max-width: 375px) {
    .develop__title {
        font-size: 22rem;
    }
}

.header__mode {
    font-size: 2rem;
}
.header__mode--mail {
    color: white;
    /* background: var(--main-grad-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.header .social__item {
    width: 4rem;
    height: auto;
}
@media (max-width: 992px) {
    .header__data-content {
        align-items: center;
        flex-direction: row;
    }
}
@media (min-width: 575.98px) {
    .header__mode--mail {
        margin-bottom: 0;
    }
}
@media (min-width: 575.98px) and (max-width: 800px) {
    .header__mode--time {
        display: none;
    }
}
@media (max-width: 575px) {
    .header__mode {
        font-size: 2.4rem;
    }
}
/* Header menu and mobile social content */
.burger {
    width: 42px;
    height: 30px;
}
.burger__item {
    height: 3px;
}
.burger.active .burger__item:first-child  {
    top: 14px;
}
.burger.active .burger__item:nth-child(3) {
    top: -13px;
}
.header__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 3px);
    width: 34rem;
    max-width: 100%;
    padding: 16px;
    border-radius: 4.2rem;

    background: linear-gradient(117.58deg, rgba(215, 237, 237, 0.16) -47.79%, rgba(204, 235, 235, 0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 0;
    visibility: hidden;
    transition: all .3s;

    z-index: 999;
}

.header__menu.active {
    top: calc(100% + 1.5rem);
    opacity: 1;
    visibility: visible;
}

.header__menu::before {
    content: '';
    position: absolute;
    inset: 0; 
    z-index: -1;

    border-radius: 4.2rem; 
    padding: 1px;

    background: linear-gradient(270deg, #000000 0%, #666666 100%);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.header__burger {
    display: block;
    margin-left: 20px;
}

.header-menu__nav {
    position: relative;
    width: 100%;
    height: auto;
    text-align: right;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.6rem;
}
.header-menu__nav li a {
    font-size: 2.4rem;
}
.header-menu__nav li a:hover {
    background: var(--main-grad-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header__contacts {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}
.btn--m img {
    width: 19px;
    height: auto;
}
.btn--max-mob {
    background: var(--main-grad-color);
}
.logo__img--mobile {
    width: 45px;
}
@media (min-width: 768.98px) {
    .btn--max-mob,
    .btn--mail-mob {
        display: none;
    }
}
@media (max-width: 768px) {
    .header__mode.header__mode--mail.link,
    .social--max {
        display: none;
    }
    .btn--m {
        padding: 0;
        width: 42px;
        height: 32px;
    }
}
@media (max-width: 992px) {
    .header__mode.header__mode--time {
        display: none;
    }
}
@media (min-width: 475.98px) {
    .logo__img--mobile {
        display: none;
    }
}
@media (max-width: 475px) {
    .logo__img--desktop {
        display: none;
    }
    .burger {
        width: 34px;
        height: 26px;
    }
    .burger.active .burger__item:first-child {
        top: 10px;
    }
}
