@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}
.hero-img{
    background-image: url('./assets/banner-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.active {
    background-color: #4f46e5 !important;
    color: white !important;
    border: none !important;
}
.modal-img {
  transform-style: preserve-3d; /* enable 3D transforms */
  perspective: 1000px;          /* give depth */
  cursor: pointer;
}

/* 3D tilt + zoom on hover */
.modal-img:hover {
  transform: scale(1.05) rotateX(5deg) rotateY(5deg);
  transition: transform 0.5s ease;
}

/* Optional: smooth reset when hover ends */
.modal-img {
  transition: transform 0.5s ease;
}