@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body {
    font-family: 'Jost', sans-serif;
    font-size  : 13pt;
    font-weight: 400;
}

body * {
    box-sizing: border-box;
}

.container {
    display  : block;
    width    : 1400px;
    max-width: 100%;
    margin   : 0px auto;
}

.block-menu {
    display        : flex;
    width          : 100%;
    padding        : 15px 5px;
    justify-content: space-between;
    align-items    : center;
}

.block-menu .logo {
    display: block;
    width  : 170px;
}

.block-menu .menu {
    display: flex;
}

.block-menu .menu li {
    margin: 5px 10px;
}

.block-menu .menu li a {
    color: rgb(255, 255, 255);
}

.block-menu .menu li a:hover {
    color: #E26F38;
}

.head-block {
    display            : block;
    background-image   : url(../images/bg-head.jpg);
    background-size    : cover;
    background-position: left -350px center;
}

.head-block .fon {
    width           : 100%;
    height          : 100%;
    padding         : 10px 20px 10px 20px;
    background-color: #0000007d;
    color           : #fff;
    min-height      : 700px;
    display         : flex;
    flex-wrap       : wrap;
    align-content   : space-between;
}

.head-block .fon h1 {
    margin: 30px auto;
}

.link_top {
    width          : 400px;
    max-width      : 100%;
    margin         : 30px auto;
    border         : none;
    background     : #b32d2e;
    border-radius  : 10px;
    font-weight    : 700;
    font-size      : 27px;
    line-height    : 40px;
    display        : flex;
    align-items    : center;
    text-align     : center;
    color          : #FFFFFF;
    padding        : 10px 20px;
    text-align     : center;
    justify-content: center;
    cursor         : pointer;
}

.link_top:hover {
    background: #c02b2b;
    color     : #FFFFFF;
}

.text-top {
    width     : 700px;
    max-width : 100%;
    margin    : 20px auto;
    text-align: center;
}

h1 {
    font-size  : 220%;
    font-weight: 600;
}

h4 {
    font-size  : 120%;
    font-weight: 400;
}

.content {
    padding: 40px 20px
}

.block-two {
    display        : flex;
    align-items    : stretch;
    justify-content: space-around;
}

.block-two .cont:nth-child(1) {
    width        : 55%;
    padding      : 80px 30px;
    padding-right: 60px;
}

.block-two .cont:nth-child(2) {
    width              : 45%;
    background-image   : url(../images/unsplash-tkcn-kfxu-1-au.jpg);
    background-size    : cover;
    background-position: center center;
}

.block-two .cont-img-right {
    width: 100%;
}

h3 {
    display    : block;
    font-weight: 700;
    font-size  : 140%;
    margin     : 15px auto;
}

.services-block {
    background-color: #d3652e21;
}

.services-block.services-block-two {
    background-color: #fff;
}

.services-block .flex-block {
    display: flex;
}

.services-block .flex-block .ittem {
    padding   : 15px;
    text-align: center;
}

.services-block .flex-block .ittem h3 {
    font-size: 112%;
}

.services-block .flex-block .ittem .img-bg-block {
    width              : 100%;
    height             : 60px;
    background-size    : 45px;
    background-position: center center;
    background-repeat  : no-repeat;
}

.services-block .flex-block .ittem:nth-child(1) .img-bg-block {
    background-image: url(../images/icon-cont-1.svg);
}

.services-block .flex-block .ittem:nth-child(2) .img-bg-block {
    background-image: url(../images/icon-cont-2.svg);
}

.services-block .flex-block .ittem:nth-child(3) .img-bg-block {
    background-image: url(../images/icon-cont-3.svg);
}

.services-block .flex-block .ittem:nth-child(4) .img-bg-block {
    background-image: url(https://buying-mc.com/lander/plumbing-repair/images/ittem-4.jpg);
}

.block-types-of-debt {
    display        : flex;
    align-items    : stretch;
    justify-content: space-around;
}

.block-types-of-debt .cont:nth-child(1) {
    width        : 65%;
    padding-right: 40px;
}

.block-types-of-debt .cont:nth-child(2) {
    width              : 35%;
    background-image   : url(https://buying-mc.com/lander/plumbing-repair/images/types-of-debt-img.jpg);
    background-size    : cover;
    background-position: center center;
}

.flex-block-doc {
    display  : flex;
    flex-wrap: wrap;
}

.flex-block-doc .ittem {
    background-size    : 60px;
    background-repeat  : no-repeat;
    background-position: left 5px center;
    padding-left       : 70px;
    width              : 50%;
    padding-right      : 15px;
    margin             : 25px auto
}

.flex-block-doc .ittem:nth-child(1) {
    background-image: url(../images/types-of-debt-1.svg);
}

.flex-block-doc .ittem:nth-child(2) {
    background-image: url(../images/types-of-debt-2.svg);
}

.flex-block-doc .ittem:nth-child(3) {
    background-image: url(../images/types-of-debt-3.svg);
}

.flex-block-doc .ittem:nth-child(4) {
    background-image: url(../images/types-of-debt-4.svg);
}

.flex-block-doc h4 {
    font-weight: 500;
}


.block-about-us {
    display         : flex;
    align-items     : stretch;
    justify-content : space-around;
    background-color: #d3652e21;
}

.block-about-us .cont:nth-child(1) {
    display               : flex;
    flex-wrap             : wrap;
    width                 : 50%;
    padding               : 40px 30px;
    justify-content       : flex-start;
    align-content         : center;
    /* background-image   : url(../images/about-us-img.jpg);
    background-size       : cover;
    background-position   : center center; */

}

.block-about-us .cont:nth-child(1) h3 {
    text-align : left;
    margin-left: 0px;
}

.block-about-us .cont:nth-child(2) {
    display     : flex;
    flex-wrap   : wrap;
    width       : 50%;
    padding     : 40px 30px;
    padding-left: 40px;
}

.block-about-us .cont:nth-child(2) p {
    display            : flex;
    margin             : 10px auto;
    padding-left       : 35px;
    background-image   : url(../images/check.svg);
    background-position: left 5px center;
    background-size    : 25px;
    background-repeat  : no-repeat;
    align-items        : center;
}


.contact {
    display: flex;
}

.contact .cont {
    width  : 50%;
    padding: 30px
}

.contact .cont {
    width  : 50%;
    padding: 30px
}

a:hover {
    color: #E26F38;
}

.footer-block {
    display         : block;
    min-height      : 50px;
    margin          : 40px auto auto auto;
    width           : 100%;
    background-color: #333a44;
}

.contact .cont a {
    color: #E26F38;

}

.contact .cont h4 {
    margin: 10px auto;
}

.phone-link {
    display            : block;
    padding-left       : 30px;
    background-image   : url(../images/phone.svg);
    background-position: left -4px center;
    background-size    : 30px;
    background-repeat  : no-repeat;
}

.email-link {
    display            : block;
    padding-left       : 35px;
    background-image   : url(../images/email.svg);
    background-position: left center;
    background-size    : 20px;
    background-repeat  : no-repeat;
}

.footer-block a {
    color  : #fff;
    display: table;
    margin : 10px auto;
}

.footer-block a:hover {
    color: #E26F38;
}

.footer-block {
    color  : #fff;
    display: table;
}

.privacy p {
    margin : 20px auto;
    display: block;
}

.privacy h4 {
    margin     : 20px auto;
    display    : block;
    font-weight: 700;
}

.privacy ul {
    margin : 20px auto;
    display: block;
}

.privacy ul li {
    margin      : 10px auto;
    display     : block;
    padding-left: 20px;
}


.h3-form {
    width         : 100%;
    display       : block;
    font-weight   : 700;
    font-size     : 140%;
    margin        : 15px auto;
    text-transform: uppercase;
    text-align    : center;
}

.little-text {
    display   : block;
    font-size : 80%;
    text-align: center;
    margin-top: 100px;
}

.container-form {
    display  : block;
    width    : 500px;
    margin   : 40px auto;
    max-width: 100%;
}

.container-form form .form-row {
    display: flex;
    margin : 15px 0;
}

.container-form form .form-row.half .input-data {
    width : calc(50% - 10px);
    margin: 0;
}

.container-form form .form-row.half {
    justify-content: space-between;
}

.container-form form .form-row.full {
    flex-wrap: wrap;
}

.container-form form .form-row.full .input-data:nth-child(1) {
    margin-bottom: 15px;
}

.container-form form .form-row .input-data {
    width   : 100%;
    height  : 40px;
    margin  : 0 auto;
    position: relative;
}

.container-form form .form-row .textarea {
    height: 70px;
}

.container-form .input-data input,
.container-form .textarea textarea {
    display      : block;
    width        : 100%;
    height       : 100%;
    border       : none;
    font-size    : 17px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.container-form .input-data input:focus-visible {
    border       : none;
    outline-width: 0;
}

.container-form .input-data input:focus~label,
.container-form .textarea textarea:focus~label,
.container-form .input-data input:valid~label,
.container-form .textarea textarea:valid~label {
    transform: translateY(-20px);
    font-size: 14px;
    color    : #3498db;
}

.container-form .textarea textarea {
    resize     : none;
    padding-top: 10px;
}

.container-form .input-data label {
    position      : absolute;
    pointer-events: none;
    bottom        : 10px;
    font-size     : 16px;
    transition    : all 0.3s ease;
}

.container-form .textarea label {
    width     : 100%;
    bottom    : 40px;
    background: #fff;
}

.container-form .input-data .underline {
    position: absolute;
    bottom  : 0;
    height  : 1px;
    width   : 100%;
}

.container-form .input-data .underline:before {
    position        : absolute;
    content         : "";
    height          : 1px;
    width           : 100%;
    background      : #3498db;
    transform       : scaleX(0);
    transform-origin: center;
    transition      : transform 0.3s ease;
}

.container-form .input-data input:focus~.underline:before,
.container-form .input-data input:valid~.underline:before,
.container-form .textarea textarea:focus~.underline:before,
.container-form .textarea textarea:valid~.underline:before {
    transform        : scale(1);
    -webkit-transform: scale(1);
    -moz-transform   : scale(1);
    -ms-transform    : scale(1);
    -o-transform     : scale(1);
}

.container-form .submit-btn .input-data {
    overflow: hidden;
    height  : 45px !important;
    width   : 25% !important;
}

.container-form .submit-btn .input-data .inner {
    height    : 100%;
    width     : 300%;
    position  : absolute;
    left      : -100%;
    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
    transition: all 0.4s;
}

.container-form .submit-btn .input-data:hover .inner {
    left: 0;
}

.container-form .submit-btn .input-data input {
    background    : none;
    border        : none;
    color         : #fff;
    font-size     : 17px;
    font-weight   : 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor        : pointer;
    position      : relative;
    z-index       : 2;
}

@media (max-width: 700px) {
    .container-form .text {
        font-size: 30px;
    }

    .container-form form {
        padding: 10px 0 0 0;
    }

    .container-form form .form-row {
        display: block;
    }

    .container-form form .form-row .input-data {
        margin: 35px 0 !important;
        width : 100%;
    }

    .container-form form .form-row.half .input-data {
        width: 100%;
    }

    .container-form .submit-btn .input-data {
        width: 40% !important;
    }
}

.input-botton {
    width          : 100%;
    margin         : 30px auto;
    border         : none;
    background     : #E26F38;
    border-radius  : 10px;
    font-weight    : 700;
    font-size      : 27px;
    line-height    : 40px;
    display        : flex;
    align-items    : center;
    text-align     : center;
    color          : #FFFFFF;
    padding        : 10px 20px;
    text-align     : center;
    justify-content: center;
    cursor         : pointer;

}

.input-botton.tel-button {
    width          : 450px;
    max-width      : 100%;
    text-decoration: none;
}

.input-botton:hover {
    background: #a84b1f;
}

.input-botton:active {
    background: #f17c46;
}

.contact.form {
    display  : flex;
    flex-wrap: wrap;
}

.block-about-us .cont:nth-child(2) h3 {
    width: 100%;
}

.block-about-us .cont:nth-child(2) p {
    width: 50%;
}

.link_cont {
    width          : 400px;
    max-width      : 100%;
    margin-top     : 30px;
    border         : none;
    background     : #b32d2e;
    border-radius  : 10px;
    font-weight    : 500;
    font-size      : 27px;
    line-height    : 40px;
    display        : flex;
    align-items    : center;
    text-align     : center;
    color          : #FFFFFF;
    padding        : 10px 20px;
    text-align     : center;
    justify-content: center;
    cursor         : pointer;
}

.link_cont:hover {
    color: #FFFFFF;
}

.contru_link {
    background-image   : url(../images/cobtry.svg);
    background-repeat  : no-repeat;
    background-position: left;
    padding-left       : 30px;
}

.ratings {
    font-size: 35px;
    color    : #ffcc00;
}

.features {
    display        : flex;
    flex-wrap      : wrap;
    width          : 100%;
    justify-content: space-around;
    margin-bottom  : 20px;
    gap            : 10px;

}

.features .span_f {
    display            : flex;
    width              : 230px;
    padding-left       : 50px;
    background-repeat  : no-repeat;
    background-position: left center;
    background-size    : 40px;
    align-items        : center;
}

.features .span_f:nth-child(1) {
    background-image: url(../images/ic-twotone-plumbing.svg);
}

.features .span_f:nth-child(2) {
    background-image: url(../images/top-icon-2.svg);
}

.features .span_f:nth-child(3) {
    background-image: url(../images/material-symbols-e-911-emergency.svg);
}

.features .span_f:nth-child(4) {
    background-image: url(../images/top-icon-4.svg);
}

.features .span_f:nth-child(5) {
    background-image: url(../images/top-icon-5.svg);
}


.comment-slider {
    width           : 820px;
    max-width       : 100%;
    margin          : auto;
    background-color: #b32d2e;
    padding         : 40px;
    border-radius   : 10px;
    text-align      : center;
    position        : relative;
    overflow        : hidden;
    /* Скрывает элементы, которые выходят за границы контейнера */
}

.comment-slider h2 {
    color        : white;
    font-weight  : bold;
    margin-bottom: 30px;
}

.comments {
    display   : flex;
    transition: transform 0.5s ease-in-out;

}

.comment {
    min-width      : 100%;
    /* Устанавливаем ширину каждого комментария равной ширине контейнера */
    box-sizing     : border-box;
    /* Учитываем padding и border в ширине и высоте */
    color          : white;
    opacity        : 0;
    /* Делаем комментарии невидимыми по умолчанию */
    transition     : opacity 0.5s ease-in-out;
    /* Плавный переход для видимости */
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.stars {
    font-size    : 24px;
    color        : #ffcc00;
    /* Жёлтый цвет для звёзд */
    margin-bottom: 15px;
}

.comment p {
    font-size    : 18px;
    line-height  : 1.5;
    margin-bottom: 20px;
}

.comment footer {
    font-weight: bold;
    color      : #ffcc00;
    /* Жёлтый цвет для имени */
    font-size  : 16px;
}

.comment-slider button {
    position        : absolute;
    top             : 35px;
    transform       : translateY(-50%);
    background-color: #ffcc00;
    color           : white;
    border          : none;
    padding         : 5px 10px;
    cursor          : pointer;
    border-radius   : 5px;
    z-index         : 1000;
    text-transform  : uppercase;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.comment-slider button:hover {
    background-color: #ff9900;
}

.disclaimer {
    font-size : 80%;
    margin    : 20px auto;
    text-align: center;
    padding   : 10px;
}

.disclaimer a {
    display: inline-block;
}

.hero-section {
    background-color: #333a44;
    width           : 100%;
    max-width       : 100%;
    padding         : 60px 20px;
    text-align      : center;
    position        : relative;
    color           : white;
}

.hero-content {
    position: relative;
    z-index : 2;
}

.highlight-text {
    color      : white;
    display    : inline-block;
    padding    : 10px 20px;
    font-size  : 30px;
    font-weight: bold;
}

.hero-content h1 {
    font-size: 30px;
    margin   : 20px 0;
    color    : #d0d0d0;
}

.hero-content .cta-button {
    background-color: #b32d2e;
    /* Синий фон для кнопки */
    color           : white;
    padding         : 10px 20px;
    text-decoration : none;
    font-weight     : bold;
    border-radius   : 5px;
    display         : inline-block;
    transition      : background-color 0.3s ease;
    margin-top      : 20px;
    width           : 400px;
    max-width       : 100%;
}

.hero-content .cta-button:hover {
    background-color: #c63131;
    /* Темнее синий для эффекта наведения */
}

.footer-container {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    padding         : 110px 20px 20px 20px;
    background-color: white;
}

.footer-logo {
    flex: 1;
}

.logo-placeholder {
    width           : 150px;
    height          : 100px;
    background-color: #d3d3d3;
    display         : flex;
    justify-content : center;
    align-items     : center;
    color           : black;
    font-size       : 20px;
}

.footer-links {
    display        : flex;
    flex           : 2;
    justify-content: flex-start;
    gap            : 140px;
}

.footer-column {
    text-align: left;
}

.footer-column h3 {
    margin-top   : 0;
    margin-bottom: 10px;
    font-size    : 18px;
    color        : #333;
    font-weight  : bold;
}

.footer-column ul {
    list-style-type: none;
    padding        : 0;
}

.footer-column li {
    margin-bottom: 5px;
}

.footer-column a {
    text-decoration: none;
    color          : #777777;
}

.footer-column a:hover {
    text-decoration: underline;
}

.logo-footer {
    width: 200px;
}

/**
* Modal v1.0
*/
.modal {
    display         : none;
    position        : fixed;
    z-index         : 999999;
    padding-top     : 30px;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    overflow        : auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}


.modal-content {
    background-color: #fefefe;
    margin          : auto;
    padding         : 20px;
    border          : 1px solid #888;
    width           : 80%;
}

.modal-content p {
    margin: 10px auto;
}

.modal-content h2 {
    font-size  : 120%;
    font-weight: 500;
}

.modal-content ul {
    margin         : 15px auto;
    list-style-type: disc;
}

.modal-content ul li {
    margin         : 5px auto;
    list-style-type: disc;
    margin-left    : 30px;
}


.close {
    color      : #aaaaaa;
    float      : right;
    font-size  : 28px;
    font-weight: bold;
    padding    : 0 14px;
}

.close:hover,
.close:focus {
    color          : #000;
    text-decoration: none;
    cursor         : pointer;
}

.modal .cta-button {
    background-color: #b32d2e;
    color           : white;
    padding         : 10px 20px;
    text-decoration : none;
    font-weight     : bold;
    border-radius   : 5px;
    display         : inline-block;
    transition      : background-color 0.3s ease;
    margin-top      : 20px;
    max-width       : 100%;
}