/* about/milestones.php */

/* Pulse animation for current year */
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 4px #04458B, 0 0 0 8px rgba(4, 69, 139, 0.3);
        }

        50% {
            box-shadow: 0 0 0 4px #04458B, 0 0 0 12px rgba(4, 69, 139, 0.1);
        }

        100% {
            box-shadow: 0 0 0 4px #04458B, 0 0 0 8px rgba(4, 69, 139, 0.3);
        }
    }

    /* Add animation to 2025 dot */
    div[style*="width: 24px; height: 24px"] {
        animation: pulse 2s infinite;
    }

    /* Small tablet and mobile portrait - 900px and below */
    @media (max-width: 900px) {

        /* Move timeline to left side */
        .rts-about-area-6 div[style*="position: absolute; left: 50%; transform: translateX(-50%); width: 4px"] {
            left: 30px !important;
            transform: none !important;
        }

        /* Move all timeline dots to left */
        .rts-about-area-6 div[style*="position: absolute; left: 50%; transform: translateX(-50%); width: 20px; height: 20px"],
        .rts-about-area-6 div[style*="position: absolute; left: 50%; transform: translateX(-50%); width: 24px; height: 24px"] {
            left: 30px !important;
            transform: none !important;
        }

        /* Adjust current year dot size */
        .rts-about-area-6 div[style*="width: 24px; height: 24px"] {
            width: 20px !important;
            height: 20px !important;
        }

        /* Make all timeline items single column */
        .rts-about-area-6 div[style*="display: flex; align-items: center"] {
            flex-direction: column !important;
            align-items: flex-start !important;
            margin-bottom: 40px !important;
        }

        /* Make all content containers full width and left aligned */
        .rts-about-area-6 div[style*="width: 45%; margin-right: 55%"],
        .rts-about-area-6 div[style*="width: 45%; margin-left: 55%"] {
            width: calc(100% - 70px) !important;
            margin-left: 60px !important;
            margin-right: 0 !important;
            text-align: left !important;
        }

        /* Position all year badges on the left */
        .rts-about-area-6 div[style*="position: absolute; top: -12px; right: 20px"],
        .rts-about-area-6 div[style*="position: absolute; top: -12px; left: 20px"] {
            left: 20px !important;
            right: auto !important;
        }

        /* Reduce padding on timeline wrapper */
        .rts-about-area-6 div[style*="max-width: 1000px"] {
            padding: 30px 0 !important;
        }
    }

    /* Standard tablet - 768px and below */
    @media (max-width: 768px) {
        .rts-about-area-6 {
            padding: 30px 0 !important;
        }

        /* Smaller dots on mobile */
        .rts-about-area-6 div[style*="width: 20px; height: 20px"] {
            width: 16px !important;
            height: 16px !important;
        }

        /* Title adjustments */
        .title-style-one h2.title {
            font-size: 24px !important;
        }

        .title-style-one p {
            font-size: 14px !important;
        }

        /* Card padding adjustments */
        .rts-about-area-6 div[style*="padding: 25px"] {
            padding: 20px !important;
        }
    }

    /* Mobile phones - 480px and below */
    @media (max-width: 480px) {
        .container {
            padding: 0 15px !important;
        }

        .rts-about-area-6 {
            padding: 25px 0 !important;
        }

        /* Move timeline closer to edge on very small screens */
        .rts-about-area-6 div[style*="left: 30px !important"] {
            left: 20px !important;
        }

        /* Adjust content margin accordingly */
        .rts-about-area-6 div[style*="margin-left: 60px !important"] {
            margin-left: 50px !important;
            width: calc(100% - 60px) !important;
        }

        /* Reduce card padding further */
        .rts-about-area-6 div[style*="padding: 25px"],
        .rts-about-area-6 div[style*="padding: 20px"] {
            padding: 15px !important;
        }

        /* Smaller headings */
        .rts-about-area-6 h4 {
            font-size: 14px !important;
            margin-bottom: 10px !important;
        }

        /* Smaller text */
        .rts-about-area-6 p {
            font-size: 12px !important;
        }

        /* Smaller year badges */
        .rts-about-area-6 div[style*="padding: 6px 16px"] {
            padding: 4px 12px !important;
            font-size: 12px !important;
        }

        /* Tighter spacing */
        .rts-about-area-6 div[style*="margin-bottom: 60px"],
        .rts-about-area-6 div[style*="margin-bottom: 40px"] {
            margin-bottom: 30px !important;
        }

        /* Title adjustments */
        .title-style-one h2.title {
            font-size: 20px !important;
        }

        .title-style-one .pre {
            font-size: 12px !important;
        }
    }

    /* Very small screens - 360px and below */
    @media (max-width: 360px) {

        /* Even closer timeline */
        .rts-about-area-6 div[style*="left: 20px !important"] {
            left: 15px !important;
        }

        /* Adjust content margin */
        .rts-about-area-6 div[style*="margin-left: 50px !important"] {
            margin-left: 45px !important;
            width: calc(100% - 50px) !important;
        }

        /* Minimal padding */
        .rts-about-area-6 div[style*="padding: 15px"] {
            padding: 12px !important;
        }
    }