@import "vendor/bootstrap/bootstrap.css";
@import "vendor/fontawesome/all.min.css";
@import "vendor/magnific.css";
@import "vendor/aos/aos.css";
@import "vendor/owlcaraousel/owl.carousel.min.css";
@import "vendor/owlcaraousel/owl.theme.default.min.css";
*{
    box-sizing:border-box
}
body{
    font-family:barlow,sans-serif;
    font-size:13px;
    font-weight:400;
    height:auto;
    color:#000;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent;
    background:#fff
}
a{
    text-decoration:none
}
a:hover{
    color:inherit
}
.overlapsection{
    position:relative;
    top:-100px
}
.btn-big{
    cursor:pointer;
    width:330px;
    height:64px;
    padding:20px 50px;
    line-height:64px;
    position:relative;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    z-index:0;
    background:#000000
}
.btn-big span{
    color:#ffffff;
    display:inline-block;
    text-transform:uppercase;
    font-size:18px;
    padding:0 60px 0 0;
    font-weight:700;
    letter-spacing:4px;
    transform-origin:center left;
    transition:color .3s ease;
    position:relative;
    z-index:1
}
.btn-big em{
    position:absolute;
    height:1px;
    background:#fff;
    width:47%;
    right:23px;
    top:50%;
    transform:scaleX(.25);
    -webkit-transform:scaleX(.25);
    transform-origin:center right;
    transition:all .3s ease;
    z-index:1
}
.btn-big:before,.btn-big:after{
    content:'';
    background:#fff;
    height:50%;
    width:0;
    position:absolute;
    transition:.3s cubic-bezier(.785,.135,.15,.86);
    -webkit-transition:.3s cubic-bezier(.785,.135,.15,.86)
}
.btn-big:before{
    top:0;
    left:0;
    right:auto
}
.btn-big:after{
    bottom:0;
    right:0;
    left:auto
}
.btn-big:hover:before{
    width:100%;
    right:0;
    left:auto
}
.btn-big:hover:after{
    width:100%;
    left:0;
    right:auto
}
.btn-big:hover span{
    color:#000
}
.btn-big:hover em{
    background:#000;
    transform:scaleX(.51);
    transform:scaleX(.51)
}
.fixi{
    right:0;
    left:0;
    z-index:1030;
    box-shadow:0 1rem 3rem rgb(2 4 15/13%);
    transition:ease all .35s
}
.scroll-top{
    z-index:3;
    display:block;
    position:fixed;
    width:0;
    height:0;
    bottom:80px;
    right:50px;
    padding:0;
    overflow:hidden;
    outline:0;
    border:none;
    border-radius:10px;
    background:#000000;
    transition:all .3s;
    box-shadow:0 3px 15px 0 rgba(13,42,60,.1)
}
.scroll-top:hover{
    background:#000
}
.scroll-top i{
    font-size:20px;
    position:absolute;
    top:50%;
    left:35%;
    transform:translate(-50%,-50%);
    width:0;
    border-radius:100%;
    color:#ffffff;
    -webkit-transition:.4s;
    transition:.4s
}
.scroll-top i:last-child{
    opacity:0;
    visibility:hidden;
    top:60%
}
.scroll-top:hover i:first-child{
    opacity:0;
    top:0;
    visibility:hidden
}
.scroll-top:hover i:last-child{
    opacity:1;
    visibility:visible;
    top:50%
}
.scroll-top:hover{
    background:#000
}
.scroll-top:hover i{
    color:#ffffff
}
.show{
    width:56px;
    height:56px
}
main{
    overflow:hidden;
    position:relative
}
em.error{
    margin:10px 0;
    display:block;
    color:#000000
}
#subscribemail em.error{
    margin:10px 0;
    display:block;
    color:#ffffff
}
.dots{
    position:absolute;
    left:-15%;
    bottom:-15%;
    width:50%;
    height:45%;
    background:url(../asset/page/dot.png) 0 0 repeat;
    z-index:-1
}
p.title-p{
    font-weight:700
}
@media(max-width:999px){
    .btn-big span{
        font-size:13px;
        padding:0 30px 0 0
    }
}
#mainheader{
    padding-top:0;
    padding-bottom:0;
    top:0;
    transition:all .3s ease;
    position:fixed;
    z-index:3;
    width:100%;
    background:#ffffff
}
#mainheader.fixed div{
    background:#fff
}
.logobrand{
    line-height:73px;
     padding-top: 18px;
}
.logobrand img{
    padding:0;
    width:80%;
    position:relative;
    z-index:3
}
#mainheader.fixi{
    top:-10px
}
span.head-title{
    color:#ffffff;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600;
    background:#000000;
    padding:10px 28px;
    border-radius:100px
}
@media(max-width:999px){
    .logobrand img{
        width:20%
    }
}
.listnav{
    padding:0;
    margin:0
}
.listnav li{
    list-style:none;
    display:inline-block;
    position:relative;
    padding:0 37px 0 0;
    text-decoration:none;
    line-height:73px;
    border-bottom:0
}
.listnav li:first-child{
    margin-left:0
}
.listnav li a{
    font-weight:600;
    font-size:16px;
    color:#000;
    position:relative;
    display:block;
    text-decoration:none
}
.listnav li a:before{
    position:absolute;
    content:'';
    width:0;
    height:5px;
    bottom:0;
    left:0;
    background:#000000;
    -webkit-transition:all .3s ease;
    transition:all .3s ease
}
.listnav li a:hover{
    color:#000000
}
.listnav li a:hover:before{
    width:100%
}
.listnav li a.activelink{
    color:#000000
}
.listnav li a.activelink:before{
    width:100%
}
.listnav .submenu{
    position:absolute;
    left:-30px;
    top:68px;
    visibility:hidden;
    opacity:0;
    padding-left:0;
    width:auto;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    text-align:left;
    background:#ffffff;
    line-height:35px!important;
    z-index:1;
    border-top:5px solid #000000
}
li.submenulink a{
    position:relative
}
li.submenulink a:after{
    position:absolute;
    top:34px;
    right:-18px;
    content:"";
    border-color:transparent #282b2d #282b2d transparent;
    border-style:solid;
    border-width:0 1px 1px 0;
    display:block;
    height:6px;
    transform:rotate(45deg);
    transition:border .3s ease 0s;
    width:6px
}
li.submenulink .submenu li a:after{
    display:none!important
}
li.submenulink a i{
    font-size:13px;
    margin:0 10px
}
li.submenulink:hover>a:before{
    width:0!important
}
li.submenulink>a:hover:before{
    width:0!important
}
li.submenulink>a.activelink:before{
    width:100%!important
}
li.submenulink:hover>.submenu{
    visibility:visible;
    opacity:1
}
.submenu li{
    width:100%;
    padding:0;
    border-bottom:1px solid #d8d7dc;
    transition:all .3s;
    margin:0
}
.submenu li a{
    padding:10px 20px;
    font-size:13px
}
.link-nav-submenu:hover:before{
    width:0!important
}
.link-nav-submenu:hover{
    background:#000000;
    color:#ffffff!important
}
.submenu li{
    line-height:20px!important
}
.submenu a.activelink{
    background:#000000;
    color:#ffffff!important
}
.navicon{
    position:absolute;
    right:30px;
    top:20px;
    width:0;
    height:0;
    padding:15px;
    cursor:pointer;
    z-index:9
}
.navicon__bar{
    left:0;
    position:absolute
}
.navicon__bar:before,.navicon__bar:after{
    content:'';
    position:absolute;
    width:30px;
    height:3px;
    background:#000000
}
.navicon:hover .navicon__bar:before,.navicon:hover .navicon__bar:after{
    background:#000000
}
.navicon__bar:before{
    transform:rotate(0deg) translate(0px,-4px)
}
.navicon__bar:after{
    transform:rotate(0deg) translate(0px,4px)
}
.navicon.active .navicon__bar:before{
    transform:rotate(-45deg) translate(0px,0px)
}
.navicon.active .navicon__bar:after{
    transform:rotate(45deg) translate(0px,0px)
}
.navicon.active:hover .navicon__bar .navicon__bar:before{
    transform:rotate(0deg) translate(0px,0px)
}
.navicon.active:hover .navicon__bar .navicon__bar:after{
    transform:rotate(0deg) translate(0px,0px)
}
.menu-mobile{
    position:fixed;
    width:100%;
    display:none;
    height:100%;
    right:0;
    left:0;
    overflow-y:auto;
    top:0;
    z-index:-1;
    background:#ffffff
}
.wrap-navimobile{
    height:100%;
    padding:0 10px;
    overflow-x:auto
}
.wrap-navimobile .listnavmobile{
    padding-left:0
}
.wrap-navimobile .listnavmobile li{
    list-style:none;
    padding:10px 0;
    border-bottom:1px solid rgba(255,94,20,.2)
}
.wrap-navimobile .listnavmobile li a{
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
    color:#000000
}
.wrap-navimobile .listnavmobile li a:hover{
    text-decoration:none;
    opacity:1
}
.submenulink-mobile i{
    position:absolute;
    font-size:13px;
    right:0;
    top:10px;
    z-index:-1
}
.submenulink-mobile>a.dropmenu{
    display:block;
    position:relative;
    cursor:pointer
}
.dropdownopen{
    padding-bottom:20px
}
.submenulink-mobile a.dropmenu>span{
    position:absolute;
    right:0
}
.submenu-mobile{
    display:none;
    padding:10px 0
}
.submenu-mobile>li{
    border-bottom:none!important
}
.submenu-mobile>li a{
    font-size:15px!important;
    font-weight:500!important
}
.submenu-mobile>li a:after{
    display:none!important
}
li.submenulink-mobile a{
    position:relative
}
li.submenulink-mobile a:after{
    position:absolute;
    top:10px;
    right:10px;
    content:"";
    border-color:transparent #000000 #000000 transparent;
    border-style:solid;
    border-width:0 1px 1px 0;
    display:block;
    height:6px;
    transform:rotate(45deg);
    transition:border .3s ease 0s;
    width:6px
}
.submenu-mobile>li a:hover{
    background:0 0;
    color:#000000!important
}
.submenulink-mobile.opensubmenu a[class=dropmenu]{
    color:#000000!important;
    background:0 0
}
.submenulink-mobile.opensubmenu ul[class=submenu-mobile]{
    display:block!important
}
@media(max-width:999px){
    .menu-mobile.active{
        display:block;
        padding:100px 0 0
    }
}
#bannersection{
    padding:150px 0;
    position:relative
}
#bannersection:before{
    background:rgba(0,0,0,.7);
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
}
.titleheader{
    position:relative;
    z-index:1
}
.titleheader h1{
    color:#ffffff;
    font-weight:700
}
.breadcrumb{
    font-size:16px;
    bottom:10px;
    left:0%;
    margin:0
}
.breadcrumb-item+.breadcrumb-item::before{
    color:#ffffff
}
.breadcrumb .breadcrumb-item a{
    color:#ffffff
}
.breadcrumb .breadcrumb-item.active{
    color:#000000
}
@media(max-width:999px){
    .breadcrumb{
        align-items:center;
        justify-content:center
    }
}
#subemail{
    padding:50px 0;
    position:relative
}
#subemail:after{
    background:rgba(255,94,20,.8);
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
}
.submailtitle{
    position:relative;
    z-index:1
}
.submailtitle span{
    display:block;
    font-weight:400
}
.submailtitle h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3;
    color:#ffffff
}
.submailform{
    position:relative;
    z-index:1
}
.submailform input{
    width:99%;
    height:46px;
    min-height:auto;
    margin-bottom:7px;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    -o-border-radius:100px;
    border-radius:4px;
    border:1px solid rgba(78,78,84,.2);
    outline:none;
    padding-left:20px;
    padding-right:120px;
    z-index:1;
    font-weight:500;
    font-size:12px;
    letter-spacing:.67px
}
.submailform .butn{
    position:absolute;
    top:0;
    right:0;
    z-index:2;
    border:none;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    line-height:20px;
    letter-spacing:1px;
    color:#fff;
    width:130px;
    outline:none;
    background:#000000;
    cursor:pointer;
    padding:13px 18px;
    box-shadow:none
}
@media(max-width:999px){
    .submailtitle h3{
        font-size:25px
    }
    .submailform .butn{
        font-size:13px
    }
}
#footermain{
    padding:50px 0 0;
    background:#000
}
.sosmed-list-foot{
    padding-left:0;
    margin-bottom:60px;
    text-align:center;
    padding-top:20px;
    padding-right:0
}
.sosmed-list-foot li{
    display:inline-block;
    list-style:none
}
.sosmed-list-foot li a i{
    background-color:#000;
    border-radius:50%;
    color:#ffffff;
    display:inline-block;
    height:38px;
    width:38px;
    line-height:38px;
    margin:auto 10px;
    font-size:15px;
    text-align:center
}
.sosmed-list-foot li a:hover i{
    background-color:#ffffff;
    color:#000
}
.bottom-footer{
    background:#000
}
.title-mini{
    color:#ffffff
}
.footer-left img{
    width:100px
}
.footer-left p{
    color:#ffffff;
    line-height:1.7;
    font-size:15px
}
.footeritem h3{
    position:relative;
    display:inline-block;
    color:#ffffff
}
.footeritem h3:after{
    position:absolute;
    content:'';
    width:45px;
    background:#000000;
    height:2px;
    top:16px;
    right:-60px
}
.linkfooter{
    padding:0
}
.linkfooter li{
    position:relative;
    list-style:none;
    font-size:15px;
    margin:10px 0
}
.linkfooter li:after{
    position:absolute;
    content:"\f101";
    font-family:'font awesome 6 free';
    font-weight:700;
    line-height:20px;
    font-size:12px;
    color:#d8d7dc;
    left:0;
    top:0
}
.linkfooter li a{
    color:#ffffff
}
.linkfooter li a:hover{
    color:#fff
}
.desc{
    position:absolute;
    padding:50px;
    z-index:9;
    top:60%;
    left:23%;
    transform:translate(0,-50%);
    color:#ffffff
}
.desc-tag{
}
.desc-headline{
    font-size:50px;
    font-weight:700
}
.desc-p{
    font-size:16px;
    line-height:1.8
}
.hero-img{
    position:relative;
    height:40vh;
    background-position:center;
    background-size:cover
}
.hero-img:before{
    background:rgba(0,0,0,.5);
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
}
.delay-1{
    animation-delay:.2s
}
.delay-2{
    animation-delay:.4s
}
.delay-3{
    animation-delay:.6s
}
.delay-4{
    animation-delay:.8s
}
.fadeInUp{
    animation-name:fadeInUp
}
@media(max-width:1440px){
    .hero-img{
        height:50vh
    }
    .desc{
        left:0%
    }
}
@media(max-width:999px){
    .desc{
        position:absolute;
        width:100%;
        left:50%;
        padding:30px;
        text-align:center;
        transform:translate(-50%,-50%)
    }
}
@media(max-width:888px){
    .desc-headline{
        font-size:25px
    }
    .desc-p{
        font-size:13px
    }
    .btn-big{
        padding:20px 30px
    }
}
@media(max-width:767px){
    .slider-counter{
        font-size:80px;
        font-weight:600;
        bottom:0
    }
}
@media(max-width:576px){
    .slider-counter{
        font-size:30px;
        font-weight:500;
        bottom:0
    }
}
@keyframes fadeInUp{
    0%{
        opacity:0;
        transform:translate3d(0,100%,0)
    }
    to{
        opacity:1;
        transform:translateZ(0)
    }
}
.counter-wrap{
    padding:40px;
    position:relative
}
.counter-wrap.bg-blue{
    background:#834105
}
.counter-wrap.bg-red{
    background:#000000
}
.counter-wrap h3.counter{
    font-size:60px;
    font-weight:700;
    color:#ffffff
}
.counter-wrap p{
    color:#ffffff;
    font-size:18px;
    font-weight:600
}
.counter-wrap i{
    font-size:150px;
    color:#fff;
    position:absolute;
    right:0;
    bottom:0;
    opacity:.2
}
.infogap.bg-white{
    background:#ffffff;
    position:relative;
    top:-150px;
    z-index:1
}
.infogap{
    border-top:10px solid #000000;
    padding:50px 60px;
    box-shadow:0 2px 25px rgba(0,33,91,.2)
}
.infogap h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.list-infogap{
    padding:0
}
.list-infogap li{
    list-style:none
}
.list-infogap li .list-ofinfogap{
    font-size:16px;
    color:#000;
    line-height:1.7;
    position:relative;
    padding-left:50px
}
.list-infogap li .list-ofinfogap .icondetail{
    position:absolute;
    left:0;
    top:0;
    font-size:30px;
    color:#000000
}
@media(max-width:999px){
    .infogap.bg-white{
        top:0
    }
    .infogap{
        border-top:none!important;
        padding:50px 10px;
        box-shadow:unset!important
    }
}
@media(max-width:888px){
    .infogap h3{
        font-size:25px
    }
    .list-infogap li .list-ofinfogap{
        font-size:16px
    }
}
#aboutsection{
    padding:0 0 100px;
    position:relative
}
.line{
    position:absolute;
    height:100%;
    top:0;
    left:28.9%;
    width:1px;
    background:#ffffff
}
.line:nth-of-type(2){
    left:unset;
    right:28.9%
}
.aboutinfo p.aboutinfo-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.aboutinfo h3.aboutinfo-content{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.aboutimg{
    position:relative;
    z-index:2
}
.aboutimg img{
    width:100%
}
@media(max-width:888px){
    .aboutinfo span.aboutinfo-title{
        font-size:13px
    }
    .aboutinfo h3.aboutinfo-content{
        font-size:25px
    }
}
#servicesection{
    padding:100px 0;
    background:#ffffff;
    position:relative
}
.serviceinfo p.serviceinfo-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.serviceinfo h3.serviceinfo-content{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
#service-slide{
    margin-top:100px
}
.itemservice{
    padding:30px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    background:#fff;
    box-shadow:0 .3rem .5rem rgb(2 4 15/5%);
    transition:ease all .3s
}
.itemservice span.itemservice-title{
    color:#ffffff;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600;
    background:#000000;
    padding:10px 15px;
    border-radius:100px
}
.itemservice i.icons{
    font-size:50px;
    color:#000000
}
.itemservice p.itemservice-p{
    font-size:16px;
    color:#000;
    line-height:1.7;
    border-bottom:1px solid #ffffff
}
.itemservice h3.itemservice-content{
    font-size:20px;
    font-weight:700;
    line-height:1.3
}
.itemservice a{
    color:#000
}
.itemservice a i{
    font-size:20px
}
.itemservice:hover{
    background:#000000
}
.itemservice:hover i.icons{
    color:#ffffff
}
.itemservice:hover a i{
    color:#ffffff
}
.itemservice:hover h3.itemservice-content{
    color:#ffffff
}
.itemservice:hover p.itemservice-p{
    color:#ffffff
}
.owl-dots .owl-dot.active span{
    opacity:1
}
.owl-dots .owl-dot span{
    width:20px!important;
    height:5px!important;
    background:#000000!important;
    opacity:.5
}
.owl-item.active.center .itemservice{
    background:#000000!important;
    color:#ffffff
}
.owl-item.active.center .itemservice i.icons{
    color:#ffffff!important
}
.owl-item.active.center .itemservice a i{
    color:#ffffff!important
}
.owl-item.active.center .itemservice p.itemservice-p{
    color:#ffffff!important
}
@media(max-width:888px){
    .serviceinfo span.serviceinfo-title{
        font-size:13px
    }
    .serviceinfo h3.serviceinfo-content{
        font-size:25px
    }
}
#moregap{
    padding:150px 0;
    position:relative;
    z-index:1;
    background-color:#ffffff
}
#moregap:after{
    content:"";
    display:block;
    clear:both;
    height:100%;
    width:100%;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0
}
.moregapinfo{
    position:relative;
    z-index:1
}
.moregapinfo .moregapinfo-title{
    color:#ffffff;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600
}
.moregapinfo h3.moregapinfo-content{
    color:#ffffff;
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
#funfact{
    position:relative;
    z-index:1
}
#funfact .counterwrap .counter{
    font-size:70px;
    font-weight:700;
    color:#ffffff
}
#funfact .counterwrap p{
    font-size:20px;
    font-weight:700;
    line-height:1.3;
    color:#ffffff;
    position:relative;
    display:block
}
#funfact .counterwrap span.descfun{
    font-size:15px;
    color:#ffffff;
    line-height:1.7
}
@media screen and (max-width:999px){
    #funfact .counterwrap .counter{
        font-size:50px
    }
    #funfact .counterwrap p{
        font-size:16px
    }
    #funfact .counterwrap span.descfun{
        font-size:15px
    }
}
#testimonial{
    padding:100px 0 0;
    position:relative;
    z-index:1;
    background:#fff
}
.itemtestimoni{
    padding:50px;
    margin:0 10px
}
.cards{
    transform-style:preserve-3d;
    transition:all .5s ease
}
.itemtestimoni:hover .cards{
    transform:rotateY(180deg)
}
.testifront{
    position:relative;
    padding:40px 30px;
    background:#fff;
    will-change:transform;
    overflow:hidden;
    backface-visibility:hidden;
    z-index:1;
    border-radius:.25rem
}
.testimonialimage{
    position:absolute;
    content:'';
    top:1px;
    right:1px;
    bottom:1px;
    left:1px;
    overflow:hidden
}
.itemtestimoni img{
    width:80px!important;
    height:80px;
    border-radius:100px;
    border:3px solid #000000;
    margin:0 auto
}
.testimonialimage img{
    width:100%!important;
    height:100%!important;
    margin:unset!important;
    border:none;
    object-fit:cover
}
.quote h4{
    font-weight:700
}
.quote i{
    font-size:150px;
    position:absolute;
    left:0;
    top:0;
    opacity:.1
}
.itemtestimoni-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
p.itemtestimoni-user{
    font-size:16px;
    font-weight:700;
    line-height:1.7;
    position:relative
}
.custom-navtestimonial{
    top:30%;
    -webkit-transform:translateY(-30%);
    transform:translateY(-30%);
    position:absolute;
    z-index:1;
    width:100%;
    transition:all .3s;
    opacity:0
}
.custom-navtestimonial .owl-prev,.custom-navtestimonial .owl-next{
    position:absolute;
    height:100px;
    background:0 0;
    border:none;
    z-index:100
}
.custom-navtestimonial .owl-prev i,.custom-navtestimonial .owl-next i{
    font-size:20px;
    color:#000000
}
.custom-navtestimonial .owl-prev{
    left:0
}
.custom-navtestimonial .owl-next{
    right:20px
}
.testimonialewrap:hover .custom-navtestimonial{
    opacity:1;
    transition:all .3
}
.clientlist{
    padding:50px 0;
    margin:0;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    z-index:1;
    background:#fff
}
.imgclient{
    padding:0;
    max-width:20%;
    -ms-flex:0 0 20%;
    flex:0 0 20%
}
.imgclient a{
    padding:0 20px;
    height:150px;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center
}
.imgclient a img{
    max-width:80%;
    vertical-align:middle;
    height:auto
}
@media screen and (max-width:999px){
    .imgclient{
        -webkit-box-flex:0;
        max-width:33.33%;
        -ms-flex:0 0 33.33%;
        flex:0 0 33.33%
    }
}
@media(max-width:888px){
    .itemtestimoni{
        padding:20px
    }
}
@media screen and (max-width:576px){
    .imgclient{
        -webkit-box-flex:0;
        max-width:50%;
        -ms-flex:0 0 50%;
        flex:0 0 50%
    }
}
#aboutcontent{
    padding:150px 0 100px
}
span.aboutwrap-title{
    color:#000000;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600
}
p.aboutwrap-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
h3.aboutwrap-content{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.imgabout{
    position:relative
}
.imgabout img{
    width:100%
}
.imgabout .wrapyear{
    position:absolute;
    background:#000000;
    z-index:1;
    bottom:30px;
    text-align:center;
    text-transform:uppercase;
    color:#ffffff;
    left:-26px;
    padding:30px 20px
}
.imgabout .wrapyear p{
    font-size:50px;
    font-weight:700
}
.imgabout .wrapyear span{
    font-size:30px;
    letter-spacing:1px
}
.detailabout{
    border-bottom:1px solid rgba(0,33,91,.1)
}
.detailabout:nth-last-child(2){
    border-bottom:none
}
.detailabout:nth-last-child(1){
    border-bottom:none
}
.detailabout h3{
    font-weight:700;
    font-size:20px
}
.detailabout p{
    font-size:15px;
    color:#000;
    line-height:1.7;
    position:relative
}
.numbers{
    background:#000000;
    color:#fff;
    border-radius:50%;
    height:40px;
    width:40px;
    line-height:30px;
    font-size:15px;
    border:5px solid rgba(255,255,255,.8);
    font-weight:700;
    text-align:center;
    transition-duration:500ms;
    margin:0 auto
}
#funfactabout{
    padding:50px 0 100px
}
#funfactabout .counterwrap p{
    color:#000
}
#funfactabout .counterwrap span.descfun{
    color:#000
}
#funfactabout .counterwrap .counter{
    color:#000000
}
.detailgap-about{
    position:relative;
    z-index:1
}
.detailgap-about h3{
    font-size:40px;
    font-weight:700;
    color:#ffffff
}
.detailgap-about span{
    color:#000000
}
.detailgap-about p{
    font-size:15px;
    color:#ffffff;
    line-height:1.7;
    position:relative
}
.detailgap-about .btn-big span{
    color:#ffffff
}
.detailgap-about .btn-big:hover span{
    color:#000
}
@media screen and (max-width:999px){
    .imgabout .wrapyear{
        bottom:0;
        left:0
    }
}
#faqsection{
    padding:150px 0
}
.detailfaq h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.detailfaq p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.detailfaq-list{
    padding:0
}
.detailfaq-list li{
    list-style:none;
    position:relative
}
.detailfaq-list li p{
    padding:0 40px;
    position:relative
}
.detailfaq-list li p:after{
    font-family:"font awesome 5 free";
    color:#000000;
    font-weight:700;
    content:"\f00c";
    position:absolute;
    left:0;
    top:0
}
.accordions{
    position:relative;
    width:100%;
    height:auto;
    background-color:#ffffff
}
.accordions>.accordion-btn{
    cursor:pointer;
    display:block;
    padding:25px 15px;
    text-decoration:none;
    color:#000;
    font-weight:600;
    border-bottom:1px solid #d8d7dc
}
.accordions>.accordion-btn h5{
    font-size:15px;
    font-weight:700;
    margin:0
}
.accordions>.accordion-btn i{
    float:right;
    margin-top:-20px
}
.accordions>.accordion-btn.active{
    background-color:#000000;
    color:#fff
}
.content{
    background-color:#fff;
    border-bottom:1px solid #d8d7dc;
    display:none
}
.content p{
    padding:20px 15px;
    margin:0;
    font-size:16px;
    color:#000;
    line-height:1.7
}
#infofaq{
    padding:100px 0 0;
    background:#ffffff
}
.imgman img{
    width:100%
}
.detailinfo h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.detailinfo p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.minidetail{
    background:#ffffff;
    padding:30px;
    border:1px solid #d8d7dc
}
.minidetail h3{
    font-size:20px
}
.minidetail p{
    color:#000;
    line-height:1.7
}
.minidetail i{
    background:#000000;
    color:#fff;
    border-radius:50%;
    height:60px;
    width:60px;
    line-height:50px;
    font-size:20px;
    border:5px solid rgba(255,255,255,.8);
    font-weight:700;
    text-align:center;
    transition-duration:500ms;
    margin:0 auto
}
@media(max-width:999px){
    .imgman img{
        width:80%;
        display:inline-block
    }
}
#teamsection{
    padding:100px 0
}
.teaminfo span.teaminfo-title{
    color:#000000;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600
}
.teaminfo p.teaminfo-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.teaminfo h3.teaminfo-content{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.teamwrap{
    padding:100px 0 0
}
.teamdetail{
    position:relative
}
.teamdetail img{
    width:100%
}
.teamdetail:after{
    content:'';
    width:100%;
    height:100%;
    left:0;
    opacity:0;
    top:0;
    position:absolute;
    background:#000000;
    transition:all .3s
}
.teamdetail:hover:after{
    opacity:.8
}
.teamdetailwrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    visibility:hidden;
    transition:opacity .3s,visibility .3s;
    border-radius:.25rem
}
.teamdetail:hover .teamdetailwrap{
    opacity:1;
    visibility:visible
}
.titleteam{
    transition-delay:.2s;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    transform:translateY(25px);
    letter-spacing:2px;
    opacity:0;
    margin-bottom:10px;
    font-size:24px;
    color:#ffffff;
    font-weight:700;
    transition:transform .45s cubic-bezier(.19,1,.22,1),opacity .45s cubic-bezier(.19,1,.22,1)
}
.teamdetail:hover .titleteam{
    transition-delay:0s;
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
}
.detailmini{
    transition-delay:.2s;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    transform:translateY(25px);
    letter-spacing:1.5px;
    opacity:0;
    color:#ffffff;
    margin-bottom:10px;
    font-size:13px;
    transition:transform .45s cubic-bezier(.19,1,.22,1),opacity .45s cubic-bezier(.19,1,.22,1)
}
.teamdetail:hover .detailmini{
    transition-delay:.2s;
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
}
.teamsocial-icon{
    transform:translateY(25px);
    opacity:0;
    padding:20px 0;
    color:#000;
    transition:transform .45s cubic-bezier(.19,1,.22,1),opacity .45s cubic-bezier(.19,1,.22,1)
}
.teamsocial-icon li{
    display:inline-block;
    list-style:none;
    margin:0 10px
}
.teamsocial-icon li a i{
    font-size:15px;
    color:#ffffff;
    width:30px;
    height:30px;
    background:#ffff;
    text-align:center;
    line-height:30px;
    color:#f06f35;
    border-radius:100px
}
.teamdetail:hover .teamsocial-icon{
    transition-delay:.3s;
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
}
#maincontact{
    padding:150px 0
}
.detailcontact h3{
    font-size:30px;
    font-weight:700
}
.detailcontact ul{
    padding:0
}
.detailcontact ul li{
    display:block;
    padding:0 0 0 50px;
    position:relative;
    margin:30px 0
}
.detailcontact ul li .icon{
    position:absolute;
    left:0;
    color:#000000
}
.detailcontact ul li .text{
    font-size:18px;
    color:#000;
    line-height:1.7;
    position:relative
}
.detailcontact ul li a{
    display:block;
    font-size:18px;
    margin:5px 0;
    color:#000
}
.detailcontact ul li .icon i{
    font-size:30px
}
.detailcontact input{
    width:100%;
    height:50px;
    padding:5px 20px;
    font-size:15px;
    border:2px solid #000
}
.detailcontact input:focus{
    outline:2px solid #000000;
    border:none
}
.detailcontact textarea{
    width:100%;
    height:150px;
    font-size:15px;
    padding:5px 20px;
    border:2px solid #000
}
.detailcontact textarea:focus{
    outline:2px solid #000000;
    border:none
}
span.detailcontact-title{
    color:#000000;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600
}
.btn-big.submitbutton{
    border:none;
    padding:0;
    transform:translate(0,0);
    -webkit-transform:translate(0,0)
}
@media(max-width:999px){
    .btn-big.submitbutton{
        width:100%
    }
}
#pricingmain{
    padding:150px 0;
    background:#ffffff
}
.detailprice{
    position:relative;
    background:#ffffff;
    border:1px solid rgba(0,0,0,.2);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    transition:all .3s
}
.price-opacity{
    background:rgba(255,94,20,.2)
}
.detailprice:hover{
    box-shadow:0 1rem 3rem rgb(2 4 15/13%)
}
.pricehead{
    border-bottom:1px solid rgba(0,0,0,.2)
}
.center-box .pricehead{
    border-bottom:none
}
.priceinfo span.priceinfo-title{
    color:#000000;
    font-size:15px;
    letter-spacing:3px;
    font-weight:600
}
.priceinfo p.priceinfo-p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.priceinfo h3.priceinfo-content{
    font-size:30px;
    font-weight:700;
    line-height:1.3
}
.pricehead{
    padding:30px 20px;
    background:#d8d7dc
}
.pricehead span.p-title{
    font-size:20px;
    font-weight:700;
    display:block
}
.pricehead span.p-titleinfo{
    font-size:13px;
    display:block
}
.pricehead h3{
    font-size:30px;
    font-weight:700;
    display:block
}
.center-box .pricehead{
    background:#000000;
    color:#fff
}
.center-box .pricehead h3{
    font-size:60px;
    font-weight:700;
    display:block
}
.center-box .pricehead h3 small{
    font-size:20px;
    font-weight:400
}
.center-box .pricehead span.p-title{
    font-size:30px;
    font-weight:700;
    display:block
}
.center-box .pricehead span.p-titleinfo{
    font-size:15px;
    display:block
}
.center-box .pricehead h3{
    font-size:60px;
    font-weight:700;
    display:block
}
.center-box .pricehead h3 small{
    font-size:20px;
    font-weight:400
}
.top-box{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-20px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:15px;
    border-radius:20px;
    padding:10px 25px;
    color:#ffffff;
    background-color:#000
}
.listfeature{
    padding:0
}
.listfeature li{
    list-style:none;
    position:relative;
    margin:10px 0;
    padding:10px 0;
    border-bottom:1px dotted rgba(0,0,0,.2)
}
.listfeature li:nth-last-child(1){
    border-bottom:none
}
.listfeature li i{
    position:absolute;
    left:0;
    rgba(53,32,32,0.2)font-size:18px
}
.bottomprice{
    padding:25px 0;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px
}
.opacity-bg{
    background-color:rgba(255,94,20,.2)!important
}
.pricecontent{
    padding:0 20px
}
.pricecontent p{
    color:#000000
}
.pricecontent li{
    font-size:15px
}
.pricecontent-center{
    padding:0 20px
}
.pricecontent-center p{
    color:#000000
}
.pricecontent-center li{
    font-size:20px
}
#servicedetail-section{
    padding:100px 0
}
.listservice{
    padding:50px 30px;
    border:1px solid #ffffff
}
.listservice h3{
    font-weight:700
}
.listservice-wrap{
    padding:0
}
.listservice-wrap li{
    list-style:none;
    position:relative;
    margin:30px 0;
    padding:0 0 20px 70px;
    border-bottom:1px solid #ffffff
}
.listservice-wrap li a{
    color:#000
}
.listservice-wrap li a:hover p:first-child{
    color:#000000
}
.listservice-wrap li:last-child{
    border-bottom:unset;
    margin:30px 0 0;
    padding:0 0 0 70px
}
.listservice-wrap li i{
    font-size:40px;
    color:#000000;
    position:absolute;
    left:0
}
.listservice-wrap li p{
    font-size:18px;
    line-height:30px
}
.listservice-inner li p{
    font-weight:700
}
.image-wrap img{
    width:100%
}
.servicedetail-info h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.servicedetail-info p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
#projectsection{
    padding:100px 0
}
.project-wrap{
    position:relative
}
.wrap-item{
    position:relative
}
.wrap-item img{
    width:100%
}
.wrap-item:after{
    content:"";
    height:100%;
    width:100%;
    background-color:#000000;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:all .3s ease-in-out
}
.wrap-detail{
    text-align:center;
    position:absolute;
    top:60%;
    left:0;
    transition:all .3s;
    opacity:0;
    right:0;
    transform:translateY(-50%)
}
.wrap-detail i{
    background:#ffffff;
    padding:30px;
    margin:0 10px;
    color:#000000;
    font-size:30px
}
.project-wrap:hover .wrap-item:after{
    opacity:.8;
    visibility:visible
}
.project-wrap:hover .wrap-detail{
    top:50%;
    visibility:visible;
    opacity:1;
    transition-delay:.3s
}
#projectdetail{
    padding:100px 0
}
.detail-project img{
    width:100%
}
.detail-project h3{
    font-size:33px;
    font-weight:700;
    line-height:1.3
}
.detail-project p{
    font-size:16px;
    color:#000;
    line-height:1.7
}
.list-detail{
    padding:0
}
.list-detail li{
    position:relative;
    margin:10px 0;
    list-style:none
}
.list-detail li .wrap-detaillist{
    position:relative;
    padding:10px 0 0 50px
}
.list-detail li .wrap-detaillist i{
    color:#000000;
    font-size:20px;
    position:absolute;
    left:0;
    top:20px
}
.list-detailproject{
    padding:0
}
.list-detailproject li{
    list-style:none;
    padding:0 0 0 35px;
    position:relative;
    margin:20px 0;
    font-size:16px
}
.list-detailproject li i{
    font-size:20px;
    color:#000000;
    position:absolute;
    left:0
}
#errormain{
    position:relative
}
#errormain:before{
    background:rgba(0,0,0,.2);
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
}
.detailerror{
    position:relative;
    z-index:1
}
.detailerror h1{
    font-size:60px;
    font-weight:700;
    letter-spacing:1px;
    color:#fff
}
.detailerror p{
    font-size:18px;
    color:#fff
}
.detailerror span{
    background:#000000;
    padding:10px 20px
}
 #mainrealizations{
    padding-top:150px;
}
 img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     overflow: hidden;
}
 .gallery-title {
     font-size: 36px;
     color: #000000;
     text-align: center;
     font-weight: 500;
     margin-bottom: 70px;
}
 .gallery-title:after {
     content: "";
     position: absolute;
     width: 7.5%;
     left: 46.5%;
     height: 45px;
     border-bottom: 1px solid #5e5e5e;
}
 .filter-button {
     font-weight: 600;
     font-size: 18px;
     color: #000000;
     border-radius: 5px;
     text-align: center;
     margin-bottom: 30px;
}
 .filter-button:hover {
     font-size: 18px;
     border: 1px solid #000000;
     border-radius: 5px;
     text-align: center;
     color: #ffffff;
     background-color: #000000;
}
 .filter-button.active {
     background-color: #000000;
     color: white;
}
 .port-image {
     width: 100%;
}
 .gallery_product {
     margin-bottom: 30px;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
}
 .block{
     opacity: 0;
}
 @-webkit-keyframes fadeIn {
     0% {
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}
 @keyframes fadeIn {
     0% {
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}
 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn;
}