/* /Components/Home/Home_About.razor.rz.scp.css */ .HorizontalScrolling[b-ml5dv24cn1] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-ml5dv24cn1], .fade-right[b-ml5dv24cn1], .fadein[b-ml5dv24cn1] { opacity: 0; } .fade-left._appear[b-ml5dv24cn1], .fade-right._appear[b-ml5dv24cn1], .fadein._appear[b-ml5dv24cn1] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-ml5dv24cn1], .fade-right._appear:nth-child(2n+1)[b-ml5dv24cn1], .fadein._appear:nth-child(2n+1)[b-ml5dv24cn1] { transition-delay: 40ms; } .fade-left[b-ml5dv24cn1] { transform: translateX(-100%); } .fade-right[b-ml5dv24cn1] { transform: translateX(100%); } .fadein[b-ml5dv24cn1] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-ml5dv24cn1 { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-ml5dv24cn1] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ml5dv24cn1 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-ml5dv24cn1] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-ml5dv24cn1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-ml5dv24cn1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-ml5dv24cn1] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-ml5dv24cn1], .DarkTheme h2[b-ml5dv24cn1], .DarkTheme h3[b-ml5dv24cn1], .DarkTheme h4[b-ml5dv24cn1], .DarkTheme h5[b-ml5dv24cn1], .DarkTheme h6[b-ml5dv24cn1] { color: #fff; } .DarkTheme .button[b-ml5dv24cn1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-ml5dv24cn1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-ml5dv24cn1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-ml5dv24cn1] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ml5dv24cn1 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-ml5dv24cn1], .DarkGradiantTheme h2[b-ml5dv24cn1], .DarkGradiantTheme h3[b-ml5dv24cn1], .DarkGradiantTheme h4[b-ml5dv24cn1], .DarkGradiantTheme h5[b-ml5dv24cn1], .DarkGradiantTheme h6[b-ml5dv24cn1] { color: #fff; } .DarkGradiantTheme .button[b-ml5dv24cn1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-ml5dv24cn1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-ml5dv24cn1] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-ml5dv24cn1], .ContrastTheme h2[b-ml5dv24cn1], .ContrastTheme h3[b-ml5dv24cn1], .ContrastTheme h4[b-ml5dv24cn1], .ContrastTheme h5[b-ml5dv24cn1], .ContrastTheme h6[b-ml5dv24cn1] { color: #fff; } .ContrastTheme .button[b-ml5dv24cn1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-ml5dv24cn1] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-ml5dv24cn1], .PurpleTheme h2[b-ml5dv24cn1], .PurpleTheme h3[b-ml5dv24cn1], .PurpleTheme h4[b-ml5dv24cn1], .PurpleTheme h5[b-ml5dv24cn1], .PurpleTheme h6[b-ml5dv24cn1] { color: #fff; } .PurpleTheme .button[b-ml5dv24cn1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-ml5dv24cn1] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-ml5dv24cn1], .TealTheme h2[b-ml5dv24cn1], .TealTheme h3[b-ml5dv24cn1], .TealTheme h4[b-ml5dv24cn1], .TealTheme h5[b-ml5dv24cn1], .TealTheme h6[b-ml5dv24cn1] { color: #fff; } .TealTheme .button[b-ml5dv24cn1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-ml5dv24cn1]::selection { background-color: var(--accentColor); } .TealTheme .button[b-ml5dv24cn1] { --buttonColor: #fff; } .TealTheme .button:hover[b-ml5dv24cn1] { color: var(--secondaryColor); } :root[b-ml5dv24cn1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-ml5dv24cn1] { --spacing: 100px; } } .about-content[b-ml5dv24cn1] { padding-top: 20px; } .about-content article[b-ml5dv24cn1] { display: grid; grid-template-columns: 1fr; gap: 25px 50px; align-items: center; } .about-content article p[b-ml5dv24cn1] { max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; padding: 0; margin-top: 0; margin-bottom: 0; } .about-video[b-ml5dv24cn1] { /*background-color: var(--accentColor);*/ padding: 0 !important; } .about-video video[b-ml5dv24cn1] { width: 100%; max-width: var(--maxWidth); max-height: 85vh; margin-bottom: 5px; object-fit: cover; } .about-video video[b-ml5dv24cn1]::-webkit-media-controls { display: none; } @media only screen and (min-width: 1100px) { .about-content article[b-ml5dv24cn1] { grid-template-columns: 1fr 1fr; } .about-content article p[b-ml5dv24cn1] { max-width: 100%; text-align: left; } } /* /Components/Home/Home_Hero.razor.rz.scp.css */ .HorizontalScrolling[b-6zkh1k6wll] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-6zkh1k6wll], .fade-right[b-6zkh1k6wll], .fadein[b-6zkh1k6wll] { opacity: 0; } .fade-left._appear[b-6zkh1k6wll], .fade-right._appear[b-6zkh1k6wll], .fadein._appear[b-6zkh1k6wll] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-6zkh1k6wll], .fade-right._appear:nth-child(2n+1)[b-6zkh1k6wll], .fadein._appear:nth-child(2n+1)[b-6zkh1k6wll] { transition-delay: 40ms; } .fade-left[b-6zkh1k6wll] { transform: translateX(-100%); } .fade-right[b-6zkh1k6wll] { transform: translateX(100%); } .fadein[b-6zkh1k6wll] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-6zkh1k6wll { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-6zkh1k6wll] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-6zkh1k6wll 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-6zkh1k6wll] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-6zkh1k6wll] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-6zkh1k6wll] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-6zkh1k6wll] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-6zkh1k6wll], .DarkTheme h2[b-6zkh1k6wll], .DarkTheme h3[b-6zkh1k6wll], .DarkTheme h4[b-6zkh1k6wll], .DarkTheme h5[b-6zkh1k6wll], .DarkTheme h6[b-6zkh1k6wll] { color: #fff; } .DarkTheme .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-6zkh1k6wll] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-6zkh1k6wll] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-6zkh1k6wll] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-6zkh1k6wll 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-6zkh1k6wll], .DarkGradiantTheme h2[b-6zkh1k6wll], .DarkGradiantTheme h3[b-6zkh1k6wll], .DarkGradiantTheme h4[b-6zkh1k6wll], .DarkGradiantTheme h5[b-6zkh1k6wll], .DarkGradiantTheme h6[b-6zkh1k6wll] { color: #fff; } .DarkGradiantTheme .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-6zkh1k6wll] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-6zkh1k6wll] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-6zkh1k6wll], .ContrastTheme h2[b-6zkh1k6wll], .ContrastTheme h3[b-6zkh1k6wll], .ContrastTheme h4[b-6zkh1k6wll], .ContrastTheme h5[b-6zkh1k6wll], .ContrastTheme h6[b-6zkh1k6wll] { color: #fff; } .ContrastTheme .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-6zkh1k6wll] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-6zkh1k6wll], .PurpleTheme h2[b-6zkh1k6wll], .PurpleTheme h3[b-6zkh1k6wll], .PurpleTheme h4[b-6zkh1k6wll], .PurpleTheme h5[b-6zkh1k6wll], .PurpleTheme h6[b-6zkh1k6wll] { color: #fff; } .PurpleTheme .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-6zkh1k6wll] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-6zkh1k6wll], .TealTheme h2[b-6zkh1k6wll], .TealTheme h3[b-6zkh1k6wll], .TealTheme h4[b-6zkh1k6wll], .TealTheme h5[b-6zkh1k6wll], .TealTheme h6[b-6zkh1k6wll] { color: #fff; } .TealTheme .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-6zkh1k6wll]::selection { background-color: var(--accentColor); } .TealTheme .button[b-6zkh1k6wll] { --buttonColor: #fff; } .TealTheme .button:hover[b-6zkh1k6wll] { color: var(--secondaryColor); } :root[b-6zkh1k6wll] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-6zkh1k6wll] { --spacing: 100px; } } /** { border: 1px solid red; } */ .hero[b-6zkh1k6wll] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-6zkh1k6wll 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; position: relative; --maxWidth: 500px; } .hero h1[b-6zkh1k6wll], .hero h2[b-6zkh1k6wll], .hero h3[b-6zkh1k6wll], .hero h4[b-6zkh1k6wll], .hero h5[b-6zkh1k6wll], .hero h6[b-6zkh1k6wll] { color: #fff; } .hero .button[b-6zkh1k6wll] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .hero h2[b-6zkh1k6wll] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero canvas#neuro[b-6zkh1k6wll] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.95; /*opacity: .6;*/ } .hero article[b-6zkh1k6wll] { flex-wrap: nowrap; z-index: 1; display: flex; flex-direction: column; text-align: center; } .hero article h1[b-6zkh1k6wll] { font-size: 3.6rem; font-size: clamp(12px, 10vw, 3.6rem); font-weight: 600; max-width: 100%; box-sizing: border-box; } .hero p[b-6zkh1k6wll] { color: var(--lightAccentColor); } /* /Components/Home/Home_Logo.razor.rz.scp.css */ .HorizontalScrolling[b-wirghd36y0] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-wirghd36y0], .fade-right[b-wirghd36y0], .fadein[b-wirghd36y0] { opacity: 0; } .fade-left._appear[b-wirghd36y0], .fade-right._appear[b-wirghd36y0], .fadein._appear[b-wirghd36y0] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-wirghd36y0], .fade-right._appear:nth-child(2n+1)[b-wirghd36y0], .fadein._appear:nth-child(2n+1)[b-wirghd36y0] { transition-delay: 40ms; } .fade-left[b-wirghd36y0] { transform: translateX(-100%); } .fade-right[b-wirghd36y0] { transform: translateX(100%); } .fadein[b-wirghd36y0] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-wirghd36y0 { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-wirghd36y0] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-wirghd36y0 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-wirghd36y0] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-wirghd36y0] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-wirghd36y0] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-wirghd36y0] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-wirghd36y0], .DarkTheme h2[b-wirghd36y0], .DarkTheme h3[b-wirghd36y0], .DarkTheme h4[b-wirghd36y0], .DarkTheme h5[b-wirghd36y0], .DarkTheme h6[b-wirghd36y0] { color: #fff; } .DarkTheme .button[b-wirghd36y0] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-wirghd36y0] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-wirghd36y0] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-wirghd36y0] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-wirghd36y0 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-wirghd36y0], .DarkGradiantTheme h2[b-wirghd36y0], .DarkGradiantTheme h3[b-wirghd36y0], .DarkGradiantTheme h4[b-wirghd36y0], .DarkGradiantTheme h5[b-wirghd36y0], .DarkGradiantTheme h6[b-wirghd36y0] { color: #fff; } .DarkGradiantTheme .button[b-wirghd36y0] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-wirghd36y0] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-wirghd36y0] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-wirghd36y0], .ContrastTheme h2[b-wirghd36y0], .ContrastTheme h3[b-wirghd36y0], .ContrastTheme h4[b-wirghd36y0], .ContrastTheme h5[b-wirghd36y0], .ContrastTheme h6[b-wirghd36y0] { color: #fff; } .ContrastTheme .button[b-wirghd36y0] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-wirghd36y0] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-wirghd36y0], .PurpleTheme h2[b-wirghd36y0], .PurpleTheme h3[b-wirghd36y0], .PurpleTheme h4[b-wirghd36y0], .PurpleTheme h5[b-wirghd36y0], .PurpleTheme h6[b-wirghd36y0] { color: #fff; } .PurpleTheme .button[b-wirghd36y0] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-wirghd36y0] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-wirghd36y0], .TealTheme h2[b-wirghd36y0], .TealTheme h3[b-wirghd36y0], .TealTheme h4[b-wirghd36y0], .TealTheme h5[b-wirghd36y0], .TealTheme h6[b-wirghd36y0] { color: #fff; } .TealTheme .button[b-wirghd36y0] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-wirghd36y0]::selection { background-color: var(--accentColor); } .TealTheme .button[b-wirghd36y0] { --buttonColor: #fff; } .TealTheme .button:hover[b-wirghd36y0] { color: var(--secondaryColor); } :root[b-wirghd36y0] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-wirghd36y0] { --spacing: 100px; } } section article[b-wirghd36y0] { display: flex; justify-content: center; align-items: center; } section img[b-wirghd36y0] { width: 40vh; max-width: 90vw; } /* /Components/Home/Home_Partners.razor.rz.scp.css */ .HorizontalScrolling[b-1nl2l89hgn] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-1nl2l89hgn], .fade-right[b-1nl2l89hgn], .fadein[b-1nl2l89hgn] { opacity: 0; } .fade-left._appear[b-1nl2l89hgn], .fade-right._appear[b-1nl2l89hgn], .fadein._appear[b-1nl2l89hgn] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-1nl2l89hgn], .fade-right._appear:nth-child(2n+1)[b-1nl2l89hgn], .fadein._appear:nth-child(2n+1)[b-1nl2l89hgn] { transition-delay: 40ms; } .fade-left[b-1nl2l89hgn] { transform: translateX(-100%); } .fade-right[b-1nl2l89hgn] { transform: translateX(100%); } .fadein[b-1nl2l89hgn] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-1nl2l89hgn { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-1nl2l89hgn] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1nl2l89hgn 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-1nl2l89hgn] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-1nl2l89hgn] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-1nl2l89hgn] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-1nl2l89hgn] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-1nl2l89hgn], .DarkTheme h2[b-1nl2l89hgn], .DarkTheme h3[b-1nl2l89hgn], .DarkTheme h4[b-1nl2l89hgn], .DarkTheme h5[b-1nl2l89hgn], .DarkTheme h6[b-1nl2l89hgn] { color: #fff; } .DarkTheme .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-1nl2l89hgn] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-1nl2l89hgn] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-1nl2l89hgn] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1nl2l89hgn 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-1nl2l89hgn], .DarkGradiantTheme h2[b-1nl2l89hgn], .DarkGradiantTheme h3[b-1nl2l89hgn], .DarkGradiantTheme h4[b-1nl2l89hgn], .DarkGradiantTheme h5[b-1nl2l89hgn], .DarkGradiantTheme h6[b-1nl2l89hgn] { color: #fff; } .DarkGradiantTheme .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-1nl2l89hgn] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-1nl2l89hgn] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-1nl2l89hgn], .ContrastTheme h2[b-1nl2l89hgn], .ContrastTheme h3[b-1nl2l89hgn], .ContrastTheme h4[b-1nl2l89hgn], .ContrastTheme h5[b-1nl2l89hgn], .ContrastTheme h6[b-1nl2l89hgn] { color: #fff; } .ContrastTheme .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-1nl2l89hgn] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-1nl2l89hgn], .PurpleTheme h2[b-1nl2l89hgn], .PurpleTheme h3[b-1nl2l89hgn], .PurpleTheme h4[b-1nl2l89hgn], .PurpleTheme h5[b-1nl2l89hgn], .PurpleTheme h6[b-1nl2l89hgn] { color: #fff; } .PurpleTheme .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-1nl2l89hgn] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-1nl2l89hgn], .TealTheme h2[b-1nl2l89hgn], .TealTheme h3[b-1nl2l89hgn], .TealTheme h4[b-1nl2l89hgn], .TealTheme h5[b-1nl2l89hgn], .TealTheme h6[b-1nl2l89hgn] { color: #fff; } .TealTheme .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-1nl2l89hgn]::selection { background-color: var(--accentColor); } .TealTheme .button[b-1nl2l89hgn] { --buttonColor: #fff; } .TealTheme .button:hover[b-1nl2l89hgn] { color: var(--secondaryColor); } :root[b-1nl2l89hgn] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-1nl2l89hgn] { --spacing: 100px; } } .partners[b-1nl2l89hgn] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1nl2l89hgn 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; color: #000; gap: 50px; /*--maxWidth:1000px;*/ } .partners h1[b-1nl2l89hgn], .partners h2[b-1nl2l89hgn], .partners h3[b-1nl2l89hgn], .partners h4[b-1nl2l89hgn], .partners h5[b-1nl2l89hgn], .partners h6[b-1nl2l89hgn] { color: #fff; } .partners .button[b-1nl2l89hgn] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .partners h2[b-1nl2l89hgn] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .partners h3[b-1nl2l89hgn] { color: #000; } .partners h2[b-1nl2l89hgn] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .partners-body[b-1nl2l89hgn] { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 50px 100px; } .partners .partner[b-1nl2l89hgn] { --partnerColor: var(--accentColor); --buttonColor: var(--partnerColor); display: flex; flex-direction: column; gap: 20px; width: 100%; align-items: center; text-align: center; justify-content: stretch; background-color: #fff; padding: 100px 20px 35px 20px; border-radius: var(--radius); /*border: 1px solid var(--partnerColor);*/ position: relative; overflow: hidden; } .partners .partner._amc[b-1nl2l89hgn] { --partnerColor: #2ca6cd; } .partners .partner._microsoft[b-1nl2l89hgn] { --partnerColor: #0078D4; } .partners .partner._cloudflare[b-1nl2l89hgn] { --partnerColor: #F48120; } .partners .partner[b-1nl2l89hgn]::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background-color: var(--partnerColor); } .partners .partner-icons[b-1nl2l89hgn] { display: flex; justify-content: center; gap: 10px; margin-top: 100px; width: 100%; } .partners .partner-icons img[b-1nl2l89hgn] { height: 30px; } .partners .partner > img[b-1nl2l89hgn] { height: 150px; } .partners .partner p[b-1nl2l89hgn], .partners .partner h3[b-1nl2l89hgn] { margin: 0; max-width: 500px; } .partners .partner a[b-1nl2l89hgn] { width: fit-content; margin-top: auto; border: 1px solid var(--partnerColor); color: var(--partnerColor); } .partners .partner a:hover[b-1nl2l89hgn] { background-color: var(--partnerColor); color: #fff; } .partners .partner._amc .partner-icons img[b-1nl2l89hgn] { height: 20px; } @media only screen and (min-width: 800px) { .partners .partner-icons[b-1nl2l89hgn] { gap: 20px; } .partners .partner-icons img[b-1nl2l89hgn] { height: 40px; } .partners .partner._amc .partner-icons img[b-1nl2l89hgn] { height: 30px; } } /* /Components/Home/Home_Platforms.razor.rz.scp.css */ .HorizontalScrolling[b-1j1gv1wozr] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-1j1gv1wozr], .fade-right[b-1j1gv1wozr], .fadein[b-1j1gv1wozr] { opacity: 0; } .fade-left._appear[b-1j1gv1wozr], .fade-right._appear[b-1j1gv1wozr], .fadein._appear[b-1j1gv1wozr] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-1j1gv1wozr], .fade-right._appear:nth-child(2n+1)[b-1j1gv1wozr], .fadein._appear:nth-child(2n+1)[b-1j1gv1wozr] { transition-delay: 40ms; } .fade-left[b-1j1gv1wozr] { transform: translateX(-100%); } .fade-right[b-1j1gv1wozr] { transform: translateX(100%); } .fadein[b-1j1gv1wozr] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-1j1gv1wozr { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-1j1gv1wozr] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1j1gv1wozr 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-1j1gv1wozr] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-1j1gv1wozr] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-1j1gv1wozr] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-1j1gv1wozr] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-1j1gv1wozr], .DarkTheme h2[b-1j1gv1wozr], .DarkTheme h3[b-1j1gv1wozr], .DarkTheme h4[b-1j1gv1wozr], .DarkTheme h5[b-1j1gv1wozr], .DarkTheme h6[b-1j1gv1wozr] { color: #fff; } .DarkTheme .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-1j1gv1wozr] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-1j1gv1wozr] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-1j1gv1wozr] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1j1gv1wozr 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-1j1gv1wozr], .DarkGradiantTheme h2[b-1j1gv1wozr], .DarkGradiantTheme h3[b-1j1gv1wozr], .DarkGradiantTheme h4[b-1j1gv1wozr], .DarkGradiantTheme h5[b-1j1gv1wozr], .DarkGradiantTheme h6[b-1j1gv1wozr] { color: #fff; } .DarkGradiantTheme .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-1j1gv1wozr] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-1j1gv1wozr] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-1j1gv1wozr], .ContrastTheme h2[b-1j1gv1wozr], .ContrastTheme h3[b-1j1gv1wozr], .ContrastTheme h4[b-1j1gv1wozr], .ContrastTheme h5[b-1j1gv1wozr], .ContrastTheme h6[b-1j1gv1wozr] { color: #fff; } .ContrastTheme .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-1j1gv1wozr] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-1j1gv1wozr], .PurpleTheme h2[b-1j1gv1wozr], .PurpleTheme h3[b-1j1gv1wozr], .PurpleTheme h4[b-1j1gv1wozr], .PurpleTheme h5[b-1j1gv1wozr], .PurpleTheme h6[b-1j1gv1wozr] { color: #fff; } .PurpleTheme .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-1j1gv1wozr] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-1j1gv1wozr], .TealTheme h2[b-1j1gv1wozr], .TealTheme h3[b-1j1gv1wozr], .TealTheme h4[b-1j1gv1wozr], .TealTheme h5[b-1j1gv1wozr], .TealTheme h6[b-1j1gv1wozr] { color: #fff; } .TealTheme .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-1j1gv1wozr]::selection { background-color: var(--accentColor); } .TealTheme .button[b-1j1gv1wozr] { --buttonColor: #fff; } .TealTheme .button:hover[b-1j1gv1wozr] { color: var(--secondaryColor); } :root[b-1j1gv1wozr] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-1j1gv1wozr] { --spacing: 100px; } } .platforms[b-1j1gv1wozr] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1j1gv1wozr 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; gap: 100px; } .platforms h1[b-1j1gv1wozr], .platforms h2[b-1j1gv1wozr], .platforms h3[b-1j1gv1wozr], .platforms h4[b-1j1gv1wozr], .platforms h5[b-1j1gv1wozr], .platforms h6[b-1j1gv1wozr] { color: #fff; } .platforms .button[b-1j1gv1wozr] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .platforms h2[b-1j1gv1wozr] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .platforms-header p[b-1j1gv1wozr] { text-align: center; opacity: 0.7; } .platforms article[b-1j1gv1wozr] { gap: var(--spacing); } .platforms-body[b-1j1gv1wozr] { display: grid; grid-template-columns: 1fr; } .platforms-body > div[b-1j1gv1wozr] { display: flex; align-items: center; border-radius: var(--radius); gap: 40px; flex-direction: column; } .platforms-body > div p[b-1j1gv1wozr] { position: relative; text-align: center; max-width: 600px; } .platforms-body > div p[b-1j1gv1wozr]::before { position: absolute; content: ''; background-color: var(--secondaryColor); border-radius: var(--radius); transform: translateX(-50%); top: -20px; left: 50%; right: 0; width: 30%; height: 3px; max-width: 100px; } .platforms-body > div img[b-1j1gv1wozr] { height: 80px; } .platforms-body[b-1j1gv1wozr] { display: grid; gap: 10px 40px; grid-template-columns: 1fr; } @media only screen and (min-width: 1100px) { .platforms-body[b-1j1gv1wozr] { grid-template-columns: 1fr 1fr; } .platforms-body > div[b-1j1gv1wozr] { flex-direction: row; } .platforms-body > div:last-child[b-1j1gv1wozr] { grid-column-start: 1; grid-column-end: -1; justify-self: center; max-width: 50%; } .platforms-body > div p[b-1j1gv1wozr] { text-align: left; } .platforms-body > div p[b-1j1gv1wozr]::before { top: 50%; left: -20px; right: 0; width: 3px; height: 40%; transform: translateY(-50%); max-width: 100%; } } /* /Components/Home/Home_Security.razor.rz.scp.css */ .HorizontalScrolling[b-b5o6j1fa5c] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-b5o6j1fa5c], .fade-right[b-b5o6j1fa5c], .fadein[b-b5o6j1fa5c] { opacity: 0; } .fade-left._appear[b-b5o6j1fa5c], .fade-right._appear[b-b5o6j1fa5c], .fadein._appear[b-b5o6j1fa5c] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-b5o6j1fa5c], .fade-right._appear:nth-child(2n+1)[b-b5o6j1fa5c], .fadein._appear:nth-child(2n+1)[b-b5o6j1fa5c] { transition-delay: 40ms; } .fade-left[b-b5o6j1fa5c] { transform: translateX(-100%); } .fade-right[b-b5o6j1fa5c] { transform: translateX(100%); } .fadein[b-b5o6j1fa5c] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-b5o6j1fa5c { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-b5o6j1fa5c] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-b5o6j1fa5c 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-b5o6j1fa5c] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-b5o6j1fa5c] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-b5o6j1fa5c] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-b5o6j1fa5c] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-b5o6j1fa5c], .DarkTheme h2[b-b5o6j1fa5c], .DarkTheme h3[b-b5o6j1fa5c], .DarkTheme h4[b-b5o6j1fa5c], .DarkTheme h5[b-b5o6j1fa5c], .DarkTheme h6[b-b5o6j1fa5c] { color: #fff; } .DarkTheme .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-b5o6j1fa5c] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-b5o6j1fa5c] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-b5o6j1fa5c] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-b5o6j1fa5c 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-b5o6j1fa5c], .DarkGradiantTheme h2[b-b5o6j1fa5c], .DarkGradiantTheme h3[b-b5o6j1fa5c], .DarkGradiantTheme h4[b-b5o6j1fa5c], .DarkGradiantTheme h5[b-b5o6j1fa5c], .DarkGradiantTheme h6[b-b5o6j1fa5c] { color: #fff; } .DarkGradiantTheme .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-b5o6j1fa5c] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-b5o6j1fa5c] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-b5o6j1fa5c], .ContrastTheme h2[b-b5o6j1fa5c], .ContrastTheme h3[b-b5o6j1fa5c], .ContrastTheme h4[b-b5o6j1fa5c], .ContrastTheme h5[b-b5o6j1fa5c], .ContrastTheme h6[b-b5o6j1fa5c] { color: #fff; } .ContrastTheme .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-b5o6j1fa5c] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-b5o6j1fa5c], .PurpleTheme h2[b-b5o6j1fa5c], .PurpleTheme h3[b-b5o6j1fa5c], .PurpleTheme h4[b-b5o6j1fa5c], .PurpleTheme h5[b-b5o6j1fa5c], .PurpleTheme h6[b-b5o6j1fa5c] { color: #fff; } .PurpleTheme .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-b5o6j1fa5c] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-b5o6j1fa5c], .TealTheme h2[b-b5o6j1fa5c], .TealTheme h3[b-b5o6j1fa5c], .TealTheme h4[b-b5o6j1fa5c], .TealTheme h5[b-b5o6j1fa5c], .TealTheme h6[b-b5o6j1fa5c] { color: #fff; } .TealTheme .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-b5o6j1fa5c]::selection { background-color: var(--accentColor); } .TealTheme .button[b-b5o6j1fa5c] { --buttonColor: #fff; } .TealTheme .button:hover[b-b5o6j1fa5c] { color: var(--secondaryColor); } :root[b-b5o6j1fa5c] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-b5o6j1fa5c] { --spacing: 100px; } } .security[b-b5o6j1fa5c] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-b5o6j1fa5c 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .security h1[b-b5o6j1fa5c], .security h2[b-b5o6j1fa5c], .security h3[b-b5o6j1fa5c], .security h4[b-b5o6j1fa5c], .security h5[b-b5o6j1fa5c], .security h6[b-b5o6j1fa5c] { color: #fff; } .security .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .security h2[b-b5o6j1fa5c] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .security article[b-b5o6j1fa5c] { display: flex; flex-direction: column; align-items: center; grid-template-columns: 1fr; gap: 50px; justify-content: center; width: 100%; text-align: center; } .security img[b-b5o6j1fa5c] { /*height: 300px;*/ max-height: 300px; } .security h2[b-b5o6j1fa5c] { font-size: 3rem; } .globalsecurity[b-b5o6j1fa5c] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-b5o6j1fa5c 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; text-align: center; } .globalsecurity h1[b-b5o6j1fa5c], .globalsecurity h2[b-b5o6j1fa5c], .globalsecurity h3[b-b5o6j1fa5c], .globalsecurity h4[b-b5o6j1fa5c], .globalsecurity h5[b-b5o6j1fa5c], .globalsecurity h6[b-b5o6j1fa5c] { color: #fff; } .globalsecurity .button[b-b5o6j1fa5c] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .globalsecurity h2[b-b5o6j1fa5c] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .globalsecurity article[b-b5o6j1fa5c] { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 50px; padding-top: 40px; padding-bottom: 40px; } .globalsecurity-artwork img[b-b5o6j1fa5c] { width: 250px; } .globalsecurity-info p[b-b5o6j1fa5c] { opacity: 0.7; text-align: center; } .globalsecurity-info p b[b-b5o6j1fa5c] { font-weight: 500; } .globalsecurity-cards[b-b5o6j1fa5c] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .globalsecurity-card[b-b5o6j1fa5c] { background-color: rgba(255, 255, 255, 0.1); padding: 5px 10px; font-size: 1.3rem; font-weight: 500; border-radius: 5px; display: flex; align-items: center; gap: 10px; } .globalsecurity-card span[b-b5o6j1fa5c] { font-weight: 200; font-size: 0.8em; } .securityfeatures article[b-b5o6j1fa5c] { display: flex; flex-direction: column; align-items: center; } .securityfeatures p[b-b5o6j1fa5c] { max-width: 950px; text-align: center; } .securityfeatures img[b-b5o6j1fa5c] { max-width: 1000px; height: auto; display: block; max-height: 85vh; overflow: hidden; background-size: contain; } @media only screen and (min-width: 800px) { .security article[b-b5o6j1fa5c] { flex-direction: row; } .security-info h2[b-b5o6j1fa5c] { text-align: left; } } @media only screen and (min-width: 1100px) { .globalsecurity[b-b5o6j1fa5c] { text-align: left; } .globalsecurity h2[b-b5o6j1fa5c] { text-align: left; } .globalsecurity article[b-b5o6j1fa5c] { flex-direction: row; gap: 50px; align-items: center; } .globalsecurity-artwork[b-b5o6j1fa5c] { width: 25%; } .globalsecurity-artwork img[b-b5o6j1fa5c] { width: 100%; } .globalsecurity-info[b-b5o6j1fa5c] { width: 75%; } .globalsecurity-info p[b-b5o6j1fa5c] { text-align: justify; } .globalsecurity-cards[b-b5o6j1fa5c] { justify-content: left; } } /* @media @break-medium { section { article { grid-template-columns: 2fr 1fr; text-align: left; justify-content: space-between; } } } @media @break-large { section { article { grid-template-columns: 3fr 2fr; } h2 { text-align: left; } } }*/ /* /Components/Home/Home_Subscriptiont.razor.rz.scp.css */ section[b-u9fre0wgmj] { background-color: #fff; padding-block: 100px; } section article[b-u9fre0wgmj] { background: url('/img/gradient.svg') no-repeat; background-size: cover; border-radius: var(--radius); overflow: hidden; width: 100%; min-height: 200px; padding: 40px; } section article > div[b-u9fre0wgmj] { max-width: 600px; width: 100%; display: flex; flex-direction: column; } section article h2[b-u9fre0wgmj], section article p[b-u9fre0wgmj] { color: #fff; } section article a[b-u9fre0wgmj] { width: fit-content; } /* /Components/Home/Home_Welcome.razor.rz.scp.css */ .HorizontalScrolling[b-dyzf789yiw] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-dyzf789yiw], .fade-right[b-dyzf789yiw], .fadein[b-dyzf789yiw] { opacity: 0; } .fade-left._appear[b-dyzf789yiw], .fade-right._appear[b-dyzf789yiw], .fadein._appear[b-dyzf789yiw] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-dyzf789yiw], .fade-right._appear:nth-child(2n+1)[b-dyzf789yiw], .fadein._appear:nth-child(2n+1)[b-dyzf789yiw] { transition-delay: 40ms; } .fade-left[b-dyzf789yiw] { transform: translateX(-100%); } .fade-right[b-dyzf789yiw] { transform: translateX(100%); } .fadein[b-dyzf789yiw] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-dyzf789yiw { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-dyzf789yiw] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-dyzf789yiw 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-dyzf789yiw] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-dyzf789yiw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-dyzf789yiw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-dyzf789yiw] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-dyzf789yiw], .DarkTheme h2[b-dyzf789yiw], .DarkTheme h3[b-dyzf789yiw], .DarkTheme h4[b-dyzf789yiw], .DarkTheme h5[b-dyzf789yiw], .DarkTheme h6[b-dyzf789yiw] { color: #fff; } .DarkTheme .button[b-dyzf789yiw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-dyzf789yiw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-dyzf789yiw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-dyzf789yiw] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-dyzf789yiw 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-dyzf789yiw], .DarkGradiantTheme h2[b-dyzf789yiw], .DarkGradiantTheme h3[b-dyzf789yiw], .DarkGradiantTheme h4[b-dyzf789yiw], .DarkGradiantTheme h5[b-dyzf789yiw], .DarkGradiantTheme h6[b-dyzf789yiw] { color: #fff; } .DarkGradiantTheme .button[b-dyzf789yiw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-dyzf789yiw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-dyzf789yiw] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-dyzf789yiw], .ContrastTheme h2[b-dyzf789yiw], .ContrastTheme h3[b-dyzf789yiw], .ContrastTheme h4[b-dyzf789yiw], .ContrastTheme h5[b-dyzf789yiw], .ContrastTheme h6[b-dyzf789yiw] { color: #fff; } .ContrastTheme .button[b-dyzf789yiw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-dyzf789yiw] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-dyzf789yiw], .PurpleTheme h2[b-dyzf789yiw], .PurpleTheme h3[b-dyzf789yiw], .PurpleTheme h4[b-dyzf789yiw], .PurpleTheme h5[b-dyzf789yiw], .PurpleTheme h6[b-dyzf789yiw] { color: #fff; } .PurpleTheme .button[b-dyzf789yiw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-dyzf789yiw] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-dyzf789yiw], .TealTheme h2[b-dyzf789yiw], .TealTheme h3[b-dyzf789yiw], .TealTheme h4[b-dyzf789yiw], .TealTheme h5[b-dyzf789yiw], .TealTheme h6[b-dyzf789yiw] { color: #fff; } .TealTheme .button[b-dyzf789yiw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-dyzf789yiw]::selection { background-color: var(--accentColor); } .TealTheme .button[b-dyzf789yiw] { --buttonColor: #fff; } .TealTheme .button:hover[b-dyzf789yiw] { color: var(--secondaryColor); } :root[b-dyzf789yiw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-dyzf789yiw] { --spacing: 100px; } } section[b-dyzf789yiw] { background-color: #372549; width: 100%; padding-block: 0; height: var(--headerHeight); } section article[b-dyzf789yiw] { overflow: visible; } section article div[b-dyzf789yiw] { position: relative; background-color: #372549; height: 110%; max-width: 500px; width: 100%; padding: 10px 20px; text-align: center; margin-inline: auto; top: -20px; border-radius: 5px; } section article div span[b-dyzf789yiw] { font-size: 1.5rem; color: #fff; text-transform: uppercase; text-align: center; top: 10px; position: relative; font-weight: bold; } /* /Components/Sales/Sales_Details.razor.rz.scp.css */ .HorizontalScrolling[b-zb23snl0n6] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-zb23snl0n6], .fade-right[b-zb23snl0n6], .fadein[b-zb23snl0n6] { opacity: 0; } .fade-left._appear[b-zb23snl0n6], .fade-right._appear[b-zb23snl0n6], .fadein._appear[b-zb23snl0n6] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-zb23snl0n6], .fade-right._appear:nth-child(2n+1)[b-zb23snl0n6], .fadein._appear:nth-child(2n+1)[b-zb23snl0n6] { transition-delay: 40ms; } .fade-left[b-zb23snl0n6] { transform: translateX(-100%); } .fade-right[b-zb23snl0n6] { transform: translateX(100%); } .fadein[b-zb23snl0n6] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-zb23snl0n6 { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-zb23snl0n6] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-zb23snl0n6 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-zb23snl0n6] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-zb23snl0n6] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-zb23snl0n6] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-zb23snl0n6] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-zb23snl0n6], .DarkTheme h2[b-zb23snl0n6], .DarkTheme h3[b-zb23snl0n6], .DarkTheme h4[b-zb23snl0n6], .DarkTheme h5[b-zb23snl0n6], .DarkTheme h6[b-zb23snl0n6] { color: #fff; } .DarkTheme .button[b-zb23snl0n6] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-zb23snl0n6] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-zb23snl0n6] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-zb23snl0n6] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-zb23snl0n6 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-zb23snl0n6], .DarkGradiantTheme h2[b-zb23snl0n6], .DarkGradiantTheme h3[b-zb23snl0n6], .DarkGradiantTheme h4[b-zb23snl0n6], .DarkGradiantTheme h5[b-zb23snl0n6], .DarkGradiantTheme h6[b-zb23snl0n6] { color: #fff; } .DarkGradiantTheme .button[b-zb23snl0n6] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-zb23snl0n6] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-zb23snl0n6] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-zb23snl0n6], .ContrastTheme h2[b-zb23snl0n6], .ContrastTheme h3[b-zb23snl0n6], .ContrastTheme h4[b-zb23snl0n6], .ContrastTheme h5[b-zb23snl0n6], .ContrastTheme h6[b-zb23snl0n6] { color: #fff; } .ContrastTheme .button[b-zb23snl0n6] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-zb23snl0n6] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-zb23snl0n6], .PurpleTheme h2[b-zb23snl0n6], .PurpleTheme h3[b-zb23snl0n6], .PurpleTheme h4[b-zb23snl0n6], .PurpleTheme h5[b-zb23snl0n6], .PurpleTheme h6[b-zb23snl0n6] { color: #fff; } .PurpleTheme .button[b-zb23snl0n6] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-zb23snl0n6] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-zb23snl0n6], .TealTheme h2[b-zb23snl0n6], .TealTheme h3[b-zb23snl0n6], .TealTheme h4[b-zb23snl0n6], .TealTheme h5[b-zb23snl0n6], .TealTheme h6[b-zb23snl0n6] { color: #fff; } .TealTheme .button[b-zb23snl0n6] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-zb23snl0n6]::selection { background-color: var(--accentColor); } .TealTheme .button[b-zb23snl0n6] { --buttonColor: #fff; } .TealTheme .button:hover[b-zb23snl0n6] { color: var(--secondaryColor); } :root[b-zb23snl0n6] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-zb23snl0n6] { --spacing: 100px; } } .domain article[b-zb23snl0n6] { display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; } .domain-title[b-zb23snl0n6] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; } .domain-title h2[b-zb23snl0n6] { font-weight: bold; font-size: 2rem; background-image: linear-gradient(to right, #2563eb, #0891b2); background-clip: text; color: transparent; margin: 0; } .domain-title p[b-zb23snl0n6] { font-size: 1.2rem; color: #475569; } .domain-info[b-zb23snl0n6] { gap: 20px; display: grid; grid-template-columns: 1fr; gap: 30px; align-items: flex-start; } .domain-info .info[b-zb23snl0n6] { display: flex; flex-direction: column; gap: 20px; } .domain-info .info .text[b-zb23snl0n6] { display: flex; flex-direction: column; gap: 10px; } .domain-info .info .text span[b-zb23snl0n6] { font-size: 2rem; color: #0f172a; font-weight: bold; } .domain-info .info .text[b-zb23snl0n6] p { font-size: 1rem; color: #475569; margin-block: 5px; } .domain-info .info .text ul[b-zb23snl0n6] { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; padding-left: 20px; } .domain-info .info .text ul li[b-zb23snl0n6] { display: grid; grid-template-columns: 20px auto; gap: 10px; align-items: center; justify-content: flex-start; font-size: 1rem; color: #475569; } .domain-info .info .text ul li[b-zb23snl0n6] svg { width: 20px; stroke: #00b095; } .domain-info .price[b-zb23snl0n6] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 40px; border: 1px solid #dbeafe; background-image: linear-gradient(to right, #2563eb, #0891b2); border-radius: var(--radius); } .domain-info .price > span[b-zb23snl0n6] { font-size: 3rem; font-weight: bold; color: #fff; } .domain-info .price p[b-zb23snl0n6] { font-size: 0.8rem; text-align: center; color: #fff; margin: 0; } .domain-info .price .btn[b-zb23snl0n6] { cursor: pointer; outline: none; background-color: #fff; border: 1px solid #fff; font-size: 1rem; border-radius: var(--radius); padding: 15px 20px; display: flex; align-items: center; justify-content: center; color: #0f172a; transition: all var(--duration); } .domain-info .price .btn:hover[b-zb23snl0n6] { background-color: transparent; color: #fff; } .domain-why[b-zb23snl0n6] { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-content: flex-start; width: 100%; border-top: 1px solid #d3d3d3; padding-top: 20px; } .domain-why > span[b-zb23snl0n6] { font-size: 2rem; color: #0f172a; font-weight: bold; } .domain-why .why[b-zb23snl0n6] { display: flex; align-items: stretch; justify-content: flex-start; gap: 20px; flex-wrap: wrap; width: 100%; } .domain-why .why .card[b-zb23snl0n6] { padding: 30px 40px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; text-align: center; margin-bottom: 10px; box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #e5e7eb; width: 300px; } .domain-why .why .card-icon[b-zb23snl0n6] { width: 40px; aspect-ratio: 1; border-radius: 50%; padding: 10px; display: flex; align-items: center; justify-content: center; background-color: #00b095; color: #fff; } .domain-why .why .card-icon[b-zb23snl0n6] svg { width: 100%; } .domain-why .why .card span[b-zb23snl0n6] { font-size: 1rem; color: #0f172a; font-weight: bold; margin-bottom: 10px; } .domain-why .why .card p[b-zb23snl0n6] { font-size: 0.9rem; color: #475569; margin: 0; } @media only screen and (min-width: 800px) { .domain article[b-zb23snl0n6] { gap: 50px; } .domain-title[b-zb23snl0n6] { margin-bottom: 50px; } .domain-title h2[b-zb23snl0n6] { font-size: 3rem; } .domain-info[b-zb23snl0n6] { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 1100px) { .domain-info[b-zb23snl0n6] { grid-template-columns: 2fr 1fr; } } /* /Components/Sales/Sales_Home.razor.rz.scp.css */ .HorizontalScrolling[b-1d10xi48tb] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-1d10xi48tb], .fade-right[b-1d10xi48tb], .fadein[b-1d10xi48tb] { opacity: 0; } .fade-left._appear[b-1d10xi48tb], .fade-right._appear[b-1d10xi48tb], .fadein._appear[b-1d10xi48tb] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-1d10xi48tb], .fade-right._appear:nth-child(2n+1)[b-1d10xi48tb], .fadein._appear:nth-child(2n+1)[b-1d10xi48tb] { transition-delay: 40ms; } .fade-left[b-1d10xi48tb] { transform: translateX(-100%); } .fade-right[b-1d10xi48tb] { transform: translateX(100%); } .fadein[b-1d10xi48tb] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-1d10xi48tb { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-1d10xi48tb] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1d10xi48tb 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-1d10xi48tb] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-1d10xi48tb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-1d10xi48tb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-1d10xi48tb] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-1d10xi48tb], .DarkTheme h2[b-1d10xi48tb], .DarkTheme h3[b-1d10xi48tb], .DarkTheme h4[b-1d10xi48tb], .DarkTheme h5[b-1d10xi48tb], .DarkTheme h6[b-1d10xi48tb] { color: #fff; } .DarkTheme .button[b-1d10xi48tb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-1d10xi48tb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-1d10xi48tb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-1d10xi48tb] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-1d10xi48tb 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-1d10xi48tb], .DarkGradiantTheme h2[b-1d10xi48tb], .DarkGradiantTheme h3[b-1d10xi48tb], .DarkGradiantTheme h4[b-1d10xi48tb], .DarkGradiantTheme h5[b-1d10xi48tb], .DarkGradiantTheme h6[b-1d10xi48tb] { color: #fff; } .DarkGradiantTheme .button[b-1d10xi48tb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-1d10xi48tb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-1d10xi48tb] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-1d10xi48tb], .ContrastTheme h2[b-1d10xi48tb], .ContrastTheme h3[b-1d10xi48tb], .ContrastTheme h4[b-1d10xi48tb], .ContrastTheme h5[b-1d10xi48tb], .ContrastTheme h6[b-1d10xi48tb] { color: #fff; } .ContrastTheme .button[b-1d10xi48tb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-1d10xi48tb] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-1d10xi48tb], .PurpleTheme h2[b-1d10xi48tb], .PurpleTheme h3[b-1d10xi48tb], .PurpleTheme h4[b-1d10xi48tb], .PurpleTheme h5[b-1d10xi48tb], .PurpleTheme h6[b-1d10xi48tb] { color: #fff; } .PurpleTheme .button[b-1d10xi48tb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-1d10xi48tb] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-1d10xi48tb], .TealTheme h2[b-1d10xi48tb], .TealTheme h3[b-1d10xi48tb], .TealTheme h4[b-1d10xi48tb], .TealTheme h5[b-1d10xi48tb], .TealTheme h6[b-1d10xi48tb] { color: #fff; } .TealTheme .button[b-1d10xi48tb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-1d10xi48tb]::selection { background-color: var(--accentColor); } .TealTheme .button[b-1d10xi48tb] { --buttonColor: #fff; } .TealTheme .button:hover[b-1d10xi48tb] { color: var(--secondaryColor); } :root[b-1d10xi48tb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-1d10xi48tb] { --spacing: 100px; } } .sales article[b-1d10xi48tb] { display: flex; flex-direction: column; gap: 50px; align-items: center; justify-content: center; } .sales-title[b-1d10xi48tb] { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; text-align: center; } .sales-title .tag[b-1d10xi48tb] { font-size: 0.8rem; padding: 20px; border-radius: var(--radius); text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; color: #1d4ed8; background: #dbeafe; } .sales-title .tag[b-1d10xi48tb] svg { width: 15px; } .sales-title h2[b-1d10xi48tb] { color: #0f172a; font-weight: bold; font-size: 3rem; } .sales-title h2 span[b-1d10xi48tb] { background-image: linear-gradient(to right, #2563eb, #0891b2); background-clip: text; color: transparent; } .sales-title p[b-1d10xi48tb] { font-size: 1.2rem; color: #475569; } .sales-list[b-1d10xi48tb] { display: flex; align-items: stretch; justify-content: center; gap: 30px; flex-wrap: wrap; } .sales-list .domain[b-1d10xi48tb] { max-width: 300px; width: 100%; border-radius: var(--radius); border: 1px solid #e5e7eb; padding: 20px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-content: flex-start; transition: all var(--duration); cursor: pointer; box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .sales-list .domain-icon[b-1d10xi48tb] { width: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); padding: 10px; background-image: linear-gradient(to bottom right, #3b82f6, #06b6d4); } .sales-list .domain-icon[b-1d10xi48tb] svg { width: 100%; } .sales-list .domain-icon[b-1d10xi48tb] svg .--svg-stroke { stroke: #fff; } .sales-list .domain-title[b-1d10xi48tb] { display: flex; flex-direction: column; gap: 10px; } .sales-list .domain-title span[b-1d10xi48tb] { font-weight: bold; font-size: 1.5rem; transition: all var(--duration); color: #0f172a; } .sales-list .domain-title p[b-1d10xi48tb] { font-size: 1rem; color: #475569; margin: 0; } .sales-list .domain-info[b-1d10xi48tb] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid #475569; margin-top: auto; } .sales-list .domain-info .price[b-1d10xi48tb] { font-size: 2rem; font-weight: bold; color: #0f172a; } .sales-list .domain-info .btn[b-1d10xi48tb] { padding: 10px; background-color: #0f172a; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: var(--radius); transition: all var(--duration); margin-left: auto; } .sales-list .domain-info .btn span[b-1d10xi48tb] { font-size: 0.8rem; color: #fff; text-transform: capitalize; } .sales-list .domain-info .btn[b-1d10xi48tb] svg { width: 15px; transition: all var(--duration); fill: #fff; } .sales-list .domain:hover[b-1d10xi48tb] { border-color: #2563eb; } .sales-list .domain:hover .domain-title span[b-1d10xi48tb] { color: #2563eb; } .sales-list .domain:hover .domain-info .btn[b-1d10xi48tb] { background-color: #2563eb; } .sales-list .domain:hover .domain-info .btn[b-1d10xi48tb] svg { transform: translateX(5px); } /* /Components/Shared/ArrowIcon.razor.rz.scp.css */ .HorizontalScrolling[b-mnqbnpalrv] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-mnqbnpalrv], .fade-right[b-mnqbnpalrv], .fadein[b-mnqbnpalrv] { opacity: 0; } .fade-left._appear[b-mnqbnpalrv], .fade-right._appear[b-mnqbnpalrv], .fadein._appear[b-mnqbnpalrv] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-mnqbnpalrv], .fade-right._appear:nth-child(2n+1)[b-mnqbnpalrv], .fadein._appear:nth-child(2n+1)[b-mnqbnpalrv] { transition-delay: 40ms; } .fade-left[b-mnqbnpalrv] { transform: translateX(-100%); } .fade-right[b-mnqbnpalrv] { transform: translateX(100%); } .fadein[b-mnqbnpalrv] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-mnqbnpalrv { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-mnqbnpalrv] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-mnqbnpalrv 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-mnqbnpalrv] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-mnqbnpalrv] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-mnqbnpalrv] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-mnqbnpalrv] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-mnqbnpalrv], .DarkTheme h2[b-mnqbnpalrv], .DarkTheme h3[b-mnqbnpalrv], .DarkTheme h4[b-mnqbnpalrv], .DarkTheme h5[b-mnqbnpalrv], .DarkTheme h6[b-mnqbnpalrv] { color: #fff; } .DarkTheme .button[b-mnqbnpalrv] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-mnqbnpalrv] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-mnqbnpalrv] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-mnqbnpalrv] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-mnqbnpalrv 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-mnqbnpalrv], .DarkGradiantTheme h2[b-mnqbnpalrv], .DarkGradiantTheme h3[b-mnqbnpalrv], .DarkGradiantTheme h4[b-mnqbnpalrv], .DarkGradiantTheme h5[b-mnqbnpalrv], .DarkGradiantTheme h6[b-mnqbnpalrv] { color: #fff; } .DarkGradiantTheme .button[b-mnqbnpalrv] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-mnqbnpalrv] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-mnqbnpalrv] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-mnqbnpalrv], .ContrastTheme h2[b-mnqbnpalrv], .ContrastTheme h3[b-mnqbnpalrv], .ContrastTheme h4[b-mnqbnpalrv], .ContrastTheme h5[b-mnqbnpalrv], .ContrastTheme h6[b-mnqbnpalrv] { color: #fff; } .ContrastTheme .button[b-mnqbnpalrv] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-mnqbnpalrv] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-mnqbnpalrv], .PurpleTheme h2[b-mnqbnpalrv], .PurpleTheme h3[b-mnqbnpalrv], .PurpleTheme h4[b-mnqbnpalrv], .PurpleTheme h5[b-mnqbnpalrv], .PurpleTheme h6[b-mnqbnpalrv] { color: #fff; } .PurpleTheme .button[b-mnqbnpalrv] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-mnqbnpalrv] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-mnqbnpalrv], .TealTheme h2[b-mnqbnpalrv], .TealTheme h3[b-mnqbnpalrv], .TealTheme h4[b-mnqbnpalrv], .TealTheme h5[b-mnqbnpalrv], .TealTheme h6[b-mnqbnpalrv] { color: #fff; } .TealTheme .button[b-mnqbnpalrv] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-mnqbnpalrv]::selection { background-color: var(--accentColor); } .TealTheme .button[b-mnqbnpalrv] { --buttonColor: #fff; } .TealTheme .button:hover[b-mnqbnpalrv] { color: var(--secondaryColor); } :root[b-mnqbnpalrv] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-mnqbnpalrv] { --spacing: 100px; } } section[b-mnqbnpalrv] { position: relative; padding: 10px 0; margin-top: var(--spacing); /* &:before { left: 0; transform: translatey(-50%) translatex(-100%); } &:after { right: 0; transform: translatey(-50%) translatex(100%); }*/ } section article[b-mnqbnpalrv] { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; padding: 5px 30px; width: fit-content; background-color: var(--accentColor); border-radius: var(--radius); } section[b-mnqbnpalrv]:before, section[b-mnqbnpalrv]:after { position: absolute; content: ""; top: 50%; height: 0.5px; background: var(--accentColor); width: 100vw; } section h2[b-mnqbnpalrv] { z-index: 1; width: 100%; position: relative; font-size: 1rem; text-transform: uppercase; color: #fff; } /* /Components/Shared/BorderedTitle.razor.rz.scp.css */ .HorizontalScrolling[b-pp6itrwgts] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-pp6itrwgts], .fade-right[b-pp6itrwgts], .fadein[b-pp6itrwgts] { opacity: 0; } .fade-left._appear[b-pp6itrwgts], .fade-right._appear[b-pp6itrwgts], .fadein._appear[b-pp6itrwgts] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-pp6itrwgts], .fade-right._appear:nth-child(2n+1)[b-pp6itrwgts], .fadein._appear:nth-child(2n+1)[b-pp6itrwgts] { transition-delay: 40ms; } .fade-left[b-pp6itrwgts] { transform: translateX(-100%); } .fade-right[b-pp6itrwgts] { transform: translateX(100%); } .fadein[b-pp6itrwgts] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-pp6itrwgts { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-pp6itrwgts] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-pp6itrwgts 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-pp6itrwgts] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-pp6itrwgts] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-pp6itrwgts] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-pp6itrwgts] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-pp6itrwgts], .DarkTheme h2[b-pp6itrwgts], .DarkTheme h3[b-pp6itrwgts], .DarkTheme h4[b-pp6itrwgts], .DarkTheme h5[b-pp6itrwgts], .DarkTheme h6[b-pp6itrwgts] { color: #fff; } .DarkTheme .button[b-pp6itrwgts] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-pp6itrwgts] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-pp6itrwgts] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-pp6itrwgts] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-pp6itrwgts 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-pp6itrwgts], .DarkGradiantTheme h2[b-pp6itrwgts], .DarkGradiantTheme h3[b-pp6itrwgts], .DarkGradiantTheme h4[b-pp6itrwgts], .DarkGradiantTheme h5[b-pp6itrwgts], .DarkGradiantTheme h6[b-pp6itrwgts] { color: #fff; } .DarkGradiantTheme .button[b-pp6itrwgts] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-pp6itrwgts] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-pp6itrwgts] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-pp6itrwgts], .ContrastTheme h2[b-pp6itrwgts], .ContrastTheme h3[b-pp6itrwgts], .ContrastTheme h4[b-pp6itrwgts], .ContrastTheme h5[b-pp6itrwgts], .ContrastTheme h6[b-pp6itrwgts] { color: #fff; } .ContrastTheme .button[b-pp6itrwgts] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-pp6itrwgts] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-pp6itrwgts], .PurpleTheme h2[b-pp6itrwgts], .PurpleTheme h3[b-pp6itrwgts], .PurpleTheme h4[b-pp6itrwgts], .PurpleTheme h5[b-pp6itrwgts], .PurpleTheme h6[b-pp6itrwgts] { color: #fff; } .PurpleTheme .button[b-pp6itrwgts] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-pp6itrwgts] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-pp6itrwgts], .TealTheme h2[b-pp6itrwgts], .TealTheme h3[b-pp6itrwgts], .TealTheme h4[b-pp6itrwgts], .TealTheme h5[b-pp6itrwgts], .TealTheme h6[b-pp6itrwgts] { color: #fff; } .TealTheme .button[b-pp6itrwgts] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-pp6itrwgts]::selection { background-color: var(--accentColor); } .TealTheme .button[b-pp6itrwgts] { --buttonColor: #fff; } .TealTheme .button:hover[b-pp6itrwgts] { color: var(--secondaryColor); } :root[b-pp6itrwgts] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-pp6itrwgts] { --spacing: 100px; } } section[b-pp6itrwgts] { position: relative; padding: 10px 0; margin-top: var(--spacing); /* &:before { left: 0; transform: translatey(-50%) translatex(-100%); } &:after { right: 0; transform: translatey(-50%) translatex(100%); }*/ } section article[b-pp6itrwgts] { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; padding: 5px 30px; width: fit-content; background-color: var(--accentColor); border-radius: var(--radius); } section[b-pp6itrwgts]:before, section[b-pp6itrwgts]:after { position: absolute; content: ""; top: 50%; height: 0.5px; background: var(--accentColor); width: 100vw; } section h2[b-pp6itrwgts] { z-index: 1; width: 100%; position: relative; font-size: 1rem; text-transform: uppercase; color: #fff; } /* /Components/Shared/CardComponent.razor.rz.scp.css */ .HorizontalScrolling[b-kue8xkhfv1] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-kue8xkhfv1], .fade-right[b-kue8xkhfv1], .fadein[b-kue8xkhfv1] { opacity: 0; } .fade-left._appear[b-kue8xkhfv1], .fade-right._appear[b-kue8xkhfv1], .fadein._appear[b-kue8xkhfv1] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-kue8xkhfv1], .fade-right._appear:nth-child(2n+1)[b-kue8xkhfv1], .fadein._appear:nth-child(2n+1)[b-kue8xkhfv1] { transition-delay: 40ms; } .fade-left[b-kue8xkhfv1] { transform: translateX(-100%); } .fade-right[b-kue8xkhfv1] { transform: translateX(100%); } .fadein[b-kue8xkhfv1] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-kue8xkhfv1 { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-kue8xkhfv1] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-kue8xkhfv1 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-kue8xkhfv1] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-kue8xkhfv1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-kue8xkhfv1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-kue8xkhfv1] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-kue8xkhfv1], .DarkTheme h2[b-kue8xkhfv1], .DarkTheme h3[b-kue8xkhfv1], .DarkTheme h4[b-kue8xkhfv1], .DarkTheme h5[b-kue8xkhfv1], .DarkTheme h6[b-kue8xkhfv1] { color: #fff; } .DarkTheme .button[b-kue8xkhfv1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-kue8xkhfv1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-kue8xkhfv1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-kue8xkhfv1] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-kue8xkhfv1 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-kue8xkhfv1], .DarkGradiantTheme h2[b-kue8xkhfv1], .DarkGradiantTheme h3[b-kue8xkhfv1], .DarkGradiantTheme h4[b-kue8xkhfv1], .DarkGradiantTheme h5[b-kue8xkhfv1], .DarkGradiantTheme h6[b-kue8xkhfv1] { color: #fff; } .DarkGradiantTheme .button[b-kue8xkhfv1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-kue8xkhfv1] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-kue8xkhfv1] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-kue8xkhfv1], .ContrastTheme h2[b-kue8xkhfv1], .ContrastTheme h3[b-kue8xkhfv1], .ContrastTheme h4[b-kue8xkhfv1], .ContrastTheme h5[b-kue8xkhfv1], .ContrastTheme h6[b-kue8xkhfv1] { color: #fff; } .ContrastTheme .button[b-kue8xkhfv1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-kue8xkhfv1] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-kue8xkhfv1], .PurpleTheme h2[b-kue8xkhfv1], .PurpleTheme h3[b-kue8xkhfv1], .PurpleTheme h4[b-kue8xkhfv1], .PurpleTheme h5[b-kue8xkhfv1], .PurpleTheme h6[b-kue8xkhfv1] { color: #fff; } .PurpleTheme .button[b-kue8xkhfv1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-kue8xkhfv1] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-kue8xkhfv1], .TealTheme h2[b-kue8xkhfv1], .TealTheme h3[b-kue8xkhfv1], .TealTheme h4[b-kue8xkhfv1], .TealTheme h5[b-kue8xkhfv1], .TealTheme h6[b-kue8xkhfv1] { color: #fff; } .TealTheme .button[b-kue8xkhfv1] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-kue8xkhfv1]::selection { background-color: var(--accentColor); } .TealTheme .button[b-kue8xkhfv1] { --buttonColor: #fff; } .TealTheme .button:hover[b-kue8xkhfv1] { color: var(--secondaryColor); } :root[b-kue8xkhfv1] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-kue8xkhfv1] { --spacing: 100px; } } @keyframes float-b-kue8xkhfv1 { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .card[b-kue8xkhfv1] { display: grid; grid-template-columns: 1fr; justify-content: space-between; align-items: center; gap: 20px 60px; } .card-artwork[b-kue8xkhfv1] { border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: linear-gradient(to right, #302342, #6a929e); position: relative; overflow: hidden; height: 30vh; min-height: 100%; } .card-artwork img[b-kue8xkhfv1] { width: 100%; max-width: 200px; position: absolute; animation: float-b-kue8xkhfv1 6s ease-in-out infinite; } .card-info[b-kue8xkhfv1] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 40px; padding-bottom: 40px; } .card-info > *[b-kue8xkhfv1] { margin: 0; padding: 0; } .card-tag[b-kue8xkhfv1] { width: fit-content; border-radius: 5px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #03715d; color: #fff; padding: 5px 20px; } .card:nth-child(even)[b-kue8xkhfv1] { direction: rtl; } .card:nth-child(even) > *[b-kue8xkhfv1] { direction: initial; } @media only screen and (min-width: 800px) { .card[b-kue8xkhfv1] { grid-template-columns: 4fr 3fr; } .card-info[b-kue8xkhfv1] { text-align: initial; align-items: initial; } } /* /Components/Shared/CardsComponent.razor.rz.scp.css */ .HorizontalScrolling[b-syoekp66fc] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-syoekp66fc], .fade-right[b-syoekp66fc], .fadein[b-syoekp66fc] { opacity: 0; } .fade-left._appear[b-syoekp66fc], .fade-right._appear[b-syoekp66fc], .fadein._appear[b-syoekp66fc] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-syoekp66fc], .fade-right._appear:nth-child(2n+1)[b-syoekp66fc], .fadein._appear:nth-child(2n+1)[b-syoekp66fc] { transition-delay: 40ms; } .fade-left[b-syoekp66fc] { transform: translateX(-100%); } .fade-right[b-syoekp66fc] { transform: translateX(100%); } .fadein[b-syoekp66fc] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-syoekp66fc { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-syoekp66fc] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-syoekp66fc 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-syoekp66fc] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-syoekp66fc] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-syoekp66fc] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-syoekp66fc] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-syoekp66fc], .DarkTheme h2[b-syoekp66fc], .DarkTheme h3[b-syoekp66fc], .DarkTheme h4[b-syoekp66fc], .DarkTheme h5[b-syoekp66fc], .DarkTheme h6[b-syoekp66fc] { color: #fff; } .DarkTheme .button[b-syoekp66fc] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-syoekp66fc] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-syoekp66fc] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-syoekp66fc] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-syoekp66fc 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-syoekp66fc], .DarkGradiantTheme h2[b-syoekp66fc], .DarkGradiantTheme h3[b-syoekp66fc], .DarkGradiantTheme h4[b-syoekp66fc], .DarkGradiantTheme h5[b-syoekp66fc], .DarkGradiantTheme h6[b-syoekp66fc] { color: #fff; } .DarkGradiantTheme .button[b-syoekp66fc] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-syoekp66fc] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-syoekp66fc] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-syoekp66fc], .ContrastTheme h2[b-syoekp66fc], .ContrastTheme h3[b-syoekp66fc], .ContrastTheme h4[b-syoekp66fc], .ContrastTheme h5[b-syoekp66fc], .ContrastTheme h6[b-syoekp66fc] { color: #fff; } .ContrastTheme .button[b-syoekp66fc] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-syoekp66fc] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-syoekp66fc], .PurpleTheme h2[b-syoekp66fc], .PurpleTheme h3[b-syoekp66fc], .PurpleTheme h4[b-syoekp66fc], .PurpleTheme h5[b-syoekp66fc], .PurpleTheme h6[b-syoekp66fc] { color: #fff; } .PurpleTheme .button[b-syoekp66fc] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-syoekp66fc] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-syoekp66fc], .TealTheme h2[b-syoekp66fc], .TealTheme h3[b-syoekp66fc], .TealTheme h4[b-syoekp66fc], .TealTheme h5[b-syoekp66fc], .TealTheme h6[b-syoekp66fc] { color: #fff; } .TealTheme .button[b-syoekp66fc] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-syoekp66fc]::selection { background-color: var(--accentColor); } .TealTheme .button[b-syoekp66fc] { --buttonColor: #fff; } .TealTheme .button:hover[b-syoekp66fc] { color: var(--secondaryColor); } :root[b-syoekp66fc] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-syoekp66fc] { --spacing: 100px; } } .cards h2[b-syoekp66fc] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cards article[b-syoekp66fc] { display: flex; flex-direction: column; gap: var(--spacing) 100px; } /* /Components/Shared/ScrollerComponent.razor.rz.scp.css */ .HorizontalScrolling[b-ue928piuez] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-ue928piuez], .fade-right[b-ue928piuez], .fadein[b-ue928piuez] { opacity: 0; } .fade-left._appear[b-ue928piuez], .fade-right._appear[b-ue928piuez], .fadein._appear[b-ue928piuez] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-ue928piuez], .fade-right._appear:nth-child(2n+1)[b-ue928piuez], .fadein._appear:nth-child(2n+1)[b-ue928piuez] { transition-delay: 40ms; } .fade-left[b-ue928piuez] { transform: translateX(-100%); } .fade-right[b-ue928piuez] { transform: translateX(100%); } .fadein[b-ue928piuez] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-ue928piuez { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-ue928piuez] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ue928piuez 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-ue928piuez] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-ue928piuez] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-ue928piuez] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-ue928piuez] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-ue928piuez], .DarkTheme h2[b-ue928piuez], .DarkTheme h3[b-ue928piuez], .DarkTheme h4[b-ue928piuez], .DarkTheme h5[b-ue928piuez], .DarkTheme h6[b-ue928piuez] { color: #fff; } .DarkTheme .button[b-ue928piuez] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-ue928piuez] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-ue928piuez] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-ue928piuez] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ue928piuez 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-ue928piuez], .DarkGradiantTheme h2[b-ue928piuez], .DarkGradiantTheme h3[b-ue928piuez], .DarkGradiantTheme h4[b-ue928piuez], .DarkGradiantTheme h5[b-ue928piuez], .DarkGradiantTheme h6[b-ue928piuez] { color: #fff; } .DarkGradiantTheme .button[b-ue928piuez] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-ue928piuez] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-ue928piuez] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-ue928piuez], .ContrastTheme h2[b-ue928piuez], .ContrastTheme h3[b-ue928piuez], .ContrastTheme h4[b-ue928piuez], .ContrastTheme h5[b-ue928piuez], .ContrastTheme h6[b-ue928piuez] { color: #fff; } .ContrastTheme .button[b-ue928piuez] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-ue928piuez] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-ue928piuez], .PurpleTheme h2[b-ue928piuez], .PurpleTheme h3[b-ue928piuez], .PurpleTheme h4[b-ue928piuez], .PurpleTheme h5[b-ue928piuez], .PurpleTheme h6[b-ue928piuez] { color: #fff; } .PurpleTheme .button[b-ue928piuez] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-ue928piuez] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-ue928piuez], .TealTheme h2[b-ue928piuez], .TealTheme h3[b-ue928piuez], .TealTheme h4[b-ue928piuez], .TealTheme h5[b-ue928piuez], .TealTheme h6[b-ue928piuez] { color: #fff; } .TealTheme .button[b-ue928piuez] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-ue928piuez]::selection { background-color: var(--accentColor); } .TealTheme .button[b-ue928piuez] { --buttonColor: #fff; } .TealTheme .button:hover[b-ue928piuez] { color: var(--secondaryColor); } :root[b-ue928piuez] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-ue928piuez] { --spacing: 100px; } } @keyframes scroll-b-ue928piuez { to { transform: translate(calc(-50% - 0.3rem)); } } .scroller[b-ue928piuez] { padding: 0; user-select: none; overflow: hidden; } .scroller article[b-ue928piuez] { margin-block: 50px; display: flex; flex-direction: column; gap: 100px; --maxWidth: 100%; } .scroller div[b-ue928piuez] { display: flex; gap: 40px; align-items: center; justify-content: center; width: max-content; flex-wrap: nowrap; animation: scroll-b-ue928piuez 600s var(--animation-direction, forwards) linear infinite; } .scroller div img[b-ue928piuez] { width: fit-content; height: 40px; object-fit: contain; } .scroller._amc div[b-ue928piuez] { gap: 30px; animation-duration: 800s; } .scroller._amc div img[b-ue928piuez] { height: 30px; } .scroller._security div[b-ue928piuez] { gap: 110px; animation-duration: 1000s; } .scroller._security div img[b-ue928piuez] { height: 45px; } /* /Components/Shared/StarIcon.razor.rz.scp.css */ .HorizontalScrolling[b-i1uyeotqbb] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-i1uyeotqbb], .fade-right[b-i1uyeotqbb], .fadein[b-i1uyeotqbb] { opacity: 0; } .fade-left._appear[b-i1uyeotqbb], .fade-right._appear[b-i1uyeotqbb], .fadein._appear[b-i1uyeotqbb] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-i1uyeotqbb], .fade-right._appear:nth-child(2n+1)[b-i1uyeotqbb], .fadein._appear:nth-child(2n+1)[b-i1uyeotqbb] { transition-delay: 40ms; } .fade-left[b-i1uyeotqbb] { transform: translateX(-100%); } .fade-right[b-i1uyeotqbb] { transform: translateX(100%); } .fadein[b-i1uyeotqbb] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-i1uyeotqbb { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-i1uyeotqbb] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-i1uyeotqbb 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-i1uyeotqbb] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-i1uyeotqbb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-i1uyeotqbb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-i1uyeotqbb] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-i1uyeotqbb], .DarkTheme h2[b-i1uyeotqbb], .DarkTheme h3[b-i1uyeotqbb], .DarkTheme h4[b-i1uyeotqbb], .DarkTheme h5[b-i1uyeotqbb], .DarkTheme h6[b-i1uyeotqbb] { color: #fff; } .DarkTheme .button[b-i1uyeotqbb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-i1uyeotqbb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-i1uyeotqbb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-i1uyeotqbb] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-i1uyeotqbb 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-i1uyeotqbb], .DarkGradiantTheme h2[b-i1uyeotqbb], .DarkGradiantTheme h3[b-i1uyeotqbb], .DarkGradiantTheme h4[b-i1uyeotqbb], .DarkGradiantTheme h5[b-i1uyeotqbb], .DarkGradiantTheme h6[b-i1uyeotqbb] { color: #fff; } .DarkGradiantTheme .button[b-i1uyeotqbb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-i1uyeotqbb] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-i1uyeotqbb] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-i1uyeotqbb], .ContrastTheme h2[b-i1uyeotqbb], .ContrastTheme h3[b-i1uyeotqbb], .ContrastTheme h4[b-i1uyeotqbb], .ContrastTheme h5[b-i1uyeotqbb], .ContrastTheme h6[b-i1uyeotqbb] { color: #fff; } .ContrastTheme .button[b-i1uyeotqbb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-i1uyeotqbb] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-i1uyeotqbb], .PurpleTheme h2[b-i1uyeotqbb], .PurpleTheme h3[b-i1uyeotqbb], .PurpleTheme h4[b-i1uyeotqbb], .PurpleTheme h5[b-i1uyeotqbb], .PurpleTheme h6[b-i1uyeotqbb] { color: #fff; } .PurpleTheme .button[b-i1uyeotqbb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-i1uyeotqbb] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-i1uyeotqbb], .TealTheme h2[b-i1uyeotqbb], .TealTheme h3[b-i1uyeotqbb], .TealTheme h4[b-i1uyeotqbb], .TealTheme h5[b-i1uyeotqbb], .TealTheme h6[b-i1uyeotqbb] { color: #fff; } .TealTheme .button[b-i1uyeotqbb] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-i1uyeotqbb]::selection { background-color: var(--accentColor); } .TealTheme .button[b-i1uyeotqbb] { --buttonColor: #fff; } .TealTheme .button:hover[b-i1uyeotqbb] { color: var(--secondaryColor); } :root[b-i1uyeotqbb] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-i1uyeotqbb] { --spacing: 100px; } } section[b-i1uyeotqbb] { position: relative; padding: 10px 0; margin-top: var(--spacing); /* &:before { left: 0; transform: translatey(-50%) translatex(-100%); } &:after { right: 0; transform: translatey(-50%) translatex(100%); }*/ } section article[b-i1uyeotqbb] { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; padding: 5px 30px; width: fit-content; background-color: var(--accentColor); border-radius: var(--radius); } section[b-i1uyeotqbb]:before, section[b-i1uyeotqbb]:after { position: absolute; content: ""; top: 50%; height: 0.5px; background: var(--accentColor); width: 100vw; } section h2[b-i1uyeotqbb] { z-index: 1; width: 100%; position: relative; font-size: 1rem; text-transform: uppercase; color: #fff; } /* /Components/Shared/YesIcon.razor.rz.scp.css */ .HorizontalScrolling[b-2emhjvdv82] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-2emhjvdv82], .fade-right[b-2emhjvdv82], .fadein[b-2emhjvdv82] { opacity: 0; } .fade-left._appear[b-2emhjvdv82], .fade-right._appear[b-2emhjvdv82], .fadein._appear[b-2emhjvdv82] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-2emhjvdv82], .fade-right._appear:nth-child(2n+1)[b-2emhjvdv82], .fadein._appear:nth-child(2n+1)[b-2emhjvdv82] { transition-delay: 40ms; } .fade-left[b-2emhjvdv82] { transform: translateX(-100%); } .fade-right[b-2emhjvdv82] { transform: translateX(100%); } .fadein[b-2emhjvdv82] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-2emhjvdv82 { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-2emhjvdv82] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-2emhjvdv82 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-2emhjvdv82] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-2emhjvdv82] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-2emhjvdv82] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-2emhjvdv82] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-2emhjvdv82], .DarkTheme h2[b-2emhjvdv82], .DarkTheme h3[b-2emhjvdv82], .DarkTheme h4[b-2emhjvdv82], .DarkTheme h5[b-2emhjvdv82], .DarkTheme h6[b-2emhjvdv82] { color: #fff; } .DarkTheme .button[b-2emhjvdv82] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-2emhjvdv82] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-2emhjvdv82] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-2emhjvdv82] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-2emhjvdv82 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-2emhjvdv82], .DarkGradiantTheme h2[b-2emhjvdv82], .DarkGradiantTheme h3[b-2emhjvdv82], .DarkGradiantTheme h4[b-2emhjvdv82], .DarkGradiantTheme h5[b-2emhjvdv82], .DarkGradiantTheme h6[b-2emhjvdv82] { color: #fff; } .DarkGradiantTheme .button[b-2emhjvdv82] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-2emhjvdv82] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-2emhjvdv82] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-2emhjvdv82], .ContrastTheme h2[b-2emhjvdv82], .ContrastTheme h3[b-2emhjvdv82], .ContrastTheme h4[b-2emhjvdv82], .ContrastTheme h5[b-2emhjvdv82], .ContrastTheme h6[b-2emhjvdv82] { color: #fff; } .ContrastTheme .button[b-2emhjvdv82] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-2emhjvdv82] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-2emhjvdv82], .PurpleTheme h2[b-2emhjvdv82], .PurpleTheme h3[b-2emhjvdv82], .PurpleTheme h4[b-2emhjvdv82], .PurpleTheme h5[b-2emhjvdv82], .PurpleTheme h6[b-2emhjvdv82] { color: #fff; } .PurpleTheme .button[b-2emhjvdv82] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-2emhjvdv82] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-2emhjvdv82], .TealTheme h2[b-2emhjvdv82], .TealTheme h3[b-2emhjvdv82], .TealTheme h4[b-2emhjvdv82], .TealTheme h5[b-2emhjvdv82], .TealTheme h6[b-2emhjvdv82] { color: #fff; } .TealTheme .button[b-2emhjvdv82] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-2emhjvdv82]::selection { background-color: var(--accentColor); } .TealTheme .button[b-2emhjvdv82] { --buttonColor: #fff; } .TealTheme .button:hover[b-2emhjvdv82] { color: var(--secondaryColor); } :root[b-2emhjvdv82] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-2emhjvdv82] { --spacing: 100px; } } section[b-2emhjvdv82] { position: relative; padding: 10px 0; margin-top: var(--spacing); /* &:before { left: 0; transform: translatey(-50%) translatex(-100%); } &:after { right: 0; transform: translatey(-50%) translatex(100%); }*/ } section article[b-2emhjvdv82] { display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; padding: 5px 30px; width: fit-content; background-color: var(--accentColor); border-radius: var(--radius); } section[b-2emhjvdv82]:before, section[b-2emhjvdv82]:after { position: absolute; content: ""; top: 50%; height: 0.5px; background: var(--accentColor); width: 100vw; } section h2[b-2emhjvdv82] { z-index: 1; width: 100%; position: relative; font-size: 1rem; text-transform: uppercase; color: #fff; } /* /Main/Layout/Footer.razor.rz.scp.css */ .HorizontalScrolling[b-9n40ct9p9e] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-9n40ct9p9e], .fade-right[b-9n40ct9p9e], .fadein[b-9n40ct9p9e] { opacity: 0; } .fade-left._appear[b-9n40ct9p9e], .fade-right._appear[b-9n40ct9p9e], .fadein._appear[b-9n40ct9p9e] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-9n40ct9p9e], .fade-right._appear:nth-child(2n+1)[b-9n40ct9p9e], .fadein._appear:nth-child(2n+1)[b-9n40ct9p9e] { transition-delay: 40ms; } .fade-left[b-9n40ct9p9e] { transform: translateX(-100%); } .fade-right[b-9n40ct9p9e] { transform: translateX(100%); } .fadein[b-9n40ct9p9e] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-9n40ct9p9e { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-9n40ct9p9e] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-9n40ct9p9e 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-9n40ct9p9e] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-9n40ct9p9e] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-9n40ct9p9e] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-9n40ct9p9e] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-9n40ct9p9e], .DarkTheme h2[b-9n40ct9p9e], .DarkTheme h3[b-9n40ct9p9e], .DarkTheme h4[b-9n40ct9p9e], .DarkTheme h5[b-9n40ct9p9e], .DarkTheme h6[b-9n40ct9p9e] { color: #fff; } .DarkTheme .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-9n40ct9p9e] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-9n40ct9p9e] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-9n40ct9p9e] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-9n40ct9p9e 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-9n40ct9p9e], .DarkGradiantTheme h2[b-9n40ct9p9e], .DarkGradiantTheme h3[b-9n40ct9p9e], .DarkGradiantTheme h4[b-9n40ct9p9e], .DarkGradiantTheme h5[b-9n40ct9p9e], .DarkGradiantTheme h6[b-9n40ct9p9e] { color: #fff; } .DarkGradiantTheme .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-9n40ct9p9e] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-9n40ct9p9e] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-9n40ct9p9e], .ContrastTheme h2[b-9n40ct9p9e], .ContrastTheme h3[b-9n40ct9p9e], .ContrastTheme h4[b-9n40ct9p9e], .ContrastTheme h5[b-9n40ct9p9e], .ContrastTheme h6[b-9n40ct9p9e] { color: #fff; } .ContrastTheme .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-9n40ct9p9e] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-9n40ct9p9e], .PurpleTheme h2[b-9n40ct9p9e], .PurpleTheme h3[b-9n40ct9p9e], .PurpleTheme h4[b-9n40ct9p9e], .PurpleTheme h5[b-9n40ct9p9e], .PurpleTheme h6[b-9n40ct9p9e] { color: #fff; } .PurpleTheme .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-9n40ct9p9e] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-9n40ct9p9e], .TealTheme h2[b-9n40ct9p9e], .TealTheme h3[b-9n40ct9p9e], .TealTheme h4[b-9n40ct9p9e], .TealTheme h5[b-9n40ct9p9e], .TealTheme h6[b-9n40ct9p9e] { color: #fff; } .TealTheme .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-9n40ct9p9e]::selection { background-color: var(--accentColor); } .TealTheme .button[b-9n40ct9p9e] { --buttonColor: #fff; } .TealTheme .button:hover[b-9n40ct9p9e] { color: var(--secondaryColor); } :root[b-9n40ct9p9e] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-9n40ct9p9e] { --spacing: 100px; } } .footer[b-9n40ct9p9e] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-9n40ct9p9e 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; text-align: center; height: 200px; padding-top: 20px; padding-bottom: 20px; } .footer h1[b-9n40ct9p9e], .footer h2[b-9n40ct9p9e], .footer h3[b-9n40ct9p9e], .footer h4[b-9n40ct9p9e], .footer h5[b-9n40ct9p9e], .footer h6[b-9n40ct9p9e] { color: #fff; } .footer .button[b-9n40ct9p9e] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .footer h2[b-9n40ct9p9e] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .footer article[b-9n40ct9p9e] { display: flex; flex-direction: column; } .footer h3[b-9n40ct9p9e] { color: var(--secondaryColor); } .footer p[b-9n40ct9p9e] { margin: 0; padding: 0; } .footer a[b-9n40ct9p9e] { color: #fff; font-size: 1rem; padding: 10px; } .footer a:hover[b-9n40ct9p9e] { text-decoration: underline; } .credit[b-9n40ct9p9e] { padding-top: 0; padding-bottom: 0; text-align: center; } .credit p[b-9n40ct9p9e] { color: #000; font-size: 0.8rem; } /* /Main/Layout/Header.razor.rz.scp.css */ .HorizontalScrolling[b-ra7x9iwrxw] { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .fade-left[b-ra7x9iwrxw], .fade-right[b-ra7x9iwrxw], .fadein[b-ra7x9iwrxw] { opacity: 0; } .fade-left._appear[b-ra7x9iwrxw], .fade-right._appear[b-ra7x9iwrxw], .fadein._appear[b-ra7x9iwrxw] { transform: none; opacity: 1; transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .fade-left._appear:nth-child(2n+1)[b-ra7x9iwrxw], .fade-right._appear:nth-child(2n+1)[b-ra7x9iwrxw], .fadein._appear:nth-child(2n+1)[b-ra7x9iwrxw] { transition-delay: 40ms; } .fade-left[b-ra7x9iwrxw] { transform: translateX(-100%); } .fade-right[b-ra7x9iwrxw] { transform: translateX(100%); } .fadein[b-ra7x9iwrxw] { transform: translateY(50px); } @keyframes hero-gradient-animation-b-ra7x9iwrxw { 0% { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --s-start-0: 17%; --s-end-0: 63%; --s-start-1: 7%; --s-end-1: 74%; --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --s-start-2: 8%; --s-end-2: 63%; --s-start-3: 8%; --s-end-3: 88%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --s-start-4: 10%; --s-end-4: 68%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; } 100% { --y-0: 83%; --x-0: 97%; --c-0: hsl(270, 45%, 27%); --s-start-0: 5%; --s-end-0: 57%; --s-start-1: 15%; --s-end-1: 88%; --x-1: 52%; --y-1: 84%; --c-1: hsl(256.58868576, 96%, 11%); --x-2: 80%; --c-2: hsl(268.88888889, 43%, 24%); --y-2: 5%; --s-start-2: 5%; --s-end-2: 84%; --s-start-3: 10%; --s-end-3: 72%; --x-3: 5%; --c-3: hsl(270, 32%, 21%); --y-3: 23%; --y-4: 32%; --s-start-4: 16%; --s-end-4: 60%; --c-4: hsl(271.32352941, 53%, 25%); --x-4: 79%; } } @property --y-0 { syntax: ''; inherits: false; initial-value: 84%; } @property --x-0 { syntax: ''; inherits: false; initial-value: 90%; } @property --c-0 { syntax: ''; inherits: false; initial-value: hsl(276, 34%, 14%); } @property --s-start-0 { syntax: ''; inherits: false; initial-value: 17%; } @property --s-end-0 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-1 { syntax: ''; inherits: false; initial-value: 7%; } @property --s-end-1 { syntax: ''; inherits: false; initial-value: 74%; } @property --x-1 { syntax: ''; inherits: false; initial-value: 55%; } @property --y-1 { syntax: ''; inherits: false; initial-value: 93%; } @property --c-1 { syntax: ''; inherits: false; initial-value: hsl(271.42857143, 34%, 11%); } @property --x-2 { syntax: ''; inherits: false; initial-value: 47%; } @property --c-2 { syntax: ''; inherits: false; initial-value: hsl(266.02941176, 47%, 13%); } @property --y-2 { syntax: ''; inherits: false; initial-value: 92%; } @property --s-start-2 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-2 { syntax: ''; inherits: false; initial-value: 63%; } @property --s-start-3 { syntax: ''; inherits: false; initial-value: 8%; } @property --s-end-3 { syntax: ''; inherits: false; initial-value: 88%; } @property --x-3 { syntax: ''; inherits: false; initial-value: 57%; } @property --c-3 { syntax: ''; inherits: false; initial-value: hsl(263.38235294, 76%, 24%); } @property --y-3 { syntax: ''; inherits: false; initial-value: 0%; } @property --y-4 { syntax: ''; inherits: false; initial-value: 54%; } @property --s-start-4 { syntax: ''; inherits: false; initial-value: 10%; } @property --s-end-4 { syntax: ''; inherits: false; initial-value: 68%; } @property --c-4 { syntax: ''; inherits: false; initial-value: hsl(270, 81%, 26%); } @property --x-4 { syntax: ''; inherits: false; initial-value: 1%; } .AnimatedBackground[b-ra7x9iwrxw] { --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ra7x9iwrxw 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } :root[b-ra7x9iwrxw] { --maxWidth: 1200px; --duration: 0.4s ease-in-out; --headerHeight: 70px; --radius: 10px; --spacing: 40px; } .LightTheme[b-ra7x9iwrxw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .GradientText[b-ra7x9iwrxw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DarkTheme[b-ra7x9iwrxw] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); } .DarkTheme h1[b-ra7x9iwrxw], .DarkTheme h2[b-ra7x9iwrxw], .DarkTheme h3[b-ra7x9iwrxw], .DarkTheme h4[b-ra7x9iwrxw], .DarkTheme h5[b-ra7x9iwrxw], .DarkTheme h6[b-ra7x9iwrxw] { color: #fff; } .DarkTheme .button[b-ra7x9iwrxw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkTheme h2[b-ra7x9iwrxw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .DefaultTheme[b-ra7x9iwrxw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } .DarkGradiantTheme[b-ra7x9iwrxw] { --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); color: #fff; --backgroundColor: var(--darkColor); --textColor: rgba(255, 255, 255, 0.8); --y-0: 84%; --x-0: 90%; --c-0: hsl(276, 34%, 14%); --x-1: 55%; --y-1: 93%; --c-1: hsl(271.42857143, 34%, 11%); --x-2: 47%; --c-2: hsl(266.02941176, 47%, 13%); --y-2: 92%; --x-3: 57%; --c-3: hsl(263.38235294, 76%, 24%); --y-3: 0%; --y-4: 54%; --c-4: hsl(270, 81%, 26%); --x-4: 1%; background-attachment: fixed; background-color: hsl(270, 32%, 21%); background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)); animation: hero-gradient-animation-b-ra7x9iwrxw 5s linear infinite alternate; background-blend-mode: normal, normal, normal, normal, normal; } .DarkGradiantTheme h1[b-ra7x9iwrxw], .DarkGradiantTheme h2[b-ra7x9iwrxw], .DarkGradiantTheme h3[b-ra7x9iwrxw], .DarkGradiantTheme h4[b-ra7x9iwrxw], .DarkGradiantTheme h5[b-ra7x9iwrxw], .DarkGradiantTheme h6[b-ra7x9iwrxw] { color: #fff; } .DarkGradiantTheme .button[b-ra7x9iwrxw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .DarkGradiantTheme h2[b-ra7x9iwrxw] { background: var(--textGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ContrastTheme[b-ra7x9iwrxw] { --backgroundColor: var(--darkColor); color: #fff; --textGradientColor: -webkit-linear-gradient(#00b095, #abffef); } .ContrastTheme h1[b-ra7x9iwrxw], .ContrastTheme h2[b-ra7x9iwrxw], .ContrastTheme h3[b-ra7x9iwrxw], .ContrastTheme h4[b-ra7x9iwrxw], .ContrastTheme h5[b-ra7x9iwrxw], .ContrastTheme h6[b-ra7x9iwrxw] { color: #fff; } .ContrastTheme .button[b-ra7x9iwrxw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .PurpleTheme[b-ra7x9iwrxw] { --backgroundColor: var(--accentColor); color: #fff; } .PurpleTheme h1[b-ra7x9iwrxw], .PurpleTheme h2[b-ra7x9iwrxw], .PurpleTheme h3[b-ra7x9iwrxw], .PurpleTheme h4[b-ra7x9iwrxw], .PurpleTheme h5[b-ra7x9iwrxw], .PurpleTheme h6[b-ra7x9iwrxw] { color: #fff; } .PurpleTheme .button[b-ra7x9iwrxw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme[b-ra7x9iwrxw] { --backgroundColor: var(--secondaryColor); color: #fff; } .TealTheme h1[b-ra7x9iwrxw], .TealTheme h2[b-ra7x9iwrxw], .TealTheme h3[b-ra7x9iwrxw], .TealTheme h4[b-ra7x9iwrxw], .TealTheme h5[b-ra7x9iwrxw], .TealTheme h6[b-ra7x9iwrxw] { color: #fff; } .TealTheme .button[b-ra7x9iwrxw] { --buttonColor: linear-gradient(to right, var(--secondaryColor), var(--lightSecondaryColor)); } .TealTheme [b-ra7x9iwrxw]::selection { background-color: var(--accentColor); } .TealTheme .button[b-ra7x9iwrxw] { --buttonColor: #fff; } .TealTheme .button:hover[b-ra7x9iwrxw] { color: var(--secondaryColor); } :root[b-ra7x9iwrxw] { --accentColor: #372549; --lightAccentColor: #ccbade; --darkColor: #1f1429; --secondaryColor: #00b095; --lightSecondaryColor: #99fff5; --backgroundColor: #f2f2f2; --textColor: rgba(0, 0, 0, 0.9); --buttonColor: var(--accentColor); --gradientColor: linear-gradient(45deg, var(--accentColor), var(--lightAccentColor)); --fontSize: 1.1rem; --darkGradiant: linear-gradient(to right, #1d1528 87%, #6a929e); --textGradientColor: linear-gradient(to right, #2a1d38, #b994ff); } @media only screen and (min-width: 800px) { :root[b-ra7x9iwrxw] { --spacing: 100px; } } header[b-ra7x9iwrxw] { background-color: var(--backgroundColor); height: var(--headerHeight); margin: 0; z-index: 99999; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; padding-left: 20px; padding-right: 20px; } header article[b-ra7x9iwrxw] { display: flex; flex-direction: row; justify-content: center; max-width: var(--maxWidth); width: 100%; } header span[b-ra7x9iwrxw] { display: inline; all: unset; cursor: pointer; display: flex; align-items: center; } header[b-ra7x9iwrxw] svg { width: 100%; max-width: 250px; } header[b-ra7x9iwrxw] svg .fill._primary { fill: var(--accentColor); } header[b-ra7x9iwrxw] svg .fill._secondary { fill: var(--secondaryColor); } header[b-ra7x9iwrxw] .button { display: none; } @media only screen and (min-width: 800px) { header article[b-ra7x9iwrxw] { justify-content: space-between; } header[b-ra7x9iwrxw] .button { display: block; min-width: 150px; padding: 5px 10px; font-size: 1rem; } }