/*submenu animation start*/
 .enlarge {
    transform: scale(1.3);
    transform-origin: center;
}

/* Hover Effect */
.zoom-in {
    transform: scale(1.3);
    transition: transform 0.3s ease-in-out;
}

.zoom-out {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

/* Click Effect */
.clicked-zoom-in {
    transform: scale(1);
}

.clicked-zoom-out {
    transform: scale(0.75);
    /* opacity: 0.8;  */
}

/* Hide text initially */
.hidden-text {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.show-text {
    opacity: 1;
    margin-top: 40px; /* Increased margin-top to move text further down */
    position: relative; /* Ensure relative positioning */
}

/* Center the images */
.icon-container {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.vector-img {
    position: absolute;
    width: 130px;
    height: 130px;
}

.biometric-img {
    position: absolute;
    width: 80px;
    height: 80px;
}
.biometric-text {
    text-decoration: none; /* Removes underlines */
    color: inherit; /* Inherits the color from the parent element */
  }
  
  .biometric-text:hover {
    text-decoration: none; /* Removes underlines on hover, if any */
  }
/*submenu animation end*/


   

    .card {
        transition: transform 0.5s ease, filter 0.3s ease;
        filter: none; /* Default full color */
        color: inherit; /* Default text color */
    }
    
    /* Make unselected cards grayscale */
    
    .card.unselectedselect {
        top:0px;
        transform: translateY(0);
        filter: none !important;
    
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: inherit;
    }
    .card:hover .overlay {
        opacity: 1;
    }

      /* Reset zoom for larger screens (desktop) */
      @media (min-width: 1000px) { /* Adjust breakpoint if needed */
        meta[name="viewport"] {
            content: "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes";
        }

        body {
            transform: none;  /* Remove any scaling applied to the body */
            transform-origin: initial; /* Reset transform origin */
        }
    }
    /* Extra Small (XS) - Phones */
@media (max-width: 480px) {
    .card{
        background-color: #0E61C4;
        color:#fff;
    }
    .card.unselected {
        filter: grayscale(100%);
        background-color: #0E61C4;
    }
    .card.selected {
        top:0px;
        filter: none !important; /* Keep selected card full color */
        transform: translateY(0%);
        color: #ffffff !important; /* Ensure selected card text is black */
        background-color: #0E61C4;
    }
    .card.unselectedselect {
        background-color: #0E61C4;
    
    }
    .vector-img {
        width: 60px;
        height: 60px;
    }
    .biometric-img {
            position: absolute;
            width: 40px;
            height: 40px;
        }
    
     .icon-container {
          width: 80px;
            height: 80px;
    }
    .zoom-in {
        transform: scale(1.2);
        transition: transform 0.3s ease-in-out;
    }
    
    .zoom-out {
        transform: scale(1);
        transition: transform 0.3s ease-in-out;
    }
    .show-text {
        margin-top: 10px; /* Increased margin-top to move text further down */
    }
}

/* Small (SM) - Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .card.unselected {
        filter: grayscale(100%);
        background-color: #0E61C4;
    }
    /* Selected card remains in full color */
    .card.selected {
        top:0px;
        filter: none !important; /* Keep selected card full color */
        transform: translateY(0%);
        color: #ffffff !important; /* Ensure selected card text is black */
        background-color: #0E61C4;
    }
     
    
}

/* Medium (MD) - Small Laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    
    .card.unselected {
        filter: grayscale(100%);
        background-color: #0E61C4;
    }
    /* Selected card remains in full color */
    .card.selected {
        top:0px;
        filter: none !important; /* Keep selected card full color */
        transform: translateY(25%);
        color: black !important; /* Ensure selected card text is black */
        background:none;
    }
    
   
}

/* Extra Large (XL) - Large Screens */
@media (min-width: 1201px) {
    .card.unselected {
        filter: grayscale(100%);
        background-color: none;
    }
    /* Selected card remains in full color */
    .card.selected {
        top:0px;
        filter: none !important; /* Keep selected card full color */
        transform: translateY(25%);
        color: black !important; /* Ensure selected card text is black */
    }
    
    
}