html {
    scroll-behavior: smooth;
}
.design{
font-family: 'KoHo', sans-serif;
font-family: 'Libre Baskerville', serif;
}
* {
    padding: 0%;
    margin: 0;
    box-sizing: border-box;
}

/* NAVBAR */
.navi {
    font-family: 'KoHo', sans-serif;
    font-family: 'Libre Baskerville', serif;
    font-size: 30px;

    font-weight: bold;
}


.navigate {
             box-shadow: 0 0 15px 5px rgb(0 0 0 / 30%);
            

}

.nav-link {
    color: #fffcfc !important;
    font-size: 20px;
}

.navbar-toggler {
    border-color: #feffff !important;
    color: #ffffff !important;
}

.navbar-nav {
    font-weight: bold;
}



#contacts {
    background-color: #3C2317;
}
.nav-color{
    background-color:  #3C2317;
}


/* ANIMATION */ 

.buton {
position: relative;
padding: 10px 30px;
margin: 0px 15px;
font-size:20px;
color: #FFF8EA;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.5s;
padding: 10px;
font-family: 'Varela Round', sans-serif;

}

#neon:before {
content:'';
position: absolute;
top: 0;
left: 0;
width:60px;
height: 30px;
border-top:2px solid #FFF8EA;
border-left: 2px solid #FFF8EA;
transition: 0.5s;

}
#neon:hover::before{
width: 100%;
height: 100%;
border-top:2px solid #FFF8EA;
border-left:2px solid #FFF8EA;

}
#neon:hover{
background: #594545;
color: black;
box-shadow: 0 0 40px #FFF8EA;
transition-delay: 0.5%;
font-weight: 300;
color: #FFF8EA;
}
#neon:after{
content:'';
position: absolute;
bottom: 0;
right: 0;
width:60px;
height: 30px;
border-bottom:2px solid #FFF8EA;
border-right: 2px solid #FFF8EA;
transition: 0.5s;
}
#neon:hover::after{
width: 100%;
height: 100%;
border-bottom:2px solid #FFF8EA;
border-right:2px solid #FFF8EA;
}

.lightbrown {
color: #FFF8EA !important;
}
.callme{
border-top: 7px double   #FFF8EA ;

}
.foottheme{
    background-color: #3C2317;
}

@keyframes text {
0%{
color: white;
margin-bottom: -10px;
/* margin-top: -10px; */
}
30%{
letter-spacing: 5px;
margin-bottom:-10px;
}
/* 85%{
letter-spacing:8px;
margin-bottom:-10px;
} */

}

.new-theme{
    color: #3C2317;
}

.design{
animation: text 2s 1 ;
color: #594545;
font: bolder;
}

/* MY WORK HOVER */
.reachme-bttn {
position: relative;
padding: 10px 30px;
margin: 0px 15px;
font-size:20px;
color: #3C2317;
top: 15px;
right: 15px;
text-decoration: none;
 letter-spacing: 2px;
 transition: 0.5s;
 padding: 10px;
 font-family: 'Varela Round', sans-serif;

}

#work:before {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      border-top:2px solid #594545;
      transition: 0.5s;
     
 }

 #work:hover{
     background: #9E7676;
     color: #FFF8EA;
     box-shadow: 4px 4px  60px #815B5B;
     transition-delay: 0.5%;
 }
 #work:after{
      content:'';
      position: absolute;
      bottom: 0;
      right: 0;
      width:100%;
      border-bottom:2px solid #594545; 
      transition: 0.5s;
 }

.serv-bg{
    background-color: #FFF8EA;
  
}

.testimonials{
    border-top: 7px double   #FFF8EA ;
    background-color:#fdcccc;
    font-family: 'Josefin Sans', sans-serif;
    background: url(images/foot.jpg) no-repeat center center  ;
    /* background-attachment: fixed !important; */
    
    
}
#servi {
    background: url(images/galaxy.jpg) no-repeat center center ;
    /* background-attachment: fixed; */
}
.font{
    font-family: 'Josefin Sans', sans-serif;
    color: #000000 !important;
}
.fonts{
    font-family: 'Josefin Sans', sans-serif;
    color: #FFF8EA !important;
}
.nav-font{
    font-family: 'Anton', sans-serif;
font-family: 'Josefin Sans', sans-serif;
}
.intro{
    font-family: 'Josefin Sans', sans-serif;
} 
/* SCROLL BAR */
::-webkit-scrollbar 
{
     width: 12px;
}
::-webkit-scrollbar-thumb
{
  
    background:linear-gradient(transparent,#3C2317);
    border-radius:6px;

}
::-webkit-scrollbar-thumb:hover
{
    background:linear-gradient(transparent,#594545);
}
/* PROGRESS BAR */
.progress-heading{
    font-size:20px !important;
    font-weight: 500 !important;
}
.progress{
   height: 20px; 
   border-radius: 50px;
  background:#f0f0f0;
}

.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 700;
font-size: 20px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
100%{
opacity: 2;
}
}
.skill-bars .bar .progress-line{
height: 15px;
width: 100%;
background: #9E7676;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
      0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: #3C2317;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span{
width: 95%;
}
.bar .progress-line.css span{
width: 80%;
}
.bar .progress-line.javascript span{
width: 80%;
}
.bar .progress-line.c-lang span{
width: 80%;
}
.bar .progress-line.bootstrap span{
width: 85%;
}
.bar .progress-line.WordPress span{
width: 80%;
}
.bar .progress-line.git-lang span{
    width: 80%;
    }
    .bar .progress-line.figma span{
        width: 80%;
        }
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span::after{
content: "90%";
}
.progress-line.css span::after{
content: "85%";
}
.progress-line.javascript span::after{
content: "80%";
}
.progress-line.c-lang span::after{
content: "80%";
}
.progress-line.bootstrap span::after{
content: "90%";
}
.progress-line.WordPress span::after{
content: "80%";
}
.progress-line.git-lang span::after{
    content: "80%";
    }
    .progress-line.figma span::after{
        content: "85%";
        }
.bord{
border-radius: 30% 70% 52% 48% / 30% 23% 77% 70%  ;
/* border-radius: 100% 0% 53% 47% / 0% 0% 100% 100% ; */
height: 45vh !important;
box-shadow: 4px 4px 27px #594545;
}
.hell{
background-color: #e1d9d9;
border: 2px groove #3C2317;
border-radius: 4px !important;
}

.input-bg{
    background-color: #FFF8EA !important;
}

.float{
    position: fixed;
    width: 80px;
    height: 45px;
    bottom: 40px;
    right: 40px;
    /* padding: 5px; */
    background-color: #594545;
    border-radius: 10px;
    text-align: center;
    font-size: 29px;
    box-shadow: 4px 4px 4px #9E7676;
    z-index: 100;
    text-decoration: none;
    color: #FFF8EA;
}
.float:hover{
    box-shadow: 5px 5px  35px #9E7676;
    color: white;
    font-style: italic;
   
}

.my-float{
	margin-top:11px;
  
}
.nav-button{
   background-color: #FFF8EA !important;
 
}