@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Montserrat:ital,wght@0,400;0,700;1,300&display=swap');




.page{
    /* Обрезает страницу по краям */
    overflow: hidden;
}

*,
*::before,
*:after
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

hr {
    border: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin: 20px 0 ;
    background-color: #e5e5e5;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.conteiner {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}


/* intro */

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    min-height: 820px;
    background: url("../images/intro.jpg") center no-repeat;
    /* на весь єкран */
    background-size: cover;
    position: relative;
}
.header_inner {
    display: flex;
  
    justify-content: space-between;
    align-items: center;
}

.intro_title {
    font-size: 150px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
   
    line-height: 1;
}
.intro_title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #fff;
    margin: 60px auto;

}

.intro_inner{
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.intro_suptitle {

    color: #fff;
    font-size: 72px;
    font-family: 'Kaushan Script', cursive; 
    
    margin-bottom: 15px;

}

/* Header */

.header {
    width: 100%;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
}

.header.fixed {
    padding: 1px 0;
    background-color: #eb8b8d;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);

    transform: matrix3d(0,0,0);

}
.header.active {
    background-color: #eb8b8d;
}


.header_logo {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.nav {
    font-size: 14px;
    text-transform: uppercase;
}

.nav.active {
    display: block;
}

/* ----------nav-toggle ----------*/
.nav-toggle {
    display: none;
    width: 30px;
    position: absolute;
    font-size: 0;
    color: transparent;
    border: 0;
    background: none;
    cursor: pointer;
    top: 15px;
    right: 15px;
    z-index: 1;
    padding: 10px 0;
}
.nav-toggle:focus {
    outline: 0;
}

.nav-toggle-item{
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    background-color:#fff ;
    transition: background 0.2 linear;
   
}

.nav-toggle-item::before,
.nav-toggle-item::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #fff;
  
    left: 0;
    z-index: 1;
    position: absolute;
    transition: transform 0.2s line;
}

.nav-toggle.active .nav-toggle-item{
    background: none;
}
.nav-toggle.active .nav-toggle-item::before{
    transform-origin: left top;
    transform: rotate(45deg) translateX(-3px);
}
.nav-toggle.active .nav-toggle-item::after{
    transform-origin: left bottom;
    transform: rotate(-45deg) translateX(-3px);
}



.nav-toggle-item::before{
    top: -8px;
}

.nav-toggle-item::after{
    bottom: -8px;
}

.nav a {

    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    position: relative;

    color: #fff;
    text-decoration: none;

    transition: color 0.2s linear;
}

.nav a:after {
    content: "";
    display: none;
    width: 100%;
    height: 3px;
    background-color: #fce38a;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;


}

.nav a:hover {
    color: #fce38a;
    

}
.nav a:hover:after,
.nav a.activ::after
{
    display: block;
    opacity: 1;
} 
.nav a.activ {
    color: #fce38a;
}

/* Butoon */
.btn {
    display: inline-block;
    vertical-align: top;
    border: 3px solid #fff;
    color: #fff;
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition: background 0.2s linear, color 0.2s linear;
}

.btn:hover{
    background-color: #fff;
    color: #333;
}

/* Slider */



.slider {
    width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;

   
}

.slider_inner {
    display: flex;
    justify-content: space-between;
    
}

.slider_items b {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    
}
.slider_items {
    width: 23%;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    padding: 20px 0;
    border-top: 3px solid #fff;
    opacity: 0.7;
    position: relative;
 
}
.slider_items.active {
    opacity: 1;
}
.slider_items.active::before {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    background-color: #f38181;
    position: absolute;
   
    top: -3px;
    left: 0;
    z-index: 1;

}



/*----------------------- часть 2 __ блок статистика 3 картинки --------------------*/
/*----------------------- часть 2 __ блок статистика 3 картинки --------------------*/
/*----------------------- часть 2 __ блок статистика 3 картинки --------------------*/
/*----------------------- часть 2 __ блок статистика 3 картинки --------------------*/
/*----------------------- часть 2 __ блок статистика 3 картинки --------------------*/

/* overflow: hidden; обрезать секцию по краям */
.section {
    padding: 80px 0;
   

}


.section--devices{
    background: url("../images/mob/fonTum_02.jpg") center no-repeat;
    background-size: cover;
    padding-bottom: 0;
    margin-bottom: 40px;


}

.section_header {
    width: 100%;
    max-width: 950px;
    margin: 0 auto 50px;
    text-align: center;
   
    
}

.section_suptitle {
    font-family: 'Kaushan Script', cursive; 
    font-size: 24px;
    color: #333;
  

}

.section_title {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
}

.section_title::after {
    content: "";
    background-color: #f38181;
    display: block;
    width: 70px;
    height: 3px;
    margin: 30px auto ;
}

.section_text {
    font-size: 15px;
    color: #999;
}

/* ------------------------cart-About------------------------- */

.cart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 80px -15px 0;
}

.cart_item {
    width: 33.33333%;
    padding: 0 15px;
    
   
}

.cart_info{
    margin-top: 20px;
    text-align: center;
}
.cart_name {
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 5px;
}
.cart_prof {
    color: #999;
    font-size: 15px;
    font-style: italic;
    font-weight: 300;


}

.cart-inner { 
    position: relative;
    background-color: #95e1d3;
}
.cart_item:hover .cart_img {
    transform: translate3d(-10px,-10px,0);
}

.cart_item:hover .cart_img img{
    opacity: 0.1;
}
.cart_img {
    background: linear-gradient(to bottom,#f38181 ,#fce38a);
    transition:  transform 0.1s linear;
}
.cart_img img{
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.1s linear;
}
.cart_item:hover .cart_text{
    opacity: 1;
}
.cart_text{
    width: 100%;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translate3d(0, -50%, 0);
    opacity: 0;
    transition: opacity 0.1s linear;
}


/* ----------------------------------Числа ---------------------------------- */
/* ----------------------------------Числа ---------------------------------- */
/* ----------------------------------Числа ---------------------------------- */
/* ----------------------------------Числа ---------------------------------- */

.statistic {
    background-color: #95e1d3;
}

.stat {
    display: flex;
    flex-wrap: wrap;
}
.stat_item{
    flex: 1 1 0;
    padding: 70px 25px;
    border-left: 1px solid #b5eae0;
    text-align: center;
    color: #fff;
}

/* последни єлемент */
.stat_item:last-child{
    /* последни єлемент */
    border-right: 1px solid #b5eae0;
}

.stst_count {
    margin-bottom: 10px;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
}
.stat_text{
    font-size: 14px;
    text-transform: uppercase;
}


 /* ---------------Сервис --- 3часть------------------ */
 /* ---------------Сервис --- 3часть------------------ */
 /* ---------------Сервис --- 3часть------------------ */
 /* ---------------Сервис --- 3часть------------------ */
 

 .servises {
    display: flex;
    flex-wrap: wrap;
 }

 .servises_item {
    width: 33.33333%;
   
    padding: 0 35px 40px 85px;
    position: relative;
    margin-bottom: 40px;
   
 }
 .servises_item--border{
    border-bottom: 1px solid #e5e5e5;
 }
 

 .servises_icon{
    position: absolute;
    top: 0;
    left: 25px;
    z-index: 1;

 }

 .servises_title {
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 10px;
    

 }

 .servises_text {
    font-size: 15px;
    color: #999;
 }

 /*---------- devaices--------- */

 .devaices {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    
 }

 .devaices_item {
    display: block;
    max-width: 100%;
    height: auto;
 }

 .devaices_item--iphone {
    position: absolute;
    bottom: -80px;
    right: 0;
    z-index: 1;
   
 }


 /* ----------------Часть 4 ( Wedo )----------------*/
  /* ----------------Часть 4 ( Wedo )----------------*/
   /* ----------------Часть 4 ( Wedo )----------------*/
    /* ----------------Часть 4 ( Wedo )----------------*/
     /* ----------------Часть 4 ( Wedo )----------------*/


.wedo {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.wedo_item {
    width: 50%;
    padding: 0 15px;
}

.wedo_img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*--------------- accordion ----------*/


.accordion_item {
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
}

.accordion_item.active
.accordion_content {
    display: block;
    margin-top: 5px;
}

.accordion_item.active
.accordion_header {
    border-bottom-color: #e5e5e5;
}

.accordion_item.active
.accordion_header::after {
    transform: translateY(-50%) rotate(-45deg);
}


.accordion_header {
    border-bottom: 1px solid transparent;
    padding: 15px 20px 15px 65px;
    position: relative;
    cursor: pointer;
}

.accordion_header::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;

    position: absolute;
    top: 50%;
    right: 5%;
    z-index: 1;

    /* transform: translateY(-50%) выровнять rotate(-45deg) повернуть на 45 градусов; */

    transform: translateY(-50%) rotate(135deg);
}
    


.accordion_content {
    padding: 15px 20px;
    font-size: 15px;
    color: #999;
    font-style: italic;
    font-weight: 300;
    display: none;
}
.accordion_title {
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
   

    
}
.accordion_icon {
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 1;
    /*----- выровнять в ряд----  */
    transform: translateY(-50%);
}

/* -----------После акордиона ----------*/
/* -----------После акордиона ----------*/

.section--grey {
    background-color: #f8f8f8;
}



/*------------- reviews -----------------*/

.reviews {
  
    position: relative;
}

.reviews .slick-slider {
    padding: 0 110px;
    
}

.reviews_item {
    padding-left: 205px;
    min-height: 210px;

    position: relative;
}

.reviews_photo {
    display: block;
    width: 210px;
    height: 210px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 2px solid #95e1d3;
}

.reviews_text {
    font-size: 24px;
    font-style: italic;
    font-weight: 300;
    color: #999;
    margin-bottom: 15px;
}


.reviews_author {
    color: #333;
    font-size: 24px;
    font-family: 'Kaushan Script', cursive;
   
}

.reviews_author:before {
    content: "";
    background-color: #f38181;
    width: 60px;
    height: 3px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;

 
}

.reviews_btn,
.slick-arrow {
    display: block;
    font-size: 0;
    color: transparent;
    position: absolute;
    top: 50%;
    border: 0;
    background: none;
    cursor: pointer;
  
    transform: translateY(-50%);
    z-index: 1;
}

.slick-arrow:focus {
    outline: 0;
}


.slick-arrow::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;

    position: absolute;
 

    /* transform: translateY(-50%) выровнять rotate(-45deg) повернуть на 45 градусов; */

    

}
.reviews_btn--prev,
.slick-prev {
    left: 0;
    transform: rotate(-45deg);

}

.reviews_btn--next,
.slick-next {
    right: 0;
    transform: rotate(135deg);
}


/*---------------------- 5 часть  social----------------------*/
/*---------------------- 5 часть  social----------------------*/
/*---------------------- 5 часть  social----------------------*/
/*---------------------- 5 часть  social----------------------*/

.social {
    display: flex;
    justify-content: center;
}
.socia_item {
    width: 55px;
    height: 55px;
    padding: 12px 10px;
    background-color: #fce38a;
    border-right: 1px solid #f38181;
    text-decoration: none;
    color: #f38181;
    font-size: 30px;
    line-height: 1;
    transition: background 0.1s linear, color 0.1s linear;

}
/* -----------------Последние єлемент-------------- */
.socia_item:last-child {
    border-right: 0;
}

.socia_item:hover {
   background-color: #f38181;
    color: #fff;
}

.logos {
    display: flex;
    /* распредилить равномерно по всему блоку ---------------------------*/
    justify-content: space-between;
    align-items: center;
    margin: 0 -15px;
}
.logos_item{
    padding: 0 15px;
}

.logo_img{
    display: block;
    max-width: 100%;
   height: auto;
}

/* --------------Часть 6 some of our work ------------------------*/
/* --------------Часть 6 some of our work ------------------------*/
/* --------------Часть 6 some of our work ------------------------*/
/* --------------Часть 6 some of our work ------------------------*/

.works {
    display: flex;
}
.works_col {
    flex: 1 1 0;
}
.works_item {
    position: relative;
    background: linear-gradient(to bottom, #f38181, #fce38a);
}

.works_item:hover .works_img {
    opacity: 0.1;
}
.works_item:hover .works_info {
    opacity: 1;
}


.works_img {
    display: block;
    transition: opacity 0.2s linear;
    max-width: 100%;
    height: auto;
}

.works_info {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    opacity: 0;

    transform: translate3d(0, -50%, 0);
    transition: opacity 0.2s linear;
}

.works_title {
    margin-bottom: 5px;
    font-size: 14px;
    text-transform: uppercase;

}
.works_text {
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
}

/* -------------------Часть 7----------------------*/
/* -------------------Часть 7----------------------*/
/* -------------------Часть 7----------------------*/

.reviews_item{
    padding-left: 255px;
}
.reviews_photo {
    border: none;
   
}
.reviews_text{
padding-top: 10px;
}
/* -------------------Часть 8 client----------------------*/
/* -------------------Часть 8 client----------------------*/
/* -------------------Часть 8 client----------------------*/
/* -------------------Часть 8 client----------------------*/

.section--cliets{
    background: url(../images/clients/client_fon_02.png) no-repeat center;
    background-size: cover;
   
}
.clients {
    display: flex;
    /* Перескакивает на другую строчку */
    flex-wrap: wrap;
    margin-top: 70px;
}
.clients_item{
    width: 50%;
    padding: 0 45px 0 175px;
    position: relative;
    margin-bottom: 60px;
}
.clients_photo{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

.clients_name {
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 5px;
}

.cliets_prof{
    color: #333;
    font-size: 15px;
    font-style: italic;
    font-weight: 300;
}

.cliets_text {
    color: #999;
    font-size: 15px;
}

.cliets_text::before{
    content: "";
    display: block;
    background-color: #f38181;
    width: 60px;
    height: 3px;
   margin: 15px 0;
}

/* -------------------Часть 9 blog----------------------*/
/* -------------------Часть 9 blog----------------------*/
/* -------------------Часть 9 blog----------------------*/
/* -------------------Часть 9 blog----------------------*/

.blog {
    display: flex;
    /* Разделяет на ровные части */
    justify-content: space-between;
}

.blog_item {
    width: 31%;
}

.blog_header {
    position: relative;
}

.blog_photo {
    display: block;
    width: 100%;
    height: auto;
}

.blog_date {
    background-color: #95e1d3;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: -10px;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    padding: 10px 20px;
    text-align: center;
}
.blog_content{
    margin-bottom: 14px;
}

.blog_day {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-style: normal;
}

.blog_title {
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    padding-top: 14px;
    padding-bottom: 10px;
}

.blog_title a {
    color: inherit;
    text-decoration: none;
}

.blog_title a:hover {
    
    text-decoration: underline;
}

.blog_text {
    color: #999;
    font-size: 15px;

}

.blog_footer {
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    color: #999;
}

.blog-stat_item {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.blog-stat_item i {
    color: #95e1d3;
}

.section--map {
    background: url(../images/map_04.png) center no-repeat;
    background-size: cover;

}



/*-------------- map часть 10------------------------------*/
/*-------------- map часть 10------------------------------*/
/*-------------- map часть 10------------------------------*/
/*-------------- map часть 10------------------------------*/


.map {
    text-align: center;
}

.map_title{
    color: #f38282;
    font-size: 24px;
 font-weight: 700;
 text-transform: uppercase;
    
}

.map_title a {
    color: inherit;
    text-decoration: none;
}

.map_title a:hover {
    text-decoration: underline;
}

.map_title::after{
    content: "";
    width: 60px;
    height: 3px;
    display: block;
    background-color: #f38282;
    margin: 15px auto 0px;

}


/* --------------------------footer ----------------------------*/
/* --------------------------footer ----------------------------*/
/* --------------------------footer ----------------------------*/
/* --------------------------footer ----------------------------*/
.footer_inner{
    margin-bottom: 65px;
    display: flex;
    flex-wrap: wrap;
   
    justify-content: space-between;
}



.footer {
    padding-top: 65px;
    border-color: #f8f8f8;
}
.footer_social {
    margin-bottom: 25px;
}

.footer_col-first {
    width: 40%;
}

.footer_logo {
    font-size: 46px;
    color: #ccc;
    font-weight: 700;
    margin-bottom: 30px;
}

.footer_text {
    font-size: 15px;
    color: #999;
    margin-bottom: 30px;
}

.footer_social-header {
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
}

.footer_social-header b {
    font-size: 18px;
    
}

.footer_social-content {
    padding-top: 15px;
    font-size: 15px;
    color: #999;
    font-style: italic;
    font-weight: 300;
}

.footer_social-content a {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #95e1d3;
    font-size: 18px;
}

.subscribe {

    width: 100%;
    max-width: 380px;
    display: flex;
}
.subscribe_input{
    width: 60%;
    padding: 12px;
    background: #fff;
    border: 1px solid #e7e7e7;
    font-size: 15px;
    font-style: italic;
    color: #333;
    font-weight: 300;
    
    font-family: 'Montserrat', sans-serif;
    line-height: 1.1;
}

.subscribe_input::placeholder {
    color: #ccc;
}
.subscribe_input:focus {
    outline: 0;
    border-color: #95e1d3;
}

.subscribe_button{
    font-family: 'Montserrat', sans-serif;
    width: 40%;
    height: 45px;
    background-color: #95e1d3;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 30px;
    line-height: 1.1;
    transition: background 0.2s linear;

}

.subscribe_button:hover {
    background-color: #479687;
}

.subscribe_button:focus {
    outline: 0;
}

/*------------ 2 ----*/
.footer_col--second{
    width: 29%;
}

.footer_title {
    text-transform: uppercase;
    font-size: 14px;
    color: #333;
    margin: 30px 0;
}

.blogs_item {
    display: flex;
    margin-bottom: 37px;
    align-items: center;
}

.blogs_image{
    width: 120px;
    height: 80px;
   
}

.blogs_content{
    padding-left: 20px;
}
.blogs_title {
    color: #333;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    
}

.blogs_title p {
    line-height: 1.3;
}

.blogs_title:hover {
    text-decoration: underline;
}
.blogs_date{
    font-size: 13px;
    color: #999;
    font-style: italic;
    font-weight: 300;
}


/*------------ 3 ----*/
.footer_col--third{
    width: 22%;
}

.instagram{
    display: flex;
    flex-wrap: wrap;
}
.instagram_item{
    width: 33.33333%;
   
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

.instagram_item img{
    
    display: block;
    max-width: 100%;
    height: auto;
   
}

.copiright{
    border-top: 1px solid #e5e5e5;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #333;
}

.copiright span {
    color: #f38181;
}