/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
<<<<<<< HEAD
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-space-y-reverse:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-blue-500:oklch(62.3% .214 259.815);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--blur-sm:8px;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-light-color:#efefef;--color-light-alt-color:#eff2f9;--color-dark-main-color:#121723;--color-dark-alt-color:#181c28;--color-header-overlay:#3f3e3e56;--color-overlay:#0a0e1db3;--color-main-color:#274ce3;--color-main-bg-color:#4a6df733;--color-secondary-color:#efbf04;--color-violet-indigo:#6a1292;--color-main-text:#788293;--color-main-text-alt:#959cb1;--color-dark-box:#1d232f}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-998{z-index:998}.z-999{z-index:999}.z-9999{z-index:9999}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:62rem){.container{max-width:62rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-5{margin:calc(var(--spacing)*5)}.mx-auto{margin-inline:auto}.my-10{margin-block:calc(var(--spacing)*10)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-15{margin-top:calc(var(--spacing)*15)}.mt-25{margin-top:calc(var(--spacing)*25)}.mr-5{margin-right:calc(var(--spacing)*5)}.mr-50{margin-right:calc(var(--spacing)*50)}.mr-auto{margin-right:auto}.\!mb-0{margin-bottom:calc(var(--spacing)*0)!important}.\!mb-2{margin-bottom:calc(var(--spacing)*2)!important}.\!mb-4{margin-bottom:calc(var(--spacing)*4)!important}.\!mb-11{margin-bottom:calc(var(--spacing)*11)!important}.\!mb-18{margin-bottom:calc(var(--spacing)*18)!important}.\!mb-\[40px\]{margin-bottom:40px!important}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.mb-15{margin-bottom:calc(var(--spacing)*15)}.mb-16{margin-bottom:calc(var(--spacing)*16)}.mb-17{margin-bottom:calc(var(--spacing)*17)}.ml-8{margin-left:calc(var(--spacing)*8)}.ml-\[20px\]{margin-left:20px}.flex-center{justify-content:center;align-items:center;display:flex}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\[4px\]{height:4px}.h-\[20px\]{height:20px}.h-\[25px\]{height:25px}.h-\[100vh\]{height:100vh}.h-\[150px\]{height:150px}.h-full{height:100%}.h-px{height:1px}.\!w-fit{width:fit-content!important}.w-30{width:calc(var(--spacing)*30)}.w-\[15px\]{width:15px}.w-\[20px\]{width:20px}.w-\[40px\]{width:40px}.w-\[250px\]{width:250px}.w-\[350px\]{width:350px}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\[360px\]{max-width:360px}.max-w-\[370px\]{max-width:370px}.max-w-\[470px\]{max-width:470px}.max-w-\[500px\]{max-width:500px}.max-w-\[800px\]{max-width:800px}.max-w-full{max-width:100%}.translate-x-\[-9px\]{--tw-translate-x:-9px;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-1{--tw-translate-y:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-0\.5px\]{--tw-translate-y:-.5px;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[2px\]{--tw-translate-y:2px;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.glow-effect{background-image:radial-gradient(circle at 0 0,#326decb3 0,#326dec00 24%),radial-gradient(circle at 100% 100%,#326dec40 0,#326dec00 28%);background-position:0 0,100% 100%;background-repeat:no-repeat;background-size:180% 180%,90% 90%;animation:10s linear infinite glow-grow}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}.gap-14{gap:calc(var(--spacing)*14)}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-3{column-gap:calc(var(--spacing)*3)}.gap-x-4{column-gap:calc(var(--spacing)*4)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-x-8{column-gap:calc(var(--spacing)*8)}.gap-x-9{column-gap:calc(var(--spacing)*9)}.gap-x-10{column-gap:calc(var(--spacing)*10)}:where(.space-x-7>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*7)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*7)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-12>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*12)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-2{row-gap:calc(var(--spacing)*2)}.gap-y-5{row-gap:calc(var(--spacing)*5)}.gap-y-6{row-gap:calc(var(--spacing)*6)}.gap-y-10{row-gap:calc(var(--spacing)*10)}.gap-y-14{row-gap:calc(var(--spacing)*14)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\[3px\]{border-radius:3px}.rounded-\[50px\]{border-radius:50px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-r-1{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b-1{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#ffffffb3\]{border-color:#ffffffb3}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-700{border-color:var(--color-gray-700)}.\!bg-main-color{background-color:var(--color-main-color)!important}.bg-\[\#f9fafb\]{background-color:#f9fafb}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-light-color{background-color:var(--color-light-color)}.bg-main-color{background-color:var(--color-main-color)}.bg-overlay{background-color:var(--color-overlay)}.bg-secondary-color{background-color:var(--color-secondary-color)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-\[\#D2D8E183\]{--tw-gradient-via:#d2d8e183;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-violet-indigo{--tw-gradient-to:var(--color-violet-indigo);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-8{padding:calc(var(--spacing)*8)}.\!px-9{padding-inline:calc(var(--spacing)*9)!important}.px-3{padding-inline:calc(var(--spacing)*3)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-11{padding-inline:calc(var(--spacing)*11)}.px-13{padding-inline:calc(var(--spacing)*13)}.\!py-3{padding-block:calc(var(--spacing)*3)!important}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.py-15{padding-block:calc(var(--spacing)*15)}.pt-16{padding-top:calc(var(--spacing)*16)}.pt-50{padding-top:calc(var(--spacing)*50)}.pt-\[60px\]{padding-top:60px}.pr-6{padding-right:calc(var(--spacing)*6)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.text-center{text-align:center}.\!text-2xl{font-size:var(--text-2xl)!important;line-height:var(--tw-leading,var(--text-2xl--line-height))!important}.\!text-3xl{font-size:var(--text-3xl)!important;line-height:var(--tw-leading,var(--text-3xl--line-height))!important}.\!text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.text-\[25px\]{font-size:25px}.\!leading-tight{--tw-leading:var(--leading-tight)!important;line-height:var(--leading-tight)!important}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-nowrap{text-wrap:nowrap}.\!text-white{color:var(--color-white)!important}.text-black{color:var(--color-black)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-100{opacity:1}.shadow-box-shadow{--tw-shadow:0px 5px 15px 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.contrast-150{--tw-contrast:contrast(150%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-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,)}.duration-80{--tw-duration:80ms;transition-duration:80ms}.duration-120{--tw-duration:.12s;transition-duration:.12s}.duration-125{--tw-duration:.125s;transition-duration:.125s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:shadow-dark-hover-box:hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:contrast-125:hover{--tw-contrast:contrast(125%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}@media not all and (min-width:992px){.max-\[992px\]\:absolute{position:absolute}.max-\[992px\]\:top-18{top:calc(var(--spacing)*18)}.max-\[992px\]\:top-\[71px\]{top:71px}.max-\[992px\]\:right-0{right:calc(var(--spacing)*0)}.max-\[992px\]\:hidden{display:none}.max-\[992px\]\:w-\[250px\]{width:250px}.max-\[992px\]\:flex-col{flex-direction:column}.max-\[992px\]\:items-start{align-items:flex-start}.max-\[992px\]\:rounded{border-radius:.25rem}.max-\[992px\]\:bg-gray-200{background-color:var(--color-gray-200)}.max-\[992px\]\:px-6{padding-inline:calc(var(--spacing)*6)}.max-\[992px\]\:opacity-0{opacity:0}.max-\[992px\]\:opacity-100{opacity:1}.max-\[992px\]\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@media not all and (min-width:575px){.max-\[575px\]\:\!pt-\[150px\]{padding-top:150px!important}}@media not all and (min-width:375px){.max-\[375px\]\:flex-col{flex-direction:column}}@media not all and (min-width:360px){.max-\[360px\]\:text-\[14px\]{font-size:14px}}@media not all and (min-width:62rem){.max-tb\:mx-auto{margin-inline:auto}.max-tb\:mb-12{margin-bottom:calc(var(--spacing)*12)}.max-tb\:translate-y-1{--tw-translate-y:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.max-tb\:flex-col{flex-direction:column}.max-tb\:flex-wrap{flex-wrap:wrap}}@media not all and (min-width:48rem){.max-md\:mb-16{margin-bottom:calc(var(--spacing)*16)}}@media not all and (min-width:35.938rem){.max-\[35\.938rem\]\:mx-0{margin-inline:calc(var(--spacing)*0)}}@media (min-width:375px){.min-\[375px\]\:gap-x-4{column-gap:calc(var(--spacing)*4)}}@media (min-width:575px){.min-\[575px\]\:w-\[380px\]{width:380px}.min-\[575px\]\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.min-\[575px\]\:p-\[60px\]{padding:60px}}@media (min-width:992px){.min-\[992px\]\:hidden{display:none}.min-\[992px\]\:w-full{width:100%}}@media (min-width:40rem){.sm\:w-40{width:calc(var(--spacing)*40)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:gap-y-15{row-gap:calc(var(--spacing)*15)}.sm\:px-10{padding-inline:calc(var(--spacing)*10)}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-\[32px\]{font-size:32px}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:px-9{padding-inline:calc(var(--spacing)*9)}.md\:pt-20{padding-top:calc(var(--spacing)*20)}.md\:pt-\[70px\]{padding-top:70px}.md\:pb-20{padding-bottom:calc(var(--spacing)*20)}.md\:pb-\[120px\]{padding-bottom:120px}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:62rem){.tb\:mr-10{margin-right:calc(var(--spacing)*10)}.tb\:mr-15{margin-right:calc(var(--spacing)*15)}.tb\:w-55{width:calc(var(--spacing)*55)}.tb\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.tb\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tb\:justify-between{justify-content:space-between}.tb\:gap-x-6{column-gap:calc(var(--spacing)*6)}.tb\:py-3{padding-block:calc(var(--spacing)*3)}.tb\:pt-25{padding-top:calc(var(--spacing)*25)}.tb\:\!text-left{text-align:left!important}}@media (min-width:64rem){.lg\:flex{display:flex}.lg\:w-5\/12{width:41.6667%}.lg\:w-43{width:calc(var(--spacing)*43)}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:px-6{padding-inline:calc(var(--spacing)*6)}.lg\:pt-28{padding-top:calc(var(--spacing)*28)}.lg\:pb-28{padding-bottom:calc(var(--spacing)*28)}}@media (min-width:75rem){.min-\[75rem\]\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\:mr-25{margin-right:calc(var(--spacing)*25)}.xl\:w-4\/12{width:33.3333%}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:px-13{padding-inline:calc(var(--spacing)*13)}.xl\:pt-\[140px\]{padding-top:140px}.xl\:pb-\[160px\]{padding-bottom:160px}}.dark\:glow-effect-dark:where(.dark,.dark *){background-image:radial-gradient(circle at 0 0,#326deca6 0,#326dec00 22%),radial-gradient(circle at 100% 100%,#6f1291a6 0,#6f129100 22%);background-position:0 0,100% 100%;background-repeat:no-repeat;background-size:180% 180%,90% 90%;animation:10s linear infinite glow-grow}.dark\:border-gray-700:where(.dark,.dark *){border-color:var(--color-gray-700)}.dark\:border-white\/\[\.15\]:where(.dark,.dark *){border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.15\]:where(.dark,.dark *){border-color:color-mix(in oklab,var(--color-white)15%,transparent)}}.dark\:bg-\[rgba\(2\,6\,23\,1\)\]:where(.dark,.dark *){background-color:#020617}.dark\:bg-dark-alt-color:where(.dark,.dark *){background-color:var(--color-dark-alt-color)}.dark\:bg-dark-box:where(.dark,.dark *){background-color:var(--color-dark-box)}.dark\:bg-dark-main-color:where(.dark,.dark *){background-color:var(--color-dark-main-color)}.dark\:bg-header-overlay:where(.dark,.dark *){background-color:var(--color-header-overlay)}.dark\:bg-main-color:where(.dark,.dark *){background-color:var(--color-main-color)}.dark\:via-\[\#959CB183\]:where(.dark,.dark *){--tw-gradient-via:#959cb183;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.dark\:text-\[\#ffffffb3\]:where(.dark,.dark *){color:#ffffffb3}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}@media (hover:hover){.dark\:hover\:shadow-dark-hover-box:where(.dark,.dark *):hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@media not all and (min-width:992px){.max-\[992px\]\:dark\:bg-dark-main-color:where(.dark,.dark *){background-color:var(--color-dark-main-color)}}}*{scroll-behavior:smooth;font-family:Poppins,sans-serif}header nav a{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-duration:.1s;transition-duration:.1s}@media (hover:hover){header nav a:hover{color:var(--color-violet-indigo)}}@media not all and (min-width:992px){header nav a{padding-block:calc(var(--spacing)*3)}}@media (min-width:64rem){header nav a{font-size:17px}}header a.active{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-main-color);--tw-duration:.1s;transition-duration:.1s}header nav .sign a{text-align:center;--tw-font-weight:var(--font-weight-medium);width:97px;font-weight:var(--font-weight-medium);color:var(--color-white);--tw-duration:.125s;border-radius:3px;transition-duration:.125s}@media (hover:hover){header nav .sign a:hover{--tw-contrast:contrast(125%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}header .theme,header ion-icon{cursor:pointer;--tw-duration:.15s;font-size:23px;transition-duration:.15s}@media (hover:hover){:is(header .theme,header ion-icon):hover{color:var(--color-violet-indigo)}}header ion-icon{display:none}@media (min-width:62rem){header ion-icon{display:inline-block}}section,main{padding-block:calc(var(--spacing)*16);--tw-duration:.125s;transition-duration:.125s}@media (min-width:48rem){section,main{padding-block:calc(var(--spacing)*20)}}@media (min-width:62rem){section,main{padding-block:calc(var(--spacing)*28)}}@keyframes glow-grow{0%{background-size:90% 90%,180% 180%}50%{background-size:180% 180%,90% 90%}to{background-size:90% 90%,180% 180%}}@keyframes scroll{0%{transform:translate(-8.5px)}50%{transform:translate(-5px)}to{transform:translate(-8.5px)}}#home .mouse .wheel{animation:1s infinite scroll}.title{text-align:center;margin-inline:auto;max-width:570px;margin-bottom:100px}.title h2{margin-bottom:calc(var(--spacing)*4);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-leading:var(--leading-tight)!important;line-height:var(--leading-tight)!important}@media (min-width:40rem){.title h2{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media (min-width:48rem){.title h2{font-size:45px}}.title h2:where(.dark,.dark *){color:var(--color-white)}.title p{color:var(--color-main-text);--tw-leading:var(--leading-relaxed)!important;line-height:var(--leading-relaxed)!important}@media (min-width:48rem){.title p{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.box:where(.dark,.dark *){background-color:var(--color-dark-box)}.box p{margin-top:calc(var(--spacing)*5);--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);color:var(--color-main-text);padding-right:10px}#about .part-1 .checklist li{align-items:center;display:flex}:where(#about .part-1 .checklist li>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}#about .part-1 .checklist li>div{border-radius:var(--radius-md);background-color:var(--color-main-bg-color);justify-content:center;align-items:center;width:30px;height:30px;display:flex}#about .part-1 .checklist li lord-icon{--tw-translate-y:-1px;translate:var(--tw-translate-x)var(--tw-translate-y);font-size:22px}#about .part-2 fieldset{margin-bottom:calc(var(--spacing)*4);--tw-border-style:none;padding:calc(var(--spacing)*0);border-style:none}#about .part-2 fieldset p{max-height:calc(var(--spacing)*0);--tw-duration:.3s;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);margin-left:37px;transition-duration:.3s;overflow:hidden}@media (min-width:40rem){#about .part-2 fieldset p{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}#about .part-2 fieldset.open p{margin-block:calc(var(--spacing)*4);max-height:500px}#about .part-2 fieldset legend{cursor:pointer;column-gap:calc(var(--spacing)*3);text-align:left;font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);display:flex}@media (min-width:40rem){#about .part-2 fieldset legend{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media (min-width:48rem){#about .part-2 fieldset legend{font-size:45px}}#about .part-2 fieldset legend:where(.dark,.dark *){color:var(--color-white)}#about .part-2 fieldset legend ion-icon{--tw-translate-y:15px;translate:var(--tw-translate-x)var(--tw-translate-y);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-duration:.3s;transition-duration:.3s}#about .part-2 fieldset.open legend ion-icon{rotate:90deg}#about .part-2 fieldset legend h2{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-duration:.25s;transition-duration:.25s}@media (min-width:40rem){#about .part-2 fieldset legend h2{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media (min-width:64rem){#about .part-2 fieldset legend h2{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:80rem){#about .part-2 fieldset legend h2{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}#about .part-2 fieldset:hover legend ion-icon,#about .part-2 fieldset:hover legend h2,#about .part-2 fieldset.active legend ion-icon,#about .part-2 fieldset.active legend h2{color:var(--color-main-color);--tw-duration:.25s;transition-duration:.25s}.services .box{border-radius:var(--radius-sm);width:100%;padding-inline:calc(var(--spacing)*8);padding-block:calc(var(--spacing)*10);--tw-shadow:0px 5px 15px 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-duration:.2s;background-color:#0000;transition-duration:.2s}@media (hover:hover){.services .box:hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.services .box:where(.dark,.dark *){background-color:var(--color-dark-alt-color)}.services .box .icon{background-color:var(--color-main-bg-color);width:70px;height:70px;font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height));color:var(--color-main-color);border-radius:6px;justify-content:center;align-items:center;padding-block:12px;padding-inline:10px;display:flex}.services .box ion-icon{font-size:43px}.services .box h3{margin-block:calc(var(--spacing)*3);margin-top:calc(var(--spacing)*10);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.services .box h3:where(.dark,.dark *){color:var(--color-white)}.services .box .type{margin-bottom:calc(var(--spacing)*2);justify-content:space-between;align-items:center;display:flex}.services .box .type .price{align-items:center;display:flex}.services .box .type .price h3,.services .box .type .price h4{margin:calc(var(--spacing)*0);--tw-font-weight:var(--font-weight-bold);font-size:32px;font-weight:var(--font-weight-bold)}:is(.services .box .type .price h3,.services .box .type .price h4):where(.dark,.dark *){color:var(--color-white)}.services .box .type .price span{--tw-translate-y:3.5px;translate:var(--tw-translate-x)var(--tw-translate-y);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-main-text)}.services .box .type .sub{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.services .box .type .sub:where(.dark,.dark *){color:var(--color-white)}.services .box p{margin-bottom:calc(var(--spacing)*7)}.services .box .btn{margin-bottom:calc(var(--spacing)*8);cursor:pointer;border-radius:var(--radius-sm);background-color:var(--color-main-color);padding-block:calc(var(--spacing)*3);text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-white);--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.services .box .btn:hover{--tw-contrast:contrast(125%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}:where(.services .box ul>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}.services .box ul{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-gray-300);padding-top:calc(var(--spacing)*9)}.services .box ul:where(.dark,.dark *){border-color:var(--color-gray-700)}.services .box ul li{align-items:center;gap:calc(var(--spacing)*2);display:flex}.services .box ul li ion-icon{background-color:var(--color-main-bg-color);padding:calc(var(--spacing)*.5);color:var(--color-main-color);border-radius:3.40282e38px;font-size:13px}.services .box ul li span{color:var(--color-main-text)}#clients .box{z-index:1;border-radius:var(--radius-sm);background-color:var(--color-white);padding:calc(var(--spacing)*8);--tw-shadow:0px 5px 15px 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){#clients .box:hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@media (min-width:64rem){#clients .box{padding-inline:calc(var(--spacing)*5)}}@media (min-width:80rem){#clients .box{padding:calc(var(--spacing)*8)}}#clients .box:where(.dark,.dark *){background-color:#1d2430}@media (hover:hover){#clients .box:where(.dark,.dark *):hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}#clients .box .stars ion-icon{color:var(--color-amber-400);font-size:16px}#clients .box p{border-bottom-style:var(--tw-border-style);padding-bottom:calc(var(--spacing)*8);color:#788293;border-color:#788293;border-bottom-width:1px}#clients .box p:where(.dark,.dark *){border-color:var(--color-gray-600);color:var(--color-white)}#clients .box .profile{align-items:center;gap:calc(var(--spacing)*4);padding-top:calc(var(--spacing)*8);display:flex}#clients .box .profile .text h4{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}#clients .box .profile .text h4:where(.dark,.dark *){color:var(--color-white)}#clients .box .profile .text span{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:#788293}.sub-type span{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.sub-type span:where(.dark,.dark *){color:var(--color-white)}.sub-type span.active{color:var(--color-main-color)}#portfolio .box{border-radius:var(--radius-sm);--tw-shadow:0px 5px 15px 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-duration:.2s;transition-duration:.2s;overflow:hidden}@media (hover:hover){#portfolio .box:hover,#portfolio .box:where(.dark,.dark *):hover{--tw-shadow:0px 5px 15px 5px var(--tw-shadow-color,#4b6cf766);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}#portfolio .box .pic{margin-bottom:calc(var(--spacing)*2);background-color:var(--color-dark-box);position:relative;overflow:hidden}@media (min-width:40rem){#portfolio .box .pic{height:380px;overflow:hidden}}#portfolio .box .pic img{background-color:var(--color-white);--tw-duration:.35s;width:100%;transition-duration:.35s}#portfolio .box:hover img{--tw-scale-x:108%;--tw-scale-y:108%;--tw-scale-z:108%;scale:var(--tw-scale-x)var(--tw-scale-y)}#portfolio .box .pic span{top:calc(var(--spacing)*0);left:calc(var(--spacing)*0);--tw-translate-x:23px;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:23px;translate:var(--tw-translate-x)var(--tw-translate-y);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-main-color);background-color:var(--color-main-bg-color);padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-main-color);border-radius:50px;position:absolute}#portfolio .box .pic a{top:calc(var(--spacing)*0);left:calc(var(--spacing)*0);--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:var(--color-light-alt-color);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-via:#eff2f9b3;width:100%;height:100%;position:absolute}@supports (color:color-mix(in lab, red, red)){#portfolio .box .pic a{--tw-gradient-via:color-mix(in oklab,var(--color-light-alt-color)70%,transparent)}}#portfolio .box .pic a{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:transparent;opacity:0;--tw-duration:.5s;transition-duration:.5s}#portfolio .box .pic a:where(.dark,.dark *){--tw-gradient-from:var(--color-dark-box);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-via:#121723b3}@supports (color:color-mix(in lab, red, red)){#portfolio .box .pic a:where(.dark,.dark *){--tw-gradient-via:color-mix(in oklab,var(--color-dark-main-color)70%,transparent)}}#portfolio .box .pic a:where(.dark,.dark *){--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}#portfolio .box:hover .pic a{opacity:1}#portfolio .box .pic ion-icon{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:20%;translate:var(--tw-translate-x)var(--tw-translate-y);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-main-color);background-color:var(--color-main-bg-color);padding:calc(var(--spacing)*4);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-main-color);opacity:0;--tw-duration:.3s;border-radius:50%;font-size:30px;transition-duration:.3s;position:absolute;top:50%;left:50%}#portfolio .box:hover .pic ion-icon{--tw-translate-x:-50%;--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y);opacity:1}#portfolio .box .techs{margin-bottom:calc(var(--spacing)*5);align-items:center;column-gap:calc(var(--spacing)*3);row-gap:calc(var(--spacing)*2);flex-wrap:wrap;display:flex}#portfolio .box .techs span{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-main-color);background-color:var(--color-main-bg-color);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*1);text-align:center;--tw-font-weight:var(--font-weight-bold);font-size:11px;font-weight:var(--font-weight-bold);color:var(--color-main-color);text-transform:uppercase;border-radius:50px}#portfolio .box h4{cursor:pointer;width:fit-content;font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-duration:.25s;transition-duration:.25s}@media (min-width:40rem){#portfolio .box h4{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}#portfolio .box h4:where(.dark,.dark *){color:var(--color-white)}#portfolio .box:hover h4{color:var(--color-main-color)}#portfolio .box p{margin-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*6);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);--tw-duration:.1s;transition-duration:.1s}#contact .title{margin:calc(var(--spacing)*0);text-align:left}#contact .ticket .name,#contact .ticket .email,#contact .ticket .message{width:100%;position:relative}label{top:-35px;left:calc(var(--spacing)*0);--tw-font-weight:var(--font-weight-medium);font-size:14px;font-weight:var(--font-weight-medium);position:absolute}label:where(.dark,.dark *){color:var(--color-white)}input,#contact .ticket textarea{border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing)*6);padding-block:calc(var(--spacing)*3);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--color-gray-200);--tw-duration:.125s;background-color:#f8f8f8;border-width:2px;border-color:#0000;border-radius:3px;transition-duration:.125s}:is(input,#contact .ticket textarea)::placeholder{color:#8397aa}:is(input,#contact .ticket textarea):focus{border-color:var(--color-secondary-color)}:is(input,#contact .ticket textarea):where(.dark,.dark *){outline-style:var(--tw-outline-style);background-color:#2c303b;outline-width:0}:is(input,#contact .ticket textarea):where(.dark,.dark *):focus{border-color:var(--color-main-color)}#contact .subscribe input:not(:last-of-type){margin-bottom:calc(var(--spacing)*4)}footer{color:var(--color-main-text-alt)}footer .logo{margin-bottom:calc(var(--spacing)*10)}footer h4{margin-bottom:calc(var(--spacing)*6);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-black)}footer h4:where(.dark,.dark *){color:var(--color-white)}footer a{--tw-duration:.125s;transition-duration:.125s;display:block}@media (hover:hover){footer a:hover{color:var(--color-main-color)}}footer a:not(:last-of-type){margin-bottom:calc(var(--spacing)*3)}footer .social ion-icon,footer .social i{cursor:pointer;--tw-duration:.125s;font-size:20px;transition-duration:.125s}@media (hover:hover){:is(footer .social ion-icon,footer .social i):hover{color:var(--color-main-color)}}@media (min-width:64rem){footer .links{width:16.6667%}}footer .credits a{margin:calc(var(--spacing)*0);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-black)}@media (hover:hover){footer .credits a:hover{color:var(--color-main-color)}}footer .credits a:where(.dark,.dark *){color:var(--color-white)}footer .credits div{gap:4px}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width:450px){.container{max-width:450px}}@media (min-width:575px){.container{max-width:575px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1400px){.container{max-width:1400px}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
=======
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-light-color: #efefef;
    --color-light-alt-color: #eff2f9;
    --color-dark-main-color: #121723;
    --color-dark-alt-color: #181c28;
    --color-header-overlay: rgba(63, 62, 62, 0.336);
    --color-overlay: rgba(10, 14, 29, 0.7);
    --color-main-color: #274CE3;
    --color-main-bg-color: rgba(74, 109, 247, 0.2);
    --color-secondary-color: #EFBF04;
    --color-violet-indigo: #1800ad;
    --color-main-text: #788293;
    --color-main-text-alt: #959cb1;
    --color-dark-box: #1d232f;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-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: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-998 {
    z-index: 998;
  }
  .z-999 {
    z-index: 999;
  }
  .z-9999 {
    z-index: 9999;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 62rem) {
      max-width: 62rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }
  .mt-25 {
    margin-top: calc(var(--spacing) * 25);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }
  .mr-50 {
    margin-right: calc(var(--spacing) * 50);
  }
  .mr-auto {
    margin-right: auto;
  }
  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }
  .\!mb-2 {
    margin-bottom: calc(var(--spacing) * 2) !important;
  }
  .\!mb-4 {
    margin-bottom: calc(var(--spacing) * 4) !important;
  }
  .\!mb-11 {
    margin-bottom: calc(var(--spacing) * 11) !important;
  }
  .\!mb-18 {
    margin-bottom: calc(var(--spacing) * 18) !important;
  }
  .\!mb-\[40px\] {
    margin-bottom: 40px !important;
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-17 {
    margin-bottom: calc(var(--spacing) * 17);
  }
  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }
  .ml-\[20px\] {
    margin-left: 20px;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-\[4px\] {
    height: 4px;
  }
  .h-\[20px\] {
    height: 20px;
  }
  .h-\[25px\] {
    height: 25px;
  }
  .h-\[100vh\] {
    height: 100vh;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-fit {
    width: fit-content !important;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-30 {
    width: calc(var(--spacing) * 30);
  }
  .w-\[15px\] {
    width: 15px;
  }
  .w-\[20px\] {
    width: 20px;
  }
  .w-\[40px\] {
    width: 40px;
  }
  .w-\[250px\] {
    width: 250px;
  }
  .w-\[350px\] {
    width: 350px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-\[360px\] {
    max-width: 360px;
  }
  .max-w-\[370px\] {
    max-width: 370px;
  }
  .max-w-\[470px\] {
    max-width: 470px;
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[800px\] {
    max-width: 800px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .translate-x-\[-9px\] {
    --tw-translate-x: -9px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[-0\.5px\] {
    --tw-translate-y: -0.5px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[2px\] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-9 {
    column-gap: calc(var(--spacing) * 9);
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-6 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-7 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 7) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-12 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 12) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .gap-y-14 {
    row-gap: calc(var(--spacing) * 14);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[3px\] {
    border-radius: 3px;
  }
  .rounded-\[50px\] {
    border-radius: 50px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r-1 {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b-1 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-\[\#ffffffb3\] {
    border-color: #ffffffb3;
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .\!bg-main-color {
    background-color: var(--color-main-color) !important;
  }
  .bg-\[\#f9fafb\] {
    background-color: #f9fafb;
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-light-color {
    background-color: var(--color-light-color);
  }
  .bg-main-bg-color {
    background-color: var(--color-main-bg-color);
  }
  .bg-main-color {
    background-color: var(--color-main-color);
  }
  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }
  .bg-overlay {
    background-color: var(--color-overlay);
  }
  .bg-pink-600 {
    background-color: var(--color-pink-600);
  }
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-secondary-color {
    background-color: var(--color-secondary-color);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[radial-gradient\(circle_at_0\%_0\%\,_rgba\(37\,99\,235\,0\.6\)_0\,_\#f9fafb_55\%\)\,radial-gradient\(circle_at_100\%_100\%\,_rgba\(45\,212\,191\,0\.25\)_0\,_\#f9fafb_60\%\)\] {
    background-image: radial-gradient(circle at 0% 0%, rgba(37,99,235,0.6) 0, #f9fafb 55%),radial-gradient(circle at 100% 100%, rgba(45,212,191,0.25) 0, #f9fafb 60%);
  }
  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-main-color {
    --tw-gradient-from: var(--color-main-color);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-\[\#D2D8E183\] {
    --tw-gradient-via: #D2D8E183;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-white {
    --tw-gradient-via: var(--color-white);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-blue-700 {
    --tw-gradient-to: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-violet-indigo {
    --tw-gradient-to: var(--color-violet-indigo);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yellow-50 {
    --tw-gradient-to: var(--color-yellow-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-clip-text {
    background-clip: text;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .\!px-9 {
    padding-inline: calc(var(--spacing) * 9) !important;
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }
  .px-13 {
    padding-inline: calc(var(--spacing) * 13);
  }
  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-15 {
    padding-block: calc(var(--spacing) * 15);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pt-50 {
    padding-top: calc(var(--spacing) * 50);
  }
  .pt-\[60px\] {
    padding-top: 60px;
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .text-center {
    text-align: center;
  }
  .\!text-2xl {
    font-size: var(--text-2xl) !important;
    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
  }
  .\!text-3xl {
    font-size: var(--text-3xl) !important;
    line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
  }
  .\!text-base {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[25px\] {
    font-size: 25px;
  }
  .\!leading-tight {
    --tw-leading: var(--leading-tight) !important;
    line-height: var(--leading-tight) !important;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-black {
    color: var(--color-black);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-main-color {
    color: var(--color-main-color);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .text-purple-600 {
    color: var(--color-purple-600);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-secondary-color {
    color: var(--color-secondary-color);
  }
  .text-transparent {
    color: transparent;
  }
  .text-white {
    color: var(--color-white);
  }
  .underline {
    text-decoration-line: underline;
  }
  .placeholder-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-box-shadow {
    --tw-shadow: 0px 5px 15px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .contrast-150 {
    --tw-contrast: contrast(150%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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,);
  }
  .backdrop-filter {
    -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 {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-80 {
    --tw-duration: 80ms;
    transition-duration: 80ms;
  }
  .duration-120 {
    --tw-duration: 120ms;
    transition-duration: 120ms;
  }
  .duration-125 {
    --tw-duration: 125ms;
    transition-duration: 125ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-blue-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-800);
      }
    }
  }
  .hover\:bg-main-color {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-main-color);
      }
    }
  }
  .hover\:bg-pink-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-pink-700);
      }
    }
  }
  .hover\:from-blue-600 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-violet-600 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-violet-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:text-blue-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }
  .hover\:text-main-color {
    &:hover {
      @media (hover: hover) {
        color: var(--color-main-color);
      }
    }
  }
  .hover\:text-pink-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-pink-600);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-dark-hover-box {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:contrast-125 {
    &:hover {
      @media (hover: hover) {
        --tw-contrast: contrast(125%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .focus\:border-main-color {
    &:focus {
      border-color: var(--color-main-color);
    }
  }
  .focus\:border-transparent {
    &:focus {
      border-color: transparent;
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }
  .focus\:ring-main-color {
    &:focus {
      --tw-ring-color: var(--color-main-color);
    }
  }
  .max-\[992px\]\:absolute {
    @media (width < 992px) {
      position: absolute;
    }
  }
  .max-\[992px\]\:top-18 {
    @media (width < 992px) {
      top: calc(var(--spacing) * 18);
    }
  }
  .max-\[992px\]\:top-\[71px\] {
    @media (width < 992px) {
      top: 71px;
    }
  }
  .max-\[992px\]\:right-0 {
    @media (width < 992px) {
      right: calc(var(--spacing) * 0);
    }
  }
  .max-\[992px\]\:hidden {
    @media (width < 992px) {
      display: none;
    }
  }
  .max-\[992px\]\:w-\[250px\] {
    @media (width < 992px) {
      width: 250px;
    }
  }
  .max-\[992px\]\:flex-col {
    @media (width < 992px) {
      flex-direction: column;
    }
  }
  .max-\[992px\]\:items-start {
    @media (width < 992px) {
      align-items: flex-start;
    }
  }
  .max-\[992px\]\:rounded {
    @media (width < 992px) {
      border-radius: 0.25rem;
    }
  }
  .max-\[992px\]\:bg-gray-200 {
    @media (width < 992px) {
      background-color: var(--color-gray-200);
    }
  }
  .max-\[992px\]\:px-6 {
    @media (width < 992px) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .max-\[992px\]\:opacity-0 {
    @media (width < 992px) {
      opacity: 0%;
    }
  }
  .max-\[992px\]\:opacity-100 {
    @media (width < 992px) {
      opacity: 100%;
    }
  }
  .max-\[992px\]\:shadow-md {
    @media (width < 992px) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-\[575px\]\:\!pt-\[150px\] {
    @media (width < 575px) {
      padding-top: 150px !important;
    }
  }
  .max-\[375px\]\:flex-col {
    @media (width < 375px) {
      flex-direction: column;
    }
  }
  .max-\[360px\]\:text-\[14px\] {
    @media (width < 360px) {
      font-size: 14px;
    }
  }
  .max-tb\:mx-auto {
    @media (width < 62rem) {
      margin-inline: auto;
    }
  }
  .max-tb\:mb-12 {
    @media (width < 62rem) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .max-tb\:translate-y-1 {
    @media (width < 62rem) {
      --tw-translate-y: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .max-tb\:flex-col {
    @media (width < 62rem) {
      flex-direction: column;
    }
  }
  .max-tb\:flex-wrap {
    @media (width < 62rem) {
      flex-wrap: wrap;
    }
  }
  .max-md\:mb-16 {
    @media (width < 48rem) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .max-\[35\.938rem\]\:mx-0 {
    @media (width < 35.938rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .min-\[375px\]\:gap-x-4 {
    @media (width >= 375px) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .min-\[575px\]\:w-\[380px\] {
    @media (width >= 575px) {
      width: 380px;
    }
  }
  .min-\[575px\]\:grid-cols-2 {
    @media (width >= 575px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .min-\[575px\]\:p-\[60px\] {
    @media (width >= 575px) {
      padding: 60px;
    }
  }
  .min-\[992px\]\:hidden {
    @media (width >= 992px) {
      display: none;
    }
  }
  .min-\[992px\]\:w-full {
    @media (width >= 992px) {
      width: 100%;
    }
  }
  .sm\:w-40 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 40);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-y-15 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 15);
    }
  }
  .sm\:px-10 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .sm\:text-\[32px\] {
    @media (width >= 40rem) {
      font-size: 32px;
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1/2 * 100%);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:px-9 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  .md\:pt-20 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .md\:pt-\[70px\] {
    @media (width >= 48rem) {
      padding-top: 70px;
    }
  }
  .md\:pb-20 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .md\:pb-\[120px\] {
    @media (width >= 48rem) {
      padding-bottom: 120px;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .tb\:mr-10 {
    @media (width >= 62rem) {
      margin-right: calc(var(--spacing) * 10);
    }
  }
  .tb\:mr-15 {
    @media (width >= 62rem) {
      margin-right: calc(var(--spacing) * 15);
    }
  }
  .tb\:w-55 {
    @media (width >= 62rem) {
      width: calc(var(--spacing) * 55);
    }
  }
  .tb\:grid-cols-1 {
    @media (width >= 62rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .tb\:grid-cols-3 {
    @media (width >= 62rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .tb\:justify-between {
    @media (width >= 62rem) {
      justify-content: space-between;
    }
  }
  .tb\:gap-x-6 {
    @media (width >= 62rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .tb\:py-3 {
    @media (width >= 62rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .tb\:pt-25 {
    @media (width >= 62rem) {
      padding-top: calc(var(--spacing) * 25);
    }
  }
  .tb\:\!text-left {
    @media (width >= 62rem) {
      text-align: left !important;
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:w-5\/12 {
    @media (width >= 64rem) {
      width: calc(5/12 * 100%);
    }
  }
  .lg\:w-43 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 43);
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:p-10 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:py-24 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .lg\:pt-28 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 28);
    }
  }
  .lg\:pb-24 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .lg\:pb-28 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  .lg\:text-6xl {
    @media (width >= 64rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .min-\[75rem\]\:grid-cols-2 {
    @media (width >= 75rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:mr-25 {
    @media (width >= 80rem) {
      margin-right: calc(var(--spacing) * 25);
    }
  }
  .xl\:w-4\/12 {
    @media (width >= 80rem) {
      width: calc(4/12 * 100%);
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:px-13 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 13);
    }
  }
  .xl\:pt-24 {
    @media (width >= 80rem) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .xl\:pt-\[140px\] {
    @media (width >= 80rem) {
      padding-top: 140px;
    }
  }
  .xl\:pb-24 {
    @media (width >= 80rem) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .xl\:pb-\[160px\] {
    @media (width >= 80rem) {
      padding-bottom: 160px;
    }
  }
  .dark\:border-gray-600 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-gray-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-white\/\[\.15\] {
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
  }
  .dark\:bg-\[rgba\(2\,6\,23\,1\)\] {
    &:where(.dark, .dark *) {
      background-color: rgba(2,6,23,1);
    }
  }
  .dark\:bg-blue-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-blue-900);
    }
  }
  .dark\:bg-dark-alt-color {
    &:where(.dark, .dark *) {
      background-color: var(--color-dark-alt-color);
    }
  }
  .dark\:bg-dark-box {
    &:where(.dark, .dark *) {
      background-color: var(--color-dark-box);
    }
  }
  .dark\:bg-dark-main-color {
    &:where(.dark, .dark *) {
      background-color: var(--color-dark-main-color);
    }
  }
  .dark\:bg-gray-700 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-green-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-green-900);
    }
  }
  .dark\:bg-header-overlay {
    &:where(.dark, .dark *) {
      background-color: var(--color-header-overlay);
    }
  }
  .dark\:bg-main-color {
    &:where(.dark, .dark *) {
      background-color: var(--color-main-color);
    }
  }
  .dark\:bg-orange-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-orange-900);
    }
  }
  .dark\:bg-purple-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-purple-900);
    }
  }
  .dark\:bg-\[radial-gradient\(circle_at_0\%_0\%\,_rgba\(59\,130\,246\,0\.35\)_0\,_rgba\(2\,6\,23\,1\)_55\%\)\,radial-gradient\(circle_at_100\%_100\%\,_rgba\(45\,212\,191\,0\.3\)_0\,_rgba\(2\,6\,23\,1\)_60\%\)\] {
    &:where(.dark, .dark *) {
      background-image: radial-gradient(circle at 0% 0%, rgba(59,130,246,0.35) 0, rgba(2,6,23,1) 55%),radial-gradient(circle at 100% 100%, rgba(45,212,191,0.3) 0, rgba(2,6,23,1) 60%);
    }
  }
  .dark\:from-gray-900 {
    &:where(.dark, .dark *) {
      --tw-gradient-from: var(--color-gray-900);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:via-\[\#959CB183\] {
    &:where(.dark, .dark *) {
      --tw-gradient-via: #959CB183;
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
  }
  .dark\:via-gray-800 {
    &:where(.dark, .dark *) {
      --tw-gradient-via: var(--color-gray-800);
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
  }
  .dark\:to-gray-900 {
    &:where(.dark, .dark *) {
      --tw-gradient-to: var(--color-gray-900);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:text-\[\#ffffffb3\] {
    &:where(.dark, .dark *) {
      color: #ffffffb3;
    }
  }
  .dark\:text-blue-400 {
    &:where(.dark, .dark *) {
      color: var(--color-blue-400);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-green-400 {
    &:where(.dark, .dark *) {
      color: var(--color-green-400);
    }
  }
  .dark\:text-orange-400 {
    &:where(.dark, .dark *) {
      color: var(--color-orange-400);
    }
  }
  .dark\:text-purple-400 {
    &:where(.dark, .dark *) {
      color: var(--color-purple-400);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:hover\:text-blue-400 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-blue-400);
        }
      }
    }
  }
  .dark\:hover\:text-blue-500 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-blue-500);
        }
      }
    }
  }
  .dark\:hover\:text-pink-400 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-pink-400);
        }
      }
    }
  }
  .dark\:hover\:shadow-dark-hover-box {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .max-\[992px\]\:dark\:bg-dark-main-color {
    @media (width < 992px) {
      &:where(.dark, .dark *) {
        background-color: var(--color-dark-main-color);
      }
    }
  }
}
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-regular-straight/css/uicons-regular-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-chubby/css/uicons-regular-chubby.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-bold-straight/css/uicons-bold-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-brands/css/uicons-brands.css');
* {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}
header nav a {
  --tw-duration: 100ms;
  transition-duration: 100ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-main-color);
    }
  }
  @media (width < 992px) {
    padding-block: calc(var(--spacing) * 3);
  }
  @media (width >= 64rem) {
    font-size: 17px;
  }
}
header a.active {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-main-color);
  --tw-duration: 100ms;
  transition-duration: 100ms;
}
header nav .sign a {
  width: 97px;
  border-radius: 3px;
  text-align: center;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  --tw-duration: 125ms;
  transition-duration: 125ms;
  &:hover {
    @media (hover: hover) {
      --tw-contrast: contrast(125%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
}
header .theme, header ion-icon {
  cursor: pointer;
  font-size: 23px;
  --tw-duration: 150ms;
  transition-duration: 150ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-main-color);
    }
  }
}
header ion-icon {
  display: none;
  @media (width >= 62rem) {
    display: inline-block;
  }
}
section, main {
  padding-block: calc(var(--spacing) * 16);
  --tw-duration: 125ms;
  transition-duration: 125ms;
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 20);
  }
  @media (width >= 62rem) {
    padding-block: calc(var(--spacing) * 28);
  }
}
#home .mouse .wheel {
  animation: scroll 1s infinite;
}
@keyframes scroll {
  0% {
    transform: translateX(-8.5px);
  }
  50% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(-8.5px);
  }
}
.title {
  margin-inline: auto;
  margin-bottom: 100px;
  max-width: 570px;
  text-align: center;
}
.title h2 {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-leading: var(--leading-tight) !important;
  line-height: var(--leading-tight) !important;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  @media (width >= 40rem) {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  @media (width >= 48rem) {
    font-size: 45px;
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.title p {
  --tw-leading: var(--leading-relaxed) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-main-text);
  @media (width >= 48rem) {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
}
.box {
  &:where(.dark, .dark *) {
    background-color: var(--color-dark-box);
  }
}
.box p {
  margin-top: calc(var(--spacing) * 5);
  padding-right: 10px;
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-main-text);
}
#about .part-1 .checklist li {
  display: flex;
  align-items: center;
  :where(& > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }
}
#about .part-1 .checklist li>div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background-color: var(--color-main-bg-color);
}
#about .part-1 .checklist li lord-icon {
  --tw-translate-y: -1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: 22px;
}
#about .part-2 fieldset {
  margin-bottom: calc(var(--spacing) * 4);
  --tw-border-style: none;
  border-style: none;
  padding: calc(var(--spacing) * 0);
}
#about .part-2 fieldset p {
  max-height: calc(var(--spacing) * 0);
  overflow: hidden;
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
#about .part-2 fieldset p {
  margin-left: 37px;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  @media (width >= 40rem) {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
}
#about .part-2 fieldset.open p {
  margin-block: calc(var(--spacing) * 4);
  max-height: 500px;
}
#about .part-2 fieldset legend {
  display: flex;
  cursor: pointer;
  column-gap: calc(var(--spacing) * 3);
  text-align: left;
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  @media (width >= 40rem) {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  @media (width >= 48rem) {
    font-size: 45px;
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
#about .part-2 fieldset legend ion-icon {
  --tw-translate-y: 15px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
#about .part-2 fieldset.open legend ion-icon {
  rotate: 90deg;
}
#about .part-2 fieldset legend h2 {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-duration: 250ms;
  transition-duration: 250ms;
  @media (width >= 40rem) {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  @media (width >= 64rem) {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  @media (width >= 80rem) {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
}
#about .part-2 fieldset:hover legend ion-icon, #about .part-2 fieldset:hover legend h2, #about .part-2 fieldset.active legend ion-icon, #about .part-2 fieldset.active legend h2 {
  color: var(--color-main-color);
  --tw-duration: 250ms;
  transition-duration: 250ms;
}
.services .box {
  width: 100%;
  border-radius: var(--radius-sm);
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 10);
  --tw-shadow: 0px 5px 15px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-dark-alt-color);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
}
.services .box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 70px;
  border-radius: 6px;
  background-color: var(--color-main-bg-color);
  padding-inline: 10px;
  padding-block: 12px;
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
  color: var(--color-main-color);
}
.services .box ion-icon {
  font-size: 43px;
}
.services .box h3 {
  margin-block: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 10);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.services .box .type {
  margin-bottom: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.services .box .type .price {
  display: flex;
  align-items: center;
}
.services .box .type .price h3, .services .box .type .price h4 {
  margin: calc(var(--spacing) * 0);
  font-size: 32px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.services .box .type .price span {
  --tw-translate-y: 3.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-main-text);
}
.services .box .type .sub {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.services .box p {
  margin-bottom: calc(var(--spacing) * 7);
}
.services .box .btn {
  margin-bottom: calc(var(--spacing) * 8);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background-color: var(--color-main-color);
  padding-block: calc(var(--spacing) * 3);
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  --tw-duration: 150ms;
  transition-duration: 150ms;
  &:hover {
    @media (hover: hover) {
      --tw-contrast: contrast(125%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
}
.services .box ul {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-300);
  padding-top: calc(var(--spacing) * 9);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.services .box ul li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.services .box ul li ion-icon {
  border-radius: calc(infinity * 1px);
  background-color: var(--color-main-bg-color);
  padding: calc(var(--spacing) * 0.5);
  font-size: 13px;
  color: var(--color-main-color);
}
.services .box ul li span {
  color: var(--color-main-text);
}
#clients .box {
  z-index: 1;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 8);
  --tw-shadow: 0px 5px 15px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 5);
  }
  @media (width >= 80rem) {
    padding: calc(var(--spacing) * 8);
  }
  &:where(.dark, .dark *) {
    background-color: #1d2430;
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
}
#clients .box .stars ion-icon {
  font-size: 16px;
  color: var(--color-amber-400);
}
#clients .box p {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: #788293;
  padding-bottom: calc(var(--spacing) * 8);
  color: #788293;
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
#clients .box .profile {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 8);
}
#clients .box .profile .text h4 {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
#clients .box .profile .text span {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: #788293;
}
.sub-type span {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.sub-type span.active {
  color: var(--color-main-color);
}
#portfolio .box {
  overflow: hidden;
  border-radius: var(--radius-sm);
  --tw-shadow: 0px 5px 15px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0px 5px 15px 5px var(--tw-shadow-color, rgba(75 ,108 ,247 ,0.4));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
}
#portfolio .box .pic {
  position: relative;
  margin-bottom: calc(var(--spacing) * 2);
  overflow: hidden;
  background-color: var(--color-dark-box);
  @media (width >= 40rem) {
    height: 380px;
  }
  @media (width >= 40rem) {
    overflow: hidden;
  }
}
#portfolio .box .pic img {
  width: 100%;
  background-color: var(--color-white);
  --tw-duration: 350ms;
  transition-duration: 350ms;
}
#portfolio .box:hover img {
  --tw-scale-x: 108%;
  --tw-scale-y: 108%;
  --tw-scale-z: 108%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
#portfolio .box .pic span {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  --tw-translate-x: 23px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: 23px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 50px;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-main-color);
  background-color: var(--color-main-bg-color);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-color);
}
#portfolio .box .pic a {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 100%;
  width: 100%;
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-light-alt-color);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-via: color-mix(in srgb, #eff2f9 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-light-alt-color) 70%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  opacity: 0%;
  --tw-duration: 500ms;
  transition-duration: 500ms;
  &:where(.dark, .dark *) {
    --tw-gradient-from: var(--color-dark-box);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:where(.dark, .dark *) {
    --tw-gradient-via: color-mix(in srgb, #121723 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-dark-main-color) 70%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
}
#portfolio .box:hover .pic a {
  opacity: 100%;
}
#portfolio .box .pic ion-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: 20%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: 50%;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-main-color);
  background-color: var(--color-main-bg-color);
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  font-size: 30px;
  color: var(--color-main-color);
  opacity: 0%;
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
#portfolio .box:hover .pic ion-icon {
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  opacity: 100%;
}
#portfolio .box .techs {
  margin-bottom: calc(var(--spacing) * 5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  row-gap: calc(var(--spacing) * 2);
}
#portfolio .box .techs span {
  border-radius: 50px;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-main-color);
  background-color: var(--color-main-bg-color);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  text-align: center;
  font-size: 11px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-main-color);
  text-transform: uppercase;
}
#portfolio .box h4 {
  width: fit-content;
  cursor: pointer;
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-duration: 250ms;
  transition-duration: 250ms;
  @media (width >= 40rem) {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
#portfolio .box:hover h4 {
  color: var(--color-main-color);
}
#portfolio .box p {
  margin-top: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-duration: 100ms;
  transition-duration: 100ms;
}
#contact .title {
  margin: calc(var(--spacing) * 0);
  text-align: left;
}
#contact .ticket .name, #contact .ticket .email, #contact .ticket .message {
  position: relative;
  width: 100%;
}
label {
  position: absolute;
  top: -35px;
  left: calc(var(--spacing) * 0);
  font-size: 14px;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
input, #contact .ticket textarea {
  width: 100%;
  border-radius: 3px;
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: transparent;
  background-color: #f8f8f8;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-color: var(--color-gray-200);
  --tw-duration: 125ms;
  transition-duration: 125ms;
  &::placeholder {
    color: #8397aa;
  }
  &:focus {
    border-color: var(--color-secondary-color);
  }
  &:where(.dark, .dark *) {
    background-color: #2C303B;
  }
  &:where(.dark, .dark *) {
    outline-style: var(--tw-outline-style);
    outline-width: 0px;
  }
  &:where(.dark, .dark *) {
    &:focus {
      border-color: var(--color-main-color);
    }
  }
}
#contact .subscribe input:not(:last-of-type) {
  margin-bottom: calc(var(--spacing) * 4);
}
footer {
  color: var(--color-main-text-alt);
}
footer .logo {
  margin-bottom: calc(var(--spacing) * 10);
}
footer h4 {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
footer a {
  display: block;
  --tw-duration: 125ms;
  transition-duration: 125ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-main-color);
    }
  }
}
footer a:not(:last-of-type) {
  margin-bottom: calc(var(--spacing) * 3);
}
footer .social ion-icon, footer .social i {
  cursor: pointer;
  font-size: 20px;
  --tw-duration: 125ms;
  transition-duration: 125ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-main-color);
    }
  }
}
footer .links {
  @media (width >= 64rem) {
    width: calc(2/12 * 100%);
  }
}
footer .credits a {
  margin: calc(var(--spacing) * 0);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  &:hover {
    @media (hover: hover) {
      color: var(--color-main-color);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
footer .credits div {
  gap: 4px;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 450px) {
  .container {
    max-width: 450px;
  }
}
@media (min-width: 575px) {
  .container {
    max-width: 575px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}
>>>>>>> fefbfd1fbd09109c764ab6802c09afa9b15aa3dd