/* -------- CATEGORY ----------*/

.portfolio-category {
    width:100%;
    padding:100px 0px;
    background-color:var(--clr-neutral1);
    display:flex;
    justify-content:center;
    column-gap:20px;
}

.portfolio-category p {
    text-align:center;
    padding-bottom:40px;
    flex-basis:100%;
    text-transform:uppercase;
    font-size:2.2rem;
}

.portfolio-category-box {
    width:35rem;
    height:70rem;
    border-radius:15px;
    background-color:var(--clr-neutral3);
    background-repeat:no-repeat;
    background-size:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.portfolio-category-box:nth-child(1) {
    background-image: url(images/fullres-img/1.webp);
    background-position:center;
}

.portfolio-category-box:nth-child(2) {
    background-image: url(images/fullres-img/2.webp);
    background-position:center;
}

.portfolio-category-box:nth-child(3) {
    background-image: url(images/headers/header_01.webp);
    background-position:center;
}

.portfolio-category-box:nth-child(4) {
    background-image: url(/images/category/blend.webp);
    background-position:center;
}

.dark-overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:#8d8d8d;
    opacity:0.5;
    border-radius:15px;
    transition: all ease-in-out 200ms;
    
    
}

.portfolio-category-box:hover .dark-overlay {
  opacity:0.0;
}



.portfolio-category-box h3 {
    font-size:3.5rem;
    line-height:1;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    z-index:100;
}

.portfolio-category-box:hover h3{
  color:var(--clr-accent3);
  -webkit-text-stroke: 1px var(--clr-primary-text);
  text-shadow:
  3px 3px 0 var(--clr-primary-text),
  -1px -1px 0 var(--clr-primary-text),  
  1px -1px 0 var(--clr-primary-text),
  -1px 1px 0 var(--clr-primary-text),
  1px 1px 0 var(--clr-primary-text);
  transition: all ease-in-out 200ms;
}

.footer-main {
  position:relative;
}

@media only screen and (max-width:600px) {
    .portfolio-category {
        padding:20px 10px;
        row-gap:20px;
        flex-wrap:wrap;
    }
    
    .portfolio-category p {
        padding-bottom:20px;
    }
    
    .portfolio-category-box {
        width:calc(100% - 20px);
        height:16rem;
    }
  }
  
  @media only screen and (min-width:601px) {
    .wrapper-main {
      width:100%;
    }
  }
  
  @media only screen and (min-width:768px) {
    .wrapper-main {
      width:80%;
    }
  }
  
  @media only screen and (min-width:992px) {
    .wrapper-main {
      width:80%;
    }
  }
  
  @media only screen and (min-width:1000px) {
    .wrapper-main {
      width:80%;
    }
  }