@charset "utf-8";

.modal-content { background-color: rgb(255, 255, 255); border: 0px; }

.blog-featured-image { max-width: 400px; padding: 1rem; border-radius: 1rem; box-shadow: rgb(250, 250, 250) 0px 0px 12px 4px; display: block; margin: 0px auto 3rem; }

.modal-header { border: 0px; }

.modal .btn-close { border-radius: 50%; background-color: var(--blu-colors-white); margin-top: 30px; margin-right: 30px; }

.blu-color-background { background-color: rgb(73, 128, 224); }

.blu-color-text { color: rgb(73, 128, 224); }

.btn-outline-primary { --bs-btn-color: #4980e0; --bs-btn-border-color: #4980e0; --bs-btn-hover-bg: #4980e0; --bs-btn-hover-border-color: #4980e0; --bs-btn-active-bg: #4980e0; --bs-btn-active-border-color: #4980e0; --bs-btn-disabled-color: #4980e0; --bs-btn-disabled-border-color: #4980e0; }

.btn-primary { --bs-btn-color: var(--blu-colors-white); --bs-btn-bg: #4980e0; --bs-btn-border-color: #4980e0; --bs-btn-hover-color: var(--blu-colors-white); --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca; --bs-btn-focus-shadow-rgb: 49 , 132 , 253; --bs-btn-active-color: var(--blu-colors-white); --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be; --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125); --bs-btn-disabled-color: var(--blu-colors-white); --bs-btn-disabled-bg: #4980e0; --bs-btn-disabled-border-color: #4980e0; }

.topbar { }

.navbar-toggler { border: 0px; }

nav { border-bottom: 1px solid rgb(245, 245, 245); color: rgb(44, 44, 44); font-weight: bold; padding-bottom: 0px !important; }

.navbar .megamenu { padding: 1rem; }

.navbar-brand { padding-bottom: 15px; }

.navbar li { padding: 0px 15px; }

.navbar li a { padding: 15px 0px; }

.nav-item-underline::after { display: block; content: ""; border-bottom: 4px solid rgb(67, 123, 227); transform: scaleX(0); transition: transform 300ms ease-in-out; border-radius: 5px 5px 0px 0px; }

.nav-item-underline:hover::after { transform: scaleX(1); }

.dropdown-menu { border: 1px solid rgb(249, 249, 249); box-shadow: rgb(245, 245, 245) 1px 1px 30px; border-radius: 2rem; }

.text-bg-success { background-color: rgb(68, 172, 133); color: var(--blu-colors-white); }

.btn-success { background-color: rgb(68, 172, 133); border: none; }

.nav-item-list li { color: rgb(44, 44, 44); padding: 0.75rem 1rem; font-weight: normal; }

.nav-item-list li:hover { background-color: rgb(237, 244, 252); border-radius: 10px; }

.nav-item-list li:hover a::after { content: "←"; float: left; font-size: 25px; font-weight: bolder; line-height: 1.5rem; color: var(--blu-colors-blue); }

.nav-item-list li a { color: rgb(44, 44, 44); text-decoration: none; }

.nav-item-description li { background-color: rgb(247, 249, 250); border-radius: 10px; padding-bottom: 1rem; padding-top: 1rem; }

.nav-item-icon { padding: 0px 10px; }

.nav-description { color: rgb(113, 142, 156); font-weight: normal; }

.sticky-top { background: var(--blu-colors-white); }

#blu-features-circles { --n: 13; --d: 60s; --w: 100vh; --h: 100vh; width: var(--w); height: var(--w); margin: 40px auto; border: 1px solid rgb(246, 246, 246); display: grid; grid-template-columns: 30px; grid-template-rows: 30px; place-content: center; border-radius: 50%; position: absolute; top: -50%; left: calc(588px - 50vh); z-index: -1; }

.features-icon { grid-area: 1 / 1; line-height: 30px; text-align: center; border-radius: 50%; animation: spin var(--d) linear infinite; transform: rotate(0) translate(calc(var(--h) / 2)) rotate(0); }

@keyframes spin { 
  100% { transform: rotate(1turn) translate(calc(var(--h) / 2)) rotate(-1turn); }
}

.features-icon:nth-child(1) { animation-delay: calc(-0 * var(--d) / var(--n)); }

.features-icon:nth-child(2) { animation-delay: calc(-1 * var(--d) / var(--n)); }

.features-icon:nth-child(3) { animation-delay: calc(-2 * var(--d) / var(--n)); }

.features-icon:nth-child(4) { animation-delay: calc(-3 * var(--d) / var(--n)); }

.features-icon:nth-child(5) { animation-delay: calc(-4 * var(--d) / var(--n)); }

.features-icon:nth-child(6) { animation-delay: calc(-5 * var(--d) / var(--n)); }

.features-icon:nth-child(7) { animation-delay: calc(-6 * var(--d) / var(--n)); }

.features-icon:nth-child(8) { animation-delay: calc(-7 * var(--d) / var(--n)); }

.features-icon:nth-child(9) { animation-delay: calc(-8 * var(--d) / var(--n)); }

.features-icon:nth-child(10) { animation-delay: calc(-9 * var(--d) / var(--n)); }

.features-icon:nth-child(11) { animation-delay: calc(-10 * var(--d) / var(--n)); }

.features-icon:nth-child(12) { animation-delay: calc(-11 * var(--d) / var(--n)); }

.features-icon:nth-child(13) { animation-delay: calc(-12 * var(--d) / var(--n)); }

#back-circles { --header-height: 148px; --container-size: 1176px; --box-size: 100vh; --circle-diameter: 100px; --grow-factor: 1.25; top: -35%; overflow: hidden; width: var(--box-size); height: calc(var(--box-size) - var(--header-height)); position: absolute; left: calc((var(--container-size) - var(--box-size)) / 2); z-index: -1; }

.back-circle-item { border: 1px solid rgb(246, 246, 246); border-radius: 50%; position: absolute; z-index: -1; opacity: 0.9; }

.back-circle-item:nth-child(1) { --circle-size: calc(1 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.back-circle-item:nth-child(2) { --circle-size: calc(2 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.back-circle-item:nth-child(3) { --circle-size: calc(3 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.back-circle-item:nth-child(4) { --circle-size: calc(4 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.back-circle-item:nth-child(5) { --circle-size: calc(5 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.back-circle-item:nth-child(6) { --circle-size: calc(6 * var(--grow-factor) * var(--circle-diameter)); height: var(--circle-size); width: var(--circle-size); top: calc((100% - var(--circle-size)) / 2); left: calc((100% - var(--circle-size)) / 2); }

.blue-back { background-image: url("../icons/Orbit.svg"); background-size: initial; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-position: 70% 0%; background-color: var(--blu-colors-blue); color: var(--blu-colors-white); }

.blue-back li { cursor: pointer; }

.blu-line-chat-group { list-style: none; max-height: 500px; overflow: hidden; }

.blu-line-chat-item { width: 328px; margin-top: 2rem; transition: 300ms; transform: translateY(50px); }

.blu-line-chat-item:nth-child(2n) { direction: ltr; margin-right: 40%; }

.bluLine_chat { display: flex; align-items: center; position: absolute; width: 100%; padding: 0px 12px; opacity: 0; will-change: transform, opacity; animation: 30s linear 0s infinite normal none running carousel-animate-vertical; }

.bluLine_chat-body { width: 100%; border-radius: 8px; padding: 1rem; }

.bluLine_chat-body p { font-size: 14px; margin-top: 10px; color: var(--blu-colors-white); }

.bluLine_chat-body p.title { font-size: 12px; }

.bluLine_chat:nth-child(2n+1) .bluLine_chat-body, .blu-line-chat-item:nth-child(2n+1) .bluLine_chat-body { background-color: rgb(24, 94, 181); color: var(--blu-colors-white); border-radius: 1rem 5px 1rem 1rem; }

.bluLine_chat:nth-child(2n+1) .bluLine_chat-body p.title, .blu-line-chat-item:nth-child(2n+1) .bluLine_chat-body p.title { color: rgb(140, 174, 218); }

.bluLine_chat:nth-child(2n) .bluLine_chat-body, .blu-line-chat-item:nth-child(2n) .bluLine_chat-body { background-color: var(--blu-colors-white); color: var(--blu-colors-blue); border-radius: 5px 1rem 1rem; }

.bluLine_chat:nth-child(2n) .bluLine_chat-body p, .blu-line-chat-item:nth-child(2n) .bluLine_chat-body p { color: var(--blu-colors-blue); text-align: left; }

.bluLine_chat:nth-child(2n) .bluLine_chat-body p.title, .blu-line-chat-item:nth-child(2n) .bluLine_chat-body p.title { color: rgb(140, 174, 218); }

.bluLine_chat:nth-child(1) { animation-delay: calc(-5s); }

.bluLine_chat:nth-child(2) { animation-delay: calc(0s); }

.bluLine_chat:nth-child(3) { animation-delay: calc(5s); }

.bluLine_chat:nth-child(4) { animation-delay: calc(10s); }

.bluLine_chat:nth-child(5) { animation-delay: calc(15s); }

.bluLine_chat:last-child { animation-delay: calc(20s); }

@-webkit-keyframes carousel-animate-vertical { 
  0% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: hidden; }
  3%, 16.6667% { transform: translateY(100%) scale(0.7); opacity: 0.4; visibility: visible; }
  19.6667%, 33.3333% { transform: translateY(0px) scale(1); opacity: 1; visibility: visible; }
  36.3333%, 50% { transform: translateY(-100%) scale(0.7); opacity: 0.4; visibility: visible; }
  53% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: visible; }
  100% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: hidden; }
}

@keyframes carousel-animate-vertical { 
  0% { transform: translateY(100%) scale(0.5); opacity: 0; visibility: hidden; }
  3%, 16.6667% { transform: translateY(100%) scale(0.7); opacity: 0.4; visibility: visible; }
  19.6667%, 33.3333% { transform: translateY(0px) scale(1); opacity: 1; visibility: visible; }
  36.3333%, 50% { transform: translateY(-100%) scale(0.7); opacity: 0.4; visibility: visible; }
  53% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: visible; }
  100% { transform: translateY(-100%) scale(0.5); opacity: 0; visibility: hidden; }
}

.circle { border-radius: 100%; box-shadow: none; }

.circle::before, .circle::after { border-radius: 100%; }

.circle-icon { background-color: var(--blu-colors-white); border-radius: 50%; text-align: center; vertical-align: middle; display: inline-block; width: 22px; height: 22px; margin: 0px 5px 0px 10px; padding: 2px; line-height: 0; border: 2px solid transparent; }

.bluline-description { display: none; }

.show { display: block; }

.visible { visibility: visible; }

button.circle-icon { border: 0px; position: relative; }

button.circle-icon::before, button.circle-icon::after { box-sizing: inherit; content: ""; position: absolute; width: 100%; height: 100%; }

.spin { height: 22px; width: 22px; }

.spin::before, .spin::after { top: 0px; left: 0px; background-color: var(--blu-colors-white); }

.spin::before { border: 2px solid transparent; }

.spin::before { border-top-color: rgb(24, 94, 181); border-right-color: rgb(24, 94, 181); border-bottom-color: rgb(24, 94, 181); transition: border-top-color 0.15s linear, border-right-color 0.15s linear 3.3s, border-bottom-color 0.15s linear 6.6s; }

.spin::after { border: 0px solid transparent; }

.spin::after { border-top: 2px solid rgb(24, 94, 181); border-left-width: 2px; border-right-width: 2px; transform: rotate(270deg); transition: transform 9.5s linear, border-left-width linear 9.45s, -webkit-transform 9.5s linear; }

.circle svg { z-index: 9999; position: relative; }

.circle { border-radius: 100%; box-shadow: none; }

.circle::before, .circle::after { border-radius: 100%; }

.card-section { background: rgb(238, 244, 252); border-radius: 24px; position: relative; overflow: hidden; }

.card-colors-selection { position: absolute; top: 30%; z-index: 999; }

.card-colors-selection ul { padding: 0px; }

.color-selection-item { list-style: none; margin-bottom: 1rem; border: 2px solid rgb(73, 128, 224); width: 40px; height: 40px; border-radius: 50%; text-align: center; vertical-align: middle; cursor: pointer; }

.color-selection { width: 32px; height: 32px; border-radius: 50%; background: rgb(73, 128, 224); margin: 2px; }

@media (max-width: 575.98px) {
  .card-video-section { padding-bottom: 10%; }
  .card-colors-selection { bottom: 0px; width: 100%; text-align: center; top: 80%; }
  .card-colors-selection ul { width: 100%; }
  .card-colors-selection ul li { display: inline-block; }
  .blu-line-chat { height: 300px; margin-top: 100px; }
  .teaser-content { padding-bottom: 350px !important; }
}

.purple-box { background-color: rgb(242, 241, 249); }

.green-box { background-color: rgb(232, 247, 244); }

.red-box { background-color: rgb(250, 242, 244); }

.rounded-box { border-radius: 24px; padding-left: 1rem; margin: 0.25rem !important; }

.rounded-box h2 { line-height: 3rem !important; }

.rounded-box img { float: left; }

.rounded-box-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; background: var(--blu-colors-white); transition: 300ms; }

.rounded-box:hover .btn-flip { transform: scaleX(-1); }

.btn-animated { overflow: hidden; transition: 300ms; padding: 0px 5px; }

.btn-icon { font-size: 14px; }

.rounded-box-btn:hover, .rounded-box:hover .rounded-box-btn { background: rgb(10, 83, 190); }

.btn-animated-text { display: none; white-space: nowrap; padding-left: 15px; transform: translateX(100px); color: var(--blu-colors-white); }

.btn-animated:hover, .rounded-box:hover .btn-animated { width: 180px; transition: 300ms; border-radius: 35px; background: var(--blu-colors-white); }

.btn-animated:hover .btn-animated-text, .rounded-box:hover .btn-animated .btn-animated-text { display: block; position: relative; transition: 300ms; transform: translateX(0px); }

.scaleUp { padding: 50px; margin: 0px auto; }

.scaleUp img { transition: transform 300ms ease-in-out; }

.scaleUp:hover img { transform: scale(1.07); }

.blu-animated .blu-line-chat-item { animation: 20s linear 0s infinite normal none running blu-chat-animate; }

@keyframes blu-chat-animate { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(-500px); }
}

.blu-animated .tweet-go-right { animation: 20s linear 0s infinite normal none running blu-animate-tweet-go-right; }

@keyframes blu-animate-tweet-go-right { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(calc(1416px)); }
}

.blu-animated .tweet-go-left { animation: 20s linear 0s infinite normal none running blu-animate-tweet-go-left; }

@keyframes blu-animate-tweet-go-left { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(calc(-1416px)); }
}

.blu-card-colors-first-text { height: 200px; }

.blu-card-colors { color: rgb(113, 142, 156); font-size: 40px; font-weight: bold; }

.blu-card-other-colors { max-height: 10rem; overflow: hidden; padding-right: 0.5rem; position: relative; width: 400px; height: 200px; }

.blu-cards-colors-to-top { margin-top: 100px; transition: 800ms; }

.blu-cards-colors-to-top:nth-child(1) { }

.blu-cards-colors-to-top:nth-child(2) { }

.blu-cards-colors-to-top:nth-child(3) { }

@keyframes move-cards-colors { 
  0% { }
  15%, 25% { }
  45% { }
  100% { }
}

.blu-card-colors-animate { text-align: right; }

.text-fade-top { --t: transparent; }

.text-fade-bottom { --b: transparent; }

.text-fade { mask-image: ; -webkit-mask-position-x: ; -webkit-mask-position-y: ; mask-size: ; mask-origin: ; mask-clip: ; mask-composite: ; mask-mode: ; mask-repeat: no-repeat; }

.text-fade-top { --t: transparent; }

.text-fade-bottom { --b: transparent; }

.text-fade-blu-line { mask-image: ; -webkit-mask-position-x: ; -webkit-mask-position-y: ; mask-size: ; mask-origin: ; mask-clip: ; mask-composite: ; mask-mode: ; mask-repeat: no-repeat; }

.blu-card-colors li { list-style: none; }

.dark-mode { background: url("../icons/pattern_dot_Light.svg"); cursor: pointer; position: relative; z-index: -2; }

.dark-mode-background { width: 100%; height: 100%; position: absolute; z-index: -1; background-color: rgb(28, 32, 40); opacity: 0; background-image: url("../icons/pattern_dot_Dark.svg") !important; }

.dark-mode-active { }

.dark-mode p { color: rgb(175, 175, 175); }

.dark-mode-active .btn { background: transparent; border: 0px; color: rgb(73, 128, 224) !important; }

.dark-mode-active h2, .dark-mode-active p { color: rgb(234, 234, 234); }

.blu-dark-mode-images-section { height: 538px; }

.blu-dark-mode-image { position: absolute; width: 100%; height: 100%; left: 0px; }

.dark-mode-icons { position: relative; height: 72px; width: 72px; margin: 0px auto; }

.dark-mode-icon { position: absolute; left: 0px; }

.dark-mode-animate { transition: 500ms; }

.tweets { overflow: hidden; mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%); }

.tweets-items { position: relative; height: 170px; }

.tweet-item { background: rgb(234, 234, 234); padding: 2rem 2rem 1rem; font-size: 12px; border-radius: 1rem; margin: 0px 0.5rem; width: 456px; height: 167px; transition: 500ms; }

.tweet-go-right:nth-child(1) { }

.tweet-go-right:nth-child(2) { }

.tweet-go-right:nth-child(3) { }

.tweet-go-right:nth-child(4) { }

@keyframes tweet-run-right { 
  0% { left: 0px; transform: translateX(-456px); }
  100% { left: 100%; }
}

.tweet-go-left { transform: translateX(1100px); }

.tweet-go-left:nth-child(1) { }

.tweet-go-left:nth-child(2) { }

.tweet-go-left:nth-child(3) { }

.tweet-go-left:nth-child(4) { }

@keyframes tweet-run-left { 
  0% { right: 0px; transform: translateX(456px); }
  100% { right: 100%; }
}

.tweet-item .tweet-text { }

.tweet-icon { margin: 10px; }

.tweet-name p { padding: 0px; margin: 0px; font-weight: bold; }

.tweet-name p.small { font-size: 10px; color: rgb(147, 147, 147); }

.teaser-content { background: url("../icons/teaser-background.svg") 0% 0% / cover no-repeat; color: var(--blu-colors-white); border-radius: 1rem; position: relative; margin-top: 10rem; }

.teaser-text { max-width: 50%; }

.teaser-image { position: absolute; bottom: 0px; left: 20px; }

.btn { border-radius: 0.625rem !important; }

.btn-minimal { background-color: transparent; border: 0px; box-shadow: none; color: var(--blu-colors-blue); }

.btn-minimal:hover { background-color: rgb(239, 244, 253); color: var(--blu-colors-blue); }

.btn-white { background-color: var(--blu-colors-white); color: rgb(73, 128, 224); }

.btn-white:hover { background-color: var(--blu-colors-white); color: rgb(40, 101, 208); font-weight: bold; }

.footer-logo-wrapper-line { display: flex; justify-content: space-between; }

.btn-rounded { border-radius: 50%; padding-left: 1rem; padding-right: 1rem; margin: 1rem 0.5rem; }

.filter-button { border-radius: 1rem; padding-left: 1rem; padding-right: 1rem; margin-left: 0.1rem; margin-right: 0.1rem; }

.accordion-button.collapsed { border-bottom: 1px solid rgb(245, 245, 245); border-radius: 10px; }

.accordion-body { border-right: 2px solid rgb(89, 141, 227); padding: 1rem 2rem; }

.accordion-button::after { background-image: none; }

.accordion-button { }

.accordion-button:not(.collapsed) { background-color: transparent; color: var(--blu-colors-white); }

.accordion-button:not(.collapsed)::before { transform: rotate(-45deg); transform-origin: center center; transition: 200ms; content: url("../icons/faq-plus-white.svg"); }

.accordion-button:not(.collapsed)::after { background-image: none; }

.accordion-button::before { padding: 0px 10px; line-height: 1rem; color: var(--blu-colors-blue); transform-origin: center center; transform: rotate(0deg); transition: 200ms; content: url("../icons/faq-plus.svg"); }

footer { background-color: rgb(247, 249, 250); color: rgb(113, 142, 156); }

footer li { line-height: 1.7rem; }

footer .nav-item-circle li a { color: rgb(113, 142, 156); font-size: 14px; transition: 0.4s; }

footer .nav-item-circle li a::before { content: ""; width: 1rem; transition: 300ms; transform: translateX(5px); opacity: 0; }

footer .nav-item-circle li:hover a { color: rgb(48, 127, 226); transition: 0.4s; transform: translateX(-2px); }

footer .nav-item-circle li:hover a::before { content: "•"; color: rgb(48, 127, 226); font-weight: bold; display: inline-block; width: 1rem; transition: 300ms; transform: translateX(0px); opacity: 1; }

.footer-icon-item-white { background-color: var(--blu-colors-white); padding: 15px; border-radius: 5px; width: 75px; height: 75px; margin: 0px 10px; }

@media (min-width: 992px) {
  .navbar .has-megamenu { position: static !important; }
  .navbar .megamenu { left: 0px; right: 0px; width: 100%; margin: 0px auto !important; }
}

@media (max-width: 991px) {
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse { overflow-y: auto; max-height: 90vh; margin-top: 10px; }
}