/* banner */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
    transition: all ease;
}
  
.hero-text button:hover {
    background-color: #555;
    color: white;
}

.ange_code{
    color:white; 
    letter-spacing: 5px; 
    font-size: 26px;
}

@media(max-width:600px){
    .hero-text {
        text-align: center;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
    }

    .ange_code{
        color:white; 
        letter-spacing: 5px; 
        font-size: 18px;
    }
}

.card-solid{
    box-shadow: 0 0 0 rgba(0,0,0,1), 0 0px 0px rgba(0,0,0,1) !important;
}



/* Experience */

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}


/* Skill */
.card-header-custom{
  background-color: #2b9082;
}

.bg-netcore {
  background-color: #795cbd!important;
}


.bg-angular {
  background-color: #db3d15!important;
}

.bg-nodejs {
  background-color: #15db50!important;
}

.bg-laravel {
  background-color: #ffa774!important;
}


.bg-cshap {
  background-color: #c48acf!important;
}


.bg-java {
  background-color: orange!important;
}

.bg-python {
  background-color: yellow!important;
}
  
.bg-R {
  background-color: #95d1ec!important;
}

.bg-matlab {
  background-color: #632907!important;
}


.bg-php {
  background-color: #6371eb!important;
}


.bg-django {
  background-color: #1d6423!important;
}


.bg-reactjs {
  background-color: #72e7e7!important;
}
  
.bg-postgresql {
  background-color: #88bbe6!important;
}

.bg-mysql {
  background-color: rgb(236, 190, 104)!important;
}


.bg-mongodb {
  background-color: rgb(108, 236, 104)!important;
}


.bg-firebase {
  background-color: rgb(226, 224, 83)!important;
}


.bg-flutter {
background-color: cyan!important;
}


@media(max-width: 600px){
  .my-font-size{
    font-size: x-small;
  }
}


/* Project */

.filter-list {
  text-align: center;
  padding: 2rem 0;
  text-transform: uppercase;
  width: 100%;
}

.filter-list h3{
  display: block;
}
.filter-list .btn {
  cursor: pointer;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  border-radius: 0;
  border-radius: 55px;
}
.filter-list .btn.active {
  background: #2e7ab5;
  color: #fff;
}


.product{
  transition: 0.5s;
  margin-bottom: 2em;
}
.product:hover {
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  z-index: 9;
}
.product img{
  width: 100%;
  height: 400px;
}
.product .info{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.5em 1em;
  margin: 0 0 0.5em 0;
  border-bottom: 2px solid #2d7bb5;
  background-color: #fff;
}
.product .info .name{
  flex: 2 0 0;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.4em;
  color: #2d7bb5;
}
.product .info .price{
  font-size: 1.5em;
  font-weight: 600;
  color: #75b546;
}
.product .info .price .original-price{
  color: #f54336;
  text-decoration: line-through;
  font-size: 0.7em;
}
.product .links{
  display: flex;
  flex-direction: row;
  padding: 0.5em 1em;
  background-color: #fff;
}
.product .links .more{
  width: 150px;
  padding: 0.5em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background-color: #2e7ab5;
}
.product .links .more:hover{
  text-decoration: none;
  opacity: .9;
}
.product .links .add-to{
  margin-left: auto;
  padding: 0.5em;
  color: #fff;
  font-weight: 600;
  background-color: #75b545;
  text-transform: uppercase;
}
.product .links .add-to:hover{
  text-decoration: none;
  opacity: .9;
}