@import url(../fonts/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css);

/*--------------/null/--------------*/
*{
    padding: 0;
    margin: 0;
    border: 0;
    }
    *,*:before,*:after{
        -moz-box-sizing: border-box;
        -webkit-box-sizing: before-box;
        box-sizing: border-box;
    }
    :focus,:active {outline: none;}
    a:focus,a:active{outline: none;}
    nav,footer,header,aside {display: block;}
    
    html,body {
        height: 100%;
        width: 100%;
        font-size: 100%;
        line-height: 1;
        font-size: 14px;
        -ms-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
    }
    input,button,textarea {font-family: inherit;}
    
    input::-ms-clear{display: none}
    button{cursor: pointer;}
    button::-moz-focus-inrer {padding: 0;border: 0;}
    a,a:visited {text-decoration: none;}
    a:hover {text-decoration: none;}
    ul,li {list-style: none;}
    img {vertical-align: top;}
    
    h1,h2,h3,h4,h5,h6 {font-size: inherit;font-weight: 400;}
/*--------------/null/--------------*/    
/*--------------//--------------*/
body {
    height: 100%;
    line-height: 1;
    font-family: 'Open Sans';
    color: #212121;
}
.canvas {
    min-height: 100%;
    overflow: hidden;
    
}
.wrapper {
    max-width: 1440px;
    margin: 0px auto;
}
/*-------------------------------------------//-------------------------------------------------------------*/
/*-------------------------------------------//-------------------------------------------------------------*/
.header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 101;
    background-color: #fff;
}
.header__text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
}
.header__logo {
    margin: 0px 10px 0px 10px;
    font-size: 25px;
}
.header__menu-top {
    padding: 0px 0px 0px 0px;
}
.header__menu-top ul {
    display: flex;
    flex-wrap: wrap;
}
.header__menu-top ul li {
    font-size: 20px;
}
.header__menu-top ul li:hover{
    text-decoration: underline;
}
.menu-top {
}
.menu-top__link a{
    color: #000;
}
.menu-top__link:not(:last-child){
    padding: 0px 20px 0px 0px;
}
.menu-topMenu {
    display: none;
}
.header__search {
    margin: 0px 0px 0px 10px;
    display: flex;
    position: relative;
    font-weight: 400;
    height: 25px;
}
.fa {
    font-size: 20px;
}
.header__search button {
    background-color: rgba(255, 255, 255, 0);
}
.header__search input {
    padding: 0px 0px 0px 10px;
    height: 24px;
    border: 1px solid #000;
    width: 140px;
}
.header__search input:focus {
    box-shadow: 2px 2px 10px #000;
}
.fa-search {
    font-size: 24px;
    padding: 0px 10px 0px 0px;
    background-color: rgba(255, 255, 255, 0);
}

@media (max-width:960px) {
    .menu-top__link:not(:last-child){
        padding: 0px 10px 0px 0px;
    }
    .header__search input {
        width: 100px;
    }
}
@media (max-width:870px) {
    .header__menu-top ul li {
        flex: 0 0 33.333%;
    }
    .menu-top__link{
        margin: 10px 0px 0px 0px;
    }
}
@media (max-width:768px){
    .header__menu-top {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0px 0px 0px 0px;
        min-width: 150px;
    }
    .header__menu-top i {
        padding: 0px 10px 0px 0px;
    }
    .menu-topMenu {
        display: flex;
        justify-content: center;
        font-size: 20px;
        width: 100%;
        color: #212121;
        background-color: rgba(255, 255, 255, 0);
    }
    .menu_topButtun {
        font-size: 20px;
        color: #212121;
        background-color: rgba(255, 255, 255, 0);
    }
    .menu_topButtun:hover{
        text-decoration: underline;
    }
    .menu-top__links,.menu-top__link {
        display: none;
    }
    .menu-top__links.active {
        position: absolute;
        display: block;
        flex-direction: column;
        width: 100%;
        height: 300px;
        border: 1px solid black;
        overflow: auto;
        background-color: rgba(255, 255, 255, 0.816);
    }
    
    .menu-top__links.active>li {
        display: block;
        padding: 10px;
        flex: 0 0 100%;
    }
}
@media (max-width:420px){
    .header__logo {
        margin: 0px 0px 0px 0px;
        font-size: 25px;
    }
    .header__search {
        margin: 0px 0px 0px 0px;
    }
}
/*--------------//--------------*/
.page-contant {
}
.page-contant__top {
}
.top-block {
}
.top-block__body {
    padding: 80px 0px 0px 0px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.top-block__title {
    padding: 302px 0px 0px 0px;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #0a0505;
    text-align: center;
}
@media (max-width:820px) {
    .top-block__title {
        font-size: 45px;
        padding: 50px 0px 0px 0px;
    }
}
.top-block__text {
    padding: 26px 0px 0px 0px ;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #0a0505;
    text-align: center;
}
@media (max-width:820px) {
    .top-block__text {
        padding: 9px 0px 0px 0px ;
    }
}

.top-block__buttons {
    padding: 108px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
}
@media (max-width:820px) {
    .top-block__buttons {
        padding: 5px 0px 0px 0px;
    }
}
.top-block__buttom {
    font-family: Roboto;
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #989797;
}
.top-block__buttom1 {
    padding: 25px 35px 25px 36px;
    border: 3px solid #141313;
    margin: 0px 25px 0px 0px;
}
.top-block__buttom2 {
    padding: 25px 46px;
    border: 3px solid #00897b;
    background-color: #00897b;
}
.top-block__buttom1:hover{
    box-shadow: 2px 2px 10px #212121;
    background-color: rgb(238, 135, 10);
}
.top-block__buttom2:hover{
    box-shadow: 2px 2px 10px #212121;
    background-color: rgb(238, 135, 10);
}
.image {
    position: relative;
    display: flex;
    justify-content: center;
}
.image img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    object-fit: cover;  
}
.top-block__image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
@media (max-width:520px){
    .top-block__buttons {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .top-block__buttom {
        margin: 20px 0px;
        flex: 1 1 100%;
    }
}
/*------------//-------------*/
.aboutUs-block__container {
    display: flex;
    flex-direction: column;
}
.aboutUs-block__top {
    margin: 340px 0px 0px 0px;
    background-color: #ffffff;
    z-index: 100;
}
.ovarAll-top {
    text-align: center;
    font-family: 'Open Sans';
    line-height: 22px;
    letter-spacing: 0.05em;
    color: #212121;
}
.overAll-top__title {
    font-size: 30px;
    font-weight: 700;
}
.title-top {
}
.overAll-top__contant {
    margin: 36px 19% 0px;
    font-size: 15px;
    font-weight: 400;
}
.aboutUs__contant {
    margin: 124px 0px 0px 0px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #ffffff;
    z-index: 100;
}
.columns a {
    flex: 0 0 25%;
}
.contant__column {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    
}
.contant__column img {
    width: 62px;
    height: 62px;
}
.column__title {
    padding: 39px 0px 0px 0px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
.column__text {
    padding: 26px 0px 125px 0px;
    font-family: 'Open Sans';
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #212121;
}
@media (max-width:960px) {
    .columns a {
        flex: 0 0 50%;
    }
    .columns a:last-child {
        flex: 0 0 100%;
    }
    .aboutUs__contant {
        margin: 0px 0px 0px 0px;
        padding: 20px 0px 0px 0px;
    }
    .column__text {
        padding: 26px 0px 40px 0px;
    }
}
@media (max-width:768px) {
    .columns a {
        flex: 0 0 100%;
    }
}
/*-----------------------------------------------------/Our Services/--------------------------------------------------*/
.Services__container{
    background-color: #e4fdf9;
    padding: 60px 0px 0px;
    color: #212121;
}
.Services__blocks {
    margin: 100px 100px 0px 100px;
}
.Service__block {
    display: flex;
    flex-wrap: wrap;
}
.Service-block__container {
    padding: 15px;
    flex: 0 0 33.333%;
}
.Service-block__contant {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgb(150, 50, 50);
}
.Service-block__contant {
    align-self: center;
    background: url(../img/OurServices/2.png)52% 50px/62px 56px no-repeat ;
    background-color: rgb(255, 255, 255);
}
.Service-block__title {
    padding: 150px 40% 0px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.Service-bloc__text {
    padding: 26px 15% 50px;
    font-family: 'Open Sans';
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.Service__button {
    border: 2px solid #000;
    padding: 20px 15px;
    margin: auto auto 50px auto;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}

.Service-block__contant a:hover {
    color: #fff;
    background-color: #00897b;
}
.Service-block__contant a:hover~.Service-block__contant:hover{
    color: #fff;
    background-color: #00897b;
    background: url(../img/OurServices/1.png)55% 0/cover no-repeat ;
    background-color: #00897b;
}
.Service__button:hover {
    border: 2px solid #fff;
}
@media (max-width:1040px){
    .Service-block__container {
        flex: 0 0 50%;
        padding: 10px;
    }
    .Services__blocks {
        margin: 100px 50px 0px 50px;
    }
    .Service-block__title {
        padding: 120px 40% 0px;
    }
    .Service-block__text {
        padding: 20px 12% 30px;
    }
    .Service__button {
        padding: 10px;
        margin: auto auto 30px auto;
    }
}
@media (max-width:768px){
    .Service-block__container {
        flex: 0 0 100%;
    }
}
/*----------------------------------------------//---------------------------------------------*/
/*----------------------------------------------/Works/---------------------------------------------*/
.page-contant__Works {
}
.Works-block {
}
.Work__container {
}
.Work-block__top {
    padding: 30px 0px 0px 0px;
}
.work-block__contant {
}
.work-block__buttoms {
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
}
.work__buttom{
    margin: 0px 0px 0px 25px ;
    padding: 20px 15px;
    width: 300px;
    border: 2px solid #00897b;
}
.work__buttom1:hover{
    background-color: rgb(238, 135, 10);
}
.work__buttom2:hover {
    background-color: rgb(238, 135, 10);
}
.work__buttom3:hover {
    background-color: rgb(238, 135, 10);
}
.work-block__examples {
}
.work__web {
    display: none;
}
.work__web._active {
    display:flex ;
    justify-content: center;
}
.work__ui {
    display: none;
}
.work__ui._active {
    display:flex ;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.work__moc {
    display: none;
}
.work__moc._active {
    display:flex ;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
/*----------------------------------------------//---------------------------------------------*/
/*----------------------------------------------/pricing plan/---------------------------------------------*/
.page-coctant__plan {
}
.plan {
}
.plan__container {
    background-color: rgba(6,12,11,0.2);
}
.plan__top {
    padding: 33px 0px 0px 0px;
}

.title-top {
}
.plan__offers {
}
.offer {
}
.offer__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.offer__block {
    padding: 5%;
    display: flex;
    flex: 1 1 33.333%;
}
.offer__block-cotant {
    background: url('../img/Plan/rectangle_14_5086.jpg')0 0/100% 209px no-repeat;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.contant__offer__title {
    padding: 39px 0px 0px 0px;
    font-family: 'Open Sans';
    font-size: 25px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #ffffff;
}
.offer__price {
    margin: 39px 0px 67px 0px ;
    font-family: 'Open Sans';
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #ffffff;
}
.offer__price span {
    font-family: 'Open Sans';
    font-size: 50px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #ffffff;
}
.offer__service {
    padding: 39px 10% 0px;
    flex: 1 1 auto;
}
@media (max-width:1040px) {
    .offer__service {
        padding: 19px 8% 0px;
    }
}
.offer__line {
    margin: 5px 0px 0px 0px;
    width: 178px;
    border: 1px solid #000;
}
.offer__container button {
    margin: 66px 0px 10px 0px;
    padding: 22px 33px;
    border: 2px solid #000;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
@media (max-width:1040px){
    .plan__container button {
        margin: 33px 0px 5px 0px;
    }
}
.offer__container button:hover {
    color: #fff;
    background-color: #00897b;
}
/*----------------------------------------------//---------------------------------------------*/
/*----------------------------------------------/blog/---------------------------------------------*/
.blog__container {
    background-color: #e4fdf9;
    padding: 100px 5% 0px;
}
.blog__top {
}
.blog__contant {
    padding: 100px 0px 0px 0px;
    display: flex;
    flex-direction: column;
}
.blog__row {
    display: flex;
    flex-wrap: wrap;
}
.blog__img {
    flex: 0 0 50%;
}
.blog__text {
    flex: 1 1 50%;
}
.blog__text div {
    margin: 30px 30px 0px 0px;
}
.blog__title a {
    font-family: 'Open Sans';
    font-size: 25px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
.blog__title a:hover {
    color: #00897b;
}
.blog__date {
    font-family: 'Open Sans';
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
.fa {
    padding: 0px 4px 0px 0px;
}
.fa-calendar {
}
.fa-file-o {
    margin: 0px 0px 0px 40px;
}
.blog__text-text {
    font-family: 'Open Sans';
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #212121;
}
.blog__container button{
    margin: 100px 0 100px 45%;
    padding: 20px 40px;
    font-family: Roboto;
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    background-color: #00897b;
}
.blog__container button:hover {
    background-color: #da872e;
}
/*----------------------------------------------//---------------------------------------------*/
/*----------------------------------------------/footer/---------------------------------------------*/
.page-coctant__contactUs {
    background-color: #212121;
    padding: 100px 0px 10px 0px;
}
.contactUs-block {
}
.contactUs__container h2 , .contactUs__container div {
    color: #ffffff;
}
.contactUs__top {
}
.contactUs__contants {
}
.contactUs__contact {
    display: flex;
    padding: 100px 0px 0px 0px;
}
.contactUs__links {
    flex: 0 0 33.333%
}
.contantUs__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contantUs__link1 {
}
.contantUs__img {
    width: 105px;
    height: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3949ab;
    border-radius: 50%;
}

.contactUs__text {
    padding: 31px 0px 0px 0px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff;
}
.contantUs__link2 {
}
.contantUs__link3 {
}
.contactUs__form {
    display: flex;
    flex-direction: column;
    padding: 80px 15% 0px;
}
.contactUs__textPlace {
    display: flex;
    flex-wrap: wrap;
}
.contactUs__textPlace div {
    flex: 0 0 50%;
}
.contactUs__textPlace_div:nth-child(1) {
    padding: 0px 16px 0px 0px;
}
.contactUs__textPlace_div:nth-child(2) {
    padding: 0px 0px 0px 16px;
}
@media (max-width:768px){
    .contactUs__textPlace div {
        flex: 0 0 100%;
    }
    .contactUs__textPlace_div:nth-child(1) {
        padding: 0px 0px 0px 0px;
    }
    .contactUs__textPlace_div:nth-child(2) {
        padding: 0px 0px 0px 0px;
    }
    .contactUs__contact {
        flex-wrap: wrap;
    }
    .contactUs__links {
        flex: 1 1 100%;
    }
    .offer__block {
        flex: 1 1 100%;
    }
}
.contactUs__textPlace-div {
    margin: 0px 0px 31px 0px;
    padding: 0px 0px 0px 10px;
    background-color: #ffffff;
    border-radius: 10px;
}
.inputName {
    width: 100%;
    height: 84px;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
.inputEmail {
    width: 100%;
    height: 84px;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}

.inputMassage {
    width: 100%;
    height: 323px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #212121;
}
.contactUs__form button {
    margin: 31px 0px 0px 0px;
    align-self: end;
    width: 220px;
    height: 70px;
    background-color: #ffffff;
    border-radius: 10px;
    font-family: Roboto;
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #212121;
}
.buttom__links {
    background-color: #ffffff;
    display: flex;
    margin: 20px 0px 0px 0px;
}
.buttom__link {
    height: 40px;
    display: flex;
}
.fa_color{
    color: #000;
    font-size: 30px;
}
.fa {
}
.fa-facebook-square {
    font-size: 25px;
}
.fa-whatsapp {
    font-size: 25px;
}
.fa-telegram {
    font-size: 25px;
}
.fa-twitter-square {
    font-size: 25px;
}
/*----------------------------------------------//---------------------------------------------*/
/*----------------------------------------------//---------------------------------------------*/