*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --accent_black: #1e1e1e;
    --text_grey: #787878;
    --color-grey: #9a9a9a;
    --color_white: #fafafa;
    --color_light_purple: #aa6cff;
    --color_athena_blue: #65d8fc;
    --color_orange: #ff9900;
    --color_yellow: #f9ba50;
    --color_blue: #6850ff;
    --color_purple: #925ce1;
    --gradient_1: linear-gradient(92.96deg, #6850ff -3.78%, #aa6cff 50.58%, #925ce1 130.9%);
    --gradient_2: linear-gradient(95.39deg, #aa6cff -9.19%, #65d8fc 62.68%, #925ce1 125.63%);
    --gradient_3: linear-gradient(346.88deg, #663f9f 23.03%, #8b47e8 32.34%, #a558e2 41.85%, #ce54f9 49.49%, #f954e8 58.81%);
    --gradient_credits: linear-gradient(180deg, rgba(170, 108, 255, 0.78) -84.86%, rgba(170, 108, 255, 0) 100.14%);
    --gradient_sales: linear-gradient(0deg, rgba(36, 36, 18, 0) -2.57%, rgba(71, 72, 31, 0.19) 17.24%, rgba(163, 144, 44, 0.65) 60.62%, #e7ab36 91.74%);
    --gradient_marketing: linear-gradient(0deg, rgba(18, 32, 36, 0) -2.57%, rgba(31, 62, 72, 0.19) 17.24%, rgba(44, 163, 156, 0.65) 60.62%, #36e7c7 91.74%);
    --gradient_marketing_2: linear-gradient(0deg, rgba(33, 18, 36, 0) -2.57%, rgba(47, 31, 72, 0.19) 17.24%, rgba(82, 44, 163, 0.65) 60.62%, #7936e7 91.74%);
    --gradient_liner: linear-gradient(92.96deg, #c0c8d4 -3.78%, #fcfdfd 50.58%, #ffffff 130.9%);
}
a {
    display: flex;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}
ul,
ol,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}
img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    border: none;
    background: none;
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
}
html,
body {
    scroll-behavior: smooth;
}
body {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 16px;
    line-height: 20px;
    color: var(--text_grey);
}
body.fixed {
    overflow: hidden;
}
.wrapper {
    background-color: var(--accent_black);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.header {
    flex: 0 0 auto;
}
.main {
    flex: 1 0 auto;
}
.footer {
    flex: 0 0 auto;
}
.container {
    margin: 0 auto;
    padding: 0 40px;
    max-width: 1440px;
}

/* ?  Settings class   */
/* ? */
/* ?  TEXT */
/* ? */
.title-h1 {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 60px;
    line-height: 75px;
    color: var(--color_white);
    position: relative;
}
.title-h2 {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 44px;
    line-height: 55px;
    text-transform: capitalize;
    text-align: center;
    color: var(--color_white);
    margin-bottom: 30px;
}
.subtitle {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 32px;
    line-height: 40px;
    text-transform: capitalize;
    text-align: center;
    color: var(--text_grey);
}
.text-description {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 24px;
    line-height: 30px;
    color: var(--text_grey);
}
.text {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 16px;
    line-height: 20px;
    color: var(--text_grey);
}
.text-max {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    color: var(--text_grey);
}
.text-min {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 14px;
    line-height: 18px;
    text-transform: capitalize;
    color: var(--text_grey);
}
.header-link {
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    padding: 10px;
    color: var(--text_grey);
    position: relative;
    overflow: hidden;
}
.header-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    width: 100%;
    height: 1px;
    background-color: var(--color_purple);
    transform: translateX(-110%);
    transition: all 0.3s ease;
}
.header-link:hover {
    color: var(--color_purple);
}
.header-link:hover::before {
    transform: translateX(0px);
}
.title-decor {
    position: relative;
}
.title-decor:before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background-color: var(--color_light_purple);
}
.running-numbers {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 68px;
    text-transform: capitalize;
    color: var(--color_orange);
}
/* ? */
/* ?   TEXT  the end*/
/* ? */
/* ?   BLOCK IMG */
/* ? */
.bg-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--color_purple);
    filter: blur(100px);
    opacity: 0.5;
    z-index: 1;
}
.bg-image img {
    position: relative;
    z-index: 2;
}
/* ? */
/* ?  BLOCK IMG   the end*/
/* ? */
/* ?   section padding*/
/* ? */
.padding-first-section {
    padding: 240px 0;
    min-height: 100vh;
}
.padding-second-section {
    padding: 0px 0 140px;
}
.padding-middle-section {
    padding: 100px 0 140px;
}
.padding-last-section {
    padding: 100px 0 240px;
}
/* ? */
/* ? ------------------------------------------------------------------------  TEXT   MEDIA  */
/* ? */
@media (max-width: 1440px) {
    .title-h1 {
        font-size: calc(24px + 36 * ((100vw - 375px) / 1065));
        line-height: calc(30px + 45 * ((100vw - 375px) / 1065));
        margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1065));
    }
    .title-h2 {
        font-size: calc(24px + 20 * ((100vw - 375px) / 1065));
        line-height: calc(30px + 25 * ((100vw - 375px) / 1065));
        margin-bottom: calc(15px + 15 * ((100vw - 375px) / 1065));
    }
    .subtitle {
        font-size: calc(18px + 14 * ((100vw - 375px) / 1065));
        line-height: calc(20px + 20 * ((100vw - 375px) / 1065));
    }
    .text-description {
        font-size: calc(16px + 8 * ((100vw - 375px) / 1065));
        line-height: calc(20px + 10 * ((100vw - 375px) / 1065));
    }
    .text-max {
        font-size: calc(16px + 2 * ((100vw - 375px) / 1065));
        line-height: calc(20px + 2 * ((100vw - 375px) / 1065));
    }
    .title-decor:before {
        width: calc(60px + 60 * ((100vw - 375px) / 1065));
        top: calc(-10px - 10 * ((100vw - 375px) / 1065));
    }
    .running-numbers {
        font-size: 64px;
        line-height: 68px;
        font-size: calc(32px + 32 * ((100vw - 375px) / 1065));
        line-height: calc(34px + 34 * ((100vw - 375px) / 1065));
    }
    .bg-image::before {
        width: calc(300px + 100 * ((100vw - 375px) / 1065));
        height: calc(300px + 100 * ((100vw - 375px) / 1065));
    }
    /* ?padding */
    .padding-first-section {
        padding-top: calc(120px + 120 * ((100vw - 375px) / 1065));
        padding-bottom: calc(120px + 120 * ((100vw - 375px) / 1065));
    }
    .padding-second-section {
        padding-bottom: calc(70px + 70 * ((100vw - 375px) / 1065));
    }
    .padding-middle-section {
        padding-top: calc(50px + 50 * ((100vw - 375px) / 1065));
        padding-bottom: calc(70px + 70 * ((100vw - 375px) / 1065));
    }
    .padding-last-section {
        padding-top: calc(50px + 50 * ((100vw - 375px) / 1065));
        padding-bottom: calc(120px + 120 * ((100vw - 375px) / 1065));
    }
}

/* ? */
/* ?  BUTTONS */
/* ? */
/* ? */
/* ?   btn-get-touch */
/* ? */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
}
.btn-get-touch {
    width: 180px;
    height: 44px;
    font-size: 18px;
    line-height: 22px;
    color: var(--accent_black);
    background: var(--color_white);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
.btn-get-touch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    border: 3px solid transparent;
    background-image: linear-gradient(var(--color_light_purple), var(--color_light_purple)), var(--gradient_1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    z-index: -1;
    opacity: 0;
}
.btn-get-touch:hover {
    color: var(--color_white);
    background: var(--color_light_purple);
}
.btn-get-touch:active::before {
    opacity: 1;
}
/* ? */
/* ? -------------------------------------------------  btn-see */
/* ? */
.btn-see {
    width: 280px;
    height: 42px;
    font-size: 16px;
    line-height: 20px;
    color: var(--color_white);
    border: 1px solid var(--color_white);
    justify-content: flex-start;
    padding-left: 40px;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease;
}
.btn-see::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    width: 16px;
    height: 16px;
    background-image: url(../images/icons/arrow-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.btn-see::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 5px;
    border: 3px solid transparent;
    background-image: linear-gradient(var(--color_light_purple), var(--color_light_purple)), var(--gradient_1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    z-index: -1;
    opacity: 0;
}
.btn-see:hover {
    background: var(--color_light_purple);
    border: 1px solid var(--color_light_purple);
}
.btn-see:active::before {
    opacity: 1;
}
/* ? */
/* ? -------------------------------------------------  btn-developers */
/* ? */
.btn-developers {
    width: 335px;
    height: 42px;
    font-size: 16px;
    line-height: 20px;
    color: var(--accent_black);
    background: var(--color-grey);
    justify-content: flex-start;
    padding-left: 40px;
    position: relative;
    z-index: 1;
    transition: background 0.3s ease;
}
.btn-developers::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    width: 16px;
    height: 16px;
    background-image: url(../images/icons/arrow-black.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.btn-developers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    border: 3px solid transparent;
    background-image: linear-gradient(var(--color_white), var(--color_white)), var(--gradient_liner);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    z-index: -1;
    opacity: 0;
}
.btn-developers:hover {
    background: var(--color_white);
}
.btn-developers:active::before {
    opacity: 1;
}
/* ? */
/* ? -------------------------------------------------  btn-contact */
/* ? */
.btn-contact {
    width: 310px;
    height: 44px;
    font-size: 18px;
    line-height: 22px;
    color: var(--color_white);
    background: var(--gradient_1);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.btn-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: var(--color_light_purple);
    transition: opacity 0.3s linear;
    z-index: -1;
    opacity: 0;
}
.btn-contact:hover::before {
    opacity: 1;
}
.btn-contact:active {
    border: 3px solid transparent;
    background-image: linear-gradient(var(--color_light_purple), var(--color_light_purple)), var(--gradient_1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
/* ? */
/* ? -------------------------------------------------  btn-send */
/* ? */
.btn-send {
    width: 186px;
    height: 40px;
    font-family: 'Gothic A1', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: var(--color_white);
    background: var(--color_light_purple);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}
.btn-send:hover {
    background: var(--color_purple);
}
/* ? */
/* ? -------------------------------------------------  btn-learn */
/* ? */
.btn-learn {
    width: 150px;
    height: 58px;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--color_white);
    border: 3px solid transparent;
    background-image: linear-gradient(var(--accent_black), var(--accent_black)), var(--gradient_1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
    z-index: 1;
}
.btn-learn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient_1);
    transition: opacity 0.3s linear;
    z-index: -1;
    opacity: 0;
}
.btn-learn:hover::before {
    opacity: 1;
}
.btn-learn:active {
    background-image: var(--gradient_1), var(--gradient_marketing_2);
}

/* ? */
/* ? -  btn-demo*/
/* ? */
.btn-demo {
    width: 100px;
    height: 34px;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    color: var(--accent_black);
    background: var(--color_purple);
    border: 3px solid transparent;
}
.btn-demo:hover {
    background: var(--color_light_purple);
}
.btn-demo:active {
    background-image: linear-gradient(var(--color_light_purple), var(--color_light_purple)), var(--gradient_1);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ? */
/* ?   BUTTONS   the end*/
/* ? */
/* ?  Settings class   the end*/
/* ? */
/* ? */
/* * */
/* * -----------------------------------------------------------------------------    HEADER */
/* * */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    background: var(--accent_black);
    z-index: 10;
}
.header__inner {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logo {
    z-index: 11;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 56px;
}
.header__menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
/* ?  lang */
.lang-box {
    width: 50px;
    height: 40px;
    position: relative;
    margin-left: 10px;
}
.lang-box::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: url(../images/icons/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}
.lang {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 8px;
}
.lang-select {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 8px; */
    /* gap: 10px; */
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    background: var(--accent_black);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(50px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.lang-select.active {
    opacity: 1;
    visibility: visible;
}
.lang-select__option {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 8px;
    width: 100%;
}
.lang:hover,
.lang-select__option:hover {
    color: var(--color_purple);
}

.nav-menu {
    gap: 20px;
    margin-left: auto;
}
@media (max-width: 1200px) {
    .lang-box {
        margin-left: auto;
        margin-right: 10px;
    }
}
/* ? lang the end */

.burger__menu {
    display: none;
}
/*  */
/** --------------------------------------------------------------- burger menu */
/*  */
.burger__menu {
    cursor: pointer;
    width: 40px;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    z-index: 11;
}
.burger__menu span {
    display: flex;
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
    border-radius: 6px;
    position: relative;
}
.burger__menu span::before,
.burger__menu span::after {
    content: '';
    position: absolute;
    height: 1px;
    right: 0;
    background-color: #d9d9d9;
    border-radius: 6px;
    width: 100%;
}
.burger__menu span::before {
    top: -12px;
}
.burger__menu span::after {
    top: 12px;
}
.burger__menu span {
    transition: all 0.4s;
}
.burger__menu span:before,
.burger__menu span:after {
    transform-origin: center center;
}
.burger__menu.active span:before {
    animation: burg2top 0.4s linear forwards;
}
.burger__menu.active span {
    background-color: transparent;
}
.burger__menu.active span::after {
    animation: burg2bottom 0.4s linear forwards;
}
.burger__menu.toggled span:before {
    animation: burg2topReset 0.4s linear forwards;
}
.burger__menu.toggled span {
    background-color: #d9d9d9;
}
.burger__menu.toggled span::after {
    animation: burg2bottomReset 0.4s linear forwards;
}
@keyframes burg2top {
    0% {
    }
    20% {
        top: 0;
        transform: rotate(0deg);
    }
    60% {
        top: 0;
        transform: rotate(55deg);
    }
    100% {
        top: 0;
        transform: rotate(45deg);
    }
}
@keyframes burg2bottom {
    0% {
    }
    20% {
        top: 0;
        transform: rotate(0deg);
    }
    60% {
        top: 0;
        transform: rotate(-55deg);
    }
    100% {
        top: 0;
        transform: rotate(-45deg);
    }
}
@keyframes burg2topReset {
    0% {
        top: 0;
        transform: rotate(45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        top: -8px;
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes burg2bottomReset {
    0% {
        top: 0;
        transform: rotate(-45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        top: 8px;
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/*  */
/** -------------------------------- burger menu  the end*/
/*  */
/* ? */
/* ? ------------------------------------------------------------- Media  header*/
/* ? */
@media (max-width: 1500px) {
    .nav-menu {
        gap: calc(20px + 36 * ((100vw - 1200px) / 300));
    }
    .header__menu {
        gap: calc(5px + 35 * ((100vw - 1200px) / 300));
    }
}
@media (max-width: 1440px) {
    .container {
        padding-left: calc(15px + 25 * ((100vw - 320px) / 1120));
        padding-right: calc(15px + 25 * ((100vw - 320px) / 1120));
    }
    .header__inner {
        height: calc(40px + 80 * ((100vw - 320px) / 1120));
    }
    .header__logo {
        width: calc(80px + 88 * ((100vw - 375px) / 1065));
    }
    .burger__menu {
        width: calc(30px + 10 * ((100vw - 320px) / 1120));
    }
    .burger__menu span::before {
        top: calc(-8px - 4 * ((100vw - 320px) / 1120));
    }
    .burger__menu span::after {
        top: calc(8px + 4 * ((100vw - 320px) / 1120));
    }
}
@media (max-width: 1200px) {
    .burger__menu {
        display: flex;
    }
    .nav-menu {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: absolute;
        top: calc(50px + 70 * ((100vw - 320px) / 1120));
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--accent_black);
        transform: translate3d(-120%, 0, 0);
        transition: all 0.6s ease;
        z-index: 10;
        padding-left: calc(15px + 25 * ((100vw - 320px) / 1120));
    }
    .nav-menu.active {
        transform: translate3d(0, 0, 0);
    }
    .header__menu {
        padding-top: 30px;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .header__menu-item {
        width: 100%;
    }
    .header-link {
        padding-left: calc(0px + 10 * ((100vw - 320px) / 1120));
        display: inline-flex;
    }
}
@media (max-width: 500px) {
    .header__btn {
        height: 40px;
    }
}
/* * */
/* * -----------------------------------------------------------------------------    FOOTER */
/* * */
.footer {
    padding: 100px 0 20px;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2);
}
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    border-bottom: 1px solid var(--text_grey);
    padding-bottom: 100px;
    margin-bottom: 50px;
}
.footer-top__item {
    width: 310px;
}
.footer-top__links-item:not(:last-child),
.footer-top__menu-item:not(:last-child),
.footer-top__menu-box:not(:last-child) {
    margin-bottom: 15px;
}
.footer-top__links-link,
.footer-top__menu-link,
.footer-bottom__menu-link {
    display: inline-flex;
}
.footer-top__links-link:hover,
.footer-top__menu-link:hover {
    color: var(--color_white);
}
.footer__title {
    max-width: 310px;
    color: var(--color_white);
    text-align: left;
    margin-bottom: 40px;
}
.footer-bottom__menu {
    display: flex;
    gap: 40px;
}
.footer-bottom__menu-item {
    width: 310px;
}
.footer-bottom__menu-link:hover {
    color: var(--color_white);
}
/* ? */
/* ? ------------------------------------------------------------- Media  footer*/
/* ? */
@media (max-width: 1440px) {
    .footer {
        padding-top: calc(40px + 60 * ((100vw - 320px) / 1120));
    }
    .footer-top__item:nth-child(3) {
        width: calc(200px + 110 * ((100vw - 1200px) / 240));
    }
    .footer__title {
        font-size: calc(24px + 8 * ((100vw - 375px) / 1065));
        line-height: calc(30px + 10 * ((100vw - 375px) / 1065));
    }
}
@media (max-width: 1200px) {
    .footer-top {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-bottom: 60px;
    }

    .footer-top__item:nth-child(1) {
        width: 100%;
    }
    .footer-top__item:nth-child(3) {
        width: 310px;
    }
    .footer-top__item:nth-child(4) {
        margin-top: 20px;
    }
}
@media (max-width: 725px) {
    .footer-top {
        margin-bottom: 40px;
    }
    .footer-top__item:nth-child(3) {
        width: 100%;
    }
    .footer-top__menu-box {
        width: 40%;
    }
    .footer-top__menu {
        display: flex;
        justify-content: space-between;
    }
    .footer-top__menu-box:nth-child(2) {
        padding-top: 38px;
    }
    .footer-top__links-item:not(:last-child),
    .footer-top__menu-item:not(:last-child) {
        margin-bottom: 20px;
    }
    .footer-top__menu-box:not(:last-child) {
        margin-bottom: 0;
    }
    .footer-bottom__menu {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .footer-bottom__menu-item {
        width: 40%;
    }
    .footer-bottom__menu-item:nth-child(1) {
        order: -2;
    }
    .footer-bottom__menu-item:nth-child(3) {
        order: -1;
    }
}

@media (max-width: 400px) {
    .footer-top__item:nth-child(4) {
        margin: 20px auto 0;
        width: 100%;
    }
    .footer__title {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    .btn-contact {
        width: 100%;
    }
}
/* ? ---------------------------------------------------- HEADER FOOTER  the end */