@media screen and (max-width: 1440px)  {
    .book-section form {
        width: 387px;
        margin: 0 auto;
    }
    .header-container {
        max-width: 1360px;

    }
    .book-section .book-form > h1 {
        font-size: 38px;
        line-height: 46px;
    }
    .big-desc {
        font-size: 21px;
        line-height: 37px;
    }
}
@media screen and (max-width: 1300px) {
    .book-section .book-form {
        width: 45%;
    }
    /*main styles*/
    .biggest-title {
        font-size: 50px;
        line-height: 70px;
    }
    .big-title-big-line {
        font-size: 40px;
        line-height: 60px;
    }
    .medium-title {
        font-size: 23px;
        line-height: 32px;
    }
    .small-desc {
        font-size: 15px;
        line-height: 26px;
    }
    .big-desc {
        font-size: 20px;
        line-height: 34px;
    }
    .semibig-title-small-line {
        font-size: 36px;
        line-height: 50px;
    }
    .small-title {
        font-size: 14px;
        line-height: 22px;
    }
    .big-title-small-line {
        font-size: 40px;
        line-height: 50px;
    }
    .medium-desc {
        font-size: 18px;
        line-height: 28px;
    }
    .my-container {
        max-width: 1050px;
    }
    .how-it-works .images-with-animation .schedule img {
        width: 350px;
    }
    .how-it-works .images-with-animation .colorpicer img {
        width: 350px;
    }
    .service-plan-section h2 {

        padding-top: 90px;
        font-size: 62px;
        line-height: 62px;
    }
    footer .navigate > ul li {
        flex: auto;
        width: 50%;
        margin-bottom: 20px;
    }
    footer .navigate > ul {
        flex-wrap: wrap;
        height: max-content;
        width: 400px;
        justify-items: flex-start;
        flex-direction: row;
    }

}
@media screen and (max-width: 1200px) {
    /*main styles */
    .my-container {
        max-width: 800px;
    }
    .biggest-title {
        font-size: 40px;
        line-height: 60px;
    }

    .big-desc {
        font-size: 18px;
        line-height: 24px;
    }
    .medium-title {
        font-size: 18px;
        line-height: 26px;
    }
    .small-desc {
        font-size: 14px;
        line-height: 22px;
    }
    .big-title-big-line {
        font-size: 28px;
        line-height: 46px;
    }
    .big-title-small-line {
        font-size: 30px;
        line-height: 40px;
    }
    .container {
        width: 95%;
    }
    /*header styles*/
    header nav li .contact-button {
        margin-left: 11px;
        font-size: 12px;
    }
    header nav li a {
        margin-left: 15px;
        padding: 20px 2px;
        font-size: 12px;
    }
    header nav li .contact-button:hover {
        padding: 8px 18px;
    }
    /*book section style*/
    .book-section .images-and-animation .animating-image {
        height: 830px;
    }
    .book-section .images-and-animation .showing-image {
        height: 755px;
    }
    .book-section .book-form {
        height: 780px;
    }
    .how-it-works .steps .item > p {
        width: calc(100% - 70px);
    }
    .counts-of-analytics .item {
        padding-right: 10px;
    }
    /*reason section*/
    .reasons-section .item {
        padding: 30px 20px;
    }
    .easy-steps {
        margin-top: 30px;
    }

    /*how it works section*/
    .how-it-works .images-with-animation .schedule img {
        max-width: 260px;
    }
    .images-and-steps {
        padding-right: 30px;
    }
    .how-it-works .images-with-animation .colorpicer img {
        max-width: 260px;
    }
    .how-it-works .images-with-animation .colorpicer {
        right: -120px;
        left: auto;
    }
    .images-and-steps .steps {
        max-width: 50%;
    }
    .how-it-works .images-with-animation .bullets .small img {
        max-width: 260px;
    }
    .how-it-works .images-with-animation .bullets .medium img {
        max-width: 220px;
    }
    .how-it-works .images-with-animation .bullets .big img {
        max-width: 180px;
    }

    /*service plan section */
    .service-plan-section {
        margin-top: 100px;
    }
    .service-plan-section .service-plan-items > .item.blue {
        margin-left: 0;
        margin-top: 50px;
    }
    .animate-image.active {
        background-size: cover;
    }
    .accordion-faq .item button .medium-desc {
        text-align: left;
        padding-right: 20px;
        max-width: 90%;
    }

    @keyframes openImageFromCenter {
        0% {
            top: 50%;
            bottom: 50%;
            background-size: cover;
        }
        100% {
            top: 0;
            bottom: 0;
            background-size: cover;
        }
    }
    /*partners styles*/

    .partners-section h5 {
        margin-bottom: 60px;
    }
    .partners-section .items {
        padding: 0 calc((100% - 820px)/2);
    }
    /*FAQ styles*/
    .faq-title-part .container {
        padding: 80px;
    }
    .accordion-faq {
        padding: 0 100px;
    }
    .totop img{
        width: 40px;
    }
    /*footer*/
    footer .contact-and-socials {
        margin-left: 10px;
    }
    footer .navigate > ul {
        width: 230px;
    }
    .book-section .images-and-animation   {
        height: 70vh;
    }
    .book-section .book-form {
        height: 60vh;
    }
    .book-section form input {
        padding: 9px 16px;
        height: 44px;
    }
    .book-section .biggest-title , .book-section .book-form > h1 {
        font-size: 30px;
        line-height: 36px;
    }
    .book-section form input[type=submit] {
        height: 42px;
    }
    .faq-title-part h6 {
        padding: 0
    }
}
@media screen and (max-width: 900px) {
    .totop img{
        width: 30px;
    }
    .book-section form {
        width: 100%;
        margin: 0 auto;
    }
    .open-mobile-header {

        display: flex;
    }
    .mobile-icons {
        display: block;
    }
    /*header*/
    .navigation nav ul {
        flex-direction: column;
        margin-top: 79px;
        justify-content: flex-start;
        align-items: flex-start;
    }
    header nav li:last-child {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    header nav li {
        margin-bottom: 35px;
    }
    .mobile-icons button {
        background: transparent;
        border: none;

    }
    .reasons-section .item {
        animation-duration: 1s !important;
    }
    header nav {
        width: 100%;
        padding: 0 8px;
    }
    .book-section .biggest-title {
        font-size: 28px;
        line-height: 30px;
    }
    header nav li a {
        margin-left: 0;
        padding: 20px 2px;
        font-size: 30px;
        line-height: 45px;
        letter-spacing: 0.2px;
        font-family: Roboto-Medium;

    }
    .navigation.flex {
        display: flex;
    }
    .navigation {
        position: fixed;
        background: white;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        padding: 8px;
        display: none;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 1111111111;
    }
    header .logo {
        z-index: 11111111111111111111;
    }
    .header-container {

        z-index: 11111111;
    }
    header nav li .contact-button {
        padding: 10px 20px;
        margin-left: 0;
        width: 382px;
        height: 62px;
        font-size: 16px;
        line-height: 28px;
        margin-top: 40px;
    }
    .biggest-title {
        font-size: 40px;
        line-height: 57px;
    }
    .btn.hover-filled-slide-up::before, .btn.hover-filled-slide-up::after {
        content: none;
    }
    .btn-1 span {
        color: var(--MainRed);
    }
    header nav li .contact-button {
        color: #fff;
        background: #c82d31;
    }
    .contact-form .content form input, .contact-form .content form textarea {
        padding: 8px 25px;
        height: 54px;
    }
    .contact-form .content form textarea {
        height: 193px;
        resize: none;
    }
    .contact-form .content {
        padding: 120px 34px 50px;
    }

    /*footer*/

    footer .footer-content {
        flex-direction: column;
        align-items: center;
    }
    footer .container .flex-row:not(.item) {
        align-items: flex-start;
    }
    footer .contact-and-socials {
        margin-left:  0px;
        order: 2;
    }
    footer .navigate > ul {
        width: 100%;
    }
    footer .navigate {
        margin: 43px 0 40px;
        width: 100%;
    }
    footer .navigate > ul li {
        flex: unset;
        margin-left: 0;
        margin-top: 16px;
        width: 30%;
        min-width: fit-content;
        white-space: nowrap;
        margin-right: 2%;
    }
    footer .copyright-and-socials > .container {
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }
    footer .socials a {
        margin: 0 22px 0 0;
    }
    header nav li {
        margin-bottom: 45px;
    }
}
@media screen and (max-width: 780px) {
    .book-section .images-and-animation {
         display: none;
    }
    .book-section .images-and-animation.mobile {
        display: block;
    }
    .book-section .images-and-animation {
        height: 100vh;
        width: 100%;
        background-position: center -50px;
        position: relative;
    }
    .book-section .book-form {
        width: 100%;
        height: max-content;
    }
    .how-it-works .reasons-info {
        width: 100%;
    }
    .service-plan-section {
        background-image: url("images/servicemob.jpg");
        background-size: 100% 450px;
    }
    .service-plan-section .containing-steps .item ul li {
        margin-bottom: 24px;
    }
    .service-plan-section h2 {
        padding-top: 60px;
        font-size: 42px;
        line-height: 32px;
    }
    .service-plan-section h3 {

        margin-bottom: 50px;
        font-size: 15px;
        line-height: 37px;
    }
    .counts-of-analytics .item .medium-title {
        font-size: 24px;
        line-height: 36px;
    }
    .service-plan-section .service-plan-items .price-year .urls {
        text-align: right;
    }
    .service-plan-section .service-plan-items .price-year .urls .medium-title {
        font-size: 24px;
        line-height: 36px;
    }
}
@media screen and (max-width: 600px) {
    .totop img{
        width: 25px;
    }
    header nav li a {
        padding: 10px 2px;
        line-height: 20px;
    }
    .medium-desc {
        font-size: 16px;
        line-height: 28px;
    }
    /*book section*/
    .book-section form .item {
        width: 100%;
    }
    .counts-of-analytics .item {
        width: 100%;
        animation: none;
        margin-bottom: 24px;
    }
    .book-section .book-form {
        height: max-content;
    }
    .big-desc {
        font-size: 16px;
        line-height: 28px;
    }
    .counts-of-analytics {
        flex-wrap: wrap;
        height: max-content;
        padding-left: 0;
    }
    .book-section form {
        width: 95%;
    }
    .book-section .book-form > h1 {
        margin-bottom: 8px;
        font-size: 36px;
        line-height: 57px;
    }
    .book-section .images-and-animation {
        height: 73vh;
        width: 100%;
        background-position: center;
        position: relative;
    }
    .book-section .images-and-animation .animating-image ,
    .book-section .images-and-animation .showing-image {
        display: none;
    }
    .book-section .images-and-animation .mobile-background {
        display: block;
        height: 774px;
        width: 100%;
        background-size: cover;
        position: absolute;
        background-position: bottom;
        top: 0;
        z-index: 0;
    }
    .book-section form {
        margin-bottom: 64px;
    }
    .small-desc {
        font-size: 16px;
        line-height: 28px;
    }
    .medium-title {
        font-size: 36px;
        line-height: 57px;
    }
    .reasons-section {
        margin-top: 0px;
        padding: 60px 0 ;
        background: #F3F5F6;
    }
    .reasons-section .item {
        padding: 35px 40px;
        width: 100%;
    }
    .reasons-section .items {
        flex-wrap: wrap;
        justify-content: center;
    }
    .reasons-section .item {
        padding: 51px 60px 108px;
        width: 100%;
        margin-bottom: 34px;
    }
    .how-it-works h5 {
        max-width: 303px;
        margin-bottom: 17px;
    }
    .images-and-steps {
        padding-right: 00px;
        flex-direction: column-reverse;
    }
    .how-it-works .images-with-animation .schedule img {
        max-width: 262px;
    }
    .how-it-works .images-with-animation .colorpicer img {
        max-width: 316px;
    }
    .how-it-works .images-with-animation .bullets {
        width: 300px;
        height: 300px;
        position: absolute;
        left: -135px;
        bottom: -84px;
    }
    .how-it-works .images-with-animation .colorpicer {
        right: -50px;
        top: 22px;
        left: unset;
    }
    .how-it-works h2 {
        margin-bottom: 110px;
    }
    .partners-section .items .item {
        animation: none;
        animation-name: none !important;
    }
    .how-it-works .images-with-animation {
        margin-bottom: 32px;
        width: 100%;
    }
    .images-and-steps .steps {
        max-width: 320px;
    }
    .how-it-works .steps .item {
        margin-bottom: 65px;
    }
    .semibig-title-small-line {
        font-size: 36px;
        line-height: 57px;
    }
    .service-plan-section h2 {
        margin: 0 auto;
        margin-bottom: 60px;
        max-width: 310px;
    }
    .how-it-works .reasons-info button {

        WIDTH: 100%;
    }
    .service-plan-section {
        margin-top: 70px;
    }
    .service-plan-section .service-plan-items > .item {
        padding: 73px 40px 40px;
        max-width: 344px;
        width: 100%;
    }
    .service-plan-section .containing-steps .item ul p.small-desc {
        width: 188px;
    }
    .small-title {
        font-size: 16px;
        line-height: 24px;
    }
    .services-section {
        margin-top: 65px;
    }
    .services-section .image{
        display: none;
    }
    .services-section .image.mobile {
        display: block;
        height: 234px;
        background-size: cover;
    }
    header nav li .contact-button {
        width: 100%;
    }
    header nav li {
        width: 100%;
    }

    .animate-image {
        top: 0;
        bottom: 0;
    }
    .services-section .info-part > div {
        flex-wrap: wrap;
        justify-content: center;
    }
    .services-section .info-part {
        padding: 110px 0 35px;
    }
    .services-section .text p.title {
        text-align: center;
    }
    .services-section .text {
        width: 307px;
        margin-bottom: 72px;
    }
    .services-section .image-in-info {
        width: 100%;
        height: 299px;
        max-width: 354px;
        margin: 0 auto;
    }
    .partners-section {
        margin-top: 80px;
    }
    .partners-section h5 {
        margin-bottom: 40px;
        max-width: 100%;
        font-size: 16px;
        line-height: 28px;
    }
    .partners-section .items .item {

    }
    .partners-section .items .item > div {
        margin-bottom: 30px;
    }
    .faq-title-part .container {
        padding:  0px;
    }
    .faq-title-part h2 {
        text-align: left;
    }
    .partners-section .items {
        padding: 0 calc((100% - 490px)/2);
    }
    .accordion-faq {
        padding: 0 0px;
        margin: 0 auto;
    }
    .accordion-faq .item button .medium-desc{
        width: 274px;
        text-align: left;
        margin-right: 12px;
    }
    .faq-title-part {
        margin-bottom: 50px;
    }
    .faq-section {
        margin-bottom: 27px;
    }
    .accordion-faq .item {
        padding:12px 5px 12px 0;
        margin-top: 10px;
    }
    .bg-chevron_right {
        margin-top: 5px;
    }
    .accordion-faq .item button {

        align-items: flex-start;
    }
    .biggest-title {
        font-size: 24px;
        line-height: 36px;
    }
    .faq-title-part h6 {
        padding: 0;
        text-align: left;
    }
    footer .logo-and-nav {
        margin: 0 auto;
        margin-bottom: 60px;
    }
    .my-container {
        max-width: 470px;
    }
    footer .flex-justify-spaceB-alignC {
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .contact-form .content {
        width: 90%;
    }
    .book-section form > p span.wpcf7-form-control-wrap {
        width: 100%;
        margin-bottom: 14px;
    }
    .book-section .book-form > p {
        margin-bottom: 24px;
    }

    /*submitation messages*/
    .contact-form.success-error .image img {
        max-width: 57px;
    }
    .contact-form.success-error .message {
        font-size: 12px;
        line-height: 15px;
    }
    .contact-form.success-error .desc {
        font-size: 8px;
        line-height: 10px;
        text-align: center;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    .contact-form.success-error .content button.close {
        width: 142px;
        height: 36px;
        font-size: 12px;
        padding: 0;
    }
    .contact-form.success-error .content {
        max-width: 210px;
        padding: 44px 30px;
    }
}
@media screen and (max-width: 400px) {
    .service-plan-section .service-plan-items > .item {
        padding: 24px 19px;
    }
    .contact-form .content {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        padding: 90px 20px 30px;
    }
    .contact-form .content .close {
        top: 37px;
        right: 10px;
    }
    .book-section .book-form > h1 {
        font-size: 30px;
        line-height: 47px;
    }
    .book-section .images-and-animation {
        height: 450px;

    }

}
@media screen and (max-width: 350px) {
    .book-section .images-and-animation {
        height: 390px;

    }
    footer .navigate > ul li {

        width: 46%;
    }
    .medium-title {
        font-size: 18px;
        line-height: 31px;
    }
    .how-it-works .steps .item {
        margin-bottom: 45px;
    }
    .how-it-works .images-with-animation {
        margin-bottom: 100px;
    }
    .service-plan-section {
        margin-top: 70px;
    }
    .navigation nav ul {
        margin-top: 30px;
    }

    header nav li a {
        padding: 20px 2px;
    }
    header nav li .contact-button {
        padding: 6px 20px;
        height: 52px;
        font-size: 16px;
        line-height: 28px;
        margin-top: 30px;
    }
}