.portfolio-container{
  padding-top: 14vh;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 5rem;
  text-align: center;
 
}

.portfolio-heading {
  font-size: 10vh;
  padding-bottom: 2rem;
  text-shadow: 0 0 5px orange;
}

.portfolio-description {
  font-size: 3vh;
  text-align: justify;
  padding: 0rem;
  letter-spacing: 1px;
  line-height: 40px;
  color: #666666;
}


.portfolio-image{
  width: 80%;
  max-height: 80%;
  object-fit: cover;
  box-shadow: 0 0 10px orange;
}

.portfolio-brands{
  font-size: 1rem;
  text-align: center;
  
}

.portfolio-li{
  font-size: 1.1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-shadow: 0 0 5px orange;

}




.grid{
  display: grid;
  gap: 0rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-auto-rows: 12rem;
  grid-auto-flow: dense row;
  --stagger-delay: 90ms;
  
  
}

@keyframes cardAnim {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #333333;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #FFFFFF;
  font-family: 'Helvetica Neue';
  font-size: 3rem;
  border-radius: 0rem;
  animation: cardAnim 900ms ease-out;
  animation-fill-mode: backwards;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s;
}
.card:hover{
  transform: scale(1.03);
}

.card:nth-child(1){
  animation-delay: calc(1 * var(--stagger-delay));
}

.card:nth-child(2){
  animation-delay: calc(12 * var(--stagger-delay));
}

.card:nth-child(3){
  animation-delay: calc(5 * var(--stagger-delay));
}

.card:nth-child(4){
  animation-delay: calc(4 * var(--stagger-delay));
}

.card:nth-child(5){
  animation-delay: calc(3 * var(--stagger-delay));
}
.card:nth-child(6){
  animation-delay: calc(6 * var(--stagger-delay));
}
card:nth-child(7){
  animation-delay: calc(7 * var(--stagger-delay));
}
.card:nth-child(8){
  animation-delay: calc(8 * var(--stagger-delay));
}
.card:nth-child(9){
  animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(10){
  animation-delay: calc(10 * var(--stagger-delay));
}
.card:nth-child(11){
  animation-delay: calc(11 * var(--stagger-delay));
}
.card:nth-child(12){
  animation-delay: calc(2 * var(--stagger-delay));
}

.tall {
  background-color: #999999;
}

.wide {
  background-color: #666666;
}

@media screen and (min-width: 600px) {
  
  .tall {
  grid-row: span 2 / auto;
}

  .wide {
  grid-column: span 2 / auto;
}
}


/* 
body {
  margin: 0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 6vw;
  color: white;
  
} */

/* for services - mobile */
@media screen and (max-width: 767px) {
  .portfolio-content{
    margin-top: 2rem; 
    background-color: orange;
    font-size: 3rem;
    letter-spacing: 0.5rem;
    color: #f1f1f1;
    max-width: 100%;
    overflow: hidden;
    max-height: 35rem ;
    z-index: -9999;
    margin-bottom: 10rem;

  }
  .portfolio-content-para {
    /* width: 50%; */
    padding-left: 5%;
    padding-top: 10rem;
    position: absolute;
    /* top: 0;
    left: 25%; */
    font-size: 1rem;
    color: #f1f1f1;
  }

  .portfolio-content-list {
    position: relative;
    /* width: 30%; */
    padding-top: 18%;
    top: 0;
    /* left: 50%; */
    font-size: 1.2rem;
    padding-left: 35%;
    animation-name: scroll;
    animation-duration: 15s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .portfolio-content-item {
      margin-bottom: 1rem;
  }

  @keyframes scroll {
    0% {
      transform: translate3d(0, 0, 0);
    }

    25% {
      transform: translate3d(0, -25%, 0);
    }

    50% {
      transform: translate3d(0, -50%, 0);
    }

    75% {
      transform: translate3d(0, -25%, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }
}




/* for services - tablet */
@media screen and (min-width: 768px){
  .portfolio-content{
    margin-top: 2rem; 
    background-color: orange;
    font-size: 3rem;
    letter-spacing: 0.5rem;
    color: #f1f1f1;
    max-width: 100%;
    overflow: hidden;
    max-height: 35rem ;
    z-index: -9999;
    margin-bottom: 10rem;

  }
  .portfolio-content-para {
    /* width: 50%; */
    padding-left: 20%;
    padding-top: 10rem;
    position: absolute;
    /* top: 0;
    left: 25%; */
    font-size: 5rem;
    color: #f1f1f1;
  }

  .portfolio-content-list {
    position: relative;
    /* width: 30%; */
    padding-top: 18%;
    top: 0;
    /* left: 50%; */
    font-size: 2.4rem;
    padding-left: 50%;
    animation-name: scroll;
    animation-duration: 15s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .portfolio-content-item {
      margin-bottom: 1rem;
  }

  @keyframes scroll {
    0% {
      transform: translate3d(0, 0, 0);
    }

    25% {
      transform: translate3d(0, -25%, 0);
    }

    50% {
      transform: translate3d(0, -50%, 0);
    }

    75% {
      transform: translate3d(0, -25%, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }



}