.hero-section {
    background: var(--gradient-tech-3)
}
.hero-section::before {
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='atom' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='50' r='3' fill='%23ffffff' fill-opacity='0.2'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(120 50 50)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23atom)'/%3E%3C/svg%3E");
}
.card-img-top{
    height: 200px;
overflow: hidden;
}
.card-img-top img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}
.card-img-top img:hover{
    transform: scale(1.3);
}
.category-card:hover{
    transition: transform 0.3s ease;
 
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}