/* Common styles extracted from home.blade.php */ html, body { /* Prevent horizontal scroll caused by floating/absolute elements */ overflow-x: hidden; } body { font-family: "Plus Jakarta Sans", sans-serif; } .font-display { font-family: "Poppins", sans-serif; } .hero-img { background-image: url("https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=1400&q=80"); background-size: cover; background-position: center; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .gradient-cta { background: linear-gradient(90deg, #7c3aed 0%, #db2777 100%); } /* Select2 alignment with Tailwind input */ .select2-container--default .select2-selection--single { height: 48px; width: 100%; background-color: #ffffff; border-width: 1px; border-color: #e5e7eb; /* gray-200 */ border-radius: 0.75rem; /* rounded-xl */ display: flex; align-items: center; padding-left: 1rem; /* pl-4 */ padding-right: 2.5rem; /* pr-10 space for caret */ } .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-left: 0; /* we pad on the container */ color: #475569; /* slate-600 */ font-weight: 500; font-size: 0.875rem; /* text-sm */ } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #475569; font-weight: 500; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; right: 0.75rem; /* align inside pr-10 space */ } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default .select2-selection--single:focus { border-color: #93c5fd; /* blue-300 */ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); outline: none; } /* Same focus ring for multiple */ .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple:focus { border-color: #93c5fd; /* blue-300 */ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); outline: none; } .select2-dropdown { z-index: 60; } /* above header and cards */ .select2-results__option { font-size: 0.875rem; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #2563eb; color: #fff; } /* Fallback: ensure dropdown panel looks consistent even if appended to */ .select2-dropdown { background-color: rgb(233, 233, 237); border-color: #e5e7eb; } .select2-results__options { padding-top: 4px; padding-bottom: 4px; } .select2-results__option { padding: 6px 10px; } /* Country select custom background (only when select has .bg-color) */ #countrySelect.bg-color { background-color: rgb(233, 233, 237); } #countrySelect.bg-color + .select2-container--default .select2-selection--single, #countrySelect.bg-color ~ .select2-container--default .select2-selection--single { background-color: rgb(233, 233, 237); } /* Default gray background for hero country select (scoped to wrapper) */ .country-select-wrap select { background-color: rgb(233, 233, 237); } .country-select-wrap + .select2-container--default .select2-selection--single, .country-select-wrap ~ .select2-container--default .select2-selection--single, .country-select-wrap .select2-container--default .select2-selection--single { background-color: rgb(233, 233, 237); } /* Ensure single-select line height remains correct */ .country-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; } .country-select-wrap .select2-dropdown { background-color: rgb(233, 233, 237); } .country-select-wrap .select2-search--dropdown { background-color: rgb(233, 233, 237); } .country-select-wrap .select2-search--dropdown .select2-search__field { background-color: rgb(233, 233, 237); } .stat-bg { background: linear-gradient( 110deg, #1e3a8a 0%, #3730a3 55%, #6d28d9 100% ); } /* U-Turn flow container */ .flow { position: relative; padding: 20px 0; } .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 3; } .row.bottom { margin-top: 120px; } /* The animated U-turn SVG path */ .u-path { position: absolute; top: 80px; left: 0; width: 100%; height: calc(100% - 80px); z-index: 1; pointer-events: none; } .u-path-line { fill: none; stroke: url(#flowGradient); stroke-width: 3; stroke-dasharray: 10 10; stroke-linecap: round; animation: dashFlow 1.5s linear infinite; filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3)); } @keyframes dashFlow { to { stroke-dashoffset: -40; } } /* Travelling glow dot */ .glow-dot { filter: drop-shadow(0 0 8px #6366f1) drop-shadow(0 0 16px #ec4899); } /* Step Card */ .step { position: relative; background: #ffffff; border-radius: 24px; padding: 28px 22px; border: 1.5px solid #f1f5f9; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02); opacity: 0; transform: translateY(40px) scale(0.92); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease; cursor: pointer; overflow: hidden; z-index: 3; } .step.visible { opacity: 1; transform: translateY(0) scale(1); } /* Gradient top accent bar */ .step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .step.visible::before { transform: scaleX(1); } /* Soft inner glow on hover */ .step::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.08), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .step:hover { transform: translateY(-12px) scale(1.04); border-color: transparent; box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25), 0 0 0 1.5px var(--c1); } .step:hover::after { opacity: 1; } .step:hover .step-number { transform: rotate(360deg) scale(1.15); } .step:hover .step-icon { transform: scale(1.25) rotate(-8deg); } /* Step number with gradient bg */ .step-number { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--c1), var(--c2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.4rem; box-shadow: 0 8px 20px -4px var(--c1); transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; margin-bottom: 18px; } /* Pulsing rings around number */ .step-number::before, .step-number::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--c1); opacity: 0; } .step.visible .step-number::before { animation: pulseRing 2s ease-out infinite; } .step.visible .step-number::after { animation: pulseRing 2s ease-out infinite 1s; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } .step-icon { position: absolute; top: 24px; right: 22px; font-size: 2.2rem; transition: transform 0.4s ease; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); } .step-title { color: #1e293b; font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; } .step-desc { color: #64748b; font-size: 0.88rem; line-height: 1.55; } /* Direction indicator at end of top row & start of bottom row */ .direction-label { position: absolute; background: linear-gradient(135deg, #6366f1, #ec4899); color: white; padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); z-index: 4; animation: floatBadge 2.5s ease-in-out infinite; } @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .direction-label.right-side { top: 50%; right: -10px; transform: translateY(-50%); } /* Stagger reveal in U-turn order */ .step:nth-child(1) { transition-delay: 0.1s; } .step:nth-child(2) { transition-delay: 0.25s; } .step:nth-child(3) { transition-delay: 0.4s; } .step:nth-child(4) { transition-delay: 0.55s; } .row.bottom .step:nth-child(1) { transition-delay: 0.85s; } .row.bottom .step:nth-child(2) { transition-delay: 1s; } .row.bottom .step:nth-child(3) { transition-delay: 1.15s; } .row.bottom .step:nth-child(4) { transition-delay: 1.3s; } /* ---------- Responsive: tablet ---------- */ @media (max-width: 1100px) { .row { grid-template-columns: repeat(2, 1fr); gap: 24px; } .row.bottom { margin-top: 24px; } .u-path { display: none; } } /* ---------- Responsive: mobile ---------- */ @media (max-width: 640px) { .row { grid-template-columns: 1fr; gap: 18px; } /* keep the steps reading 5 → 6 → 7 → 8 on a single column */ .row.bottom { display: flex; flex-direction: column-reverse; } .step { padding: 24px 20px; border-radius: 20px; } .step-icon { font-size: 1.9rem; top: 20px; right: 18px; } .step-number { width: 46px; height: 46px; font-size: 1.2rem; } }