/* Fonts preconnected & loaded in to eliminate render-blocking CSS waterfall */ :root { --color-primary: #003269; --color-accent: #3D82D2; --color-accent-hover: #1F6AC2; --color-heading-sub: #121212; --color-body: #4E4E4E; --color-divider: #0000001C; --color-bg-overlay: #FBFBFB; } * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; color: var(--color-body); background-color: #FBFBFB; margin: 0; padding: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .font-philosopher { font-family: 'Philosopher', sans-serif; } .font-roboto { font-family: 'Roboto', sans-serif; } /* Hero Section */ .hero-section { position: relative; min-height: 745px; width: 100%; background-image: url('../images/background-1-3.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; overflow: hidden; } .hero-overlay { position: absolute; inset: 0; background-image: linear-gradient(5deg, #FBFBFB 30%, rgba(255, 255, 255, 0) 60%); pointer-events: none; } .hero-img-lcp { width: 100%; max-width: 620px; height: auto; aspect-ratio: 1095 / 778; object-fit: contain; display: block; } @media (min-width: 1280px) { .hero-img-lcp { max-width: 700px; } } @media (min-width: 1536px) { .hero-img-lcp { max-width: 740px; } } /* Social links rotated 90deg */ .social-list-rotated { transform: rotate(90deg); transform-origin: center center; } .social-link-item { display: inline-flex; align-items: center; gap: 8px; color: #121212; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: color 0.2s ease; } .social-link-item:hover { color: #3D82D2; } .social-link-item span.label { text-decoration: underline; text-decoration-color: #3D82D2; text-underline-offset: 4px; } .social-link-item svg { width: 14px; height: 14px; fill: currentColor; } /* Button */ .btn-contact { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background-color: #3D82D2; color: #ffffff; font-family: 'Philosopher', sans-serif; font-size: 1.25rem; font-weight: 700; padding: 13px 32px; border-radius: 0; text-decoration: none; transition: background-color 0.2s ease, transform 0.15s ease; } .btn-contact:hover { background-color: #1F6AC2; } .btn-contact svg { width: 20px; height: 20px; fill: #ffffff; } /* ======================================================== */ /* DYNAMIC HEADER & FOOTER ROBUST COMPONENT STYLES */ /* ======================================================== */ html { scroll-behavior: smooth; } /* Site Header Wrapper */ .site-header-wrapper { position: relative; width: 100%; z-index: 100; font-family: 'Roboto', sans-serif; } /* Top Bar */ .top-bar { background-color: #00173F; color: #EDEDED; font-size: 13px; padding: 10px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .top-bar-inner { max-width: 1520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 16px; } .top-bar-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.2s ease; } .top-bar-item:hover { color: #3D82D2; } .top-bar-item svg { width: 15px; height: 15px; fill: #3D82D2; flex-shrink: 0; } .top-bar-logo img { height: 30px; width: auto; object-fit: contain; filter: brightness(1.05); } @media (max-width: 900px) { .top-bar { padding: 8px 12px; overflow: hidden; } .top-bar-inner { flex-direction: column; text-align: center; gap: 6px; } .top-bar-left { justify-content: center; font-size: 11px; line-height: 1.3; } .top-bar-right { flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; } .top-bar-separator { display: none !important; } } /* Main Navbar */ .main-navbar { position: sticky; top: 0; z-index: 90; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #EDEDED; transition: box-shadow 0.3s ease, background-color 0.3s ease; } .main-navbar.shadow-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); background-color: #FFFFFF; } .main-navbar-inner { max-width: 1520px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; } .nav-brand-inline img { height: 32px; width: auto; object-fit: contain; } /* Desktop Navigation List */ .desktop-nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-link { font-size: 15px; font-weight: 500; color: #121212; text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 4px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #003269; transition: width 0.25s ease; } .nav-link:hover { color: #003269; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: #003269; font-weight: 700; } /* Dropdown Menu */ .nav-dropdown-wrapper { position: relative; } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; padding-top: 12px; width: 250px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 100; } .nav-dropdown-wrapper:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-card { background: #FFFFFF; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: 1px solid #F0F5FA; padding: 8px 0; overflow: hidden; } .nav-dropdown-item { display: block; padding: 10px 18px; color: #121212; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .nav-dropdown-item:hover { background-color: #F0F5FA; color: #003269; } .nav-dropdown-item .item-title { font-size: 14px; font-weight: 600; } .nav-dropdown-item .item-desc { font-size: 12px; color: #6B7280; margin-top: 2px; } /* Header CTA Button */ .btn-quote-header { display: inline-flex; align-items: center; gap: 8px; background-color: #003269; color: #FFFFFF; padding: 10px 22px; border-radius: 9999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(0, 50, 105, 0.2); } .btn-quote-header:hover { background-color: #1F6AC2; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 50, 105, 0.3); } .btn-quote-header svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; } /* Mobile Hamburger Toggle */ .mobile-menu-btn { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; color: #121212; border-radius: 6px; transition: color 0.2s ease, background-color 0.2s ease; } .mobile-menu-btn:hover { color: #003269; background-color: #F0F5FA; } .mobile-menu-btn svg { width: 28px; height: 28px; display: block; } @media (max-width: 1023px) { .desktop-nav-menu, .btn-quote-header { display: none !important; } .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; } } /* Mobile Offcanvas Drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 9999; visibility: hidden; opacity: 0; overflow: hidden; pointer-events: none; transition: visibility 0.3s ease, opacity 0.3s ease; } .mobile-drawer:not(.is-open) { display: none; } .mobile-drawer.is-open { display: block; visibility: visible; opacity: 1; pointer-events: auto; } .drawer-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 85%; max-width: 360px; background-color: #FFFFFF; box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-drawer.is-open .drawer-panel { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; } .drawer-header img { height: 32px; width: auto; object-fit: contain; } .drawer-close-btn { background: transparent; border: none; cursor: pointer; padding: 8px; color: #6B7280; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background-color 0.2s; } .drawer-close-btn:hover { color: #121212; background-color: #F3F4F6; } .drawer-close-btn svg { width: 24px; height: 24px; } .drawer-nav { padding: 20px 0; flex: 1; } .drawer-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .drawer-link { display: block; padding: 12px 14px; font-size: 16px; font-weight: 500; color: #121212; text-decoration: none; border-radius: 8px; transition: background-color 0.15s, color 0.15s; } .drawer-link:hover, .drawer-link.active { background-color: #F0F5FA; color: #003269; font-weight: 600; } .drawer-footer { padding-top: 20px; border-top: 1px solid #F3F4F6; display: flex; flex-direction: column; gap: 16px; } .btn-drawer-call { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #003269; color: #FFFFFF; padding: 12px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color 0.2s; } .btn-drawer-call:hover { background-color: #1F6AC2; } .btn-drawer-call svg { width: 16px; height: 16px; fill: currentColor; } .drawer-meta-info { font-size: 13px; color: #6B7280; line-height: 1.5; } .drawer-meta-info strong { color: #121212; } .drawer-social-row { display: flex; align-items: center; gap: 16px; padding-top: 8px; } .drawer-social-link { color: #4B5563; transition: color 0.2s; } .drawer-social-link:hover { color: #003269; } .drawer-social-link svg { width: 20px; height: 20px; fill: currentColor; } /* ======================================================== */ /* SITE FOOTER STYLES */ /* ======================================================== */ .site-footer { position: relative; width: 100%; background-color: #FFFFFF; border-top: 1px solid rgba(0, 0, 0, 0.1); font-family: 'Roboto', sans-serif; overflow: hidden; } .site-footer-upper { position: relative; padding: 80px 24px; } .site-footer-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.25; pointer-events: none; } .site-footer-container { position: relative; z-index: 10; max-width: 1520px; margin: 0 auto; } .site-footer-brand-center { text-align: center; max-width: 780px; margin: 0 auto 56px; } .site-footer-brand-center img { height: 56px; width: auto; object-fit: contain; margin: 0 auto 20px; display: block; } .site-footer-title { font-family: 'Philosopher', serif; font-weight: 700; font-size: 28px; line-height: 1.3; color: #121212; margin: 0 0 14px; } @media (min-width: 768px) { .site-footer-title { font-size: 34px; } } .site-footer-subtitle { font-size: 16px; line-height: 1.6; color: #4E4E4E; margin: 0 auto; } .site-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, 0.08); } @media (max-width: 1024px) { .site-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 640px) { .site-footer-grid { grid-template-columns: 1fr; gap: 32px; } } .footer-col-title { font-family: 'Philosopher', serif; font-weight: 700; font-size: 18px; color: #121212; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; } .footer-col-title-dot { width: 8px; height: 8px; border-radius: 9999px; background-color: #3D82D2; } .footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-list-link { font-size: 14px; color: #4E4E4E; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease, transform 0.15s ease; } .footer-list-link:hover { color: #003269; transform: translateX(3px); } .footer-list-link .bullet { color: #3D82D2; font-size: 14px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4E4E4E; margin-bottom: 12px; } .footer-contact-item svg { width: 16px; height: 16px; fill: #3D82D2; flex-shrink: 0; margin-top: 2px; } .footer-contact-item a { color: #121212; text-decoration: none; font-weight: 500; transition: color 0.2s; } .footer-contact-item a:hover { color: #003269; } /* Footer Bottom Bar */ .site-footer-bottom { background-color: #00173F; color: #EDEDED; padding: 20px 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; } .site-footer-bottom-inner { max-width: 1520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } @media (max-width: 768px) { .site-footer-bottom-inner { flex-direction: column; text-align: center; } } .footer-attribution { color: rgba(255, 255, 255, 0.8); } .footer-attribution a { color: #F9A8D4; text-decoration: none; font-weight: 500; } .footer-attribution a:hover { text-decoration: underline; } .footer-bottom-badge { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.7); font-size: 12px; } /* ======================================================== HOMEPAGE COMPILED STATIC CSS (Zero Runtime Overhead) Replaces 350KB client-side Tailwind Play CDN ======================================================== */ /* Colors */ .bg-\[\#FBFBFB\] { background-color: #FBFBFB; } .bg-\[\#F8FAFC\] { background-color: #F8FAFC; } .bg-\[\#F0F5FA\] { background-color: #F0F5FA; } .bg-\[\#003269\] { background-color: #003269; } .bg-\[\#121212\] { background-color: #121212; } .bg-\[\#3D82D2\] { background-color: #3D82D2; } .bg-white { background-color: #ffffff; } .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); } .bg-\[\#0000001C\] { background-color: rgba(0, 0, 0, 0.11); } .text-\[\#4E4E4E\] { color: #4E4E4E; } .text-\[\#121212\] { color: #121212; } .text-\[\#003269\] { color: #003269; } .text-\[\#3D82D2\] { color: #3D82D2; } .text-white { color: #ffffff; } .text-stone-300 { color: #d6d3d1; } .text-gray-500 { color: #6b7280; } .text-gray-900 { color: #111827; } .text-amber-400 { color: #fbbf24; } .text-amber-500 { color: #f59e0b; } /* Font Families & Weights */ .font-philosopher { font-family: 'Philosopher', serif; } .font-roboto { font-family: 'Roboto', sans-serif; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } /* Typography Sizes & Leading */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-\[13px\] { font-size: 13px; } .text-\[15px\] { font-size: 15px; } .text-\[32px\] { font-size: 32px; } .text-\[38px\] { font-size: 38px; } .text-\[1\.15rem\] { font-size: 1.15rem; } .text-\[1\.2rem\] { font-size: 1.2rem; } .text-center { text-align: center; } .italic { font-style: italic; } .uppercase { text-transform: uppercase; } .whitespace-nowrap { white-space: nowrap; } .break-all { word-break: break-all; } .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } .leading-\[1\.12\] { line-height: 1.12; } .leading-\[1\.18\] { line-height: 1.18; } .leading-\[1\.68\] { line-height: 1.68; } .leading-\[1\.7\] { line-height: 1.7; } .tracking-\[-0\.01em\] { letter-spacing: -0.01em; } .tracking-\[0\.03em\] { letter-spacing: 0.03em; } .tracking-\[0\.04em\] { letter-spacing: 0.04em; } .tracking-\[0\.15em\] { letter-spacing: 0.15em; } .tracking-wide { letter-spacing: 0.025em; } /* Borders & Dividers */ .border { border: 1px solid #e5e7eb; } .border-b { border-bottom: 1px solid #e5e7eb; } .border-t { border-top: 1px solid #e5e7eb; } .border-l { border-left: 1px solid #e5e7eb; } .border-\[\#EDEDED\] { border-color: #EDEDED; } .border-\[\#EDEDED\]\/80 { border-color: rgba(237, 237, 237, 0.8); } .border-\[\#C9E2FF\] { border-color: #C9E2FF; } .border-black\/10 { border-color: rgba(0, 0, 0, 0.1); } .border-gray-100 { border-color: #f3f4f6; } .border-gray-200 { border-color: #e5e7eb; } .border-gray-200\/60 { border-color: rgba(229, 231, 235, 0.6); } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } /* Display & Flexbox */ .flex { display: flex; } .inline-flex { display: inline-flex; } .hidden { display: none; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .shrink-0 { flex-shrink: 0; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .space-x-9 > :not([hidden]) ~ :not([hidden]) { margin-left: 2.25rem; } /* Grid Layouts */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* Sizing */ .w-full { width: 100%; } .w-4 { width: 1rem; } .w-6 { width: 1.5rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-20 { width: 5rem; } .h-full { height: 100%; } .h-auto { height: auto; } .h-4 { height: 1rem; } .h-6 { height: 1.5rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-20 { height: 5rem; } .h-40 { height: 10rem; } .h-\[1px\] { height: 1px; } .min-h-screen { min-height: 100vh; } .min-w-0 { min-width: 0px; } .min-w-\[70px\] { min-width: 70px; } .min-w-\[95px\] { min-width: 95px; } .max-w-2xl { max-width: 42rem; } .max-w-\[520px\] { max-width: 520px; } .max-w-\[550px\] { max-width: 550px; } .max-w-\[560px\] { max-width: 560px; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[620px\] { max-width: 620px; } .max-w-\[1380px\] { max-width: 1380px; } .max-w-\[1520px\] { max-width: 1520px; } /* Padding & Margin */ .p-3 { padding: 0.75rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .pb-2 { padding-bottom: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pl-3 { padding-left: 0.75rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-14 { margin-bottom: 3.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .ml-1 { margin-left: 0.25rem; } .-ml-6 { margin-left: -1.5rem; } /* Positioning & Shadows */ .relative { position: relative; } .absolute { position: absolute; } .inset-0 { inset: 0; } .z-10 { z-index: 10; } .overflow-hidden { overflow: hidden; } .overflow-x-hidden { overflow-x: hidden; } .pointer-events-none { pointer-events: none; } .select-none { user-select: none; } .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); } .aspect-\[4\/5\] { aspect-ratio: 4 / 5; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .fill-current { fill: currentColor; } .underline { text-decoration-line: underline; } .decoration-\[\#3D82D2\] { text-decoration-color: #3D82D2; } /* Transitions & Transforms */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } /* Hover States */ .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .hover\:text-\[\#3D82D2\]:hover { color: #3D82D2; } .hover\:text-\[\#1F6AC2\]:hover { color: #1F6AC2; } .hover\:-translate-y-1\.5:hover { transform: translateY(-0.375rem); } .group:hover .group-hover\:scale-105 { transform: scale(1.05); } .group:hover .group-hover\:bg-\[\#E2EDF9\] { background-color: #E2EDF9; } .group:hover .group-hover\:text-\[\#3D82D2\] { color: #3D82D2; } .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); } /* Gradients */ .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops, transparent)); } .from-black\/20 { --tw-gradient-from: rgba(0, 0, 0, 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); } .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0)); } .to-transparent { --tw-gradient-to: transparent; } /* Responsive Breakpoints */ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:justify-start { justify-content: flex-start; } .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .sm\:p-7 { padding: 1.75rem; } .sm\:w-40 { width: 10rem; } .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; } .sm\:text-base { font-size: 1rem; line-height: 1.5rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-\[15px\] { font-size: 15px; } .sm\:text-\[16px\] { font-size: 16px; } .sm\:text-\[1\.25rem\] { font-size: 1.25rem; } .sm\:text-\[1\.3rem\] { font-size: 1.3rem; } .sm\:text-\[40px\] { font-size: 40px; } .sm\:text-\[46px\] { font-size: 46px; } } @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-12 { grid-column: span 12 / span 12; } .lg\:gap-8 { gap: 2rem; } .lg\:gap-14 { gap: 3.5rem; } .lg\:gap-16 { gap: 4rem; } .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .lg\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .lg\:mb-16 { margin-bottom: 4rem; } .lg\:min-h-\[745px\] { min-height: 745px; } .lg\:justify-end { justify-content: flex-end; } .lg\:text-\[44px\] { font-size: 44px; } .lg\:text-\[46px\] { font-size: 46px; } .lg\:text-\[52px\] { font-size: 52px; } } @media (min-width: 1280px) { .xl\:flex { display: flex; } .xl\:hidden { display: none; } .xl\:col-span-1 { grid-column: span 1 / span 1; } .xl\:col-span-5 { grid-column: span 5 / span 5; } .xl\:col-span-6 { grid-column: span 6 / span 6; } .xl\:max-w-\[700px\] { max-width: 700px; } .xl\:text-\[56px\] { font-size: 56px; } } @media (min-width: 1536px) { .2xl\:max-w-\[740px\] { max-width: 740px; } } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection, .selection\:bg-\[\#3D82D2\]::selection { background-color: #3D82D2; } .selection\:text-white::selection { color: #ffffff; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; }