@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800,300italic,italic,500italic,600italic,700italic,800italic);

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:focus,
:active {
    outline: none;
}

a {
    cursor: pointer;
}

aside,
nav,
footer,
header,
section {
    display: block;
}

html {
    font-size: 18px;
}

html,
body {
    height: 100%;
    min-width: 320px;
}

body {
    line-height: 1;
    font-family: "Open sans", sans-serif;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
    font-family: "Open sans", sans-serif;
    font-size: inherit;
}

input::-ms-clear {
    display: none;
}

button {
    cursor: pointer;
    background-color: inherit;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

a,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

ul li {
    list-style: none;
}

img {
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

/*
&::-webkit-scrollbar {
	display: none;
}
*/
body {
    color: var(--text-color);
    line-height: 1.4;
    background: var(--bg-color);
    padding-top: 100px;
    [position: relative;
    ]
}

body._lock {
    overflow: hidden;
}

html {
    scroll-behavior: smooth;
}

.wrapper {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 1 auto;
}

@media (max-width: 767.98px) {
    html {
        font-size: 16px;
    }
}

.container {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1222px) {
    .container {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .container {
        padding: 0 15px;
    }
}

.header {
    width: 100%;
    transition: all 0.3s ease 0s;
    z-index: 5;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    background: var(--header-bg-color);
    position: fixed;
    top: 0;

}

.header__wrapper {
    display: flex;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
}

@media (max-width: 767.98px) {
    .header__wrapper {
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 15px;
    }
}

.header__logo img,
.header__logo svg {
    height: 40px;
    width: fit-content;
}

.header__logo span {}

.header__menu {
    width: 100%;
}

.header__menu ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__menu ul li {
    margin-right: 20px;
}

.header__menu ul li.menu-item-has-children {
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

@media (max-width: 991.98px) {
    .header__menu ul li.menu-item-has-children {
        display: block;
    }
}

@media (any-hover: hover) {
    .header__menu ul li.menu-item-has-children:hover>ul {
        visibility: visible;
        opacity: 1;
    }
}

.header__menu ul li.menu-item-has-children>a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(135deg);
    margin-left: 10px;
    transition: all 0.3s ease 0s;
    display: block;
}

@media (any-hover: hover) {
    .header__menu ul li.menu-item-has-children>a:hover::after {
        border-color: #007b40;
    }
}

.header__menu ul li.menu-item-has-children>ul {
    transition: all 0.3s ease 0s;
    visibility: hidden;
    opacity: 0;
    display: block;
    background: #331837;
    border-radius: 0px 20px 20px 20px;
    position: absolute;
    padding: 22px;
    bottom: -100%;
    transform: translateY(100%);
}

@media (max-width: 991.98px) {
    .header__menu ul li.menu-item-has-children>ul {
        visibility: visible;
        opacity: 1;
        position: static;
        transform: translateY(0);
        padding: 30px 0px;
        background: none;
    }
}

.header__menu ul li.menu-item-has-children>ul li {
    margin-bottom: 15px;
}

.header__menu ul li.menu-item-has-children>ul li:last-child {
    margin-bottom: 0;
}

.header__menu ul li.menu-item-has-children>ul li a {
    display: block;
    width: 100%;
    white-space: nowrap;
    font-weight: normal;
}

.header__menu ul li:last-child {
    margin-left: 0;
}

.header__menu ul li a {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--header-menu-color);
    transition: all 0.3s ease 0s;
}

@media (any-hover: hover) {
    .header__menu ul li a:hover {
        opacity: 0.8;
    }
}

@media (max-width: 991.98px) {
    .header__menu {
        position: fixed;
        right: 0;
        padding: 60px 20px 20px;
        background: var(--header-bg-color);
        visibility: hidden;
        inset: 0;
        opacity: 0;
        max-width: 100%;
        transition: all 0.3s ease 0s;
        z-index: 6;
    }

    .header__menu._active {
        visibility: visible;
        opacity: 1;
    }

    .header__menu ul {
        display: block;
    }

    .header__menu ul li {
        margin-bottom: 20px;
    }

    .header__menu ul li a {
        color: var(--header-menu-color);
    }
}

.header .menu-close {
    display: none;
}

@media (max-width: 991.98px) {
    .header .menu-close {
        display: block;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .header .menu-close svg {
        width: 20px;
        height: 20px;
    }
}

.icon-menu {
    display: none;
}

@media (max-width: 991.98px) {
    .icon-menu {
        display: block;
        position: absolute;
        width: 24px;
        height: 20px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 6;
    }

    .icon-menu span {
        transition: all 0.3s ease 0s;
        top: calc(50% - 1px);
        left: 0px;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--header-menu-color);
    }

    .icon-menu span:first-child {
        top: 0px;
    }

    .icon-menu span:last-child {
        top: auto;
        bottom: 0px;
    }

    .icon-menu._active span {
        transform: scale(0);
    }

    .icon-menu._active span:first-child {
        transform: rotate(-45deg);
        top: calc(50% - 1px);
    }

    .icon-menu._active span:last-child {
        transform: rotate(45deg);
        bottom: calc(50% - 1px);
    }
}

@media (max-width: 767.98px) {
    .icon-menu {
        top: 30px;
    }
}

.wp-block-button__link {
    border-radius: var(--button-border-radius);
    background: var(--main-color);
}

.footer {
    margin-top: 60px;
    padding: 20px 0;
    background: var(--footer-bg-color);
}

.footer__menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__menu ul li a {
    color: var(--header-menu-color);
}

.footer__bottom {
    margin-top: 20px;
    display: grid;
    justify-content: center;
    justify-items: center;
    gap: 10px;
    color: var(--header-menu-color);
}

.footer__logo img,
.footer__logo svg {
    height: 50px;
    width: fit-content;
}


main {
    line-height: 1.55;
}

main h2,
main h3,
main h4 {
    font-family: "Roboto";
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 20px;
}

main h2 {
    font-size: 36px;
}

@media (max-width: 767.98px) {
    main h2 {
        font-size: 26px;
    }
}

main h3 {
    font-size: 28px;
}

@media (max-width: 767.98px) {
    main h3 {
        font-size: 24px;
    }
}

main h4 {
    font-size: 24px;
}

@media (max-width: 767.98px) {
    main h4 {
        font-size: 20px;
    }
}

main ul,
main ol {
    margin: 20px 0;
}

main ol {
    margin-left: 20px;
}

main ol li {
    display: list-item;
}

main li {
    display: flex;
}

main ul>li::before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
    background-color: var(--text-color);
    height: 4px;
    width: 4px;
    position: relative;
    flex-shrink: 0;
    top: 12px;
}

main ul.peach,
main ul.green {
    border-radius: 20px;
    padding: 40px;
    height: fit-content;
}

main ul.peach>li,
main ul.green>li {
    padding-left: 40px;
    position: relative;
}

main ul.peach>li::before,
main ul.green>li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M7 0.905518C5.6875 0.923747 4.51172 1.24276 3.47266 1.86255C2.41536 2.48234 1.57682 3.32088 0.957031 4.37817C0.33724 5.41724 0.0182292 6.59302 0 7.90552C0.0182292 9.21802 0.33724 10.3938 0.957031 11.4329C1.57682 12.4902 2.41536 13.3287 3.47266 13.9485C4.51172 14.5683 5.6875 14.8873 7 14.9055C8.3125 14.8873 9.48828 14.5683 10.5273 13.9485C11.5846 13.3287 12.4232 12.4902 13.043 11.4329C13.6628 10.3938 13.9818 9.21802 14 7.90552C13.9818 6.59302 13.6628 5.41724 13.043 4.37817C12.4232 3.32088 11.5846 2.48234 10.5273 1.86255C9.48828 1.24276 8.3125 0.923747 7 0.905518ZM10.1719 6.70239L6.67188 10.2024C6.50781 10.3482 6.32552 10.4211 6.125 10.4211C5.92448 10.4211 5.74219 10.3482 5.57812 10.2024L3.82812 8.45239C3.68229 8.28833 3.60938 8.10604 3.60938 7.90552C3.60938 7.705 3.68229 7.52271 3.82812 7.35864C3.99219 7.21281 4.17448 7.13989 4.375 7.13989C4.57552 7.13989 4.75781 7.21281 4.92188 7.35864L6.125 8.56177L9.07812 5.60864C9.24219 5.46281 9.42448 5.38989 9.625 5.38989C9.82552 5.38989 10.0078 5.46281 10.1719 5.60864C10.3177 5.77271 10.3906 5.955 10.3906 6.15552C10.3906 6.35604 10.3177 6.53833 10.1719 6.70239Z' fill='%23007B40'/%3E%3C/svg%3E");
    height: 14px;
    left: 0;
    display: block;
    background: none;
    top: 2px;
    width: 14px;
    position: absolute;
}

main ul.peach {
    background: var(--deccond-color);
}

main ul.green {
    background: var(--main-color);
}

main .list-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

@media (max-width: 991.98px) {
    main .list-wrap {
        grid-template-columns: 1fr;
    }
}

main a {
    color: var(--main-color);
    transition: 0.4s;
}

main a:hover {
    border-color: transparent;
}

main p {
    margin-bottom: 20px;
}

main p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    main p {
        font-size: 16px;
    }
}

main img {
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
    border-radius: 20px;
    overflow: hidden;
    margin-right: 30px;
    margin-bottom: 30px;
}

main img.alignleft {
    float: left;
    margin-right: 30px;
}

main img.alignright {
    float: right;
    margin-left: 30px;
}

main img .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

main strong {
    margin-bottom: 20px;
    display: block;
}

.button {
    color: var(--text-color);
    border-radius: var(--button-border-radius);
    padding: 0.5rem 0.8rem;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
}

.button.seccondary {
    background: var(--seccond-color);
}

.button.primary {
    background: var(--main-color);
}

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

@media (max-width: 991.98px) {
    .header__buttons {
        margin-left: auto;
        margin-right: 30px;
    }
}

@media (max-width: 767.98px) {
    .header__buttons {
        width: 100%;
        order: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0;
    }
}

.screenshot-gallery {}

.screenshot-gallery {
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.screenshot-gallery li::before {
    display: none;
}

.screenshot-gallery img {
    max-width: 200px;
    margin: 0;
    height: fit-content;
}