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

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: currentColor;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/

html {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: Arial, sans-serif;
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

    /*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

    input::-moz-placeholder, textarea::-moz-placeholder {
        opacity: 1;
        /* 1 */
        color: black; /*#9ca3af;*/
        /* 2 */
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        /* 1 */
        color: black; /*#9ca3af;*/
        /* 2 */
    }

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
    display: none;
}

header {
    left: -12px;
    top: -15px;
    width: 100%;
    height: 129px;
    opacity: 1;
}

*, ::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:;
}

::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:;
}

@font-face {
    font-family: 'AvantDemi';
    src: url('../fonts/ITCAvantGardeStd-Demi.otf');
}

@font-face {
    font-family: 'AvantMedium';
    src: url('../fonts/ITCAvantGardeStd-Md.otf');
}

@font-face {
    font-family: 'RocGroteskRegular';
    src: url('../fonts/RocGroteskRegular.otf');
}

@font-face {
    font-family: 'RocGroteskMedium';
    src: url('../fonts/RocGroteskMedium.otf');
}

@font-face {
    font-family: 'RocGroteskExtraBold';
    src: url('../fonts/RocGroteskExtraBold.otf');
}

.avantdemi {
    font-family: 'AvantDemi';
}

.rocgroteskmedium {
    font-family: 'RocGroteskMedium';
}

.rocgroteskextrabold {
    font-family: 'RocGroteskExtraBold';
}

/* breadcrumbs */

.breadcrumbs {
    margin: 12px 0px;
    font-family: 'RocGroteskMedium';
}

    .breadcrumbs li {
        display: inline-block;
    }

        .breadcrumbs li:after {
            content: "";
            display: inline-block;
            height: 9px;
            width: 9px;
            margin: 0px 8px;
            background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDEuNDk5OTdMNi4xMjcxNCA0Ljk5OTk5TDEgOC41MDAwMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K") center center no-repeat;
        }

        .breadcrumbs li:last-child:after {
            display: none;
        }

@media (min-width: 1024px) {
    .breadcrumbs {
        margin: 16px 0px 80px;
    }
}

.home-hero {
    position: relative;
    /*background: linear-gradient(90deg, rgba(161, 5, 116, 0.82) 0%, rgba(137, 56, 242, 0.9) 100%);*/
    margin-top:-130px;
}

.main-nav {
    height: 100vh;
    padding: 1rem;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .main-nav {
        height: auto;
    }
}

.main-nav li {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(77 77 77 / var(--tw-border-opacity));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    --tw-text-opacity: 1;
    /*color: rgb(255 255 255 / var(--tw-text-opacity));*/
}

    .main-nav li:last-child {
        border-width: 0px;
    }

@media (min-width: 1024px) {
    .main-nav li {
        margin-right: 34px;
        display: inline-block;
        border-width: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.main-nav li a {
    font-family: 'OPPOSans-H';
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0px;
    line-height: 18.47px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
}

@media (min-width:1024px) {
    .main-nav li a {
        padding-bottom: 10px;
    }

        .main-nav li a:hover {
            border-bottom: solid 2px #FA4616;
        }
}

.header-home {
    transition: all 0.3s linear;
}

.header-logo {
    position: absolute;
    z-index: 0;
    left: 0px;
    top: 0px;
    width: 149px;
    height: 129px;
    mix-blend-mode: normal;
    filter: brightness(500%);
    --bg-img: var(--img-url);
    --img-url: url(../img/logo.png);
}

header.scroll {
    background-color: rgba(0,0,0,0.4)
}

.main-nav-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 3;
    justify-content: start;
    left: -12px;
    top: -15px;
    width: 1899px;
    height: 129px;
    mix-blend-mode: normal;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 800;
    opacity: 1;
    font-family: 'Open Sans';
    letter-spacing: 0px;
    white-space: nowrap;
}

.nav-link-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 3;
    justify-content: start;
    /*left: 182px;
    top: 46px;*/
    height: 19px;
    mix-blend-mode: normal;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 800;
    opacity: 1;
    font-family: 'Open Sans';
    letter-spacing: 0px;
    white-space: nowrap;
}

.nav-signup {
    left: 1689px;
    top: 24px;
    width: 83px;
    height: 33px;
    opacity: 1;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(194, 222, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.nav-signup-text {
    margin-left: -15px;
    margin-top: 8px;
    width: 69px;
    height: 19px;
    opacity: 1;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0px;
    line-height: 18.47px;
    color: rgba(42, 130, 228, 1);
    text-align: left;
    vertical-align: top;
}

.search {
    border: unset !important;
    box-shadow: unset;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    mix-blend-mode: normal;
}

.nav-checkbox {
    display: none;
}

.nav-button {
    width: 50px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    position: absolute;
    left: 25px;
    top: 2px;
    display: inline-block;
}

.nav-icon {
    position: relative;
    top: 25px;
}

    .nav-icon,
    .nav-icon::after,
    .nav-icon::before {
        width: 36px;
        height: 3px;
        content: "";
        display: inline-block;
        background-color: #000;
        transition: all 0.1s linear;
    }

        .nav-icon::before,
        .nav-icon::after {
            position: absolute;
            left: 0;
        }

        .nav-icon::before {
            top: -10px;
        }

        .nav-icon::after {
            top: 10px;
        }

.nav-checkbox:checked + .nav-button .nav-icon {
    background-color: transparent;
}

    .nav-checkbox:checked + .nav-button .nav-icon::before {
        top: 0;
        transform: rotate(135deg);
    }

    .nav-checkbox:checked + .nav-button .nav-icon::after {
        top: 0px;
        transform: rotate(-135deg);
    }

.nav-checkbox:checked ~ .main-nav-container {
    left: 0px;
    opacity: 1;
    z-index: 99;
}

.open-menu {
    overflow: hidden;
}

.menu-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.3);
}

@media (min-width: 1024px) {
    .main-nav-container {
        position: relative;
        top: 0;
        left: 0;
        background-color: transparent;
        width: 100%;
        opacity: 1;
        z-index: 1;
    }

    .nav-button {
        display: none;
    }
}

/* dropdown in top header */

.image-container {
    position: relative;
    width: 100%;
    /*max-width: 600px;*/ /* Adjust based on your needs */
}
    .image-container img {
        width: 100%;
        height: auto;
        display: block;
    }

.banner-text {
    left: 34px;
    top: 146px;
    width: 538px;
    height: 48px;
    opacity: 1;
    /** 文本1 */
    font-family: 'Open Sans';
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group1 {
    left: 57px;
    top: 1042px;
    width: 1750px;
    height: 646px;
    opacity: 1;
}

.group1-left {
    margin-left: 57px;
    margin-top: 88px;
    width: 847px;
    height: 618.7px;
    opacity: 1;    
}

.group1-title {
    left: 1004px;
    top: 1084px;
    width: 627px;
    height: 46px;
    opacity: 1;
    /** 文本1 */
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position:absolute;
}

.group1-desc {
    left: 1004px;
    top: 1160px;
    width: 803px;
    height: 528px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group1-button {
    left: 1005px;
    top: 1562px;
    width: 199px;
    height: 60px;
    opacity: 1;
    border-radius: 6px;
    background: rgba(42, 130, 228, 1);
    box-shadow: 6px 7px 23px rgba(0, 0, 0, 0.22);
    position: absolute;
}

.group1-button-text {
    left: 33px;
    width: 144px;
    height: 52px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group2 {
    left: 0px;
    top: 1662px;
    /*width: 1920px;*/
    height: 829px;
    opacity: 1;
}

.group2-background {
    margin-top: -548px;
    /*width: 1920px;*/
    height: 743px;
    opacity: 1;
    background: url(/img/group2-bg.png);
    background-size: cover;
}

.group2-image {
    margin-left: 1074px;
    width: 736px;
    height: 625px;
    opacity: 1;
}

.group2-title {
    left: 104px;
    top: 1844px;
    width: 831px;
    height: 107px;
    opacity: 1;
    /** 文本1 */
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group2-desc {
    left: 104px;
    top: 1943px;
    width: 803px;
    height: 528px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group2-button {
    left: 105px;
    top: 2333px;
    width: 199px;
    height: 60px;
    opacity: 1;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 6px 7px 23px rgba(255, 255, 255, 0.27);
    position: absolute;
}

.group2-button-text {
    left: 33px;
    width: 144px;
    height: 52px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(42, 130, 228, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group3 {
    left: 57px;
    top: 200px;
    width: 1813px;
    height: 638px;
    opacity: 1;
    position: absolute;
}

.group3-background {
    top: -100px;
    /*width: 1920px;*/
    height: 927px;
    opacity: 1;
    background: rgba(194, 222, 255, 0.34);
    position: relative;
    z-index: -1;
}

.group3-image {
    left: 57px;
    top: 2585px;
    width: 847px;
    height: 571.73px;
    opacity: 1;
}

.group3-title {
    left: 954px;
    top: 19px;
    width: 866px;
    height: 46px;
    opacity: 1;
    /** 文本1 */
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group3-desc {
    left: 954px;
    top: 100px;
    width: 803px;
    height: 528px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group3-button {
    left: 955px;
    top: 450px;
    width: 199px;
    height: 60px;
    opacity: 1;
    border-radius: 6px;
    background: rgba(42, 130, 228, 1);
    box-shadow: 6px 7px 23px rgba(0, 0, 0, 0.22);
    position: absolute;
}

.group3-button-text {
    left: 30px;
    width: 144px;
    height: 52px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group4 {
    left: 107px;
    top: 3434px;
    width: 1745px;
    height: 625px;
    opacity: 1;
}

.group4-image {
    margin-left: 1005px;
    width: 847px;
    height: 563.77px;
    opacity: 1;
}

.group4-title {
    left: 107px;
    top: 3455px;
    width: 866px;
    height: 46px;
    opacity: 1;
    /** 文本1 */
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group4-desc {
    left: 107px;
    top: 3531px;
    width: 803px;
    height: 528px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group4-button {
    left: 108px;
    top: 3933px;
    width: 199px;
    height: 60px;
    opacity: 1;
    border-radius: 6px;
    background: rgba(42, 130, 228, 1);
    box-shadow: 6px 7px 23px rgba(0, 0, 0, 0.22);
    position: absolute;
}

.group4-button-text {
    left: 30px;
    width: 144px;
    height: 52px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group5 {
    left: -866px;
    top: 4146px;
    width: 1750px;
    height: 661px;
    opacity: 1;
}

.group5-background {
    margin-left: 77px;
    width: 1767px;
    height: 661px;
    opacity: 1;
    border-radius: 24px;
    background: linear-gradient(149.44deg, rgba(255, 235, 59, 0.25) 0%, rgba(194, 222, 255, 0.69) 100%);
}

.group5-image {
    margin-left: -866px;
    width: 1782px;
    height: 661px;
    opacity: 1;
}

.group5-title {
    left: 990px;
    top: 4182px;
    width: 866px;
    height: 46px;
    opacity: 1;
    /** 文本1 */
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 47.48px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group5-desc {
    left: 990px;
    top: 4258px;
    width: 803px;
    height: 528px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.group5-button {
    left: 991px;
    top: 4660px;
    width: 199px;
    height: 60px;
    opacity: 1;
    border-radius: 6px;
    background: rgba(42, 130, 228, 1);
    box-shadow: 6px 7px 23px rgba(0, 0, 0, 0.22);
    position: absolute;
}

.group5-button-text {
    left: 30px;
    width: 144px;
    height: 52px;
    opacity: 1;
    /** 文本1 */
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 54px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    position: absolute;
}

.banner-headline {
    color: #FFF;
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    font-family: 'RocGroteskExtraBold';
    font-size: 28px;
    font-style: normal;
    font-weight: 750;
    line-height: 110%;
    /* 74.8px */
    text-transform: uppercase;
    position: absolute;
    top: 60%;
    left: 23px;
    width: 150px;
    transform: translateY(-50%);
}

@media (min-width: 1024px) {
    .banner-headline {
        font-size: 68px;
        width: 500px;
        left: 75px;
    }
}

.news-letter-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    padding: 0 30px;
    max-width: 500px;
    text-align: center;
}

.footer-links {
    font-family: Arial, sans-serif;
}

    .footer-links p {
        margin-bottom: 0.5rem;
        font-size: 16px;
        line-height: 1.5rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .footer-links li {
        margin-bottom: 6px;
    }

    .footer-links a {
        font-size: 14px;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

.accord-footer-checkbox {
    display: none;
}

.accord-footer-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .accord-footer-label svg {
        transition: all 0.2s linear;
    }

.accord-footer-body {
    height: auto;
    overflow: hidden;
    padding-top: 10px;
}

.accord-footer-checkbox:checked ~ .accord-footer-body {
    height: 0;
    padding-bottom: 0px;
    padding-top: 0px;
}

.accord-footer-checkbox:checked ~ .accord-footer-label svg {
    transform: scaleX(-1) scaleY(-1);
}

@media (min-width: 1024px) {
    .accord-footer-body {
        height: auto;
    }

    .accord-footer-checkbox:checked ~ .accord-footer-body {
        height: auto;
    }
}

.radio {
    display: block;
    margin-bottom: 8px;
    position: relative;
    padding-left: 35px;
    font-size: 14px;
    color: #333;
}

    .radio input[type="checkbox"] {
        display: none;
    }

    .radio span {
        border: solid 1px #979797;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 3px;
        position: absolute;
        left: 0;
    }

        .radio span:after {
            content: "";
            width: 18px;
            height: 18px;
            display: block;
            transition: all 0.1s linear;
            transform: scale(0);
            background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMS4zIDguNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTEuMyA4LjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojOTc5Nzk3O30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQuMiw1LjdMMS40LDIuOEwwLDQuMmw0LjIsNC4ybDcuMS03LjFMOS45LDBMNC4yLDUuN3oiLz4KPC9zdmc+Cg==') center center no-repeat;
        }

    .radio input[type="checkbox"]:checked ~ span:after {
        transform: scale(0.8);
    }

.btn-color {
    width: 30px;
    height: 30px;
    margin: 0 auto 9px;
    border: solid 1px #ffffff;
    padding: 2px;
    /*border-radius: 50%;*/
    display: inline-block;
}

    .btn-color.active {
        border: solid 2px #FA4616;
    }

    .btn-color.white.active span {
        border: none;
    }

.color-icon {
    height: 22px;
    width: 22px;
    /*border-radius: 50%;*/
    display: block;
}

.added-filter {
    color: #333;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #F8F8F8;
    padding: 7px 25px 7px 9px;
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

    .added-filter:after {
        position: absolute;
        top: 7px;
        right: 9px;
        content: "";
        width: 8px;
        height: 8px;
        display: inline-block;
        background: transparent url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iSWNvbnMvIEVycm9yIj4KPHBhdGggaWQ9IkZpbGwiIGQ9Ik03LjMzMzI5IDEuNjE4ODhMNi4zODExIDAuNjY2Njg3TDMuOTk5OTYgMy4wNDc4M0wxLjYxODgxIDAuNjY2Njg3TDAuNjY2NjI2IDEuNjE4ODhMMy4wNDc3NyA0LjAwMDAyTDAuNjY2NjI2IDYuMzgxMTdMMS42MTg4MSA3LjMzMzM1TDMuOTk5OTYgNC45NTIyMUw2LjM4MTEgNy4zMzMzNUw3LjMzMzI5IDYuMzgxMTdMNC45NTIxNSA0LjAwMDAyTDcuMzMzMjkgMS42MTg4OFoiIGZpbGw9IiMzMzMzMzMiLz4KPC9nPgo8L3N2Zz4K') center center no-repeat;
    }

.btn-filter-mobile {
    font-size: 1rem;
    line-height: 22px;
    font-weight: 400;
    border-color: #9A9A9A;
    border-style: solid;
    border-width: 1px 0;
    padding: 8px 10px;
    color: #333;
    text-align: left;
}

    .btn-filter-mobile svg {
        transition: all 0.2s linear;
    }

    .btn-filter-mobile.open {
        border-bottom: none;
    }

        .btn-filter-mobile.open svg {
            transform: scaleX(-1) scaleY(-1);
        }

.select-sort-item {
    width: 100%;
    display: inline-block;
    position: relative;
    border-radius: 0;
    border: 1px solid #979797;
    height: 2.5rem;
    font-size: 1rem;
    color: #333;
    background: none;
    padding: 8px 24px 8px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMzAgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2NCAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT4zNUEzRjZBNC03QkUwLTQwOTUtODg4Qy00MjQ2NjQ4NEUzRkY8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGcgaWQ9IlN0eWxlLUd1aWRlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRWxlbWVudHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NTguMDAwMDAwLCAtMjk3My4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIj4KICAgICAgICAgICAgPGcgaWQ9Ikljb25zL0hhbWJ1cmdlci1NZW51LUNvcHktNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTU1LjAwMDAwMCwgMjk2NC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJGaWxsLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4LjAwMDAwMCwgMTguMDAwMDAwKSByb3RhdGUoLTkwLjAwMDAwMCkgdHJhbnNsYXRlKC0xOC4wMDAwMDAsIC0xOC4wMDAwMDApICIgcG9pbnRzPSIyMy4xNTQwMzMyIDMgOSAxNy45OTQ2OTg2IDEyLjc3OTI0NCAyMS45OTgzMzY1IDEyLjc5MDkyMDUgMjEuOTg2MDM3MiAyMy4xODczOTQ2IDMzIDI3IDI4Ljk2MDk0ODUgMTYuNjAzNTI1OSAxNy45NDY5ODU3IDI2LjkzMzI3NzIgNy4wMDM3MDg2NCI+PC9wb2x5Z29uPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 10px;
    background-color: #fff !important;
    background-position: calc(100% - 10px) 50%;
}

.close-filter {
    color: white;
    background-color: #FA4616;
    border-radius: 50%;
    display: inline-block;
    padding: 5px;
    line-height: 100%;
    height: 24px;
    width: 24px;
}

.heart {
    height: 20px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIiBjbGlwLXBhdGg9InVybCgjY2xpcDBfMV8xMDgzKSI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMCAxOUwyLjU1NDMxIDExLjIzMzNDMi4zMjk1OSAxMS4wMTEzIDAgOC42MjA5MyAwIDUuNzc2MDJDMCAyLjIxMjcgMi4wOTk4OCAwIDUuNDc4MTUgMEM3LjM0MzMyIDAgOS4wNDYxOSAxLjQxMDcgMTAgMi4zODUxMkMxMC45NTM4IDEuNDEwNyAxMi42NTQyIDAgMTQuNTE5NCAwQzE3LjkwMDEgMCAyMCAyLjIxMjcgMjAgNS43NzYwMkMyMCA4LjYyMDkzIDE3LjY3MDQgMTEuMDExMyAxNy40NDU3IDExLjIzMzNMMTAgMTlaTTUuNDc4MTUgMi4wODk5MkMyLjYwMTc1IDIuMDg5OTIgMS45OTc1IDQuMDkzNjMgMS45OTc1IDUuNzc2MDJDMS45OTc1IDcuNzg3NTcgMy45MTI2MSA5LjcwNTA3IDMuOTMyNTggOS43MjMzNkwzLjk1NTA2IDkuNzQ0MjZMMTAgMTYuMDUwNkwxNi4wNjc0IDkuNzIwNzVDMTYuMDg0OSA5LjcwMjQ2IDE4LjAwMjUgNy43ODc1NyAxOC4wMDI1IDUuNzc2MDJDMTguMDAyNSA0LjA5MzYzIDE3LjM5ODMgMi4wODk5MiAxNC41MTk0IDIuMDg5OTJDMTMuMDM4NyAyLjA4OTkyIDExLjMxMzQgMy44ODcyNSAxMC43NzQgNC41ODIxNUw5Ljk5NzUgNS41Nzc0OEw5LjIyMzQ3IDQuNTc5NTRDOC42ODQxNCAzLjg4NzI1IDYuOTU4OCAyLjA4OTkyIDUuNDc4MTUgMi4wODk5MloiIGZpbGw9IiM5MzkzOTMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xXzEwODMiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==') center center no-repeat;
}

    .heart.fill {
        background: transparent url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIiBjbGlwLXBhdGg9InVybCgjY2xpcDBfMV8xNDM1KSI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xMCAxOUwyLjU1NDMxIDExLjIzMzNDMi4zMjk1OSAxMS4wMTEzIDAgOC42MjA5MyAwIDUuNzc2MDJDMCAyLjIxMjcgMi4wOTk4OCAwIDUuNDc4MTUgMEM3LjM0MzMyIDAgOS4wNDYxOSAxLjQxMDcgMTAgMi4zODUxMkMxMC45NTM4IDEuNDEwNyAxMi42NTQyIDAgMTQuNTE5NCAwQzE3LjkwMDEgMCAyMCAyLjIxMjcgMjAgNS43NzYwMkMyMCA4LjYyMDkzIDE3LjY3MDQgMTEuMDExMyAxNy40NDU3IDExLjIzMzNMMTAgMTlaIiBmaWxsPSIjRUM0ODI2Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMV8xNDM1Ij4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE5IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=') center center no-repeat;
    }

.card {
}

.product-image {
    width: 200px;
    min-height: 200px;
    height: auto;
    align-self: center;
    margin-bottom: 22px;
}

.card-content {
    border: solid 1px #E7E7E7;
    border-top: none;
    padding: 9px 16px 19px;
}

.card-name {
    font-family: 'RocGroteskExtraBold';
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 7px;
    min-height: 40px;
}

.card-desc {
    /*color: #979797;*/
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    margin-bottom: 7px;
}

.card-new:before {
    content: "";
    height: 40px;
    width: 40px;
    display: inline-block;
    position: absolute;
    top: 25px;
    left: 11px;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGVsbGlwc2UgY3g9IjE5Ljg5NTgiIGN5PSIyMCIgcng9IjE5Ljg5NTgiIHJ5PSIyMCIgZmlsbD0iI0VDNDgyNiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMzY3NDcgMjVWMTcuMDJMMTIuNzk5IDI1SDEzLjYzNDdWMTUuMkgxMi42NTk4VjIzLjE4TDcuMjI4MiAxNS4ySDYuMzkyNThWMjVINy4zNjc0N1pNMjEuNzIxNyAyNVYyNC4wNzZIMTYuOTg2NFYyMC41MkgyMS4zMDM4VjE5LjU5NkgxNi45ODY0VjE2LjEyNEgyMS42NTJWMTUuMkgxNi4wMTE2VjI1SDIxLjcyMTdaTTI5LjM5MDggMTYuNDg4TDI2Ljg0MjIgMjVIMjUuNjcyM0wyMi44NDUxIDE1LjJIMjMuODc1N0wyNi4yODUxIDIzLjY3TDI4LjgxOTggMTUuMkgyOS45NjE4TDMyLjQ5NjYgMjMuNjdMMzQuOTA2IDE1LjJIMzUuOTM2NkwzMy4xMDk0IDI1SDMxLjkzOTVMMjkuMzkwOCAxNi40ODhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K') center center no-repeat;
}

.card .btn-color,
.card .btn-color-picker {
    width: 20px;
    height: 20px;
}

    .card .btn-color.white.active span {
        border: none;
    }

.card .color-icon {
    height: 12px;
    width: 12px;
}

@media (min-width: 1024px) {
    .card .btn-color,
    .card .btn-color-picker {
        width: 30px;
        height: 30px;
    }

    .card .color-icon {
        height: 22px;
        width: 22px;
    }

    .btn-color-picker svg {
        width: 22px;
        height: 22px;
    }
}

.card-cat-container {
    padding: 16px 16px 53px;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-cat {
    width: 320px;
    /*border:solid 1px #E7E7E7;*/
}

    .card-cat h3 {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 23px;
        line-height: 120%;
    }

    .card-cat p {
        margin-bottom: 16px;
        line-height: 120%;
    }

@media (min-width: 1024px) {
    .card-cat {
        width: 340px;
    }
}

.btn-primary {
    display: flex;
    /*height: 54px;*/
    padding: 12px 10px 13px 10px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /*border-radius: 25px;*/
    background: #FA4616;
    color: #FFF;
    text-align: center;
    /*font-family: 'RocGroteskExtraBold';*/
    font-size: 20px;
    /*font-style: normal;*/
    /*font-weight: 700;*/
    line-height: normal;
    /*text-transform: uppercase;*/
    transition: all 0.1s linear;
}

    .btn-primary.md {
        height: 47px;
        padding: 9px 15px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 78px;
        background: #FA4616;
        color: #FFF;
        text-align: center;
        font-family: 'RocGroteskExtraBold';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
    }

        .btn-primary:hover,
        .btn-primary.md:hover {
            background: #fff;
            color: #FA4616;
            border: solid 2px #FA4616;
        }

.accord-checkbox {
    display: none;
}

.accord-label {
    position: absolute;
    top: 20px;
    right: 0px;
}

    .accord-label svg {
        transition: all 0.2s linear;
    }

.accord-body {
    height: auto;
    overflow: hidden;
    padding-bottom: 28px;
}

.accord-checkbox:checked ~ .accord-body {
    height: 0;
    padding-bottom: 0px;
}

.accord-checkbox:checked ~ .accord-label svg {
    transform: scaleX(-1) scaleY(-1);
}

.loader-bg {
    background: rgba(0,0,0,0.5);
    opacity: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
}

    .loader-bg.show {
        z-index: 999;
        opacity: 1;
    }

.loader {
    width: 48px;
    height: 48px;
    display: block;
    margin: 15px auto;
    position: relative;
    color: #FFF;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader::after,
    .loader::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        width: 24px;
        height: 24px;
        top: 0;
        background-color: #FFF;
        border-radius: 50%;
        animation: scale50 2s infinite ease-in-out;
    }

    .loader::before {
        top: auto;
        bottom: 0;
        background-color: #FFF;
        animation-delay: 0.5s;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes scale50 {
    0%, 100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

.section-container {
    margin: auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1280px) {
    .section-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.relative {
    position: relative;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.row-span-2 {
    grid-row: span 2;
}

.m-auto {
    margin: auto;
}

.m-1 {
    margin: 1rem;
}

.mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-11 {
    margin-bottom: 2.75rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-20 {
    margin-bottom: 5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-\[8px\] {
    margin-bottom: 8px;
}

.mt-5 {
    margin-top: 1.25rem;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.w-\[30\%\] {
    width: 30%;
}

.w-\[70\%\] {
    width: 70%;
}

.w-full {
    width: 100%;
}

.min-w-\[120px\] {
    min-width: 120px;
}

.max-w-\[1440px\] {
    max-width: 1440px;
}

.max-w-\[1400px\] {
    max-width: 1400px;
}

.max-w-\[208px\] {
    max-width: 208px;
}

.max-w-\[288px\] {
    max-width: 288px;
}

.max-w-\[320px\] {
    max-width: 320px;
}

.max-w-\[360px\] {
    max-width: 360px;
}

.max-w-\[720px\] {
    max-width: 720px;
}

.max-w-\[850px\] {
    max-width: 850px;
}

.max-w-\[992px\] {
    max-width: 992px;
}

.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-start {
    scroll-snap-align: start;
}

.scroll-ml-6 {
    scroll-margin-left: 1.5rem;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-items-center {
    justify-items: center;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-x-1 {
    -moz-column-gap: 0.25rem;
    column-gap: 0.25rem;
}

.gap-x-5 {
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
}

.gap-x-\[13px\] {
    -moz-column-gap: 13px;
    column-gap: 13px;
}

.gap-x-\[2px\] {
    -moz-column-gap: 2px;
    column-gap: 2px;
}

.gap-y-5 {
    row-gap: 1.25rem;
}

.gap-y-8 {
    row-gap: 2rem;
}

.overflow-x-auto {
    overflow-x: auto;
}

.rounded-bl-\[500px\] {
    border-bottom-left-radius: 500px;
}

.rounded-br-\[500px\] {
    border-bottom-right-radius: 500px;
}

.rounded-tl-\[500px\] {
    border-top-left-radius: 500px;
}

.rounded-tr-\[500px\] {
    border-top-right-radius: 500px;
}

.border {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-3 {
    border-bottom-width: 3px;
}

.border-t {
    border-top-width: 1px;
}

.border-\[\#333333\] {
    --tw-border-opacity: 1;
    border-color: rgb(51 51 51 / var(--tw-border-opacity));
}

.border-\[\#969696\] {
    --tw-border-opacity: 1;
    border-color: rgb(150 150 150 / var(--tw-border-opacity));
}

.border-\[\#979797\] {
    --tw-border-opacity: 1;
    border-color: rgb(151 151 151 / var(--tw-border-opacity));
}

.border-primary {
    --tw-border-opacity: 1;
    border-color: rgb(250 70 22 / var(--tw-border-opacity));
}

.bg-\[\#000000\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-\[\#0000ff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 255 / var(--tw-bg-opacity));
}

.bg-\[\#0024C1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 36 193 / var(--tw-bg-opacity));
}

.bg-\[\#008000\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 128 0 / var(--tw-bg-opacity));
}

.bg-\[\#06D9D9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(6 217 217 / var(--tw-bg-opacity));
}

.bg-\[\#2F6641\] {
    --tw-bg-opacity: 1;
    background-color: rgb(47 102 65 / var(--tw-bg-opacity));
}

.bg-\[\#78866B\] {
    --tw-bg-opacity: 1;
    background-color: rgb(120 134 107 / var(--tw-bg-opacity));
}

.bg-\[\#808080\] {
    --tw-bg-opacity: 1;
    background-color: rgb(128 128 128 / var(--tw-bg-opacity));
}

.bg-\[\#8F15FA\] {
    --tw-bg-opacity: 1;
    background-color: rgb(143 21 250 / var(--tw-bg-opacity));
}

.bg-\[\#964301\] {
    --tw-bg-opacity: 1;
    background-color: rgb(150 67 1 / var(--tw-bg-opacity));
}

.bg-\[\#B6B6B6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(182 182 182 / var(--tw-bg-opacity));
}

.bg-\[\#C40700\] {
    --tw-bg-opacity: 1;
    background-color: rgb(196 7 0 / var(--tw-bg-opacity));
}

.bg-\[\#F1DDCF\] {
    --tw-bg-opacity: 1;
    background-color: rgb(241 221 207 / var(--tw-bg-opacity));
}

.bg-\[\#F5F6F7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(245 246 247 / var(--tw-bg-opacity));
}

.bg-\[\#F9E4B7\] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 228 183 / var(--tw-bg-opacity));
}

.bg-\[\#FF80DC\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 128 220 / var(--tw-bg-opacity));
}

.bg-\[\#FF8B22\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 139 34 / var(--tw-bg-opacity));
}

.bg-\[\#FFDF1F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 223 31 / var(--tw-bg-opacity));
}

.bg-\[\#ffa500\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 165 0 / var(--tw-bg-opacity));
}

.bg-\[\#ffc0cb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 192 203 / var(--tw-bg-opacity));
}

.bg-\[\#ffffff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

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

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

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(250 70 22 / var(--tw-bg-opacity));
}

.p-4 {
    padding: 1rem;
}

.p-8 {
    padding: 2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-3r {
    padding-left: 3rem;
    padding-right: 3rem;
}

.px-\[5px\] {
    padding-left: 5px;
    padding-right: 5px;
}

.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-\[170px\] {
    padding-top: 75px; /*170px;*/
    /*padding-bottom: 170px;*/
}

.py-\[7px\] {
    padding-top: 7px;
    padding-bottom: 7px;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-\[55px\] {
    padding-top: 55px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[14px\] {
    font-size: 14px;
}

.text-\[18px\] {
    font-size: 18px;
}

.text-\[24px\] {
    font-size: 24px;
}

.text-\[8px\] {
    font-size: 8px;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.leading-\[20px\] {
    line-height: 20px;
}

.leading-\[30px\] {
    line-height: 30px;
}

.tracking-\[4px\] {
    letter-spacing: 4px;
}

.text-\[\#333333\] {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity));
}

.text-\[\#979797\] {
    --tw-text-opacity: 1;
    color: rgb(151 151 151 / var(--tw-text-opacity));
}

.text-\[\#FA4616\] {
    --tw-text-opacity: 1;
    color: rgb(250 70 22 / var(--tw-text-opacity));
}

.text-primary {
    --tw-text-opacity: 1;
    color: rgb(250 70 22 / var(--tw-text-opacity));
}

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

.underline {
    text-decoration-line: underline;
}

.line-through {
    text-decoration-line: line-through;
}

.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);
}

@media (min-width: 1024px) {
    .lg\:section-container {
        margin: auto;
        max-width: 1280px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    @media (min-width: 1280px) {
        .lg\:section-container {
            padding-left: 0px;
            padding-right: 0px;
        }
    }
}

.last\:border-0:last-child {
    border-width: 0px;
}

.hover\:border:hover {
    border-width: 1px;
}

.hover\:border-primary:hover {
    --tw-border-opacity: 1;
    border-color: rgb(250 70 22 / var(--tw-border-opacity));
}

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

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

@media (min-width: 1024px) {
    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .lg\:mb-11 {
        margin-bottom: 2.75rem;
    }

    .lg\:mb-20 {
        margin-bottom: 5rem;
    }

    .lg\:mb-\[107px\] {
        margin-bottom: 107px;
    }

    .lg\:mb-\[66px\] {
        margin-bottom: 66px;
    }

    .lg\:mb-\[8px\] {
        margin-bottom: 8px;
    }

    .lg\:mt-0 {
        margin-top: 0px;
    }

    .lg\:block {
        display: block;
    }

    .lg\:grid {
        display: grid;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:max-w-\[220px\] {
        max-width: 220px;
    }

    .lg\:max-w-\[350px\] {
        max-width: 350px;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .lg\:grid-cols-7 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .lg\:justify-between {
        justify-content: space-between;
    }

    .lg\:gap-x-3 {
        -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
    }

    .lg\:gap-x-5 {
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

    .lg\:gap-y-\[70px\] {
        row-gap: 70px;
    }

    .lg\:border-0 {
        border-width: 0px;
    }

    .lg\:p-0 {
        padding: 0px;
    }

    .lg\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .lg\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .lg\:px-4r {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .lg\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .lg\:py-\[10px\] {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .lg\:py-\[18px\] {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .lg\:pb-20 {
        padding-bottom: 5rem;
    }

    .lg\:pt-9 {
        padding-top: 2.25rem;
    }

    .lg\:pt-12 {
        padding-top: 4rem;
    }

    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }

    .lg\:text-\[16px\] {
        font-size: 16px;
    }

    .lg\:text-\[36px\] {
        font-size: 36px;
    }

    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .lg\:tracking-\[20px\] {
        letter-spacing: 20px;
    }

    /* Default style for other browsers */
    .specialFix {
        margin-left: -3px;
    }

    /* Firefox-specific style */
    @supports (-moz-appearance:none) {
        .specialFix {
            margin-left: 12px;
        }
    }
}