*,
:before,
:after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}
*,
:before,
:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}
:before,
:after {
--tw-content: ""
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent
}
body {
margin: 0;
line-height: inherit
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
} b,
strong {
font-weight: bolder
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
:-moz-focusring {
outline: auto
}
:-moz-ui-invalid {
box-shadow: none
}
progress {
vertical-align: baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
summary {
display: list-item
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0
}
fieldset {
margin: 0;
padding: 0
}
legend {
padding: 0
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0
}
dialog {
padding: 0
}
textarea {
resize: vertical
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af
}
button,
[role=button] {
cursor: pointer
}
:disabled {
cursor: default
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle
}
img,
video {
max-width: 100%;
height: auto
}
[hidden]:where(:not([hidden=until-found])) {
display: none
}
.container {
width: 100%
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.fixed {
position: fixed
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0
}
.-top-4 {
top: -1rem
}
.left-1\/2 {
left: 50%
}
.top-0 {
top: 0
}
.z-50 {
z-index: 50
}
.m-1 {
margin: .25rem
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mb-1 {
margin-bottom: .25rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-3 {
margin-bottom: .75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.ml-1 {
margin-left: .25rem
}
.ml-2 {
margin-left: .5rem
}
.mr-2 {
margin-right: .5rem
}
.mr-3 {
margin-right: .75rem
}
.mr-4 {
margin-right: 1rem
}
.mt-0\.5 {
margin-top: .125rem
}
.mt-1 {
margin-top: .25rem
}
.mt-12 {
margin-top: 3rem
}
.mt-2 {
margin-top: .5rem
}
.mt-4 {
margin-top: 1rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.grid {
display: grid
}
.hidden {
display: none
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-14 {
height: 3.5rem
}
.h-16 {
height: 4rem
}
.h-2 {
height: .5rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.h-6 {
height: 1.5rem
}
.h-7 {
height: 1.75rem
}
.h-8 {
height: 2rem
}
.h-\[500px\] {
height: 500px
}
.min-h-screen {
min-height: 100vh
}
.w-10 {
width: 2.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-16 {
width: 4rem
}
.w-2 {
width: .5rem
}
.w-4 {
width: 1rem
}
.w-5 {
width: 1.25rem
}
.w-6 {
width: 1.5rem
}
.w-7 {
width: 1.75rem
}
.w-8 {
width: 2rem
}
.w-full {
width: 100%
}
.max-w-2xl {
max-width: 42rem
}
.max-w-3xl {
max-width: 48rem
}
.max-w-4xl {
max-width: 56rem
}
.max-w-5xl {
max-width: 64rem
}
.max-w-6xl {
max-width: 72rem
}
.max-w-7xl {
max-width: 80rem
}
.flex-shrink-0 {
flex-shrink: 0
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}
.cursor-pointer {
cursor: pointer
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.flex-col {
flex-direction: column
}
.flex-wrap {
flex-wrap: wrap
}
.items-start {
align-items: flex-start
}
.items-center {
align-items: center
}
.items-baseline {
align-items: baseline
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-12 {
gap: 3rem
}
.gap-4 {
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.space-x-2>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(.5rem * var(--tw-space-x-reverse));
margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-x-6>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-y-1>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
}
.space-y-2>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}
.space-y-3>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
}
.space-y-4>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
.space-y-6>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.overflow-hidden {
overflow: hidden
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-lg {
border-radius: .5rem
}
.rounded-xl {
border-radius: .75rem
}
.border {
border-width: 1px
}
.border-2 {
border-width: 2px
}
.border-b {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-l-4 {
border-left-width: 4px
}
.border-t {
border-top-width: 1px
}
.border-t-4 {
border-top-width: 4px
}
.border-amber-200 {
--tw-border-opacity: 1;
border-color: rgb(253 230 138 / var(--tw-border-opacity, 1))
}
.border-amber-300 {
--tw-border-opacity: 1;
border-color: rgb(252 211 77 / var(--tw-border-opacity, 1))
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity, 1))
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1))
}
.border-emerald-200 {
--tw-border-opacity: 1;
border-color: rgb(167 243 208 / var(--tw-border-opacity, 1))
}
.border-emerald-400\/30 {
border-color: #34d3994d
}
.border-emerald-500 {
--tw-border-opacity: 1;
border-color: rgb(16 185 129 / var(--tw-border-opacity, 1))
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity, 1))
}
.border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1))
}
.border-orange-200 {
--tw-border-opacity: 1;
border-color: rgb(254 215 170 / var(--tw-border-opacity, 1))
}
.border-orange-400\/30 {
border-color: #fb923c4d
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity, 1))
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.border-red-600 {
--tw-border-opacity: 1;
border-color: rgb(220 38 38 / var(--tw-border-opacity, 1))
}
.border-slate-200 {
--tw-border-opacity: 1;
border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}
.border-slate-300 {
--tw-border-opacity: 1;
border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
}
.border-slate-400\/30 {
border-color: #94a3b84d
}
.border-slate-500 {
--tw-border-opacity: 1;
border-color: rgb(100 116 139 / var(--tw-border-opacity, 1))
}
.border-slate-600 {
--tw-border-opacity: 1;
border-color: rgb(71 85 105 / var(--tw-border-opacity, 1))
}
.border-transparent {
border-color: transparent
}
.border-white\/20 {
border-color: #fff3
}
.border-white\/30 {
border-color: #ffffff4d
}
.border-yellow-400 {
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity, 1))
}
.bg-amber-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1))
}
.bg-amber-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1))
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
}
.bg-emerald-100 {
--tw-bg-opacity: 1;
background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1))
}
.bg-emerald-50 {
--tw-bg-opacity: 1;
background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1))
}
.bg-emerald-500\/20 {
background-color: #10b98133
}
.bg-emerald-600 {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1))
}
.bg-emerald-800 {
--tw-bg-opacity: 1;
background-color: rgb(6 95 70 / var(--tw-bg-opacity, 1))
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}
.bg-orange-100 {
--tw-bg-opacity: 1;
background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}
.bg-orange-500\/20 {
background-color: #f9731633
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))
}
.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}
.bg-slate-400 {
--tw-bg-opacity: 1;
background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1))
}
.bg-slate-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}
.bg-slate-500 {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1))
}
.bg-slate-500\/20 {
background-color: #64748b33
}
.bg-slate-600 {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1))
}
.bg-slate-600\/40 {
background-color: #47556966
}
.bg-slate-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.bg-white\/10 {
background-color: #ffffff1a
}
.bg-white\/95 {
background-color: #fffffff2
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1))
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.from-blue-400 {
--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-50 {
--tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-600 {
--tw-gradient-from: #059669 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-300 {
--tw-gradient-from: #d1d5db var(--tw-gradient-from-position);
--tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-50 {
--tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-500 {
--tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-600 {
--tw-gradient-from: #4b5563 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-900 {
--tw-gradient-from: #111827 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-100 {
--tw-gradient-from: #ffedd5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-400 {
--tw-gradient-from: #fb923c var(--tw-gradient-from-position);
--tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-50 {
--tw-gradient-from: #fff7ed var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 247 237 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-600 {
--tw-gradient-from: #ea580c var(--tw-gradient-from-position);
--tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-900 {
--tw-gradient-from: #7c2d12 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(124 45 18 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-red-50 {
--tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(254 242 242 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-100 {
--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-50 {
--tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
--tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-500 {
--tw-gradient-from: #64748b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-600 {
--tw-gradient-from: #475569 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-slate-900 {
--tw-gradient-from: #0f172a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-yellow-400 {
--tw-gradient-from: #facc15 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.via-gray-800 {
--tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-orange-800 {
--tw-gradient-to: rgb(154 52 18 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #9a3412 var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-slate-500 {
--tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #64748b var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.to-blue-50 {
--tw-gradient-to: #eff6ff var(--tw-gradient-to-position)
}
.to-blue-500 {
--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)
}
.to-blue-600 {
--tw-gradient-to: #2563eb var(--tw-gradient-to-position)
}
.to-emerald-900 {
--tw-gradient-to: #064e3b var(--tw-gradient-to-position)
}
.to-gray-100 {
--tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position)
}
.to-gray-400 {
--tw-gradient-to: #9ca3af var(--tw-gradient-to-position)
}
.to-gray-50 {
--tw-gradient-to: #f9fafb var(--tw-gradient-to-position)
}
.to-gray-600 {
--tw-gradient-to: #4b5563 var(--tw-gradient-to-position)
}
.to-gray-800 {
--tw-gradient-to: #1f2937 var(--tw-gradient-to-position)
}
.to-green-50 {
--tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position)
}
.to-orange-50 {
--tw-gradient-to: #fff7ed var(--tw-gradient-to-position)
}
.to-orange-500 {
--tw-gradient-to: #f97316 var(--tw-gradient-to-position)
}
.to-red-100 {
--tw-gradient-to: #fee2e2 var(--tw-gradient-to-position)
}
.to-red-50 {
--tw-gradient-to: #fef2f2 var(--tw-gradient-to-position)
}
.to-red-500 {
--tw-gradient-to: #ef4444 var(--tw-gradient-to-position)
}
.to-red-600 {
--tw-gradient-to: #dc2626 var(--tw-gradient-to-position)
}
.to-red-900 {
--tw-gradient-to: #7f1d1d var(--tw-gradient-to-position)
}
.to-slate-100 {
--tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position)
}
.to-slate-50 {
--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)
}
.to-slate-600 {
--tw-gradient-to: #475569 var(--tw-gradient-to-position)
}
.to-slate-700 {
--tw-gradient-to: #334155 var(--tw-gradient-to-position)
}
.to-slate-800 {
--tw-gradient-to: #1e293b var(--tw-gradient-to-position)
}
.fill-yellow-400 {
fill: #facc15
}
.p-2 {
padding: .5rem
}
.p-4 {
padding: 1rem
}
.p-6 {
padding: 1.5rem
}
.p-8 {
padding: 2rem
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.pb-16 {
padding-bottom: 4rem
}
.pb-3 {
padding-bottom: .75rem
}
.pl-8 {
padding-left: 2rem
}
.pt-24 {
padding-top: 6rem
}
.pt-4 {
padding-top: 1rem
}
.pt-6 {
padding-top: 1.5rem
}
.pt-8 {
padding-top: 2rem
}
.text-center {
text-align: center
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.italic {
font-style: italic
}
.leading-tight {
line-height: 1.25
}
.text-amber-700 {
--tw-text-opacity: 1;
color: rgb(180 83 9 / var(--tw-text-opacity, 1))
}
.text-amber-800 {
--tw-text-opacity: 1;
color: rgb(146 64 14 / var(--tw-text-opacity, 1))
}
.text-blue-100 {
--tw-text-opacity: 1;
color: rgb(219 234 254 / var(--tw-text-opacity, 1))
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1))
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity, 1))
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity, 1))
}
.text-emerald-100 {
--tw-text-opacity: 1;
color: rgb(209 250 229 / var(--tw-text-opacity, 1))
}
.text-emerald-200 {
--tw-text-opacity: 1;
color: rgb(167 243 208 / var(--tw-text-opacity, 1))
}
.text-emerald-400 {
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}
.text-emerald-500 {
--tw-text-opacity: 1;
color: rgb(16 185 129 / var(--tw-text-opacity, 1))
}
.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}
.text-emerald-700 {
--tw-text-opacity: 1;
color: rgb(4 120 87 / var(--tw-text-opacity, 1))
}
.text-emerald-800 {
--tw-text-opacity: 1;
color: rgb(6 95 70 / var(--tw-text-opacity, 1))
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1))
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1))
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1))
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1))
}
.text-orange-100 {
--tw-text-opacity: 1;
color: rgb(255 237 213 / var(--tw-text-opacity, 1))
}
.text-orange-200 {
--tw-text-opacity: 1;
color: rgb(254 215 170 / var(--tw-text-opacity, 1))
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity, 1))
}
.text-orange-600 {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity, 1))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1))
}
.text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}
.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}
.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}
.text-slate-700 {
--tw-text-opacity: 1;
color: rgb(51 65 85 / var(--tw-text-opacity, 1))
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity, 1))
}
.opacity-10 {
opacity: .1
}
.opacity-20 {
opacity: .2
}
.opacity-75 {
opacity: .75
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-300 {
transition-duration: .3s
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
}
.hover\:bg-emerald-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1))
}
.hover\:bg-emerald-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1))
}
.hover\:bg-emerald-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(6 78 59 / var(--tw-bg-opacity, 1))
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.hover\:bg-orange-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1))
}
.hover\:bg-slate-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1))
}
.hover\:bg-slate-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
}
.hover\:bg-white\/20:hover {
background-color: #fff3
}
.hover\:text-emerald-400:hover {
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}
.hover\:text-emerald-600:hover {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}
.hover\:text-emerald-700:hover {
--tw-text-opacity: 1;
color: rgb(4 120 87 / var(--tw-text-opacity, 1))
}
.hover\:text-emerald-800:hover {
--tw-text-opacity: 1;
color: rgb(6 95 70 / var(--tw-text-opacity, 1))
}
.hover\:text-orange-400:hover {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity, 1))
}
.hover\:text-slate-400:hover {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}
.hover\:text-slate-800:hover {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:shadow-emerald-500\/50:hover {
--tw-shadow-color: rgb(16 185 129 / .5);
--tw-shadow: var(--tw-shadow-colored)
}
.hover\:shadow-orange-500\/50:hover {
--tw-shadow-color: rgb(249 115 22 / .5);
--tw-shadow: var(--tw-shadow-colored)
}
.hover\:shadow-slate-500\/50:hover {
--tw-shadow-color: rgb(100 116 139 / .5);
--tw-shadow: var(--tw-shadow-colored)
}
.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: .25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
.group:hover .group-hover\:opacity-100 {
opacity: 1
}
@media (min-width: 640px) {
.sm\:flex-row {
flex-direction: row
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.md\:pb-24 {
padding-bottom: 6rem
}
.md\:pt-32 {
padding-top: 8rem
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--a1-dark: #111827;
--a1-dark-2: #1f2937;
--a1-green: #10b981;
--a1-green-dark: #059669;
--a1-green-soft: #d1fae5;
--a1-text: #333333;
--a1-text-soft: #4b5563;
--a1-border: #e5e7eb;
--a1-white: #ffffff;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: var(--a1-text);
padding-top: 0;
background: #fff;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.a1-header {
position: sticky;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
z-index: 10;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.a1-header-content {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.5rem;
padding: 1rem 0;
}
.a1-logo-link {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
.a1-logo-link img {
max-height: 52px;
width: auto;
}
.a1-logo-text h1 {
font-size: 1.2rem;
color: #111827;
margin: 0;
line-height: 1.2;
}
.a1-logo-text p {
font-size: 0.75rem;
color: #059669;
margin: 0;
}
.a1-nav {
display: flex;
justify-content: center;
}
.a1-nav-menu {
list-style: none;
display: flex;
align-items: center;
gap: 1.25rem;
margin: 0;
padding: 0;
}
.a1-nav-menu,
.a1-nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.a1-nav-menu>li {
position: relative;
}
.a1-nav-menu>li>a {
display: inline-flex;
align-items: center;
padding: 0.85rem 0.25rem;
text-decoration: none;
color: #111827;
font-weight: 600;
transition: 0.3s;
position: relative;
}
.a1-nav-menu>li>a:hover,
.a1-nav-menu>li.current-menu-item>a,
.a1-nav-menu>li.current-menu-ancestor>a {
color: #059669;
}
.a1-nav-menu>li>a::after {
content: "";
position: absolute;
left: 0;
bottom: 6px;
width: 0;
height: 2px;
background: #059669;
transition: 0.3s ease;
}
.a1-nav-menu>li>a:hover::after,
.a1-nav-menu>li.current-menu-item>a::after,
.a1-nav-menu>li.current-menu-ancestor>a::after {
width: 100%;
} .a1-nav-menu .menu-item-has-children>a {
padding-right: 1rem;
}
.a1-nav-menu .menu-item-has-children>a::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s ease;
} .a1-nav-menu li ul {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 230px;
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: 0.25s ease;
z-index: 99;
}
.a1-nav-menu li:hover>ul,
.a1-nav-menu li:focus-within>ul,
.a1-nav-menu li.submenu-open>ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.a1-nav-menu li:hover>a::before,
.a1-nav-menu li:focus-within>a::before,
.a1-nav-menu li.submenu-open>a::before {
transform: rotate(225deg) translateY(1px);
}
.a1-nav-menu li ul li {
position: relative;
}
.a1-nav-menu li ul a {
display: block;
padding: 0.75rem 1rem;
color: #374151;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: 0.25s ease;
}
.a1-nav-menu li ul a:hover,
.a1-nav-menu li ul li.current-menu-item>a,
.a1-nav-menu li ul li.current-menu-ancestor>a {
background: #f9fafb;
color: #059669;
} .a1-nav-menu li ul li ul {
top: 0;
left: calc(100% + 10px);
}
.a1-header-right {
display: flex;
align-items: center;
gap: 1rem;
}
.a1-phone-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #4b5563;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
}
.a1-phone-link:hover {
color: #059669;
}
.a1-quote-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.2rem;
border-radius: 10px;
background: #ef4444;
color: #fff;
border: none;
font-weight: 700;
cursor: pointer;
transition: 0.25s ease;
white-space: nowrap;
}
.a1-quote-btn:hover {
background: #dc2626;
}
.a1-menu-toggle {
display: none;
background: none;
border: 0;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
}
.a1-menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: #111827;
margin: 5px auto;
transition: 0.3s;
} .a1-submenu-toggle {
display: none;
} @media (max-width: 991px) {
.a1-header-content {
grid-template-columns: auto auto;
}
.a1-menu-toggle {
display: block;
justify-self: end;
}
.a1-nav {
display: none;
grid-column: 1 / -1;
width: 100%;
justify-content: flex-start;
border-top: 1px solid #e5e7eb;
padding-top: 1rem;
}
.a1-nav.active {
display: block;
}
.a1-nav-menu {
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
.a1-nav-menu>li {
width: 100%;
border-bottom: 1px solid #f1f5f9;
}
.a1-nav-menu>li>a {
width: 100%;
padding: 0.95rem 0;
}
.a1-nav-menu>li>a::after,
.a1-nav-menu .menu-item-has-children>a::before {
display: none;
}
.a1-nav-menu li.menu-item-has-children {
position: relative;
}
.a1-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.55rem;
right: 0;
width: 38px;
height: 38px;
border: 0;
background: transparent;
cursor: pointer;
}
.a1-submenu-toggle::before,
.a1-submenu-toggle::after {
content: "";
position: absolute;
width: 12px;
height: 2px;
background: #111827;
transition: 0.25s ease;
}
.a1-submenu-toggle::after {
transform: rotate(90deg);
}
.a1-nav-menu li.submenu-open>.a1-submenu-toggle::after {
transform: rotate(0);
opacity: 0;
}
.a1-nav-menu li ul {
position: static;
min-width: 100%;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: 0;
border-radius: 0;
padding: 0 0 0.75rem 1rem;
display: none;
background: transparent;
}
.a1-nav-menu li.submenu-open>ul {
display: block;
}
.a1-nav-menu li ul li ul {
left: 0;
}
.a1-nav-menu li ul a {
padding: 0.5rem 0;
}
.a1-header-right {
display: none;
}
} .hero {
position: relative;
padding: 8rem 0 4rem;
background: linear-gradient(to bottom right, #111827, #1f2937, #065f46);
color: white;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
opacity: 0.1;
background-image: url(https://images.pexels.com/photos/5217882/pexels-photo-5217882.jpeg?auto=compress&cs=tinysrgb&w=1920);
background-size: cover;
background-position: center;
}
.hero-content {
position: relative;
text-align: center;
max-width: 64rem;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(16, 185, 129, 0.2);
backdrop-filter: blur(10px);
padding: 0.5rem 1rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.hero h2 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero h2 span {
display: block;
color: #6ee7b7;
}
.hero-subtitle {
font-size: 1.5rem;
color: #d1d5db;
margin-bottom: 1rem;
}
.hero-text {
font-size: 1.125rem;
color: #9ca3af;
margin-bottom: 2.5rem;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 2rem;
border-radius: 0.75rem;
font-weight: bold;
font-size: 1.125rem;
text-decoration: none;
transition: all 0.3s;
cursor: pointer;
border: none;
}
.btn-primary {
background: #10b981;
color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.btn-primary:hover {
background: #059669;
box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.5), 0 10px 10px -5px rgba(16, 185, 129, 0.3);
transform: scale(1.05);
color: #fff;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.btn-sm {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
max-width: 48rem;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
}
.feature-icon {
margin-bottom: 0.5rem;
}
.feature-card p {
font-size: 0.875rem;
font-weight: 500;
} section {
padding: 4rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h3 {
font-size: 2.25rem;
font-weight: bold;
color: #111827;
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.25rem;
color: #4b5563;
}
.bg-emerald {
background: #ecfdf5;
}
.bg-white {
background: #fff;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
align-items: center;
}
.card {
background: #fff;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.benefit-card {
border-top: 4px solid #10b981;
}
.card-icon {
width: 4rem;
height: 4rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.card h4 {
font-size: 1.5rem;
color: #111827;
margin-bottom: 1rem;
}
.card p {
color: #4b5563;
margin-bottom: 1rem;
}
.checkmark-list {
list-style: none;
padding: 0;
}
.checkmark-list li {
display: flex;
align-items: flex-start;
margin-bottom: 0.5rem;
color: #374151;
}
.checkmark-list li::before {
content: "✓";
color: #10b981;
font-weight: bold;
margin-right: 0.5rem;
flex-shrink: 0;
} .prices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 80rem;
margin: 0 auto;
}
.price-card {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
cursor: pointer;
transition: opacity 0.3s;
text-decoration: none;
}
.price-card:hover {
opacity: 0.9;
}
.price-card-bg {
position: absolute;
inset: 0;
opacity: 0.75;
transition: opacity 0.3s;
}
.price-card:hover .price-card-bg {
opacity: 1;
}
.price-card-content {
position: relative;
background: #fff;
border-radius: 0.75rem;
padding: 1.5rem;
margin: 1px;
border: 2px solid transparent;
transition: border-color 0.3s;
}
.price-card:hover .price-card-content {
border-color: #fff;
}
.price-card h4 {
font-size: 1.25rem;
color: #111827;
margin-bottom: 0.5rem;
}
.price-amount {
font-size: 1.875rem;
font-weight: bold;
color: #059669;
}
.price-unit {
color: #4b5563;
margin-left: 0.5rem;
}
.price-detail-link {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.5rem;
}
.price-note {
text-align: center;
margin-top: 2rem;
}
.price-note p {
font-size: 0.875rem;
color: #6b7280;
} .location-card {
background: linear-gradient(to bottom right, #ecfdf5, #dbeafe);
}
.location-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.location-content {
margin-top: 1.5rem;
}
.label {
font-weight: 600;
color: #111827;
margin-bottom: 0.5rem;
}
.label-flex {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mb-lg {
margin-bottom: 1rem;
}
.location-block {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.contact-inline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #059669;
font-weight: 600;
text-decoration: none;
}
.closed-text {
color: #dc2626 !important;
font-weight: 600;
}
.map-container {
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
height: 500px;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
} .a1-footer {
background: #111827;
color: #9ca3af;
padding: 3rem 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.a1-footer h5 {
color: #fff;
font-weight: 600;
margin-bottom: 1rem;
}
.a1-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.a1-footer li {
margin-bottom: 0.5rem;
}
.a1-footer a {
color: #9ca3af;
text-decoration: none;
transition: color 0.3s;
}
.a1-footer a:hover {
color: #10b981;
}
.footer-brand {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.footer-brand span {
color: #fff;
font-weight: bold;
}
.footer-text {
font-size: 0.875rem;
}
.footer-contact-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-bottom {
border-top: 1px solid #1f2937;
padding-top: 2rem;
text-align: center;
font-size: 0.875rem;
} @media (max-width: 991px) {
.a1-header-content {
grid-template-columns: auto auto;
}
.a1-menu-toggle {
display: block;
justify-self: end;
}
.a1-nav {
display: none;
grid-column: 1 / -1;
width: 100%;
justify-content: flex-start;
}
.a1-nav.active {
display: block;
}
.a1-nav-menu {
flex-direction: column;
align-items: flex-start;
padding-top: 1rem;
gap: 0.75rem;
}
.a1-header-right {
display: none;
}
.hero h2 {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.section-header h3 {
font-size: 1.875rem;
}
}
@media (max-width: 768px) {
.hero {
padding: 7rem 0 3rem;
}
.button-group {
flex-direction: column;
align-items: stretch;
}
.btn {
justify-content: center;
width: 100%;
}
.map-container {
height: 360px;
}
}
.a1-protected-page {
padding: 80px 0;
background: linear-gradient(to bottom right, #f8fafc, #eef2ff);
}
.a1-protected-card {
max-width: 560px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 24px;
padding: 40px 32px;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
text-align: center;
}
.a1-protected-icon {
width: 68px;
height: 68px;
border-radius: 999px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background: #ecfdf5;
color: #059669;
}
.a1-protected-title {
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
color: #111827;
margin: 0 0 12px;
}
.a1-protected-text {
font-size: 1rem;
color: #6b7280;
margin: 0 0 24px;
}
.a1-protected-form {
text-align: left;
}
.a1-protected-label {
display: block;
font-weight: 600;
color: #111827;
margin-bottom: 10px;
}
.a1-protected-input-group {
display: flex;
gap: 12px;
}
.a1-protected-input {
flex: 1;
height: 52px;
border: 1px solid #d1d5db;
border-radius: 14px;
padding: 0 16px;
font-size: 1rem;
color: #111827;
background: #fff;
outline: none;
transition: 0.2s ease;
}
.a1-protected-input:focus {
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.a1-protected-button {
height: 52px;
padding: 0 22px;
border: 0;
border-radius: 14px;
background: #059669;
color: #fff;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
white-space: nowrap;
}
.a1-protected-button:hover {
background: #047857;
}
@media (max-width: 640px) {
.a1-protected-page {
padding: 56px 0;
}
.a1-protected-card {
padding: 28px 20px;
border-radius: 18px;
}
.a1-protected-title {
font-size: 1.6rem;
}
.a1-protected-input-group {
flex-direction: column;
}
.a1-protected-button {
width: 100%;
}
} .a1-blog-hero { color: #fff;
padding: 70px 0 60px;
padding-top: 115px;
}
.a1-blog-hero--single {
padding: 60px 0 50px;
padding-top: 115px;
}
.a1-blog-breadcrumb {
margin-bottom: 14px;
font-size: 14px;
opacity: .9;
}
.a1-blog-breadcrumb a {
color: #fff;
text-decoration: none;
}
.a1-blog-breadcrumb span {
margin: 0 6px;
}
.a1-blog-hero__title {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 14px;
}
.a1-blog-hero__desc,
.a1-blog-single__meta {
font-size: 16px;
color: rgba(255, 255, 255, .9);
}
.a1-blog-section {
padding: 60px 0;
background: #f8fafc;
}
.a1-blog-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
height: 100%;
transition: transform .25s ease, box-shadow .25s ease;
}
.a1-blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
.a1-blog-card__image-wrap {
display: block;
}
.a1-blog-card__image {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
}
.a1-blog-card__body {
padding: 22px;
}
.a1-blog-card__meta {
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.a1-blog-card__title {
font-size: 22px;
line-height: 1.35;
margin-bottom: 12px;
}
.a1-blog-card__title a {
color: #222;
text-decoration: none;
}
.a1-blog-card__title a:hover {
color: rgb(52, 211, 153);
}
.a1-blog-card__excerpt {
color: #555;
font-size: 15px;
line-height: 1.7;
margin-bottom: 16px;
}
.a1-blog-card__btn {
display: inline-block;
background: rgb(52, 211, 153);
color: #fff;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
}
.a1-blog-card__btn:hover {
background: #4B3621;
color: #fff;
text-decoration: none;
}
.a1-blog-sidebar .a1-sidebar-box {
background: #fff;
border-radius: 14px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
margin-bottom: 24px;
}
.a1-sidebar-box__title {
font-size: 22px;
margin-bottom: 18px;
color: #222;
}
.a1-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.a1-sidebar-list li {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.a1-sidebar-list li:last-child {
border-bottom: 0;
}
.a1-sidebar-list a {
color: #333;
text-decoration: none;
}
.a1-sidebar-list a:hover {
color: rgb(52, 211, 153);
}
.a1-blog-single {
background: #fff;
padding: 28px;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.a1-blog-single__thumb {
margin-bottom: 24px;
overflow: hidden;
border-radius: 14px;
}
.a1-blog-single__content {
font-size: 16px;
line-height: 1.9;
color: #333;
}
.a1-blog-single__content h2,
.a1-blog-single__content h3,
.a1-blog-single__content h4 {
margin-top: 26px;
margin-bottom: 14px;
color: #222;
}
.a1-blog-single__content img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.a1-blog-tags {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid #eee;
}
.a1-blog-tags a {
display: inline-block;
margin: 6px 6px 0 0;
padding: 6px 12px;
background: #f3f4f6;
border-radius: 20px;
color: #333;
text-decoration: none;
font-size: 13px;
}
.a1-post-nav {
margin-top: 30px;
}
.a1-post-nav__box {
display: block;
background: #fff;
padding: 18px;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
text-decoration: none;
color: #222;
height: 100%;
}
.a1-post-nav__box span {
display: block;
font-size: 13px;
color: #777;
margin-bottom: 6px;
}
.a1-post-nav__box strong {
font-size: 15px;
line-height: 1.5;
}
.a1-related-posts {
margin-top: 40px;
}
.a1-related-posts__title {
margin-bottom: 20px;
font-size: 28px;
color: #222;
}
.a1-blog-pagination {
margin-top: 28px;
}
.a1-blog-pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.a1-blog-pagination .page-numbers {
display: inline-block;
padding: 10px 14px;
background: #fff;
border-radius: 8px;
text-decoration: none;
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}
.a1-blog-pagination .page-numbers.current {
background: rgb(52, 211, 153);
color: #fff;
}
.a1-blog-empty {
background: #fff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
text-align: center;
}
@media (max-width: 991px) {
.a1-blog-hero__title {
font-size: 32px;
}
.a1-blog-section {
padding: 40px 0;
}
}
.a1-blog-container {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
}
.a1-blog-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: start;
}
.a1-blog-main {
min-width: 0;
}
.a1-blog-sidebar {
min-width: 0;
}
.a1-blog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.a1-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.a1-post-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 30px;
}
.a1-post-nav__box {
display: block;
background: #fff;
padding: 18px;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
text-decoration: none;
color: #222;
}
.a1-post-nav__box span {
display: block;
font-size: 13px;
color: #777;
margin-bottom: 6px;
}
.a1-post-nav__box strong {
font-size: 15px;
line-height: 1.5;
}
.a1-blog-card--small .a1-blog-card__image {
height: 180px;
}
.a1-blog-single__image {
width: 100%;
height: auto;
display: block;
}
.a1-blog-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: start;
}
.a1-blog-sidebar {
min-width: 0;
position: sticky;
top: 30px;
align-self: start;
}
.a1-search-form {
display: flex;
gap: 10px;
align-items: center;
}
.a1-search-form__label {
flex: 1;
margin: 0;
}
.a1-search-form__input {
width: 100%;
height: 48px;
border: 1px solid #d7d7d7;
border-radius: 12px;
padding: 0 16px;
font-size: 15px;
color: #222;
background: #fff;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.a1-search-form__input:focus {
border-color: rgb(52, 211, 153);
box-shadow: 0 0 0 3px rgba(117, 77, 38, 0.12);
}
.a1-search-form__button {
height: 48px;
padding: 0 18px;
border: 0;
border-radius: 12px;
background: rgb(52, 211, 153);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
white-space: nowrap;
}
.a1-search-form__button:hover {
background: #4B3621;
}
.a1-search-form__button:active {
transform: translateY(1px);
}
@media (max-width: 991px) {
.a1-blog-sidebar {
position: static;
top: auto;
}
.a1-search-form {
flex-direction: column;
align-items: stretch;
}
.a1-search-form__button {
width: 100%;
}
}
.a1-blog-sidebar .a1-sidebar-box {
background: #fff;
border-radius: 14px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
margin-bottom: 24px;
}
.a1-sidebar-box__title {
font-size: 22px;
margin: 0 0 18px;
color: #222;
}
@media (max-width: 991px) {
.a1-blog-layout {
grid-template-columns: 1fr;
}
.a1-blog-grid {
grid-template-columns: 1fr;
}
.a1-related-grid {
grid-template-columns: 1fr;
}
.a1-post-nav {
grid-template-columns: 1fr;
}
}
.a1-error-page {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.a1-error-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.a1-error-box {
background: #fff;
border-radius: 24px;
padding: 56px 32px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
border: 1px solid #ececec;
}
.a1-error-code {
display: inline-block;
font-size: 88px;
line-height: 1;
font-weight: 800;
color: #754D26;
margin-bottom: 18px;
}
.a1-error-title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
color: #1f2937;
margin: 0 0 14px;
}
.a1-error-text {
max-width: 620px;
margin: 0 auto 28px;
font-size: 17px;
line-height: 1.8;
color: #6b7280;
}
.a1-error-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 34px;
}
.a1-error-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
height: 48px;
padding: 0 20px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all .2s ease;
}
.a1-error-btn--primary {
background: #754D26;
color: #fff;
}
.a1-error-btn--primary:hover {
background: #4B3621;
color: #fff;
text-decoration: none;
}
.a1-error-btn--secondary {
background: #f3f4f6;
color: #111827;
}
.a1-error-btn--secondary:hover {
background: #e5e7eb;
color: #111827;
text-decoration: none;
}
.a1-error-search {
max-width: 520px;
margin: 0 auto;
padding-top: 22px;
border-top: 1px solid #ececec;
}
.a1-error-search__title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
margin: 0 0 14px;
}
@media (max-width: 767px) {
.a1-error-box {
padding: 40px 20px;
border-radius: 18px;
}
.a1-error-code {
font-size: 64px;
}
.a1-error-title {
font-size: 30px;
}
.a1-error-text {
font-size: 15px;
}
.a1-error-actions {
flex-direction: column;
}
.a1-error-btn {
width: 100%;
}
}
.a1-blog-single__content p {
margin-bottom: 15px;
}
.a1-blog-single__content ul {
margin-left: 15px;
list-style: disc;
margin-bottom: 15px;
}
a {
text-decoration: none;
}
.a1-page-container {
width: min(1000px, calc(100% - 32px));
margin: 0 auto;
}
.a1-page-hero { padding: 70px 0 60px;
color: #fff;
}
.a1-page-hero__inner {
max-width: 820px;
}
.a1-page-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
font-size: 14px;
color: rgba(255,255,255,.82);
}
.a1-page-breadcrumb a {
color: #fff;
text-decoration: none;
}
.a1-page-breadcrumb a:hover {
text-decoration: underline;
}
.a1-page-title {
margin: 0;
font-size: 44px;
line-height: 1.2;
font-weight: 800;
color: #fff;
}
.a1-page-section {
padding: 50px 0 70px;
background: #f8fafc;
}
.a1-page-article {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.a1-page-thumb {
line-height: 0;
}
.a1-page-thumb__image {
width: 100%;
height: auto;
display: block;
}
.a1-page-body {
padding: 36px;
color: #374151;
font-size: 17px;
line-height: 1.85;
}
.a1-page-body h2,
.a1-page-body h3,
.a1-page-body h4,
.a1-page-body h5,
.a1-page-body h6 {
color: #111827;
margin-top: 28px;
margin-bottom: 14px;
line-height: 1.35;
font-weight: 700;
}
.a1-page-body p {
margin: 0 0 18px;
}
.a1-page-body ul,
.a1-page-body ol {
margin: 0 0 18px 22px;
}
.a1-page-body li {
margin-bottom: 8px;
}
.a1-page-body a {
color: #754D26;
text-decoration: underline;
}
.a1-page-body table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.a1-page-body table th,
.a1-page-body table td {
border: 1px solid #e5e7eb;
padding: 12px 14px;
text-align: left;
}
.a1-page-body blockquote {
margin: 24px 0;
padding: 18px 20px;
border-left: 4px solid #754D26;
background: #f9fafb;
color: #374151;
border-radius: 10px;
}
@media (max-width: 991px) {
.a1-page-title {
font-size: 34px;
}
.a1-page-body {
padding: 26px;
font-size: 16px;
}
}
@media (max-width: 575px) {
.a1-page-container {
width: calc(100% - 20px);
}
.a1-page-hero {
padding: 50px 0 40px;
}
.a1-page-title {
font-size: 28px;
}
.a1-page-body {
padding: 20px;
}
}