/* portfolio Overlay */
.portfolio-page{

    background: url("./resources/portfolio-bg.webp");
   background-size: cover;
  background-position: center;
  background-repeat: none;

}




.profile-container-wrapper{
  max-width: 1200px;
  padding: 3rem 1rem;
  margin: 0 auto;
}
.profile {
    padding: 6rem 3rem 3rem 1rem;
    
   
    
}

.profile::after {
    content: "";
    display: block;
    clear: both;
}


.button-group button.active {
  background-color: var(--color-accent-dark);
  color: var(--primary-white-color);
}
.noData{
  padding: 5rem 1rem;

  p{
    text-align: center;
    font-size: clamp(25px, 4vw, 35px);
  }
}
.profile-image {
  background-color: var(--primary-white-color);
    float: left;
 border-radius: 50%;
 border: 1px solid var(--color-navy);
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;
    width: 100px;
    height: auto;
}

.profile-image img {
    border-radius: 50%;
    display: block;
    width: 100%;

}

.profile-user-settings,
.profile-stats,
.profile-bio {
    float: left;
    width: calc(66.666% - 2rem);
}

.profile-user-settings {
    color: var(--color-text);
}

.profile-user-name {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 300;
}

.profile-stats {
    margin-top: 15px;
    color: var(--color-text);
}

.profile-stats li {
    display: inline-block;
    line-height: 1.5;
    margin-right: 4rem;
    cursor: pointer;
}

.profile-stats li:last-of-type {
    margin-right: 0;
}

.profile-bio {
    font-weight: 400;
    line-height: 1.5;
    margin-top: 20px;
    color: var(--color-text);
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
    font-weight: 600;
}
/* Media Query */

@media screen and (max-width: 40rem) {
    .profile {
        display: flex;
        flex-wrap: wrap;
        padding: 4rem 1rem;
    }

    .profile::after {
        display: none;
    }

    .profile-image,
    .profile-user-settings,
    .profile-bio,
    .profile-stats {
        float: none;
        width: auto;
    }

    .profile-image img {
        width: 7.7rem;
    }

    .profile-user-settings {
        flex-basis: calc(100% - 10.7rem);
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .profile-user-name {
        font-size: 2.2rem;
    }

    .profile-edit-btn {
        order: 1;
        padding: 0;
        text-align: center;
        margin-top: 1rem;
    }

    .profile-edit-btn {
        margin-left: 0;
    }

    .profile-bio {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }

    .profile-edit-btn,
    .profile-bio,
    .profile-stats {
        flex-basis: 100%;
    }

    .profile-stats {
        order: 1;
        margin-top: 1.5rem;
    }

    .profile-stats ul {
        display: flex;
        text-align: center;
        padding: 1.2rem 0;
        border-top: 0.1rem solid #dadada;
        border-bottom: 0.1rem solid #dadada;
    }

    .profile-stats li {
        font-size: 1.4rem;
        flex: 1;
        margin: 0;
    }

    .profile-stat-count {
        display: block;
    }
}

/* Spinner Animation */

@keyframes loader {
    to {
        transform: rotate(360deg);
    }
}

/*




/* portfolio container */


.img-grid {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 0;
  grid-gap: .75em;
  padding: .75em;
  width: 100%;
 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5em, 1fr));
  > * {
    display: flex;
    line-height: 0;
    transition: .4s ease;
    a {
      display: flex;
      flex-grow: 1;
      position: relative;
      transition: .4s ease;
      
      &:before {
        content:"";
        background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/instagram.svg);
        background-color: rgba(black, .75);
        background-repeat: no-repeat;
        background-position: center;
        mix-blend-mode: lighten;
        background-size: 90%;
        border-radius: 1.25em;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        height: 90%;
        width: 90%;
        opacity: 0;
        top: 50%;
        left: 50%;
        margin: -45% 0 0 -45%;
        transition: .4s ease;
      }
    }
    img {
      border-radius: 0;
      object-fit: cover;
      transition: .4s ease;
      width: 100%;
    }
    &:hover {
      background-color: transparent;
      border-radius: 1.25em;
      padding: .75em;
      a {
        &:before {
          opacity: 1;
          z-index: 1;
        }
      }
      img {
        border-radius: 1.25em;
        z-index: 0;
      }
    }
  }
 

  @media (min-width: 85em) {
    grid-template-columns:repeat(auto-fit,minmax(17.5em, 1fr));
    grid-auto-flow: column;
  }
}


.grid-item {
  
  @media (min-width: 85em) {
    
    &:nth-child(4) {
      grid-column: 4 / 6;
      grid-row: 1 / 3;
    }
    &:nth-child(6) {
      grid-column: 1 / 3;
      grid-row: 2 / 4;
    }
    &:nth-child(11) {
      grid-column: 5 / 7;
      grid-row: 3 / 5;     
    }
    &:nth-child(13) {
      grid-column: 2 / 4;
      grid-row: 4 / 6;
    }
    &:nth-child(20) {
      grid-column: 1 / 3;
      grid-row: 6 / 8;
    }    
    &:nth-child(21) {
      grid-column: 5 / 7;
      grid-row: 6 / 8;
    }
  }
  
  
}


.portfolio-join-us{
  margin: 5rem 0rem;
}