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


.introduction{
 background-image: url(../images/back.png);
 background-position: center;
 background-repeat: no-repeat;
 background-size:cover;
 height: 560px;
 margin-top:70px;
}


.applicatin-btn{
    display: inline-block;
    padding: 10px;
    border-radius: 50px;
    text-decoration: none;
    background-color: #dedede;
    color: #000000;
    font-size: 14px;

}
.applicatin-btn.gray{
    background-color: #383838;
    color: #fff;
}

.applicatin-btn.brown{
    background-color:#b79372;
    color: #fff;
}

.title-category-application{
 background-image: url(../images/back-category3.png);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 height: 170px;
}
.title-category-application h2{
    color: #fff;
    text-align:center;
   
}
.category-item img{
    width: 100%;
}



@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:920px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm{
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1160px !important
    }
}

.service-introduction .service-introduction-item .discription p{
    text-align: justify;
    font-size: 16px;
}
.service-introduction .service-introduction-item .discription h2{
    font-size:23px;
    font-weight: 600;
    padding: 15px 10px;
}
.service-introduction .service-introduction-item .discription h2 span{
    font-size: 14px;
    color: #828181;
}
.right-introducation{
    text-align: justify;
    font-size: 16px;
}
.right-introducation h1{
    color: #b79372;
    font-size: 27px;
    font-weight: bold;
}
.right-introducation h1 span{
    color: #11100f;
    font-size: 27px;
    font-weight: bold;
}

.purpose-item{
    background-image: url(../images/backpurpose.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.purpose-item-left h4 span:nth-of-type(1){
    font-size: 14px;
    font-weight: 600;
    list-style: 1.2;
}
.purpose-item-left h4 span:nth-of-type(2) {
    font-size: 14px;
    font-weight: 300;
}
.purpose-item-right{
    display: flex;
    justify-content: center;
}
.purpose-item-left{
    display: flex;
    justify-content:right;
}
.purpose-item-right img{
    width: 100%;
}

.section-title{
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.section-title.white{
 color: #fff ;
}

@media (max-width:768px) {
    .service-introduction .service-introduction-item .discription p{
        text-align: justify;
        font-size: 14px;
    }
    .introduction{
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
        height: auto;
       }
       .purpose-item-right img{
        width: 80% !important;
    }
    .section-title{
        font-size: 18px !important;
    }
    .purpose-item-left{
        display: flex;
        justify-content:center !important;
    }
    .right-introducation p{
        text-align: justify;
        font-size: 14px;
    }
    .purpose-item-left h4 span:nth-of-type(1){
        font-size: 14px;
    }
    .purpose-item-left h4 span:nth-of-type(2) {
        font-size: 13px;
    }
}





.app-portfolio {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
 .app-portfolio .demo{
    width :100%;
  }
   .app-portfolio .image-port {
    width: 100%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    border: 2px solid #b79372 ;
  }

  .app-portfolio .image-port img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 5s linear;
  }
   .app-portfolio .image-port:hover {
    -webkit-box-shadow: 0px 0px 8px 1px rgba(139, 102, 9, 0.86);
    -moz-box-shadow: 0px 0px 8px 1px white;
    box-shadow: 0px 0px 8px 1px rgba(139, 102, 9, 0.86);
    border: none;
  }
   .app-portfolio .image-port:hover img {
    transform : translateY(calc(-100% + 250px));
  }
  .title-portfolio{
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #785d43;
  }


.inner-footer{
  background-color: red;
  position: relative;
}
.up-footer{
  padding: 0px 60px;
  position: absolute;
  bottom: 60px;
}

.up-footer .inner-up-footer .up-footer-item h3{
  color: #fff;
  font-size:20px;
}
.up-footer .inner-up-footer .up-footer-item p{
  font-size: 15px;
  color: #fff;
}
.up-footer .inner-up-footer .up-footer-item .content-with-us span a{
  font-size: 17px;
  color: #fff;
}
.inner-up-footer{
  margin-top:-20px;
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
  z-index: 1000;
}
.down-footer{
height: 200px;
display: flex;
justify-content: end;
align-items: end;
padding: 10px 90px; 
}
.footer{
    margin-top:244px;
}


@media only screen and (max-width: 1000px) {
  .inner-up-footer{
   padding: 10px;
  }
  .up-footer {
     padding: 0px 0px;
    position: inherit;
     bottom: 0px;
    }

    .down-footer {
      height: auto;
      padding: 10px;
     }
   .footer{
    margin-top:80px;
}
.description-404 h1{
      color: #fff;
      font-size: 16px;
     }
     .description-404 p{
       color: #fff;
       font-size: 13;
      }
      .image-404 img{
          width:90%;
      }
}
.icon-footer img{width: 18px;}
  
  
  
  .smarten-company-services-item  .name a  h3{
  font-size:15px;
   justify-content: center;
}
.smarten-company-services-item  .icon{
  display: flex;
  justify-content: center !important;
 }
 .smarten-company-services-item a{
  color: black;
 }
.smarten-company-services-item .icon img{
 width: 50%;
}
 .smarten-company-services-item{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }