@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');

html {
    box-sizing: border-box;
}

*, *:after, *:before {
    box-sizing:inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto Flex", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #344757;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.hero {
    background: #f6f8fe;
    padding: 0 0 30px;
    position: relative;
}

.hero .wrapper {
    position: relative;
    padding: 0;
}

.hero .wrapper::before {
    content: '';
    background-image: url(../images/hero.webp);
    background-position: bottom right;
    background-size: cover;
    height: 80%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 100px;
}

.hero__wrap {
    position: relative;
    z-index: 3;
    padding: 0 15px;
}

.hero__wrap::after,
.hero__wrap::before {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.hero__wrap::before {
    background: linear-gradient(to right, #f6f8fe 50%, rgba(255, 255, 255, 0) 100%);
    left: 0;
    width: 50%;
}

.hero__wrap::after {
    background: linear-gradient(to left, #f6f8fe 0%, rgba(255, 255, 255, 0) 70%);
    right: 0;
    width: 30%;
}

.hero__wrap2 {
    position: relative;
    z-index: 3;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.header__logo {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 5px;
}

.header__logo::before {
    content: '';
    mask-image: url(../images/ico_logo.svg);
    mask-repeat: no-repeat;
    width: 40px;
    height: 40px;
    background-color: #b18a53;
}

.header__logo > span {
    display: grid;
    text-transform: uppercase;
    font-size: 12px;
}

.header__logo > span strong {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 27px;
}

.header__logo>span strong span {
    color: #b7b7b7;
    font-weight: 500;
}

.header__cnt {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header__cnt__body {
    display: grid;
    justify-items: end;
    position: relative;
}

.header__cnt__body::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5) -20%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 120%);
    z-index: 1;
    border-radius: 5px;
}

.header__cnt__body a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.header__cnt__callback {
    font-size: 12px;
    text-decoration: underline;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.header__cnt > a {
    width: 32px;
    height: 32px;
    display: flex;
    position: relative;
    z-index: 2;
}

.header__cnt > a::after {
    content: '';
    mask-image: url(../images/ico_phone.svg);
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-color: #b18a53;
}

.hero__wrap2 > ul {
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 25px 0;
    list-style: none;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, .12) 0px 6px 16px;
}

.hero__wrap2 > ul li {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border-right: solid 1px #ddd;
}

.hero__wrap2 > ul > :last-child {
    border: none;
}

.hero__wrap2 > ul li::before {
    content: '';
    mask-repeat: no-repeat;
    width: 40px;
    height: 40px;
    background-color: #b18a53;
}

.hero__wrap2 > ul > :nth-child(1)::before {mask-image: url(../images/ico_safe.svg);}
.hero__wrap2 > ul > :nth-child(2)::before {mask-image: url(../images/ico_drill.svg);}
.hero__wrap2 > ul > :nth-child(3)::before {mask-image: url(../images/ico_aqua.svg);}
.hero__wrap2 > ul > :nth-child(4)::before {mask-image: url(../images/ico_clocl.svg);}
.hero__wrap2 > ul > :nth-child(5)::before {mask-image: url(../images/ico_wallet.svg);}

.hero__wrap2 > ul li h3 {
    margin: 5px 0 0 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero__wrap2 > ul li p {
    margin: 0;
    font-size: 14px;
}

.hero__body {
    margin: 50px 0;
}

.hero__body__subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b18a53;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.hero__body__subtitle::before {
    content: '';
    width: 35px;
    height: 1px;
    background-color: #b18a53;
}

.hero__body h1 {
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-size: 60px;
    line-height: 64px;
    max-width: 400px;
    font-weight: 700;
    margin: 25px 0;
}

.hero__body h1 span {
    color: #b18a53;
    white-space: nowrap;
}

.hero__body > p {
    max-width: 255px;
    margin: 35px 0;
}

.hero__body > p span {
    color: #b18a53;
    white-space: nowrap;
    font-weight: 600;
}

.hero__body__cta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero__body__cta__btn {
    background: linear-gradient(to right, #b18a53 0%, #cba76e 100%);
    padding: 12px 20px;
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.hero__body__cta__btn::after {
    content: '';
    mask-image: url(../images/ico_arrowbtn.svg);
    mask-repeat: no-repeat;
    background-color: #fff;
    width: 24px;
    height: 24px;
}

.hero__body__cta__video {
    display: grid;
    grid-template-columns: 45px auto;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 180px;
    padding: 10px 0;
    cursor: pointer;
}

.hero__body__cta__video::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    border-radius: 5px;
}

.hero__body__cta__video::before {
    content: '';
    mask-image: url(../images/ico_play.svg);
    mask-repeat: no-repeat;
    width: 45px;
    height: 45px;
    background-color: #b18a53;
    position: relative;
    z-index: 2;
}

.hero__body__cta__video span {
    text-transform: uppercase;
    width: 200px;
    font-size: 12px;
    line-height: 16px;
    position: relative;
    z-index: 2;
}

.diff2 {
    background: linear-gradient(to bottom, #f6f8fe 80%, rgba(255, 255, 255, 0) 100%);
    overflow: hidden;
    padding: 40px 0 75px;
    position: relative;
}

.diff2 .wrapper {
    position: relative;
    z-index: 2;
}

.diff2::before,
.diff2::after {
    content: '';
    background-image: url(../images/aqua1.webp);
    background-position: center;
    background-size: contain;
    width: 600px;
    height: 600px;
    position: absolute;
    z-index: 0;
    opacity: 0.4;
}

.diff2::before {
    top: 50px;
    left: 0;
}

.diff2::after {
    bottom: 50px;
    right: 0;
    transform: scaleY(-1);
}

.diff2__title {
    position: relative;
    text-align: center;
}

.diff2__title h2 {
    margin: 0 0 10px;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 40px;
}

.diff2__title p {
    margin: 0;
    color: #b18a53;
}

.diff2__table {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    margin: 50px 0 0 0;
    align-items: end;
}

.diff2__table__item {
    background-color: #fff;
    padding: 50px 0 20px;
    border-radius: 15px;
    position: relative;
}

.diff2__table > :nth-child(1),
.diff2__table > :nth-child(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: rgba(0,0,0,.12) 0px 6px 16px;
    z-index: 2;
}

.diff2__table__item__title {
    grid-column: span 2;
    padding: 0 20px;
    text-align: center;
}

.diff2__table__item__title__sub {
    background-color: #344757;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    padding: 10px 0;
    border-radius: 0 0 5px 5px;
    font-size: 14px;
}

.diff2__table > :nth-child(3) .diff2__table__item__title__sub {
    background-color: #b18a53;
}

.diff2__table__item__title h3 {
    margin: 0;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 27px;
}

.diff2__table__item__title p {
    margin: 0;
    font-size: 14px;
    color: #b18a53;
}

.diff2__table > :nth-child(3) > :nth-child(1) {order: 1;}
.diff2__table > :nth-child(3) > :nth-child(2) {order: 3;}
.diff2__table > :nth-child(3) > :nth-child(3) {order: 2;}

.diff2__table__item ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.diff2__table > :nth-child(1) ul,
.diff2__table > :nth-child(3) ul {
    position: relative;
    top: 1px;
}

.diff2__table__item ul li {
    height: 70px;
    border-bottom: solid 1px #ddd;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 0 10px;
}

.diff2__table__item ul > :last-child {
    border: none;
}

.diff2__table > :nth-child(2) ul li {
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    font-size: 11px;
    color: #b18a53;
    font-weight: 700;
}

.diff2__table > :nth-child(3) ul li {
    font-weight: 600;
}

.diff2__table__item__cover {}

.diff2__table__item__cover img {
    width: 100%;
}

.diff2__cta {
    box-shadow: rgba(0,0,0,.12) 0px 6px 16px;
    padding: 15px 0;
    border-radius: 15px;
    background-color: #fff;
    margin: 25px 0 0 0;
    display: grid;
    grid-template-columns: auto 250px 250px 250px;
    align-items: center;
}

.diff2__cta__item {
    border-right: solid 1px #ddd;
    padding: 10px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diff2__cta > :nth-child(1) span {
    display: grid;
    grid-template-columns: 64px auto;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 18px;
}

.diff2__cta > :nth-child(1) span i {
    background-color: #4c6d8a;
    width: 64px;
    height: 64px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diff2__cta > :nth-child(1) span i::before {
    content: '';
    mask-image: url(../images/ico_help.svg);
    mask-repeat: no-repeat;
    width: 70%;
    height: 70%;
    background-color: #fff;
}

.diff2__cta > :nth-child(2),
.diff2__cta > :nth-child(3) {
    font-size: 14px;
}

.diff2__cta > :nth-child(2) > span,
.diff2__cta > :nth-child(3) > span {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 10px;
}

.diff2__cta > :nth-child(2) > span i,
.diff2__cta > :nth-child(3) > span i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diff2__cta > :nth-child(2) > span i {
    background-color: #eff2f6;
}

.diff2__cta > :nth-child(3) > span i {
    background-color: #f7f4f0;
}

.diff2__cta > :nth-child(2) > span i::before,
.diff2__cta > :nth-child(3) > span i::before {
    content: '';
    mask-image: url(../images/ico_phone2.svg);
    mask-repeat: no-repeat;
    width: 50%;
    height: 50%;
}

.diff2__cta > :nth-child(2) > span i::before {
    background-color: #344757;
}

.diff2__cta > :nth-child(3) > span i::before {
    background-color: #b18a53;
}

.diff2__cta__item > span span {
    font-weight: 500;
}

.diff2__cta__item > span span strong {
    font-weight: 600;
    color: #b18a53;
}

.diff2__cta > :last-child {
    border: none;
}

.diff2__cta > :nth-child(4) span {
    display: grid;
    grid-template-columns: auto 40px;
    align-items: center;
}

.diff2__cta > :nth-child(4) span i {
    background: linear-gradient(to top, #b18a53 0%, #cba76e 100%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diff2__cta > :nth-child(4) span i::after {
    content: '';
    mask-image: url(../images/ico_phone2.svg);
    mask-repeat: no-repeat;
    width: 50%;
    height: 50%;
    background-color: #fff;
}

.diff2__cta > :nth-child(4) span ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5px;
}

.diff2__cta > :nth-child(4) span ul > :nth-child(1) a {
    color: #344757;
    text-decoration: none;
    font-weight: 600;
}

.diff2__cta > :nth-child(4) span ul > :nth-child(2) {
    font-size: 12px;
}

.diff2__cta > :nth-child(4) span ul > :nth-child(3) {
    color: #b18a53;
} 

.experience {}

.experience .wrapper {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 40px;
}

.experience__content {
    padding: 25px 0;
}

.experience__content__subtitle {
    color: #b18a53;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.experience__content h2 {
    margin: 20px 0;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 27px;
    line-height: 34px;
}

.experience__content p {
    margin: 0;
    line-height: 24px;
}

.experience__content__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 25px 0;
}

.experience__content__cta span {
    color: #b18a53;
    border-bottom: solid 1px #b18a53;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.experience__content__cta::after {
    content: '';
    mask-image: url(../images/ico_arrowbtn.svg);
    mask-repeat: no-repeat;
    width: 24px;
    height: 24px;
    background-color: #b18a53;
}

.experience__content__banner {
    background: linear-gradient(to right, #2f4356 0%, #4c6d8a 100%);
    border-radius: 5px;
    color: #fff;
    padding: 20px 0 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 310px;
}

.experience__content__banner > span {    
    font-family: "Playfair Display", serif;
    font-size: 44px;
    line-height: 44px;
}

.experience__content__banner__body {
    display: grid;
    gap: 5px;
}

.experience__content__banner__body > :nth-child(1) {
    text-transform: uppercase;
}

.experience__content__banner__body > :nth-child(2) {
    font-size: 14px;
}

.experience__cover {
    background-image: url(../images/experience.webp);
    background-size: cover;
    border-radius: 15px;
    position: relative;
}

.experience__cover__title {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 20px;
    display: grid;
    grid-template-columns: 64px auto;
    align-items: center;
    gap: 20px;
}

.experience__cover__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #2f4356 0%, #4c6d8a 100%);
    opacity: 0.85;
    z-index: 1;
    border-radius: 7px;
}

.experience__cover__title i,
.experience__cover__title__cnt {
    position: relative;
    z-index: 2;
}

.experience__cover__title i {
    width: 64px;
    height: 64px;
    border: solid 1px #b18a53;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.experience__cover__title i::after {
    content: '';
    mask-image: url(../images/ico_aqua.svg);
    mask-repeat: no-repeat;
    width: 60%;
    height: 60%;
    background-color: #fff;
}

.experience__cover__title__cnt h3 {
    margin: 0 0 7px;
    color: #fff;
    text-transform: uppercase;
    font-size: 21px;
    font-weight: 600;
    font-family: "Playfair Display", serif;
    line-height: 21px;
}

.experience__cover__title__cnt p {
    margin: 0;
    color: #fff;
}

.steps {
    margin: 75px 0;
}

.steps ul {
    margin: 25px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
}

.steps ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.steps ul li::after {
    content: '';
    mask-image: url(../images/ico_arrow.svg);
    mask-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-color: #b18a53;
    position: absolute;
    right: -8px;
    top: 50%;
}

.steps ul > :last-child::after {display: none;}

.steps ul li span {
    display: flex;
    align-items: end;
    gap: 10px;
    color: #d4d7db;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    line-height: 40px;
}

.steps ul li span::after {
    content: '';
    mask-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-color: #b18a53;
}

.steps ul > :nth-child(1) span::after {mask-image: url(../images/ico_req.svg);}
.steps ul > :nth-child(2) span::after {mask-image: url(../images/ico_calc.svg);}
.steps ul > :nth-child(3) span::after {mask-image: url(../images/ico_drill.svg);}
.steps ul > :nth-child(4) span::after {mask-image: url(../images/ico_plumb.svg);}
.steps ul > :nth-child(5) span::after {mask-image: url(../images/ico_safe.svg);}

.steps ul li h3 {
    margin: 20px 0 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
}

.steps ul li p {
    margin: 0;
    font-size: 14px;
}

.submit-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agree-attention {
    animation: agreeBlink 0.9s ease;
}

@keyframes agreeBlink {

    0% {
        opacity: 1;
    }

    15% {
        opacity: 0.2;
    }

    30% {
        opacity: 1;
    }

    45% {
        opacity: 0.2;
    }

    60% {
        opacity: 1;
    }

    75% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}
label[for="agree"] {}

.cta {
    position: relative;
    background-image: url(../images/cta.webp);
    background-position: center;
    background-size: cover;
    padding: 0;
}

.cta .wrapper {
    display: grid;
    grid-template-columns: auto 580px;
    gap: 20px;
    align-items: center;
}

.cta__content {
    position: relative;
    padding: 120px;
}

.cta__content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
}

.cta__content__wrap h2 {
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 21px;
}

.cta__content__wrap ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 20px;
}

.cta__content__wrap ul li {
    display: grid;
    grid-template-columns: 40px auto;
    gap: 15px;
    align-items: center;
}

.cta__content__wrap ul li i {
    width: 40px;
    height: 40px;
    border: solid 1px #b18a53;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.cta__content__wrap ul li i::after {
    content: '';
    mask-image: url(../images/ico_aqua.svg);
    mask-repeat: no-repeat;
    width: 60%;
    height: 60%;
    background-color: #b18a53;
}

.cta__content__wrap ul li span {}

.cta__content__wrap ul li span strong {
    font-weight: 600;
}

.cta__content__wrap ul li span p {
    margin: 0;
    font-size: 14px;
}

.cta__content__wrap {
    position: relative;
    z-index: 2;
}

.cta form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    background-color: #fff;
    padding: 50px 30px;
    border-radius: 10px;
}

.cta form > div {
    display: grid;
    gap: 10px;
}

.cta__col {
    display: grid;
    grid-template-columns: 120px auto;
    align-items: center;
}

.cta__col__title {
    font-size: 14px;
    font-weight: 600;
}

.cta__col__radio {
    display: flex;
    gap: 5px;
}

.cta form .cta__col input,
.cta form .cta__col textarea,
.cta form .cta__col select {
    border: solid 1px #d9e1ea;
    font-family: "Roboto Flex", sans-serif;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
}

.cta form label.agree {
    font-size: 12px;
}

.cta__col__radio label {
}

.cta__col__radio label input {}

.cta__col__radio label input + span {
    background-color: #d4d7db;
    color: #fff;
    padding: 10px;
    border-radius: 3px;
    font-size: 14px;
    color: #2f4356;
    cursor: pointer;
    display: block;
}

.cta__col__radio label input[type="radio"]:checked + span {
    background-color: #b18a53;
    color: #fff;
}

.cta form button {
    background: linear-gradient(to right, #b18a53 0%, #cba76e 100%);
    padding: 15px 0;
    color: #fff;
    border-radius: 5px;
    gap: 10px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: none;
    font-family: "Roboto Flex", sans-serif;
    cursor: pointer;
}

.pics {
    position: relative;
    margin: 50px 0 0 0;
}

.pics::before, .pics::after {
    content: "";
    background-image: url(../images/aqua1.webp);
    background-position: center;
    background-size: contain;
    width: 600px;
    height: 600px;
    position: absolute;
    z-index: 0;
    opacity: .4;
}

.pics::before {
    top: 50px;
    left: 0;
    transform: scaleY(-1);
}

.pics::after {
    bottom: 50px;
    right: 0;
}

.pics .wrapper {
    position: relative;
    z-index: 1;
}

.pics .wrapper > h2 {
    margin: 20px 0;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 27px;
    line-height: 34px;
}

.pics .wrapper > p {
    max-width: 400px;
    margin: 0;
}

.pics__list {
    margin: 25px 0 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.pics__list__item {
    height: 220px;
}

.pics__list__item a {
    display: none;
}

.pics__list__item > :first-child {
    display: block;
    width: 100%;
    height: 100%;
}

.pics__list__item > :first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.modal_consult {
    background: linear-gradient(to bottom, #214d41 10%, #1e443a 100%);
    background: #0461af;
    color: #fff;
    padding: 25px 50px 40px;
}

.modal_consult h2 {
    text-align: center;
    margin: 10px 0 10px;
    font-size: 21px;
}

.modal_consult__subtitle {
    text-align: center;
    margin: 0 0 15px;
    font-weight: 300;
}

.modal_consult form {
    display: grid;
    gap: 10px;
}

.modal_consult__col {
    display: grid;
    gap: 3px;
}

.modal_consult__col label {
    font-size: 14px;
    font-weight: 600;
}

.modal_consult__col input,
.modal_consult__col textarea {
    width: 100%;
    font-family: "Manrope", sans-serif;
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-size: 14px;
}

.modal_consult__col input {}

.modal_consult__col textarea {}

.modal_consult form .agree {
    font-size: 14px;
}

.modal_consult form button {
    background: linear-gradient(to right, rgb(198, 157, 101) 10%, rgb(217, 173, 114) 100%);
    border-radius: 5px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: "Manrope", sans-serif;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    cursor: pointer;
}

.modal_consult form button::after {
    content: '';
    mask-image: url(../images/ico_btn_arrow.svg);
    mask-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-color: #fff;
}

.blocker {
    z-index: 10;
}

.filetype {
    display: none;
}

.fixbtn {
    position: fixed;
    bottom: 100px;
    right: 50px;
    display: -ms-grid;
    display: grid;
    gap: 30px;
    z-index: 5;
}

.fixbtn a {
    width: 32px;
    height: 32px;
    position: relative;
}

.fixbtn a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fixbtn a::before,
.fixbtn a::after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden;
}

.fixbtn a:after {
    animation-delay: .5s;
}

.fixbtn > :nth-child(1)::before,
.fixbtn > :nth-child(1)::after {
    border: 1px solid #7e57c2;
}

.fixbtn > :nth-child(2)::before,
.fixbtn > :nth-child(2)::after {
    border: 1px solid #5eb5f7;
}

.fixbtn > :nth-child(3)::before,
.fixbtn > :nth-child(3)::after {
    border: 1px solid #5eb5f7;
}

@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes top-bottom {
    0%, 100% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(-3px);
    }
}

@media screen and (max-width: 1199px) {
    .hero__wrap::after {
        display: none;
    }
}

@media screen and (max-width: 1129px) {
    .cta form>div {
        grid-template-columns: 1fr;
    }
    .cta form {
        grid-template-columns: 1fr 1fr;
    }
    .cta form > :nth-child(1),
    .cta form > :nth-child(2),
    .cta form > :nth-child(3),
    .cta form > :nth-child(1),
    .cta form > :nth-child(1) {
        grid-column: span 2;
    }
    .cta .wrapper {
        grid-template-columns: auto 450px;
    }
    .diff2__table__item ul > :nth-child(4),
    .diff2__table__item ul > :nth-child(5),
    .diff2__table__item ul > :nth-child(8),
    .diff2__table__item ul > :nth-child(9),
    .diff2__table__item ul > :nth-child(11) {
        height: 75px;
    }
    .diff2__table>:nth-child(3) {
        grid-template-columns: auto 150px;
    }
    .diff2__table>:nth-child(1) {
        grid-template-columns: 150px auto;
    }
}

@media screen and (max-width: 999px) {
    .hero__body {
        margin: 35px 0;
    }
    .hero__body h1 {
        font-size: 50px;
        line-height: 50px;
        margin: 15px 0;
    }
    .diff2__title h2 {
        font-size: 30px;
    }
    .diff2__table>:nth-child(1),
    .diff2__table>:nth-child(3) {
        grid-template-columns: 1fr;
    }
    .diff2__table__item__title {
        grid-column: unset;
    }
    .diff2__table>:nth-child(3)>:nth-child(2) {
        order: 2;
    }
    .diff2__table__item__cover {
        height: 150px;
    }
    .diff2__table__item__cover img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .diff2__table__item__title h3 {
        font-size: 21px;
    }
    .diff2__table__item ul li {
        height: 45px;
    }
    .diff2__cta {
        grid-template-columns: auto auto 250px;
    }
    .diff2__cta > :first-child {
        grid-column: span 3;
        border: none;
    }
    .diff2__cta > :first-child span {
        justify-content: center;
        text-align: center;
    }
    .diff2__cta>:nth-child(1) span {
        grid-template-columns: 40px auto;
    }
    .diff2__cta>:nth-child(1) span i {
        width: 40px;
        height: 40px;
    }
    .experience__content h2 {
        margin: 15px 0;
        font-size: 21px;
        line-height: 26px;
    }
    .experience__cover__title {
        grid-template-columns: 40px auto;
        gap: 10px;
    }
    .experience__cover__title__cnt h3 {
        margin: 0 0 0px;
        font-size: 18px;
    }
    .experience__cover__title i {
        width: 40px;
        height: 40px;
    }
    .pics .wrapper>h2 {
        font-size: 21px;
        line-height: 21px;
    }
    .steps ul li h3 {
        font-size: 14px;
    }
    .cta {
        padding: 20px 0;
    }
    .cta__content {
        background-color: #fff;
        padding: 40px;
        border-radius: 15px;
    }
    .cta__content::after {
        display: none;
    }
}

@media screen and (max-width: 949px) {
    .diff2__table__item {
        padding: 55px 0 20px;
    }
    .diff2__table__item__title__sub {
        font-size: 12px;
        padding: 10px;
    }
    .diff2__table__item__title h3 {
        font-size: 18px;
    }
    .diff2__table {
        grid-template-columns: 3fr 2fr 3fr;
    }
}

@media screen and (max-width: 899px) {
    .header__logo>span strong {
        font-size: 16px;
        line-height: 22px;
    }
}

@media screen and (max-width: 799px) {
    .hero__body h1 {
        font-size: 35px;
        line-height: 35px;
        margin: 5px 0 0 0;
    }
    .hero__body>p {
        margin: 20px 0 30px;
    }
    .hero__wrap2>ul {
        grid-template-columns: repeat(6, 1fr);
        padding: 0;
    }
    .hero__wrap2>ul li {
        padding: 20px;
    }
    .hero__wrap2>ul > :nth-child(1),
    .hero__wrap2>ul > :nth-child(2),
    .hero__wrap2>ul > :nth-child(3) {
        grid-column: span 2;
    }
    .hero__wrap2>ul > :nth-child(4),
    .hero__wrap2>ul > :nth-child(5) {
        grid-column: span 3;
        border-top: solid 1px #ddd;
    }
    .hero__wrap2>ul > :nth-child(3) {
        border: none;
    }
    .hero .wrapper::before {
        height: 60%;
        border-radius: 0 0 15px 0;
    }
    .diff2 {
        padding: 20px 0 50px;
    }
    .diff2__table {
        margin: 20px 0 0 0;
    }
    .diff2__title h2 {
        font-size: 24px;
    }
    .experience .wrapper {
        grid-template-columns: auto 300px;
        gap: 20px;
    }
    .experience__cover__title {
        grid-template-columns: 1fr;
        width: calc(100% - 20px);
        bottom: 10px;
    }
    .experience__cover__title__cnt h3 {
        font-size: 16px;
    }
    .experience__cover__title__cnt p {
        font-size: 14px;
        margin: 5px 0 0 0;
    }
    .steps ul {
        grid-template-columns: repeat(6, 1fr);
        gap: 25px 0;
    }
    .steps ul > :nth-child(1),
    .steps ul > :nth-child(2),
    .steps ul > :nth-child(3) {
        grid-column: span 2;
    }
    .steps ul > :nth-child(4),
    .steps ul > :nth-child(5) {
        grid-column: span 3;
    }
    .steps ul > :nth-child(3)::after {
        display: none;
    }
    .cta .wrapper {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 699px) {
    .hero__body h1 {
        font-size: 25px;
        line-height: 25px;
        max-width: 275px;
    }
    .diff2__cta {
        grid-template-columns: 1fr 1fr;
        gap: 15px 0;
    }
    .diff2__cta > :first-child,
    .diff2__cta > :last-child {
        grid-column: span 2;
    }
    .diff2__cta > :last-child span {
        justify-content: center;
        gap: 10px;
        display: flex;
        flex-direction: row-reverse;
    }
    .pics__list {
        gap: 5px;
    }
    .pics__list__item {
        height: 155px;
    }
}

@media screen and (max-width: 649px) {
    .diff2__table {
        grid-template-columns: repeat(3, 1fr);
    }
    .diff2__table__item ul>:nth-child(4), 
    .diff2__table__item ul>:nth-child(5), 
    .diff2__table__item ul>:nth-child(8), 
    .diff2__table__item ul>:nth-child(9), 
    .diff2__table__item ul>:nth-child(10), 
    .diff2__table__item ul>:nth-child(11) {
        height: 80px;
    }
    .diff2__table__item {
        padding: 70px 0 20px;
    }
    .diff2__table__item__cover {
        height: 100px;
    }
    .diff2__table__item__title h3 {
        font-size: 16px;
    }
    .experience__content__banner>span {
        font-size: 35px;
        line-height: 35px;
    }
    .experience__content__banner__body {
        gap: 2px;
        font-size: 12px;
    }
    .experience__content__banner {
        padding: 15px 0 15px 15px;
        gap: 15px;
    }
    .experience__content h2 {
        font-size: 18px;
        line-height: 22px;
    }
    .diff2__table {
        grid-template-columns: auto 150px auto;
    }
    .diff2__table>:nth-child(2) ul li {
        font-size: 10px;
    }
    .diff2__title h2 {
        font-size: 21px;
    }
    .hero {
        padding: 0 0 20px;
    }
    .hero__wrap2>ul li h3 {
        font-size: 12px;
    }
    .hero__wrap2>ul li {
        gap: 5px;
        padding: 15px;
    }
    .hero__wrap2>ul li::before {
        width: 32px;
        height: 32px;
        margin: 0 0 5px;
    }
    .hero__wrap::before {
        background: linear-gradient(to right, #f6f8fe 75%, rgba(255, 255, 255, 0) 100%);
    }
    .cta__content__wrap h2 {
        font-size: 18px;
    }
    .experience__content {
        padding: 0;
    }
    .experience .wrapper {
        grid-template-columns: 1fr;
    }
    .experience__cover {
        height: 250px;
    }
    .steps {
        margin: 30px 0;
    }
    .pics::before, .pics::after {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .hero__body h1 {
        font-size: 21px;
        line-height: 21px;
    }
    .diff2__table__item__title__sub {
        height: 65px;
        display: flex;
        align-items: center;
    }
    .diff2__table__item__title p {
        height: 60px;
        display: flex;
        align-items: center;
    }
    .fixbtn {
        bottom: 100px;
    }
}

@media screen and (max-width: 559px) {
    .hero__body__cta__btn {
        font-size: 10px;
        padding: 10px 15px;
        gap: 5px;
    }
    .hero__body__cta__btn::after {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width: 549px) {
    .diff2__table__item ul li {
        font-size: 12px;
        height: 40px;
    }    
    .hero__wrap2>ul li h3 {
        font-size: 11px;
    }
    .diff2__title h2 {
        font-size: 18px;
    }
    .diff2__cta>:nth-child(1) span {
        grid-template-columns: 1fr;
        justify-items: center;
        font-size: 16px;
    }
    .diff2__cta>:nth-child(2)>span, .diff2__cta>:nth-child(3)>span {
        grid-template-columns: 32px auto;
    }
    .diff2__cta>:nth-child(2)>span i, .diff2__cta>:nth-child(3)>span i {
        width: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 529px) {
    .diff2 .wrapper {
        padding: 0 5px;
    }
    .diff2__table__item ul li {
        padding: 0 5px;
    }
    .diff2__table>:nth-child(2) ul li {
        padding: 0 10px;
    }
    .diff2__table__item__title h3 {
        font-size: 14px;
    }
}

@media screen and (max-width: 499px) {
    .hero__wrap2>ul {
        grid-template-columns: 1fr 1fr;
    }
    .hero__wrap2>ul>:nth-child(1),
    .hero__wrap2>ul>:nth-child(2),
    .hero__wrap2>ul>:nth-child(3),
    .hero__wrap2>ul>:nth-child(4) {
        grid-column: unset;
        border-bottom: solid 1px #ddd;
        border-top: unset;
    }
    .hero__wrap2>ul>:nth-child(3),
    .hero__wrap2>ul>:nth-child(4) {
        border: none;
    }
    .hero__wrap2>ul>:nth-child(5) {
        grid-column: span 2;
    }
    .hero__wrap2>ul>:nth-child(3) {
        border-right: solid 1px #ddd;
    }    
    .diff2__table__item__title h3 {
        font-size: 14px;
        margin: 0 0 5px;
        text-transform: none;
        font-family: "Roboto Flex", sans-serif
    }
    .diff2__table__item__title p {
        font-size: 12px;
        padding: 0 3px;
    }
    .steps ul {
        grid-template-columns: 1fr 1fr;
    }
    .steps ul>:nth-child(1),
    .steps ul>:nth-child(2),
    .steps ul>:nth-child(3),
    .steps ul>:nth-child(4) {
        grid-column: unset;
    }
    .steps ul>:nth-child(5) {
        grid-column: span 2;
    }
    .steps ul>:nth-child(3)::after {
        display: inline;
    }
    .steps ul>:nth-child(2)::after,
    .steps ul>:nth-child(4)::after {
        display: none;
    }
    .header__cnt>a {
        display: none;
    }
    .header__cnt__body {
        padding-left: 5px;
    }
    .header__cnt__body a {
        font-size: 14px;
    }
    .header__cnt__body::after {
        left: unset;
        right: 0;
        width: 100%;
    }
    .hero__body .hero__body__subtitle {
        font-size: 10px;
    }
    .hero__body h1 {
        font-size: 18px;
        line-height: 18px;
        max-width: 200px;
    }
    .hero__body>p {
        font-size: 14px;
        margin: 20px 0;
    }
    .header__logo {
        grid-template-columns: 32px auto;
    }
    .header__logo::before {
        width: 32px;
        height: 32px;
    }
    .header__logo>span strong {
        font-size: 14px;
        line-height: 20px;
    }
    .header__logo>span {
        font-size: 10px;
    }
    .hero__body__cta {
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }
    .hero__body__cta__video {
        grid-template-columns: 32px auto;
        padding: 0;
    }
    .hero__body__cta__video::before {
        width: 32px;
        height: 32px;
    }
    .hero__body__cta__video::after {
        display: none;
    }
    .hero .wrapper::before {
        height: 50%;
        border-radius: 0;
    }
    .hero__wrap::before {
        background: linear-gradient(to right, #f6f8fe 40%, rgba(255, 255, 255, 0) 80%);
        width: 100%;
    }
    .hero__body__subtitle {
        flex-direction: column-reverse;
        align-items: start;
        gap: 5px;
    }
    .cta__col__radio {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }
    .cta__col__radio > :last-child {
        grid-column: span 2;
    }
    .diff2__table__item ul>:nth-child(1),
    .diff2__table__item ul>:nth-child(4),
    .diff2__table__item ul>:nth-child(5),
    .diff2__table__item ul>:nth-child(8),
    .diff2__table__item ul>:nth-child(9),
    .diff2__table__item ul>:nth-child(10),
    .diff2__table__item ul>:nth-child(11) {
        height: 90px;
    }
}

@media screen and (max-width: 469px) {
    .diff2__table__item {
        padding: 85px 0 20px;
    }
}

@media screen and (max-width: 449px) {
    .hero__body>p {
        max-width: 185px;
    }
    .diff2__cta>:nth-child(2) span, .diff2__cta>:nth-child(3) span {
        grid-template-columns: 1fr;
    }
    .diff2__table>:nth-child(2) ul li {
        font-size: 9px;
        padding: 0 5px;
    }
    .diff2__table {
        grid-template-columns: auto 125px auto;
    }
    .hero__body {
        margin: 10px 0 20px;
    }
    .hero__wrap2>ul li p {
        font-size: 12px;
    }
    .pics__list__item {
        height: 115px;
    }
    .steps ul {
        gap: 15px 0;
    }
    .steps ul li h3 {
        font-size: 12px;
    }
    .steps ul li span {
        font-size: 30px;
        line-height: 30px;
    }
    .steps ul li span::after {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 419px) {
    .diff2__table__item__title {
        padding: 0;
    }
    .diff2__table__item__title h3 {
        font-size: 12px;
    }
}

@media screen and (max-width: 399px) {
    .cta form {
        display: flex;
        flex-direction: column;
    }
    .cta__content {
        padding: 25px;
    }
    .cta__content__wrap h2 {
        font-size: 16px;
    }
    .pics .wrapper>h2 {
        font-size: 16px;
        line-height: 20px;
        margin: 10px 0;
    }
    .pics .wrapper>p {
        font-size: 14px;
    }
    .diff2__table>:nth-child(3) ul li {
        font-weight: unset;
    }
    .fixbtn {
        bottom: 30px;
        right: 30px;
    }
}

@media screen and (max-width: 379px) {
    .diff2__table>:nth-child(2) ul li {
        text-transform: none;
    }
    .diff2__table {
        grid-template-columns: auto 120px auto;
    }
    .diff2__table__item ul li {
        font-size: 10px;
    }
    .diff2__table__item__title__sub {
        font-size: 10px;
    }
}

@media screen and (max-width: 369px) {
    .header__logo {
        grid-template-columns: 24px auto;
    }
    .header__logo::before {
        width: 24px;
        height: 24px;
    }
    .header__logo>span strong {
        font-size: 13px;
    }
    .header__logo>span {
        font-size: 8px;
    }
    .header__cnt__body a {
        font-size: 12px;
    }
    .header__cnt__body {
        gap: 2px;
    }
}

@media screen and (max-width: 768px) {
}