body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.header {
    background-color: #2c3e50; /* Dark blue for header */
    color: white;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 600px;
    padding: 20px;
}

.dashboard-btn {
    background-color: #3498db; /* Blue from Dental Map Online */
    color: white;
    border: none;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 1 1 calc(33.333% - 10px);
}

.dashboard-btn:hover {
    background-color: #2980b9; /* Darker blue for hover effect */
}

.footer {
    background-color: #2c3e50; /* Dark blue for footer */
    color: white;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.contact-info {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.contact-info p {
    margin: 5px 0;
}

.contact-info a {
    color: #ffcc00; /* Bright yellow for contrast */
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    color: #ff9900; /* Darker yellow for hover effect */
}

.notification { 
    position: fixed; 
    bottom: 10px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #3498db; 
    /* Blue for notification to match site style */ 
    color: white; 
    padding: 15px 20px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px #000000; 
    /* Drop shadow */ 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 1000; 
} 

.close-btn { 
    background-color: #c0392b; 
    /* Darker red for close button */ 
    color: white; 
    border: none; 
    padding: 15px 25px; 
    cursor: pointer; 
    border-radius: 3px; 
    font-size: 14px; 
    margin-top: 10px; 
} 
    
.close-btn:hover { 
    background-color: #e74c3c; 
    /* Matching red for hover */ 
}

@media (max-width: 768px) {
    .dashboard-btn {
        flex: 1 1 calc(50% - 10px);
    }

    .notification { 
        width: 80%; /* Ensure notification takes up 80% of the width on smaller screens */ 
    }
}

@media (max-width: 480px) {
    .dashboard-btn {
        flex: 1 1 100%;
    }

    .notification { 
        width: 90%; /* Ensure notification takes up 90% of the width on mobile */ 
        transform: translateX(0); /* Adjust translation to 0 */ 
        left: 0;
    }
}