/* Enhanced education timeline fixes for mobile */
@media (max-width: 767px) {
    /* Timeline container */
    #education .max-w-4xl {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }

    /* Timeline line adjustments - Make it go through the center of circles */
    #education .relative .absolute.left-0, 
    #education .relative .absolute.left-1\/2 {
        left: 12px !important; /* Center of circles - half of circle width (24/2) */
        transform: translateX(0) !important;
        z-index: 1;
        width: 2px !important; /* Make line slightly thicker */
        background: linear-gradient(to bottom, #3b82f6, #8b5cf6) !important; /* Enhance line visibility */
    }
    
    /* Timeline content adjustments */
    #education .ml-10,
    #education .ml-8,
    #education .ml-6,
    #education .ml-4,
    #education .ml-auto {
        margin-left: 40px !important;
        width: calc(100% - 50px) !important;
    }
    
    /* Timeline dots position - Center them on the line */
    #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; /* This centers the 24px wide circle */
        transform: translateX(0) !important;
        z-index: 5;
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Make timeline elements full width on mobile */
    #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;
    }
    
    /* Fix specific alignment issues */
    #education .md\:ml-0,
    #education .md\:ml-auto,
    #education .md\:mr-auto,
    #education .md\:text-right,
    #education .md\:text-left {
        margin-left: 40px !important;
        margin-right: 0 !important;
        text-align: left !important;
    }
    
    /* Ensure content fits within screen */
    #education .bg-white.bg-opacity-10 {
        width: 100% !important;
        max-width: calc(100vw - 60px);
    }
    
    /* Make sure timeline elements stack correctly */
    #education .relative.flex.flex-col.md\:flex-row {
        margin-bottom: 3rem !important;
        position: relative;
    }
    
    /* Ensure timeline line goes through all elements */
    #education .absolute.left-0.md\:left-1\/2.top-0.bottom-0.w-1 {
        left: 12px !important; /* Center of circle */
        height: 100% !important;
        transform: translateX(0) !important;
    }

    /* Ensure timeline cards have proper spacing */
    #education .space-y-16 > * {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    /* Improve visual separation of timeline items */
    #education .space-y-16 {
        margin-top: 2rem;
    }
    
    /* Enhance the dots to be more visible */
    #education .absolute.w-6.h-6 .w-3.h-3 {
        width: 12px !important;
        height: 12px !important;
    }
}