@font-face {font-family: "Open Sans";src: url("fonts/opensans-regular-webfont.woff2") format("woff2");font-weight: 400;font-display: swap;font-style: normal;}
@font-face {font-family: "HK Grotesk";src: url("fonts/hkgrotesk-bold-webfont.woff2") format("woff2");font-weight: 700;font-display: swap;font-style: normal;}
@font-face {font-family: "HK Grotesk";src: url("fonts/hkgrotesk-semibold-webfont.woff2") format("woff2");font-weight: 500;font-display: swap;font-style: normal;}
@font-face {font-family: "HK Grotesk";src: url("fonts/hkgrotesk-regular-webfont.woff2") format("woff2");font-weight: 400;font-display: swap;font-style: normal;}
:root {
  --apple-green: #def2ec;
  --asphalt: #1d1f20;
  --blue-violet: #473ae0;
  --bright-green: #a9ff9b;
  --dark-charcoal-grey: #181e29;
  --darker: #183b56;
  --denim: #1565d8;
  --dusky-blue: #4c687e;
  --fog: #f9fbfd;
  --goldenrod: #fcc003;
  --graphite: #0b101b;
  --ivory: #f6f4f2;
  --leaf-green: #034737;
  --light-denim: #1d6bd9;
  --light-orange: #feedde;
  --light-violet: #ebe7ff;
  --link-color: #212529;
  --logo: #61067e;
  --midnight-gray: #2f3542;
  --ocean-green: #287e59;
  --orange-juice: #f65128;
  --silver-grey: #c9ced6;
  --silver-cloud: #f1f4f8;
  --violet: #824deb;
  --wet-asphalt: #141415;
}
body {
  font-family: "HK Grotesk", sans-serif;
  font-size: 1.075rem;
  font-weight: 500;
  line-height: 1.7;
  color: #42557B;
  text-align: left;
  background-color: #fff;
}
a {color:#2E2EFF;}
p {color:#42557B;}
h1 {font-family: "HK Grotesk"; font-weight: 700;font-size: 3.5rem;color:#183b56;}
h2 {font-family: "HK Grotesk"; font-weight: 700;font-size: 2.4rem;color:#183b56;}
h3 {font-family: "HK Grotesk"; font-weight: 700;font-size: 1.25rem;color:#183b56;}
.h1 {color:#183b56;}
.h3 {font-family: "HK Grotesk"; font-weight: 700;font-size: 1.25rem;color:#183b56;}
.h5 {font-family: "HK Grotesk"; font-weight: 700;font-size: 1.2rem;color:#183b56;}
.cursor-default {cursor: default;}
.cursor-pointer {cursor: pointer;}
.text-heading {color:#183b56;}
.table-fixed {table-layout: fixed;}
.table th, .table td {padding: 15px; text-align: left;}
.table td {color: #42557B;}
.opacity-98 {opacity: 0.98;}
.opacity-97 {opacity: 0.97;}
.opacity-96 {opacity: 0.96;}
.opacity-95 {opacity: 0.95;}
.appstore-link a {font-size: 1.075rem;}
.text-body {color: #42557B !important;}
.text-silver-grey {color: var(--silver-grey);}
.text-dusky-blue {color: var(--dusky-blue);}
.text-white-light {color: #E4E8FF;}
.text-white-light-darker {color: #d5dcff;}
.text-blue-violet {color: #8D9FFF;}
.text-bg-light {color:#000 !important; background-color:#f2f2f2;}
.bg-cream-white {background: #fffdf8;}
.bg-cream-gray {background: #d6d2c9;}
.bg-blue-violet {background: var(--blue-violet);}
.bg-bright-green {background: var(--bright-green);}
.bg-light-blue {background: #e6f7ff;}
.bg-light-light-blue {background: #f8fbff;}
.bg-grey-blue {background: #fcfeff;}
.bg-light-grey {background: #f1f1f1;}
.bg-apple-green {background: var(--apple-green);}
.bg-ocean-green {background: var(--ocean-green);}
.bg-graphite {background: var(--graphite);}
.bg-graphite-darkfooter {background: url(img/dark-footer-bg.svg) right center no-repeat, var(--graphite);}
.bg-dark-charcoal-grey {background: var(--dark-charcoal-grey);}
.bg-denim {background: var(--denim);}
.bg-denim.is-active {background: var(--denim)!important;}
.bg-light-denim {background: var(--light-denim);}
.bg-light-orange {background: var(--light-orange);}
.bg-logo {background: var(--logo);}
.bg-midnight-gray-ctasvg {background: url(img/cta-block-bg.svg) center no-repeat, var(--midnight-gray);}
.bg-darker {background: var(--darker);}
.bg-fog {background: var(--fog);}
.bg-silver-grey {background: var(--silver-grey);}
.bg-silver-cloud {background: var(--silver-cloud);}
.bg-denim-cover {background: url(img/cover-8.png) center / cover no-repeat;}
.bg-white {background: #fff;}
.bg-asphalt {background: var(--asphalt);}
.bg-wet-asphalt {background: var(--wet-asphalt);}
.bg-leaf-green {background: var(--leaf-green);}
.bg-violet, .price-card.bg-violet {background: var(--violet);}
.bg-light-violet {background: var(--light-violet);}
.bg-ivory {background: var(--ivory);}
.bg-dark-cta-gradient {background: rgb(28,34,58); background: linear-gradient(0deg, rgba(28,34,58,1) 0%, rgba(35,41,69,1) 51%, rgba(40,45,77,1) 100%);}
.bg-gradient-dark-violet {background: linear-gradient(0deg, rgb(46 0 107)  0%, rgb(45 0 107) 51%, rgb(28 0 31) 100%);}
.bg-wavy {
background-color: #F8FAFC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='250' height='30' patternUnits='userSpaceOnUse' patternTransform='scale(2.63)'%3E%3Cpath id='a' data-color='outline' fill='none' stroke='%23EEF6FC' stroke-width='0.99' d='M-62.5-15C-31.3-15 0-7.5 0-7.5S31.3 0 62.5 0 125-7.5 125-7.5s31.3-7.5 62.5-7.5S250-7.5 250-7.5 281.3 0 312.5 0'%3E%3C/path%3E%3Cuse xlink:href='%23a' y='15'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='30'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='45'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.bg-grid-gradient {
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/grid.svg);
background-size: 30%, auto; /* Adjust this to control the zoom of the SVG */
background-repeat: repeat;
background-position: center;
}
/* Dark orange blue gradient subtle grid */
/* https://www.gradientmagic.com/collection/subtlegrid/gradient/1599427515870 */
.bg-subtle-grid-dark-orange-blue {
  background-image: repeating-linear-gradient(45deg, hsla(64,83%,54%,0.05) 0px, hsla(64,83%,54%,0.05) 1px,transparent 1px, transparent 11px,hsla(64,83%,54%,0.05) 11px, hsla(64,83%,54%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, hsla(64,83%,54%,0.05) 0px, hsla(64,83%,54%,0.05) 1px,transparent 1px, transparent 11px,hsla(64,83%,54%,0.05) 11px, hsla(64,83%,54%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, hsla(64,83%,54%,0.05) 0px, hsla(64,83%,54%,0.05) 1px,transparent 1px, transparent 11px,hsla(64,83%,54%,0.05) 11px, hsla(64,83%,54%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(64,83%,54%,0.05) 0px, hsla(64,83%,54%,0.05) 1px,transparent 1px, transparent 11px,hsla(64,83%,54%,0.05) 11px, hsla(64,83%,54%,0.05) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(158,73,27),rgb(10,19,118));
}
.bg-vertical-stripes-dark-blue {
  background-image: linear-gradient(90deg, rgba(231, 231, 231, 0.08) 0%, rgba(231, 231, 231, 0.08) 14%,rgba(224, 224, 224, 0.08) 14%, rgba(224, 224, 224, 0.08) 51%,rgba(140, 140, 140, 0.08) 51%, rgba(140, 140, 140, 0.08) 100%),linear-gradient(90deg, rgba(244, 244, 244, 0.09) 0%, rgba(244, 244, 244, 0.09) 21%,rgba(158, 158, 158, 0.09) 21%, rgba(158, 158, 158, 0.09) 31%,rgba(162, 162, 162, 0.09) 31%, rgba(162, 162, 162, 0.09) 89%,rgba(115, 115, 115, 0.09) 89%, rgba(115, 115, 115, 0.09) 100%),linear-gradient(90deg, rgb(9,21,125),rgb(4,11,61));
}
/* Dark blue circle-focus center */
/* https://www.gradientmagic.com/collection/standardcircle/gradient/1584221200819 */
.bg-center-focus-dark-blue {
  background-image: radial-gradient(circle at center center, rgb(33,32,149),rgb(7,4,96));
}
/* Dark blue grid */
/* https://www.gradientmagic.com/collection/basicgrid/gradient/1589325196102 */
.bg-grid-dark-blue {
  background-image: repeating-linear-gradient(0deg, rgba(113,133,170, 0.15) 0px, rgba(113,133,170, 0.15) 1px,transparent 1px, transparent 41px),repeating-linear-gradient(90deg, rgba(113,133,170, 0.15) 0px, rgba(113,133,170, 0.15) 1px,transparent 1px, transparent 41px),linear-gradient(90deg, rgb(0,52,102),rgb(0,52,102));
}
.bg-grid-dark-blue-v2 {
  background-image: repeating-linear-gradient(0deg, rgba(89,89,162, 0.23) 0px, rgba(89,89,162, 0.23) 1px,transparent 1px, transparent 51px),repeating-linear-gradient(90deg, rgba(89,89,162, 0.23) 0px, rgba(89,89,162, 0.23) 1px,transparent 1px, transparent 51px),linear-gradient(90deg, rgb(2,17,102),rgb(2,17,102));
}
/* https://www.gradientmagic.com/collection/subtlegrid/gradient/1599427501675 */
.bg-grid-dark-blue-v3 {
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 25px,hsla(111,40%,28%,0.08) 25px, hsla(111,40%,28%,0.08) 27px,transparent 27px, transparent 51px),repeating-linear-gradient(90deg, transparent 0px, transparent 25px,hsla(111,40%,28%,0.08) 25px, hsla(111,40%,28%,0.08) 27px,transparent 27px, transparent 51px),repeating-linear-gradient(90deg, transparent 0px, transparent 50px,hsla(110,73%,33%,0.08) 50px, hsla(110,73%,33%,0.08) 52px,transparent 52px, transparent 102px),repeating-linear-gradient(0deg, transparent 0px, transparent 50px,hsla(110,73%,33%,0.08) 50px, hsla(110,73%,33%,0.08) 52px,transparent 52px, transparent 102px),repeating-linear-gradient(0deg, hsla(314,39%,63%,0.08) 0px, hsla(314,39%,63%,0.08) 2px,transparent 2px, transparent 102px),repeating-linear-gradient(90deg, hsla(314,39%,63%,0.08) 0px, hsla(314,39%,63%,0.08) 2px,transparent 2px, transparent 102px),linear-gradient(90deg, rgb(5,19,116),rgb(3,8,32));
}
/* Dark blue simple circles */
/* https://www.gradientmagic.com/collection/simplecircles/gradient/1577387902492 */
.bg-circles-dark-blue {
  background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(19deg, rgb(4,46,141),rgb(16,7,53));
}
.bg-lightblue-gradient {background: linear-gradient(180deg, #e1f2ff, #e5f4ff 41.32%, #fff);}
.bg-gradient-gold {background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(252,248,238,1) 47%, rgba(255,255,255,1) 100%);}
.bg-gradient-twilight {background: rgb(47,50,105);background: linear-gradient(135deg, rgba(47,50,105,1) 0%, rgba(24,57,101,1) 100%);}
.bg-map {background: url(img/map-background.png) center / cover no-repeat;}
.btn-outline-secondary.bg-white:hover, .btn-outline-secondary.bg-white:active {background: #6c757d!important;}
.btn-outline-ocean-green {color: var(--ocean-green);border: 2px solid var(--ocean-green);}
.btn-outline-ocean-green:hover, .btn-outline-ocean-green:active {color: #fff;background:var(--ocean-green);border: 2px solid var(--ocean-green);}
.btn-outline-violet {border: 1px solid var(--violet);}
.btn-outline-white {color: #fff;border: 1px solid #fff;}
.btn-outline-white:hover, .btn-outline-white:active {color: var(--denim);background: #fff;}
.btn-outline-violet.bg-violet:hover,.btn-outline-violet.bg-violet:focus {color: var(--violet);background: var(--light-violet); border-color: var(--violet);}
.bg-anouncement-grad {background: rgb(1,69,84);background: linear-gradient(104deg, rgba(1,69,84,1) 0%, rgba(0,7,9,1) 40%, rgba(13,103,111,1) 100%);}
.h1.text-white {color: #fff;}
.text-bright-green {color: var(--bright-green);}
.text-midnight-gray {color: var(--midnight-gray);}
.text-darker {color: var(--darker) !important;}
.text-denim {color: var(--denim);}
.text-ocean-green {color: var(--ocean-green);}
.text-orange {color: var(--bs-orange);}
.text-orange-juice {color: var(--orange-juice);}
.text-silver-grey {color: var(--silver-grey);}
.text-violet {color: var(--violet)!important;}
.hero {font-family: "HK Grotesk"; font-weight: 500;font-size: 1.25rem;overflow: hidden;}
.hero p {line-height: 1.7em;}
.hero, .hero-pic {position: relative;}
.hero:before {content: '';display: block;width: 50%;height: 100%;background: url(img/hero-bg.svg) left center / cover no-repeat;position: absolute;right: 0;top: 0;z-index: -1;}
.hero-pic picture {z-index: 2;}
.logo {color: var(--logo);}
.py-6 {padding-top: 4rem; padding-bottom: 4rem}.py-7 {padding-top: 5rem; padding-bottom: 5rem}.py-8 {padding-top: 6rem; padding-bottom: 6rem}.py-9 {padding-top: 7rem; padding-bottom: 7rem}.py-10 {padding-top: 8rem; padding-bottom: 8rem}
.pb-6 {padding-bottom: 4rem}.pb-7 {padding-bottom: 5rem}.pb-8 {padding-bottom: 6rem}.pb-9 {padding-bottom: 7rem}.pb-10 {padding-bottom: 8rem}
.pt-6 {padding-top: 4rem;}.pt-7 {padding-top: 5rem;}.pt-8 {padding-top: 6rem;}.pt-9 {padding-top: 7rem;}.pt-10 {padding-top: 8rem;}

.my-6 {margin-top: 4rem; margin-bottom: 4rem}.my-7 {margin-top: 5rem; margin-bottom: 5rem}.my-8 {margin-top: 6rem; margin-bottom: 6rem}.my-9 {margin-top: 7rem; margin-bottom: 7rem}.my-10 {margin-top: 8rem; margin-bottom: 8rem}
.mb-6 {margin-bottom: 4rem}.mb-7 {margin-bottom: 5rem}.mb-8 {margin-bottom: 6rem}.mb-9 {margin-bottom: 7rem}.mb-10 {margin-bottom: 8rem}
.mt-6 {margin-top: 4rem;}.mt-7 {margin-top: 5rem;}.mt-8 {margin-top: 6rem;}.mt-9 {margin-top: 7rem;}.mt-10 {margin-top: 8rem;}
.ms-n2 {margin-left: -0.5rem;}
.pt-5r {padding-top: 5rem;}
.pb-2r {padding-bottom: 2rem;}
.pb-3r {padding-bottom: 3rem;}
.pb-5r {padding-bottom: 5rem;}
.py-0_75 {padding-top: .75rem;padding-bottom: .75rem;}
.py-5r {padding-top: 5rem;padding-bottom: 5rem;}
.mb-5r {margin-bottom: 5rem;}
.h-100vh {min-height: 100vh}
.h-25px {height: 25px;}
.h-100px {height: 100px;}
.w-25px {width: 25px;}
.mw-810 {width: 810px;max-width: 94%;}
.mw-900 {width: 900px;max-width: 94%;}
.mw-960 {width: 960px;max-width: 94%;}
.list-group-more-padding li {padding-top: 12px; padding-bottom: 12px;}
.shadow-centered {box-shadow: 0px 0px 8px 4px #eaf0f7 !important;}
@media screen and (max-width: 768px) {
  .w-100-mobile {
    width: 100% !important;
  }
}
.logo img {
  filter: drop-shadow(0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.2));
}
.text-underline-hover {
    text-decoration: none;
}
.text-underline-hover:hover {
    text-decoration: underline;
}
.nav-link {
  color: var(--link-color);
  font-family: "HK Grotesk";
  /*font-family: "Open Sans", sans-serif;*/
}
.footer-nav .nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 0.95rem;
}
.footer-copyright {
  font-size: 0.95rem;
  font-family: "Open Sans", sans-serif;
}
.footer-copyright a {
  color: var(--link-color);
}
.footer-copyright a:hover {
  color: var(--bs-link-hover-color);
}
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}
.btn:not(.btn-nostyle) {padding: 10px 20px;}
.pre-header {letter-spacing: .2rem;color: #2a865c;}
.card-icon {display: inline-block;width: 55px;height: 55px;line-height: 55px;background: #e7effb;border-radius: 10px;text-align: center;}
.card-icon i {vertical-align: middle;font-size: 1.7rem;}
.social-icon {display: inline-block;width:40px;height: 40px;background: #eef0f2;border-radius: 50%;overflow: hidden;line-height: 40px;text-align: center;margin-right: .75rem;color: #183b56;}
.social-icon i {vertical-align: middle;font-size: 1.3rem;}
.icon-star {color: #e4e4e4;}
.icon-star.full {color: #e1be55;}
.review i {font-size: 1.5rem;}
.review .user-name {color:#081824;}
.blue-bg {background: url(img/bg.svg) center / cover no-repeat; border-radius: 1rem; overflow: hidden;}
.faq h2 {font-size: 1.25rem;color:#183b56;}
.faq-row {box-shadow: 5px 10px #ecf0f1;}
.faq-row .faq-text {height: auto; max-height: 0; color:#42557B; padding-top: 0; padding-left: 1rem; overflow: hidden; transition: all .3s ease;}
.faq-row.active .faq-text {max-height: 9999px; padding-top: 1.5rem; transition: all .3s ease;}
.faq-header {position: relative; padding-right: 2rem;cursor: pointer; padding-top: 1.3rem; padding-bottom: 1.3rem; padding-left: 1rem;}
.faq-row.active .faq-header {color: #1565d8;}
.faq-header:before, .faq-header:after {
  content: '';
  display: block;
  width: 1rem;
  height: 2px;
  border-radius: 2px;
  background: #000;
  position: absolute;
  top: 50%;
  right: 0;
}
.faq-header:after {
  transform: translateY(0)rotate(90deg);
  transition: transform .3s linear;
}
.faq-row.active .faq-header:after {
  background: #1565d8;
  transform: translateY(0)rotate(0);
  transition: transform .3s linear;
}
.faq-row.active .faq-header:before {
  background: #1565d8;
}
.ls-1px {letter-spacing: 1px;}
.ls-2px {letter-spacing: 2px;}
.ls-3px {letter-spacing: 3px;}
.ls-4px {letter-spacing: 4px;}
.ls-5px {letter-spacing: 5px;}
.dark-cta {background: url(img/pattern1.svg) center repeat, var(--darker);}
.display-grid {
display: grid;
}
.grid-tpl-2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.grid-tpl-2x2 > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.grid-tpl-2x2 > *:nth-child(2) { grid-area: 1 / 2 / 3 / 3; }
.grid-tpl-2x2 > *:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }

.cool-form-input {font-size: 17px; padding: 10px 16px; border: 2px solid #999;}
.cool-form-select {padding: 10px 28px 10px 16px; font-size: 17px;border: 2px solid #999;}
.cool-form-settings-button {font-size: 17px; padding: 10px 13px 10px 15px; border: 2px solid #999; font-weight: bold;}
.cool-form-settings-button-group {font-size: 17px; padding: 10px 13px 10px 15px; border: 2px solid #999; border-left: 0; font-weight: bold;}
.cool-form-btn {font-size: 17px; padding: 10px 16px; font-weight: bold;}

@media screen and (min-width: 768px) {
  .border-top-md-0 {border-top: 0!important;}
  .border-bottom-md-0 {border-bottom: 0!important;}
  .border-start-md-1 {border-left: 1px solid var(--bs-border-color) !important;}
  .border-end-md-1 {border-right: 1px solid var(--bs-border-color) !important;}
}

@media screen and (max-width: 991px) {
  .grid-tpl-2x2 {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;}
  .grid-tpl-2x2 > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .grid-tpl-2x2 > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .grid-tpl-2x2 > *:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
  .menu-btn {background-color: transparent;border: none;cursor: pointer;display: flex;padding: 0;flex-direction: column;height: 30%;align-items: center;justify-content: space-around;z-index: 99;}
  .nav-menu {
    position: fixed;
    width: 80%;
    height: 100%;
    max-width: 560px;
    right: -150vw;
    padding-top: 5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #183b56;
    transition: opacity .3s ease;
    opacity: 0;
  }
  .nav-menu:before {
    content: 'Menu';
    display: block;
    position: absolute;
    top: 1rem;
    left: 0;
    border-bottom: 1px solid rgba(222,226,230,1);
    width: 100%;
    padding-left: 2rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
  }
  .menu-opened {width: 100%;}
  .menu-opened .nav-menu {right: 0;top:0;opacity: 1;transition: opacity .3s ease;}
  .line {fill: none;stroke: black;stroke-width: 6;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}.line1 {stroke-dasharray: 60 207;stroke-width: 6;}.line2 {stroke-dasharray: 60 60;stroke-width: 6;}.line3 {stroke-dasharray: 60 207;stroke-width: 6;}.opened .line1 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}.opened .line2 {stroke-dasharray: 1 60;stroke-dashoffset: -30;stroke-width: 6;}.opened .line3 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}
  .bg-denim .line, .bg-gradient-twilight .line {stroke: white;}
  .bg-denim .opened .line, .bg-gradient-twilight .opened .line {stroke: black;}
  .nav-menu{
    background: #fff;
    z-index:8;
  }
  .nav-link.text-white {color: var(--link-color)!important;}
  .bg-graphite-darkfooter .nav-link.text-white {color: #fff!important;}
  .nav-menu .nav {flex-direction: column;height: 100%;
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 2rem;}
  .overlay {position: fixed; display: block; width: 1px; height: 1px;position: absolute; top: -10px;left: 0;background: rgba(0,0,0,0);backdrop-filter: blur(8px); transition: background .3s linear;z-index: 7;}
  .menu-opened .overlay {position: fixed; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.6);top: 0; transition: background .3s linear;}
  .appstore-link {
    padding-top: 2rem;
    border-top: 1px solid rgba(222,226,230,1);
  }
  .appstore-link a{
    width: 100%;
    font-weight: 700;
  }
  .bg-denim .nav-item .btn-outline-light, .bg-gradient-twilight .nav-item .btn-outline-light {
    border-color: #2b2f33;
    color:  #2b2f33;
  }
}
.drpdwn-toggle {background: transparent;}
.drpdwn-toggle:after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.drpdwn-menu.show {
  max-height: 1000px;
  transition: max-height .3s ease;
}
.drpdwn-menu a {
  white-space: nowrap;
  padding: .25rem 1rem;
  margin: .5rem 0;
}
.drpdwn-menu {
  margin: 0;
  list-style: none;
  position: relative;
  padding: 0 0 0 1rem;
  width: auto;
  overflow: hidden;
  height: auto;
  max-height: 0;
  background: #fff;
  transition: max-height .3s ease;
}
.price-card-border {border: 3px solid #000;}
.price-card-border-left {border-top-left-radius: 1rem;border-top-right-radius: 1rem; border-bottom: 0}
.price-card-border-right {border-bottom-left-radius: 1rem;border-bottom-right-radius: 1rem;}

.logo-shadow {position: relative; z-index: 2;}
.logo-shadow:before {
  content: '';
  display: block;
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  box-shadow: 0px 0px 32px rgb(178 178 178 / 40%);
  z-index: -1;
}
@media screen and (min-width: 992px) {
  .menu-btn {display: none;}
  .drpdwn-menu {
    position: absolute;
    border: 0;
    padding: 0;
    top: 100%;
    background: transparent;
    left: 0;
    border: 1px solid rgba(222,226,230,0);
    transition: max-height .3s ease, border .2s linear, background .3s linear;
    }
  .drpdwn-menu.show {
    background: #fff;
    border: 1px solid rgba(222,226,230,1);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
    transition: max-height .3s ease, border .5s linear;
    }
  .ratio-lg {
    position: relative;
    width: 100%;
  }
  .ratio-lg-1x1 {
    aspect-ratio: 1;
  }
  .ratio-lg:before {
    display: block;
    padding-top: 100%;
    content: "";
  }
  .ratio-lg>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .price-card-border-left {border-top-left-radius: 1rem;border-top-right-radius: 0;border-bottom-left-radius: 1rem; border-bottom: 3px solid #000;border-right: 0}
  .price-card-border-right {border-bottom-left-radius: 0;border-top-right-radius: 1rem;border-bottom-right-radius: 1rem;}
}
@media (pointer:fine) {
  .arrow-link i {display: inline-block;transition: transform .2s ease;}
  .arrow-link:hover i {transform: translateX(.25rem);}
  .social-icon:hover, .social-icon:focus {background: #183b56!important;color: #eef0f2;transition: all .3s ease;}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .img-sticky picture {
    display: block;
    position: sticky;
    top: 100px;
  }
}
@media screen and (max-width: 1199px) {
  h1 {font-size: 2.6rem;}
  .hero:before {display: none;}
  .hero-pic:before {
    content: '';
    display: block;
    width: 150%;
    height: 100%;
    background: url(img/bg.svg) left center / cover no-repeat;
    position: absolute;
    right: initial;
    left: 50%;
    top: 0;
    z-index: -1;
    transform: translateX(-50%);
  }
  .hero-pic {text-align: center;}
  .hero-pic picture img {max-height: 90vh;width: auto;}
}
.switcher-wrapper {
  position: relative;
  margin: -5px 1.5rem 0;
  cursor: pointer;
}
.switcheck {visibility: hidden;width: 0;}
.switcher {
  display: inline-block;
  width: 65px;
  height: 36px;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 0 20px #d8d8d8;
  position: relative;
}
.switcher:after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5a7184;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left .3s ease;
}
.switcheck:checked + .switcher:after {
  left: calc(100% - 32px);
  transition: left .3s ease;
  background: var(--ocean-green) ;
}
.switcher-wrapper + .switchm {-webkit-text-stroke: 0;}
.switcher-wrapper ~ span {-webkit-text-stroke: .75px #5a7184;}
.switcher-wrapper.active + .switchm {-webkit-text-stroke: .75px #5a7184;}
.switcher-wrapper.active ~ .switcha {-webkit-text-stroke: 0;}
.switcha .strong {font-weight: 700!important;-webkit-text-stroke: 0!important;}

.price-card {
  box-shadow: 0 20px 30px #eaf0f7;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  z-index: 1;
  background: #fff;
}

.splide .price-card, .price-card-shadow .price-card {box-shadow: 0px 0px 8px 4px #eaf0f7;}

.black-top {
  border-top: 3px solid #000;
}
.blue-8-top {
  border-top: 8px solid var(--denim);
}
.ocean-green-8-top {
  border-top: 8px solid var(--ocean-green);
}
.goldenrod-8-top {
  border-top: 8px solid var(--goldenrod);
}
.green-top:before {
  content:attr(data-label);
  display: block;
  width: 100%;
  background: var(--ocean-green);
  color: #fff;
  position: absolute;
  left: 0;
  bottom: calc(100% - 8px);
  text-align: center;
  text-transform: uppercase;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: .4rem;
  font-weight: 700;
  z-index: 1;
}
.green-top:after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: #fcfeff;
  z-index: 2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top: 3px solid var(--ocean-green);
  position: absolute;
  top: 0;
  left: 0;
}
.price-card.highlighted:before {
  content:attr(data-label);
  display: block;
  width: 100%;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 100%;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: .4rem;
  font-weight: 700;
  z-index: 4;
  transform: translate3d(-50%, 20px,0);
}
.price-card.highlighted:after {
  content: '';
  display: block;
  width: 70%;
  height: 30px;
  background: var(--bs-primary);
  z-index: 2;
  border-radius: 2rem;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate3d(-50%, 15px,0);
}
.blue-top {
  border-top: 3px solid #1565d8;
}
.annualy, .monthly {width: auto;display: inline-block;overflow: hidden;vertical-align: middle;margin-right: -10px;}
.prices.active .annualy {max-width: 110px; transition: opacity .3s ease;opacity: 1;}
.prices.active .monthly {max-width: 0;transition: opacity .3s ease;opacity: 0;margin-right: -10px;}
.prices .annualy {max-width: 0;transition: opacity .3s ease;opacity: 0;margin-right: -10px;}
.prices .monthly {max-width: 110px; transition: opacity .3s ease;opacity: 1;margin-right: -10px;}
.navtabs {border: 1px solid var(--darker);border-radius: .25rem;background: #fff;}
.navtabs.active, .navtabs:hover, .navtabs:active { color: #fff; background: var(--denim);  border: 1px solid var(--denim);}
#articles .splide__arrows {position: absolute;}
.price-slider .splide__arrows {width: calc(100% + 60px);position: absolute;top: 50%;left:-30px;}
.prices .splide__arrow--prev {left: 0;}
.prices .splide__arrow--next {right: 0;}
.marked {display: inline-block;position: relative;z-index: 2;}
.marked:before {content: ''; display: block;width: 100%;height: 1rem;background: var(--bright-green);position: absolute; left: 0; bottom: 0; z-index: -1;}
.img-shadow {box-shadow: 60px 52px 0px 0px #f4f4f4;}
#screenshots .splide__pagination__page.is-active, .price-slider .splide__pagination__page.is-active {background: var(--denim)}
#screenshots .splide__pagination__page, .price-slider .splide__pagination__page {margin: 3px 8px;}

.tabs-holder {flex-grow:1;}
.nav-tabs-dropdown button.active::after {display: inline-block;margin-left: 0.255em;vertical-align: 0.255em;content: "";border-top: 0.3em solid;border-right: 0.3em solid transparent; border-bottom: 0;border-left: 0.3em solid transparent;}
.nav-tabs-dropdown button.active:empty::after {margin-left: 0;}
.nav-tabs-dropdown button:not(.active) {display: none;}
.codex {background: transparent; border:0;color: #fff; font-weight: 700; font-size: 1.5rem; border-bottom: 2px solid #fff;
       line-height: 1;transition: border .3s ease;}
.codex.active {border-bottom: 2px solid var(--orange-juice);}
.tabs-holder .dropdown-menu {width: 100%;left: 0;background: #920404;padding: 0;border:  0;border-top:  2px solid var(--orange-juice);border-radius: 0;box-shadow: 0 8px 8px rgba(0,0,0,0.5);}
.tabs-holder .dropdown-menu li button {font-weight: 700;color: #fff; font-size: 1.1rem; padding: .5rem 1.5rem}

.brwsrcode {background: #d4e1e6; border:0;color: var(--text-body);font-weight: 700; font-size: 1rem;
       line-height: 1;transition: border .3s ease;}
.brwsrcode.active {border-bottom: none;background: #fff;}
.brwsr {background: #fff;}
.brwsr .tabs-holder .dropdown-menu {width: 100%;left: 0;background: #c7d5e1;padding: 0;border:  0;border-top: 2px solid #6a7d8d;border-radius: 0;box-shadow: 0 8px 8px rgba(0,0,0,0.5);}
.brwsr .tabs-holder .dropdown-menu li button {font-weight: 700;color: var(--text-body);font-size: 0.9rem;padding: .5rem 1rem;}

@media (pointer:fine) {
  .codex:hover{border-bottom: 2px solid var(--denim);}
  .brwsrcode:hover{border-bottom: none;}
  .tabs-holder .dropdown-menu li button:hover {background: #203766}
  .tabs-holder .dropdown-menu li button:hover {background: #fff};
}

@media screen and (max-width: 992px) {
  .price-slider .splide__arrows {width: calc(100% + 80px);left:-40px;}
  .logo-shadow:before {display: none;}
}
@media screen and (max-width: 768px) {
  .prices.splide {width: 85%;}
  #screenshots .splide__arrow {top: calc(100% - 2rem); transform: unset;}
}
.saf-arrows.splide__arrows {top: 0;left:unset;right:  0;width: 120px;display: flex;justify-content: space-between;padding: 0;}
.saf-arrow {position: relative;top: unset;left:  unset;right:  unset;transform:  none;width:  50px;height:  50px;border: 2px solid var(--dark-charcoal-grey);color: var(----dark-charcoal-grey);background: transparent;}
.saf-arrow svg {width: 32px;height: 32px;}
@media screen and (max-width: 576px) {
.saf-arrows.splide__arrows {padding-right: 1rem;width: 110px; top: 1rem;}
.saf-arrow {width:  40px;height:  40px;}
.saf-arrow svg {width: 20px;height: 20px;}
}
@media screen and (max-width: 575px) {
.grid-tpl-2x2{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grid-tpl-2x2 > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.grid-tpl-2x2 > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.grid-tpl-2x2 > *:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
}
.saf-shadow-arrows.splide__arrows {top: 4rem;left:unset;right:  3rem;width: 90px;display: flex;justify-content: space-between;padding: 0;position: absolute;}
.saf-shadow-arrow {position: relative;top: unset;left:  unset;right:  unset;transform:  none;width: 36px;height: 36px;border: 1px solid #cacaca;color: var(----dark-charcoal-grey);background: #fff;box-shadow: 0.1rem 0.1rem 1rem rgb(0 0 0 / 20%);}
.saf-shadow-arrow svg {width: 12px;height: 12px;}
@media screen and (max-width: 767px) {
.saf-shadow-arrows.splide__arrows {top: 3rem;}
}
.bg-darkfooter {background: url(img/dark-footer-bg.svg) right center no-repeat, var(--graphite);}
.bg-graphite-darkfooter {background: url(img/dark-footer-bg.svg) right center no-repeat, var(--graphite);}
.bg-graphite-darkfooter a {color: #c1d2f9 !important;}
.bg-graphite-darkfooter a:hover {color: #fbfdff !important;}
.bg-graphite-darkfooter .company-section-text {color: #515c75 !important;}
.bg-graphite-darkfooter .company-section-text a {color: #515c75 !important;}
.bg-graphite-darkfooter .company-section-text a:hover {color: #7080a2 !important;}
.bg-graphite-darkfooter .container {border-bottom: 1px solid #112235 !important;}
.bg-graphite-darkfooter .social-icon {background: #2b354b;color: #c1d2f9;}

.bg-night {background: rgb(5 10 22);}

.bg-night h2,.bg-night h3,.bg-night p:not(.pre-header) {color: #fff;}
@media screen and (min-width: 992px) {
  .bg-night .dropdown > .nav-link {color: #fff!important;}
}
.bg-night .menu-btn:not(.opened) .line {stroke: #fff!important;}

.stunning-heading {
  text-align: center;
  padding: 10vw 1px;
}
.bg-night .stunning-p {
  color: #36b37e!important;
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 2rem!important;
  line-height: 1em;
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: .05em;
}
.night-hero-wrapper > * {position: relative; z-index: 3;}
.night-hero-wrapper {
  --blick-animation: rl;
  position: relative;
  overflow: hidden;
  --x: 0;
  --y: 0;
  --blick-top: 0;
  --blick-left: 0;
  --equal-width: 7.085vw;
}

.night-hero {
  background: url(img/night-rect.svg) left top / var(--equal-width) var(--equal-width) repeat; 
}

.night-hero-wrapper:before {
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30vw;
  height: 30vw;
  background: radial-gradient(rgb(22 31 54), transparent);
  z-index: -1;
  transform: translate3d(-50%, -50%, 0);
}
.night-hero-wrapper:after {
  content: '';
  display: block;
  width: var(--equal-width);
  height: 2px;
  background-image: url(img/night-blick.svg);
  background-repeat: no-repeat;
  background-size:  100% 2px;
  background-position: center;
  position: absolute;
  opacity: 0.5;
  transform: translate3d(-50%, -50%, 0);
  z-index:  2;
  pointer-events: none;
  animation-name: var(--blick-animation);
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

@keyframes lr {
  from {top: calc(var(--equal-width) * var(--blick-top)); left: calc((-1 * var(--equal-width)) - 50px);}
  to {top: calc(var(--equal-width) * var(--blick-top)); left: calc(100% + var(--equal-width) + 50px);}
}
@keyframes rl {
  from {top: calc(var(--equal-width) * var(--blick-top)); right: calc((-1 * var(--equal-width)) - 50px);transform: translate3d(-50%, -50%, 0)rotate(180deg);}
  to {top: calc(var(--equal-width) * var(--blick-top)); right: calc(100% + var(--equal-width) + 50px);transform: translate3d(-50%, -50%, 0)rotate(180deg);}
}
@keyframes tb {
  from {top: calc((-1 * var(--equal-width)) - 50px); left: calc(var(--equal-width) * var(--blick-left));transform: translate3d(-50%, -50%, 0)rotate(90deg);}
  to {top: calc(100% + var(--equal-width) + 50px); left: calc(var(--equal-width) * var(--blick-left));transform: translate3d(-50%, -50%, 0)rotate(90deg);}
}
@keyframes bt {
  from {top: calc(100% + var(--equal-width) + 50px); left: calc(var(--equal-width) * var(--blick-left));transform: translate3d(-50%, -50%, 0)rotate(-90deg);}
  to {top: calc((-1 * var(--equal-width)) - 50px); left: calc(var(--equal-width) * var(--blick-left));transform: translate3d(-50%, -50%, 0)rotate(-90deg);}
}


@media screen and (min-width: 768px) and (max-width: 1199px) {
  .night-hero-wrapper {--equal-width: 8.97vw;}
  .night-hero-wrapper:before {
    background: radial-gradient(rgb(63 75 105), transparent);
    width: 50vw;
    height: 50vw;
  }
}
@media screen and (max-width: 769px) {
  .night-hero-wrapper {--equal-width: 12.24vw;}
  .night-hero-wrapper:before {
    background: radial-gradient(rgb(63 75 105), transparent);
    width: 60vw;
    height: 60vw;
  }
}

@media screen and (max-width: 991px) {
  .bg-night .appstore-link .btn-outline-light {
    border-color: var(--link-color)!important;
    color: var(--link-color)!important;
  }
}

.border-b {border-bottom: 1px solid #dfdfdf;}
@media screen and (min-width: 576px) {
  .border-md-l {border-left: 1px solid #dfdfdf;}
  .border-md-b-none {border-bottom: none;}
}
@media screen and (min-width: 768px) {
  .border-md-btm-none {border-bottom: none;}
}
@media screen and (min-width: 992px) {
  .border-lg-l {border-left: 1px solid #dfdfdf;}
  .border-lg-b-none {border-bottom: none;}
}

.hljs-button-container {position: absolute;top: 8px; right: 15px; display: flex; gap: 8px; opacity: 0; padding-right: 1rem; z-index: 888;visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s;}
.code-box:hover .hljs-button-container, .code-box:focus-within .hljs-button-container {opacity: 1;visibility: visible; transition: opacity 0.5s ease, visibility 0s;}
.hljs-icon-button {background: transparent;border: none;color: #fff;font-size: 18px; cursor: pointer;}
.hljs-icon-button.copied { color: green;}
.github-style .hljs-icon-button {color: #333;}
@media (max-width: 767px) {.hljs-expand-button {display: none;}}
.modal .hljs-button-container {position: absolute;top: 10px;right: 15px;display: flex;gap: 8px;z-index: 1050;opacity: 1;visibility: visible;}

@keyframes pulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.05);}}
.animation-pulse {animation: pulse ease-in-out 0.6s 2 forwards;}
.animation-pulse-loop {animation: pulse 1s ease-in-out infinite; animation-delay: 1s;  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);  animation-iteration-count: infinite;  animation-duration: 3s; }
@keyframes rotate {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
.animation-rotate-loop {animation: rotate 10s linear infinite;}
@keyframes shake {0%, 100% {transform: translateX(0);} 10% {transform: translateX(-2px);} 20% {transform: translateX(2px);} 30% {transform: translateX(-4px);} 40% {transform: translateX(4px);} 50% {transform: translateX(-6px);} 60% {transform: translateX(6px);} 70% {transform: translateX(-4px);} 80% {transform: translateX(4px);} 90% {transform: translateX(-2px);}} 
.animation-shake-loop {animation: shake 2s ease-in-out 1s infinite;}
@keyframes fluctuate {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-10px);}}
.animation-fluctuate-loop {animation: fluctuate 3s ease-in-out infinite;}
@keyframes fade {0%, 100% {opacity: 0;} 50% {opacity: 1;}}
.animation-fade-loop {animation: fade 3s ease-in-out infinite;}
@keyframes wobble {0%, 100% {transform: rotate(0deg);} 25% {transform: rotate(-5deg);} 75% {transform: rotate(5deg);}}
.animation-wobble-loop {animation: wobble 1.5s ease-in-out infinite;}
@keyframes slide {0%, 100% {transform: translateX(0);} 50% {transform: translateX(20px);}}
.animation-slide-loop {animation: slide 3s ease-in-out infinite;}
@keyframes rotate-swing {0%, 100% {transform: rotate(0deg);} 25% {transform: rotate(-10deg);} 75% {transform: rotate(10deg);}}
.animation-rotate-swing-loop {animation: rotate-swing 2s ease-in-out infinite;}
@keyframes tilt {0%, 100% {transform: rotateX(0deg);} 50% {transform: rotateX(10deg);}}
.animation-tilt-loop {animation: tilt 2.5s ease-in-out infinite;}

.pseudo-circle { position: relative;text-decoration :none;color: var(--text-body);background: #f2f2f2;display: block;border-radius: 1rem;overflow: hidden;padding: 1rem 5rem 1rem 1.5rem;}
.pseudo-circle .first-row {display: block;font-size: 2rem;color: #183b56;line-height: 1em;position: relative;z-index: 2;}
.pseudo-circle .second-row {color: var(--text-body);position: relative;z-index: 2;}
.pseudo-circle:after {content: '\e801';font-family: fontello;display: inline-block;position: absolute;top: 50%;right: calc(1.5rem + 13px);transform: translateY(-50%); color: #fff;z-index: 2;}
.pseudo-circle:before { content: ''; display: block; width: 42px; height: 42px; background: #183b56; position: absolute; top :50%; right: 1.5rem; transform: translateY(-50%); border-radius: 50%;transition: none; z-index: 1;}
.pseudo-circle:hover:before { width: 140%; height: 120%;border-radius: 0; right: 0;transform: translateY(-50%);transition: border-radius .3s ease, width .5s ease, right .2s ease;}
.pseudo-circle:hover > * { color: #fff;}
.compare-header { box-shadow: 0 2px 12px rgba(0,0,0,0); background: rgba(255, 255, 255,1);transition: box-shadow .3s ease, background .4s ease;}
.compare-header.above { background: rgba(246, 246, 246,1); box-shadow: 0 2px 12px rgba(0,0,0,0.2);}

.percent-value {fill: #666;font-family: sans-serif;font-size: 0.15rem;text-anchor: middle;}
.percent-value tspan.pv-value {font-size: 0.5rem;font-weight: bold;}
.percent-value tspan.pv-textvalue {font-size: 0.175rem;font-weight: bold;}
.circular {display: block;margin: 10px auto;max-width: 80%;max-height: 250px;}
.circular-bg {fill: none; stroke: #e9ecef;stroke-width: 3.8;}
.circular-circle {fill: none;stroke-width: 2.8;animation: progress 1s ease-out forwards;stroke: #fff;}
.progress-bar {animation: progressbar 1.5s ease-out forwards;}

@keyframes progress { 0% {stroke-dasharray: 0 100;}}
@keyframes progressbar { 0% {width: 0;}}

.circular.danger .circular-circle {stroke: #dc3545;}
.circular.danger .percent-value tspan.pv-value, .circular.danger .percent-value tspan.pv-textvalue {fill: #dc3545;}
.circular.warning .circular-circle {stroke: #ffc107;}
.circular.warning .percent-value tspan.pv-value, .circular.warning .percent-value tspan.pv-textvalue {fill: #ffc107;}
.circular.success .circular-circle {stroke: #198754;}
.circular.success .percent-value tspan.pv-value, .circular.success .percent-value tspan.pv-textvalue {fill: #198754;}
.progress-block .fa, .accordion .fa {display: inline-block; min-width: 20px;}

.accordion-danger {background-color: #fbe9eb !important;color: #222f3e;}
.accordion-warning {background-color: #fdf9e7 !important;color: #222f3e;}
.accordion-success {background-color: #eafde7 !important;color: #223e34;}
.accordion-neutral {background-color: #f0f0f0 !important;color: #232323;}
.accordion-faq {background-color: #eef3f5 !important;color: #222f3e;}
.accordion-button:focus {box-shadow: none!important;}
.accordion-button.collapsed {margin-top: 10px;margin-bottom: 1px;border-top: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;transition: none;}
#faqAccordion .accordion-button.collapsed {margin-top: 10px;margin-bottom: 1px;border: 1px solid #ccc;transition: none;}
.accordion-button:not(.collapsed) {margin-top: 10px;margin-bottom: 0;border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;box-shadow: none!important;transition: border .3s linear;}
.accordion-collapse {box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0) !important;border-left: 1px solid #fff;border-right: 1px solid #fff;border-bottom: 1px solid #fff;transition: box-shadow 0s ease;}
.accordion-collapse.show {box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;transition: box-shadow .6s ease;}
.tab-btn {border: none;border-bottom: 3px solid #bababa;color: #bababa;background: transparent;font-weight: bold;}
.tab-btn.active {border-bottom: 3px solid #000;color: #000;}

@media (pointer: fine) {.tab-btn:hover, .tab-btn:focus {border-bottom: 3px solid #000;color: #000;transition: all .3s linear;}}
@media screen and (min-width: 992px) {.menu-btn {display: none;}}
@media screen and (max-width: 991px) {
.menu-btn {background-color: transparent;border: none;cursor: pointer;display: flex;padding: 0;flex-direction: column;height: 30%;align-items: center;justify-content: space-around;z-index: 99;}
.nav-menu {background: #fff; z-index:8;position: fixed; width: 80%; height: 100%; max-width: 560px; right: -150vw;padding-top: 5rem;padding-bottom: 2rem;border-bottom: 1px solid #183b56; transition: opacity .3s ease;opacity: 0;padding-left: 2rem;}
.nav-menu:before {content: 'Menu';display: block; position: absolute;top: 1rem; left: 0; border-bottom: 1px solid rgba(222,226,230,1); width: 100%;padding-left: 2rem; padding-bottom: 1rem; font-size: 1.5rem; }
.menu-opened {width: 100%;}
.menu-opened .nav-menu {right: 0;top:0;opacity: 1;transition: opacity .3s ease;transform: translateZ(0);}
.menu-opened .menu-btn {position: fixed; top: 0.25rem; right: 1.5rem;height: auto;width: auto;}
.line {fill: none;stroke: #130f40;stroke-width: 6;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}.line1 {stroke-dasharray: 60 207;stroke-width: 6;}.line2 {stroke-dasharray: 60 60;stroke-width: 6;}.line3 {stroke-dasharray: 60 207;stroke-width: 6;}.opened .line1 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}.opened .line2 {stroke-dasharray: 1 60;stroke-dashoffset: -30;stroke-width: 6;}.opened .line3 {stroke-dasharray: 90 207;stroke-dashoffset: -134;stroke-width: 6;}
.bg-denim .line, .bg-gradient-twilight .line {stroke: white;}
.bg-denim .opened .line, .bg-gradient-twilight .opened .line {stroke: black;}
.nav-link.text-white {color: var(--link-color)!important;}
.bg-graphite-darkfooter .nav-link.text-white {color: #fff!important;}
.nav-menu .nav {flex-direction: column;height: 100%;
  overflow: auto;
  flex-wrap: nowrap;
  padding-bottom: 2rem;}
.overlay {position: fixed; display: block; width: 1px; height: 1px;position: absolute; top: -10px;left: 0;background: rgba(0,0,0,0);backdrop-filter: blur(8px); transition: background .3s linear;z-index: 7;}
.menu-opened .overlay {position: fixed; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.6);top: 0; transition: background .3s linear;}
.tab-btn {border: 1px solid #bababa;color: #bababa;background: transparent;font-weight: bold;border-radius: 2rem;}
.tab-btn.active {border: 1px solid #000;color: #000;}
}

.add-api {display: inline-block;width: auto;border: 0; background: transparent; position: relative;height: 2rem;line-height: 2rem;color: #008000;background: rgba(0,0,0,0);border-radius: 1rem;padding-left: 3rem;padding-right: 1.5rem;z-index: 1;}
.add-api:before {content:'+'; display: block; width: 2rem;height: 2rem;line-height: 2rem;text-align: center;background: #008000; border-radius: 1rem; color: #fff; font-weight: 700; font-size: 1.8rem;position: absolute; top: 0; left: 0;z-index: -1;}
.add-api:disabled {color: #999;background: rgba(0,0,0,0.1)}
.add-api:disabled:before {background: rgba(0,0,0,0.1);}
@media (pointer:fine) {
  .add-api {transition:  background .2s ease;}
  .add-api:hover {background: rgba(0,0,0,0.1);}
}