@import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap');

:root {
  --color-purple-light: #E5E5E8;
  --color-purple: #333456;
  --color-gray: #ccc;
  --color-gray-medium: #f8f9fa;
  --color-black: #000000;
}
/*-------General Style-------*/


body{ 
    background-color: var(--color-purple-light) !important;
    font-family: 'Belleza', sans-serif;
    font-weight: 400;
    font-size: 20px;
    margin: 0,auto;
    padding:0;
}
.h1,h2,h3,h3,h5,h6{
   color: var(--color-purple)!important;
    padding:20px;
    font-family: 'Belleza', sans-serif;
    font-weight: 400;
    font-size: 20px;
}


/*-------Sections-------*/


/*-------navbar-------*/

.nav{
 margin-bottom: -1px;
  background: none;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.navbar-brand > img{
  width:300px;  
}

.navbar-main .active{
text-decoration: underline wavy var(--color-purple) !important;
 
    
}

.navbar{
    background-color: var(--color-purple-light) !important;
}
.fixed-top{
    margin-right:20px;
}
   





/*-------animationheader-------*/




/*-------hero-------*/

.text-header{
 color: var(--color-purple) !important;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}


.Socialicon > img {
     width:25px;
    
}
.Social-header{
    display:inline-flex !important;
    margin: 0px 0px;
    padding:4px;
} 


.fab{
    background-color:000;
    color:#000 !important;
}

i{
    margin:0;
}




/*-------Progressbar-------*/




.progress-bar{
    background-color: var(--color-black)!important; 
}

.progress{
 height: 20px;
 background:#fff;
 border-radius: 20px;
 
}

.progress .progress-bar{
    border-radius: 20px;
    border: 1px solid #fff;
    animation: animate-positive 2s;
    
}

. progress .progress-value{
    width: 65px;
    height: 25px;
    line-height: 25px;
    background: #fff;
    color:#000;
    Font-size: 25px;
    border-radius: 0 0 15px;
    border: 1px solid #fff;
    border-top: none;
}

@-webkit-keyframes animate-positive{
    0%{
        width: 0;
        
    }
}
@keyframes animate-positive{
    0%{
        width: 0;
    }
}


.skill1{
    color:#1C67F4 !important;
}

.skill2{
    color:#F4A11C !important;
    }


.skill3{
    color:#D21CF4 !important;
    }



section{
    padding-top: 120px;
    padding-bottom: 120px;
}

/*-------herosection-------*/
.hero{
 padding-top: 120px;
    
}

/*-------buttonsstyles-------*/

.btn-black{
    color: white;
    background-color:black;
    padding:5px;
    margin-top:20px;
}


.btn-black:hover{
  background-color: #333456; 
  color:#f8f9fa;  
}

 li {
    list-style: none;
}


/*-------Portfolio Cards-------*/

.card{
background-color: var(--color-purple-light);
border: none;
}


.card-img-top{
padding:25px;

}



/*-------Footer-------*/

footer{
    background-color:  var(--color-black);
    padding: 55px 50px;
}
.footer-links a {
  color: white;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Belleza', sans-serif;
 
}


.Gallery-portfolio{
    margin: 20px;
    padding: 10px;
}

.card-title{
    margin: auto;
}


.contact-sec{

}