@section('body_class', 'bg-surface text-on-surface font-body selection:bg-primary-fixed overflow-x-hidden')
@section('validate') @stop
@push('head_scripts')
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#001e49",
                        "primary-container": "#0e336a",
                        "on-primary": "#ffffff",
                        "primary-fixed": "#d8e2ff",
                        secondary: "#4e6072",
                        surface: "#fcf9f5",
                        "surface-container": "#f0ede9",
                        "surface-container-high": "#eae8e4",
                        "surface-container-low": "#f6f3ef",
                        "outline-variant": "#c4c6d1",
                        "on-tertiary": "#ffffff",
                        "on-secondary": "#ffffff",
                        "on-tertiary-fixed": "#211a13",
                        "tertiary-fixed": "#eee0d4",
                        "on-primary-container": "#809ddb",
                        "on-secondary-fixed-variant": "#36495a",
                        "on-secondary-container": "#546678",
                        "surface-container-highest": "#e5e2de",
                        "surface-bright": "#fcf9f5",
                        "primary-container": "#0e336a",
                        background: "#fcf9f5",
                        primary: "#001e49",
                        "surface-container": "#f0ede9",
                        "outline-variant": "#c4c6d1",
                        "tertiary-container": "#3b332b",
                        tertiary: "#251e16",
                        "primary-fixed-dim": "#adc6ff",
                        "on-error": "#ffffff",
                        "on-tertiary-container": "#a79b90",
                        "on-background": "#1c1c1a",
                        "on-primary-fixed": "#001a41",
                        "on-surface": "#1c1c1a",
                        "primary-fixed": "#d8e2ff",
                        "surface-dim": "#dcdad6",
                        "inverse-surface": "#31302e",
                        "on-primary": "#ffffff",
                        error: "#ba1a1a",
                        outline: "#747781",
                        "tertiary-fixed-dim": "#d1c4b8",
                        secondary: "#4e6072",
                        "surface-container-high": "#eae8e4",
                        "on-primary-fixed-variant": "#26467d",
                        "inverse-primary": "#adc6ff",
                        "on-secondary-fixed": "#091d2c",
                        "surface-container-lowest": "#ffffff",
                        "surface-container-low": "#f6f3ef",
                        "secondary-container": "#d1e5fa",
                        "error-container": "#ffdad6",
                        "secondary-fixed": "#d1e5fa",
                        "surface-tint": "#405e97",
                        "on-error-container": "#93000a",
                        "inverse-on-surface": "#f3f0ec",
                        surface: "#fcf9f5",
                        "surface-variant": "#e5e2de",
                        "secondary-fixed-dim": "#b5c9dd",
                        "on-surface-variant": "#434750",
                        "on-tertiary-fixed-variant": "#4e453c",
                    },
                    borderRadius: {
                        DEFAULT: "0.25rem",
                        lg: "0.5rem",
                        xl: "0.75rem",
                        "3xl": "2rem",
                        full: "9999px",
                    },
                    fontFamily: {
                        headline: ["Manrope"],
                        body: ["Inter"],
                        label: ["Inter"],
                    },
                },
            },
        };
    </script>
@endpush
@push('styles')
    <style>
        .material-symbols-outlined {
            font-variation-settings:
                "FILL" 0,
                "wght" 300,
                "GRAD" 0,
                "opsz" 24;
        }

        /* nabrbar css */
        .chg-nav-glass-morphism {
            background: #ffffff;
            border-bottom: 1px solid rgba(0, 30, 73, 0.08);
        }

        .chg-nav-dropdown-container {
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        .chg-nav-link {
            @apply relative text-[#4e6072] font-semibold text-sm tracking-wide transition-colors duration-200 cursor-pointer;
        }

        .chg-nav-link:hover {
            @apply text-primary;
        }

        .chg-nav-active-nav-link {
            @apply text-primary;
        }

        .chg-nav-active-nav-link::after {
            /* content: ""; */
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #001e49;
        }

        .chg-nav-z-menu {
            z-index: 100;
        }

        .glass-card {
            background: rgba(14, 51, 106, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .hero-gradient {
            background: radial-gradient(circle at center, #0e336a 0%, #001e49 100%);
        }

        .blueprint-grid {
            background-size: 40px 40px;
            background-image: radial-gradient(circle,
                    rgba(229, 226, 222, 0.2) 1px,
                    transparent 1px);
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        .tab-btn {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tab-btn.active {
            background-color: #001e49;
            color: white;
            transform: scale(1.05);
        }

        .location-container {
            display: none;
            opacity: 0;
            position: relative;
            width: 100%;
        }

        .location-container.active {
            display: block;
            opacity: 1;
        }

        .sticky-tabs.is-sticky {
            background: rgba(252, 249, 245, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0, 30, 73, 0.1);
        }

        .map-glow {
            box-shadow: 0 0 40px rgba(216, 226, 255, 0.1);
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .glass-silk {
            background: rgba(252, 249, 245, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .bg-tertiary-fixed {
            --tw-bg-opacity: 1;
            background-color: rgb(238 224 212 / var(--tw-bg-opacity, 1));
        }

        .glass-card2 {
            background: rgba(14, 51, 106, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            /* Turns a black icon white */
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition:
                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                transform 0.4s ease,
                padding-top 0.4s ease;
            opacity: 0;
            transform: translateY(-10px);
        }

        .accordion-item.is-open .accordion-content {
            max-height: 1000px;
            opacity: 1;
            padding-top: 16px;
            transform: translateY(0);
        }

        .accordion-item.is-open .chevron-icon {
            transform: rotate(180deg);
            color: #007ec6;
        }

        .accordion-item.is-open {
            border-left-color: #007ec6 !important;
        }

        .faq-card {
            background: #ffffff;
            border: 1px solid #e5e8ef;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        @media (max-width:480px) {
            .burlington-header {
                height: auto !important;
            }

            .timing-row {
                display: inline-block !important;

            }

            .timing-row .bg-white {
                margin-bottom: 10px;
            }

            .location-btn {
                display: inline !important;
            }
        }
    </style>
@endpush