button{
position:relative;
overflow:hidden;
}

button::after{
content:"";
position:absolute;
background:rgba(255,255,255,0.4);
border-radius:50%;
transform:scale(0);
width:100px;
height:100px;
top:50%;
left:50%;
opacity:0;
transition:transform 0.5s,opacity 1s;
}

button:active::after{
transform:scale(3);
opacity:1;
transition:0s;
}

.service-card{
perspective:1000px;
}

.service-card-inner{
transition:transform 0.6s;
transform-style:preserve-3d;
}

.service-card:hover .service-card-inner{
transform:rotateY(180deg);
}

.service-front,
.service-back{
backface-visibility:hidden;
position:absolute;
width:100%;
height:100%;
}

.service-back{
transform:rotateY(180deg);
background:#ff5a00;
color:white;
display:flex;
align-items:center;
justify-content:center;
}git branch -M main

/* Service Card Hover */
.service-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

/* Page Load Animation */

body{
animation:fadeIn 0.8s ease;
}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* section animation */

section{
opacity:0;
transform:translateY(40px);
animation:sectionFade 1s ease forwards;
}

@keyframes sectionFade{
to{
opacity:1;
transform:translateY(0);
}
}