/* Improved education timeline CSS for perfect mobile alignment */
@media (max-width: 767px) {
    /* Timeline container adjustments */
    #education .max-w-4xl {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }

    /* Timeline line - perfectly centered */
    #education .relative .absolute.left-0, 
    #education .relative .absolute.left-1\/2 {
        left: 12px !important; /* Center of circles (24px/2) */
        transform: translateX(0) !important;
        height: 100% !important;
        width: 3px !important;
        background: linear-gradient(to bottom, #3b82f6, #8b5cf6) !important;
        z-index: 1;
    }
    
    /* Timeline content alignment */
    #education .ml-10,
    #education .ml-8,
    #education .ml-6,
    #education .ml-4,
    #education .ml-auto,
    #education .md\:ml-auto {
        margin-left: 40px !important;
        width: calc(100% - 50px) !important;
        text-align: left !important;
    }
    
    /* Timeline dots - centered exactly on the timeline */
    #education .absolute.left-0.w-6.h-6,
    #education .absolute.left-1\/2.w-6.h-6,
    #education .absolute.w-6.h-6 {
        left: 0 !important; 
        transform: translateX(0) !important;
        z-index: 5;
        width: 24px !important;
        height: 24px !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    }
    
    /* Timeline elements full width */
    #education .md\:w-1\/2 {
        width: calc(100% - 50px) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        margin-right: 0 !important;
        margin-left: 40px !important;
    }
    
    /* Timeline dates alignment */
    #education .md\:text-right,
    #education .md\:items-end {
        text-align: left !important;
        align-items: flex-start !important;
    }
    
    /* Additional spacing between items */
    #education .mb-10 {
        margin-bottom: 2.5rem !important;
    }
    
    /* Make circles more prominent */
    #education .bg-blue-500,
    #education .bg-indigo-500,
    #education .bg-purple-500 {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
    }
    
    /* Fix item titles on mobile */
    #education .text-xl {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Fix subtitle alignment */
    #education .text-sm {
        margin-top: 0.25rem !important;
    }
    
    /* Fix dates */
    #education .text-gray-500 {
        margin-top: 0.25rem !important;
        font-size: 0.875rem !important;
    }
}