/* Base styles for desktop */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* ...existing code... */
}

header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    /* ...existing code... */
}

main {
    padding: 20px;
    /* ...existing code... */
}

/* Media queries for mobile */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
    }

    main {
        padding: 10px;
    }

    .container {
        width: 100%;
        padding: 10px;
    }

    .responsive-image {
        width: 100%;
        height: auto;
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-menu a {
        padding: 10px;
        width: 100%;
        text-align: center;
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #3B82F6; /* Tailwind blue-500 */
    border-radius: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }