/* Main Page Styles */

 /* Function Card Styles */
 .card-function {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: none;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     background: #fff;
     border-radius: 15px;
 }

 .card-function:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .icon-box {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: #f8f9fa;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     font-size: 2.5rem;
     color: #555;
     transition: all 0.3s ease;
 }

 /* Specific colors for function icons */
 .card-function:hover .icon-car {
     background: #e3f2fd;
     color: #0d6efd;
 }

 .card-function:hover .icon-lotto {
     background: #fff3cd;
     color: #ffc107;
 }

 .card-function:hover .icon-hwal {
     background: #d1e7dd;
     color: #198754;
 }

 .card-function:hover .icon-pension {
     background: #e0f2ff;
     color: #0d6efd;
 }

 .card-function .card-title {
     font-weight: 700;
     color: #333;
 }

 /* Tool Card Styles */
 .card-tool {
     transition: all 0.2s ease;
     border: 1px solid #eee;
     background: #fff;
     border-radius: 10px;
 }

 .card-tool:hover {
     border-color: #b3d7ff;
     background: #f1f8ff;
     transform: translateY(-2px);
 }

 .card-tool .card-body {
     padding: 1rem;
 }

 .card-tool i {
     font-size: 1.5rem;
     color: #6c757d;
 }

 .card-tool:hover i {
     color: #0d6efd;
 }

 .card-tool .card-title {
     font-weight: 600;
     color: #495057;
     font-size: 0.95rem;
 }

 /* Section Title */
 .section-title h2 {
     font-size: 1.5rem;
     font-weight: 700;
     color: #333;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .section-title i {
     color: #6a1b9a;
     /* Matches brand color */
 }