.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 0 auto;
max-width: 1200px;
padding: 0 15px;
} .portfolio-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.portfolio-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
} .portfolio-gallery {
width: 100%;
height: 220px;
position: relative;
}
.portfolio-gallery .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
} .portfolio-gallery .swiper-pagination-bullet {
background: #fff;
opacity: 0.8;
}
.portfolio-gallery .swiper-pagination-bullet-active {
background: #06a9e4;
} .portfolio-gallery .swiper-button-prev,
.portfolio-gallery .swiper-button-next {
color: #fff;
background: rgba(0,0,0,0.5);
width: 30px;
height: 30px;
border-radius: 50%;
}
.portfolio-gallery .swiper-button-prev:after,
.portfolio-gallery .swiper-button-next:after {
font-size: 16px;
} .portfolio-card-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
} .portfolio-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 10px 0;
color: #333;
} .portfolio-features {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
}
.portfolio-features li {
padding-left: 20px;
position: relative;
margin-bottom: 8px;
font-size: 14px;
color: #555;
line-height: 1.4;
}
.portfolio-features li::before {
content: "•";
position: absolute;
left: 0;
color: #e31e24;
font-weight: bold;
} .portfolio-price {
text-align: center;
font-size: 18px;
font-weight: 700;
color: #e31e24;
margin: 10px 0 15px 0;
} .complete-kits-btnBox {
text-align: center;
margin: 5px 0 0 0;
}
.complete-kits-btnBox .main-btn {
display: inline-block;
background: #06a9e4;
color: #fff;
border: none;
border-radius: 30px;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
text-decoration: none;
}
.complete-kits-btnBox .main-btn:hover {
background: #0490c4;
} @media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.portfolio-gallery {
height: 200px;
}
}
@media (max-width: 480px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-gallery {
height: 200px;
}
}