.dashboard-wrapper {
            position: relative;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            width: 92%;
            margin: 0 auto;
            max-width: 400px;
            margin-bottom: 12px;
        }

        @media (min-width: 768px) {
            .dashboard-wrapper { grid-template-columns: repeat(4, 1fr); max-width: 1000px; }
            .center-circle { display: none; }
        }

        .crd {
            background: none; border: 1px solid #999; border-radius: 10px;
            padding: 20px 10px; text-align: center; transition: all 0.3s ease;
            cursor: pointer; display: flex; flex-direction: column;
            align-items: center; justify-content: center; text-decoration: none;
        }
        .crd:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: #a0aec0; }
        .crd i { font-size: 1.8rem; margin-bottom: 10px; color: #000; }
        .crd h2 { font-size: 1.1rem; font-weight: 500; color: #000; }

        /* --- WhatsApp Button (Clickable) --- */
        .center-circle {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 70px; height: 70px;
            background: azure; border: 2px solid #e53e3e;
            border-radius: 50%; display: flex;
            justify-content: center; align-items: center;
            z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            cursor: pointer; border: none; outline: none;
            transition: 0.3s;
        }
        .center-circle:hover { transform: translate(-50%, -50%) scale(1.1); }
        .center-circle i { font-size: 2.2rem; color: #25D366; }

        /* --- Modal (Popup) CSS --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none; /* Default hidden */
            justify-content: center; align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: azure; padding: 30px; border-radius: 15px;
            width: 90%; max-width: 400px; text-align: center;
            position: relative; animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .cls-btn {
            position: absolute; top: 10px; right: 15px;
            font-size: 2rem; cursor: pointer; color: #888;
        }

        .whatsapp-link-btn {
            display: inline-block; margin-top: 15px;
            background-color: green; color: white;
            padding: 10px 50px; border-radius: 10px;
            text-decoration: none; font-weight: 550;
        }


        /* MAIN BUTTON EFFECT */
.crd {
     --hover: cyan;
    }
     .crd:hover {
     animation: btn 0.5s;
     box-shadow: 0 0 4em 4em transparent;
     }

   @keyframes btn {
   0% {
   box-shadow: 0 0 0 0 var(--hover);
   }
     }