@charset "utf-8";

*, ::before, ::after {

    --tw-border-spacing-x: 0;

    --tw-border-spacing-y: 0;

    --tw-translate-x: 0;

    --tw-translate-y: 0;

    --tw-rotate: 0;

    --tw-skew-x: 0;

    --tw-skew-y: 0;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    --tw-pan-x: ;

    --tw-pan-y: ;

    --tw-pinch-zoom: ;

    --tw-scroll-snap-strictness: proximity;

    --tw-gradient-from-position: ;

    --tw-gradient-via-position: ;

    --tw-gradient-to-position: ;

    --tw-ordinal: ;

    --tw-slashed-zero: ;

    --tw-numeric-figure: ;

    --tw-numeric-spacing: ;

    --tw-numeric-fraction: ;

    --tw-ring-inset: ;

    --tw-ring-offset-width: 0px;

    --tw-ring-offset-color: #fff;

    --tw-ring-color: rgb(59 130 246 / 0.5);

    --tw-ring-offset-shadow: 0 0 #0000;

    --tw-ring-shadow: 0 0 #0000;

    --tw-shadow: 0 0 #0000;

    --tw-shadow-colored: 0 0 #0000;

    --tw-blur: ;

    --tw-brightness: ;

    --tw-contrast: ;

    --tw-grayscale: ;

    --tw-hue-rotate: ;

    --tw-invert: ;

    --tw-saturate: ;

    --tw-sepia: ;

    --tw-drop-shadow: ;

    --tw-backdrop-blur: ;

    --tw-backdrop-brightness: ;

    --tw-backdrop-contrast: ;

    --tw-backdrop-grayscale: ;

    --tw-backdrop-hue-rotate: ;

    --tw-backdrop-invert: ;

    --tw-backdrop-opacity: ;

    --tw-backdrop-saturate: ;

    --tw-backdrop-sepia: ;

    --tw-contain-size: ;

    --tw-contain-layout: ;

    --tw-contain-paint: ;

    --tw-contain-style:

}



::backdrop {

    --tw-border-spacing-x: 0;

    --tw-border-spacing-y: 0;

    --tw-translate-x: 0;

    --tw-translate-y: 0;

    --tw-rotate: 0;

    --tw-skew-x: 0;

    --tw-skew-y: 0;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    --tw-pan-x: ;

    --tw-pan-y: ;

    --tw-pinch-zoom: ;

    --tw-scroll-snap-strictness: proximity;

    --tw-gradient-from-position: ;

    --tw-gradient-via-position: ;

    --tw-gradient-to-position: ;

    --tw-ordinal: ;

    --tw-slashed-zero: ;

    --tw-numeric-figure: ;

    --tw-numeric-spacing: ;

    --tw-numeric-fraction: ;

    --tw-ring-inset: ;

    --tw-ring-offset-width: 0px;

    --tw-ring-offset-color: #fff;

    --tw-ring-color: rgb(59 130 246 / 0.5);

    --tw-ring-offset-shadow: 0 0 #0000;

    --tw-ring-shadow: 0 0 #0000;

    --tw-shadow: 0 0 #0000;

    --tw-shadow-colored: 0 0 #0000;

    --tw-blur: ;

    --tw-brightness: ;

    --tw-contrast: ;

    --tw-grayscale: ;

    --tw-hue-rotate: ;

    --tw-invert: ;

    --tw-saturate: ;

    --tw-sepia: ;

    --tw-drop-shadow: ;

    --tw-backdrop-blur: ;

    --tw-backdrop-brightness: ;

    --tw-backdrop-contrast: ;

    --tw-backdrop-grayscale: ;

    --tw-backdrop-hue-rotate: ;

    --tw-backdrop-invert: ;

    --tw-backdrop-opacity: ;

    --tw-backdrop-saturate: ;

    --tw-backdrop-sepia: ;

    --tw-contain-size: ;

    --tw-contain-layout: ;

    --tw-contain-paint: ;

    --tw-contain-style:

}



/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

*,::after,::before {

    box-sizing: border-box;

    border-width: 0;

    border-style: solid;

    border-color: #e5e7eb

}



::after,::before {

    --tw-content: ''

}



:host,html {

    line-height: 1.5;

    -webkit-text-size-adjust: 100%;

    -moz-tab-size: 4;

    tab-size: 4;

    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    font-feature-settings: normal;

    font-variation-settings: normal;

    -webkit-tap-highlight-color: transparent

}



@font-face {

    font-family: "QuattrocentoSans-Regular";

    src: url("../fonts/QuattrocentoSans.woff2") format("woff2"),

         url("../fonts/QuattrocentoSans.woff") format("woff"),

         url("../fonts/QuattrocentoSans.eot") format("embedded-opentype"),

         url("../fonts/QuattrocentoSans.svg") format("svg");

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: "Manrope";

    font-style: normal;

    font-weight: 400 700;

    font-display: swap;

    src: url("//style.multifunctionalcharger.com/photo/multifunctionalcharger/tplimg/Manrope-VariableFont_wght.ttf")

}

body {

    margin: 0;

    line-height: inherit;

    /* font-family: "QuattrocentoSans-Regular"; */

}



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;

    text-decoration: inherit

}



b,strong {

    font-weight: bolder

}



code,kbd,pre,samp {

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    font-feature-settings: normal;

    font-variation-settings: normal;

    font-size: 1em

}



small {

    font-size: 80%

}



sub,sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline

}



sub {

    bottom: -.25em

}



sup {

    top: -.5em

}



table {

    text-indent: 0;

    border-color: inherit;

    border-collapse: collapse

}



button,input,optgroup,select,textarea {

    font-family: inherit;

    font-feature-settings: inherit;

    font-variation-settings: inherit;

    font-size: 100%;

    font-weight: inherit;

    line-height: inherit;

    letter-spacing: inherit;

    color: inherit;

    margin: 0;

    padding: 0

}



button,select {

    text-transform: none

}



button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {

    -webkit-appearance: button;

    background-color: transparent;

    background-image: none

}



:-moz-focusring {

    outline: auto

}



:-moz-ui-invalid {

    box-shadow: none

}



progress {

    vertical-align: baseline

}



::-webkit-inner-spin-button,::-webkit-outer-spin-button {

    height: auto

}



[type=search] {

    -webkit-appearance: textfield;

    outline-offset: -2px

}



::-webkit-search-decoration {

    -webkit-appearance: none

}



::-webkit-file-upload-button {

    -webkit-appearance: button;

    font: inherit

}



summary {

    display: list-item

}



blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {

    margin: 0

}



fieldset {

    margin: 0;

    padding: 0

}



legend {

    padding: 0

}



menu,ol,ul {

    list-style: none;

    margin: 0;

    padding: 0

}



dialog {

    padding: 0

}



textarea {

    resize: vertical

}



input::placeholder,textarea::placeholder {

    opacity: 1;

    color: #9ca3af

}



[role=button],button {

    cursor: pointer

}



:disabled {

    cursor: default

}



audio,canvas,embed,iframe,img,object,svg,video {

    display: block;

    vertical-align: middle

}



img,video {

    max-width: 100%;

    height: auto

}



[hidden]:where(:not([hidden=until-found])) {

    display: none

}



.container {

    width: 100%

}



@media (min-width: 640px) {

    .container {

        max-width:640px

    }

}



@media (min-width: 768px) {

    .container {

        max-width:768px

    }

}



@media (min-width: 1024px) {

    .container {

        max-width:1024px

    }

}



@media (min-width: 1280px) {

    .container {

        max-width:1280px

    }

}



@media (min-width: 1536px) {

    .container {

        max-width:1536px

    }

}
.uppercase{
    text-transform: uppercase;
}
.visible {
    visibility: visible
}
.invisible {
    visibility: hidden
}
.fixed {
    position: fixed
}
.absolute {
    position: absolute
}
.relative {
    position: relative
}
.sticky{
    position: sticky;
}
.white-nowrap{
    white-space: nowrap;
}
.inset-0 {
    inset: 0px
}
.top-8{
    top: 2rem;
}
.top-5{
    top: 1.25rem;
}
.top-0 {
    top: 0px
}
.bottom--1{
    bottom: -1px;
}
.left-0{
    left: 0;
}
.top-1\/2{
    top: 50%;
}
.left-1\/2{
    left: 50%;
}
.right--full{
    right: -107%;
}
.-z-10 {
    z-index: -10
}
.z-50 {

    z-index: 50

}



.mx-auto {

    margin-left: auto;

    margin-right: auto

}



.mb-1 {

    margin-bottom: 0.25rem

}

.mbpx-5{

    margin-bottom: 5px;

}

.block {
    display: block
}
.inline-block{
    display: inline-block;
}
.flex {
    display: flex
}
.inline-flex {
    display: inline-flex
}
.grid {
    display: grid
}
.hidden {
    display: none
}
.h-auto {
    height: auto
}
.h-full {
    height: 100%
}
.h-22{
    height: 5.5rem;
}
.h-19{
    height: 4.75rem;
}
.h-12\.5{
    height: 3.125rem;
}
h-11{
    height: 2.75rem;
}
.h-px-2 {
    height: 3px;
}
.h-0{
    height: 0;
}
.w-200{
    width: 50rem;
}
.w-80{
    width: 20rem;
}
.w-45{
    width: 11.25rem;
}
.w-30{
    width: 7.5rem;
}
.w-22{
    width: 5.5rem;
}
.w-19{
    width: 4.75rem;
}
.w-12\.5{
    width: 3.125rem;
}

.w-11{

    width: 2.75rem;

}

.w-full {

    width: 100%

}

.max-w-3xl {

    max-width: 75rem

}

.max-w-2xl {

    max-width: 42rem

}

.max-w-lg {

    max-width: 32rem

}

.max-w-xs {

    max-width: 20rem

}

.max-w-9\/10{

    max-width: 90%;

}

.max-w-full{

    max-width: 100%;

}

.max-h-125 {

    max-height: 31.25rem

}

.max-h-9\/10{

    max-height: 90%;

}

.max-h-full{

    max-height: 100%;

}

.min-h-30{

    min-height: 7.5rem;

}

.flex-shrink-0 {

    flex-shrink: 0

}

.translate-conter{

    transform: translateY(-50%) translateX(-50%)

}

.translate-y-8 {

    --tw-translate-y: 2rem;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))

}



.translate-y-0 {

    --tw-translate-y: 0px;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))

}



.grid-cols-1 {

    grid-template-columns: repeat(1, minmax(0, 1fr))

}



.grid-cols-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr))

}

.form-group.full{

    grid-column: span 2;

}

.flex-col {

    flex-direction: column

}



.flex-wrap {

    flex-wrap: wrap

}



.items-start {

    align-items: flex-start

}

.items-center {

    align-items: center

}

.items-end {

    align-items: flex-end

}

.align-stretch{

    align-items: stretch;

}

.justify-center {

    justify-content: center

}



.justify-between {

    justify-content: space-between

}

.flex-1{

    flex: 1;

}
.gapx-15{
    gap: 15px;
}

.gapx-10{

    gap: 10px;

}

.gapx-5{

    gap: 5px;

}

.gap-15{

    gap: 3.75rem;

}

.gap-10{

    gap: 2.5rem;

}

.gap-7{

    gap: 1.75rem;

}

.gap-5{

    gap: 1.25rem;

}

.gap-3{

    gap: 0.75rem;

}

.gap-2 {

    gap: 0.5rem

}

.gap-1 {

    gap: 0.25rem

}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-x-reverse: 0;

    margin-right: calc(2rem * var(--tw-space-x-reverse));

    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))

}



.space-y-3 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))

}



.space-y-6 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))

}
.overflow-hidden {
    overflow: hidden
}
.rounded-6xl {
    border-radius: 1.5rem
}
.rounded-2xl {
    border-radius: 1rem
}
.rounded-full {
    border-radius: 9999px
}
.rounded-lg {
    border-radius: 0.5rem
}
.rounded-xl {
    border-radius: 0.75rem
}
.corner-top-left-3{
    border-top-left-radius: .75rem;
}
.corner-top-right-3{
    border-top-right-radius: .75rem;
}
.corner-top-right-6{
    border-top-right-radius: 1.5rem;
}
.corner-bottom-right-6{
    border-bottom-right-radius: 1.5rem;
}
.square-full{
    padding-bottom: 100%;
}
.square-3\/5{
    padding-bottom: 60%;
}
.aspect-ratio-16\/9{
    aspect-ratio: 16 / 9;
}
.aspect-ratio-21\/9{
    aspect-ratio: 21 / 9;
}
.border {

    border-width: 1px

}

.border-2 {

    border-width: 2px

}

.border-l-2 {

    border-left-width: 2px

}

.border-t-2 {

    border-top-width: 2px

}

.border-t {

    border-top-width: 1px

}

.border-r {

    border-right-width: 1px

}

.border-b {

    border-bottom-width: 1px

}

.border-l {

    border-left-width: 1px

}

.border-style{

    border-style: dashed;

}



.border-gray-38 {

    --tw-border-opacity: 1;

    border-color: rgb(38 38 38 / var(--tw-border-opacity, 1))

}

.border-gray-008 {

    --tw-border-opacity: 0.08;

    border-color: rgb(0 0 0 / var(--tw-border-opacity, 0.08))

}

.border-gray-300 {

    --tw-border-opacity: 1;

    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))

}

.border-gray-700 {

    --tw-border-opacity: 1;

    border-color: rgb(242 242 247 / var(--tw-border-opacity, 1))

}



.border-gray-800 {

    --tw-border-opacity: 1;

    border-color: rgb(17 17 17 / var(--tw-border-opacity, 1))

}



.border-primary {

    --tw-border-opacity: 1;

    border-color: rgb(22 93 255 / var(--tw-border-opacity, 1))

}

.border-white {

    --tw-border-opacity: 1;

    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))

}

.border-white-30 {

    --tw-border-opacity: 0.3;

    border-color: rgb(255 255 255 / var(--tw-border-opacity, 0.3))

}

.border-black {

    --tw-border-opacity: 1;

    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1))

}

.bg-dark {

    --tw-bg-opacity: 1;

    background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1))

}

.bg-gray-13 {

    --tw-bg-opacity: 1;

    background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1))

}

.bg-gray-200 {

    --tw-bg-opacity: 1;

    background-color: rgb(242 242 247 / var(--tw-bg-opacity, 1))

}

.bg-gray-400 {

    --tw-bg-opacity: 1;

    background-color: rgb(239 238 237 / var(--tw-bg-opacity, 1))

}

.bg-gray-600 {

    --tw-bg-opacity: 1;

    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))

}

.bg-gray-800 {

    --tw-bg-opacity: 1;

    background-color: rgb(242 242 247 / var(--tw-bg-opacity, 1))

}

.bg-gray-50 {

    --tw-bg-opacity: 1;

    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))

}



.bg-green-500 {

    --tw-bg-opacity: 1;

    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))

}



.bg-light {

    --tw-bg-opacity: 1;

    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))

}



.bg-primary {

    --tw-bg-opacity: 1;

    background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1))

}



.bg-primary\/10 {

    background-color: rgb(22 93 255 / 0.1)

}



.bg-secondary\/10 {

    background-color: rgb(54 207 201 / 0.1)

}



.bg-white {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))

}

.bg-white-0\.1 {

    --tw-bg-opacity: 0.1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 0.1))

}

.bg-black {

    --tw-bg-opacity: 1;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))

}

.bg-nav{

    --tw-bg-opacity: .85;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, .85))

}



.bg-gradient-to-br {

    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))

}



.bg-gradient-to-t {

    background-image: linear-gradient(to top, var(--tw-gradient-stops))

}

.bg-size-cover{

    background-size: cover;

}

.from-dark\/40 {

    --tw-gradient-from: rgb(29 41 57 / 0.4) var(--tw-gradient-from-position);

    --tw-gradient-to: rgb(29 41 57 / 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)

}



.from-primary\/5 {

    --tw-gradient-from: rgb(22 93 255 / 0.05) var(--tw-gradient-from-position);

    --tw-gradient-to: rgb(22 93 255 / 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)

}



.to-secondary\/5 {

    --tw-gradient-to: rgb(54 207 201 / 0.05) var(--tw-gradient-to-position)

}



.to-transparent {

    --tw-gradient-to: transparent var(--tw-gradient-to-position)

}



.object-contain {

    object-fit: contain

}



.object-cover {

    object-fit: cover

}



.text-center {

    text-align: center

}



.font-inter {

    font-family: Inter, sans-serif

}

.font-Arial {

    font-family: Arial, Black

}

/* .font-quatt{

    font-family: "QuattrocentoSans-Regular";

} */

.font-manrope{

    font-family: 'Manrope';

}

.text-3xl {

    font-size: 2.75rem !important;

    line-height: 2rem

}

.text-4xl {

    font-size: 1.75rem;

    line-height: 2rem

}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-2xl-important {
    font-size: 1.5rem !important;
    line-height: 2rem
}
.text-\[clamp\(1\.25rem\2c 3vw\2c 2rem\)\] {

    font-size: clamp(1.25rem,3vw,2rem);

    line-height: 2.4rem;

}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.25rem\)\] {

    font-size: clamp(1.5rem,3vw,2.25rem)

}

.text-\[clamp\(2rem\2c 5vw\2c 3rem\)\] {

    font-size: clamp(2rem,5vw,3rem);

    line-height: 3.2rem;

}

.text-\[clamp\(2\.5rem\2c 5vw\2c 4rem\)\] {

    font-size: clamp(2.5rem,5vw,4rem);

    line-height: 1.1;

}

.text-\[clamp\(2rem\2c 5vw\2c 4\.5rem\)\] {

    font-size: clamp(2rem,5vw,4.5rem)

}



.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.text-sm-important {
    font-size: 0.875rem !important;
    line-height: 1.25rem
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}
.text-xl-important {
    font-size: 1.25rem !important;
    line-height: 1.75rem
}
.text-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-4{

    margin-left: 1rem;

}

.mt-5{

    margin-top: 1.25rem;

}

.mt-3{

    margin-top: .75rem;

}

.mt-2{

    margin-top: .5rem;

}

.mb-7{

    margin-bottom: 1.75rem;

}

.mb-5{

    margin-bottom: 1.25rem;

}

.mb-4{

    margin-bottom: 1rem;

}

.mb-3{
    margin-bottom: .75rem;
}
.pl-8{
    padding-left: 2rem;
}
.pl-5{
    padding-left: 1.25rem;
}
.pl-4{
    padding-left: 1rem;
}
.pl-3{
    padding-left: .75rem;
}
.px-11{
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}
.px-7{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.px-6{

    padding-left: 1.5rem;

    padding-right: 1.5rem;

}

.px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-4{
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-10{

    padding-top: 2.5rem;

    padding-bottom: 2.5rem;

}

.py-7{

    padding-top: 1.75rem;

    padding-bottom: 1.75rem;

}

.py-5{

    padding-top: 1.25rem;

    padding-bottom: 1.25rem;

}

.py-4{

    padding-top: 1rem;

    padding-bottom: 1rem;

}

.py-3{

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

}

.py-2{

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

}

.py-1{

    padding-top: 0.25rem;

    padding-bottom: 0.25rem;

}
.pt-7{
    padding-top: 1.75rem;
}
.pt-5{

    padding-top: 1.25rem;

}

.pb-5{

    padding-bottom: 1.25rem;

}

.pb-4{

    padding-bottom: 1rem;

}

.p-10{

    padding: 2.5rem;

}

.p-6{

    padding: 1.5rem;

}
.p-5{

    padding: 1.25rem;

}

.p-4{

    padding: 1rem;

}

.p-3{

    padding: 0.75rem;

}

.p-1{

    padding: 0.3125rem;

}

.pxs-3{

    padding-left: 0.9375rem;

    padding-right: 0.9375rem;

}

.font-bold {

    font-weight: 700

}



.font-medium {

    font-weight: 500

}



.font-semibold {

    font-weight: 600

}



.leading-tight {

    line-height: 1.25

}



.text-dark {

    --tw-text-opacity: 1;

    color: rgb(29 41 57 / var(--tw-text-opacity, 1))

}



.text-gray-400 {

    --tw-text-opacity: 1;

    color: rgb(156 163 175 / var(--tw-text-opacity, 1))

}



.text-gray-700 {

    --tw-text-opacity: 1;

    color: rgb(142 142 147 / var(--tw-text-opacity, 1))

}



.text-gray-800 {

    --tw-text-opacity: 1;

    color: rgb(242 242 247 / var(--tw-text-opacity, 1))

}



.text-gray-medium {

    --tw-text-opacity: 1;

    color: rgb(102 112 133 / var(--tw-text-opacity, 1))

}



.text-primary {

    --tw-text-opacity: 1;

    color: rgb(22 93 255 / var(--tw-text-opacity, 1))

}



.text-secondary {

    --tw-text-opacity: 1;

    color: rgb(102 102 102 / var(--tw-text-opacity, 1))

}



.text-white {

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))

}

.text-white-0\.8 {

    --tw-text-opacity: 0.8;

    color: rgb(255 255 255 / var(--tw-text-opacity, 0.8))

}

.text-black {

    --tw-text-opacity: 1;

    color: rgb(0 0 0 / var(--tw-text-opacity, 1))

}

.antialiased {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



.opacity-0 {

    opacity: 0

}



.opacity-70 {

    opacity: 0.7

}



.opacity-100 {

    opacity: 1

}



.shadow-2xl {

    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.shadow-lg {

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.shadow-md {

    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)

}



.shadow-sm {

    --tw-shadow: 4px 4px 0 rgb(142 142 147 / 1),  4px 4px 0 rgb(142 142 147 / 1);

    --tw-shadow-colored: 4px 4px 0  var(--tw-shadow-color), 4px 4px 0  var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #8e8e93), var(--tw-ring-shadow, 0 0 #8e8e93), var(--tw-shadow)

}



.blur-3xl {

    --tw-blur: blur(64px);

    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)

}



.transition-all {

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms

}



.transition-colors {

    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms

}

.duration-300 {
    transition-duration: 300ms
}

.duration-700 {
    transition-duration: 700ms
}

.bg-gradient-tech {
    background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(22, 93, 255, 0.15);
}

.transition{
    transition: all 0.3s;
}

.transition-3s{
    transition: all 0.3s;
}

.transition-3s:hover{
    transform: translateY(-5px);
}

.nav-scrolled {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.before\:linek::before{
    content: '';
    position: absolute;
    width: 6px;
    left: 5px;
    top: 50%;
    height: 1.5rem;
    background-color: #000000;
    border-radius: 10px;
    transform: translateY(-50%);
}
.before\:round::before{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: rgb(255 255 255 / .8);
    transform: translateY(-50%);
    top: 50%;
    left: 0;
}
.hover\:bg-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 93 255 / var(--tw-bg-opacity, 1))
}

.hover\:bg-primary\/5:hover {
    background-color: rgb(22 93 255 / 0.05)
}

.hover\:bg-primary\/90:hover {
    background-color: rgb(22 93 255 / 0.9)
}

.hover\:bg-white:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.hover\:bg-black:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-223:hover{
    --tw-bg-opacity: 0.8;
    background-color: rgb(223 223 223 / var(--tw-bg-opacity, 0.8))
}

.hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(22 93 255 / var(--tw-text-opacity, 1))
}

.hover\:text-primary\/80:hover {
    color: rgb(22 93 255 / 0.8)
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.hover\:border-black:hover {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1))
}
.hover\:opacity:hover{
    opacity: 1;
}
.focus\:border-primary:focus {
    --tw-border-opacity: 1;
    border-color: rgb(22 93 255 / var(--tw-border-opacity, 1))
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(22 93 255 / var(--tw-ring-opacity, 1))
}

.down .icon-a-fangxiangshang,.up .icon-a-fangxiangxia{
    display: none;
}

.page a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    transition: .3s;
    cursor: pointer;
}

.page .page-num-current{

    background: #000000;

    color: #ffffff;

    border-color: #000000;

    cursor: default;

}

.page a:hover{

    background: #000000;

    color: #ffffff;

    border-color: #000000;

    /* cursor: default; */

}

li.on{

    background-color: #ffffff;

}

.letter-spacing-2{

    letter-spacing: 2px;

}

.letter-spacing{

    letter-spacing: -1px

}

.swiper .slide-button{

    width: 2.5rem;

    height: 2.5rem;

    background-color: rgb(255 255 255 / 0.8);

    border-radius: 50%;

    border: 1px solid rgb(0 0 0 / 0.08);

}

.swiper .slide-button::after{

    font-size: .75rem;

    font-weight: 600;

    color: #000000;

}

.swiper .slide-button:hover,.swiper .slide-button:hover::after{

    background-color: rgb(0 0 0 / 1);

    border: 1px solid rgb(0 0 0 / 1);

    color: #ffffff;

    transition: all .3s;

}

.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: rgb(0 0 0 / 1);
}

li.active .header a,li.active1 a{

    --tw-text-opacity: 1;

    color: rgb(0 0 0 / var(--tw-text-opacity, 1))

}
.submenu-nav nav>ul>li>a:hover,
.submenu-nav nav>ul>li>a.active{
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}

.file-wrap {
    position: relative;
    display: inline-block;
}
.file-btn {
    padding: 10px 20px;
    background: #ffffff;
    color: #000000;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.file-wrap input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.name-text{
    margin-left:12px;
}
.nav-submenu:hover>div{
    display: block;
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction:row
    }
}


@media (min-width: 768px) {
    .md\:mt-30{
        margin-top: 7.5rem;
    }
    .md\:mt-15{
        margin-top: 3.75rem;
    }
    .md\:mt-10{
        margin-top: 2.5rem;
    }
    .md\:mb-0 {
        margin-bottom:0px
    }
    .md\:mb-6{
        margin-bottom: 1.5rem;
    }
    .md\:mb-7{
        margin-bottom: 1.75rem;
    }
    .md\:mb-10{
        margin-bottom: 2.5rem;
    }
    .md\:mb-12{
        margin-bottom: 3rem;
    }
    .md\:mb-15{
        margin-bottom: 3.75rem;
    }
    .md\:mb-20{
        margin-bottom: 5rem;
    }
    .md\:my-5{
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .md\:block {
        display: block
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:w-2\/5 {
        width: 40%
    }

    .md\:w-3\/5 {
        width: 60%
    }

    .md\:w-4\/5 {
        width: 70%
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }
    .md\:p-0{
        padding: 0;
    }
    .md\:p-6{
        padding: 1.5rem;
    }
    .md\:p-7{
        padding: 1.75rem;
    }
    .md\:p-10{
        padding: 2.5rem;
    }
    .md\:p-15{
        padding: 3.75rem;
    }
    .md\:py-38{
        padding-top: 9.5rem;
        padding-bottom: 9.5rem;
    }
    .md\:py-15{
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
    .md\:py-10{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .md\:py-5{
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .md\:py-sm{
        padding-top: .625rem;
        padding-bottom: .625rem;
    }
    .md\:pt-15{
        padding-top: 3.75rem;
    }
    .md\:px-25{
        padding-left: 6.25rem;
        padding-right: 6.25rem;
    }
    .md\:px-20{
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .md\:px-10{
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
    .md\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
    .md\:pt-15{
        padding-top: 3.75rem;
    }
    .md\:pb-28 {
        padding-bottom: 7rem
    }
    .md\:pt-40 {
        padding-top: 10rem

    }

    .md\:px-1\/3{

        padding-right: .625rem;

        padding-left: 1.875rem;

    }

    .md\:h-196{

        height: 49rem;

    }

    .md\:h-18{

        height: 4.375rem;

    }

    .md\:wnews-1\/3{

        width: calc(33.333% - 3.75rem);

    }

}



@media (min-width: 1024px) {

    .lg\:col-span-2 {

        grid-column:span 2 / span 2

    }



    .lg\:col-span-3 {

        grid-column: span 3 / span 3

    }



    .lg\:mb-0 {

        margin-bottom: 0px

    }



    .lg\:w-1\/2 {

        width: 50%

    }



    .lg\:grid-cols-3 {

        grid-template-columns: repeat(3, minmax(0, 1fr))

    }



    .lg\:grid-cols-4 {

        grid-template-columns: repeat(4, minmax(0, 1fr))

    }



    .lg\:grid-cols-5 {

        grid-template-columns: repeat(5, minmax(0, 1fr))

    }



    .lg\:flex-row {

        flex-direction: row

    }



    .lg\:px-8 {

        padding-left: 2rem;

        padding-right: 2rem

    }

}



@media (min-width: 1280px) {

    .max-w-1366{

        max-width: 1366px;

    }

}