:root { --primary: #4294E3; --secondary: #8F12FD; --light: #F0F6FF; --dark: #262B47; }
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out,visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .5s ease-out,visibility 0s linear 0s; visibility: visible; opacity: 1; }
h1,h2,.fw-bold { font-weight: 700!important; }
h3,h4,.fw-semi-bold { font-weight: 600!important; }
h5,h6,.fw-medium { font-weight: 500!important; }
.text-primary-gradient { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-secondary-gradient { background: linear-gradient(to bottom right,var(--secondary),var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.bg-primary-gradient { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); }
.bg-secondary-gradient { background: linear-gradient(to bottom right,var(--secondary),var(--primary)); }
.btn { transition: .5s; }
.btn.btn-primary-gradient,.btn.btn-secondary-gradient { position: relative; overflow: hidden; border: none; color: #fff; z-index: 1; }
.btn.btn-primary-gradient::after,.btn.btn-secondary-gradient::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; transition: .5s; z-index: -1; opacity: 0; }
.btn.btn-primary-gradient,.btn.btn-secondary-gradient::after { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); }
.btn.btn-secondary-gradient,.btn.btn-primary-gradient::after { background: linear-gradient(to bottom right,var(--secondary),var(--primary)); }
.btn.btn-primary-gradient:hover::after,.btn.btn-secondary-gradient:hover::after { opacity: 1; }
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square,.btn-sm-square,.btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 400; border-radius: 50px; }
.back-to-top { position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99; border: none; background: linear-gradient(to bottom right,var(--primary),var(--secondary)); }
.navbar-light .navbar-nav .nav-link { position: relative; margin-right: 25px; padding: 45px 0; font-family: jost,sans-serif; font-size: 18px; font-weight: 500; color: var(--light)!important; outline: none; transition: .5s; }
.navbar-light .navbar-nav .nav-link::before { position: absolute; content: ""; width: 0; height: 0; top: -10px; left: 50%; transform: translateX(-50%); border: 10px solid; border-color: var(--light) transparent transparent transparent; transition: .5s; }
.sticky-top.navbar-light .navbar-nav .nav-link { padding: 20px 0; color: var(--dark)!important; }
.navbar-light .navbar-nav .nav-link:hover::before,.navbar-light .navbar-nav .nav-link.active::before { top: 0; }
.navbar-light .navbar-brand h1 { color: #fff; }
.navbar-light .navbar-brand img { max-height: 60px; transition: .5s; }
.sticky-top.navbar-light .navbar-brand img { max-height: 45px; }
@media(max-width:991.98px) {
  .sticky-top.navbar-light { position: relative; background: #fff; }
  .navbar-light .navbar-collapse { margin-top: 15px; border-top: 1px solid #ddd; }
  .navbar-light .navbar-nav .nav-link,.sticky-top.navbar-light .navbar-nav .nav-link { padding: 10px 0; margin-left: 0; color: var(--dark)!important; }
  .navbar-light .navbar-nav .nav-link::before { display: none; }
  .navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link.active { color: var(--primary)!important; }
  .navbar-light .navbar-brand h1 { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .navbar-light .navbar-brand img { max-height: 45px; } }
@media(min-width:992px) {
  .navbar-light { position: absolute; width: 100%; top: 0; left: 0; z-index: 999; }
  .sticky-top.navbar-light { position: fixed; background: #fff; }
  .sticky-top.navbar-light .navbar-nav .nav-link::before { border-top-color: var(--primary); }
  .sticky-top.navbar-light .navbar-brand h1 { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } }
.hero-header { margin-bottom: 6rem; padding: 16rem 0 0; background: url(../image/bg-circle.png),url(../image/bg-triangle.png),url(../image/bg-bottom.png),linear-gradient(to bottom right,var(--primary),var(--secondary)); background-position: left 0 top 0,right 0 top 50%,center bottom; background-repeat: no-repeat; }
@media(max-width:991.98px) {
  .hero-header { padding: 6rem 0 9rem; } }
.feature-item { transition: .5s; }
.feature-item:hover { margin-top: -15px; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08); }
.pricing .nav { padding: 2px; }
.pricing .nav-link { padding: 12px 30px; font-weight: 500; color: var(--dark); background: #fff; }
.pricing .nav-item:first-child .nav-link { border-radius: 30px 0 0 30px; }
.pricing .nav-item:last-child .nav-link { border-radius: 0 30px 30px 0; }
.pricing .nav-link.active { color: #fff; background: linear-gradient(to bottom right,var(--primary),var(--secondary)); }
.screenshot-carousel { position: relative; width: 253px; height: 500px; padding: 15px; margin-right: 30px; }
.screenshot-carousel::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url(../image/screenshot-frame.png) center center no-repeat; background-size: 253px 500px; z-index: 1; }
.screenshot-carousel .owl-item img { position: relative; width: 223px; height: 470px; }
.screenshot-carousel .owl-dots { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.screenshot-carousel .owl-dot { position: relative; display: inline-block; margin: 5px 0; width: 15px; height: 15px; background: linear-gradient(to bottom right,var(--primary),var(--secondary)); border-radius: 15px; transition: .5s; }
.screenshot-carousel .owl-dot::after { position: absolute; content: ""; width: 5px; height: 5px; top: 5px; left: 5px; background: #fff; border-radius: 5px; }
.screenshot-carousel .owl-dot.active { box-shadow: 0 0 10px var(--dark); }
.testimonial-carousel .owl-item .testimonial-item,.testimonial-carousel .owl-item .testimonial-item * { transition: .5s; }
.testimonial-carousel .owl-item.center .testimonial-item { background: linear-gradient(to bottom right,var(--primary),var(--secondary)); }
.testimonial-carousel .owl-item.center .testimonial-item h5,.testimonial-carousel .owl-item.center .testimonial-item p { color: #fff!important; }
.testimonial-carousel .owl-nav { margin-top: 30px; display: flex; justify-content: center; }
.testimonial-carousel .owl-nav .owl-prev,.testimonial-carousel .owl-nav .owl-next { margin: 0 12px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(to bottom right,var(--primary),var(--secondary)); border-radius: 60px; font-size: 18px; transition: .5s; }
.testimonial-carousel .owl-nav .owl-prev:hover,.testimonial-carousel .owl-nav .owl-next:hover { background: linear-gradient(to bottom right,var(--secondary),var(--primary)); }
.footer { margin-top: 0rem; padding-top: 18rem; background: url(../image/bg-circle.png),url(../image/bg-triangle.png),url(../image/bg-top.png),linear-gradient(to bottom right,var(--primary),var(--secondary)); background-position: left 0 bottom 0,right 0 top 50%,center top; background-repeat: no-repeat; }
.footer .btn.btn-social { margin-right: 5px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--light); border: 1px solid rgba(256,256,256,.1); border-radius: 40px; transition: .3s; }
.footer .btn.btn-social:hover { color: var(--primary); }
.footer .btn.btn-link { display: block; margin-bottom: 10px; padding: 0; text-align: left; color: var(--light); font-weight: 400; transition: .3s; }
.footer .btn.btn-link::before { position: relative; content: "\f105"; font-family: "font awesome 5 free"; font-weight: 900; margin-right: 10px; }
.footer .btn.btn-link:hover { letter-spacing: 1px; box-shadow: none; }
.footer .copyright { padding: 25px 0; font-size: 14px; border-top: 1px solid rgba(256,256,256,.1); }
.footer .copyright a { color: var(--light); }
.footer .footer-menu a { margin-right: 15px; padding-right: 15px; border-right: 1px solid rgba(255,255,255,.1); }
.footer .footer-menu a:last-child { margin-right: 0; padding-right: 0; border-right: none; }