/* ENTIRE PROJECTS CSS */


.projects {
  padding-block: 90px;
}


.projects-content {
  position: relative;
}




/* PROJECTS IMAGE CONTAINERS CSS */

.first-projects,
.second-projects {
  position: relative;
  margin: auto;
  overflow-x: scroll;
  overflow-y: hidden;
}

.first-projects {
  transform: rotate(350deg) scaleX(-1) scaleY(-1);
  margin-bottom: 170px;
  height: 320px;
}

.second-projects {
  transform: rotate(10deg);
  height: 310px;
  margin-left: -10px;
}



/* PROJECTS IMAGES CSS*/


.first-projects img,
.second-projects img {
  position: absolute;
  border-radius: 8px;
  width: 240px;
  height: 170px;
  object-fit: cover;
  margin-top: 25px;
  margin-bottom: 20px;
  opacity: 80%;
  border: solid;
  border-color: var(--blush);
  touch-action: pan-y;
  transition: 
    height 0.2s,
    width 0.2s,
    opacity 0.2s;
}

.first-projects img {
  transform: rotate3d(1,1,0.2,40deg) rotateZ(10deg) rotate(180deg);
  top: 18px;
}

.second-projects img {
  transform: rotate3d(1,1,0.2,40deg) rotate3d(0,1,0,130deg)   
    scaleX(-1) rotateZ(-8deg);
  top: 10px;
  margin-left: 5px;
}

.first-projects img:hover,
.second-projects img:hover {
  width: 290px;
  height: 220px;
  z-index: 3000 !important;
  opacity: 100%;
}




/* PROJECTS TEXT 2 COLUMNS CSS*/
.projects-text {
  position: absolute;
  right: 20px;
  top: 350px;
} 
.projects-text p {
  font-size: 2rem;
  display: inline-block;
}
.projects-text .emphasis1 {
  letter-spacing: 3px;
  font-size: 2.6rem;
}
.projects-text .emphasis2 {
  font-size: 2rem;
}
.emphasis3 {
  font-size: 2.2rem;
}
.column1 {
  margin-right: 40px;
}

.projects-btn {
  position: inherit;
  left: 100px;
}


@media (max-width: 759px) {
  .hero {
    padding-block: 10px;
  }
}


@media (max-width: 950px) {
  .projects-text p {
    font-size: 1.4rem;
  }
  .projects-text .emphasis1 {
    font-size: 1.6rem;
  }
  .projects-text .emphasis2 {
    font-size: 1.3rem;
  }

  .emphasis3 {
    font-size: 1.6rem;
  }

  .projects-btn a {
    text-align: center;
  }
}