/**
Theme Name: CreditMaster
Author: Anton Hap
Author URI: https://antonhap.site
Text Domain: hap
/* Note: The CSS files are loaded from assets/css/ folder. */

:root {
    --dark-color: #272727;
    --white-color: #F3F7FA;
    --main-color: linear-gradient(225deg, #152c85, #0790cf);
    --other-main-color: #9db9d6;
    --main-svg: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(3592%) hue-rotate(200deg) brightness(95%) contrast(97%);
}

html, body {
    width: 100vw;
    margin: 0;
    padding: 0;
    /*padding-top: 50px;*/
    /*padding-bottom: 125px;*/

    background: #F3F7FA;
    color: #282828;
    overflow: hidden;
    overflow-y: auto;

    font-family: "Montserrat", serif;
}

h1, h2, h3, h4, h5, p {
    padding: 0;
    margin: 0;
}

.background {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.5);
}

.main_button {
    display: none;
}


.control_buttons {
    width: 140px;
    height: 300px;
    padding-bottom: 20px;

    position: fixed;
    top: -210px;
    left: 50px;
    z-index: 139;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background: var(--main-color);
    border-radius: 0 0 25px 25px;

    cursor: pointer;
    transition-duration: 1s;
}

.control_buttons:hover {
    top: 75px;
}

.control_buttons .menu {
    width: 140px;

    position: absolute;
    right: 0;
    left: 0;
    bottom: 10px;

    text-align: center;

    color: var(--white-color);
}

.control_buttons .button {
    width: 100%;
    height: 50px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    text-decoration: none;
}

.control_buttons .button img {
    width: 30px;
    height: 30px;
    filter: brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(37%) hue-rotate(158deg) brightness(99%) contrast(100%);
}

.control_buttons .button text {
    width: 100%;

    color: var(--white-color);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.control_buttons .button:hover img {
    filter: brightness(0) saturate(100%) invert(8%) sepia(11%) saturate(16%) hue-rotate(341deg) brightness(100%) contrast(82%);
}

.control_buttons .button:hover text {
    color: #282828;
}

.control_buttons .focus img {
    filter: brightness(0) saturate(100%) invert(8%) sepia(11%) saturate(16%) hue-rotate(341deg) brightness(100%) contrast(82%);
}

.control_buttons .focus text {
    color: #282828;
}


header {
    width: 100%;
    height: 75px;
    overflow: hidden;
    z-index: 150;

    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    background: var(--white-color);
    border-bottom: 2px solid #154585;
}

header .logo {
    width: 250px;
    height: 100%;

    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    color: #154585;
}

header .logo .other_color {
    color: #282828;
}

header .box {
    width: calc(100% - 250px);
    height: 100%;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

header .box .phones {
    width: 800px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    text-align: center;
    font-size: 27px;
}

header .box .phones a {
    color: var(--white-color);
    text-decoration: none;
    font-weight: 600;
    background: var(--main-color);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header .text {
    width: 100%;
    height: 40px;

    font-size: 30px;
    font-weight: 600;
    color: var(--dark-color);
    white-space: nowrap;
    overflow: hidden;
}


.slider {
    width: 100%;
    height: 580px;

    background: radial-gradient(#0790cf 20%, #044c93, #152c85);
}

.slider .one_slide {
    width: 100%;
    height: 100%;

    position: relative;

    background-position: right bottom;
    background-size: 700px 550px;
}

.slider .one_slide .background {
    background: none;
}

.slider .one_slide .info {
    width: 1200px;
    padding-left: 50px;
    padding-right: 50px;

    position: absolute;
    bottom: 100px;
    left: 100px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.slider .one_slide .info h2 {
    font-size: 40px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 900;
    color: var(--white-color);
    text-shadow: 0 0 5px var(--dark-color);
}

.slider .one_slide .info text {
    margin-bottom: 20px;
    color: var(--white-color);
    font-weight: 400;
    text-shadow: 0 0 1px var(--dark-color), 0 0 5px var(--dark-color), 0 0 10px var(--dark-color);
    font-size: 25px;
}

.slider .one_slide .info .button {
    width: 320px;
    height: 65px;

    background: var(--white-color);

    display: flex;
    align-items: center;
    justify-content: center;

    text-transform: uppercase;
    color: #5d8cb4;
    font-weight: 600;
    text-align: center;
    font-size: 25px;

    cursor: pointer;
}

.slider .one_slide .info .button:hover {
    background: var(--main-color);
    color: var(--white-color);
}

.about, .decor, .cond, .credits, .phones_mails, .place, .req {
    width: calc(100% - 100px);
    padding-top: 100px;
    padding-left: 50px;
    padding-right: 50px;

    display: flex;
    flex-flow: column;
    align-items: center;
}

.about {
    margin-top: 100px;
    padding-bottom: 50px;
    padding-top: 50px;
    background: rgba(157, 185, 214, 0.3);
}

.about h2, .decor h2, .cond h2, .phones_mails h2, .place h2, .req h2 {
    width: 100%;
    margin-bottom: 50px;

    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    color: var(--dark-color);
    font-weight: 900;

    position: relative;
}

.about h2:after, .decor h2:after, .cond h2:after, .phones_mails h2:after, .place h2:after, .req h2:after {
    content: "";
    width: 200px;
    height: 5px;
    margin-right: auto;
    margin-left: auto;

    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    z-index: 0;

    background: var(--main-color);
}

.about {
    flex-flow: row wrap;
    justify-content: center;
}

.about text {
    width: 50%;
    font-size: 20px;
}

.about .box {
    width: 40%;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 20px;
}

.about .box .one {
    display: flex;
    align-items: flex-start;
}

.about .box .one img {
    width: 20px;
    height: 20px;

    filter: var(--main-svg);
}

.about .box .one text {
    width: calc(100% - 40px);
    padding-left: 20px;

    font-size: 20px;
}


.decor .box {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.decor .box .one {
    width: 800px;
    padding: 10px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;

    border: 2px solid #5d8cb4;
    border-radius: 25px;
}

.decor .box .one .row {
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items: center;
    gap: 50px;
}

.decor .box .one .row h3 {
    font-size: 50px;
    font-weight: 900;
}

.decor .box .one .row div {
    font-weight: 700;
    font-size: 30px;
}

.decor .box .one text {
    font-size: 20px;
}


.cond {
    width: 1200px;
    padding: 0;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.cond h2 {
    margin-left: 50px;
    margin-right: 50px;
}

.cond .box {
    width: 100%;

    display: flex;
    flex-flow: column;
}

.cond .box .one {
    width: calc(100% - 40px);
    padding: 20px;

    font-size: 20px;
    font-weight: 600;

    color: var(--dark-color);
}

.cond .box .one:nth-child(2n) {
    background: var(--main-color);
    color: #f0f0f0;
}

.credits, .form {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.credits {
    padding-top: 150px;
}

.credits h1, .form h1 {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 50px;

    text-align: center;

    font-size: 40px;
    text-transform: uppercase;
    color: var(--dark-color);
    font-weight: 900;

    position: relative;
}

.credits h1:after, .form h1:after {
    content: "";
    width: 350px;
    height: 5px;
    margin-right: auto;
    margin-left: auto;

    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;

    background: var(--main-color);
}

.credits .box {
    width: 100%;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.credits .box .one {
    width: 600px;
    height: 200px;
    padding-top: 50px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 30px;

    position: relative;

    box-shadow: 0 0 5px var(--dark-color);
}

.credits .box .one h2 {
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white-color);
    text-align: center;
    text-shadow: 0 0 5px black, 0 0 10px black;

    z-index: 100;
}

.credits .box .one .button {
    padding: 15px 25px;

    font-size: 25px;
    font-weight: 600;
    text-align: center;
    color: var(--white-color);

    background: var(--main-color);
    box-shadow: 0 0 5px black;
    border-radius: 15px;

    z-index: 100;
    cursor: pointer;
}

.credits .box .one .button a {
    color: var(--white-color);
    text-decoration: none;
}

.credits .box .one .button:hover {
    background: var(--white-color);
}

.credits .box .one .button:hover {
    color: #5d8cb4;
}


.phones_mails {
    margin-top: 75px;
}

.phones_mails, .place, .req {
    padding-top: 15px;
    padding-bottom: 15px;
}

.phones_mails h2, .place h2, .req h2 {
    font-size: 30px;
    margin-bottom: 25px;
    margin-top: 25px;
}

.phones_mails .box, .place .box, .req .box {
    width: 100%;

    display: flex;
    gap: 10px;
    justify-content: center;
}

.place .box {
    margin-bottom: 20px;
}

.phones_mails .box img, .place .box img, .req .box img {
    width: 35px;
    height: 35px;

    filter: var(--main-svg);
}

.phones_mails .box text, .place .box text, .req .box text {
    text-align: center;
    font-size: 20px;
    color: var(--dark-color);
    text-decoration: none;

    display: flex;
    align-items: flex-start;
    flex-flow: column;
    justify-content: center;
}

.phones_mails .box text a {
    color: var(--dark-color);
    text-decoration: none;
}


.pop {
    width: 700px;
    padding-top: 50px;
    background: #F3F7FA;
    margin-left: auto;
    margin-right: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    transform: scale(0.7);

    border-radius: 15px;
    border: 2px solid #282828;
    box-shadow: 0 0 5px black;
}

.pop .form a {
    width: 100%;
    color: #9db9d6;
    font-size: 20px;
    text-align: center;
}

.pop .box {
    width: 100% !important;
}

.pop .hide {
    width: 50px;
    height: 50px;

    position: absolute;
    right: 10px;
    top: 10px;

    text-align: center;
    color: #5e606c;
    font-size: 35px;

    cursor: pointer;
}

.pop .hide:after {
    content: "";
    width: 50px;
    height: 2px;

    position: absolute;
    top: 20px;
    left: 0;

    transform: rotate(-45deg) translateX(-10px);

    background: #5e606c;
}

.pop .wpcf7-list-item-label {
    display: none !important;
}

.pop .hide:before {
    content: "";
    width: 50px;
    height: 2px;

    position: absolute;
    top: 30px;
    left: 0;

    transform: rotate(45deg) translateX(-6px) translateY(3px);

    background: #5e606c;
}

.pop a {
    color: #9db9d6;
}

.pop .wpcf7-response-output {
    font-size: 20px;
    text-align: center;
    margin-top: -20px;
}

.form {
    width: 100%;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.form h1, .form h2 {
    font-size: 35px;
    margin-bottom: 20px;
}

.form h2 {
    width: 100%;
    text-align: center;
}

.form h1:after, .form h2:after {
    bottom: -5px;
}

.form .desc {
    width: calc(100% - 300px);
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;

    padding-right: 150px;
    padding-left: 150px;
    padding-top: 50px;
    padding-bottom: 50px;

    font-size: 20px;
    text-align: center;

    background: rgba(157, 187, 214, .3);
}

.pop .form .desc {
    padding: 0;
    background: none;
    width: 100%;
}

.pop .desc {
    margin-top: 20px;
    margin-bottom: 20px;
}

.form .box {
    width: 49%;
}

.form .box form span {
    width: 100%;
    margin-bottom: 20px;

    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 0;
}

.form .box form p span {
    width: 80%;
}

.form .box form .wpcf7-checkbox {
    width: 100%;
    margin-bottom: 0;
}

.form .box form .wpcf7-checkbox span {
    margin-bottom: 0;
}

.pop .form .box form p span {
    width: auto;
}

.form .box input {
    height: 50px;
    padding-left: 25px;

    background: none;
    border: 2px solid #9db9d6;
    border-radius: 25px;
    outline: none;

    position: relative;

    font-size: 20px;
    color: var(--dark-color);
}

.box .uacf7-form-151 input {
    width: 100%;
}

.wpcf7-form-control-wrap {
    overflow: visible !important;
}

.form .box label {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.form .box label input {
    width: 20px;
    height: 20px;
}

.form .box label span {
    /*font-size: 15px;*/
}

.uacf7-form-114, .uacf7-form-237, .uacf7-form-151 {
    padding-bottom: 20px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.uacf7-form-151 {
    padding-bottom: 0;
}

.form .box input[type="submit"] {
    width: 300px;
    height: 60px;
    padding: 0;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;

    background: var(--main-color);

    font-size: 25px;
    font-weight: 600;
    color: var(--white-color);

    cursor: pointer;
}

.pop .form .box input[type="submit"] {
    margin-top: 10px;
}

.form .box input[type="submit"]:hover {
    color: var(--other-main-color);
    background: var(--white-color);
}

.form .dogovor {
    width: 45%;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 20px;
    overflow-y: auto;

    border-radius: 25px;
    border: 2px solid var(--dark-color);
}

.form .dogovor::-webkit-scrollbar {
    width: 1px;
}

.form .dogovor .one {
    margin-bottom: 50px;

    position: relative;
}

.form .dogovor .one h4 {
    width: 100%;
    margin-bottom: 20px;

    text-align: left;
    font-size: 25px;
}

.form .dogovor .header {
    height: 300px;
}

.form .dogovor .header h4 {
    width: 40%;
    position: absolute;
    left: 20px;
    top: 50px;

    font-size: 22px;
}

.form .dogovor .header h5 {
    width: 40%;

    position: absolute;
    right: 20px;
    top: 50px;
    font-size: 22px;
}

.form .dogovor .one .text {
    width: calc(100% - 60px);
    padding-left: 60px;

    font-size: 20px;
    text-indent: 25px;
}

.form .dogovor .one .text img {
    width: 100%;
}

.form .docs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}

.form .docs h3 {
    width: 100%;
    margin-top: 200px;
    margin-bottom: 20px;

    text-align: center;
    font-size: 60px;
}

.form .docs a {
    color: var(--dark-color);
    font-size: 45px;
}

.form .docs p {
    margin-bottom: 40px;
}

.form_page {
    padding-top: 75px;
}


footer {
    width: 100%;
    margin-top: 100px;
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;

    background: var(--dark-color);
}

footer .req {
    width: 50%;
    padding: 0 !important;

    color: var(--white-color);
    font-size: 18px;
    text-align: center;
}

footer .contacts, footer .doc {
    width: 40%;

    color: var(--white-color);
    text-align: center;
    font-size: 15px;

    display: flex;
    flex-flow: column;
    align-items: center;
}

footer .doc {
    width: 80%;
}

footer h3 {
    font-size: 18px;

    margin-bottom: 10px;
}

footer .contacts a, footer .doc a {
    color: var(--white-color);
    font-size: 15px;
    text-decoration: none;
}

footer .doc a {
    color: #9db9d6;
}

@media (max-width: 1000px) {
    html, body {
        width: 100vw;
        margin: 0;
        padding: 0;
        padding-top: 50px;
        padding-bottom: 125px;

        background: #F3F7FA;
        color: var(--dark-color);
        overflow: hidden;
        overflow-y: auto;

        font-family: "Montserrat", serif;
    }

    h1, h2, h3, h4, h5, p {
        padding: 0;
        margin: 0;
    }

    .background {
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        left: 0;

        background: rgba(0, 0, 0, 0.5);
    }

    .main_button {
        width: 100%;
        height: 150px;

        position: fixed;
        bottom: 125px;
        left: 0;
        z-index: 139;
        border-radius: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: var(--main-color);
        border-top: 5px solid var(--white-color);

        font-size: 70px;
        font-weight: 900;
        color: var(--white-color);

        cursor: pointer;
    }

    .main_button a {
        color: var(--white-color);
        text-decoration: none;
    }

    .main_button:hover {
        background: var(--white-color);
    }

    .main_button:hover {
        color: #5d8cb4;
    }


    .control_buttons {
        width: 100%;
        height: 125px;
        padding: 0;

        position: fixed;
        left: 0;
        bottom: 0 !important;
        top: initial;
        z-index: 139;
        border-radius: 0;

        display: flex;
        flex-flow: row nowrap;

        background: #9db9d6;
        border-top: 5px solid var(--white-color);
    }

    .control_buttons .menu {
        display: none;
    }

    .control_buttons .button {
        width: 25%;
        height: 100%;

        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 10px;

        text-decoration: none;
    }

    .control_buttons .button img {
        width: 50px;
        height: 50px;

        filter: brightness(0) saturate(100%) invert(12%) sepia(83%) saturate(9%) hue-rotate(357deg) brightness(98%) contrast(96%);
    }

    .control_buttons .button text {
        width: 100%;

        font-weight: 600;
        font-size: 25px;
        text-align: center;
        color: var(--dark-color);
        text-transform: uppercase;
        text-decoration: none;
    }

    .control_buttons:hover {
        top: initial;
    }

    .control_buttons .button:hover img {
        filter: brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(37%) hue-rotate(158deg) brightness(99%) contrast(100%);
    }

    .control_buttons .button:hover text {
        color: var(--white-color);
    }

    .control_buttons .focus img {
        filter: brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(37%) hue-rotate(158deg) brightness(99%) contrast(100%);
    }

    .control_buttons .focus text {
        color: var(--white-color);
    }


    header {
        width: 100%;
        height: 150px;
        overflow: hidden;
        z-index: 150;

        position: fixed;
        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        background: var(--other-main-color);
    }

    header .logo {
        width: 250px;
        height: 100%;

        font-size: 40px;
        font-weight: 900;
        text-transform: uppercase;
        text-align: center;

        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    header .logo .other_color {
        color: var(--white-color);
    }

    header .box {
        width: calc(100% - 250px);
        height: 100%;

        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    header .box .phones {
        width: 800px;
        height: 75px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;

        text-align: center;
        font-size: 40px;
    }

    header .box .phones a {
        color: var(--dark-color);
        text-decoration: none;

        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        background: none;
    }

    header .text {
        height: 50px;
        width: 100%;

        display: flex;
        align-items: flex-end;

        font-size: 40px;
        font-weight: 600;
        color: var(--white-color);
        white-space: nowrap;
        overflow: hidden;
    }


    .slider {
        width: 100%;
        height: 1000px;

        background: radial-gradient(#0790cf 20%, #044c93, #152c85);
    }

    .slider .one_slide {
        width: 100%;
        height: 100%;

        position: relative;
        background-size: cover;
        background-position: top;
    }

    .slider .one_slide .background {
        background: linear-gradient(rgba(0, 0, 0, 0) 60%, var(--white-color));
    }

    .slider .one_slide .info {
        width: calc(100% - 100px);
        padding-left: 50px;
        padding-right: 50px;

        position: absolute;
        bottom: 150px;
        left: 0;

        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
    }

    .slider .one_slide .info h2 {
        font-size: 55px;
        text-transform: uppercase;
        text-align: left;
        font-weight: 900;
        color: var(--white-color);
        text-shadow: 0 0 5px var(--dark-color);
    }

    .slider .one_slide .info text {
        margin-bottom: 50px;
        color: var(--white-color);
        font-weight: 400;
        text-shadow: 0 0 1px var(--dark-color), 0 0 5px var(--dark-color), 0 0 10px var(--dark-color);
        font-size: 40px;
    }

    .slider .one_slide .info .button {
        width: 450px;
        height: 100px;

        background: var(--main-color);
        border-radius: 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-transform: uppercase;
        color: var(--white-color);
        font-weight: 900;
        text-align: center;
        font-size: 35px;

        cursor: pointer;
    }

    .slider .one_slide .info .button a {
        color: var(--white-color);
        text-decoration: none;
    }

    .slider .one_slide .info .button:hover {
        background: var(--white-color);
    }

    .slider .one_slide .info .button:hover a {
        color: #5d8cb4;
    }

    .about, .decor, .cond, .credits, .phones_mails, .place, .req {
        width: calc(100% - 100px);
        padding-top: 100px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .about {
        padding-top: 50px;
    }

    .about {
        display: block;
    }

    .about h2, .decor h2, .cond h2, .phones_mails h2, .place h2, .req h2 {
        margin-bottom: 50px;

        font-size: 55px;
        text-transform: uppercase;
        color: var(--dark-color);
        font-weight: 900;

        position: relative;
    }

    .about h2:after, .decor h2:after, .cond h2:after, .phones_mails h2:after, .place h2:after, .req h2:after {
        content: "";
        width: 350px;
        height: 10px;

        position: absolute;
        bottom: -5px;
        left: 0;
        z-index: 0;

        background: var(--main-color);
    }

    .about text {
        font-size: 30px;
    }

    .about .box {
        margin-top: 50px;
        width: auto;
        display: block;
    }

    .about .box .one {
        margin-top: 50px;
        margin-bottom: 50px;
        padding-left: 50px;

        display: flex;
        align-items: flex-start;
    }

    .about .box .one img {
        width: 35px;
        height: 35px;
        margin-top: 10px;

        filter: var(--main-svg);
    }

    .about .box .one text {
        padding-left: 20px;

        font-size: 35px;
        line-height: 50px;
    }


    .decor .box {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        gap: 50px;
    }

    .decor .box .one {
        width: 90%;
        padding: 20px;

        display: flex;
        flex-flow: column;
        align-items: flex-start;

        border: 5px solid #5d8cb4;
        border-radius: 25px;
    }

    .decor .box .one .row {
        width: 100%;

        display: flex;
        flex-flow: row nowrap;
        justify-content: left;
        align-items: center;
        gap: 50px;
    }

    .decor .box .one .row h3 {
        font-size: 80px;
        font-weight: 900;
    }

    .decor .box .one .row div {
        font-weight: 700;
        font-size: 45px;
    }

    .decor .box .one text {
        font-size: 35px;
    }


    .cond {
        padding: 0;
        margin-top: 100px;
        margin-left: 0;
        margin-right: 0;
    }

    .cond h2 {
        margin-right: auto;
    }

    .cond .box {
        width: 100%;

        display: flex;
        flex-flow: column;
    }

    .cond .box .one {
        width: 100%;
        padding: 50px 50px 50px 50px;

        font-size: 30px;
        font-weight: 600;

        color: var(--dark-color);
    }

    .cond .box .one:nth-child(2n) {
        background: var(--main-color);
        color: #f0f0f0;
    }


    .credits, .form {
        width: 100%;
        padding-top: 30px;
        padding-left: 0;
        padding-right: 0;
    }

    .credits h1, .form h1 {
        width: 100%;
        margin-bottom: 100px;

        text-align: center;

        font-size: 55px;
        text-transform: uppercase;
        color: var(--dark-color);
        font-weight: 900;

        position: relative;
    }

    .credits h1:after, .form h1:after {
        content: "";
        width: 450px;
        height: 15px;
        margin-right: auto;
        margin-left: auto;

        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;

        background: var(--main-color);
    }

    .credits .box {
        width: 100%;

        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .credits .box .one {
        width: 100%;
        height: 300px;
        padding-top: 50px;

        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 50px;

        position: relative;

        box-shadow: 0 0 5px var(--dark-color);
    }

    .credits .box .one h2 {
        font-size: 45px;
        font-weight: 900;
        text-transform: uppercase;
        color: var(--white-color);
        text-align: center;
        text-shadow: 0 0 5px black, 0 0 10px black;

        z-index: 100;
    }

    .credits .box .one .button {
        padding: 25px 35px;

        font-size: 35px;
        font-weight: 900;
        text-align: center;
        color: var(--white-color);

        background: var(--main-color);
        box-shadow: 0 0 5px black;
        border-radius: 15px;

        z-index: 100;
    }

    .credits .box .one .button a {
        color: var(--white-color);
        text-decoration: none;
    }

    .credits .box .one .button:hover {
        background: var(--white-color);
    }

    .credits .box .one .button:hover a {
        color: #5d8cb4;
    }


    .phones_mails, .place, .req {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .phones_mails h2, .place h2, .req h2 {
        font-size: 55px;
    }

    .phones_mails .box, .place .box, .req .box {
        width: 100%;

        display: flex;
        gap: 50px;
        justify-content: center;
    }

    .phones_mails .box img, .place .box img, .req .box img {
        width: 100px;
        height: 100px;

        filter: var(--main-svg);
    }

    .phones_mails .box text, .place .box text, .req .box text {
        width: calc(80% - 50px);

        text-align: left;
        font-size: 40px;
        color: var(--dark-color);
        text-decoration: none;

        display: flex;
        align-items: flex-start;
        flex-flow: column;
        justify-content: center;
    }

    .phones_mails .box text a {
        color: var(--dark-color);
        text-decoration: none;
        width: 100%;
        height: 50px;
    }

    .place .map {
        width: 1000px !important;
        height: 600px !important;
    }


    .pop {
        width: 100vw;
        height: 100vh;
        z-index: 140;
        background: #F3F7FA;

        position: absolute;
        top: 150px;
        left: 0;
        border-radius: 0;
        transform: scale(1);
    }


    .pop .form a {
        width: 100%;
        color: #9db9d6;
        font-size: 35px;
    }

    .pop .hide {
        width: 50px;
        height: 50px;

        position: absolute;
        right: 10px;
        top: 10px;

        text-align: center;
        color: #5e606c;
        font-size: 35px;
    }

    .pop .hide:after {
        content: "";
        width: 50px;
        height: 5px;

        position: absolute;
        top: 20px;
        left: 0;

        transform: rotate(-45deg) translateX(-10px);

        background: #5e606c;
    }

    .pop .hide:before {
        content: "";
        width: 50px;
        height: 5px;

        position: absolute;
        top: 30px;
        left: 0;

        transform: rotate(45deg) translateX(-6px) translateY(3px);

        background: #5e606c;
    }

    .pop a {
        color: #9db9d6;
    }

    .pop .wpcf7-response-output {
        font-size: 30px;
        text-align: center;
        margin-top: -20px;
    }

    .form {
        width: 100%;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .form .box {
        width: 95%;
    }

    .form h1, .form h2 {
        font-size: 55px;
    }

    .form h2 {
        width: 100%;
        text-align: center;
    }

    .form h1:after, .form h2:after {
        bottom: -20px;
    }

    .form .desc {
        width: 100%;
        margin-top: 50px;
        margin-bottom: 30px;


        font-size: 30px;
        text-align: center;
    }

    .pop .desc {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .form .box form p {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 20px;
    }

    .form .box input {
        width: calc(100% - 125px);
        height: 100px;
        padding-left: 75px;

        background: none;
        border: 5px solid #9db9d6;
        border-radius: 25px;
        outline: none;

        position: relative;

        font-size: 40px;
        color: var(--dark-color);
    }

    .wpcf7-form-control-wrap {
        overflow: visible !important;
    }

    .wpcf7-list-item-label {
        font-size: 30px;
        text-align: left;
        align-items: flex-start !important;
    }

    .form .box form p span {
        width: auto;
    }

    .form .box label {
        width: calc(100% - 40px);

        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .form .box label input {
        width: 50px;
        height: 50px;
    }

    .form .box label text {
        font-size: 35px;
    }

    .form .box input[type="submit"] {
        width: 600px;
        height: 125px;
        padding: 0;
        margin-top: 100px;

        background: var(--main-color);
        border-radius: 25px;

        font-size: 45px;
        font-weight: 900;
        color: var(--white-color);
    }

    .form .dogovor {
        width: 90%;
        height: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        overflow-y: auto;

        border-radius: 25px;
        border: 2px solid var(--dark-color);
    }

    .form .dogovor .one {
        margin-bottom: 50px;
    }

    .form .dogovor .one h4 {
        width: 100%;
        margin-bottom: 20px;

        text-align: left;
        font-size: 35px;
    }

    .form .dogovor .one .text {
        width: calc(100% - 60px);
        padding-left: 60px;

        font-size: 25px;
        text-indent: 25px;
    }

    .form .dogovor .one .text img {
        width: 100%;
    }

    .form .dogovor .header h4 {
        width: 40%;
        position: absolute;
        left: 20px;
        top: 50px;

        font-size: 30px;
    }

    .form .dogovor .header h5 {
        width: 40%;

        position: absolute;
        right: 20px;
        top: 50px;
        font-size: 30px;
    }

    .form .docs {
        width: 95%;
        margin-left: auto;
        margin-right: auto;

        display: flex;
        flex-flow: column;
        align-items: center;
        text-align: center;
    }

    .form .docs h3 {
        width: 100%;
        margin-top: 200px;
        margin-bottom: 20px;

        text-align: center;
        font-size: 60px;
    }

    .form .docs a {
        color: var(--dark-color);
        font-size: 45px;
    }

    .form .docs p {
        margin-bottom: 40px;
    }

    .form_page {
        padding-top: 100px;
    }


    footer {
        width: 100%;
        margin-top: 50px;
        padding-top: 50px;
        padding-bottom: 75px;

        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 30px;

        background: var(--dark-color);
    }

    footer .req {
        width: 90%;
        padding: 0 !important;

        color: var(--white-color);
        font-size: 25px;
        text-align: center;
    }

    footer .contacts, footer .doc {
        width: 90%;

        color: var(--white-color);
        text-align: center;
        font-size: 20px;

        display: flex;
        flex-flow: column;
        align-items: center;
    }

    footer h3 {
        font-size: 40px;

        margin-bottom: 50px;
    }

    footer .contacts a, footer .doc a {
        color: var(--white-color);
        font-size: 30px;
        text-decoration: none;
        width: 100%;
    }

    footer .doc a {
        color: #9db9d6;
    }
}


.comments {
    width: 100%;
    margin-top: 100px;

    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 24px;
}

.comments h2 {
    width: 100%;
    margin-bottom: 50px;

    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    color: var(--dark-color);
    font-weight: 900;

    position: relative;
}

.comments h2:after {
    content: "";
    width: 200px;
    height: 5px;
    margin-right: auto;
    margin-left: auto;

    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    z-index: 0;

    background: var(--main-color);
}

.comments .box {
    width: 100%;

    display: flex;
    justify-content: center;
    gap: 24px;
}

.comments .boxes {
    width: 80%;

    position: relative;
}

.comments .boxes > img {
    width: 50px;

    position: absolute;
    top: 50%;
    left: 0;

    filter: var(--main-svg);
    cursor: pointer;
}

.comments .boxes > .left {
    transform: rotate(180deg);
}

.comments .boxes > .right {
    left: auto;
    right: 0;
}

.comments .boxes > img:hover {
    opacity: 0.5;
}

.comments .box img {
    width: 280px;
    height: 440px;

    object-fit: contain;
}

.comments .nav {
    width: 100%;

    display: flex;
    gap: 5px;
    justify-content: center;
}

.comments .nav span {
    width: 5px;
    height: 5px;

    background: #152c85;
    border-radius: 50%;
    opacity: 0.3;
}

.comments .nav .focus {
    opacity: 1;
}



@media (max-width: 1000px) {
    .comments {
        width: 100%;
        margin-top: 100px;

        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 24px;
    }

    .comments h2 {
        margin-bottom: 50px;

        font-size: 55px;
        text-transform: uppercase;
        color: var(--dark-color);
        font-weight: 900;

        position: relative;
    }

    .comments h2:after {
        content: "";
        width: 350px;
        height: 10px;

        position: absolute;
        bottom: -5px;
        left: 0;
        z-index: 0;

        background: var(--main-color);
    }

    .comments .box {
        width: 100%;
        gap: 16px;
        flex-flow: row wrap;
    }

    .comments .boxes {
        width: 80%;
    }

    .comments .boxes > img {
        width: 20px;

        top: 50%;
        left: -50px;
    }

    .comments .boxes > .right {
        right: -50px;
        left: auto;
    }

    .comments .box img {
        width: 380px;
        height: 530px;

        object-fit: contain;
    }
}