body {

            background-color: #FFFFFF;

            color: #1E293B;

            font-size: 1.05rem; /* Slightly larger text throughout page */

        }

        /* Premium Card Interaction Layer */

        .premium-card {

            background: #FFFFFF;

            border: 1px solid #E2E8F0;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }

        .premium-card:hover {

            border-color: #0077B6;

            box-shadow: 0 20px 25px -5px rgba(0, 119, 182, 0.12), 0 10px 10px -5px rgba(0, 119, 182, 0.04);

            transform: translateY(-4px);

        }

        /* Background Highlight Trackers */

        tr:nth-child(even) {

            background-color: #F8FAFC;

        }

        /* Custom Smooth Collapse Transitions */

        .accordion-content {

            transition: max-height 0.3s ease-out, padding 0.3s ease;

            max-height: 0;

            overflow: hidden;

        }

        .accordion-content.open {

            max-height: 500px;

        }



        /* Ensure proper responsive container sizing */

        main {

            width: 100%;

            overflow-x: hidden;

        }



        section {

            width: 100%;

            overflow-x: hidden;

        }



        /* FC container responsive heights based on device */

        #fc-container {

            max-height: 720px;

            overflow-y: auto;

            overflow-x: hidden;

            scroll-behavior: smooth;

        }



        /* Scrollbar styling for FC container */

        #fc-container::-webkit-scrollbar {

            width: 8px;

        }



        #fc-container::-webkit-scrollbar-track {

            background: #f1f5f9;

            border-radius: 10px;

        }



        #fc-container::-webkit-scrollbar-thumb {

            background: #cbd5e1;

            border-radius: 10px;

        }



        #fc-container::-webkit-scrollbar-thumb:hover {

            background: #94a3b8;

        }



        /* Firefox scrollbar */

        #fc-container {

            scrollbar-width: thin;

            scrollbar-color: #cbd5e1 #f1f5f9;

        }



        /* Responsive FC header and search section */

        #facilitation-centers > div:first-child {

            display: flex;

            flex-direction: column;

            gap: 1.5rem;

        }



        #fc-search {

            width: 100%;

            max-width: 100%;

        }



        /* Extra small devices (< 480px) */

        @media (max-width: 479px) {

            body {

                font-size: 0.95rem;

            }



            main {

                padding-left: 0.5rem;

                padding-right: 0.5rem;

                padding-top: 1rem;

                padding-bottom: 1rem;

            }



            section {

                padding-left: 0.5rem;

                padding-right: 0.5rem;

            }



            .text-4xl {

                font-size: 1.75rem !important;

            }



            .text-3xl {

                font-size: 1.5rem !important;

            }



            .text-2xl {

                font-size: 1.25rem !important;

            }



            .text-xl,

            .text-lg {

                font-size: 1rem !important;

            }



            .premium-card,

            .fc-card {

                padding: 1rem !important;

            }



            #fc-container {

                max-height: 500px;

                gap: 0.75rem !important;

            }



            .gap-6 {

                gap: 0.75rem !important;

            }



            .space-y-24 {

                gap: 1.5rem !important;

            }

        }



        /* Small devices / Mobile (480px - 639px) */

        @media (min-width: 480px) and (max-width: 639px) {

            main {

                padding-left: 0.75rem;

                padding-right: 0.75rem;

            }



            .text-4xl {

                font-size: 1.9rem !important;

            }



            .text-3xl {

                font-size: 1.65rem !important;

            }



            #fc-container {

                max-height: 550px;

            }



            .gap-6 {

                gap: 1rem !important;

            }

        }



        /* Guide page mobile responsive fixes */

        @media (max-width: 768px) {

            /* Ensure timeline nodes stack cleanly */

            #timeline .timeline-node {

                display: block;

                padding-left: 2.5rem !important;

                margin-left: 0 !important;

                min-width: 0 !important;

                position: static !important; /* make node static so dot absolute aligns to outer track */

            }



            #timeline .timeline-node .timeline-indicator-wrapper {

                position: absolute !important;

                left: 1rem !important;

                top: 0 !important;

                transform: translateX(-50%) !important;

                margin: 0 !important;

                width: auto !important;

            }



            #timeline-track {

                left: 1rem !important;

                right: auto !important;

                width: 4px !important;

                top: 0 !important;

                bottom: 0 !important;

                transform: none !important;

            }



            .timeline-indicator {

                margin: 0 !important;

            }

            /* Align timeline dot to the vertical track on mobile only (position-only change) */
            .timeline-point {
                position: absolute !important; /* position relative to outer positioned container */
                left: 1rem !important; /* match track left */
                transform: translateX(-50%) !important;
                z-index: 30 !important; /* ensure dot sits above the track */
                top: auto !important; /* let original top from markup control vertical spacing */
            }



            .timeline-node .w-[45%],

            .timeline-node .md\:w-[45%],

            .timeline-node .md\:pl-6,

            .timeline-node .md\:block 

            

            {

                width: 100% !important;

                padding-left: 0 !important;

                display: block !important;

            }



            .premium-card {

                padding: 1.25rem !important;

            }



            .text-4xl {

                font-size: 2rem !important;

            }



            .text-3xl {

                font-size: 1.8rem !important;

            }



            .text-xl {

                font-size: 1.15rem !important;

            }



            .text-lg {

                font-size: 1rem !important;

            }



            .text-base,

            .text-sm {

                font-size: 0.95rem !important;

            }



            #documents .grid,

            #cap-process .grid,

            #fc-container {

                grid-template-columns: 1fr !important;

            }



            #universities .overflow-x-auto {

                overflow-x: auto !important;

            }



            #universities table {

                width: 100% !important;

                min-width: 100% !important;

            }



            #universities th,

            #universities td {

                white-space: normal !important;

                word-break: break-word !important;

                padding: 0.85rem !important;

            }



            #fc-container {

                max-height: 720px !important;

                overflow-y: auto !important;

                padding-right: 0 !important;

            }



            .fc-card {

                min-width: 0 !important;

                width: 100% !important;

            }



            .flex.items-center.justify-between,

            .flex.flex-col.md\:flex-row {

                flex-direction: column !important;

                align-items: stretch !important;

                justify-content: flex-start !important;

            }



            .relative.w-full.md\:w-96 {

                width: 100% !important;

            }



            .space-y-24 {

                gap: 2rem !important;

            }

        }

        /* Mobile responsive adjustments for the admission guide page */

        body,

        html {

            min-width: 0;

        }



        #timeline {

            overflow-x: hidden;

        }



        .timeline-node {

            min-width: 0;

            overflow-wrap: anywhere;

            word-break: break-word;

        }



        .timeline-indicator-wrapper {

            position: relative;

            left: 0 !important;

            transform: none !important;

            margin: 0 auto 1rem;

            display: flex;

            justify-content: center;

            width: 100%;

        }



        .timeline-indicator {

            position: relative;

            margin: 0;

        }



        .timeline-track {

            left: 1rem !important;

            width: 4px !important;

        }



        .premium-card {

            min-width: 0;

            word-break: break-word;

            overflow-wrap: anywhere;

        }



        .overflow-x-auto {

            -webkit-overflow-scrolling: touch;

        }



        #universities table {

            min-width: 100%;

            width: 100%;

            border-collapse: collapse;

        }



        #universities th,

        #universities td {

            white-space: normal;

            word-break: break-word;

            padding: 0.85rem;

        }



        #fc-container {

            max-height: 720px;

            overflow-y: auto;

            overflow-x: hidden;

        }



        html {

            overflow-y: auto;

            overflow-x: hidden;

            scrollbar-width: thin;

            scrollbar-color: #94a3b8 #f1f5f9;

        }



        html::-webkit-scrollbar {

            width: 10px;

        }



        html::-webkit-scrollbar-track {

            background: #f1f5f9;

        }



        html::-webkit-scrollbar-thumb {

            background: #94a3b8;

            border-radius: 9999px;

        }



        html::-webkit-scrollbar-thumb:hover {

            background: #64748b;

        }



        @media (max-width: 768px) {

            main {

                padding-left: 1rem;

                padding-right: 1rem;

            }



            section {

                padding-left: 0.75rem;

                padding-right: 0.75rem;

            }



            .text-4xl {

                font-size: 2.25rem;

            }



            .text-3xl {

                font-size: 1.9rem;

            }



            .timeline-node {

                display: block;

                padding-left: 0;

            }



            .timeline-node .w-[45%],

            .timeline-node .md\:w-[45%],

            .timeline-node .md\:pl-6,

            .timeline-node .md\:block {

                width: 100% !important;

                padding-left: 0 !important;

                display: block !important;

            }



            .timeline-indicator-wrapper {

                margin-bottom: 1rem;

            }



            .timeline-indicator-wrapper .timeline-indicator {

                margin: 0 auto;

            }



            .timeline-track {

                left: 1rem !important;

                top: 0;

                bottom: 0;

            }



            .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4,

            .grid.grid-cols-1.lg\:grid-cols-2,

            .grid.grid-cols-1.md\:grid-cols-2 {

                grid-template-columns: 1fr !important;

            }



            #documents .grid,

            #cap-process .grid,

            #fc-container {

                grid-template-columns: 1fr !important;

            }



            .premium-card {

                padding: 1.25rem !important;

            }



            .text-sm {

                font-size: 0.95rem !important;

            }



            .text-base {

                font-size: 1rem !important;

            }



            .text-lg {

                font-size: 1.05rem !important;

            }



            .p-6 {

                padding: 1rem !important;

            }



            .p-8 {

                padding: 1rem !important;

            }



            .rounded-2xl {

                border-radius: 1rem !important;

            }



            .space-y-24 {

                gap: 3rem !important;

            }

        }



        /* Additional guide page mobile overrides */

        @media (max-width: 768px) {

            body,

            html {

                min-width: 0;

            }



            .timeline-node,

            .premium-card,

            .fc-card,

            #timeline,

            #universities table,

            #documents .grid,

            #cap-process .grid,

            #fc-container {

                min-width: 0 !important;

                width: 100% !important;

            }



            .timeline-node {

                overflow-wrap: anywhere;

                word-break: break-word;

            }



            .timeline-node .timeline-indicator-wrapper,

            .timeline-node .timeline-indicator-wrapper .timeline-indicator {

                margin: 0 auto !important;

                left: auto !important;

                right: auto !important;

                transform: none !important;

                position: relative !important;

            }



            .timeline-track {

                left: 1rem !important;

                top: 0 !important;

                bottom: 0 !important;

                width: 4px !important;

            }



            .timeline-node .w-[45%],

            .timeline-node .md\:w-[45%],

            .timeline-node .md\:pl-6,

            .timeline-node .md\:block,

            .relative.w-full.md\:w-96 {

                width: 100% !important;

                padding-left: 0 !important;

                display: block !important;

            }



            #documents .grid,

            #cap-process .grid,

            #fc-container {

                grid-template-columns: 1fr !important;

            }



            #universities .overflow-x-auto {

                overflow-x: auto !important;

            }



            #universities table {

                width: 100% !important;

                min-width: 100% !important;

            }



            #universities th,

            #universities td {

                white-space: normal !important;

                word-break: break-word !important;

                padding: 0.85rem !important;

            }



            #fc-container {

                max-height: 600px !important;

                overflow-y: auto !important;

                padding-right: 8px !important;

            }



            .premium-card,

            .fc-card {

                padding: 1.25rem !important;

                border-radius: 1rem !important;

            }



            .text-4xl,

            .text-3xl,

            .text-xl,

            .text-lg,

            .text-base,

            .text-sm {

                line-height: 1.2 !important;

            }



            .text-4xl {

                font-size: 2.25rem !important;

            }



            .text-3xl {

                font-size: 1.9rem !important;

            }



            .text-xl {

                font-size: 1.25rem !important;

            }



            .text-lg {

                font-size: 1.05rem !important;

            }



            .text-base,

            .text-sm {

                font-size: 0.95rem !important;

            }

        }



        /* Tablet devices (768px - 1023px) */

        @media (min-width: 768px) and (max-width: 1023px) {

            main {

                padding-left: 1.5rem;

                padding-right: 1.5rem;

                padding-top: 2rem;

                padding-bottom: 2rem;

            }



            section {

                padding-left: 1rem;

                padding-right: 1rem;

            }



            .text-4xl {

                font-size: 2.5rem !important;

            }



            .text-3xl {

                font-size: 2rem !important;

            }



            #fc-container {

                max-height: 650px;

                grid-template-columns: 1fr !important;

            }



            .gap-6 {

                gap: 1.25rem !important;

            }



            .space-y-24 {

                gap: 4rem !important;

            }



            .premium-card,

            .fc-card {

                padding: 1.5rem !important;

            }



            #facilitation-centers > div:first-child {

                flex-direction: row;

                align-items: center;

                justify-content: space-between;

            }



            #fc-search {

                width: auto;

                min-width: 300px;

            }

        }



        /* Desktop devices (1024px and above) */

        @media (min-width: 1024px) {

            main {

                padding-left: 2rem;

                padding-right: 2rem;

                padding-top: 3rem;

                padding-bottom: 3rem;

            }



            section {

                padding-left: 1.5rem;

                padding-right: 1.5rem;

            }



            body {

                font-size: 1.05rem;

            }



            .text-4xl {

                font-size: 3rem !important;

            }



            .text-3xl {

                font-size: 2.25rem !important;

            }



            .text-2xl {

                font-size: 1.875rem !important;

            }



            .text-xl {

                font-size: 1.25rem !important;

            }



            .text-lg {

                font-size: 1.125rem !important;

            }



            #fc-container {

                max-height: 800px;

                grid-template-columns: repeat(2, 1fr) !important;

            }



            .premium-card,

            .fc-card {

                padding: 1.75rem !important;

            }



            .gap-6 {

                gap: 1.5rem !important;

            }



            .space-y-24 {

                gap: 6rem !important;

            }



            #timeline .timeline-node {

                display: flex;

                align-items: flex-start;

            }



            .timeline-node .w-[45%] {

                width: 45% !important;

            }



            #facilitation-centers > div:first-child {

                flex-direction: row;

                align-items: center;

                justify-content: space-between;

                gap: 2rem;

            }



            #fc-search {

                width: 384px;

            }

        }



        /* Large desktop (1440px and above) */

        @media (min-width: 1440px) {

            main {

                max-width: 90%;

                margin-left: auto;

                margin-right: auto;

                padding-left: 3rem;

                padding-right: 3rem;

            }



            #fc-container {

                max-height: 900px;

            }



            .gap-6 {

                gap: 2rem !important;

            }

        }



        /* Fix for landscape orientation on mobile devices */

        @media (max-height: 500px) and (orientation: landscape) {

            #fc-container {

                max-height: 300px !important;

            }



            main {

                padding-top: 1rem;

                padding-bottom: 1rem;

            }



            section {

                margin-bottom: 1rem;

            }

        }



        /* Ensure touch scrolling is smooth on mobile */

        @media (hover: none) and (pointer: coarse) {

            .overflow-y-auto {

                -webkit-overflow-scrolling: touch;

            }



            #fc-container {

                -webkit-overflow-scrolling: touch;

            }

        }



        /* Custom Responsive Accordion Overrides to prevent layout shifts on mobile */

        @media (max-width: 768px) {

            .premium-card button[onclick^="toggleAccordion"] {

                display: flex !important;

                flex-direction: row !important;

                align-items: center !important;

                justify-content: space-between !important;

                gap: 0.75rem !important;

                text-align: left !important;

                width: 100% !important;

            }

            

            .premium-card button[onclick^="toggleAccordion"] > div {

                display: flex !important;

                flex-direction: column !important;

                align-items: flex-start !important;

                gap: 0.35rem !important;

                flex: 1 !important;

                min-width: 0 !important;

            }



            .premium-card button[onclick^="toggleAccordion"] > div > span:last-child {

                display: block !important;

                white-space: normal !important;

                word-break: break-word !important;

                line-height: 1.3 !important;

            }

        }