#services {
  position: relative;
}


#services .cards {
display: flex;
flex-direction: column;
align-items: center;
}

#services .cards .card2  {
display: flex;
flex-direction: column;
align-items: start;
text-align: start;
position: relative;
background: #000;
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 10rem;
border-top: 1px solid #48484880;
padding-block: 2rem;
height: 100%;
padding-left: 20px;
padding-right: 20px;
}

#services .cards .card2  span {
color: #252525;
font-size: 5.625rem;
opacity: .9;
font-weight: 300;
mask-image: linear-gradient(180deg, #A68C4C, transparent 100%);
}

#services .cards .card2 h3 {
 font-size: 2rem;
 background: linear-gradient(45deg, rgb(255, 255, 255) 0%, #151515 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 margin-top: -2.8125rem;
}

#services .cards .card2 p {
font-size: 1.125rem;
font-weight: 400;
margin-top: .5rem;
}

#services .cards .card2  a {
text-decoration: none;
}

#services .cards .card2 a button {
  border: none;
  margin-top: 1.875rem;
padding: 0.625rem 1.25rem;
font-size: 1rem;
border-radius: 1rem;
  color: #000;
  background: linear-gradient(to right, #dcdcdc 30%, #5a5a5a) !important;

  transition: all 300ms ease-in-out;
}

#services .cards .card2 a button:hover {
    filter: brightness(1.2);
    cursor: pointer;
    box-shadow:  20px 20px 60px #14141447,
             -20px -20px 60px #1f1f1f53;
}

#services .cards .card2  a button {
border: none;
margin-top: 1.875rem;
padding: 0.625rem 1.25rem;
font-size: 1rem;
border-radius: 1rem;
transition: all 300ms ease-in-out;
}

@media (min-width: 1080px) {
section#services header h2 {
     font-size: 4rem;
     margin-bottom: 7rem;
 }

section#services .cards .card2 {
 width: 100%;
   display: grid;
   grid-template-columns: .1fr 2fr 3fr 2fr;
   align-items: center;
   justify-content: flex-end;
   gap: 7rem;
   padding-block: 2rem;
   min-height: initial;

   position: initial;

   overflow-y: hidden;
}

section#services .cards .card2:hover:hover span,
 section#services .cards .card2:hover h3 {
   transform: translateX(20px);
   opacity: 1;
 }

 section#services .cards .card2 span {
   font-size: 6rem;
   opacity: .2;
   transition: all 700ms ease-in-out;
   color: #fff;
   mask-image: initial;
 }

 section#services .cards .card2 h3 {
   transition: all 700ms ease-in-out;
   margin-top: initial;
   font-size: 3rem;
 }

.card2 p {
 position: relative;
 font-size: 1rem;
 transition: all 0.3s ease-in-out;
}

.card2 p::before {
 content: '';
 position: absolute;
 height: 10rem;
 width: 3px;
 background: linear-gradient(195deg, #D2AE6E 0%, #A68C4C 100%);
 left: -2rem;
 bottom: 100%;
 border-radius: 2rem;
 opacity: 0;
 transition: all 0.7s ease-in-out;
}

.card2:hover p::before {
 bottom: 50%;
 opacity: 1;
}


section#services .cards .card2 span {
   font-size: 4rem;
   opacity: 0.8;
   color: #000;
   transition: all 700ms ease-in-out;
}

section#services .cards .card2 h3 {
   font-size: 1.875rem;
   transition: all 700ms ease-in-out;
}

section#services .cards .card2 p {
   font-size: 1rem;
   margin-top: 1rem;
}

section#services .cards .card2 a {
   display: flex;
   justify-content: start;
}

section#services .cards .card2 a button {
        margin-top: 0;
        font-size: 0.9375rem;
        padding: 0.9375rem 1.875rem;
        background: linear-gradient(to right, #ffffff1f 30%, #ffffff14);
        border: 1px solid #ffffff7b;
        color: #fff;
    }
}