input[type=file]::-webkit-file-upload-button{
    cursor:pointer
}
input[type=file]::-moz-file-upload-button{
    cursor:pointer
}
input[type=file]::-ms-file-upload-button{
    cursor:pointer
}
input[type=file]::-o-file-upload-button{
    cursor:pointer
}
.pointer,a[href],button,input[type=button],input[type=file],input[type=image],input[type=submit],label[for],select{
    cursor:pointer
}
::-moz-focus-inner{
    border:0 solid transparent
}
::-webkit-focus-inner{
    border:0 solid transparent
}
::-moz-selection{
    color:#fff;
    background:#111
}
::-webkit-selection{
    color:#fff;
    background:#111
}
::-webkit-input-placeholder{
    color:#333;
    opacity:1
}
:-moz-placeholder{
    color:#333;
    opacity:1
}
::-moz-placeholder{
    color:#333;
    opacity:1
}
:-ms-input-placeholder{
    color:#333;
    opacity:1
}
html body{
    font-family:Lato,sans-serif;
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-color:#111;
    overflow:hidden
}
canvas{
    z-index:0!important;
    position:absolute;
    top:0
}
a,button,div a:active,div a:focus,div a:hover{
    text-decoration:none;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
a,button,div a i:active,div a:active,div a:hover,span{
    text-decoration:none
}
*,::after,::before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box
}
.no-list li,.no-list ol,.no-list ul,footer li,footer ol,footer ul,header li,header ol,header ul{
    list-style:inside none none
}
.no-list ol,.no-list ul,footer ol,footer ul,header ol,header ul{
    margin:0;
    padding:0
}
a{
    outline:0;
    color:#555
}
a:hover{
    color:#111
}
body .clear,body .clearfix{
    clear:both;
    line-height:100%
}
body .clearfix{
    height:auto
}
*{
    outline:0!important
}
table{
    border-collapse:collapse;
    border-spacing:0
}
.clearfix:after,.clr:after,.container:after,.grve-container:after,li:after,ul:after{
    clear:both;
    display:block;
    content:""
}
div button,div input,div select,div textarea{
    font-family:Lato,sans-serif
}
body h1,body h2,body h3,body h4,body h5,body h6{
    font-family:Lato,sans-serif;
    line-height:120%;
    color:#fff;
    font-weight:700;
    margin:0 0 15px
}
body h1:last-child,body h2:last-child,body h3:last-child,body h4:last-child,body h5:last-child,body h6:last-child{
    margin-bottom:0
}
div select{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
div select option{
    font-size:13px;
    color:#333;
    padding:2px 5px
}
img{
    margin:0 auto;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto
}
body p{
    color:#888;
    font-family:Lato,sans-serif;
    font-size:16px;
    line-height:1.6;
    margin:0 0 15px;
    padding:0
}
body p:empty{
    margin:0;
    line-height:0
}
p strong{
    font-weight:700
}
.a-left{
    text-align:left
}
.a-right{
    text-align:right
}
.a-center{
    text-align:center
}
label em{
    color:red;
    display:inline-block;
    font-style:normal;
    vertical-align:top;
    margin-left:5px
}
.hidden{
    display:none!important
}
.container{
    max-width:100%
}
html.no-scroll{
    overflow:hidden
}
html.no-scroll body{
    overflow:hidden;
    height:100%
}
#preloader{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    width:100%;
    z-index:99999;
    display:flex
}
#preloader:after,#preloader:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    z-index:-1;
    background-color:#fff;
    -webkit-transition:all .3s ease 0s;
    -o-transition:all .3s ease 0s;
    transition:all .3s ease 0s
}
#preloader:after{
    left:auto;
    right:0
}
#preloader .loader_line{
    margin:auto;
    width:1px;
    height:250px;
    position:relative;
    overflow:hidden;
    -webkit-transition:all .8s ease 0s;
    -o-transition:all .8s ease 0s;
    transition:all .8s ease 0s
}
.loader_line:before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:0%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color:#000;
    -webkit-animation:lineheight 1s ease-in-out 0s forwards;
    -o-animation:lineheight 1s ease-in-out 0s forwards;
    animation:lineheight 1s ease-in-out 0s forwards
}
.loader_line:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:100%;
    background-color:#bbb;
    -webkit-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -o-transform:translateY(-100%);
    transform:translateY(-100%);
    -webkit-animation:lineround 1.2s linear 0s infinite;
    -o-animation:lineround 1.2s linear 0s infinite;
    animation:lineround 1.2s linear 0s infinite;
    animation-delay:2s
}
@keyframes lineheight{
    0%{
        height:0%
    }
    100%{
        height:100%
    }
}
@keyframes lineround{
    0%{
        -webkit-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
        -o-transform:translateY(-100%);
        transform:translateY(-100%)
    }
    100%{
        -webkit-transform:translateY(200%);
        -ms-transform:translateY(200%);
        -o-transform:translateY(200%);
        transform:translateY(200%)
    }
}
.preloaded .loader_line:after{
    opacity:0
}
.preloaded .loader_line{
    opacity:0;
    height:100%!important
}
.preloaded:after,.preloaded:before{
    -webkit-animation:preloadedzero .3s ease-in-out .5s forwards;
    -o-animation:preloadedzero .3s ease-in-out .5s forwards;
    animation:preloadedzero .3s ease-in-out .5s forwards
}
@keyframes preloadedzero{
    0%{
        width:50%
    }
    100%{
        width:0%
    }
}
.social__tooltip{
    opacity:0;
    position:absolute;
    padding:.5rem 1rem;
    background-color:#67DA4C;
    color:#fff;
    font-size:1rem;
    white-space:nowrap;
    font-weight:700;
    border-radius:.5rem;
    pointer-events:none
}
.social__tooltip::after{
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    background-color:#67DA4C;
    border-radius:3px
}
.social__tooltip-bottom{
    left:0;
    transform:translateX(-100%)
}
.social__tooltip-bottom::after{
    top:50%;
    transform:translate(50%,-50%) rotate(45deg);
    right:1px
}
.social__content:hover .social__tooltip-bottom{
    opacity:1;
    bottom:-1rem
}
.list:hover .social__tooltip{
    opacity:1
}
.list .active div{
    left:-10px
}
.clearfix:after,.clr:after,.grve-container:after,li:after,ul:after{
    clear:both;
    display:block;
    content:""
}
.common-desctiption{
    color:#888;
    text-align:center;
    text-transform:capitalize;
    margin-bottom:8px
}
h1.common-title{
    font-size:55px;
    line-height:1.2;
    font-weight:700;
    position:relative;
    text-transform:capitalize;
    word-spacing:5px;
    text-align:center
}
.animated-bar{
    background-color:#67DA4C;
    content:'';
    display:block;
    height:3px;
    left:0;
    margin:0 auto 0 auto;
    position:relative;
    right:0;
    width:100px;
    border-radius:4px
}
.animated-bar:before{
    background-color:#212121;
    content:'';
    height:100%;
    position:absolute;
    top:0;
    width:4px;
    left:8px;
    -webkit-animation:heading-move 10s infinite linear;
    animation:heading-move 10s infinite linear
}
.animated-bar:after{
    background-color:#212121;
    content:'';
    height:100%;
    position:absolute;
    top:0;
    width:4px;
    left:0;
    -webkit-animation:heading-move 10s infinite linear;
    animation:heading-move 10s infinite linear
}
.clickbtn{
    padding:10px 10px;
    background-color:#67DA4C;
    color:#fff;
    letter-spacing:1px;
    text-transform:capitalize;
    border-radius:4px;
    border:2px solid #67DA4C;
    font-size:15px;
    margin-right:10px;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
.clickbtn:hover{
    box-shadow:0 0 25px rgb(0 0 0 / 85%);
    transform:rotate(10deg);
    background-color:transparent;
    color:#fff;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
.home-btn{
    padding:16px;
    text-align:center;
    display:flex;
    justify-content:center
}
.header-holder{
    position:fixed;
    right:0;
    z-index:50;
    display:flex;
    justify-content:center;
    flex-direction:column;
    height:100%;
    padding:70px 0;
    background-color:#111
}
.navigation{
    width:70px;
    height:100%;
    position:relative;
    border-radius:10px 0 0 10px;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#212121;
    overflow-y:scroll;
    overflow:visible
}
.navigation ul{
    display:flex;
    flex-direction:column;
    list-style:none;
    margin:0
}
.navigation ul li{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center
}
.navigation ul li a{
    width:70px;
    height:70px;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center
}
.navigation ul li a .icon{
    position:relative;
    display:block;
    text-align:center;
    font-size:26px;
    transition:.5s
}
.navigation ul li.active a .icon{
    color:#67DA4C
}
li.active{
    position:absolute;
    width:70px;
    height:70px;
    left:-50%;
    border-radius:50%;
    border:6px solid #111;
    transition:.5s;
    background-image:linear-gradient(#232323,#141516d1)
}
li.active::before{
    content:'';
    position:absolute;
    left:50%;
    top:-37.5%;
    width:20px;
    height:20px;
    background-color:transparent;
    border-bottom-left-radius:20px;
    box-shadow:-10px 1px 0 0 #111
}
li.active::after{
    content:'';
    position:absolute;
    bottom:-37.5%;
    right:9px;
    width:20px;
    height:20px;
    background-color:transparent;
    border-top-left-radius:20px;
    box-shadow:-10px -1px 0 0 #111
}
::-webkit-scrollbar{
    width:4px
}
::-webkit-scrollbar-track{
    background-color:transparent;
    -webkit-border-radius:20px;
    margin-right:10px;
    margin-top:30px;
    margin-bottom:30px;
    border-radius:20px;
    margin-left:10px
}
::-webkit-scrollbar-thumb{
    -webkit-border-radius:20px;
    border-radius:20px;
    height:50px;
    margin-top:30px;
    margin-bottom:30px;
    background:#6d6d6d;
    position:relative
}
section{
    position:absolute;
    top:0;
    height:100vh;
    width:0;
    opacity:0;
    transition:all ease-in .5s;
    display:none;
    justify-content:center;
    align-items:center;
    padding:70px;
    left:0;
    background-color:#111;
    overflow:hidden
}
section.active{
    opacity:1;
    position:absolute;
    height:100%;
    width:calc(100% - 70px);
    z-index:10;
    display:inline-block
}
.section.back-section{
    z-index:1
}
.common_bg{
    background-color:#212121;
    border-radius:10px;
    display:flex;
    width:100%;
    height:100%;
    overflow:hidden;
    overflow-y:scroll;
    padding:30px 30px
}
.homecolor-box{
    background-color:#67DA4C;
    position:fixed;
    height:155%;
    width:136%;
    transform:rotate(-57deg);
    left:-91%;
    top:-48%;
    z-index:-1;
    box-shadow:0 0 7px rgb(255 255 255 / 95%)
}
.home-profile{
    border-radius:10px
}
.home-profile img{
    border-radius:10px;
    display:block;
    border:none;
    box-shadow:0 0 25px rgb(0 0 0 / 85%)
}
.home-profile.particles-js{
    position:relative;
    overflow:hidden;
    box-shadow:0 0 25px rgb(0 0 0 / 85%);
    margin:0 auto;
    height:100%;
    width:100%
}
.home-profile.particles-js img{
    width:100%
}
.glitch-img-warp{
    position:relative;
    box-shadow:0 0 25px rgb(0 0 0 / 85%);
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:10px
}
.card{
    box-shadow:0 0 25px rgb(0 0 0 / 85%)
}
.glitch-img{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image:url(../images/profile/glitch.jpg);
    background-size:cover;
    -webkit-background-size:cover;
    background-position:center;
    z-index:1!important;
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 25px rgb(0 0 0 / 85%)
}
.water-js{
    width:100%;
    height:100%;
    position:relative;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-image:url(../images/profile/water.jpg)
}
.water-js canvas{
    border-radius:10px
}
.home-profile.water-js{
    width:100%;
    height:100%
}
.home-profile.water-js img{
    user-select:none
}
.home-content{
    padding:25px 0;
    text-align:left
}
.animated-text{
    position:relative;
    height:40px;
    overflow:hidden;
    text-align:center;
    margin:25px 0
}
.animated-text h3{
    color:#67DA4C;
    font-size:30px;
    font-weight:600;
    line-height:50px;
    letter-spacing:1px;
    text-transform:uppercase
}
.animated-text h3:nth-child(1){
    animation:text-move 5s infinite
}
.lorem-text{
    text-align:center
}
.fixed-block .social-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:16px
}
.fixed-block .social-icons a{
    margin-right:10px;
    margin-left:10px;
    font-size:20px;
    color:#fff;
    text-shadow:0 0 25px rgb(0 0 0 / 85%)
}
.fixed-block .social-icons a:hover{
    color:#67DA4C;
    transform:rotate(20deg)
}
.section-title{
    padding:30px 0 30px 0
}
.section-title .common-title span{
    color:#67DA4C
}
.personal-info{
    margin-top:35px
}
.single-info{
    margin-top:10px
}
.profile-photo img{
    border-radius:10px;
    box-shadow:0 0 30px rgb(0 0 0);
    display:flex
}
.about-content .personal-title{
    text-align:left;
    text-transform:capitalize;
    letter-spacing:1px
}
.personal-info .info{
    margin-bottom:10px
}
.about-content .personal-title span{
    color:#67DA4C
}
.about-content .personal-infotitle{
    margin-bottom:16px;
    letter-spacing:1px;
    text-transform:capitalize;
    margin-top:16px
}
.about-content .personal-infotitle span{
    color:#67DA4C
}
.about-you{
    list-style:none;
    color:#fff;
    margin-bottom:16px;
    padding:0;
    display:grid
}
.about-content .about-you li:not(:last-child){
    padding-bottom:20px
}
.about-content .about-you .title{
    color:#888;
    text-transform:capitalize
}
.about-content .about-you .value a{
    color:#67DA4C
}
.about-content .about-you .value a:hover{
    color:#888
}
.about-content .About-btn{
    display:block
}
.about-content .About-btn .clickbtn{
    align-items:center;
    font-size:14px
}
.about-content .social-icons{
    display:flex;
    align-items:center;
    margin-bottom:0;
    list-style:none;
    font-size:30px;
    letter-spacing:10px;
    margin-top:10px
}
.about-content .social-icons::before{
    background-color:rgba(255,255,255,.25);
    content:'';
    height:2px;
    margin-right:10px;
    width:60px
}
.about-content .social-icons li:not(:last-child){
    margin-right:10px;
    color:#fff
}
.about-content .social-icons li a{
    color:#fff;
     font-size: 20px;
}
.about-content .social-icons li a:hover{
    color:#67DA4C
}
.single-section{
    padding:0 0 30px 0
}
.about-subtitle{
    font-size:30px;
    margin-bottom:30px;
    margin-top:30px;
    text-align:center
}
.about-subtitle span{
    color:#67DA4C
}
.map iframe{
    width:100%;
    height:450px
}
.resume-section .resume-item{
    background-color:#232323;
    border-left:2px solid #67DA4C;
    padding:32px 48px;
    position:relative;
    border-radius:10px;
    margin-bottom:30px;
    box-shadow:0 0 10px rgb(0 0 0 / 85%)
}
.resume-section .resume-item .item-arrow{
    left:0;
    margin-top:2px;
    position:absolute
}
.resume-section .resume-item .item-arrow::before{
    content:"";
    display:block;
    position:absolute;
    height:16px;
    width:16px;
    left:0;
    background-color:#67DA4C
}
.resume-section .resume-item .item-arrow::after{
    content:"";
    display:block;
    position:absolute;
    border:8px solid transparent;
    left:16px;
    border-left-color:#67DA4C
}
.resume-section .resume-item .item-title{
    margin-bottom:7px;
    color:#67DA4C
}
.resume-section .resume-item .item-details{
    display:inline-block;
    margin-bottom:10px;
    color:#fff
}
.skill-bars{
    width:700px;
    background:#232323;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border-radius:10px;
    max-width:100%;
    padding:15px;
    margin:0 auto 30px
}
.skill-bars .bar:not(:first-child){
    margin:20px 0
}
.skill-bars .bar .info{
    margin-bottom:10px
}
.skill-bars .bar .info span{
    font-weight:500;
    font-size:16px;
    opacity:0;
    animation:showText 3s 1s linear forwards;
    color:#fff
}
.skill-bars .bar .progress-line{
    height:5px;
    width:100%;
    background:#f0f0f0;
    position:relative;
    transform:scaleX(0);
    transform-origin:left;
    border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.05),0 0 0 rgb(0 0 0 / 85%);
    animation:animate 3s cubic-bezier(1,0,.5,1) forwards
}
.bar .progress-line span{
    height:100%;
    position:absolute;
    border-radius:10px;
    transform:scaleX(0);
    transform-origin:left;
    background:#67DA4C;
    animation:animate 4s 1s cubic-bezier(1,0,.5,1) forwards
}
.bar .progress-line.Photoshop span{
    width:70%
}
.bar .progress-line.Illustrator span{
    width:90%
}
.bar .progress-line.Figma span{
    width:75%
}
.bar .progress-line.Indesign span{
    width:80%
}
.bar .progress-line.Sketch span{
    width:70%
}
.bar .progress-line.html span{
    width:80%
}
.bar .progress-line.css span{
    width:60%
}
.bar .progress-line.jquery span{
    width:85%
}
.bar .progress-line.python span{
    width:50%
}
.bar .progress-line.mysql span{
    width:70%
}
.progress-line span::before{
    position:absolute;
    content:"";
    top:-10px;
    right:0;
    height:0;
    width:0;
    border:7px solid transparent;
    border-bottom-width:0;
    border-right-width:0;
    border-top-color:#fff;
    opacity:0;
    animation:showText2 1s 3s linear forwards
}
.progress-line span::after{
    position:absolute;
    top:-28px;
    right:0;
    font-weight:500;
    background:#fdfdfd;
    color:#67DA4C;
    padding:1px 8px;
    font-size:12px;
    border-radius:3px;
    opacity:0;
    animation:showText2 1s 3s linear forwards
}
.progress-line.Photoshop span::after{
    content:"70%"
}
.progress-line.Illustrator span::after{
    content:"90%"
}
.progress-line.Figma span::after{
    content:"75%"
}
.progress-line.Indesign span::after{
    content:"80%"
}
.progress-line.Sketch span::after{
    content:"70%"
}
.progress-line.html span::after{
    content:"80%"
}
.progress-line.css span::after{
    content:"60%"
}
.progress-line.jquery span::after{
    content:"85%"
}
.progress-line.python span::after{
    content:"50%"
}
.progress-line.mysql span::after{
    content:"70%"
}
.services-section .service-text{
    margin-bottom:30px
}
.services-box .service-item{
    padding:20px 15px;
    background-color:#232323;
    margin-bottom:30px;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border-radius:10px;
    cursor:pointer;
    transition:.5s all ease-in-out
}
.services-box .service-item:hover{
    background:linear-gradient(to right bottom,#000,#1d1d1d);
    transition:.4s all ease-in-out
}
.services-box .service-item i{
    font-size:45px;
    color:#fff;
    width:90px;
    height:90px;
    line-height:90px;
    animation:icon-rotate 10s ease-in-out infinite;
    transition:all .5s ease-in-out
}
@keyframes icon-rotate{
    0%{
        transform:rotateY(0)
    }
    100%{
        transform:rotateY(360deg)
    }
}
.service-line{
    color:#67DA4C;
    margin-top:10px;
    text-transform:capitalize;
    position:relative
}
.service-line::after{
    content:"";
    position:absolute;
    height:2px;
    width:0;
    bottom:-8px;
    left:0;
    background-color:#67DA4C;
    transition:all .5s ease-in-out
}
.service-content .services-box .service-item:hover .service-line:after{
    right:auto;
    width:100%
}
#testimonial .item{
    padding:45px 0
}
.testimonial-item{
    flex-direction:column;
    padding:20px;
    position:relative;
    border-radius:10px;
    justify-content:center;
    text-align:center;
    display:flex;
    align-items:center;
    border:1px solid #67DA4C;
    box-shadow:0 0 10px rgb(0 0 0 / 85%)
}
.testimonial-item .testimonial-img{
    max-width:110px;
    display:flex;
    justify-content:center;
    margin-bottom:10px;
    border-radius:10px;
    box-shadow:0 0 10px rgb(0 0 0 / 85%)
}
.testimonial-item .quote{
    position:absolute;
    z-index:1;
    color:#67DA4C;
    font-size:50px;
    top:-48px;
    left:30px
}
.testimonial-item p{
    margin:0;
    text-align:center
}
.testimonial-item .rating{
    unicode-bidi:bidi-override;
    color:#67DA4C;
    position:absolute;
    font-size:4px;
    bottom:10px;
    right:10px
}
.owl-dots{
    justify-content:center;
    text-align:center;
    transform:translateY(-100%);
    display:flex
}
.owl-dot{
    display:block;
    justify-content:center;
    text-align:center;
    color:#67DA4C
}
.owl-dot span{
    border:3px solid #67DA4C;
    margin:5px;
    width:15px;
    height:15px;
    border-radius:50%;
    display:inline-block;
    background-color:transparent;
    transition:all .5s ease-in-out
}
.owl-dot.active span{
    background-color:#67DA4C;
    border-color:#67DA4C
}
.funfacts-section .funfacts-box{
    margin-bottom:30px;
    padding:20px;
    border-radius:10px;
    border:1px solid #67DA4C;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    width:100%
}
.funfacts-box h3{
    position:relative;
    display:inline-block;
    color:#67DA4C;
    font-size:50px;
    font-weight:700;
    margin:0
}
.funfacts-section .funfacts-box h3::after{
    content:'+';
    position:absolute;
    right:-24px;
    font-size:33px;
    font-weight:300;
    top:2px;
    color:#67DA4C
}
.funfacts-section .fun-text{
    position:relative;
    margin:0;
    font-size:18px;
    text-transform:capitalize
}
.portfolio-menu{
    text-align:center
}
.portfolio-menu button{
    margin-bottom:10px
}
.portfolio-menu .controls{
    margin-bottom:10px
}
li{
    display:inline-block
}
.mixitup-control-active{
    box-shadow:0 0 25px rgb(0 0 0 / 85%);
    transform:rotate(10deg);
    background-color:transparent!important;
    color:#fff;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
.mix{
    margin:0 0 20px;
    position:relative;
    text-align:center;
    overflow:hidden;
    border-radius:10px
}
.mix:after,.mix:before{
    content:'';
    background:linear-gradient(to right bottom,#000,#1d1d1d);
    height:0;
    opacity:.1;
    position:absolute;
    right:12px;
    left:12px;
    bottom:0;
    z-index:1;
    transition:all .4s ease-in-out;
    border-radius:10px
}
.mix:after{
    top:0;
    bottom:auto
}
.mix:hover:after,.mix:hover:before{
    height:100%;
    opacity:.5
}
.mix:hover img{
    filter:hue-rotate(50deg)
}
.mix .info{
    width:100%;
    padding:0 20px;
    opacity:0;
    transform:translateX(-50%) translateY(-50%);
    position:absolute;
    top:70%;
    left:50%;
    z-index:2;
    transition:all .5s ease
}
.mix:hover .info{
    opacity:1;
    top:50%
}
.mix .info .title{
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:capitalize;
    margin:0 0 5px;
    color:#fff
}
.mix .info .post{
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:capitalize;
    margin:0 0 11px;
    color:#fff;
    display:inline-block;
    background:#67DA4C;
    padding:8px 20px;
    border-radius:100px;
    margin-top:15px;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
.mix .info .post:hover{
    background-color:#000;
    -webkit-transition:all .5s ease 0s;
    -moz-transition:all .5s ease 0s;
    -ms-transition:all .5s ease 0s;
    -o-transition:all .5s ease 0s;
    transition:all .5s ease 0s
}
ul.container{
    list-style-type:none;
    margin:0
}
.mix img{
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border-radius:10px
}
.fancybox-image,.fancybox-spaceball{
    border-radius:10px
}
.blog-section .single-post{
    position:relative;
    background-color:#232323;
    min-height: 480px;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border:none;
    margin-bottom:70px;
    padding:20px;
    border-radius:4px
}
.single-post:hover .post-content .content-title h5>a{
    color:#67DA4C
}
.blog-section .single-post .post-content{
    padding:10px
}
.blog-section .single-post .post-content .content-date{
    color:#67DA4C;
    margin-top:8px
}
.post-content .content-title{
    margin-bottom:10px;
    margin-top:10px
}
.post-content .content-title h5>a{
    text-transform:capitalize;
    letter-spacing:1px;
    color:#fff
}
.ih-item{
    position:relative;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out
}
.ih-item img{
    width:100%;
    height:100%
}
.ih-item.square{
    position:relative;
    border:1px solid transparent;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border-radius:10px
}
.ih-item.square .info{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
.ih-item.square.effect{
    overflow:hidden
}
.ih-item.square.effect .img{
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1)
}
.ih-item.square.effect a:hover .img{
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2)
}
#contact .contact-section address,#contact .contact-section ul{
    margin:0
}
.contact-section .content-title{
    margin-bottom:22px;
    text-transform:capitalize
}
.contact-section .contact-form .form-group{
    margin-bottom:25px
}
.contact-section .contact-form .form-group .form-control{
    background-color:#212121;
    border:none;
    border-bottom:1px solid #1d1d1d;
    border-radius:0;
    font-size:15px;
    padding:9px 14px;
    box-shadow:0 0 10px rgb(0 0 0 / 85%);
    border-radius:5px
}
.contact-section .contact-form .form-submit .clickbtn{
    margin-left:0
}
.form-submit{
    display:flex;
    justify-content:center
}
.contact-section .contact-form .form-group .form-control:-webkit-autofill,.contact-section .contact-form .form-group .form-control:-webkit-autofill:active,.contact-section .contact-form .form-group .form-control:-webkit-autofill:focus,.contact-section .contact-form .form-group .form-control:-webkit-autofill:hover{
    -webkit-box-shadow:0 0 10px rgb(0 0 0 / 85%);
    -webkit-text-fill-color:#777!important;
    -webkit-transition:background-color 5000s ease-in-out 0s;
    transition:background-color 5000s ease-in-out 0s
}
.contact-section .contact-form .form-group .form-control::-webkit-input-placeholder{
    color:#777
}
.contact-section .contact-form .form-group .form-control::-moz-placeholder{
    color:#777
}
.contact-section .contact-form .form-group .form-control:-ms-input-placeholder{
    color:#777
}
.contact-section .contact-form .form-group .form-control::-ms-input-placeholder{
    color:#777
}
.contact-section .contact-form .form-group .form-control,.contact-section .contact-form .form-group .form-control::placeholder{
    color:#777
}
.contact-section .contact-form .form-group .form-control:focus{
    box-shadow:0 0 10px rgb(0 0 0 / 85%)
}
.contact-section .contact-form .form-group.form-message -message{
    height:auto
}
.contact-section .contact-form .form-submit -submit{
    padding:10px 15px
}
.contact-section .contact-form .form-submit #contact-submit.wait{
    background-color:#777;
    border-color:#777
}
.contact-section .contact-form .form-submit #contact-submit.success{
    background-color:#28a745;
    border-color:#28a745
}
.contact-section .contact-form .form-submit #contact-submit.error{
    background-color:#dc3545;
    border-color:#dc3545
}
.contact-section .contact-info{
    padding-left:15px
}
.contact-section .contact-info .info-description{
    margin-bottom:15px
}
.contact-section .contact-info .list-info>li:first-child .info-icon{
    margin-bottom:13px
}
.contact-section .contact-info .list-info>li:first-child .info-details{
    padding-top:0
}
.contact-section .contact-info .list-info>li:last-child .info-icon{
    margin-top:13px
}
.contact-section .contact-info .list-info>li:last-child .info-details{
    padding-bottom:0
}
.contact-section .contact-info .list-info .info-icon{
    font-size:30px;
    margin-right:50px;
    position:relative
}
.contact-section .contact-info .list-info .info-icon i{
    -webkit-transform:translate(0,-50%);
    left:0;
    line-height:100%;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    color:#67DA4C
}
.contact-section .contact-info .list-info .info-details{
    border-left:rgba(255,255,255,.25);
    padding:12px 0 12px 12px
}
.contact-section .contact-info .list-info .info-details .info-type{
    font-size:15px;
    font-weight:600;
    margin-bottom:0
}
.contact-section .contact-info .list-info .info-details .info-value{
    color:#67DA4C
}
.contact-section .contact-info .list-info .info-details .info-value a{
    color:#67DA4C
}
.contact-section .contact-info .list-info .info-details .info-value a:focus,.contact-section .contact-info .list-info .info-details .info-value a:hover{
    color:#67DA4C
}
.contact-section .social-icons::before{
    background-color:rgba(255,255,255,.25);
    content:'';
    height:2px;
    margin-right:23px;
    width:60px
}
.map{
    margin-bottom:-35px
}
.footer{
    text-align:center;
    align-items:center;
    font-size:14px;
    padding:4px;
    color:#888;
    border:none;
    margin-bottom:40px!important;
    margin-top:65px
}
.footer i{
    color:#fff;
    position:relative
}
.blog-content{
    padding:0 305px;
    display:block
}
.blog-content .blog-header{
    display:flex;
    justify-content:center
}
.blog-header{
    margin-bottom:15px
}
.blog-content .blog-header span{
    color:#888;
    margin-right:10px
}
.blog-content .blog-header span i{
    color:#67DA4C;
    margin-right:8px;
    font-size:14px
}
.blog-content img{
    border-radius:10px;
    box-shadow:0 0 25px rgb(0 0 0 / 85%)
}
.blog-content .date{
    margin-bottom:15px;
    margin-top:15px;
    color:#888;
    display:block
}
.blog-content .blog-body .title{
    color:#67DA4C;
    text-transform:capitalize;
    margin-top:10px;
    letter-spacing:1px
}
.blog-content .blog-body h4{
    color:#67DA4C
}
.blog-content .content-title{
    margin-top:30px;
    color:#67DA4C
}
.blog-content .contact-section .social-icons::before{
    display:none
}
.content-description p{
    margin:0
}
@-webkit-keyframes heading-move{
    0%{
        transform:translateX(-1px)
    }
    50%{
        transform:translateX(89px)
    }
    100%{
        transform:translateX(-1px)
    }
}
@keyframes heading-move{
    0%{
        transform:translateX(-1px)
    }
    50%{
        transform:translateX(89px)
    }
    100%{
        transform:translateX(-1px)
    }
}
@keyframes text-move{
    0%{
        margin-top:0
    }
    25%{
        margin-top:-70px
    }
    50%{
        margin-top:-140px
    }
    100%{
        margin-top:0
    }
}
@keyframes showText{
    100%{
        opacity:1
    }
}
@keyframes animate{
    100%{
        transform:scaleX(1)
    }
}
@keyframes showText2{
    100%{
        opacity:1
    }
}



@media screen and (min-width: 769px) {
    * {
        cursor: none;
          }
  }