.dashboard-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
}

.floating-icons {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}

.floating-icon {
position: absolute;
font-size: 24px;
color: rgba(0, 0, 0, 0.1);
animation: float 20s linear infinite;
opacity: 0.3;
}

.floating-icon:nth-child(odd) {
animation-duration: 15s;
}

.floating-icon:nth-child(3n) {
animation-duration: 25s;
}

.floating-icon:nth-child(2n) {
animation-duration: 20s;
}

.floating-icon:nth-child(1) { left: 10%; top: -20px; }
.floating-icon:nth-child(2) { left: 20%; top: -40px; animation-delay: 2s; }
.floating-icon:nth-child(3) { left: 30%; top: -60px; animation-delay: 4s; }
.floating-icon:nth-child(4) { left: 40%; top: -20px; animation-delay: 6s; }
.floating-icon:nth-child(5) { left: 50%; top: -40px; animation-delay: 8s; }
.floating-icon:nth-child(6) { left: 60%; top: -60px; animation-delay: 10s; }
.floating-icon:nth-child(7) { left: 70%; top: -20px; animation-delay: 12s; }
.floating-icon:nth-child(8) { left: 80%; top: -40px; animation-delay: 14s; }
.floating-icon:nth-child(9) { left: 90%; top: -60px; animation-delay: 16s; }
.floating-icon:nth-child(10) { left: 15%; top: -20px; animation-delay: 18s; }
.floating-icon:nth-child(11) { left: 25%; top: -40px; animation-delay: 20s; }
.floating-icon:nth-child(12) { left: 35%; top: -60px; animation-delay: 22s; }
.floating-icon:nth-child(13) { left: 45%; top: -20px; animation-delay: 24s; }
.floating-icon:nth-child(14) { left: 55%; top: -40px; animation-delay: 26s; }
.floating-icon:nth-child(15) { left: 65%; top: -60px; animation-delay: 28s; }

@keyframes float {
0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
}
10% {
    opacity: 0.3;
}
90% {
    opacity: 0.3;
}
100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
}
}

.dashboard-grid {
flex: 1;
padding: 32px;
margin-left: 300px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
position: relative;
z-index: 1;
}

.card {
height: 300px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
padding: 24px;
text-align: center;
}


.card-icon {
font-size: 48px;
margin-bottom: 16px;
transition: transform 0.3s ease;
}

.card:hover .card-icon {
transform: scale(1.1);
}
.card h2 {
font-size: 28px;
margin-bottom: 20px;
font-weight: 600;
}

.card-description {
font-size: 16px;
line-height: 1.5;
opacity: 0.9;
max-width: 80%;
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.card.blue {
background-color: #4C7BF4;
}

.card.green {
background-color: #2A7B6B;
}

.card.pink {
background-color: #CD6D6D;
}

.card.red {
background-color: #E85D5D;
}