/* Education timeline fixes for mobile */
@media (max-width: 767px) {
    /* Timeline line adjustments */
    #education .relative .absolute.left-0, 
    #education .relative .absolute.left-1\/2 {
        left: 10px !important;
        transform: translateX(0) !important;
    }
    
    /* Timeline content adjustments */
    #education .ml-10,
    #education .ml-8,
    #education .ml-6,
    #education .ml-4 {
        margin-left: 25px !important;
    }
    
    /* Timeline dots position */
    #education .absolute.left-0.w-6.h-6,
    #education .absolute.left-1\/2.w-6.h-6,
    #education .absolute.w-6.h-6 {
        left: 10px !important;
        transform: translateX(0) !important;
    }
    
    /* Make timeline elements full width on mobile */
    #education .md\:w-1\/2 {
        width: calc(100% - 30px) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: left !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: 25px !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 - 50px);
    }
    
    /* Improve spacing between timeline items */
    #education .space-y-16 > div {
        margin-bottom: 2rem !important;
    }
    
    /* Ensure all timeline elements have same alignment */
    #education .relative > div {
        left: 0 !important;
        transform: none !important;
    }
}

/* Fix for navbar to ensure it stays properly fixed */
header.fixed {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

/* Add padding to body to account for fixed header */
body {
    padding-top: 60px; /* Adjust based on your header height */
}

/* Ensure sections have proper spacing from header */
section {
    scroll-margin-top: 70px; /* Adjust based on your header height */
}

/* Make sure touch events work properly on mobile */
a, button, .hamburger {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Fix button sizes on mobile */
@media (max-width: 480px) {
    button, .button {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}