@charset "UTF-8"; /*--------------------------------------- Theme Name: NextAI - SAAS, AI & Tech Startup HTML Template Theme URI: https://pixellyo.com/nextai Description: NextAi is a powerful SaaS, AI template designed for innovative businesses Author Name: bplugins Author URI: https://themeforest.net/user/bplugins Version: 1.0 ----------------------------------------- Table of contents ----------------------------------------- 1. Global Style 1.1 Functions 1.2 Variables 1.3 Media Query 1.4 Normalize 1.5 Typography 2. Components Style 2.1 About Card 1 2.2 Accordion 2.3 Alert 2.4 Border Animation 2.5 Avatar 2.6 Badge 2.7 Banner 1 2.8 Blend Background 2.9 Brand 2 2.10 Breadcrumb Modifier 2.11 btn Style 2.12 Card Style 2.13 Case Study Card 2.14 Radius Circle 2.15 Code Snippet 2.16 Dropdown 2.17 Feature Card 1 2.18 Border Style 2.19 Folder Card Style 2.20 Form Check 2.21 Form Control 2.22 Form Select 2.23 Gradient Border 2.24 Group Selector 2.25 Horizontal Grid 2.26 Line Clamp 2.27 List 2.28 Logo 2.29 Modal 2.30 Navigation 2.31 Navigation 2 2.32 Offcanvas 2.33 Orbit 2.34 Pagination 2.35 Portfolio Card 2.36 Post Image Size 2.37 Preloader 2.38 Price Card 1 2.39 Price Card 2 2.40 Price Card 3 2.41 Price Card 4 2.42 Progress Bar 2.43 Pulser Animation 2.44 Scroller X 2.45 Scroller Y 2.46 Switcher 2.47 Tab 1 2.48 Tab 2 2.49 Tab 3 2.50 Tab 4 2.51 Tab 5 2.52 Tab Underline 2.53 Tab 2.54 Table 2.55 Team Member 1 2.56 Team Member 2 2.57 Testimonial 1 2.58 Testimonial 2 2.59 Testimonial 3 2.60 Testimonial 4 2.61 Text Clip 2.62 Text Splash 2.63 Text Stroke 2.64 Text Wing 2.65 Timeline 1 2.66 Timeline 2 2.67 Tooltip 2.68 Uner Counter Box 2.69 Video Player 3. Layout Style 3.1 About Section 1 3.2 About Section 2 3.3 About Section 3 3.4 Authentication Page 3.5 Blog Showcase Section 3.6 Career Slider 3.7 CTA 2 Section 3.8 CTA 3 3.9 CTA 4 3.10 CTA 5 3.11 CTA 6 3.12 CTA 7 3.13 CTA 8 3.14 Feature 3 3.15 Feature 4 3.16 Feature Section 1 3.17 Feature Section 2 3.18 Feature Section 3 3.19 Footer 1 3.20 Footer 2 3.21 Footer 3 3.22 Header 3.23 Hero 1 3.24 Hero 2 3.25 Hero 3 3.26 Hero 4 3.27 Hero 5 3.28 Hero 6 3.29 Hero 7 3.30 Integration Section 3.31 Map View 3.32 Portfolio Section 2 3.33 Pricing Section 1 3.34 Pricing Section 2 3.35 Pricing Section 3 3.36 Section Height 3.37 Section Space 3.38 Testimonial Section 1 3.39 Testimonial Section 2 3.40 Testimonial Section 3 3.41 Testimonial Section 4 3.42 Usage Section 4. Utilities Style 4.1 Animations 4.2 Background 4.3 Border 4.4 Color 4.5 Dark 4.6 Light 4.7 Misc 4.8 Outline 4.9 Radius ---------------------------------------*/ /* About Card 1 */ .about-card-1::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--bs-dark-bg-subtle), var(--bs-dark)); border-radius: inherit; z-index: -1; opacity: 0.25; } .about-card-1::after { content: ""; position: absolute; inset: 1px; background-color: rgba(var(--bs-dark-rgb), 0.75); border-radius: inherit; z-index: -1; } [data-bs-theme=dark] .about-card-1::before { background-image: linear-gradient(var(--bs-dark-text-emphasis), var(--bs-dark)); } /* Accordion */ .accordion { --bs-accordion-color: var(--bs-body-color); --bs-accordion-bg: var(--bs-body-bg); --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-border-width: var(--bs-border-width); --bs-accordion-border-radius: var(--bs-border-radius); --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); --bs-accordion-btn-padding-x: 1.25rem; --bs-accordion-btn-padding-y: 0.75rem; --bs-accordion-btn-color: var(--bs-heading-color); --bs-accordion-btn-bg: var(--bs-accordion-bg); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-active-bg: var(--bs-primary-bg-subtle); } .accordion-rounded-0 { --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; } .accordion--primary { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), 1); } .accordion--secondary { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-secondary-rgb), 1); } .accordion--secondary-subtle { --bs-accordion-active-color: var(--bs-secondary-text-emphasis); --bs-accordion-active-bg: var(--bs-secondary-bg-subtle); } .accordion--success { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-success-rgb), 1); } .accordion--success-subtle { --bs-accordion-active-color: var(--bs-success-text-emphasis); --bs-accordion-active-bg: var(--bs-success-bg-subtle); } .accordion--danger { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-danger-rgb), 1); } .accordion--danger-subtle { --bs-accordion-active-color: var(--bs-danger-text-emphasis); --bs-accordion-active-bg: var(--bs-danger-bg-subtle); } .accordion--warning { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-warning-rgb), 1); } .accordion--warning-subtle { --bs-accordion-active-color: var(--bs-warning-text-emphasis); --bs-accordion-active-bg: var(--bs-warning-bg-subtle); } .accordion--info { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-info-rgb), 1); } .accordion--info-subtle { --bs-accordion-active-color: var(--bs-info-text-emphasis); --bs-accordion-active-bg: var(--bs-info-bg-subtle); } .accordion--dark { --bs-accordion-active-color: rgba(var(--bs-white-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-dark-rgb), 1); } .accordion--dark-subtle { --bs-accordion-active-color: var(--bs-dark-text-emphasis); --bs-accordion-active-bg: var(--bs-dark-bg-subtle); } .accordion--light { --bs-accordion-active-color: rgba(var(--bs-dark-rgb), 1); --bs-accordion-active-bg: rgba(var(--bs-light-rgb), 1); } .accordion--light-subtle { --bs-accordion-active-color: var(--bs-light-text-emphasis); --bs-accordion-active-bg: var(--bs-light-bg-subtle); } .accordion-button:focus { box-shadow: none; } .accordion-button::after { content: "\f282"; display: inline-block; width: 1rem; height: 1rem; font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; fill: currentcolor; background-image: none; vertical-align: -0.125em; } .accordion-button:not(.collapsed)::after { background-image: none; } .accordion-separate { --bs-accordion-border-width: 0; } .accordion-separate .accordion-item+.accordion-item { margin-top: 0.5rem; } .accordion-separate .accordion-item { border-radius: var(--bs-accordion-inner-border-radius); } .accordion-separate .accordion-button { border-radius: var(--bs-accordion-inner-border-radius); } .accordion-separate-body { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; } .accordion-separate-body .accordion-item+.accordion-item { margin-top: 0.5rem; } .accordion-separate-body .accordion-item { border-radius: var(--bs-accordion-inner-border-radius); } .accordion-separate-body .accordion-header { margin-bottom: 0.5rem; } .accordion-separate-body .accordion-button { border-radius: var(--bs-accordion-inner-border-radius); } .accordion-separate-body .accordion-button[aria-expanded=false] { background-color: var(--bs-body-bg); } .accordion-separate-body .accordion-body { background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } /* Alert */ .alert { --bs-alert-margin-bottom: 0; } .alert-quote { --bs-border-width: 0.25rem; --bs-alert-border-radius: 0; border: 0; border-inline-start: var(--bs-alert-border); } /* Border Animation */ .animation-border-360::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--bs-primary), transparent, transparent, transparent, transparent, #3838fa); animation: rotate360 20s linear infinite forwards; z-index: -1; } .animation-border-360::after { content: ""; position: absolute; inset: 2px; background-color: var(--bs-dark); border: 1px solid rgba(var(--bs-light-rgb), 0.1); border-radius: inherit; z-index: -1; } .animation-border-360__inner { inset: 2px; border-radius: inherit; } /* Avatar */ .avatar { --avatar-size: 2rem; width: var(--avatar-size); height: var(--avatar-size); display: grid; place-content: center; position: relative; border: 2px solid var(--bs-body-bg); border-radius: 50%; flex-shrink: 0; box-shadow: 0.25rem 0.25rem 0.5rem rgba(var(--bs-dark-rgb), 0.05); cursor: pointer; transition: all 0.3s ease; } .avatar-sm { --avatar-size: 1.5rem; } .avatar-md { --avatar-size: 2.5rem; } .avatar-lg { --avatar-size: 3rem; } .avatar-lg .avatar__notification { --notification-size: 0.75rem; } .avatar-xl { --avatar-size: 3.75rem; } .avatar-xl .avatar__notification { --notification-size: 0.75rem; } .avatar-xxl { --avatar-size: 4.5rem; } .avatar-xxl .avatar__notification { --notification-size: 0.75rem; } .avatar-xxxl { --avatar-size: 5rem; } .avatar-xxxl .avatar__notification { --notification-size: 1rem; } .avatar__img { width: 100%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .avatar-group { --avatar-size: 2rem; --avatar-column-size: calc(var(--avatar-size) / 2); --avatar-end-spacing: 1rem; display: grid; grid-template-columns: repeat(5, var(--avatar-column-size)); width: 100%; padding-inline-end: var(--avatar-end-spacing); } .avatar-group .avatar { --avatar-size: 2rem; } .avatar-group .avatar:hover { z-index: 1; } .avatar-group-sm { --avatar-size: 1.5rem; --avatar-end-spacing: 0.75rem; } .avatar-group-sm .avatar { --avatar-size: 1.5rem; } .avatar-group-md { --avatar-size: 2.5rem; --avatar-end-spacing: 1.25rem; } .avatar-group-md .avatar { --avatar-size: 2.5rem; } .avatar-group-lg { --avatar-size: 3rem; --avatar-end-spacing: 1.5rem; } .avatar-group-lg .avatar { --avatar-size: 3rem; } .avatar-group-xl { --avatar-size: 3.75rem; --avatar-end-spacing: 1.75rem; } .avatar-group-xl .avatar { --avatar-size: 3.75rem; } .avatar-group-xxl { --avatar-size: 4.5rem; --avatar-end-spacing: 2.25rem; } .avatar-group-xxl .avatar { --avatar-size: 4.5rem; } .avatar-group-xxxl { --avatar-size: 5rem; --avatar-end-spacing: 2.5rem; } .avatar-group-xxxl .avatar { --avatar-size: 5rem; } .avatar__notification { --notification-size: 0.5rem; --notification-position-x: 0; --notification-position-y: 0; display: grid; place-content: center; width: var(--notification-size); height: var(--notification-size); position: absolute; bottom: var(--notification-position-y); right: var(--notification-position-x); border: 1px solid var(--bs-light); border-radius: 50%; } /* Badge */ .badge { --bs-badge-border-radius: 0.15rem; --bs-badge-font-weight: 500; --bs-badge-padding-x: 0.5rem; --bs-badge-padding-y: 0.25rem; display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; line-height: 1.334; } /* Banner 1 */ :root { --h1: clamp(2.7rem, 3.789vw + 0.5rem, 4.5rem); --h2: clamp(2.4rem, 3.368vw + 0.5rem, 4rem); --h3: clamp(1.8rem, 2.526vw + 0.5rem, 3rem); --h4: clamp(1.35rem, 1.894vw + 0.5rem, 2.25rem); --h5: clamp(1.5rem, 1.473vw + 0.5rem, 1.75rem); --h6: clamp(1.25rem, 1.3vw + 0.5rem, 1.5rem); --p: clamp(0.875rem, 0.842vw + 0.5rem, 1rem); --dark-saas-rgb: 4, 1, 22; --dark-saas: #040116; } /* Normalize */ html { font-size: 100%; } body { position: relative; font-family: var(--ff-1); font-size: var(--p); font-weight: 400; line-height: 1.5; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } form { margin: 0; } /* Typography */ p { margin: 0 0 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; font-family: var(--ff-1); font-weight: 700; line-height: 1.2; } h1, .h1 { font-size: var(--h1); } h2, .h2 { font-size: var(--h2); } h3, .h3 { font-size: var(--h3); } h4, .h4 { font-size: var(--h4); } h5, .h5 { font-size: var(--h5); } h6, .h6 { font-size: var(--h6); } .fs-10 { font-size: 0.625rem; } .fs-12 { font-size: 0.75rem; line-height: 1.334; } small, .fs-14 { font-size: 0.875rem; line-height: 1.715; } .fs-16 { font-size: 1rem; } .fs-18 { font-size: 1.125rem; line-height: 1.334; } .fs-20 { font-size: clamp(1rem, 1.05vw + 0.5rem, 1.25rem); } .fs-24 { font-size: clamp(1.25rem, 1.26vw + 0.5rem, 1.5rem); } .fs-28 { font-size: 1.75rem; } .fs-32 { font-size: 2rem; } .fs-36 { font-size: clamp(1.25rem, 1.89vw + 0.25rem, 2.25rem); } .fs-40 { font-size: 2.5rem; } .fs-44 { font-size: 2.75rem; } .fs-48 { font-size: 3rem; } .fs-52 { font-size: 3.25rem; } .fs-56 { font-size: 3.5rem; } .fs-60 { font-size: 3.75rem; } .fs-10vw { font-size: clamp(4rem, 10vw + 1rem, 12rem); } .fs-20vw { font-size: clamp(8rem, 20vw + 1rem, 23.75rem); } .fs-30vw { font-size: clamp(14rem, 30vw + 1rem, 35.625rem); } .max-text-3 { max-width: 12ch; } .max-text-4 { max-width: 16ch; } .max-text-5 { max-width: 20ch; } .max-text-6 { max-width: 24ch; } .max-text-7 { max-width: 28ch; } .max-text-8 { max-width: 32ch; } .max-text-9 { max-width: 36ch; } .max-text-10 { max-width: 40ch; } .max-text-11 { max-width: 44ch; } .max-text-12 { max-width: 48ch; } .max-text-13 { max-width: 52ch; } .max-text-14 { max-width: 56ch; } .max-text-15 { max-width: 60ch; } .max-text-16 { max-width: 64ch; } .max-text-17 { max-width: 68ch; } .max-text-18 { max-width: 72ch; } .max-text-19 { max-width: 76ch; } .max-text-20 { max-width: 80ch; } .max-text-21 { max-width: 84ch; } .max-text-22 { max-width: 88ch; } .max-text-23 { max-width: 92ch; } .max-text-24 { max-width: 96ch; } .max-text-25 { max-width: 100ch; } .max-text-26 { max-width: 104ch; } .max-text-27 { max-width: 108ch; } .max-text-28 { max-width: 112ch; } .max-text-29 { max-width: 116ch; } .max-text-30 { max-width: 120ch; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } .lh-1\/2 { line-height: 1.2; } .lh-1\/3 { line-height: 1.334; } .lh-1\/5 { line-height: 1.5; } .lh-1\/7 { line-height: 1.715; } .banner-1 { background-image: url(../img/shapes/banner-grid-shape.png); background-color: var(--bs-body-bg); overflow: hidden; } .banner-1__content { padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem); padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem); position: relative; z-index: 1; } .banner-1__content::before { content: ""; width: 18.75rem; height: 18.75rem; position: absolute; top: 0; right: 10%; transform: translateY(-25%); background: rgba(var(--bs-white-rgb), 0.1); border: 1px solid rgba(var(--bs-white-rgb), 0.1); border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; } @media (min-width: 1200px) { .banner-1__content::before { right: 19%; } } .banner-1__content::after { content: ""; position: absolute; top: 35%; right: 32%; width: 5.625rem; height: 5.625rem; border-radius: 50%; background-color: rgba(var(--bs-primary-rgb), 0.1); z-index: -2; } @media (min-width: 1200px) { .banner-1__content::after { right: 35%; } } .banner-1__froster-svg { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -2; } .banner-1__froster-svg-path { animation: animateFill 20s infinite linear alternate; } .banner-2 { background-image: url(../img/shapes/banner-grid-shape-2.png); background-color: var(--bs-dark); overflow: hidden; } .banner-2__content { padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem); padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem); position: relative; z-index: 1; } .banner-2__content::before { content: ""; width: 18.75rem; height: 18.75rem; position: absolute; top: 0; right: 10%; transform: translateY(-25%); background: rgba(var(--bs-white-rgb), 0.1); border: 1px solid rgba(var(--bs-white-rgb), 0.1); border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; } @media (min-width: 1200px) { .banner-2__content::before { right: 19%; } } .banner-2__content::after { content: ""; position: absolute; top: 35%; right: 32%; width: 5.625rem; height: 5.625rem; border-radius: 50%; background-color: rgba(var(--bs-primary-rgb), 0.3); z-index: -1; } @media (min-width: 1200px) { .banner-2__content::after { right: 35%; } } .banner-2__froster-svg { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -2; } .banner-2__froster-svg-path { animation: animateFill 20s infinite linear alternate; } .banner-3 { padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem); padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem); position: relative; background-image: url(../img/banner-img-1.png); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; } .banner-3::after { content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(var(--bs-dark-rgb), 0.8); } .banner-4 { padding-block-start: clamp(6rem, 9vw + 1rem, 11.875rem); padding-block-end: clamp(4.5rem, 6.5vw + 1rem, 8rem); } .banner-4::before { content: ""; width: 18.75rem; height: 18.75rem; position: absolute; top: 0; right: 0; transform: translateY(-25%); background: rgba(var(--bs-white-rgb), 0.5); border: 1px solid rgba(var(--bs-white-rgb), 0.1); border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; } .banner-4::after { content: ""; position: absolute; top: 10%; right: 15%; width: 5.625rem; height: 5.625rem; border-radius: 50%; background-color: rgba(var(--bs-primary-rgb), 0.1); z-index: -2; } /* Blend Background */ .blend-x { -webkit-mask: linear-gradient(90deg, transparent, white 25%, white 75%, transparent); mask: linear-gradient(90deg, transparent, white 25%, white 75%, transparent); } .blend-y { -webkit-mask: linear-gradient(transparent, white 25%, white 75%, transparent); mask: linear-gradient(transparent, white 25%, white 75%, transparent); } .blend-y-start { -webkit-mask: linear-gradient(transparent 50%, white); mask: linear-gradient(transparent 50%, white); } .blend-y-end { -webkit-mask: linear-gradient(white 50%, transparent); mask: linear-gradient(white 50%, transparent); } /* Brand 2 */ .brand-2 { width: 12.5rem; height: 3.75rem; } /* Breadcrumb Modifier */ .breadcrumb-modifier { --bs-breadcrumb-padding-x: 0; --bs-breadcrumb-padding-y: 0; --bs-breadcrumb-margin-bottom: 0; --bs-breadcrumb-divider-color: var(--bs-light-text-emphasis); --bs-breadcrumb-item-padding-x: 0.5rem; --bs-breadcrumb-item-active-color: var(--bs-light-text-emphasis); } .breadcrumb-modifier .breadcrumb-item+.breadcrumb-item::before { display: none; } /* btn Style */ .btn { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.5rem; --bs-btn-border-radius: 0.25rem; display: inline-flex; gap: 0.5rem; flex-shrink: 0; } .btn.btn-icon { align-items: center; justify-content: center; } .btn.btn-icon:not(.btn-xsm):not(.btn-sm):not(.btn-lg) { --bs-btn-padding-x: calc(0.5rem + 1px); --bs-btn-padding-y: calc(0.5rem + 1px); --bs-btn-font-size: 1.5rem; } .btn-primary { --bs-btn-color: var(--bs-light); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-light); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, black); --bs-btn-active-color: var(--bs-light); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-secondary { --bs-btn-color: var(--bs-dark); --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 85%, black); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-dark); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); } .btn-success { --bs-btn-color: var(--bs-light); --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-light); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, black); --bs-btn-active-color: var(--bs-light); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); } .btn-danger { --bs-btn-color: var(--bs-light); --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: var(--bs-light); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 85%, black); --bs-btn-active-color: var(--bs-light); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-info { --bs-btn-color: var(--bs-light); --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: var(--bs-light); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 85%, black); --bs-btn-active-color: var(--bs-light); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); } .btn-light { --bs-btn-color: var(--bs-dark); --bs-btn-bg: var(--bs-light); --bs-btn-border-color: var(--bs-light); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 85%, black); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-light); --bs-btn-active-border-color: var(--bs-light); --bs-btn-disabled-color: var(--bs-dark); --bs-btn-disabled-bg: var(--bs-light); --bs-btn-disabled-border-color: var(--bs-light); } .btn-dark { --bs-btn-color: var(--bs-light); --bs-btn-bg: var(--bs-dark); --bs-btn-border-color: var(--bs-dark); --bs-btn-hover-color: var(--bs-light); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 85%, black); --bs-btn-active-color: var(--bs-light); --bs-btn-active-bg: var(--bs-dark); --bs-btn-active-border-color: var(--bs-dark); --bs-btn-disabled-color: var(--bs-light); --bs-btn-disabled-bg: var(--bs-dark); --bs-btn-disabled-border-color: var(--bs-dark); } .btn-xsm { --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.25rem; --bs-btn-border-radius: 0.25rem; --bs-btn-font-size: 0.75rem; line-height: 1.167; } .btn-xsm.btn-icon { --bs-btn-padding-x: calc(0.25rem + 1px); --bs-btn-padding-y: calc(0.25rem + 1px); align-items: center; justify-content: center; } .btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.25rem; --bs-btn-border-radius: 0.25rem; line-height: 1.715; } .btn-sm.btn-icon { --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.5rem; align-items: center; justify-content: center; } .btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.5rem; --bs-btn-border-radius: 0.25rem; } .btn-lg.btn-icon { --bs-btn-padding-x: calc(0.5rem + 1px); --bs-btn-padding-y: calc(0.5rem + 1px); --bs-btn-font-size: 1.75rem; align-items: center; justify-content: center; } .btn-primary-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-bg: var(--bs-primary-bg-subtle); --bs-btn-border-color: var(--bs-primary-border-subtle); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1); } .btn-secondary-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-secondary-text-emphasis); --bs-btn-bg: var(--bs-secondary-bg-subtle); --bs-btn-border-color: var(--bs-secondary-border-subtle); --bs-btn-hover-color: rgba(var(--bs-dark-rgb), 1); --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), 1); } .btn-success-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-bg: var(--bs-success-bg-subtle); --bs-btn-border-color: var(--bs-success-border-subtle); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-success-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-success-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-success-rgb), 1); } .btn-danger-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-bg: var(--bs-danger-bg-subtle); --bs-btn-border-color: var(--bs-danger-border-subtle); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-danger-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), 1); } .btn-warning-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-bg: var(--bs-warning-bg-subtle); --bs-btn-border-color: var(--bs-warning-border-subtle); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-warning-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), 1); } .btn-info-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-info-text-emphasis); --bs-btn-bg: var(--bs-info-bg-subtle); --bs-btn-border-color: var(--bs-info-border-subtle); --bs-btn-hover-color: var(--bs-black); --bs-btn-hover-bg: rgba(var(--bs-info-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-info-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-black); --bs-btn-active-bg: rgba(var(--bs-info-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-info-rgb), 1); } .btn-light-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-light-text-emphasis); --bs-btn-bg: var(--bs-light-bg-subtle); --bs-btn-border-color: var(--bs-light-border-subtle); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: rgba(var(--bs-light-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-light-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-light-rgb); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: rgba(var(--bs-light-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-light-rgb), 1); } .btn-dark-subtle { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-dark-text-emphasis); --bs-btn-bg: var(--bs-dark-bg-subtle); --bs-btn-border-color: var(--bs-dark-border-subtle); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-dark-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-dark-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), 1); } .btn-primary-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-primary-bg-subtle); --bs-btn-bg: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1); } .btn-secondary-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-secondary-bg-subtle); --bs-btn-bg: var(--bs-secondary-text-emphasis); --bs-btn-border-color: var(--bs-secondary-text-emphasis); --bs-btn-hover-color: rgba(var(--bs-dark-rgb), 1); --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), 1); } .btn-success-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-success-bg-subtle); --bs-btn-bg: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success-text-emphasis); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-success-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-success-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-success-rgb), 1); } .btn-danger-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-danger-bg-subtle); --bs-btn-bg: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-danger-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), 1); } .btn-warning-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-warning-bg-subtle); --bs-btn-bg: var(--bs-warning-text-emphasis); --bs-btn-border-color: var(--bs-warning-text-emphasis); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-warning-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), 1); } .btn-info-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-info-bg-subtle); --bs-btn-bg: var(--bs-info-text-emphasis); --bs-btn-border-color: var(--bs-info-text-emphasis); --bs-btn-hover-color: var(--bs-black); --bs-btn-hover-bg: rgba(var(--bs-info-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-info-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-active-color: var(--bs-black); --bs-btn-active-bg: rgba(var(--bs-info-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-info-rgb), 1); } .btn-light-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-light-bg-subtle); --bs-btn-bg: var(--bs-light-text-emphasis); --bs-btn-border-color: var(--bs-light-text-emphasis); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: rgba(var(--bs-light-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-light-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-light-rgb); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: rgba(var(--bs-light-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-light-rgb), 1); } .btn-dark-emphasis { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-dark-bg-subtle); --bs-btn-bg: var(--bs-dark-text-emphasis); --bs-btn-border-color: var(--bs-dark-text-emphasis); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-dark-rgb), 1); --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), 1); --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb); --bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-dark-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), 1); } .btn-outline-primary { --bs-btn-hover-color: var(--bs-primary-text-emphasis); --bs-btn-hover-bg: var(--bs-primary-bg-subtle); --bs-btn-hover-border-color: var(--bs-primary-border-subtle); --bs-btn-active-color: var(--bs-primary-text-emphasis); --bs-btn-active-bg: var(--bs-primary-bg-subtle); --bs-btn-active-border-color: var(--bs-primary-border-subtle); } .btn-outline-secondary { --bs-btn-hover-color: var(--bs-secondary-text-emphasis); --bs-btn-hover-bg: var(--bs-secondary-bg-subtle); --bs-btn-hover-border-color: var(--bs-secondary-border-subtle); --bs-btn-active-color: var(--bs-secondary-text-emphasis); --bs-btn-active-bg: var(--bs-secondary-bg-subtle); --bs-btn-active-border-color: var(--bs-secondary-border-subtle); } .btn-outline-success { --bs-btn-hover-color: var(--bs-success-text-emphasis); --bs-btn-hover-bg: var(--bs-success-bg-subtle); --bs-btn-hover-border-color: var(--bs-success-border-subtle); --bs-btn-active-color: var(--bs-success-text-emphasis); --bs-btn-active-bg: var(--bs-success-bg-subtle); --bs-btn-active-border-color: var(--bs-success-border-subtle); } .btn-outline-danger { --bs-btn-hover-color: var(--bs-danger-text-emphasis); --bs-btn-hover-bg: var(--bs-danger-bg-subtle); --bs-btn-hover-border-color: var(--bs-danger-border-subtle); --bs-btn-active-color: var(--bs-danger-text-emphasis); --bs-btn-active-bg: var(--bs-danger-bg-subtle); --bs-btn-active-border-color: var(--bs-danger-border-subtle); } .btn-outline-warning { --bs-btn-hover-color: var(--bs-warning-text-emphasis); --bs-btn-hover-bg: var(--bs-warning-bg-subtle); --bs-btn-hover-border-color: var(--bs-warning-border-subtle); --bs-btn-active-color: var(--bs-warning-text-emphasis); --bs-btn-active-bg: var(--bs-warning-bg-subtle); --bs-btn-active-border-color: var(--bs-warning-border-subtle); } .btn-outline-info { --bs-btn-hover-color: var(--bs-info-text-emphasis); --bs-btn-hover-bg: var(--bs-info-bg-subtle); --bs-btn-hover-border-color: var(--bs-info-border-subtle); --bs-btn-active-color: var(--bs-info-text-emphasis); --bs-btn-active-bg: var(--bs-info-bg-subtle); --bs-btn-active-border-color: var(--bs-info-border-subtle); } .btn-outline-light { --bs-btn-hover-color: var(--bs-light-text-emphasis); --bs-btn-hover-bg: var(--bs-light-bg-subtle); --bs-btn-hover-border-color: var(--bs-light-border-subtle); --bs-btn-active-color: var(--bs-light-text-emphasis); --bs-btn-active-bg: var(--bs-light-bg-subtle); --bs-btn-active-border-color: var(--bs-light-border-subtle); } .btn-outline-dark { --bs-btn-hover-color: var(--bs-dark-text-emphasis); --bs-btn-hover-bg: var(--bs-dark-bg-subtle); --bs-btn-hover-border-color: var(--bs-dark-border-subtle); --bs-btn-active-color: var(--bs-dark-text-emphasis); --bs-btn-active-bg: var(--bs-dark-bg-subtle); --bs-btn-active-border-color: var(--bs-dark-border-subtle); } .btn-play { border: none; padding: 0; background-color: transparent; } .btn-play::after { content: ""; position: absolute; inset: 0; animation: pulse 1s linear infinite; background-color: var(--bs-primary); border-radius: 50%; z-index: -1; } /* Card Style */ .card { --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem; --bs-border-radius: 0.5rem; } /* Case Study Card */ @media (min-width: 768px) { .case-study-card__img { width: 45%; } } @media (min-width: 1200px) { .case-study-card__img { width: 40%; } } @media (min-width: 1400px) { .case-study-card__img { width: 45%; } } /* Radius Circle */ .circle-container { position: relative; width: 28.75rem; height: 28.75rem; } .circle-radius { position: absolute; width: 100%; height: 100%; border: 1px solid rgba(var(--bs-light-rgb), 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: rotate360 16s linear infinite; background-image: radial-gradient(circle, var(--dark-saas), rgba(var(--bs-primary-rgb), 0.075)); } .outer-circle { animation-duration: 18s; } .middle-circle { width: 75%; height: 75%; left: 12.5%; top: 12.5%; animation-duration: 14s; } .inner-circle { width: 50%; height: 50%; left: 25%; top: 25%; animation-duration: 10s; } .dot { position: absolute; min-width: 1rem; min-height: 1rem; } .dot--outer { top: 0; left: 50%; transform: translate(-50%, -50%); } .dot--middle { top: 0; left: 50%; transform: translate(-50%, -50%); } .dot--inner { top: 0; left: 50%; transform: translate(-50%, -50%); } /* Code Snippet */ .code-snippet--sm pre { max-height: 6.25rem; } .code-snippet--md pre { max-height: 12.5rem; } .code-snippet--lg pre { max-height: 18.75rem; } .code-snippet--expanded pre { max-height: unset; } .code-snippet :not(pre)>code[class*=language-], .code-snippet pre[class*=language-] { margin: 0; background: transparent; font-size: 0.875rem; } .code-snippet code[class*=language-], .code-snippet pre[class*=language-] { color: var(--bs-body-color); text-shadow: 0 1px var(--bs-light-bg-subtle); overflow: auto; scrollbar-color: var(--bs-dark-bg-subtle) rgba(var(--bs-secondary-bg-rgb), 0.5); scrollbar-width: thin; } .code-snippet code[class*=language-]::-webkit-scrollbar, .code-snippet pre[class*=language-]::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } .code-snippet code[class*=language-]::-webkit-scrollbar-track, .code-snippet pre[class*=language-]::-webkit-scrollbar-track { background: rgba(var(--bs-secondary-bg-rgb), 0.5); } .code-snippet code[class*=language-]::-webkit-scrollbar-thumb, .code-snippet pre[class*=language-]::-webkit-scrollbar-thumb { background: var(--bs-dark-bg-subtle); } .code-snippet .token.boolean, .code-snippet .token.constant, .code-snippet .token.deleted, .code-snippet .token.number, .code-snippet .token.property, .code-snippet .token.symbol, .code-snippet .token.tag { color: var(--bs-danger-text-emphasis); } .code-snippet .token.attr-name, .code-snippet .token.builtin, .code-snippet .token.char, .code-snippet .token.inserted, .code-snippet .token.selector, .code-snippet .token.string { color: var(--bs-success-text-emphasis); } .code-snippet .token.atrule, .code-snippet .token.attr-value, .code-snippet .token.keyword { color: var(--bs-primary-text-emphasis); } .code-snippet .token.punctuation { color: var(--bs-primary-text-emphasis); } .code-snippet .token.parameter { color: var(--bs-info-text-emphasis); } .code-snippet .language-css .token.string, .code-snippet .style .token.string, .code-snippet .token.entity, .code-snippet .token.operator, .code-snippet .token.url { color: var(--bs-warning-text-emphasis); background: transparent; } .code-snippet div.code-toolbar>.toolbar>.toolbar-item>a, .code-snippet div.code-toolbar>.toolbar>.toolbar-item>button, .code-snippet div.code-toolbar>.toolbar>.toolbar-item>span { display: inline-block; padding: 0.5rem 1rem; background-color: var(--bs-primary); border: 1px solid var(--bs-primary); border-radius: 0.25rem; box-shadow: none; font-size: 0.75rem; color: var(--bs-light); font-weight: 600; } /* Dropdown*/ .dropdown-modifier.dropdown-xsm .dropdown-menu { --bs-dropdown-min-width: 5rem; } .dropdown-modifier.dropdown-sm .dropdown-menu { --bs-dropdown-min-width: 8rem; } .dropdown-modifier.dropdown-md .dropdown-menu { --bs-dropdown-min-width: 12.5rem; } .dropdown-modifier.dropdown-xl .dropdown-menu { --bs-dropdown-min-width: 17.5rem; } .dropdown-modifier__body { max-height: 15.625rem; overflow-y: auto; scrollbar-color: transparent transparent; scrollbar-width: none; } .dropdown-modifier__body::-webkit-scrollbar { width: 0; height: 0; } .dropdown-modifier__body::-webkit-scrollbar-track { background-color: transparent; } .dropdown-modifier__body::-webkit-scrollbar-thumb { background-color: transparent; } .dropdown-modifier .dropdown-menu { --bs-dropdown-padding-x: 0.25rem; --bs-dropdown-padding-y: 0.25rem; --bs-dropdown-font-size: 0.875rem; --bs-dropdown-border-radius: 0.25rem; --bs-dropdown-divider-margin-y: 0.5rem; --bs-dropdown-link-hover-color: var(--bs-primary-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-primary-bg-subtle); --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-primary-text-emphasis); --bs-dropdown-item-padding-x: 0.75rem; --bs-dropdown-item-padding-y: 0.25rem; --bs-dropdown-header-padding-x: 0.75rem; --bs-dropdown-header-padding-y: 0.5rem; } .dropdown-modifier .dropdown-menu>li+li { margin-block-start: 0.25rem; } .dropdown-modifier .dropdown-item { --bs-dropdown-item-border-radius: 0.25rem; } .dropdown-modifier--secondary .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-secondary-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-secondary-bg-subtle); --bs-dropdown-link-active-color: var(--bs-secondary-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-secondary-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-secondary-text-emphasis); } .dropdown-modifier--success .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-success-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-success-bg-subtle); --bs-dropdown-link-active-color: var(--bs-success-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-success-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-success-text-emphasis); } .dropdown-modifier--danger .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-danger-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-danger-bg-subtle); --bs-dropdown-link-active-color: var(--bs-danger-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-danger-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-danger-text-emphasis); } .dropdown-modifier--warning .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-warning-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-warning-bg-subtle); --bs-dropdown-link-active-color: var(--bs-warning-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-warning-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-warning-text-emphasis); } .dropdown-modifier--info .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-info-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-info-bg-subtle); --bs-dropdown-link-active-color: var(--bs-info-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-info-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-info-text-emphasis); } .dropdown-modifier--light .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-light-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-light-bg-subtle); --bs-dropdown-link-active-color: var(--bs-light-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-light-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-light-text-emphasis); } .dropdown-modifier--dark .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-dark-text-emphasis); --bs-dropdown-link-hover-bg: var(--bs-dark-bg-subtle); --bs-dropdown-link-active-color: var(--bs-dark-text-emphasis); --bs-dropdown-link-active-bg: var(--bs-dark-bg-subtle); --bs-dropdown-link-disabled-color: var(--bs-dark-text-emphasis); } /* Feature Card 1 */ .feature-card-1 { background-image: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.1) -59.74%, rgba(var(--bs-dark-rgb), 0.5) 100%); } .feature-card-1__pulse { margin-bottom: -16.875rem; } /* Border Style */ .feature-separate-border { --feat-color-1: var(--bs-border-color); --feat-color-2: var(--bs-border-color); --feat-color-3: var(--bs-border-color); --feat-color-4: var(--bs-border-color); } @media (min-width: 1200px) { .feature-separate-border { border: 1px solid; -o-border-image: linear-gradient(45deg, var(--feat-color-1), var(--feat-color-2), var(--feat-color-3), var(--feat-color-4)) 1; border-image: linear-gradient(45deg, var(--feat-color-1), var(--feat-color-2), var(--feat-color-3), var(--feat-color-4)) 1; } .feature-separate-border:nth-child(1) { --feat-color-1: transparent; --feat-color-4: transparent; border-top: 0; border-left: 0; } .feature-separate-border:nth-child(2) { --feat-color-4: transparent; border-top: 0; border-left: 0; } .feature-separate-border:nth-child(3) { --feat-color-4: transparent; border-top: 0; border-left: 0; } .feature-separate-border:nth-child(4) { --feat-color-4: transparent; --feat-color-3: transparent; border-top: 0; border-left: 0; border-right: 0; } .feature-separate-border:nth-child(5) { border-top: 0; border-right: 0; border-left: 0; border-bottom: 0; } .feature-separate-border:nth-child(6) { --feat-color-1: transparent; border-top: 0; border-right: 0; border-bottom: 0; } .feature-separate-border:nth-child(7) { --feat-color-1: transparent; border-top: 0; border-right: 0; border-bottom: 0; } .feature-separate-border:nth-child(8) { --feat-color-1: transparent; border-top: 0; border-right: 0; border-bottom: 0; } } /* Folder Card Style */ .folder-card { position: relative; isolation: isolate; border-radius: 1.5rem; } .folder-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(73.43% 75.8% at 50% 45.64%, rgba(0, 0, 0, 0) 0%, rgba(246, 92, 52, 0.15) 100%); background-color: rgba(14, 14, 16, 0.1); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } @media (min-width: 768px) { .folder-card::after { -webkit-mask-image: url(../img/shapes/folder-shape.png); mask-image: url(../img/shapes/folder-shape.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } .folder-card-list li { position: sticky; } .folder-card-list li:nth-child(1) { top: 7.5rem; } .folder-card-list li:nth-child(2) { top: calc(7.5rem + 2.5rem); } .folder-card-list li:nth-child(3) { top: calc(7.5rem + 4.5rem); } /* Form Check */ .form-check-modifier { display: inline-flex; gap: 0.5rem; min-height: unset; padding: 0; margin: 0; } .form-check-modifier .form-check-input { --checkbox-size: 1rem; --checkbox-radius: 2px; --checkbox-icon: ""; --bs-form-check-bg: var(--bs-body-bg); width: var(--checkbox-size); height: var(--checkbox-size); vertical-align: middle; background-color: var(--bs-body-bg); background-image: none; border: var(--bs-border-width) solid var(--bs-border-color); flex-shrink: 0; } .form-check-modifier .form-check-input:focus { box-shadow: none; } .form-check-modifier .form-check-input[type=checkbox] { border-radius: var(--checkbox-radius); float: unset; margin-left: unset; } .form-check-modifier .form-check-input[type=checkbox]:checked { position: relative; isolation: isolate; background-color: var(--bs-form-check-bg); border-color: var(--bs-border-color); } .form-check-modifier .form-check-input[type=checkbox]:checked::after { content: var(--checkbox-icon); display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; } .form-check-modifier .form-check-input[type=checkbox]:focus { border-color: var(--bs-border-color); } .form-check-modifier .form-check-input[type=radio] { float: unset; margin-left: unset; } .form-check-modifier .form-check-input[type=radio]:checked { position: relative; isolation: isolate; background-color: var(--bs-form-check-bg); border-color: var(--bs-border-color); } .form-check-modifier .form-check-input[type=radio]:checked::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(var(--bs-body-color-rgb), 1); border-radius: 50%; } .form-check-modifier .form-check-input[type=radio]:focus { border-color: var(--bs-border-color); } .form-check-modifier.form-check--dash .form-check-input { --checkbox-icon: ""; } .form-check-modifier.form-check--primary .form-check-input { --bs-form-check-bg: rgba(var(--bs-primary-rgb), 1); } .form-check-modifier.form-check--primary .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-primary-rgb), 1); } .form-check-modifier.form-check--primary .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--primary .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-primary-rgb), 1); } .form-check-modifier.form-check--primary .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--primary-subtle .form-check-input { --bs-form-check-bg: var(--bs-primary-bg-subtle); } .form-check-modifier.form-check--primary-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-primary-text-emphasis); } .form-check-modifier.form-check--primary-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-primary-text-emphasis); } .form-check-modifier.form-check--primary-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-primary-text-emphasis); } .form-check-modifier.form-check--primary-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-primary-text-emphasis); } .form-check-modifier.form-check--secondary .form-check-input { --bs-form-check-bg: rgba(var(--bs-secondary-rgb), 1); } .form-check-modifier.form-check--secondary .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-secondary-rgb), 1); } .form-check-modifier.form-check--secondary .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--secondary .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-secondary-rgb), 1); } .form-check-modifier.form-check--secondary .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--secondary-subtle .form-check-input { --bs-form-check-bg: var(--bs-secondary-bg-subtle); } .form-check-modifier.form-check--secondary-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-secondary-text-emphasis); } .form-check-modifier.form-check--secondary-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-secondary-text-emphasis); } .form-check-modifier.form-check--secondary-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-secondary-text-emphasis); } .form-check-modifier.form-check--secondary-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-secondary-text-emphasis); } .form-check-modifier.form-check--success .form-check-input { --bs-form-check-bg: rgba(var(--bs-success-rgb), 1); } .form-check-modifier.form-check--success .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-success-rgb), 1); } .form-check-modifier.form-check--success .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--success .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-success-rgb), 1); } .form-check-modifier.form-check--success .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--success-subtle .form-check-input { --bs-form-check-bg: var(--bs-success-bg-subtle); } .form-check-modifier.form-check--success-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-success-text-emphasis); } .form-check-modifier.form-check--success-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-success-text-emphasis); } .form-check-modifier.form-check--success-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-success-text-emphasis); } .form-check-modifier.form-check--success-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-success-text-emphasis); } .form-check-modifier.form-check--danger .form-check-input { --bs-form-check-bg: rgba(var(--bs-danger-rgb), 1); } .form-check-modifier.form-check--danger .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-danger-rgb), 1); } .form-check-modifier.form-check--danger .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--danger .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-danger-rgb), 1); } .form-check-modifier.form-check--danger .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--danger-subtle .form-check-input { --bs-form-check-bg: var(--bs-danger-bg-subtle); } .form-check-modifier.form-check--danger-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-danger-text-emphasis); } .form-check-modifier.form-check--danger-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-danger-text-emphasis); } .form-check-modifier.form-check--danger-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-danger-text-emphasis); } .form-check-modifier.form-check--danger-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-danger-text-emphasis); } .form-check-modifier.form-check--warning .form-check-input { --bs-form-check-bg: rgba(var(--bs-warning-rgb), 1); } .form-check-modifier.form-check--warning .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-warning-rgb), 1); } .form-check-modifier.form-check--warning .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--warning .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-warning-rgb), 1); } .form-check-modifier.form-check--warning .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--warning-subtle .form-check-input { --bs-form-check-bg: var(--bs-warning-bg-subtle); } .form-check-modifier.form-check--warning-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-warning-text-emphasis); } .form-check-modifier.form-check--warning-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-warning-text-emphasis); } .form-check-modifier.form-check--warning-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-warning-text-emphasis); } .form-check-modifier.form-check--warning-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-warning-text-emphasis); } .form-check-modifier.form-check--info .form-check-input { --bs-form-check-bg: rgba(var(--bs-info-rgb), 1); } .form-check-modifier.form-check--info .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-info-rgb), 1); } .form-check-modifier.form-check--info .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--info .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-info-rgb), 1); } .form-check-modifier.form-check--info .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--info-subtle .form-check-input { --bs-form-check-bg: var(--bs-info-bg-subtle); } .form-check-modifier.form-check--info-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-info-text-emphasis); } .form-check-modifier.form-check--info-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-info-text-emphasis); } .form-check-modifier.form-check--info-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-info-text-emphasis); } .form-check-modifier.form-check--info-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-info-text-emphasis); } .form-check-modifier.form-check--dark .form-check-input { --bs-form-check-bg: rgba(var(--bs-dark-rgb), 1); } .form-check-modifier.form-check--dark .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-dark-rgb), 1); } .form-check-modifier.form-check--dark .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--dark .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-dark-rgb), 1); } .form-check-modifier.form-check--dark .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-white-rgb), 1); } .form-check-modifier.form-check--dark-subtle .form-check-input { --bs-form-check-bg: var(--bs-dark-bg-subtle); } .form-check-modifier.form-check--dark-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-dark-text-emphasis); } .form-check-modifier.form-check--dark-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-dark-text-emphasis); } .form-check-modifier.form-check--dark-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-dark-text-emphasis); } .form-check-modifier.form-check--dark-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-dark-text-emphasis); } .form-check-modifier.form-check--light .form-check-input { --bs-form-check-bg: rgba(var(--bs-light-rgb), 1); } .form-check-modifier.form-check--light .form-check-input[type=checkbox]:checked { --bs-border-color: rgba(var(--bs-light-rgb), 1); } .form-check-modifier.form-check--light .form-check-input[type=checkbox]:checked::after { color: rgba(var(--bs-black-rgb), 1); } .form-check-modifier.form-check--light .form-check-input[type=radio]:checked { --bs-border-color: rgba(var(--bs-light-rgb), 1); } .form-check-modifier.form-check--light .form-check-input[type=radio]:checked::after { background-color: rgba(var(--bs-black-rgb), 1); } .form-check-modifier.form-check--light-subtle .form-check-input { --bs-form-check-bg: var(--bs-light-bg-subtle); } .form-check-modifier.form-check--light-subtle .form-check-input[type=checkbox]:checked { --bs-border-color: var(--bs-light-text-emphasis); } .form-check-modifier.form-check--light-subtle .form-check-input[type=checkbox]:checked::after { color: var(--bs-light-text-emphasis); } .form-check-modifier.form-check--light-subtle .form-check-input[type=radio]:checked { --bs-border-color: var(--bs-light-text-emphasis); } .form-check-modifier.form-check--light-subtle .form-check-input[type=radio]:checked::after { background-color: var(--bs-light-text-emphasis); } /* Form Control */ .form-control { --bs-border-radius: 0.25rem; padding: 0.5rem 1rem; } .form-control::-moz-placeholder { color: rgba(var(--bs-body-color-rgb), 0.5); font-weight: normal; } .form-control::placeholder { color: rgba(var(--bs-body-color-rgb), 0.5); font-weight: normal; } .form-control-sm { padding: 0.25rem 1rem; font-size: 0.875rem; line-height: 1.715; } .form-control-lg { border-radius: var(--bs-border-radius-sm); } .form-control[type=file] { padding-inline-start: 0.5rem; } /* Form Select */ .form-select { --bs-border-radius: 0.25rem; padding-block: 0.5rem; padding-inline-start: 1rem; } .form-select-sm { padding-block: 0.25rem; line-height: 1.715; } .form-select-lg { border-radius: var(--bs-border-radius-sm); } /* Gradient Border */ .gradient-border { --border-size: 1px; --surface-color: var(--bs-dark); --border-color-top: var(--bs-dark-bg-subtle); --border-color-bottom: var(--bs-dark); position: relative; isolation: isolate; } .gradient-border::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--border-color-top), var(--border-color-bottom)); border-radius: inherit; z-index: -2; opacity: 0.3; } .gradient-border::after { content: ""; position: absolute; inset: var(--border-size); background: var(--surface-color); border-radius: inherit; z-index: -1; } .gradient-border--2x { --border-size: 2px; } .gradient-border--3x { --border-size: 3px; } .gradient-border--4x { --border-size: 4px; } .gradient-border--surface-primary { --surface-color: var(--bs-primary); } .gradient-border--surface-dark-emphasis { --surface-color: var(--bs-dark-text-emphasis); --border-color-bottom: var(--bs-dark-text-emphasis); } .gradient-border--surface-dark-alt { --surface-color: var(--dark-saas); --border-color-top: rgba(var(--bs-light-rgb), 0.4); } .gradient-border--primary { --border-color-top: var(--bs-primary); } [data-bs-theme=dark] .gradient-border { --border-color-top: var(--bs-dark-text-emphasis); } [data-bs-theme=dark] .gradient-border--surface-dark-emphasis { --surface-color: var(--bs-dark-bg-subtle); --border-color-bottom: var(--bs-dark-bg-subtle); } [data-bs-theme=dark] .gradient-border--primary { --border-color-top: var(--bs-primary); } /* Group Selector */ .group:hover .group-hover\:transition { transition: all 0.3s ease; } .group:hover .group-hover\:text-heading { color: var(--bs-heading-color) !important; } .group:hover .group-hover\:text-body { --bs-text-opacity: 1; color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-body-emphasis { --bs-text-opacity: 1; color: var(--bs-emphasis-color) !important; } .group:hover .group-hover\:text-body-secondary { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .group:hover .group-hover\:text-body-tertiary { --bs-text-opacity: 1; color: var(--bs-tertiary-color) !important; } .group:hover .group-hover\:text-black { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-white { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-primary { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-primary-emphasis { color: var(--bs-primary-text-emphasis) !important; } .group:hover .group-hover\:text-primary-subtle { color: var(--bs-primary-bg-subtle) !important; } .group:hover .group-hover\:text-secondary { --bs-text-opacity: 1; color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-secondary-emphasis { color: var(--bs-secondary-text-emphasis) !important; } .group:hover .group-hover\:text-secondary-subtle { color: var(--bs-secondary-bg-subtle) !important; } .group:hover .group-hover\:text-success { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-success-emphasis { color: var(--bs-success-text-emphasis) !important; } .group:hover .group-hover\:text-success-subtle { color: var(--bs-success-bg-subtle) !important; } .group:hover .group-hover\:text-danger { --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-danger-emphasis { color: var(--bs-danger-text-emphasis) !important; } .group:hover .group-hover\:text-danger-subtle { color: var(--bs-danger-bg-subtle) !important; } .group:hover .group-hover\:text-warning { --bs-text-opacity: 1; color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-warning-emphasis { color: var(--bs-warning-text-emphasis) !important; } .group:hover .group-hover\:text-warning-subtle { color: var(--bs-warning-bg-subtle) !important; } .group:hover .group-hover\:text-info { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-info-emphasis { color: var(--bs-info-text-emphasis) !important; } .group:hover .group-hover\:text-info-subtle { color: var(--bs-info-bg-subtle) !important; } .group:hover .group-hover\:text-light { --bs-text-opacity: 1; color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-light-emphasis { color: var(--bs-light-text-emphasis) !important; } .group:hover .group-hover\:text-light-subtle { color: var(--bs-light-bg-subtle) !important; } .group:hover .group-hover\:text-dark { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .group:hover .group-hover\:text-dark-emphasis { color: var(--bs-dark-text-emphasis) !important; } .group:hover .group-hover\:text-dark-subtle { color: var(--bs-dark-bg-subtle) !important; } .group:hover .group-hover\:text-opacity-5 { --bs-text-opacity: 0.05; } .group:hover .group-hover\:text-opacity-10 { --bs-text-opacity: 0.1; } .group:hover .group-hover\:text-opacity-20 { --bs-text-opacity: 0.2; } .group:hover .group-hover\:text-opacity-30 { --bs-text-opacity: 0.3; } .group:hover .group-hover\:text-opacity-40 { --bs-text-opacity: 0.4; } .group:hover .group-hover\:text-opacity-50 { --bs-text-opacity: 0.5; } .group:hover .group-hover\:text-opacity-60 { --bs-text-opacity: 0.6; } .group:hover .group-hover\:text-opacity-70 { --bs-text-opacity: 0.7; } .group:hover .group-hover\:text-opacity-80 { --bs-text-opacity: 0.8; } .group:hover .group-hover\:text-opacity-90 { --bs-text-opacity: 0.9; } .group:hover .group-hover\:text-opacity-100 { --bs-text-opacity: 1; } .group:hover .group-hover\:bg-body { --bs-bg-opacity: 1; background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-body-secondary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-body-tertiary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-black { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-white { --bs-bg-opacity: 1; background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-transparent { --bs-bg-opacity: 1; background-color: transparent !important; } .group:hover .group-hover\:bg-primary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; } .group:hover .group-hover\:bg-primary-emphasis { background-color: var(--bs-primary-text-emphasis) !important; } .group:hover .group-hover\:bg-secondary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-secondary-subtle { background-color: var(--bs-secondary-bg-subtle) !important; } .group:hover .group-hover\:bg-secondary-emphasis { background-color: var(--bs-secondary-text-emphasis) !important; } .group:hover .group-hover\:bg-success { --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-success-subtle { background-color: var(--bs-success-bg-subtle) !important; } .group:hover .group-hover\:bg-success-emphasis { background-color: var(--bs-success-text-emphasis) !important; } .group:hover .group-hover\:bg-danger { --bs-bg-opacity: 1; background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-danger-subtle { background-color: var(--bs-danger-bg-subtle) !important; } .group:hover .group-hover\:bg-danger-emphasis { background-color: var(--bs-danger-text-emphasis) !important; } .group:hover .group-hover\:bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-warning-subtle { background-color: var(--bs-warning-bg-subtle) !important; } .group:hover .group-hover\:bg-warning-emphasis { background-color: var(--bs-warning-text-emphasis) !important; } .group:hover .group-hover\:bg-info { --bs-bg-opacity: 1; background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-info-subtle { background-color: var(--bs-info-bg-subtle) !important; } .group:hover .group-hover\:bg-info-emphasis { background-color: var(--bs-info-text-emphasis) !important; } .group:hover .group-hover\:bg-light { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-light-subtle { background-color: var(--bs-light-bg-subtle) !important; } .group:hover .group-hover\:bg-light-emphasis { background-color: var(--bs-light-text-emphasis) !important; } .group:hover .group-hover\:bg-dark { --bs-bg-opacity: 1; background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; } .group:hover .group-hover\:bg-dark-subtle { background-color: var(--bs-dark-bg-subtle) !important; } .group:hover .group-hover\:bg-dark-emphasis { background-color: var(--bs-dark-text-emphasis) !important; } .group:hover .group-hover\:bg-opacity-5 { --bs-bg-opacity: 0.05; } .group:hover .group-hover\:bg-opacity-10 { --bs-bg-opacity: 0.1; } .group:hover .group-hover\:bg-opacity-20 { --bs-bg-opacity: 0.2; } .group:hover .group-hover\:bg-opacity-30 { --bs-bg-opacity: 0.3; } .group:hover .group-hover\:bg-opacity-40 { --bs-bg-opacity: 0.4; } .group:hover .group-hover\:bg-opacity-50 { --bs-bg-opacity: 0.5; } .group:hover .group-hover\:bg-opacity-60 { --bs-bg-opacity: 0.6; } .group:hover .group-hover\:bg-opacity-70 { --bs-bg-opacity: 0.7; } .group:hover .group-hover\:bg-opacity-80 { --bs-bg-opacity: 0.8; } .group:hover .group-hover\:bg-opacity-90 { --bs-bg-opacity: 0.9; } .group:hover .group-hover\:bg-opacity-100 { --bs-bg-opacity: 1; } .group:hover .group-hover\:border-primary { --bs-border-opacity: 1; border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-primary-subtle { border-color: var(--bs-primary-border-subtle) !important; } .group:hover .group-hover\:border-primary-emphasis { border-color: var(--bs-primary-text-emphasis) !important; } .group:hover .group-hover\:border-secondary { --bs-border-opacity: 1; border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-secondary-subtle { border-color: var(--bs-secondary-border-subtle) !important; } .group:hover .group-hover\:border-secondary-emphasis { border-color: var(--bs-secondary-text-emphasis) !important; } .group:hover .group-hover\:border-success { --bs-border-opacity: 1; border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-success-subtle { border-color: var(--bs-success-border-subtle) !important; } .group:hover .group-hover\:border-success-emphasis { border-color: var(--bs-success-text-emphasis) !important; } .group:hover .group-hover\:border-danger { --bs-border-opacity: 1; border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-danger-subtle { border-color: var(--bs-danger-border-subtle) !important; } .group:hover .group-hover\:border-danger-emphasis { border-color: var(--bs-danger-text-emphasis) !important; } .group:hover .group-hover\:border-warning { --bs-border-opacity: 1; border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; } .group:hover .group-hover\:border-warning-emphasis { border-color: var(--bs-warning-text-emphasis) !important; } .group:hover .group-hover\:border-info { --bs-border-opacity: 1; border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-info-subtle { border-color: var(--bs-info-border-subtle) !important; } .group:hover .group-hover\:border-info-emphasis { border-color: var(--bs-info-text-emphasis) !important; } .group:hover .group-hover\:border-light { --bs-border-opacity: 1; border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-light-subtle { border-color: var(--bs-light-border-subtle) !important; } .group:hover .group-hover\:border-light-emphasis { border-color: var(--bs-light-text-emphasis) !important; } .group:hover .group-hover\:border-dark { --bs-border-opacity: 1; border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-dark-subtle { border-color: var(--bs-dark-border-subtle) !important; } .group:hover .group-hover\:border-dark-emphasis { border-color: var(--bs-dark-text-emphasis) !important; } .group:hover .group-hover\:border-black { --bs-border-opacity: 1; border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-white { --bs-border-opacity: 1; border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } .group:hover .group-hover\:border-opacity-5 { --bs-border-opacity: 0.05; } .group:hover .group-hover\:border-opacity-10 { --bs-border-opacity: 0.1; } .group:hover .group-hover\:border-opacity-20 { --bs-border-opacity: 0.2; } .group:hover .group-hover\:border-opacity-30 { --bs-border-opacity: 0.3; } .group:hover .group-hover\:border-opacity-40 { --bs-border-opacity: 0.4; } .group:hover .group-hover\:border-opacity-50 { --bs-border-opacity: 0.5; } .group:hover .group-hover\:border-opacity-60 { --bs-border-opacity: 0.6; } .group:hover .group-hover\:border-opacity-70 { --bs-border-opacity: 0.7; } .group:hover .group-hover\:border-opacity-80 { --bs-border-opacity: 0.8; } .group:hover .group-hover\:border-opacity-90 { --bs-border-opacity: 0.9; } .group:hover .group-hover\:border-opacity-100 { --bs-border-opacity: 1; } .group:hover .group-hover\:shadow-none { box-shadow: none !important; } .group:hover .group-hover\:shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; } .group:hover .group-hover\:shadow { box-shadow: var(--bs-box-shadow) !important; } .group:hover .group-hover\:shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; } /* Horizontal Grid */ .horizontal-grid { display: flex; flex-direction: column; gap: 0.125rem; } .horizontal-grid__item { height: 1rem; position: relative; z-index: 1; } .horizontal-grid__item::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; background-color: var(--bs-dark); } .horizontal-grid__item:nth-child(1)::after { inset-block-start: calc(1rem - 1px); } .horizontal-grid__item:nth-child(2)::after { inset-block-start: calc(1rem - 2px); } .horizontal-grid__item:nth-child(3)::after { inset-block-start: calc(1rem - 3px); } .horizontal-grid__item:nth-child(4)::after { inset-block-start: calc(1rem - 4px); } .horizontal-grid__item:nth-child(5)::after { inset-block-start: calc(1rem - 6px); } .horizontal-grid__item:nth-child(6)::after { inset-block-start: calc(1rem - 8px); } .horizontal-grid__item:nth-child(7)::after { inset-block-start: calc(1rem - 10px); } .horizontal-grid__item:nth-child(8)::after { inset-block-start: calc(1rem - 11px); } .horizontal-grid__item:nth-child(9)::after { inset-block-start: calc(1rem - 12px); } .horizontal-grid__item:nth-child(10)::after { inset-block-start: calc(1rem - 13px); } .horizontal-grid__item:nth-child(11)::after { inset-block-start: calc(1rem - 14px); } .horizontal-grid__item:nth-child(12)::after { inset-block-start: calc(1rem - 15px); } .horizontal-grid__item:nth-child(13)::after { inset-block-start: calc(1rem - 16px); } /* Image Reveal */ @media (min-width: 1200px) { .gsap-image-reveal { visibility: hidden; position: relative; overflow: hidden; } .gsap-image-reveal img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; transform-origin: left; } } /* Line Clamp */ .line-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp--1 { -webkit-line-clamp: 1; } .line-clamp--2 { -webkit-line-clamp: 2; } .line-clamp--3 { -webkit-line-clamp: 3; } .line-clamp--4 { -webkit-line-clamp: 4; } .line-clamp--5 { -webkit-line-clamp: 5; } /* List */ .list { --direction: column; display: flex; flex-direction: var(--direction); margin: 0; padding: 0; list-style: none; } .list-row { --direction: row; } @media (min-width: 0) { .list-xs-row { --direction: row; } } @media (min-width: 100px) { .list-ll-row { --direction: row; } } @media (min-width: 576px) { .list-sm-row { --direction: row; } } @media (min-width: 768px) { .list-md-row { --direction: row; } } @media (min-width: 992px) { .list-lg-row { --direction: row; } } @media (min-width: 1200px) { .list-xl-row { --direction: row; } } @media (min-width: 1400px) { .list-xxl-row { --direction: row; } } .list-column { --direction: column; } @media (min-width: 0) { .list-xs-column { --direction: column; } } @media (min-width: 100px) { .list-ll-column { --direction: column; } } @media (min-width: 576px) { .list-sm-column { --direction: column; } } @media (min-width: 768px) { .list-md-column { --direction: column; } } @media (min-width: 992px) { .list-lg-column { --direction: column; } } @media (min-width: 1200px) { .list-xl-column { --direction: column; } } @media (min-width: 1400px) { .list-xxl-column { --direction: column; } } .list-disc { list-style: disc; padding-inline-start: 1rem; } .list-dot { --dot-clr: var(--bs-primary); --dot-size: 0.25rem; } .list-dot--secondary { --dot-clr: var(--bs-secondary); } .list-dot--body-tertiary { --dot-clr: var(--bs-tertiary-bg); } .list-dot--success { --dot-clr: var(--bs-success); } .list-dot--danger { --dot-clr: var(--bs-danger); } .list-dot--warning { --dot-clr: var(--bs-warning); } .list-dot--info { --dot-clr: var(--bs-info); } .list-dot--light { --dot-clr: var(--bs-light); } .list-dot--dark { --dot-clr: var(--bs-dark); } .list-dot--primary-subtle { --dot-clr: var(--bs-primary-bg-subtle); } .list-dot--secondary-subtle { --dot-clr: var(--bs-secondary-bg-subtle); } .list-dot--success-subtle { --dot-clr: var(--bs-success-bg-subtle); } .list-dot--danger-subtle { --dot-clr: var(--bs-danger-bg-subtle); } .list-dot--warning-subtle { --dot-clr: var(--bs-warning-bg-subtle); } .list-dot--info-subtle { --dot-clr: var(--bs-info-bg-subtle); } .list-dot--light-subtle { --dot-clr: var(--bs-light-bg-subtle); } .list-dot--dark-subtle { --dot-clr: var(--bs-dark-bg-subtle); } .list-dot--primary-emphasis { --dot-clr: var(--bs-primary-text-emphasis); } .list-dot--secondary-emphasis { --dot-clr: var(--bs-secondary-text-emphasis); } .list-dot--success-emphasis { --dot-clr: var(--bs-success-text-emphasis); } .list-dot--danger-emphasis { --dot-clr: var(--bs-danger-text-emphasis); } .list-dot--warning-emphasis { --dot-clr: var(--bs-warning-text-emphasis); } .list-dot--info-emphasis { --dot-clr: var(--bs-info-text-emphasis); } .list-dot--light-emphasis { --dot-clr: var(--bs-light-text-emphasis); } .list-dot--dark-emphasis { --dot-clr: var(--bs-dark-text-emphasis); } .list-dot>li+li { padding-inline-start: var(--dot-size); margin-inline-start: var(--dot-size); position: relative; isolation: isolate; } .list-dot>li+li::before { content: ""; width: calc(var(--dot-size) / 2); height: calc(var(--dot-size) / 2); border-radius: 50%; position: absolute; inset-block-start: 50%; inset-inline-start: 0; transform: translate(-50%, -50%); background-color: var(--dot-clr); } .list-dot--sm { --dot-size: 0.5rem; } .list-dot--md { --dot-size: 0.75rem; } .list-dot--lg { --dot-size: 1rem; } .list-dot--xl { --dot-size: 1.25rem; } .list-dot--xxl { --dot-size: 1.5rem; } .list-separate { --separate-clr: var(--bs-primary); --separate-space: 0.5rem; } .list-separate--secondary { --separate-clr: var(--bs-secondary); } .list-separate--body-tertiary { --separate-clr: var(--bs-tertiary-bg); } .list-separate--success { --separate-clr: var(--bs-success); } .list-separate--danger { --separate-clr: var(--bs-danger); } .list-separate--warning { --separate-clr: var(--bs-warning); } .list-separate--info { --separate-clr: var(--bs-info); } .list-separate--light { --separate-clr: var(--bs-light); } .list-separate--dark { --separate-clr: var(--bs-dark); } .list-separate--primary-subtle { --separate-clr: var(--bs-primary-bg-subtle); } .list-separate--secondary-subtle { --separate-clr: var(--bs-secondary-bg-subtle); } .list-separate--success-subtle { --separate-clr: var(--bs-success-bg-subtle); } .list-separate--danger-subtle { --separate-clr: var(--bs-danger-bg-subtle); } .list-separate--warning-subtle { --separate-clr: var(--bs-warning-bg-subtle); } .list-separate--info-subtle { --separate-clr: var(--bs-info-bg-subtle); } .list-separate--light-subtle { --separate-clr: var(--bs-light-bg-subtle); } .list-separate--dark-subtle { --separate-clr: var(--bs-dark-bg-subtle); } .list-separate--primary-emphasis { --separate-clr: var(--bs-primary-text-emphasis); } .list-separate--secondary-emphasis { --separate-clr: var(--bs-secondary-text-emphasis); } .list-separate--success-emphasis { --separate-clr: var(--bs-success-text-emphasis); } .list-separate--danger-emphasis { --separate-clr: var(--bs-danger-text-emphasis); } .list-separate--warning-emphasis { --separate-clr: var(--bs-warning-text-emphasis); } .list-separate--info-emphasis { --separate-clr: var(--bs-info-text-emphasis); } .list-separate--light-emphasis { --separate-clr: var(--bs-light-text-emphasis); } .list-separate--dark-emphasis { --separate-clr: var(--bs-dark-text-emphasis); } .list-separate>li+li { padding-inline-start: var(--separate-space); margin-inline-start: var(--separate-space); position: relative; isolation: isolate; } .list-separate>li+li::before { content: ""; width: 1px; height: 70%; position: absolute; inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%); background-color: var(--separate-clr); } .list-separate--sm { --separate-space: 0.75rem; } .list-separate--md { --separate-space: 1rem; } .list-separate--lg { --separate-space: 1.25rem; } .list-separate--xl { --separate-space: 1.5rem; } .list-separate--xxl { --separate-space: 1.75rem; } .list-flush>li+li { border-top: 1px solid var(--bs-border-color); } /* Logo */ .logo { --logo-height: 3.75rem; height: var(--logo-height); } .logo__img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .logo__img--dark { display: none; } [data-bs-theme=dark] .logo__img--dark { display: inline-block; } [data-bs-theme=dark] .logo__img--light { display: none; } /* Modal */ @media (min-width: 576px) { .modal-sm { --bs-modal-width: 350px; } } /* Navigation */ @media (min-width: 992px) { .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } .navigation-0.has-sub-menu:hover:hover .navigation-0__menu { visibility: visible; opacity: 1; pointer-events: unset; top: calc(100% - 0.25rem); } } @media (min-width: 992px) { .navigation-0--column-6 .navigation-0__menu-list { width: calc(16.6% - 0.8125rem); } } .navigation-0__menu { display: none; list-style: none; padding: 0.25rem 0; margin: 0; border-radius: 0.25rem; } @media (min-width: 992px) { .navigation-0__menu { --_spaceer: 1rem; position: absolute; inset-inline: 0; padding: 1.25rem; display: flex; flex-wrap: wrap; gap: var(--_spaceer); max-height: 23.75rem; overflow-y: auto; border-radius: 0 0 0.5rem 0.5rem; visibility: hidden; opacity: 0; pointer-events: none; z-index: 99; transition: all 0.3s ease; scrollbar-color: transparent transparent; scrollbar-width: none; } .navigation-0__menu::-webkit-scrollbar { width: 0; height: 0; } .navigation-0__menu::-webkit-scrollbar-track { background: transparent; } .navigation-0__menu::-webkit-scrollbar-thumb { background: transparent; } } @media (min-width: 1200px) { .navigation-0__menu { max-height: 40.25rem; } } @media (min-width: 1400px) { .navigation-0__menu { max-height: 45.25rem; } } @media (min-width: 992px) { .navigation-0__menu-list { width: calc(20% - 0.8125rem); } } .navigation-0__menu-link { display: block; padding: 0.25rem 0.75rem; } @media (min-width: 992px) { .navigation-0__menu-link { padding: 0.5rem; border-radius: 0.25rem; } } @media (min-width: 1200px) { .navigation-0__menu-link { padding: 0.75rem; } } .navigation-0__menu-img { display: none; } @media (min-width: 992px) { .navigation-0__menu-img { display: block; aspect-ratio: 4/3; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.25rem; } } .navigation-0__menu-title { display: block; font-size: 0.875rem; } @media (min-width: 992px) { .navigation-0__menu-title { margin-top: 0.5rem; text-align: center; } } /* Navigation */ @media (min-width: 992px) { .navigation-1 { position: relative; isolation: isolate; } } @media (min-width: 992px) { .navigation-1.has-sub-menu:hover .navigation-1__menu { visibility: visible; opacity: 1; pointer-events: unset; top: 100%; } } .navigation-1__menu { display: none; list-style: none; padding: 0.25rem 0; margin: 0; border-radius: 0.25rem; } @media (min-width: 992px) { .navigation-1__menu { display: block; padding: 0.25rem; position: absolute; top: calc(100% + 1rem); width: 13.125rem; visibility: hidden; opacity: 0; pointer-events: none; z-index: 99; transition: all 0.3s ease; } } .navigation-1__menu-link { display: block; padding: 0.25rem 0.75rem; font-size: 0.875rem; } @media (min-width: 992px) { .navigation-1__menu-list.has-sub-2nd { position: relative; } .navigation-1__menu-list.has-sub-2nd:hover .navigation-1__sub-menu { visibility: visible; opacity: 1; pointer-events: unset; left: 100%; } } .navigation-1__sub-menu { display: none; list-style: none; padding: 0.25rem 0 0.25rem 1rem; margin: 0; border-radius: 0.25rem; } @media (min-width: 992px) { .navigation-1__sub-menu { display: block; padding: 0.25rem; position: absolute; top: 0; left: 90%; width: 11.25rem; border-radius: 0.25rem; visibility: hidden; opacity: 0; pointer-events: none; z-index: 99; transition: all 0.3s ease; } } .navigation-1__sub-menu-link { display: block; padding: 0.25rem 0.75rem; font-size: 0.875rem; } @media (min-width: 992px) { .navigation-1__sub-menu-link { border-radius: 0.25rem; } } /* Offcanvas */ .offcanvas-body { scrollbar-color: transparent transparent; scrollbar-width: thin; } .offcanvas-body::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } .offcanvas-body::-webkit-scrollbar-track { background: transparent; } .offcanvas-body::-webkit-scrollbar-thumb { background: transparent; } .offcanvas-body:hover { scrollbar-color: var(--bs-bg-dark-subtle) transparent; } .offcanvas-body:hover::-webkit-scrollbar-thumb { background: var(--bs-bg-dark-subtle); } /* Orbot Animation */ .orbit { display: inline-block; position: absolute; border-radius: 50%; inset: 1rem; } .orbit__planet { display: inline-block; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; background-color: var(--bs-primary); border: 2px solid var(--bs-primary-bg-subtle); border-radius: 50%; transform: translate(-50%, -50%); } /* Pagination */ .pagination { --bs-pagination-padding-y: 0.25rem; --bs-pagination-focus-box-shadow: 0; margin: 0; } .pagination-pill { --bs-pagination-padding-x: 0; --bs-pagination-padding-y: 0; --bs-pagination-border-radius: 50%; line-height: 1; } .pagination-pill .page-link { display: grid; place-content: center; width: 2.625rem; height: 2.625rem; } .pagination-circle { --bs-pagination-padding-x: 0; --bs-pagination-padding-y: 0; --bs-pagination-border-radius: 50%; gap: 0.5rem; line-height: 1; } .pagination-circle .page-link { display: grid; place-content: center; width: 2.625rem; height: 2.625rem; border-radius: var(--bs-pagination-border-radius); } .pagination-transparent { --bs-pagination-color: var(--bs-body-color); --bs-pagination-border-radius: 0; --bs-pagination-border-color: transparent; --bs-pagination-bg: transparent; --bs-pagination-hover-color: rgba(var(--bs-primary-rgb), 1); --bs-pagination-hover-bg: transparent; --bs-pagination-hover-border-color: transparent; --bs-pagination-active-color: var(--bs-body-color); --bs-pagination-active-bg: var(--bs-body-bg); --bs-pagination-active-border-color: var(--bs-border-color); gap: 0.5rem; line-height: 1; } .pagination-transparent .active .page-link { border-radius: 0.25rem; } .dt-paging .pagination { --bs-pagination-padding-y: 0.5rem; --bs-pagination-color: var(--bs-body-color); --bs-pagination-border-radius: 0; --bs-pagination-border-color: transparent; --bs-pagination-bg: transparent; --bs-pagination-hover-color: rgba(var(--bs-primary-rgb), 1); --bs-pagination-hover-bg: transparent; --bs-pagination-hover-border-color: transparent; --bs-pagination-active-color: var(--bs-body-color); --bs-pagination-active-bg: var(--bs-body-bg); --bs-pagination-active-border-color: var(--bs-border-color); --bs-pagination-disabled-color: var(--bs-secondary-color); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent; margin: 0; gap: 0.5rem; line-height: 1; } .dt-paging .pagination .active .page-link { border-radius: 0.25rem; z-index: 0; } .dt-paging .pagination .page-link { font-size: 0.875rem; } /* Portfolio Card */ .portfolio-card:hover .portfolio-card__img { transform: scale(1.1) rotate(3deg); } .portfolio-card:hover .portfolio-card__content { opacity: 1; visibility: visible; pointer-events: unset; } .portfolio-card__content { opacity: 0; visibility: hidden; pointer-events: none; } /* Post Image Size */ .post-img-size { width: 6.25rem; height: 8.75rem; } @media (min-width: 576px) { .post-img-size { width: 10.9375rem; height: 10.9375rem; } } /* Preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-saas); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(var(--bs-light-rgb), 1); z-index: 9999; } .preloader__content { width: 100%; text-align: center; } .preloader__img { animation: imageBeat 1.5s infinite; } /* Price Card 1 */ .price-card-1 { border: 1px solid rgba(var(--bs-white-rgb), 0.1); background: rgba(var(--bs-white-rgb), 0.05); box-shadow: 0px 0px 18px 0px rgba(var(--bs-dark-rgb), 0.1); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); } /* Price Card 2 */ .price-card-2__text { color: var(--bs-primary-bg-subtle); } [data-bs-theme=dark] .price-card-2__text { color: var(--bs-primary-text-emphasis); } /* Price Card 3 */ .price-card-3 { background-color: var(--bs-primary-text-emphasis); } [data-bs-theme=dark] .price-card-3 { background-color: var(--bs-primary-bg-subtle); } /* Price Card 4 */ @media (min-width: 992px) { .price-card-4:first-child { position: relative; transform: translateX(1.25rem); } } @media (min-width: 992px) { .price-card-4:nth-child(2) { z-index: 1; } } @media (min-width: 992px) { .price-card-4:last-child { position: relative; transform: translateX(-1.25rem); } } /* Progress */ .progress { --bs-progress-border-radius: var(--bs-border-radius-xl); } .progress-xsm { --bs-progress-height: 0.25rem; } .progress-sm { --bs-progress-height: 0.5rem; } .progress-md { --bs-progress-height: 0.75rem; } .progress-stacked { --bs-progress-border-radius: var(--bs-border-radius-xl); } .progress-stacked .progress-xsm { --bs-progress-height: 0.25rem; } .progress-stacked .progress-sm { --bs-progress-height: 0.5rem; } .progress-stacked .progress-md { --bs-progress-height: 0.75rem; } /* Pulser */ .pulser { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 15.625rem; height: 15.625rem; display: grid; place-content: center; border-radius: 50%; background: rgba(13, 14, 16, 0.05); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } .pulser__content { position: relative; isolation: isolate; display: grid; place-content: center; width: 6.25rem; height: 6.25rem; background-image: linear-gradient(90deg, #885bfd 0%, #6328ff 68.76%); border-radius: 50%; } .pulser__content::before { content: ""; position: absolute; inset: 0; animation: multiplePulse 2s linear infinite; animation-delay: 0.75s; border: 1px solid var(--bs-primary); border-radius: 50%; z-index: -1; } .pulser__content::after { content: ""; position: absolute; inset: 0; animation: multiplePulse 2s linear infinite; animation-delay: 1.5s; border: 1px solid var(--bs-primary); border-radius: 50%; z-index: -1; } /* Scroller X */ .scroller-x { overflow: hidden; } .scroller-x[data-direction=right] { --_animation-direction: reverse; } .scroller-x[data-direction=left] { --_animation-direction: forwards; } .scroller-x[data-speed=fast] { --_animation-duration: 30s; } .scroller-x[data-speed=slow] { --_animation-duration: 120s; } .scroller-x__list { width: -moz-max-content; width: max-content; flex-wrap: nowrap; animation: scroll var(--_animation-duration, 60s) var(--_animation-direction, forwards) linear infinite; } .scroller-x__list:hover { animation-play-state: paused; } .scroller-x__list>li { flex-shrink: 0; } /* Scroller Y */ .scroller-y { overflow: hidden; } .scroller-y[data-direction=bottom] { --_animation-direction: reverse; } .scroller-y[data-direction=top] { --_animation-direction: forwards; } .scroller-y[data-speed=fast] { --_animation-duration: 30s; } .scroller-y[data-speed=slow] { --_animation-duration: 120s; } .scroller-y__list { height: -moz-max-content; height: max-content; flex-wrap: nowrap; animation: scrollY var(--_animation-duration, 60s) var(--_animation-direction, forwards) linear infinite; } .scroller-y__list:hover { animation-play-state: paused; } .scroller-y__list>li { flex-shrink: 0; } /* Switcher */ .switcher { --_switch-width: 24px; --_switch-height: 14px; --_switch-circle: 10px; --_switch-space: 4px; --_circle-color: rgba(var(--bs-body-bg-rgb), 1); --_inactive-color: rgba(var(--bs-secondary-rgb), 1); --_active-color: rgba(var(--bs-primary-rgb), 1); display: inline-flex; align-items: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .switcher--md { --_switch-width: 26px; --_switch-height: 16px; --_switch-circle: 10px; --_switch-space: 6px; } .switcher--lg { --_switch-width: 32px; --_switch-height: 20px; --_switch-circle: 12px; --_switch-space: 8px; } .switcher--xl { --_switch-width: 38px; --_switch-height: 24px; --_switch-circle: 14px; --_switch-space: 10px; } .switcher-control-light { --_circle-color: rgba(var(--bs-body-color-rgb), 0.5); --_inactive-color: rgba(var(--bs-body-bg-rgb), 1); } .switcher-control-dark { --_circle-color: rgba(var(--bs-body-bg-rgb), 1); --_inactive-color: var(--bs-dark-bg-subtle); } .switcher--primary-subtle { --_active-color: var(--bs-primary-bg-subtle); } .switcher--primary-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-primary-text-emphasis); } .switcher--secondary { --_active-color: rgba(var(--bs-secondary-rgb), 1); } .switcher--secondary .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--secondary-subtle { --_active-color: var(--bs-secondary-bg-subtle); } .switcher--secondary-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-secondary-text-emphasis); } .switcher--success { --_active-color: rgba(var(--bs-success-rgb), 1); } .switcher--success .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--success-subtle { --_active-color: var(--bs-success-bg-subtle); } .switcher--success-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-success-text-emphasis); } .switcher--danger { --_active-color: rgba(var(--bs-danger-rgb), 1); } .switcher--danger .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--danger-subtle { --_active-color: var(--bs-danger-bg-subtle); } .switcher--danger-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-danger-text-emphasis); } .switcher--warning { --_active-color: rgba(var(--bs-warning-rgb), 1); } .switcher--warning .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--warning-subtle { --_active-color: var(--bs-warning-bg-subtle); } .switcher--warning-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-warning-text-emphasis); } .switcher--info { --_active-color: rgba(var(--bs-info-rgb), 1); } .switcher--info .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--info-subtle { --_active-color: var(--bs-info-bg-subtle); } .switcher--info-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-info-text-emphasis); } .switcher--dark { --_active-color: rgba(var(--bs-dark-rgb), 1); } .switcher--dark .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-light-rgb), 1); } .switcher--dark-subtle { --_active-color: var(--bs-dark-bg-subtle); } .switcher--dark-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-dark-text-emphasis); } .switcher--light { --_active-color: rgba(var(--bs-light-rgb), 1); } .switcher--light .switcher__input:checked~.switcher__control::after { --_circle-color: rgba(var(--bs-dark-rgb), 1); } .switcher--light-subtle { --_active-color: var(--bs-light-bg-subtle); } .switcher--light-subtle .switcher__input:checked~.switcher__control::after { --_circle-color: var(--bs-light-text-emphasis); } .switcher__input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .switcher__input:checked~.switcher__control { background-color: var(--_active-color); } .switcher__input:checked~.switcher__control::after { left: calc(var(--_switch-circle) + var(--_switch-space) / 2); } .switcher__control { position: relative; width: var(--_switch-width); height: var(--_switch-height); border-radius: calc(var(--_switch-height) / 2); background-color: var(--_inactive-color); transition: background-color 0.15s ease-in; } .switcher__control::after { content: ""; position: absolute; left: calc(var(--_switch-space) / 2); top: calc(var(--_switch-space) / 2); width: var(--_switch-circle); height: var(--_switch-circle); border-radius: calc(var(--_switch-circle) / 2); background: var(--_circle-color); transition: left 0.15s ease-in; } .switcher__text { display: inline-block; } /* Tab */ .tab { overflow: hidden; } .tab__links { padding-inline: 0.5rem; } .tab__links::after { transition: all 0.3s ease; } .tab__links:hover::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background-color: var(--bs-primary); } .tab__links.active { border: none; color: var(--bs-primary); } .tab__links.active::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background-color: var(--bs-primary); } .tab__content { display: none; } .tab__content.active { display: block; } /* Tab 1 */ .tab-1 { --bs-nav-pills-border-radius: 0.25rem; --bs-nav-pills-link-active-color: var(--bs-primary-text-emphasis); --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle); display: inline-flex; } .tab-1 .nav-link { color: var(--bs-nav-pills-link-active-color); } .tab-1__text-hilight { background: linear-gradient(270deg, #4d89f9 1.21%, #704ee7 21.78%, #e8428c 71.65%, #ed6d4b 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Tab 2 */ .tab-2 { --bs-nav-pills-border-radius: 0.25rem; --bs-nav-pills-link-active-color: var(--bs-primary-bg-subtle); --bs-nav-pills-link-active-bg: var(--bs-primary-text-emphasis); display: inline-flex; } .tab-2 .nav-link { color: var(--bs-dark-text-emphasis); background-color: var(--bs-light-bg-subtle); } .tab-2__text-hilight { background: linear-gradient(270deg, #4d89f9 1.21%, #704ee7 21.78%, #e8428c 71.65%, #ed6d4b 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Tab 3 */ .tab-3 { --bs-nav-pills-border-radius: 0.25rem; --bs-nav-pills-link-active-color: var(--bs-light); --bs-nav-pills-link-active-bg: var(--bs-primary); display: inline-flex; } .tab-3 .nav-link { color: var(--bs-dark-text-emphasis); background-color: var(--bs-light-bg-subtle); } .tab-3__text-hilight { background: linear-gradient(270deg, #4d89f9 1.21%, #704ee7 21.78%, #e8428c 71.65%, #ed6d4b 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-bs-theme=dark][data-theme=demo] .tab-3 .nav-link.active { color: var(--bs-dark) !important; } /* Tab 4 */ .tab-4 { --bs-nav-link-padding-x: 1.5rem; --bs-nav-link-padding-y: 1.5rem; --bs-nav-link-color: var(--bs-primary-text-emphasis); --bs-nav-pills-border-radius: 0.75rem; --bs-nav-pills-link-active-color: var(--bs-light); --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: transparent transparent; scrollbar-width: none; } .tab-4::-webkit-scrollbar { width: 0; height: 0; } .tab-4::-webkit-scrollbar-track { background: transparent; } .tab-4::-webkit-scrollbar-thumb { background: transparent; } .tab-4 .nav-item { scroll-snap-align: start; } .tab-4 .nav-link { max-width: 18.75rem; height: 100%; color: var(--bs-dark-text-emphasis); background-color: var(--bs-light-bg-subtle); box-shadow: 0px 4px 8px 0px rgba(145, 158, 171, 0.16); } .tab-4 .nav-link.active { box-shadow: none; } .tab-4__text-hilight { background: linear-gradient(270deg, #4d89f9 1.21%, #704ee7 21.78%, #e8428c 71.65%, #ed6d4b 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Tab 5 */ .tab-5 { --bs-nav-pills-border-radius: 0.25rem; --bs-nav-pills-link-active-color: var(--bs-light); --bs-nav-pills-link-active-bg: var(--bs-primary); display: inline-flex; } .tab-5 .nav-link { color: var(--bs-nav-pills-link-active-color); } .tab-5__text-hilight { background: linear-gradient(270deg, #4d89f9 1.21%, #704ee7 21.78%, #e8428c 71.65%, #ed6d4b 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Tab Underline */ .tab-underline { --bs-btn-active-border-color: var(--bs-border-color); --bs-nav-link-color: var(--bs-body-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-btn-active-color: rgba(var(--bs-primary-rgb), 1); --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1); overflow-x: auto; scrollbar-color: transparent transparent; scrollbar-width: none; } .tab-underline::-webkit-scrollbar { width: 0; height: 0; } .tab-underline::-webkit-scrollbar-track { background: transparent; } .tab-underline::-webkit-scrollbar-thumb { background: transparent; } .tab-underline .btn { --bs-btn-border-radius: 0; border-left: 0; border-right: 0; border-top: 0; white-space: nowrap; color: var(--bs-nav-link-color); } .tab-underline .btn:hover { color: var(--bs-nav-link-hover-color); } .tab-underline .btn.active { color: var(--bs-btn-active-color); } /* Table Style */ .table-modifier { border-collapse: separate; border-spacing: 0 0.5rem; margin-bottom: 0; } .table-modifier> :not(caption)>*>* { padding: 0.5rem 1rem; vertical-align: middle; } .table-modifier tr th { white-space: nowrap; } .table-modifier tr th:first-child { border-start-start-radius: 0.35rem; border-end-start-radius: 0.35rem; } .table-modifier tr th:last-child { border-start-end-radius: 0.35rem; border-end-end-radius: 0.35rem; } .table-modifier tr td { white-space: nowrap; } .table-modifier tr td:first-child { border-start-start-radius: 0.35rem; border-end-start-radius: 0.35rem; } .table-modifier tr td:last-child { border-start-end-radius: 0.35rem; border-end-end-radius: 0.35rem; } .table-modifier.table-bordered thead th { border: 0; } .table-modifier.table-bordered thead th+th { position: relative; } .table-modifier.table-bordered thead th+th::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 65%; background-color: var(--bs-border-color); } .table-modifier.table-bordered tbody td { border: 0; } .table-modifier.table-bordered tbody td+td { position: relative; } .table-modifier.table-bordered tbody td+td::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 65%; background-color: var(--bs-border-color); } .table-modifier.table-bordered-only-last thead th { border: 0; } .table-modifier.table-bordered-only-last thead th:last-child { position: relative; } .table-modifier.table-bordered-only-last thead th:last-child::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 65%; background-color: var(--bs-border-color); } .table-modifier.table-bordered-only-last tbody td { border: 0; } .table-modifier.table-bordered-only-last tbody td:last-child { position: relative; } .table-modifier.table-bordered-only-last tbody td:last-child::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 65%; background-color: var(--bs-border-color); } .table-modifier.table-headless thead th { background-color: transparent !important; } .table-modifier.table-headless.table-bordered thead th+th::before { display: none; } .table-modifier.table-headless.table-bordered-only-last thead th:last-child::before { display: none; } .table-modifier.table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); } .table-modifier.table-primary th { border-bottom: 1px solid var(--bs-primary-border-subtle) !important; border-top: 1px solid var(--bs-primary-border-subtle) !important; } .table-modifier.table-primary th:first-child { border-left: 1px solid var(--bs-primary-border-subtle); } .table-modifier.table-primary th:last-child { border-right: 1px solid var(--bs-primary-border-subtle); } .table-modifier.table-primary th+th::before { --bs-border-color: var(--bs-primary-border-subtle); } .table-modifier.table-primary td { border-bottom: 1px solid var(--bs-primary-border-subtle) !important; border-top: 1px solid var(--bs-primary-border-subtle) !important; } .table-modifier.table-primary td:first-child { border-left: 1px solid var(--bs-primary-border-subtle); } .table-modifier.table-primary td:last-child { border-right: 1px solid var(--bs-primary-border-subtle); } .table-modifier.table-primary td+td::before { --bs-border-color: var(--bs-primary-border-subtle); } .table-modifier .table-primary th { --bs-table-bg: var(--bs-primary-bg-subtle); border-bottom: 1px solid var(--bs-primary-border-subtle) !important; border-top: 1px solid var(--bs-primary-border-subtle) !important; } .table-modifier .table-primary th:first-child { border-left: 1px solid var(--bs-primary-border-subtle); } .table-modifier .table-primary th:last-child { border-right: 1px solid var(--bs-primary-border-subtle); } .table-modifier .table-primary th+th::before { --bs-border-color: var(--bs-primary-border-subtle); } .table-modifier .table-primary td { --bs-table-bg: var(--bs-primary-bg-subtle); border-bottom: 1px solid var(--bs-primary-border-subtle) !important; border-top: 1px solid var(--bs-primary-border-subtle) !important; } .table-modifier .table-primary td:first-child { border-left: 1px solid var(--bs-primary-border-subtle); } .table-modifier .table-primary td:last-child { border-right: 1px solid var(--bs-primary-border-subtle); } .table-modifier .table-primary td+td::before { --bs-border-color: var(--bs-primary-border-subtle); } .table-modifier.table-secondary { --bs-table-bg: var(--bs-secondary-bg-subtle); } .table-modifier.table-secondary th { border-bottom: 1px solid var(--bs-secondary-border-subtle) !important; border-top: 1px solid var(--bs-secondary-border-subtle) !important; } .table-modifier.table-secondary th:first-child { border-left: 1px solid var(--bs-secondary-border-subtle); } .table-modifier.table-secondary th:last-child { border-right: 1px solid var(--bs-secondary-border-subtle); } .table-modifier.table-secondary th+th::before { --bs-border-color: var(--bs-secondary-border-subtle); } .table-modifier.table-secondary td { border-bottom: 1px solid var(--bs-secondary-border-subtle) !important; border-top: 1px solid var(--bs-secondary-border-subtle) !important; } .table-modifier.table-secondary td:first-child { border-left: 1px solid var(--bs-secondary-border-subtle); } .table-modifier.table-secondary td:last-child { border-right: 1px solid var(--bs-secondary-border-subtle); } .table-modifier.table-secondary td+td::before { --bs-border-color: var(--bs-secondary-border-subtle); } .table-modifier .table-secondary th { --bs-table-bg: var(--bs-secondary-bg-subtle); border-bottom: 1px solid var(--bs-secondary-border-subtle) !important; border-top: 1px solid var(--bs-secondary-border-subtle) !important; } .table-modifier .table-secondary th:first-child { border-left: 1px solid var(--bs-secondary-border-subtle); } .table-modifier .table-secondary th:last-child { border-right: 1px solid var(--bs-secondary-border-subtle); } .table-modifier .table-secondary th+th::before { --bs-border-color: var(--bs-secondary-border-subtle); } .table-modifier .table-secondary td { --bs-table-bg: var(--bs-secondary-bg-subtle); border-bottom: 1px solid var(--bs-secondary-border-subtle) !important; border-top: 1px solid var(--bs-secondary-border-subtle) !important; } .table-modifier .table-secondary td:first-child { border-left: 1px solid var(--bs-secondary-border-subtle); } .table-modifier .table-secondary td:last-child { border-right: 1px solid var(--bs-secondary-border-subtle); } .table-modifier .table-secondary td+td::before { --bs-border-color: var(--bs-secondary-border-subtle); } .table-modifier.table-success { --bs-table-bg: var(--bs-success-bg-subtle); } .table-modifier.table-success th { border-bottom: 1px solid var(--bs-success-border-subtle) !important; border-top: 1px solid var(--bs-success-border-subtle) !important; } .table-modifier.table-success th:first-child { border-left: 1px solid var(--bs-success-border-subtle); } .table-modifier.table-success th:last-child { border-right: 1px solid var(--bs-success-border-subtle); } .table-modifier.table-success th+th::before { --bs-border-color: var(--bs-success-border-subtle); } .table-modifier.table-success td { border-bottom: 1px solid var(--bs-success-border-subtle) !important; border-top: 1px solid var(--bs-success-border-subtle) !important; } .table-modifier.table-success td:first-child { border-left: 1px solid var(--bs-success-border-subtle); } .table-modifier.table-success td:last-child { border-right: 1px solid var(--bs-success-border-subtle); } .table-modifier.table-success td+td::before { --bs-border-color: var(--bs-success-border-subtle); } .table-modifier .table-success th { --bs-table-bg: var(--bs-success-bg-subtle); border-bottom: 1px solid var(--bs-success-border-subtle) !important; border-top: 1px solid var(--bs-success-border-subtle) !important; } .table-modifier .table-success th:first-child { border-left: 1px solid var(--bs-success-border-subtle); } .table-modifier .table-success th:last-child { border-right: 1px solid var(--bs-success-border-subtle); } .table-modifier .table-success th+th::before { --bs-border-color: var(--bs-success-border-subtle); } .table-modifier .table-success td { --bs-table-bg: var(--bs-success-bg-subtle); border-bottom: 1px solid var(--bs-success-border-subtle) !important; border-top: 1px solid var(--bs-success-border-subtle) !important; } .table-modifier .table-success td:first-child { border-left: 1px solid var(--bs-success-border-subtle); } .table-modifier .table-success td:last-child { border-right: 1px solid var(--bs-success-border-subtle); } .table-modifier .table-success td+td::before { --bs-border-color: var(--bs-success-border-subtle); } .table-modifier.table-danger { --bs-table-bg: var(--bs-danger-bg-subtle); } .table-modifier.table-danger th { border-bottom: 1px solid var(--bs-danger-border-subtle) !important; border-top: 1px solid var(--bs-danger-border-subtle) !important; } .table-modifier.table-danger th:first-child { border-left: 1px solid var(--bs-danger-border-subtle); } .table-modifier.table-danger th:last-child { border-right: 1px solid var(--bs-danger-border-subtle); } .table-modifier.table-danger th+th::before { --bs-border-color: var(--bs-danger-border-subtle); } .table-modifier.table-danger td { border-bottom: 1px solid var(--bs-danger-border-subtle) !important; border-top: 1px solid var(--bs-danger-border-subtle) !important; } .table-modifier.table-danger td:first-child { border-left: 1px solid var(--bs-danger-border-subtle); } .table-modifier.table-danger td:last-child { border-right: 1px solid var(--bs-danger-border-subtle); } .table-modifier.table-danger td+td::before { --bs-border-color: var(--bs-danger-border-subtle); } .table-modifier .table-danger th { --bs-table-bg: var(--bs-danger-bg-subtle); border-bottom: 1px solid var(--bs-danger-border-subtle) !important; border-top: 1px solid var(--bs-danger-border-subtle) !important; } .table-modifier .table-danger th:first-child { border-left: 1px solid var(--bs-danger-border-subtle); } .table-modifier .table-danger th:last-child { border-right: 1px solid var(--bs-danger-border-subtle); } .table-modifier .table-danger th+th::before { --bs-border-color: var(--bs-danger-border-subtle); } .table-modifier .table-danger td { --bs-table-bg: var(--bs-danger-bg-subtle); border-bottom: 1px solid var(--bs-danger-border-subtle) !important; border-top: 1px solid var(--bs-danger-border-subtle) !important; } .table-modifier .table-danger td:first-child { border-left: 1px solid var(--bs-danger-border-subtle); } .table-modifier .table-danger td:last-child { border-right: 1px solid var(--bs-danger-border-subtle); } .table-modifier .table-danger td+td::before { --bs-border-color: var(--bs-danger-border-subtle); } .table-modifier.table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); } .table-modifier.table-warning th { border-bottom: 1px solid var(--bs-warning-border-subtle) !important; border-top: 1px solid var(--bs-warning-border-subtle) !important; } .table-modifier.table-warning th:first-child { border-left: 1px solid var(--bs-warning-border-subtle); } .table-modifier.table-warning th:last-child { border-right: 1px solid var(--bs-warning-border-subtle); } .table-modifier.table-warning th+th::before { --bs-border-color: var(--bs-warning-border-subtle); } .table-modifier.table-warning td { border-bottom: 1px solid var(--bs-warning-border-subtle) !important; border-top: 1px solid var(--bs-warning-border-subtle) !important; } .table-modifier.table-warning td:first-child { border-left: 1px solid var(--bs-warning-border-subtle); } .table-modifier.table-warning td:last-child { border-right: 1px solid var(--bs-warning-border-subtle); } .table-modifier.table-warning td+td::before { --bs-border-color: var(--bs-warning-border-subtle); } .table-modifier .table-warning th { --bs-table-bg: var(--bs-warning-bg-subtle); border-bottom: 1px solid var(--bs-warning-border-subtle) !important; border-top: 1px solid var(--bs-warning-border-subtle) !important; } .table-modifier .table-warning th:first-child { border-left: 1px solid var(--bs-warning-border-subtle); } .table-modifier .table-warning th:last-child { border-right: 1px solid var(--bs-warning-border-subtle); } .table-modifier .table-warning th+th::before { --bs-border-color: var(--bs-warning-border-subtle); } .table-modifier .table-warning td { --bs-table-bg: var(--bs-warning-bg-subtle); border-bottom: 1px solid var(--bs-warning-border-subtle) !important; border-top: 1px solid var(--bs-warning-border-subtle) !important; } .table-modifier .table-warning td:first-child { border-left: 1px solid var(--bs-warning-border-subtle); } .table-modifier .table-warning td:last-child { border-right: 1px solid var(--bs-warning-border-subtle); } .table-modifier .table-warning td+td::before { --bs-border-color: var(--bs-warning-border-subtle); } .table-modifier.table-info { --bs-table-bg: var(--bs-info-bg-subtle); } .table-modifier.table-info th { border-bottom: 1px solid var(--bs-info-border-subtle) !important; border-top: 1px solid var(--bs-info-border-subtle) !important; } .table-modifier.table-info th:first-child { border-left: 1px solid var(--bs-info-border-subtle); } .table-modifier.table-info th:last-child { border-right: 1px solid var(--bs-info-border-subtle); } .table-modifier.table-info th+th::before { --bs-border-color: var(--bs-info-border-subtle); } .table-modifier.table-info td { border-bottom: 1px solid var(--bs-info-border-subtle) !important; border-top: 1px solid var(--bs-info-border-subtle) !important; } .table-modifier.table-info td:first-child { border-left: 1px solid var(--bs-info-border-subtle); } .table-modifier.table-info td:last-child { border-right: 1px solid var(--bs-info-border-subtle); } .table-modifier.table-info td+td::before { --bs-border-color: var(--bs-info-border-subtle); } .table-modifier .table-info th { --bs-table-bg: var(--bs-info-bg-subtle); border-bottom: 1px solid var(--bs-info-border-subtle) !important; border-top: 1px solid var(--bs-info-border-subtle) !important; } .table-modifier .table-info th:first-child { border-left: 1px solid var(--bs-info-border-subtle); } .table-modifier .table-info th:last-child { border-right: 1px solid var(--bs-info-border-subtle); } .table-modifier .table-info th+th::before { --bs-border-color: var(--bs-info-border-subtle); } .table-modifier .table-info td { --bs-table-bg: var(--bs-info-bg-subtle); border-bottom: 1px solid var(--bs-info-border-subtle) !important; border-top: 1px solid var(--bs-info-border-subtle) !important; } .table-modifier .table-info td:first-child { border-left: 1px solid var(--bs-info-border-subtle); } .table-modifier .table-info td:last-child { border-right: 1px solid var(--bs-info-border-subtle); } .table-modifier .table-info td+td::before { --bs-border-color: var(--bs-info-border-subtle); } .table-modifier.table-dark { --bs-table-bg: var(--bs-dark-bg-subtle); } .table-modifier.table-dark th { border-bottom: 1px solid var(--bs-dark-border-subtle) !important; border-top: 1px solid var(--bs-dark-border-subtle) !important; } .table-modifier.table-dark th:first-child { border-left: 1px solid var(--bs-dark-border-subtle); } .table-modifier.table-dark th:last-child { border-right: 1px solid var(--bs-dark-border-subtle); } .table-modifier.table-dark th+th::before { --bs-border-color: var(--bs-dark-border-subtle); } .table-modifier.table-dark td { border-bottom: 1px solid var(--bs-dark-border-subtle) !important; border-top: 1px solid var(--bs-dark-border-subtle) !important; } .table-modifier.table-dark td:first-child { border-left: 1px solid var(--bs-dark-border-subtle); } .table-modifier.table-dark td:last-child { border-right: 1px solid var(--bs-dark-border-subtle); } .table-modifier.table-dark td+td::before { --bs-border-color: var(--bs-dark-border-subtle); } .table-modifier .table-dark th { --bs-table-bg: var(--bs-dark-bg-subtle); border-bottom: 1px solid var(--bs-dark-border-subtle) !important; border-top: 1px solid var(--bs-dark-border-subtle) !important; } .table-modifier .table-dark th:first-child { border-left: 1px solid var(--bs-dark-border-subtle); } .table-modifier .table-dark th:last-child { border-right: 1px solid var(--bs-dark-border-subtle); } .table-modifier .table-dark th+th::before { --bs-border-color: var(--bs-dark-border-subtle); } .table-modifier .table-dark td { --bs-table-bg: var(--bs-dark-bg-subtle); border-bottom: 1px solid var(--bs-dark-border-subtle) !important; border-top: 1px solid var(--bs-dark-border-subtle) !important; } .table-modifier .table-dark td:first-child { border-left: 1px solid var(--bs-dark-border-subtle); } .table-modifier .table-dark td:last-child { border-right: 1px solid var(--bs-dark-border-subtle); } .table-modifier .table-dark td+td::before { --bs-border-color: var(--bs-dark-border-subtle); } .table-modifier.table-light { --bs-table-bg: var(--bs-light-bg-subtle); } .table-modifier.table-light th { border-bottom: 1px solid var(--bs-light-border-subtle) !important; border-top: 1px solid var(--bs-light-border-subtle) !important; } .table-modifier.table-light th:first-child { border-left: 1px solid var(--bs-light-border-subtle); } .table-modifier.table-light th:last-child { border-right: 1px solid var(--bs-light-border-subtle); } .table-modifier.table-light th+th::before { --bs-border-color: var(--bs-light-border-subtle); } .table-modifier.table-light td { border-bottom: 1px solid var(--bs-light-border-subtle) !important; border-top: 1px solid var(--bs-light-border-subtle) !important; } .table-modifier.table-light td:first-child { border-left: 1px solid var(--bs-light-border-subtle); } .table-modifier.table-light td:last-child { border-right: 1px solid var(--bs-light-border-subtle); } .table-modifier.table-light td+td::before { --bs-border-color: var(--bs-light-border-subtle); } .table-modifier .table-light th { --bs-table-bg: var(--bs-light-bg-subtle); border-bottom: 1px solid var(--bs-light-border-subtle) !important; border-top: 1px solid var(--bs-light-border-subtle) !important; } .table-modifier .table-light th:first-child { border-left: 1px solid var(--bs-light-border-subtle); } .table-modifier .table-light th:last-child { border-right: 1px solid var(--bs-light-border-subtle); } .table-modifier .table-light th+th::before { --bs-border-color: var(--bs-light-border-subtle); } .table-modifier .table-light td { --bs-table-bg: var(--bs-light-bg-subtle); border-bottom: 1px solid var(--bs-light-border-subtle) !important; border-top: 1px solid var(--bs-light-border-subtle) !important; } .table-modifier .table-light td:first-child { border-left: 1px solid var(--bs-light-border-subtle); } .table-modifier .table-light td:last-child { border-right: 1px solid var(--bs-light-border-subtle); } .table-modifier .table-light td+td::before { --bs-border-color: var(--bs-light-border-subtle); } .table-modifier.table-body-secondary { --bs-table-bg: rgba(var(--bs-secondary-bg-rgb), 0.35); } .table-modifier.table-body-secondary th { border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; border-top: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; } .table-modifier.table-body-secondary th:first-child { border-left: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.table-body-secondary th:last-child { border-right: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.table-body-secondary th+th::before { --bs-border-color: rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.table-body-secondary td { border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; border-top: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; } .table-modifier.table-body-secondary td:first-child { border-left: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.table-body-secondary td:last-child { border-right: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.table-body-secondary td+td::before { --bs-border-color: rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary th { --bs-table-bg: rgba(var(--bs-secondary-bg-rgb), 0.35); border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; border-top: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; } .table-modifier .table-body-secondary th:first-child { border-left: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary th:last-child { border-right: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary th+th::before { --bs-border-color: rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary td { --bs-table-bg: rgba(var(--bs-secondary-bg-rgb), 0.35); border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; border-top: 1px solid rgba(var(--bs-dark-rgb), 0.06) !important; } .table-modifier .table-body-secondary td:first-child { border-left: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary td:last-child { border-right: 1px solid rgba(var(--bs-dark-rgb), 0.06); } .table-modifier .table-body-secondary td+td::before { --bs-border-color: rgba(var(--bs-dark-rgb), 0.06); } .table-modifier.dataTable { border-spacing: 0 0.5rem !important; } .table-modifier.dataTable> :not(caption)>*>* { padding-block: 0.5rem !important; padding-inline-start: 1rem !important; background-color: var(--bs-table-bg) !important; } .table-modifier.dataTable> :not(caption)>*>*:hover { outline: 0 !important; outline-offset: 0 !important; } .table-transparent { --bs-table-bg: transparent; } /* Team Member 1 */ .team-member-1:hover .team-member-1__img { transform: scale(1.1) rotate(3deg); } .team-member-1__content { margin-top: -2.5rem; } /* Team Member 2 Slider */ .team-member-2-slider { position: relative; isolation: isolate; overflow: hidden; } .team-member-2-slider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--bs-tertiary-bg) 0%, rgba(241, 245, 249, 0) 21%, rgba(241, 245, 249, 0) 78%, var(--bs-tertiary-bg) 100%); z-index: 1; } /* Testimonial Slider 1 */ .testimonial-slider-1 .swiper-wrapper { transition-timing-function: linear; } /* Testimonial Slider 3 */ .testimonial-slider-3 { -webkit-backdrop-filter: blur(1.5625rem); backdrop-filter: blur(1.5625rem); } /* Testimonial Slider 4 */ .testimonial-slider-4__thumb .swiper-slide-thumb-active .border-light { --bs-border-opacity: 0.5; border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } .testimonial-slider-4__thumb .swiper-slide-thumb-active .bg-dark { --bs-bg-opacity: 0.1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } /* Text Clip */ .text-clip--primary { background: -webkit-linear-gradient(var(--bs-white) 20%, var(--bs-primary) 65%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-clip--primary-alt { background: -webkit-linear-gradient(0deg, var(--bs-white) 0%, var(--bs-primary) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Text Splash */ .text-splash { --text-splash-clr: var(--bs-border-color); } .text-splash--primary { --text-splash-clr: var(--bs-primary); } .text-splash--primary-subtle { --text-splash-clr: var(--bs-primary-bg-subtle); } .text-splash--primary-emphasis { --text-splash-clr: var(--bs-primary-text-emphasis); } .text-splash--secondary { --text-splash-clr: var(--bs-secondary); } .text-splash--secondary-subtle { --text-splash-clr: var(--bs-secondary-bg-subtle); } .text-splash--secondary-emphasis { --text-splash-clr: var(--bs-secondary-text-emphasis); } .text-splash--success { --text-splash-clr: var(--bs-success); } .text-splash--success-subtle { --text-splash-clr: var(--bs-success-bg-subtle); } .text-splash--success-emphasis { --text-splash-clr: var(--bs-success-text-emphasis); } .text-splash--danger { --text-splash-clr: var(--bs-danger); } .text-splash--danger-subtle { --text-splash-clr: var(--bs-danger-bg-subtle); } .text-splash--danger-emphasis { --text-splash-clr: var(--bs-danger-text-emphasis); } .text-splash--warning { --text-splash-clr: var(--bs-warning); } .text-splash--warning-subtle { --text-splash-clr: var(--bs-warning-bg-subtle); } .text-splash--warning-emphasis { --text-splash-clr: var(--bs-warning-text-emphasis); } .text-splash--info { --text-splash-clr: var(--bs-info); } .text-splash--info-subtle { --text-splash-clr: var(--bs-info-bg-subtle); } .text-splash--info-emphasis { --text-splash-clr: var(--bs-info-text-emphasis); } .text-splash--light { --text-splash-clr: var(--bs-light); } .text-splash--light-subtle { --text-splash-clr: var(--bs-light-bg-subtle); } .text-splash--light-emphasis { --text-splash-clr: var(--bs-light-text-emphasis); } .text-splash--dark { --text-splash-clr: var(--bs-dark); } .text-splash--dark-subtle { --text-splash-clr: var(--bs-dark-bg-subtle); } .text-splash--dark-emphasis { --text-splash-clr: var(--bs-dark-text-emphasis); } .text-splash::before { content: ""; position: absolute; top: 50%; right: calc(100% + 1rem); width: 120rem; height: 1px; background-color: var(--text-splash-clr); } .text-splash::after { content: ""; position: absolute; top: 50%; left: calc(100% + 1rem); width: 120rem; height: 1px; background-color: var(--text-splash-clr); } /* Text Stroke */ .text-stroke { -webkit-text-stroke-width: 1px; } .text-stroke--light { color: var(--bs-light); -webkit-text-fill-color: transparent; -webkit-text-stroke-color: var(--bs-light); } .text-stroke--dark { color: var(--bs-dark); -webkit-text-fill-color: transparent; -webkit-text-stroke-color: var(--bs-dark); } /* Text Wing */ .text-wing { display: inline-block; position: relative; isolation: isolate; } .text-wing::before { content: ""; position: absolute; top: 50%; right: calc(100% + 1rem); width: 200%; height: 1px; border-bottom: 1px solid; -o-border-image: linear-gradient(90deg, transparent, rgba(var(--bs-light-rgb), 0.25)) 1; border-image: linear-gradient(90deg, transparent, rgba(var(--bs-light-rgb), 0.25)) 1; } .text-wing::after { content: ""; position: absolute; top: 50%; left: calc(100% + 1rem); width: 200%; height: 1px; border-bottom: 1px solid; -o-border-image: linear-gradient(90deg, rgba(var(--bs-light-rgb), 0.25), transparent) 1; border-image: linear-gradient(90deg, rgba(var(--bs-light-rgb), 0.25), transparent) 1; } /* Timeline 1 */ .timeline-1__item .timeline-1__left { padding-bottom: 1.25rem; } .timeline-1__item .timeline-1__right { padding-bottom: 1.25rem; } @media (min-width: 768px) { .timeline-1__item { display: flex; align-items: center; } } .timeline-1__item+.timeline-1__item .timeline-1__left { padding-top: 1.25rem; } .timeline-1__item+.timeline-1__item .timeline-1__right { padding-top: 1.25rem; } @media (min-width: 768px) { .timeline-1__left { flex-shrink: 0; padding-right: 1.5rem; } } @media (min-width: 768px) { .timeline-1__right { flex-grow: 1; position: relative; z-index: 1; padding-left: 1.5rem; } } @media (min-width: 768px) { .timeline-1__right::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--bs-border-color); } } @media (min-width: 768px) { .timeline-1__right::after { content: ""; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 0.75rem; height: 0.75rem; background-color: var(--bs-light-text-emphasis); border-radius: 50%; } } /* Timeline 2 */ .timeline-2 li { position: relative; isolation: isolate; } .timeline-2 li::before { content: ""; width: 1px; position: absolute; top: 0.5rem; bottom: 0; left: 1.5rem; border-left: 1px dashed var(--bs-border-color); pointer-events: none; opacity: 0.5; } .timeline-2 li:last-child::before { display: none; } /* Tooltip */ .tooltip-modifier { --bs-tooltip-border-radius: 0.25rem; --bs-tooltip-font-size: 0.875rem; --bs-tooltip-opacity: 1; --bs-tooltip-bg: var(--bs-primary-bg-subtle); --bs-tooltip-color: var(--bs-primary-text-emphasis); } /* User Counter Box */ .user-counter-box { background-color: #03063a; box-shadow: 0px -4px 36px 1px rgba(255, 255, 255, 0.04) inset, 0px 0px 8px 2px rgba(255, 255, 255, 0.13) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 21px 44px -40px rgba(0, 0, 0, 0.5), 0px 26px 30px -23px rgba(0, 0, 0, 0.1), 0px 14px 40px 0px rgba(0, 0, 0, 0.05), 0px 4px 9px 0px rgba(0, 0, 0, 0.07); } @media (min-width: 1200px) { .user-counter-box { transform: scale(1.03); } } /* Video Player */ .video-player { width: 100%; height: 21.875rem; } @media (min-width: 1200px) { .video-player { height: 37.5rem; } } @media (min-width: 1200px) { .video-player--half { height: 25rem; } } .video-player:hover .video-player__active { visibility: visible; opacity: 1; } .video-player__active { visibility: hidden; opacity: 0; } /* About Section */ .about-1 { position: relative; isolation: isolate; } .about-1__shape { position: absolute; top: 5%; right: 5%; overflow: unset; z-index: -1; } .about-1__path { animation: animateFill 25s infinite linear alternate; } /* About Section */ .about-2 { background: linear-gradient(184deg, var(--bs-tertiary-bg) 0%, var(--bs-light-bg-subtle) 25.55%); } @media (min-width: 1200px) { .about-2 { position: relative; z-index: 1; } } @media (min-width: 1200px) { .about-2::after { content: ""; position: absolute; inset: 0; background-image: url(../img/shapes/about-2-shape.png); background-size: cover; background-position: center bottom; background-repeat: no-repeat; z-index: -1; } } .about-2__img { position: absolute; left: 50%; bottom: 0; } @media (min-width: 1200px) { .about-2__img { animation: upDown 5s linear infinite; } } @media (min-width: 1200px) { .about-2__separator { position: relative; z-index: 1; } } @media (min-width: 1200px) { .about-2__separator::before { content: ""; position: absolute; top: 5%; bottom: 5%; left: 50%; width: 1px; background-color: var(--bs-border-color); z-index: -1; } } @media (min-width: 1200px) { .about-2__separator::after { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; height: 1px; background-color: var(--bs-border-color); z-index: -1; } } /* About Section */ .about-3 { background-image: url(../img/shapes/banner-grid-shape.png); background-repeat: repeat; } /* Authentication Page */ @media (min-width: 1920px) { .authentication-page--container { max-width: 1800px; } } .authentication-page__left { padding-block: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); position: relative; isolation: isolate; overflow: hidden; border-radius: 1rem; } @media (min-width: 1200px) { .authentication-page__left { display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100vh - 64px); } } @media (min-width: 768px) { .authentication-page__left-content { padding-inline: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } } @media (min-width: 992px) { .authentication-page__left-content { padding-inline: clamp(2.5rem, 4.21vw + 1rem, 5rem); } } @media (min-width: 1200px) { .authentication-page__left-content { padding-inline: clamp(1rem, 1.68vw + 1rem, 2rem); margin-top: auto; } } @media (min-width: 1400px) { .authentication-page__left-content { padding-inline: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } } .authentication-page__right { padding-block: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); } @media (min-width: 1200px) { .authentication-page__right { display: flex; flex-direction: column; justify-content: flex-start; } } @media (min-width: 768px) { .authentication-page__right-content { padding-inline: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } } @media (min-width: 992px) { .authentication-page__right-content { padding-inline: clamp(2.5rem, 4.21vw + 1rem, 5rem); } } @media (min-width: 1200px) { .authentication-page__right-content { padding-inline: clamp(1rem, 1.68vw + 1rem, 2rem); margin-block: auto; } } @media (min-width: 1400px) { .authentication-page__right-content { padding-inline: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } } @media (min-width: 1920px) { .authentication-page__right-content { padding-inline: clamp(2.5rem, 4.21vw + 1rem, 5rem); } } .authentication-page__glass { width: 50%; height: 100%; border-bottom: 1.163px solid rgba(255, 255, 255, 0.2); background: linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0.01%, rgba(127, 158, 225, 0.2) 31.13%, rgba(255, 255, 255, 0.2) 110.67%); background-blend-mode: overlay; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } .authentication-page__glass-container { background: rgba(0, 89, 223, 0.05); box-shadow: -1.163px -1.163px 0.581px 0px rgba(255, 255, 255, 0.3) inset; } .authentication-page-2 { position: relative; isolation: isolate; overflow: hidden; } .authentication-page-2::before { content: ""; width: 18.75rem; height: 18.75rem; position: absolute; top: 0; right: 10%; transform: translateY(-25%); background: rgba(var(--bs-white-rgb), 0.1); border: 1px solid rgba(var(--bs-white-rgb), 0.1); border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; } .authentication-page-2::after { content: ""; position: absolute; top: 5%; right: 20%; width: 5.625rem; height: 5.625rem; border-radius: 50%; background-color: rgba(var(--bs-primary-rgb), 0.1); z-index: -2; } /* Blog Showcase Section */ .blog-showcase-section__container { max-width: 1920px; } .blog-showcase-section__lead-text { display: inline-block; filter: drop-shadow(-40px 40px 80px rgba(145, 158, 171, 0.24)); line-height: 1; } @media (min-width: 768px) { .blog-showcase-section__list li:last-child { position: absolute; transform-origin: right center; right: 0; transform: scale(0.5) translateX(50%); } } @media (min-width: 1200px) { .blog-showcase-section__list li:last-child { transform: scale(1) translate(50%, 25%); transform-origin: center center; } } @media (min-width: 768px) { .blog-showcase-section__img-1 { margin-top: 2rem; } } .blog-showcase-section__cube-1 { left: 20%; bottom: 10%; z-index: -2; } @media (min-width: 992px) { .blog-showcase-section__cube-1 { left: 23%; } } @media (min-width: 1200px) { .blog-showcase-section__cube-1 { left: 25%; } } .blog-showcase-section__cube-2 { left: calc(32% + 1rem); bottom: 8%; z-index: -2; } .blog-showcase-section__cube-3 { left: 35%; bottom: 0; transform: translateY(70%); z-index: -2; } /* Career Slider */ .career-slider li:nth-child(odd) { margin-top: 3rem; } /* CTA 2 Section */ .cta-2-section { position: relative; z-index: 1; } .cta-2-section__item { width: 2.25rem; height: 2.25rem; } @media (min-width: 768px) { .cta-2-section__item { width: 3rem; height: 3rem; } } @media (min-width: 992px) { .cta-2-section__item { width: 3.75rem; height: 3.75rem; } } @media (min-width: 1200px) { .cta-2-section__item { width: 4.5rem; height: 4.5rem; } } @media (min-width: 1400px) { .cta-2-section__item { width: 5.625rem; height: 5.25rem; } } .cta-2-section__content { position: absolute; inset: 0; display: flex; align-items: center; } /* CTA 3 */ .cta-3 { background-color: var(--bs-primary-text-emphasis); } [data-bs-theme=dark] .cta-3 { background-color: var(--bs-primary-bg-subtle); } /* CTA 4 */ @media (min-width: 768px) { .cta-4::before { content: ""; width: 21.875rem; height: 21.875rem; border: 1px solid rgba(var(--bs-light-rgb), 0.15); border-radius: 50%; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; } } @media (min-width: 768px) { .cta-4::after { content: ""; width: 34.375rem; height: 34.375rem; border: 1px dashed rgba(var(--bs-light-rgb), 0.15); border-radius: 50%; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; } } .cta-4__frosted { display: none; } @media (min-width: 768px) { .cta-4__frosted { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18.75rem; height: 18.75rem; border-radius: 50%; background: linear-gradient(180deg, #5383ff 0%, #5135ff 100%); filter: blur(150px); z-index: -2; pointer-events: none; } } /* CTA 5 */ .cta-5 { border: 1px solid; -o-border-image: linear-gradient(90deg, transparent, rgba(var(--bs-light-rgb), 0.2), transparent) 1; border-image: linear-gradient(90deg, transparent, rgba(var(--bs-light-rgb), 0.2), transparent) 1; } /* CTA 6 */ .cta-6 { background: linear-gradient(180deg, #040116 40.24%, rgba(4, 1, 22, 0) 100%), radial-gradient(65.08% 85.05% at 50% 50%, rgba(0, 0, 0, 0) 37.41%, #63e 69.27%, #fff 100%); } /* CTA 7 */ .cta-7__line { position: absolute; } .cta-7__line-1 { bottom: 0; right: 0; transform: translate(-120px, -100px); } .cta-7__line-2 { top: 50%; right: 0; transform: translateX(-120px); } .cta-7__line-3 { top: calc(100% - 20px); right: 0; transform: translateX(-120px); } .cta-7__line-4 { bottom: 0; left: 0; transform: translate(120px, -100px); } .cta-7__line-5 { top: 50%; left: 0; transform: translateX(120px); } .cta-7__line-6 { top: calc(100% - 20px); left: 0; transform: translateX(120px); } .cta-7__btn { display: none; } @media (min-width: 768px) { .cta-7__btn { display: inline-flex; position: absolute; } } @media (min-width: 768px) { .cta-7__btn-1 { left: 5%; top: 27%; } } @media (min-width: 992px) { .cta-7__btn-1 { left: 15%; top: 31%; } } @media (min-width: 1200px) { .cta-7__btn-1 { left: 20%; top: 33%; } } @media (min-width: 768px) { .cta-7__btn-2 { left: 15%; top: 57%; } } @media (min-width: 992px) { .cta-7__btn-2 { left: 5%; top: 58%; } } @media (min-width: 1200px) { .cta-7__btn-2 { left: 13%; } } @media (min-width: 1400px) { .cta-7__btn-2 { left: 18%; } } @media (min-width: 768px) { .cta-7__btn-3 { left: 25%; top: 70%; } } @media (min-width: 992px) { .cta-7__btn-3 { left: 31%; } } @media (min-width: 1200px) { .cta-7__btn-3 { left: 34%; } } @media (min-width: 1400px) { .cta-7__btn-3 { left: 36%; } } @media (min-width: 768px) { .cta-7__btn-4 { left: 23%; top: 86%; } } @media (min-width: 992px) { .cta-7__btn-4 { left: 15%; } } @media (min-width: 1200px) { .cta-7__btn-4 { left: 20%; } } @media (min-width: 1400px) { .cta-7__btn-4 { top: 82%; left: 25%; } } @media (min-width: 768px) { .cta-7__btn-5 { right: 5%; top: 29%; } } @media (min-width: 992px) { .cta-7__btn-5 { right: 15%; top: 33%; } } @media (min-width: 1200px) { .cta-7__btn-5 { right: 20%; top: 35%; } } @media (min-width: 768px) { .cta-7__btn-6 { right: 15%; top: 57%; } } @media (min-width: 992px) { .cta-7__btn-6 { right: 5%; top: 58%; } } @media (min-width: 1200px) { .cta-7__btn-6 { right: 13%; } } @media (min-width: 1400px) { .cta-7__btn-6 { right: 18%; } } @media (min-width: 768px) { .cta-7__btn-7 { right: 25%; top: 70%; } } @media (min-width: 992px) { .cta-7__btn-7 { right: 31%; } } @media (min-width: 1200px) { .cta-7__btn-7 { right: 34%; } } @media (min-width: 1400px) { .cta-7__btn-7 { right: 36%; } } @media (min-width: 768px) { .cta-7__btn-8 { right: 23%; top: 86%; } } @media (min-width: 992px) { .cta-7__btn-8 { right: 15%; } } @media (min-width: 1200px) { .cta-7__btn-8 { right: 20%; } } @media (min-width: 1400px) { .cta-7__btn-8 { top: 82%; right: 25%; } } /* CTA 8 */ .cta-8 { background-image: linear-gradient(180deg, #040116 40.24%, rgba(4, 1, 22, 0) 100%), radial-gradient(117.36% 164.31% at -3.78% 50%, rgba(0, 0, 0, 0) 0%, #f65c34 81.3%, #fbbcac 100%); } .cta-8::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url(../img/shapes/cta-8-bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; pointer-events: none; } /* Feature Section 1 */ .feature-section-1 { position: relative; z-index: 1; margin-top: -2rem; border-radius: 1.5rem 1.5rem 0 0; background: linear-gradient(180deg, var(--bs-light-bg-subtle) 0%, var(--bs-tertiary-bg) 100%); } /* Feature Section 2 */ .feature-section-2 { position: relative; isolation: isolate; background-image: url(../img/shapes/feature-section-2-grid.png); background-repeat: repeat; overflow: hidden; } .feature-section-2::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--bs-tertiary-bg) 0%, var(--bs-tertiary-bg) 100%); filter: blur(100px); } /* Feature Section 3 */ .feature-section-3 { position: relative; isolation: isolate; overflow: hidden; } .feature-section-3::before { content: url(../img/shapes/feature-section-3-shape.png); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; } /* Footer 1 */ .footer-1 { background-image: url(../img/shapes/footer-1-grid.png); background-repeat: repeat; } .footer-1::after { content: ""; position: absolute; inset: 0; background-color: var(--bs-dark); z-index: -2; filter: blur(150px); } /* Header */ .primary-header { transition: all 0.3s ease; } @media (min-width: 992px) { .primary-header { --bs-navbar-padding-y: 0; --bs-navbar-nav-link-padding-x: 0.75rem; } } .primary-header--sticky { position: sticky; z-index: 100; } .primary-header--fixed { width: 100%; position: fixed; z-index: 100; } .primary-header--light .navbar-toggler { background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } .primary-header--light .nav-link.active { color: var(--bs-primary); } .primary-header--light .navigation-0__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--light .navigation-0__menu { background-color: var(--bs-tertiary-bg); } } .primary-header--light .navigation-0__menu-link { color: var(--bs-secondary-color); } @media (min-width: 768px) { .primary-header--light .navigation-0__menu-link { background-color: rgba(var(--bs-dark-rgb), 0.05); } } @media (min-width: 992px) { .primary-header--light .navigation-0__menu-link:hover { background-color: rgba(var(--bs-dark-rgb), 0.1); } } @media (min-width: 992px) { .primary-header--light .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } .primary-header--light .navigation-1__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--light .navigation-1__menu { border-radius: 0 0 0.25rem 0.25rem; } } .primary-header--light .navigation-1__menu-link { color: var(--bs-secondary-color); } @media (min-width: 992px) { .primary-header--light .navigation-1__menu-link { border-radius: 0.25rem; } } @media (min-width: 992px) { .primary-header--light .navigation-1__menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--light .navigation-1__sub-menu { background-color: var(--bs-tertiary-bg); } } .primary-header--light .navigation-1__sub-menu-link { color: var(--bs-secondary-color); } @media (min-width: 992px) { .primary-header--light .navigation-1__sub-menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--light .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } .primary-header--light:not(.primary-header--boxed) { background-color: var(--bs-tertiary-bg); color: var(--bs-light-text-emphasis); } .primary-header--light.primary-header--boxed { --bs-navbar-padding-y: 0; } .primary-header--light.primary-header--boxed>.container { --bs-gutter-x: 3rem; padding-block: 0.75rem; background-color: var(--bs-tertiary-bg); } @media (min-width: 768px) { .primary-header--light.primary-header--boxed>.container { border-radius: 0.5rem; } } @media (min-width: 992px) { .primary-header--light.primary-header--boxed>.container { padding-block: 0.25rem; } } .primary-header--light .btn.dropdown-toggle { color: rgba(var(--bs-emphasis-color-rgb), 0.65); } .primary-header--dark .navbar-toggler { background-color: rgba(var(--bs-light-rgb), 0.1); color: var(--bs-light); } .primary-header--dark .nav-link { color: var(--bs-light); } .primary-header--dark .nav-link.active { color: var(--bs-primary-bg-subtle); } @media (min-width: 992px) { .primary-header--dark .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--dark .navigation-0__menu { background-color: rgba(var(--bs-light-rgb), 0.05); } @media (min-width: 992px) { .primary-header--dark .navigation-0__menu { background-color: var(--bs-dark); } } .primary-header--dark .navigation-0__menu-link { color: var(--bs-light); } @media (min-width: 768px) { .primary-header--dark .navigation-0__menu-link { background-color: rgba(var(--bs-light-rgb), 0.05); } } @media (min-width: 992px) { .primary-header--dark .navigation-0__menu-link:hover { background-color: rgba(var(--bs-light-rgb), 0.1); } } @media (min-width: 992px) { .primary-header--dark .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--dark .navigation-1__menu { background-color: rgba(var(--bs-light-rgb), 0.05); } @media (min-width: 992px) { .primary-header--dark .navigation-1__menu { background-color: var(--bs-dark); border-radius: 0 0 0.25rem 0.25rem; } } .primary-header--dark .navigation-1__menu-link { color: var(--bs-light); } @media (min-width: 992px) { .primary-header--dark .navigation-1__menu-link { border-radius: 0.25rem; } } @media (min-width: 992px) { .primary-header--dark .navigation-1__menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--dark .navigation-1__sub-menu { background-color: var(--bs-dark); } } .primary-header--dark .navigation-1__sub-menu-link { color: var(--bs-light); } @media (min-width: 992px) { .primary-header--dark .navigation-1__sub-menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--dark .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } .primary-header--dark:not(.primary-header--boxed) { background-color: var(--bs-dark); color: var(--bs-light); } .primary-header--dark.primary-header--boxed { --bs-navbar-padding-y: 0; } .primary-header--dark.primary-header--boxed>.container { --bs-gutter-x: 3rem; padding-block: 0.75rem; background-color: var(--bs-dark); } @media (min-width: 768px) { .primary-header--dark.primary-header--boxed>.container { border-radius: 0.5rem; } } @media (min-width: 992px) { .primary-header--dark.primary-header--boxed>.container { padding-block: 0.25rem; } } .primary-header--dark .btn.dropdown-toggle { color: var(--bs-light); } .primary-header--transparent-light .navbar-collapse { padding: 0.5rem 1rem; background-color: var(--bs-light-bg-subtle); border-radius: 0.25rem; } @media (min-width: 992px) { .primary-header--transparent-light .navbar-collapse { padding: 0; background-color: transparent; } } @media (min-width: 992px) { .primary-header--transparent-light .nav-link { color: var(--bs-light); } } .primary-header--transparent-light .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { .primary-header--transparent-light .nav-link.active { color: var(--bs-primary-bg-subtle); } } @media (min-width: 992px) { .primary-header--transparent-light .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--transparent-light .navigation-0__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-0__menu { background-color: var(--bs-tertiary-bg); border-radius: 0.5rem; } } .primary-header--transparent-light .navigation-0__menu-link { color: var(--bs-secondary-text-emphasis); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-0__menu-link { background-color: rgba(var(--bs-dark-rgb), 0.05); } .primary-header--transparent-light .navigation-0__menu-link:hover { background-color: rgba(var(--bs-dark-rgb), 0.1); } } .primary-header--transparent-light .navigation-0__menu-title { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--transparent-light .navigation-1__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1__menu { border-radius: 0.25rem; } } .primary-header--transparent-light .navigation-1__menu-link { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1__menu-link { border-radius: 0.25rem; } } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1__menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1__sub-menu { background-color: var(--bs-tertiary-bg); } } .primary-header--transparent-light .navigation-1__sub-menu-link { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light .navigation-1__sub-menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--transparent-light .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } .primary-header--transparent-light .btn.dropdown-toggle { color: var(--bs-dark); } @media (min-width: 992px) { .primary-header--transparent-light .btn.dropdown-toggle { color: var(--bs-light); } } .primary-header--transparent-light .navbar-toggler { color: var(--bs-light); } .primary-header--transparent-light-alt .navbar-collapse { padding: 0.5rem 1rem; background-color: var(--bs-light-bg-subtle); border-radius: 0.25rem; } @media (min-width: 992px) { .primary-header--transparent-light-alt .navbar-collapse { padding: 0; background-color: transparent; } } @media (min-width: 992px) { .primary-header--transparent-light-alt .nav-link { color: var(--bs-light); } } .primary-header--transparent-light-alt .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { .primary-header--transparent-light-alt .nav-link.active { color: var(--bs-primary-bg-subtle); } } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--transparent-light-alt .navigation-0__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-0__menu { background-color: var(--bs-dark-text-emphasis); border-radius: 0.5rem; } } .primary-header--transparent-light-alt .navigation-0__menu-link { color: var(--bs-secondary-text-emphasis); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-0__menu-link { background-color: rgba(var(--bs-light-rgb), 0.05); } .primary-header--transparent-light-alt .navigation-0__menu-link:hover { background-color: rgba(var(--bs-light-rgb), 0.1); } } .primary-header--transparent-light-alt .navigation-0__menu-title { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-0__menu-title { color: var(--bs-dark-bg-subtle); } } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header--transparent-light-alt .navigation-1__menu { background-color: var(--bs-tertiary-bg); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__menu { background-color: var(--bs-dark-text-emphasis); border-radius: 0.25rem; } } .primary-header--transparent-light-alt .navigation-1__menu-link { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__menu-link { color: var(--bs-dark-bg-subtle); border-radius: 0.25rem; } } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__menu-link:hover { background-color: var(--bs-dark); color: var(--bs-light); } } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__sub-menu { background-color: var(--bs-dark-text-emphasis); } } .primary-header--transparent-light-alt .navigation-1__sub-menu-link { color: var(--bs-heading-color); } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__sub-menu-link { color: var(--bs-dark-bg-subtle); } } @media (min-width: 992px) { .primary-header--transparent-light-alt .navigation-1__sub-menu-link:hover { background-color: var(--bs-dark); color: var(--bs-light); } } @media (min-width: 992px) { .primary-header--transparent-light-alt .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) and (min-width: 992px) { .primary-header--transparent-light-alt .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-dark); color: var(--bs-light); } } .primary-header--transparent-light-alt .btn.dropdown-toggle { color: var(--bs-dark); } @media (min-width: 992px) { .primary-header--transparent-light-alt .btn.dropdown-toggle { color: var(--bs-light); } } .primary-header--transparent-light-alt .navbar-toggler { color: var(--bs-light); } .primary-header--transparent-dark .navbar-collapse { padding: 0.5rem 1rem; background-color: var(--bs-dark); border-radius: 0.25rem; } @media (min-width: 992px) { .primary-header--transparent-dark .navbar-collapse { padding: 0; background-color: transparent; } } .primary-header--transparent-dark .nav-link { color: var(--bs-body-bg); } @media (min-width: 992px) { .primary-header--transparent-dark .nav-link { color: var(--bs-dark); } } .primary-header--transparent-dark .nav-link.active { color: var(--bs-primary); } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary); } } .primary-header--transparent-dark .navigation-0__menu { background-color: rgba(var(--bs-light-rgb), 0.05); } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-0__menu { background-color: var(--bs-dark); } } .primary-header--transparent-dark .navigation-0__menu-link { color: var(--bs-light); } @media (min-width: 768px) { .primary-header--transparent-dark .navigation-0__menu-link { background-color: rgba(var(--bs-light-rgb), 0.05); } } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-0__menu-link:hover { background-color: rgba(var(--bs-light-rgb), 0.1); } } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary); } } .primary-header--transparent-dark .navigation-1__menu { background-color: rgba(var(--bs-light-rgb), 0.05); } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1__menu { background-color: var(--bs-dark); border-radius: 0 0 0.25rem 0.25rem; } } .primary-header--transparent-dark .navigation-1__menu-link { color: var(--bs-light); } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1__menu-link { border-radius: 0.25rem; } } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1__menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1__sub-menu { background-color: var(--bs-dark); } } .primary-header--transparent-dark .navigation-1__sub-menu-link { color: var(--bs-light); } @media (min-width: 992px) { .primary-header--transparent-dark .navigation-1__sub-menu-link:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header--transparent-dark .has-sub-2nd:hover>.navigation-1__menu-link { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } } .primary-header--transparent-dark .btn.dropdown-toggle { color: var(--bs-dark); } .primary-header>.container { position: relative; } .primary-header .navbar-collapse { max-height: calc(100vh - 3.25rem); overflow-y: auto; scrollbar-color: transparent transparent; scrollbar-width: none; } .primary-header .navbar-collapse::-webkit-scrollbar { width: 0; height: 0; } .primary-header .navbar-collapse::-webkit-scrollbar-track { background: transparent; } .primary-header .navbar-collapse::-webkit-scrollbar-thumb { background: transparent; } @media (min-width: 768px) { .primary-header .navbar-collapse { max-height: none; overflow-y: unset; } } @media (min-width: 992px) { .primary-header .navbar-nav { --bs-nav-link-padding-y: 1rem; } } .primary-header .navbar-toggler { display: grid; place-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 0.25rem; font-size: 1.5rem; } @media (min-width: 992px) { .primary-header .navbar-toggler { display: none; } } .primary-header .navbar-toggler:focus { outline: none; box-shadow: none; } .primary-header .navbar-toggler-icon { width: 1.5rem; height: 1.5rem; } .primary-header .has-sub-menu>.nav-link { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 992px) { .primary-header .has-sub-menu>.nav-link { gap: 0.25rem; } } .primary-header .has-sub-menu>.nav-link::after { --svg: url('data:image/svg+xml,'); content: ""; display: inline-block; width: 0.875rem; height: 0.875rem; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .primary-header .has-sub-2nd>.navigation-1__menu-link { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 992px) { .primary-header .has-sub-2nd>.navigation-1__menu-link { gap: 0.25rem; } } .primary-header .has-sub-2nd>.navigation-1__menu-link::after { --svg: url('data:image/svg+xml,'); content: ""; display: inline-block; width: 0.875rem; height: 0.875rem; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } @media (min-width: 992px) { .primary-header .has-sub-2nd>.navigation-1__menu-link::after { --svg: url('data:image/svg+xml,'); } } .primary-header-crossed .primary-header--transparent-light:not(.primary-header--boxed) { background-color: var(--bs-light-bg-subtle); color: var(--bs-light-text-emphasis); } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light .nav-link { color: var(--bs-dark); } } .primary-header-crossed .primary-header--transparent-light .nav-link.active { color: var(--bs-primary); } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light .navigation-1__menu { border-radius: 0 0 0.25rem 0.25rem; } } .primary-header-crossed .primary-header--transparent-light .btn.dropdown-toggle { color: var(--bs-dark); } .primary-header-crossed .primary-header--transparent-light .navbar-toggler { color: var(--bs-dark); } .primary-header-crossed .primary-header--transparent-light-alt:not(.primary-header--boxed) { background-color: var(--bs-dark-text-emphasis); color: var(--bs-dark-bg-subtle); } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light-alt .nav-link { color: var(--bs-dark-bg-subtle); } } .primary-header-crossed .primary-header--transparent-light-alt .nav-link.active { color: var(--bs-primary); } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light-alt .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-bg-subtle); } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light-alt .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-bg-subtle); } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light-alt .navigation-1__menu { border-radius: 0 0 0.25rem 0.25rem; } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-light-alt .btn.dropdown-toggle { color: var(--bs-light); } } .primary-header-crossed .primary-header--transparent-light-alt .navbar-toggler { color: var(--bs-light); } .primary-header-crossed .primary-header--transparent-dark:not(.primary-header--boxed) { background-color: var(--bs-dark); color: var(--bs-light); } .primary-header-crossed .primary-header--transparent-dark .nav-link { color: var(--bs-light); } .primary-header-crossed .primary-header--transparent-dark .nav-link.active { color: var(--bs-primary-bg-subtle); } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-dark .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-bg-subtle); } } @media (min-width: 992px) { .primary-header-crossed .primary-header--transparent-dark .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-bg-subtle); } } .primary-header-crossed .primary-header--transparent-dark .btn.dropdown-toggle { color: var(--bs-light); } .primary-header-crossed .primary-header-crossed\:top-0 { inset-block-start: 0 !important; } .primary-header-crossed .primary-header-crossed\:full-dark.primary-header--dark { background-color: var(--bs-dark) !important; } .primary-header-crossed .primary-header-crossed\:full-light.primary-header--light { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme=dark] .primary-header--dark .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--dark .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--dark .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-dark .nav-link { color: var(--bs-light); } } [data-bs-theme=dark] .primary-header--transparent-dark .nav-link.active { color: var(--bs-primary-text-emphasis); } [data-bs-theme=dark] .primary-header--transparent-dark .btn.dropdown-toggle { color: var(--bs-light); } [data-bs-theme=dark] .primary-header--transparent-light .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } [data-bs-theme=dark] .primary-header--transparent-light .navbar-toggler { color: var(--bs-light); } [data-bs-theme=dark] .primary-header--transparent-light .btn.dropdown-toggle { color: var(--bs-light); } [data-bs-theme=dark] .primary-header--transparent-light-alt .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-0__menu { background-color: var(--bs-dark-bg-subtle); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-0__menu-title { color: var(--bs-dark-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1__menu { background-color: var(--bs-dark-bg-subtle); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1__menu-link { color: var(--bs-dark-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1__sub-menu { background-color: var(--bs-dark-bg-subtle); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1__sub-menu-link { color: var(--bs-dark-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header--transparent-light-alt .navigation-1__sub-menu-link:hover { background-color: var(--bs-dark); color: var(--bs-light); } } [data-bs-theme=dark] .primary-header--transparent-light-alt .navbar-toggler { color: var(--bs-light); } [data-bs-theme=dark] .primary-header--transparent-light-alt .btn.dropdown-toggle { color: var(--bs-light); } [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-dark .nav-link.active { color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-dark .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-dark .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light .nav-link { color: var(--bs-light); } } [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light .nav-link.active { color: var(--bs-primary-text-emphasis); } [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light .btn.dropdown-toggle { color: var(--bs-light); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light .navigation-0.has-sub-menu:hover:hover>a { color: var(--bs-primary-text-emphasis); } } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light .navigation-1.has-sub-menu:hover>a { color: var(--bs-primary-text-emphasis); } } [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light-alt:not(.primary-header--boxed) { background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark-text-emphasis); } @media (min-width: 992px) { [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light-alt .nav-link { color: var(--bs-dark-text-emphasis); } } [data-bs-theme=dark] .primary-header-crossed .primary-header--transparent-light-alt .nav-link.active { color: var(--bs-primary); } /* Hero 1 */ .hero-1 { position: relative; isolation: isolate; background-color: var(--bs-dark); background-image: url(../img/shapes/hero-1-grid.png); background-repeat: repeat; overflow: hidden; } .hero-1::after { content: ""; position: absolute; inset: 0; background: #0d0e10; filter: blur(200px); z-index: -3; } .hero-1__content { padding-block-start: clamp(6.8rem, 11.5vw + 1rem, 13.75rem); padding-block-end: clamp(13.75rem, 23vw + 1rem, 27.5rem); } .hero-1__shape-1 { position: absolute; top: 0; left: 0; transform: translateX(-50%); z-index: -1; opacity: 0.5; } .hero-1__shape-2 { position: absolute; top: 0; left: 0; z-index: -3; overflow: visible; } .hero-1__shape-3 { position: absolute; top: 0; right: 0; z-index: -3; overflow: visible; } .hero-1__demo-img { display: none; } @media (min-width: 768px) { .hero-1__demo-img { display: block; position: absolute; } } @media (min-width: 768px) { .hero-1__demo-img-1 { top: 40%; left: 0; transform: scale(0.5) translateX(-40px); transform-origin: top left; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-1 { transform: scale(0.75) translateX(-40px); } } @media (min-width: 1920px) { .hero-1__demo-img-1 { transform: scale(1) translateX(-40px); } } @media (min-width: 2100px) { .hero-1__demo-img-1 { transform: scale(1.25) translateX(-40px); } } @media (min-width: 768px) { .hero-1__demo-img-2 { top: 60%; left: 10%; transform: scale(0.5); transform-origin: top left; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-2 { transform: scale(0.75); } } @media (min-width: 1920px) { .hero-1__demo-img-2 { transform: scale(1); } } @media (min-width: 2100px) { .hero-1__demo-img-2 { transform: scale(1.25); } } @media (min-width: 768px) { .hero-1__demo-img-3 { bottom: 0; left: 0; transform: scale(0.5) translate(0, 25%); transform-origin: bottom left; z-index: -2; } } @media (min-width: 992px) { .hero-1__demo-img-3 { transform: scale(0.75) translate(0, 40%); } } @media (min-width: 1920px) { .hero-1__demo-img-3 { transform: scale(1) translate(0, 25%); } } @media (min-width: 2100px) { .hero-1__demo-img-3 { transform: scale(1.1) translate(0, 35%); } } @media (min-width: 768px) { .hero-1__demo-img-4 { bottom: 5%; left: 28%; transform: scale(0.5) translateY(30%); transform-origin: bottom left; z-index: -2; } } @media (min-width: 992px) { .hero-1__demo-img-4 { transform: scale(0.75) translateY(35%); } } @media (min-width: 1920px) { .hero-1__demo-img-4 { transform: scale(1) translateY(30%); } } @media (min-width: 2100px) { .hero-1__demo-img-4 { transform: scale(1.25) translateY(30%); } } @media (min-width: 768px) { .hero-1__demo-img-5 { bottom: 5%; left: 45%; transform: scale(0.5); transform-origin: bottom left; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-5 { transform: scale(0.75); } } @media (min-width: 1920px) { .hero-1__demo-img-5 { transform: scale(1); } } @media (min-width: 2100px) { .hero-1__demo-img-5 { transform: scale(1.25); } } @media (min-width: 768px) { .hero-1__demo-img-6 { bottom: 0; left: 52%; transform: scale(0.5) translateY(45%); transform-origin: bottom left; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-6 { transform: scale(0.75) translateY(45%); } } @media (min-width: 1920px) { .hero-1__demo-img-6 { transform: scale(1) translateY(45%); } } @media (min-width: 2100px) { .hero-1__demo-img-6 { transform: scale(1.25) translateY(45%); } } @media (min-width: 768px) { .hero-1__demo-img-7 { bottom: 0; right: 0; transform-origin: bottom right; z-index: -2; } } @media (min-width: 768px) { .hero-1__demo-img-8 { bottom: 20%; left: 60%; transform: scale(0.5) translateX(25%); transform-origin: bottom left; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-8 { transform: scale(0.75) translateX(25%); } } @media (min-width: 1920px) { .hero-1__demo-img-8 { transform: scale(1) translateX(25%); } } @media (min-width: 2100px) { .hero-1__demo-img-8 { transform: scale(1.2) translateX(25%); } } @media (min-width: 768px) { .hero-1__demo-img-9 { bottom: 55%; right: 0; transform: scale(0.5) translateX(40px); transform-origin: bottom right; z-index: -1; } } @media (min-width: 992px) { .hero-1__demo-img-9 { transform: scale(0.75) translateX(40px); } } @media (min-width: 1920px) { .hero-1__demo-img-9 { transform: scale(1) translateX(40px); } } @media (min-width: 2100px) { .hero-1__demo-img-9 { transform: scale(1.25) translateX(40px); } } /* Hero 2 */ .hero-2 { padding-block-start: clamp(6rem, 13.89vw + 1rem, 16.5rem); padding-block-end: clamp(6rem, 10.52vw + 1rem, 12.5rem); background-image: url(../img/shapes/hero-2-bg-shape.png); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; isolation: isolate; } .hero-2::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 12.5rem; background-color: var(--bs-body-bg); filter: blur(100px); z-index: -1; pointer-events: none; } .hero-2::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 12.5rem; background-color: var(--bs-body-bg); filter: blur(100px); z-index: -1; pointer-events: none; } @media (min-width: 1600px) { .hero-2__content { max-width: 1600px; margin-inline: auto; } } .hero-2__outer { display: inline-block; position: relative; isolation: isolate; } .hero-2__inner { width: 17.5rem; height: 17.5rem; max-width: 100%; border-radius: 50%; position: relative; isolation: isolate; } .hero-2__inner::before { content: ""; position: absolute; inset: 0; background-color: var(--bs-body-bg); border-radius: 50%; z-index: -1; } .hero-2__inner::after { content: ""; position: absolute; inset: -1px; background-image: linear-gradient(0deg, var(--bs-body-bg), var(--bs-primary)); border-radius: 50%; z-index: -2; animation: rotate360 5s linear infinite; } .hero-2__core { width: 11.25rem; height: 11.25rem; border-radius: 50%; background-color: var(--bs-body-bg); position: relative; } .hero-2__core::after { content: ""; position: absolute; inset: -1px; background-image: linear-gradient(var(--bs-body-bg), var(--bs-primary)); border-radius: 50%; z-index: -1; animation: rotate360 5s linear infinite; } .hero-2__line-1 { display: none; } @media (min-width: 992px) { .hero-2__line-1 { display: inline-block; max-width: 100%; position: absolute; bottom: 50%; right: 100%; transform: translateY(25%); z-index: -3; } } .hero-2__line-2 { display: none; } @media (min-width: 992px) { .hero-2__line-2 { display: inline-block; max-width: 100%; position: absolute; top: 50%; right: 100%; transform: translateY(-25%); z-index: -3; } } .hero-2__line-3 { display: none; } @media (min-width: 992px) { .hero-2__line-3 { display: inline-block; max-width: 100%; position: absolute; bottom: 50%; left: 100%; transform: translateY(25%); z-index: -3; } } .hero-2__line-4 { display: none; } @media (min-width: 992px) { .hero-2__line-4 { display: inline-block; max-width: 100%; position: absolute; top: 50%; left: 100%; transform: translateY(-25%); z-index: -3; } } .hero-2__images { display: none; } @media (min-width: 992px) { .hero-2__images { display: inline-block; position: absolute; transform: scale(0.5); z-index: -1; } } @media (min-width: 1200px) { .hero-2__images { transform: scale(0.75); } } @media (min-width: 1400px) { .hero-2__images { transform: scale(1); } } @media (min-width: 992px) { .hero-2__images-1 { top: 20%; left: 0%; } } @media (min-width: 1200px) { .hero-2__images-1 { top: 10%; } } @media (min-width: 992px) { .hero-2__images-2 { top: 25%; left: -5%; } } @media (min-width: 1200px) { .hero-2__images-2 { left: 0; z-index: -2; } } @media (min-width: 992px) { .hero-2__images-3 { top: 45%; left: 0; } } @media (min-width: 1200px) { .hero-2__images-3 { top: 50%; } } @media (min-width: 992px) { .hero-2__images-4 { top: 20%; right: 0%; } } @media (min-width: 1200px) { .hero-2__images-4 { top: 10%; } } @media (min-width: 992px) { .hero-2__images-5 { top: 25%; right: -5%; } } @media (min-width: 1200px) { .hero-2__images-5 { right: 0; z-index: -2; } } @media (min-width: 992px) { .hero-2__images-6 { top: 45%; right: 0; } } @media (min-width: 1200px) { .hero-2__images-6 { top: 50%; } } .hero-2__brand-section { padding-block-start: clamp(6rem, 10.52vw + 1rem, 12.5rem); } [data-bs-theme=dark] .hero-2 { background-image: url(../img/shapes/hero-2-bg-shape-dark.png); } /* Hero 3 */ .hero-3 { padding-block-start: clamp(6rem, 8.5vw + 1rem, 10rem); background-color: var(--bs-primary-text-emphasis); } @media (min-width: 992px) { .hero-3 { border-radius: 1.5rem 1.5rem 0 0; } } .hero-3__alert::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, var(--bs-dark-bg-subtle), var(--bs-dark)); opacity: 0.3; z-index: -1; } .hero-3__element-1 { top: 30%; left: 0; } @media (min-width: 1400px) { .hero-3__element-1 { top: 60%; left: -2%; } } .hero-3__element-2 { top: 40%; left: 10%; } @media (min-width: 1400px) { .hero-3__element-2 { left: 17%; } } .hero-3__element-3 { top: 30%; right: 0; } @media (min-width: 1400px) { .hero-3__element-3 { top: 60%; right: -2%; } } .hero-3__element-4 { top: 40%; right: 10%; } @media (min-width: 1400px) { .hero-3__element-4 { right: 17%; } } [data-bs-theme=dark] .hero-3 { background-color: var(--bs-primary-bg-subtle); } /* Hero 4 */ .hero-4 { position: relative; isolation: isolate; overflow: hidden; } .hero-4::before { content: ""; width: 81.25rem; height: 60%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #5383ff 0%, rgba(53, 73, 255, 0.7) 100%); filter: blur(250px); z-index: -1; pointer-events: none; } .hero-4::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(13, 14, 16, 0) 0%, #0d0e10 83.9%); z-index: -1; pointer-events: none; } .hero-4__container { padding-block-start: clamp(5.9rem, 10vw + 1rem, 11.875rem); position: relative; isolation: isolate; } .hero-4__container::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(141.29% 50.25% at 49.75% 39.61%, transparent 0%, var(--bs-dark) 100%); } @media (min-width: 1920px) { .hero-4__img { transform: scale(1.1) translateX(2rem); position: relative; } } .hero-4__shape-1 { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -2; pointer-events: none; } .hero-4__shape-2 { overflow: visible; position: absolute; inset: 0; z-index: -3; pointer-events: none; } /* Hero 5 */ .hero-5 { position: relative; isolation: isolate; } .hero-5__center { overflow: hidden; padding-block-start: clamp(5rem, 8.4vw + 1rem, 10rem); } .hero-5__hero-img { position: relative; isolation: isolate; } .hero-5__hero-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background-color: var(--bs-black); z-index: 1; -webkit-mask: linear-gradient(transparent, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.94) 75%, white 100%); mask: linear-gradient(transparent, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.94) 75%, white 100%); } .hero-5__circle { position: absolute; top: 0; left: 50%; transform: translate(-50%, -35%); width: 90%; aspect-ratio: 1/1; background: radial-gradient(66.19% 89.14% at 50% 0%, var(--bs-primary) 0%, var(--bs-primary-text-emphasis) 47.4%, var(--bs-dark) 100%); box-shadow: 22.188px 22.188px 32.357px 12.018px rgba(0, 0, 0, 0.25) inset; border-radius: 50%; -webkit-mask: linear-gradient(white, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.94) 75%, transparent); mask: linear-gradient(white, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.94) 75%, transparent); z-index: -1; } @media (min-width: 576px) { .hero-5__circle { width: 80%; transform: translate(-50%, -30%); } } @media (min-width: 768px) { .hero-5__circle { transform: translate(-50%, -27%); } } @media (min-width: 992px) { .hero-5__circle { width: 70%; transform: translate(-50%, -25%); } } @media (min-width: 1200px) { .hero-5__circle { transform: translate(-50%, -23%); } } @media (min-width: 1400px) { .hero-5__circle { transform: translate(-50%, -20%); width: 65%; } } .hero-5__circle::after { content: ""; position: absolute; inset: 15%; border-radius: inherit; background-color: var(--bs-black); z-index: -1; } .hero-5__circle-blurr { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 50%; border-radius: 50%; animation: animateBackgroundColor 20s linear infinite alternate; filter: blur(132px); } .hero-5__circle-inner { display: none; } @media (min-width: 100px) { .hero-5__circle-inner { display: inline-block; width: 100%; position: absolute; left: 50%; transform: translate(-50%, -38%); aspect-ratio: 1/1; border-radius: 50%; z-index: -1; } .hero-5__circle-inner::after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(var(--bs-light-rgb), 0.5); border-radius: 50%; -webkit-mask: linear-gradient(white 50%, transparent 100%); mask: linear-gradient(white 50%, transparent 100%); } } @media (min-width: 768px) { .hero-5__circle-inner { display: inline-block; width: 90%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -30%); aspect-ratio: 1/1; border-radius: 50%; z-index: -1; } .hero-5__circle-inner::after { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(var(--bs-light-rgb), 0.5); border-radius: 50%; -webkit-mask: linear-gradient(white 50%, transparent 100%); mask: linear-gradient(white 50%, transparent 100%); } } @media (min-width: 992px) { .hero-5__circle-inner { width: 80%; } } @media (min-width: 1200px) { .hero-5__circle-inner { transform: translate(-50%, -25%); } } @media (min-width: 1400px) { .hero-5__circle-inner { transform: translate(-50%, -20%); } } .hero-5__line { display: none; } @media (min-width: 1920px) { .hero-5__line { display: block; position: absolute; z-index: -1; pointer-events: none; } .hero-5__line-1 { top: 15%; left: 2%; } .hero-5__line-2 { left: 0; bottom: 0; } .hero-5__line-3 { top: 15%; right: 2%; } .hero-5__line-4 { right: 0; bottom: 0; } } [data-bs-theme=dark] .hero-5__circle { background: radial-gradient(66.19% 89.14% at 50% 0%, var(--bs-primary) 0%, var(--bs-primary-bg-subtle) 47.4%, var(--bs-dark) 100%); } /* Hero 6 */ .hero-6 { position: relative; isolation: isolate; padding-block-start: clamp(5.9rem, 10vw + 1rem, 11.87rem); overflow: hidden; } .hero-6::before { content: ""; position: absolute; inset: 0; background-image: url(../img/shapes/hero-6-grid.png); background-repeat: repeat; opacity: 0.08; pointer-events: none; } .hero-6::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 15.625rem; background: linear-gradient(0deg, #6328ff -20.43%, rgba(99, 40, 255, 0) 76.69%); } .hero-6__title { display: inline-block; position: relative; isolation: isolate; } @media (min-width: 768px) { .hero-6__title::before { content: ""; position: absolute; inset: -1.25rem; border: 1px dashed var(--bs-primary); pointer-events: none; z-index: -1; } } .hero-6__title-sqr { display: none; } @media (min-width: 768px) { .hero-6__title-sqr { display: block; width: 0.5rem; height: 0.5rem; background-color: var(--bs-primary); position: absolute; z-index: -1; pointer-events: none; } } @media (min-width: 768px) { .hero-6__title-sqr--1 { top: calc(-1.25rem + 1px); left: calc(-1.25rem + 1px); } } @media (min-width: 768px) { .hero-6__title-sqr--2 { top: calc(-1.25rem + 1px); right: calc(-1.25rem + 1px); } } @media (min-width: 768px) { .hero-6__title-sqr--3 { bottom: calc(-1.25rem + 1px); left: calc(-1.25rem + 1px); } } @media (min-width: 768px) { .hero-6__title-sqr--4 { bottom: calc(-1.25rem + 1px); right: calc(-1.25rem + 1px); } } .hero-6__img { -webkit-mask: linear-gradient(white 75%, transparent); mask: linear-gradient(white 75%, transparent); } /* Hero 7 */ .hero-7 { position: relative; isolation: isolate; padding-block-start: clamp(5.9rem, 10vw + 1rem, 11.87rem); overflow: hidden; } .hero-7__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.2; pointer-events: none; transform: scale(1.75); } .hero-7__img-container { position: relative; isolation: isolate; } .hero-7__img-container::after { content: ""; position: absolute; right: 0; bottom: 0; width: 37.5rem; height: 25rem; background-color: #3838fa; filter: blur(200px); z-index: -1; } .hero-7__img { display: inline-block; position: relative; isolation: isolate; border-radius: 1.25rem; overflow: hidden; } .hero-7__img::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--bs-primary), transparent, transparent, transparent, transparent, #3838fa); animation: rotate360 20s linear infinite forwards; z-index: -1; } .hero-7__img::after { content: ""; position: absolute; inset: 0.25rem; background-color: var(--bs-dark); border-radius: inherit; z-index: -1; } .hero-7__img-elements { display: none; } @media (min-width: 1920px) { .hero-7__img-elements { display: inline-block; position: absolute; z-index: -1; pointer-events: none; } .hero-7__img-elements-1 { left: 0; top: 15%; } .hero-7__img-elements-2 { right: 0; top: 15%; opacity: 0.5; } .hero-7__img-elements-3 { left: 0; top: 40%; transform: translate(-50%, -50%); } .hero-7__img-elements-4 { left: 0; top: 80%; transform: translate(-25%, -50%); z-index: 1; } .hero-7__img-elements-5 { right: 0; top: 30%; transform: translate(50%, -50%); z-index: 1; } .hero-7__img-elements-6 { right: 0; top: 60%; transform: translateY(-50%); z-index: 1; } } /* Integration Section */ .integration-section-1::after { content: ""; position: absolute; inset: 25%; background: linear-gradient(180deg, rgba(83, 131, 255, 0.2) 0%, rgba(53, 73, 255, 0.14) 100%); filter: blur(100px); pointer-events: none; opacity: 0.5; } /* Map View */ .map-view { width: 100%; height: 21.875rem; } @media (min-width: 768px) { .map-view { height: 37.5rem; } } @media (min-width: 768px) { .map-view--md { height: 28.125rem; } } @media (min-width: 768px) { .map-view--lg { height: 46.875rem; } } @media (min-width: 768px) { .map-view--xl { height: 53.125rem; } } @media (min-width: 768px) { .map-view__info { position: absolute; } } /* Portfolio Section */ .portfolio-section-2 { padding-block: clamp(14rem, 23.68vw + 1rem, 28.125rem); } .portfolio-section-2__lead-text { font-size: clamp(7rem, 13vw + 1rem, 15.625rem); line-height: 1.2; background: linear-gradient(180deg, #f8f9fa 16.34%, rgba(97, 106, 114, 0) 76.07%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .portfolio-section-2__bg-overlay { overflow: hidden; display: flex; justify-content: center; gap: 1.5rem; max-width: 1920px; margin-inline: auto; position: absolute; inset: 0; z-index: -1; } .portfolio-section-2__bg-overlay::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, var(--bs-dark) 0%, rgba(13, 14, 16, 0.59) 35%, var(--bs-dark) 100%); } /* Pricing Section 1 */ .pricing-section-1 { background: linear-gradient(184deg, var(--bs-tertiary-bg) 0%, var(--bs-light-bg-subtle) 25.55%); } @media (min-width: 1200px) { .pricing-section-1 { position: relative; z-index: 1; } } @media (min-width: 1200px) { .pricing-section-1::after { content: ""; position: absolute; inset: 0; background-image: url(../img/shapes/about-2-shape.png); background-size: cover; background-position: center bottom; background-repeat: no-repeat; z-index: -1; } } /* Pricing Section 2 */ .pricing-section-2 { background-image: url(../img/shapes/hero-2-bg-shape.png); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; isolation: isolate; overflow: hidden; } .pricing-section-2::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 12.5rem; background-color: var(--bs-body-bg); filter: blur(100px); z-index: -1; pointer-events: none; } .pricing-section-2::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 12.5rem; background-color: var(--bs-body-bg); filter: blur(100px); z-index: -1; pointer-events: none; } [data-bs-theme=dark] .pricing-section-2 { background-image: url(../img/shapes/hero-2-bg-shape-dark.png); } /* Pricing Section 3 */ .pricing-section-3 { background-color: var(--bs-primary-text-emphasis); } .pricing-section-3::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 76.58%), var(--Color-Primary-Dark, #15063f); } .pricing-section-3__inner-content { background: linear-gradient(0deg, transparent 30%, var(--bs-primary-text-emphasis) 100%); } [data-bs-theme=dark] .pricing-section-3 { background-color: var(--bs-primary-bg-subtle); } [data-bs-theme=dark] .pricing-section-3__inner-content { background: linear-gradient(0deg, transparent 30%, var(--bs-primary-bg-subtle) 100%); } /* Section Height */ .section-height { width: 100%; height: 21.875rem; } @media (min-width: 768px) { .section-height { height: 28.125rem; } } @media (min-width: 768px) { .section-height--md { height: 40.625rem; } } @media (min-width: 768px) { .section-height--lg { height: 46.875rem; } } @media (min-width: 768px) { .section-height--xl { height: 53.125rem; } } /* Section Spacing */ .section-space-y { padding-block-start: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); padding-block-end: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); } .section-space-lg-y { padding-block-start: clamp(2.5rem, 4.21vw + 1rem, 5rem); padding-block-end: clamp(2.5rem, 4.21vw + 1rem, 5rem); } .section-space-md-y { padding-block-start: clamp(2rem, 3.25vw + 1rem, 3.75rem); padding-block-end: clamp(2rem, 3.25vw + 1rem, 3.75rem); } .section-space-sm-y { padding-block-start: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); padding-block-end: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } .section-space-xsm-y { padding-block-start: clamp(1rem, 1.68vw + 1rem, 2rem); padding-block-end: clamp(1rem, 1.68vw + 1rem, 2rem); } .section-space-top { padding-block-start: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); } .section-space-lg-top { padding-block-start: clamp(2.5rem, 4.21vw + 1rem, 5rem); } .section-space-md-top { padding-block-start: clamp(2rem, 3.25vw + 1rem, 3.75rem); } .section-space-sm-top { padding-block-start: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } .section-space-xsm-top { padding-block-start: clamp(1rem, 1.68vw + 1rem, 2rem); } .section-space-bottom { padding-block-end: clamp(3.75rem, 6.5vw + 1rem, 7.5rem); } .section-space-lg-bottom { padding-block-end: clamp(2.5rem, 4.21vw + 1rem, 5rem); } .section-space-md-bottom { padding-block-end: clamp(2rem, 3.25vw + 1rem, 3.75rem); } .section-space-sm-bottom { padding-block-end: clamp(1.25rem, 2.1vw + 1rem, 2.5rem); } .section-space-xsm-bottom { padding-block-end: clamp(1rem, 1.68vw + 1rem, 2rem); } /* Testimonial Section 1 */ .testimonial-section-1 { position: relative; background: linear-gradient(var(--bs-tertiary-bg) 0%, transparent 21%, transparent 78%, var(--bs-light-bg-subtle) 100%); overflow: hidden; } @media (min-width: 1400px) { .testimonial-section-1::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, var(--bs-tertiary-bg) 0%, transparent 21%, transparent 78%, var(--bs-tertiary-bg) 100%); z-index: 1; } } .testimonial-section-1__inner { position: relative; z-index: 1; } .testimonial-section-1__inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, var(--bs-tertiary-bg) 0%, transparent 21%, transparent 78%, var(--bs-tertiary-bg) 100%); z-index: 1; } @media (min-width: 1400px) { .testimonial-section-1__inner::after { display: none; } } .testimonial-section-1__shape { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; overflow: unset; } .testimonial-section-1__path { animation: animateFill 25s infinite linear alternate; } /* Testimonial Section 2 */ .testimonial-section-2 { max-height: 43.75rem; -webkit-mask: linear-gradient(transparent, white 20%, white 80%, transparent); mask: linear-gradient(transparent, white 20%, white 80%, transparent); overflow: hidden; } /* Testimonial Section 3 */ @media (min-width: 992px) { .testimonial-section-3::before { content: ""; width: 100%; height: 18.75rem; max-width: 50rem; background: linear-gradient(180deg, #5383ff 0%, #5135ff 100%); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: -2; pointer-events: none; filter: blur(150px); } } /* Testimonial Section 4 */ .testimonial-section-4 { position: relative; isolation: isolate; overflow: hidden; } .testimonial-section-4::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 81.25rem; height: 50%; background: linear-gradient(180deg, rgba(126, 77, 254, 0.2) 0%, rgba(99, 40, 255, 0.2) 100%); filter: blur(100px); z-index: -1; opacity: 0.35; } .testimonial-section-4__circle { position: absolute; top: 0; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.35), var(--bs-dark), var(--bs-dark), rgba(var(--bs-primary-rgb), 0.35)); animation: rotate360 12s linear infinite forwards; } .testimonial-section-4__circle::before { content: ""; position: absolute; inset: 3px; background-color: var(--dark-saas); border-radius: 50%; } /* Usage Section 1 */ .usage-section-1 { --section-bg: var(--bs-dark-text-emphasis); --section-bg-img: url(../img/shapes/banner-grid-shape.png); position: relative; z-index: 1; border-radius: 1.5rem 1.5rem 0 0; overflow: hidden; } .usage-section-1::after { content: ""; position: absolute; inset: 0; background-color: var(--section-bg); background-image: var(--section-bg-img); background-repeat: repeat; z-index: -2; transition: all 0.3s ease; } [data-bs-theme=dark] .usage-section-1::after { background-color: var(--bs-dark-bg-subtle); } /* Miscellaneous Styles */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .container-max { margin-inline: auto; } @media (min-width: 1600px) { .container-max { max-width: 97rem; } } @media (min-width: 1800px) { .container-max { max-width: 109.5rem; } } @media (min-width: 2100px) { .container-max { max-width: 128.25rem; } } @media (min-width: 2500px) { .container-max { max-width: 153.25rem; } } .ff-1 { font-family: var(--ff-1); } .ff-2 { font-family: var(--ff-2); } .form-control:focus { box-shadow: none; border-color: var(--bs-border-color); } .form-select:focus { box-shadow: none; border-color: var(--bs-border-color); } .\:focus-outline-0:focus { outline: none; } .inset-0 { inset: 0; } .link { text-decoration: none; transition: all 0.3s ease; } .opacity-5 { opacity: 0.05; } .opacity-10 { opacity: 0.1; } .pointer-none { pointer-events: none; } .place-content-center { place-content: center; } .place-items-center { place-items: center; } .transition { transition: all 0.3s ease; } .z-n2 { z-index: -2; } .filter-blur-50 { filter: blur(50px); } .filter-blur-100 { filter: blur(100px); } /* Animation Section */ @keyframes pulse { 100% { transform: scale(2); opacity: 0; } } @keyframes multiplePulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes imageBeat { 0% { transform: scale(1); } 50% { transform: scale(0.7); } 100% { transform: scale(1); } } @keyframes scroll { to { transform: translate(calc(-50% - 0.5rem)); } } @keyframes scrollY { to { transform: translateY(calc(-50% - 0.5rem)); } } @keyframes animateFill { 0% { fill: var(--bs-primary); fill-opacity: 0.35; } 25% { fill: var(--bs-danger); fill-opacity: 0.5; } 50% { fill: var(--bs-success); fill-opacity: 0.7; } 100% { fill: var(--bs-warning); fill-opacity: 0.5; } } @keyframes animateBackgroundColor { 0% { background-color: rgba(var(--bs-primary-rgb), 0.25); } 25% { background-color: rgba(var(--bs-success-rgb), 0.25); } 50% { background-color: rgba(var(--bs-info-rgb), 0.25); } 75% { background-color: rgba(var(--bs-warnign-rgb), 0.25); } 100% { background-color: rgba(var(--bs-danger-rgb), 0.25); } } @keyframes upDown { 0% { transform: translateY(0); } 50% { transform: translateY(5%); } 100% { transform: translateX(0); } } @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes hidePreloader { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* Background Section */ .bg-primary-emphasis { background-color: var(--bs-primary-text-emphasis) !important; } .bg-secondary-emphasis { background-color: var(--bs-secondary-text-emphasis) !important; } .bg-success-emphasis { background-color: var(--bs-success-text-emphasis) !important; } .bg-danger-emphasis { background-color: var(--bs-danger-text-emphasis) !important; } .bg-warning-emphasis { background-color: var(--bs-warning-text-emphasis) !important; } .bg-info-emphasis { background-color: var(--bs-info-text-emphasis) !important; } .bg-light-emphasis { background-color: var(--bs-light-text-emphasis) !important; } .bg-dark-emphasis { background-color: var(--bs-dark-text-emphasis) !important; } .bg-gradient-line { background-image: linear-gradient(180deg, var(--bs-dark-bg-subtle), var(--bs-dark)) !important; } .bg-gradient-linear { background-image: linear-gradient(90deg, rgba(136, 91, 253, 0.8) 0%, rgba(99, 40, 255, 0.8) 68.76%) !important; } .bg-gradient-1 { background-image: linear-gradient(180deg, #5383ff 0%, #5135ff 100%) !important; } .bg-gradient-2 { background-image: linear-gradient(0deg, var(--bs-primary) 20%, var(--bs-white) 65%) !important; } .bg-dark-saas { --bs-bg-opacity: 1; background-color: rgba(var(--dark-saas-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-body:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-body-secondary:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-body-tertiary:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-black:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-white:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-transparent:hover { --bs-bg-opacity: 1; background-color: transparent !important; } .hover\:bg-primary:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-primary-subtle:hover { background-color: var(--bs-primary-bg-subtle) !important; } .hover\:bg-primary-emphasis:hover { background-color: var(--bs-primary-text-emphasis) !important; } .hover\:bg-secondary:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-secondary-subtle:hover { background-color: var(--bs-secondary-bg-subtle) !important; } .hover\:bg-secondary-emphasis:hover { background-color: var(--bs-secondary-text-emphasis) !important; } .hover\:bg-success:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-success-subtle:hover { background-color: var(--bs-success-bg-subtle) !important; } .hover\:bg-success-emphasis:hover { background-color: var(--bs-success-text-emphasis) !important; } .hover\:bg-danger:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-danger-subtle:hover { background-color: var(--bs-danger-bg-subtle) !important; } .hover\:bg-danger-emphasis:hover { background-color: var(--bs-danger-text-emphasis) !important; } .hover\:bg-warning:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-warning-subtle:hover { background-color: var(--bs-warning-bg-subtle) !important; } .hover\:bg-warning-emphasis:hover { background-color: var(--bs-warning-text-emphasis) !important; } .hover\:bg-info:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-info-subtle:hover { background-color: var(--bs-info-bg-subtle) !important; } .hover\:bg-info-emphasis:hover { background-color: var(--bs-info-text-emphasis) !important; } .hover\:bg-light:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-light-subtle:hover { background-color: var(--bs-light-bg-subtle) !important; } .hover\:bg-light-emphasis:hover { background-color: var(--bs-light-text-emphasis) !important; } .hover\:bg-dark:hover { --bs-bg-opacity: 1; background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; } .hover\:bg-dark-subtle:hover { background-color: var(--bs-dark-bg-subtle) !important; } .hover\:bg-dark-emphasis:hover { background-color: var(--bs-dark-text-emphasis) !important; } .hover\:bg-gradient-line:hover { background-image: linear-gradient(180deg, var(--bs-dark-bg-subtle), var(--bs-dark)) !important; } .hover\:bg-gradient-linear:hover { background-image: linear-gradient(90deg, rgba(136, 91, 253, 0.8) 0%, rgba(99, 40, 255, 0.8) 68.76%) !important; } .hover\:bg-gradient-1:hover { background-image: linear-gradient(180deg, #5383ff 0%, #5135ff 100%) !important; } .hover\:bg-gradient-2:hover { background-image: linear-gradient(0deg, var(--bs-primary) 20%, var(--bs-white) 65%) !important; } .hover\:bg-dark-saas:hover { --bs-bg-opacity: 1; background-color: rgba(var(--dark-saas-rgb), var(--bs-bg-opacity)) !important; } .bg-opacity-0 { --bs-bg-opacity: 0; } .bg-opacity-5 { --bs-bg-opacity: 0.05; } .bg-opacity-10 { --bs-bg-opacity: 0.1; } .bg-opacity-20 { --bs-bg-opacity: 0.2; } .bg-opacity-30 { --bs-bg-opacity: 0.3; } .bg-opacity-40 { --bs-bg-opacity: 0.4; } .bg-opacity-50 { --bs-bg-opacity: 0.5; } .bg-opacity-60 { --bs-bg-opacity: 0.6; } .bg-opacity-70 { --bs-bg-opacity: 0.7; } .bg-opacity-80 { --bs-bg-opacity: 0.8; } .bg-opacity-90 { --bs-bg-opacity: 0.9; } .bg-opacity-95 { --bs-bg-opacity: 0.95; } .bg-opacity-97 { --bs-bg-opacity: 0.97; } .bg-opacity-100 { --bs-bg-opacity: 1; } .hover\:bg-opacity-0:hover { --bs-bg-opacity: 0; } .hover\:bg-opacity-5:hover { --bs-bg-opacity: 0.05; } .hover\:bg-opacity-10:hover { --bs-bg-opacity: 0.1; } .hover\:bg-opacity-20:hover { --bs-bg-opacity: 0.2; } .hover\:bg-opacity-30:hover { --bs-bg-opacity: 0.3; } .hover\:bg-opacity-40:hover { --bs-bg-opacity: 0.4; } .hover\:bg-opacity-50:hover { --bs-bg-opacity: 0.5; } .hover\:bg-opacity-60:hover { --bs-bg-opacity: 0.6; } .hover\:bg-opacity-70:hover { --bs-bg-opacity: 0.7; } .hover\:bg-opacity-80:hover { --bs-bg-opacity: 0.8; } .hover\:bg-opacity-90:hover { --bs-bg-opacity: 0.9; } .hover\:bg-opacity-95:hover { --bs-bg-opacity: 0.95; } .hover\:bg-opacity-97:hover { --bs-bg-opacity: 0.97; } .hover\:bg-opacity-100:hover { --bs-bg-opacity: 1; } /* Color Section */ .text-primary-subtle { color: var(--bs-primary-bg-subtle) !important; } .text-secondary-subtle { color: var(--bs-secondary-bg-subtle) !important; } .text-success-subtle { color: var(--bs-success-bg-subtle) !important; } .text-danger-subtle { color: var(--bs-danger-bg-subtle) !important; } .text-warning-subtle { color: var(--bs-warning-bg-subtle) !important; } .text-info-subtle { color: var(--bs-info-bg-subtle) !important; } .text-light-subtle { color: var(--bs-light-bg-subtle) !important; } .text-dark-subtle { color: var(--bs-dark-bg-subtle) !important; } .text-heading { color: var(--bs-heading-color) !important; } .hover\:text-heading:hover { color: var(--bs-heading-color) !important; } .hover\:text-body:hover { --bs-text-opacity: 1; color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } .hover\:text-body-emphasis:hover { --bs-text-opacity: 1; color: var(--bs-emphasis-color) !important; } .hover\:text-body-secondary:hover { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .hover\:text-body-tertiary:hover { --bs-text-opacity: 1; color: var(--bs-tertiary-color) !important; } .hover\:text-black:hover { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .hover\:text-white:hover { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .hover\:text-primary:hover { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } .hover\:text-primary-emphasis:hover { color: var(--bs-primary-text-emphasis) !important; } .hover\:text-primary-subtle:hover { color: var(--bs-primary-bg-subtle) !important; } .hover\:text-secondary:hover { --bs-text-opacity: 1; color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } .hover\:text-secondary-emphasis:hover { color: var(--bs-secondary-text-emphasis) !important; } .hover\:text-secondary-subtle:hover { color: var(--bs-secondary-bg-subtle) !important; } .hover\:text-success:hover { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .hover\:text-success-emphasis:hover { color: var(--bs-success-text-emphasis) !important; } .hover\:text-success-subtle:hover { color: var(--bs-success-bg-subtle) !important; } .hover\:text-danger:hover { --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } .hover\:text-danger-emphasis:hover { color: var(--bs-danger-text-emphasis) !important; } .hover\:text-danger-subtle:hover { color: var(--bs-danger-bg-subtle) !important; } .hover\:text-warning:hover { --bs-text-opacity: 1; color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } .hover\:text-warning-emphasis:hover { color: var(--bs-warning-text-emphasis) !important; } .hover\:text-warning-subtle:hover { color: var(--bs-warning-bg-subtle) !important; } .hover\:text-info:hover { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } .hover\:text-info-emphasis:hover { color: var(--bs-info-text-emphasis) !important; } .hover\:text-info-subtle:hover { color: var(--bs-info-bg-subtle) !important; } .hover\:text-light:hover { --bs-text-opacity: 1; color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } .hover\:text-light-emphasis:hover { color: var(--bs-light-text-emphasis) !important; } .hover\:text-light-subtle:hover { color: var(--bs-light-bg-subtle) !important; } .hover\:text-dark:hover { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .hover\:text-dark-emphasis:hover { color: var(--bs-dark-text-emphasis) !important; } .hover\:text-dark-subtle:hover { color: var(--bs-dark-bg-subtle) !important; } .placeholder\:\:text-body::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-body::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-body-emphasis::-moz-placeholder { --bs-text-opacity: 1; color: var(--bs-emphasis-color) !important; } .placeholder\:\:text-body-emphasis::placeholder { --bs-text-opacity: 1; color: var(--bs-emphasis-color) !important; } .placeholder\:\:text-body-secondary::-moz-placeholder { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .placeholder\:\:text-body-secondary::placeholder { --bs-text-opacity: 1; color: var(--bs-secondary-color) !important; } .placeholder\:\:text-body-tertiary::-moz-placeholder { --bs-text-opacity: 1; color: var(--bs-tertiary-color) !important; } .placeholder\:\:text-body-tertiary::placeholder { --bs-text-opacity: 1; color: var(--bs-tertiary-color) !important; } .placeholder\:\:text-black::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-black::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-white::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-white::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-primary::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-primary::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-primary-emphasis::-moz-placeholder { color: var(--bs-primary-text-emphasis) !important; } .placeholder\:\:text-primary-emphasis::placeholder { color: var(--bs-primary-text-emphasis) !important; } .placeholder\:\:text-primary-subtle::-moz-placeholder { color: var(--bs-primary-bg-subtle) !important; } .placeholder\:\:text-primary-subtle::placeholder { color: var(--bs-primary-bg-subtle) !important; } .placeholder\:\:text-secondary::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-secondary::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-secondary-emphasis::-moz-placeholder { color: var(--bs-secondary-text-emphasis) !important; } .placeholder\:\:text-secondary-emphasis::placeholder { color: var(--bs-secondary-text-emphasis) !important; } .placeholder\:\:text-secondary-subtle::-moz-placeholder { color: var(--bs-secondary-bg-subtle) !important; } .placeholder\:\:text-secondary-subtle::placeholder { color: var(--bs-secondary-bg-subtle) !important; } .placeholder\:\:text-success::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-success::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-success-emphasis::-moz-placeholder { color: var(--bs-success-text-emphasis) !important; } .placeholder\:\:text-success-emphasis::placeholder { color: var(--bs-success-text-emphasis) !important; } .placeholder\:\:text-success-subtle::-moz-placeholder { color: var(--bs-success-bg-subtle) !important; } .placeholder\:\:text-success-subtle::placeholder { color: var(--bs-success-bg-subtle) !important; } .placeholder\:\:text-danger::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-danger::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-danger-emphasis::-moz-placeholder { color: var(--bs-danger-text-emphasis) !important; } .placeholder\:\:text-danger-emphasis::placeholder { color: var(--bs-danger-text-emphasis) !important; } .placeholder\:\:text-danger-subtle::-moz-placeholder { color: var(--bs-danger-bg-subtle) !important; } .placeholder\:\:text-danger-subtle::placeholder { color: var(--bs-danger-bg-subtle) !important; } .placeholder\:\:text-warning::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-warning::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-warning-emphasis::-moz-placeholder { color: var(--bs-warning-text-emphasis) !important; } .placeholder\:\:text-warning-emphasis::placeholder { color: var(--bs-warning-text-emphasis) !important; } .placeholder\:\:text-warning-subtle::-moz-placeholder { color: var(--bs-warning-bg-subtle) !important; } .placeholder\:\:text-warning-subtle::placeholder { color: var(--bs-warning-bg-subtle) !important; } .placeholder\:\:text-info::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-info::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-info-emphasis::-moz-placeholder { color: var(--bs-info-text-emphasis) !important; } .placeholder\:\:text-info-emphasis::placeholder { color: var(--bs-info-text-emphasis) !important; } .placeholder\:\:text-info-subtle::-moz-placeholder { color: var(--bs-info-bg-subtle) !important; } .placeholder\:\:text-info-subtle::placeholder { color: var(--bs-info-bg-subtle) !important; } .placeholder\:\:text-light::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-light::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-light-emphasis::-moz-placeholder { color: var(--bs-light-text-emphasis) !important; } .placeholder\:\:text-light-emphasis::placeholder { color: var(--bs-light-text-emphasis) !important; } .placeholder\:\:text-light-subtle::-moz-placeholder { color: var(--bs-light-bg-subtle) !important; } .placeholder\:\:text-light-subtle::placeholder { color: var(--bs-light-bg-subtle) !important; } .placeholder\:\:text-dark::-moz-placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-dark::placeholder { --bs-text-opacity: 1; color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } .placeholder\:\:text-dark-emphasis::-moz-placeholder { color: var(--bs-dark-text-emphasis) !important; } .placeholder\:\:text-dark-emphasis::placeholder { color: var(--bs-dark-text-emphasis) !important; } .placeholder\:\:text-dark-subtle::-moz-placeholder { color: var(--bs-dark-bg-subtle) !important; } .placeholder\:\:text-dark-subtle::placeholder { color: var(--bs-dark-bg-subtle) !important; } .text-opacity-0 { --bs-text-opacity: 0; } .text-opacity-5 { --bs-text-opacity: 0.05; } .text-opacity-10 { --bs-text-opacity: 0.1; } .text-opacity-20 { --bs-text-opacity: 0.2; } .text-opacity-30 { --bs-text-opacity: 0.3; } .text-opacity-40 { --bs-text-opacity: 0.4; } .text-opacity-50 { --bs-text-opacity: 0.5; } .text-opacity-60 { --bs-text-opacity: 0.6; } .text-opacity-70 { --bs-text-opacity: 0.7; } .text-opacity-80 { --bs-text-opacity: 0.8; } .text-opacity-90 { --bs-text-opacity: 0.9; } .text-opacity-95 { --bs-text-opacity: 0.95; } .text-opacity-97 { --bs-text-opacity: 0.97; } .text-opacity-100 { --bs-text-opacity: 1; } .hover\:text-opacity-0:hover { --bs-text-opacity: 0; } .hover\:text-opacity-5:hover { --bs-text-opacity: 0.05; } .hover\:text-opacity-10:hover { --bs-text-opacity: 0.1; } .hover\:text-opacity-20:hover { --bs-text-opacity: 0.2; } .hover\:text-opacity-30:hover { --bs-text-opacity: 0.3; } .hover\:text-opacity-40:hover { --bs-text-opacity: 0.4; } .hover\:text-opacity-50:hover { --bs-text-opacity: 0.5; } .hover\:text-opacity-60:hover { --bs-text-opacity: 0.6; } .hover\:text-opacity-70:hover { --bs-text-opacity: 0.7; } .hover\:text-opacity-80:hover { --bs-text-opacity: 0.8; } .hover\:text-opacity-90:hover { --bs-text-opacity: 0.9; } .hover\:text-opacity-95:hover { --bs-text-opacity: 0.95; } .hover\:text-opacity-97:hover { --bs-text-opacity: 0.97; } .hover\:text-opacity-100:hover { --bs-text-opacity: 1; } .placeholder\:\:text-opacity-5::-moz-placeholder { --bs-text-opacity: 0.05; } .placeholder\:\:text-opacity-5::placeholder { --bs-text-opacity: 0.05; } .placeholder\:\:text-opacity-10::-moz-placeholder { --bs-text-opacity: 0.1; } .placeholder\:\:text-opacity-10::placeholder { --bs-text-opacity: 0.1; } .placeholder\:\:text-opacity-20::-moz-placeholder { --bs-text-opacity: 0.2; } .placeholder\:\:text-opacity-20::placeholder { --bs-text-opacity: 0.2; } .placeholder\:\:text-opacity-30::-moz-placeholder { --bs-text-opacity: 0.3; } .placeholder\:\:text-opacity-30::placeholder { --bs-text-opacity: 0.3; } .placeholder\:\:text-opacity-40::-moz-placeholder { --bs-text-opacity: 0.4; } .placeholder\:\:text-opacity-40::placeholder { --bs-text-opacity: 0.4; } .placeholder\:\:text-opacity-50::-moz-placeholder { --bs-text-opacity: 0.5; } .placeholder\:\:text-opacity-50::placeholder { --bs-text-opacity: 0.5; } .placeholder\:\:text-opacity-60::-moz-placeholder { --bs-text-opacity: 0.6; } .placeholder\:\:text-opacity-60::placeholder { --bs-text-opacity: 0.6; } .placeholder\:\:text-opacity-70::-moz-placeholder { --bs-text-opacity: 0.7; } .placeholder\:\:text-opacity-70::placeholder { --bs-text-opacity: 0.7; } .placeholder\:\:text-opacity-80::-moz-placeholder { --bs-text-opacity: 0.8; } .placeholder\:\:text-opacity-80::placeholder { --bs-text-opacity: 0.8; } .placeholder\:\:text-opacity-90::-moz-placeholder { --bs-text-opacity: 0.9; } .placeholder\:\:text-opacity-90::placeholder { --bs-text-opacity: 0.9; } .placeholder\:\:text-opacity-95::-moz-placeholder { --bs-text-opacity: 0.95; } .placeholder\:\:text-opacity-95::placeholder { --bs-text-opacity: 0.95; } .placeholder\:\:text-opacity-97::-moz-placeholder { --bs-text-opacity: 0.97; } .placeholder\:\:text-opacity-97::placeholder { --bs-text-opacity: 0.97; } .placeholder\:\:text-opacity-100::-moz-placeholder { --bs-text-opacity: 1; } .placeholder\:\:text-opacity-100::placeholder { --bs-text-opacity: 1; } /* Dark Theme Variables */ [data-bs-theme=dark] { --bs-body-bg: #0d0e10; /* Cores primárias e secundárias existentes (mantidas) */ --bs-primary-bg-subtle: #15063f; --bs-primary-text-emphasis: #efeaff; --bs-secondary-bg-subtle: #03063a; --bs-secondary-text-emphasis: #f6f7fd; --bs-danger-bg-subtle: #971837; --bs-danger-text-emphasis: #feeaef; --bs-warning-bg-subtle: #966c00; --bs-warning-text-emphasis: #fef7e6; /* Sucesso - Alterado de verde para azul moderno */ --bs-success-bg-subtle: #1E3A8A; /* Azul moderno escuro para fundo (era #044d1d) */ --bs-success-text-emphasis: #BFDBFE; /* Azul moderno claro para texto (era #e8f9ee) */ --bs-info-bg-subtle: #024153; /* Ciano/Azul escuro (mantido) */ --bs-info-text-emphasis: #e6f9ff; /* Ciano/Azul claro para texto (mantido) */ --bs-light-bg-subtle: #495058; --bs-light-text-emphasis: #f8f9fa; --bs-dark-bg-subtle: #0d0e10; --bs-dark-text-emphasis: #ced4da; --bs-box-shadow: 0px 10px 20px -4px rgba(0, 0, 0, 0.25); /* Sombra ajustada para tema escuro */ --bs-box-shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15); --bs-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15); /* Tema "demo" - Alterado de verde para azul moderno */ /* Tema "home-2" - Mantido (roxo-azulado) */ /* Tema "home-3" - Alterado de verde para azul moderno */ /* Tema "home-4" - Mantido (azul) */ /* Tema "home-6" - Mantido (laranja) */ } [data-bs-theme=dark][data-theme=demo] { --bs-primary: #60A5FA; /* Azul moderno vibrante para botões/links (era #c7f32f) */ --bs-primary-rgb: 96, 165, 250; /* RGB do azul moderno (era 199, 243, 47) */ --bs-primary-text-emphasis: #D1E3FF; /* Azul moderno claro para texto (era #f9feea) */ --bs-primary-bg-subtle: #1E40AF; /* Azul moderno escuro para fundo (era #79941d) */ --bs-primary-border-subtle: #1E40AF; } [data-bs-theme=dark][data-theme=home-2] { --bs-primary: #6328ff; --bs-primary-rgb: 99, 40, 255; --bs-primary-text-emphasis: #efeaff; --bs-primary-bg-subtle: #15063f; --bs-primary-border-subtle: #15063f; } [data-bs-theme=dark][data-theme=home-3] { --bs-primary: #60A5FA; /* Azul moderno vibrante para botões/links (era #c7f32f) */ --bs-primary-rgb: 96, 165, 250; /* RGB do azul moderno (era 199, 243, 47) */ --bs-primary-text-emphasis: #D1E3FF; /* Azul moderno claro para texto (era #f6ffdb) */ --bs-primary-bg-subtle: #1E40AF; /* Azul moderno escuro para fundo (era #79941d) */ --bs-primary-border-subtle: #1E40AF; } [data-bs-theme=dark][data-theme=home-4] { --bs-primary: #5c65ff; --bs-primary-rgb: 92, 101, 255; --bs-primary-text-emphasis: #f6f7fd; --bs-primary-bg-subtle: #03063a; --bs-primary-border-subtle: #03063a; } [data-bs-theme=dark][data-theme=home-6] { --bs-primary: #f65c34; --bs-primary-rgb: 246, 92, 52; --bs-primary-text-emphasis: #fbbcac; --bs-primary-bg-subtle: #963820; --bs-primary-border-subtle: #963820; --bs-dark: #090a0c; --bs-dark-rgb: 9, 10, 12; } [data-bs-theme=dark] .dark\:d-none { display: none; } [data-bs-theme=dark] .dark\:d-block { display: block; } [data-bs-theme=dark] .dark\:d-inline-block { display: inline-block; } [data-bs-theme=dark] .dark\:filter-invert { filter: invert(1); } /* Light Theme Variables */ [data-bs-theme=light] { /* Cores primárias e secundárias existentes (mantidas, pois já são tons de azul/roxo ou neutros) */ --bs-primary-bg-subtle: #EFEAFF; /* Roxo-azulado claro */ --bs-primary-text-emphasis: #15063F; /* Roxo-azulado escuro */ --bs-secondary-bg-subtle: #F6F7FD; /* Azul muito claro */ --bs-secondary-text-emphasis: #03063A; /* Azul escuro */ --bs-danger-bg-subtle: #FEEAEF; --bs-danger-text-emphasis: #971837; --bs-warning-bg-subtle: #FEF7E6; --bs-warning-text-emphasis: #966C00; /* Sucesso - Alterado de verde para azul moderno */ --bs-success-bg-subtle: #EFF6FF; /* Azul moderno muito claro (era #E8F9EE) */ --bs-success-text-emphasis: #1E40AF; /* Azul moderno escuro para ênfase (era #044D1D) */ --bs-info-bg-subtle: #E6F9FF; /* Ciano/Azul claro (mantido) */ --bs-info-text-emphasis: #024153; /* Ciano/Azul escuro para ênfase (mantido) */ --bs-light-bg-subtle: #F8F9FA; --bs-light-text-emphasis: #495058; --bs-dark-bg-subtle: #CED4DA; --bs-dark-text-emphasis: #0D0E10; --bs-box-shadow: 0px 10px 20px -4px rgba(145, 158, 171, 0.16); --bs-box-shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --bs-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Tema "demo" - Alterado de verde para azul moderno */ /* Tema "home-2" - Mantido (já é roxo-azulado) */ /* Tema "home-3" - Alterado de verde para azul moderno */ /* Tema "home-4" - Mantido (já é azul) */ /* Tema "home-6" - Mantido (laranja, não é o foco da alteração verde -> azul) */ } [data-bs-theme=light][data-theme=demo] { --bs-primary: #3B82F6; /* Azul moderno (era #c7f32f) */ --bs-primary-rgb: 59, 130, 246; /* RGB do azul moderno (era 199, 243, 47) */ --bs-primary-text-emphasis: #1E40AF; /* Azul moderno escuro para ênfase (era #79941d) */ --bs-primary-bg-subtle: #EFF6FF; /* Azul moderno muito claro (era #f9feea) */ --bs-primary-border-subtle: #D1E3FF; /* Azul moderno claro para borda (era #f9feea, pode ajustar se necessário) */ } [data-bs-theme=light][data-theme=home-2] { --bs-primary: #6328ff; --bs-primary-rgb: 99, 40, 255; --bs-primary-text-emphasis: #15063f; --bs-primary-bg-subtle: #efeaff; --bs-primary-border-subtle: #efeaff; } [data-bs-theme=light][data-theme=home-3] { --bs-primary: #3B82F6; /* Azul moderno (era #c7f32f) */ --bs-primary-rgb: 59, 130, 246; /* RGB do azul moderno (era 199, 243, 47) */ --bs-primary-text-emphasis: #1E40AF; /* Azul moderno escuro para ênfase (era #79941d) */ --bs-primary-bg-subtle: #EFF6FF; /* Azul moderno muito claro (era #f6ffdb) */ --bs-primary-border-subtle: #D1E3FF; /* Azul moderno claro para borda (era #f6ffdb, pode ajustar se necessário) */ } [data-bs-theme=light][data-theme=home-4] { --bs-primary: #5c65ff; --bs-primary-rgb: 92, 101, 255; --bs-primary-text-emphasis: #03063a; --bs-primary-bg-subtle: #f6f7fd; --bs-primary-border-subtle: #f6f7fd; } [data-bs-theme=light][data-theme=home-6] { --bs-primary: #f65c34; --bs-primary-rgb: 246, 92, 52; --bs-primary-text-emphasis: #963820; --bs-primary-bg-subtle: #fbbcac; --bs-primary-border-subtle: #fbbcac; --bs-dark: #090a0c; --bs-dark-rgb: 9, 10, 12; } [data-bs-theme=light] .light\:d-none { display: none; } [data-bs-theme=light] .light\:d-block { display: block; } [data-bs-theme=light] .light\:d-inline-block { display: inline-block; } [data-bs-theme=light] .light:filter-invert { filter: invert(1); } /* Border Section */ .border-primary-emphasis { border-color: var(--bs-primary-text-emphasis) !important; } .border-secondary-emphasis { border-color: var(--bs-secondary-text-emphasis) !important; } .border-success-emphasis { border-color: var(--bs-success-text-emphasis) !important; } .border-danger-emphasis { border-color: var(--bs-danger-text-emphasis) !important; } .border-warning-emphasis { border-color: var(--bs-warning-text-emphasis) !important; } .border-info-emphasis { border-color: var(--bs-info-text-emphasis) !important; } .border-light-emphasis { border-color: var(--bs-light-text-emphasis) !important; } .border-dark-emphasis { border-color: var(--bs-dark-text-emphasis) !important; } .hover\:border-primary:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } .hover\:border-primary-subtle:hover { border-color: var(--bs-primary-border-subtle) !important; } .hover\:border-primary-emphasis:hover { border-color: var(--bs-primary-text-emphasis) !important; } .hover\:border-secondary:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; } .hover\:border-secondary-subtle:hover { border-color: var(--bs-secondary-border-subtle) !important; } .hover\:border-secondary-emphasis:hover { border-color: var(--bs-secondary-text-emphasis) !important; } .hover\:border-success:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; } .hover\:border-success-subtle:hover { border-color: var(--bs-success-border-subtle) !important; } .hover\:border-success-emphasis:hover { border-color: var(--bs-success-text-emphasis) !important; } .hover\:border-danger:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; } .hover\:border-danger-subtle:hover { border-color: var(--bs-danger-border-subtle) !important; } .hover\:border-danger-emphasis:hover { border-color: var(--bs-danger-text-emphasis) !important; } .hover\:border-warning:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; } .hover\:border-warning-subtle:hover { border-color: var(--bs-warning-border-subtle) !important; } .hover\:border-warning-emphasis:hover { border-color: var(--bs-warning-text-emphasis) !important; } .hover\:border-info:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; } .hover\:border-info-subtle:hover { border-color: var(--bs-info-border-subtle) !important; } .hover\:border-info-emphasis:hover { border-color: var(--bs-info-text-emphasis) !important; } .hover\:border-light:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; } .hover\:border-light-subtle:hover { border-color: var(--bs-light-border-subtle) !important; } .hover\:border-light-emphasis:hover { border-color: var(--bs-light-text-emphasis) !important; } .hover\:border-dark:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; } .hover\:border-dark-subtle:hover { border-color: var(--bs-dark-border-subtle) !important; } .hover\:border-dark-emphasis:hover { border-color: var(--bs-dark-text-emphasis) !important; } .hover\:border-black:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } .hover\:border-white:hover { --bs-border-opacity: 1; border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } .border-2x { --bs-border-width: 0.125rem; } .border-4x { --bs-border-width: 0.25rem; } .border-dotted { --bs-border-style: dotted; } .border-dashed { --bs-border-style: dashed; } .border-opacity-5 { --bs-border-opacity: 0.05; } .border-opacity-10 { --bs-border-opacity: 0.1; } .border-opacity-20 { --bs-border-opacity: 0.2; } .border-opacity-30 { --bs-border-opacity: 0.3; } .border-opacity-40 { --bs-border-opacity: 0.4; } .border-opacity-50 { --bs-border-opacity: 0.5; } .border-opacity-60 { --bs-border-opacity: 0.6; } .border-opacity-70 { --bs-border-opacity: 0.7; } .border-opacity-80 { --bs-border-opacity: 0.8; } .border-opacity-90 { --bs-border-opacity: 0.9; } .border-opacity-95 { --bs-border-opacity: 0.95; } .border-opacity-100 { --bs-border-opacity: 1; } .hover\:border-opacity-5:hover { --bs-border-opacity: 0.05; } .hover\:border-opacity-10:hover { --bs-border-opacity: 0.1; } .hover\:border-opacity-20:hover { --bs-border-opacity: 0.2; } .hover\:border-opacity-30:hover { --bs-border-opacity: 0.3; } .hover\:border-opacity-40:hover { --bs-border-opacity: 0.4; } .hover\:border-opacity-50:hover { --bs-border-opacity: 0.5; } .hover\:border-opacity-60:hover { --bs-border-opacity: 0.6; } .hover\:border-opacity-70:hover { --bs-border-opacity: 0.7; } .hover\:border-opacity-80:hover { --bs-border-opacity: 0.8; } .hover\:border-opacity-90:hover { --bs-border-opacity: 0.9; } .hover\:border-opacity-95:hover { --bs-border-opacity: 0.95; } .hover\:border-opacity-100:hover { --bs-border-opacity: 1; } /* Outline Styles */ .outline { --outline-width: 1px; --outline-style: solid; --outline-color: var(--bs-border-color); outline: var(--outline-width) var(--outline-style) var(--outline-color); } .outline-primary { --outline-opacity: 1; --outline-color: rgba(var(--bs-primary-rgb), var(--outline-opacity)); } .outline-primary-subtle { --outline-color: var(--bs-primary-bg-subtle); } .outline-primary-emphasis { --outline-color: var(--bs-primary-text-emphasis); } .outline-secondary { --outline-opacity: 1; --outline-color: rgba(var(--bs-secondary-rgb), var(--outline-opacity)); } .outline-secondary-subtle { --outline-color: var(--bs-secondary-bg-subtle); } .outline-secondary-emphasis { --outline-color: var(--bs-secondary-text-emphasis); } .outline-success { --outline-opacity: 1; --outline-color: rgba(var(--bs-success-rgb), var(--outline-opacity)); } .outline-success-subtle { --outline-color: var(--bs-success-bg-subtle); } .outline-success-emphasis { --outline-color: var(--bs-success-text-emphasis); } .outline-danger { --outline-opacity: 1; --outline-color: rgba(var(--bs-danger-rgb), var(--outline-opacity)); } .outline-danger-subtle { --outline-color: var(--bs-danger-bg-subtle); } .outline-danger-emphasis { --outline-color: var(--bs-danger-text-emphasis); } .outline-warning { --outline-opacity: 1; --outline-color: rgba(var(--bs-warning-rgb), var(--outline-opacity)); } .outline-warning-subtle { --outline-color: var(--bs-warning-bg-subtle); } .outline-warning-emphasis { --outline-color: var(--bs-warning-text-emphasis); } .outline-info { --outline-opacity: 1; --outline-color: rgba(var(--bs-info-rgb), var(--outline-opacity)); } .outline-info-subtle { --outline-color: var(--bs-info-bg-subtle); } .outline-info-emphasis { --outline-color: var(--bs-info-text-emphasis); } .outline-light { --outline-opacity: 1; --outline-color: rgba(var(--bs-light-rgb), var(--outline-opacity)); } .outline-light-subtle { --outline-color: var(--bs-light-bg-subtle); } .outline-light-emphasis { --outline-color: var(--bs-light-text-emphasis); } .outline-dark { --outline-opacity: 1; --outline-color: rgba(var(--bs-dark-rgb), var(--outline-opacity)); } .outline-dark-subtle { --outline-color: var(--bs-dark-bg-subtle); } .outline-dark-emphasis { --outline-color: var(--bs-dark-text-emphasis); } .outline-2x { --outline-width: 2px; } .outline-4x { --outline-width: 4px; } .outline-6x { --outline-width: 6px; } .outline-8x { --outline-width: 8px; } .outline-dotted { --outline-style: dotted; } .outline-dashed { --outline-style: dashed; } .outline-opacity-5 { --outline-opacity: 0.05; } .outline-opacity-10 { --outline-opacity: 0.1; } .outline-opacity-20 { --outline-opacity: 0.2; } .outline-opacity-30 { --outline-opacity: 0.3; } .outline-opacity-40 { --outline-opacity: 0.4; } .outline-opacity-50 { --outline-opacity: 0.5; } .outline-opacity-60 { --outline-opacity: 0.6; } .outline-opacity-70 { --outline-opacity: 0.7; } .outline-opacity-80 { --outline-opacity: 0.8; } .outline-opacity-90 { --outline-opacity: 0.9; } .outline-opacity-100 { --outline-opacity: 1; } .hover\:outline-primary:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-primary-rgb) / var(--outline-opacity)); } .hover\:outline-primary-subtle:hover { --outline-color: var(--bs-primary-bg-subtle); } .hover\:outline-primary-emphasis:hover { --outline-color: var(--bs-primary-text-emphasis); } .hover\:outline-secondary:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-secondary-rgb), var(--outline-opacity)); } .hover\:outline-secondary-subtle:hover { --outline-color: var(--bs-secondary-bg-subtle); } .hover\:outline-secondary-emphasis:hover { --outline-color: var(--bs-secondary-text-emphasis); } .hover\:outline-success:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-success-rgb), var(--outline-opacity)); } .hover\:outline-success-subtle:hover { --outline-color: var(--bs-success-bg-subtle); } .hover\:outline-success-emphasis:hover { --outline-color: var(--bs-success-text-emphasis); } .hover\:outline-danger:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-danger-rgb), var(--outline-opacity)); } .hover\:outline-danger-subtle:hover { --outline-color: var(--bs-danger-bg-subtle); } .hover\:outline-danger-emphasis:hover { --outline-color: var(--bs-danger-text-emphasis); } .hover\:outline-warning:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-warning-rgb), var(--outline-opacity)); } .hover\:outline-warning-subtle:hover { --outline-color: var(--bs-warning-bg-subtle); } .hover\:outline-warning-emphasis:hover { --outline-color: var(--bs-warning-text-emphasis); } .hover\:outline-info:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-info-rgb), var(--outline-opacity)); } .hover\:outline-info-subtle:hover { --outline-color: var(--bs-info-bg-subtle); } .hover\:outline-info-emphasis:hover { --outline-color: var(--bs-info-text-emphasis); } .hover\:outline-light:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-light-rgb), var(--outline-opacity)); } .hover\:outline-light-subtle:hover { --outline-color: var(--bs-light-bg-subtle); } .hover\:outline-light-emphasis:hover { --outline-color: var(--bs-light-text-emphasis); } .hover\:outline-dark:hover { --outline-opacity: 1; --outline-color: rgba(var(--bs-dark-rgb), var(--outline-opacity)); } .hover\:outline-dark-subtle:hover { --outline-color: var(--bs-dark-bg-subtle); } .hover\:outline-dark-emphasis:hover { --outline-color: var(--bs-dark-text-emphasis); } .hover\:outline-opacity-5:hover { --outline-opacity: 0.05; } .hover\:outline-opacity-10:hover { --outline-opacity: 0.1; } .hover\:outline-opacity-20:hover { --outline-opacity: 0.2; } .hover\:outline-opacity-30:hover { --outline-opacity: 0.3; } .hover\:outline-opacity-40:hover { --outline-opacity: 0.4; } .hover\:outline-opacity-50:hover { --outline-opacity: 0.5; } .hover\:outline-opacity-60:hover { --outline-opacity: 0.6; } .hover\:outline-opacity-70:hover { --outline-opacity: 0.7; } .hover\:outline-opacity-80:hover { --outline-opacity: 0.8; } .hover\:outline-opacity-90:hover { --outline-opacity: 0.9; } .hover\:outline-opacity-100:hover { --outline-opacity: 1; } /* Radius Styles */ .rounded-start-start-0 { border-start-start-radius: 0; } .rounded-start-end-0 { border-start-end-radius: 0; } .rounded-end-start-0 { border-end-start-radius: 0; } .rounded-end-end-0 { border-end-end-radius: 0; } .rounded-start-start-1 { border-start-start-radius: 0.25rem; } .rounded-start-end-1 { border-start-end-radius: 0.25rem; } .rounded-end-start-1 { border-end-start-radius: 0.25rem; } .rounded-end-end-1 { border-end-end-radius: 0.25rem; } .rounded-start-start-2 { border-start-start-radius: 0.5rem; } .rounded-start-end-2 { border-start-end-radius: 0.5rem; } .rounded-end-start-2 { border-end-start-radius: 0.5rem; } .rounded-end-end-2 { border-end-end-radius: 0.5rem; } .rounded-start-start-3 { border-start-start-radius: 0.75rem; } .rounded-start-end-3 { border-start-end-radius: 0.75rem; } .rounded-end-start-3 { border-end-start-radius: 0.75rem; } .rounded-end-end-3 { border-end-end-radius: 0.75rem; } .rounded-start-start-4 { border-start-start-radius: 1rem; } .rounded-start-end-4 { border-start-end-radius: 1rem; } .rounded-end-start-4 { border-end-start-radius: 1rem; } .rounded-end-end-4 { border-end-end-radius: 1rem; } .rounded-start-start-5 { border-start-start-radius: 1.25rem; } .rounded-start-end-5 { border-start-end-radius: 1.25rem; } .rounded-end-start-5 { border-end-start-radius: 1.25rem; } .rounded-end-end-5 { border-end-end-radius: 1.25rem; } /*# sourceMappingURL=style.css.map */