| |
| :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: #FFFFFF; |
| 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: normal; |
| 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: #FFFFFF; |
| } |
|
|
| .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: #FFFFFF; |
| } |
|
|
| .navbar-light .navbar-collapse { |
| margin-top: 15px; |
| border-top: 1px solid #DDDDDD; |
| } |
|
|
| .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: #FFFFFF; |
| } |
|
|
| .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 0; |
| background: |
| url(../img/bg-circle.png), |
| url(../img/bg-triangle.png), |
| url(../img/bg-bottom.png), |
| linear-gradient(to bottom right, var(--primary), var(--secondary)); |
| background-position: |
| left 0px top 0px, |
| right 0px top 50%, |
| center bottom; |
| background-repeat: no-repeat; |
| } |
|
|
| @media (max-width: 991.98px) { |
| .hero-header { |
| padding: 6rem 0 9rem 0; |
| } |
| } |
|
|
|
|
| |
| .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: #FFFFFF; |
| } |
|
|
| .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: #FFFFFF; |
| 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(../img/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: #FFFFFF; |
| 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: #FFFFFF !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: #FFFFFF; |
| 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: 6rem; |
| padding-top: 9rem; |
| background: |
| url(../img/bg-circle.png), |
| url(../img/bg-triangle.png), |
| url(../img/bg-top.png), |
| linear-gradient(to bottom right, var(--primary), var(--secondary)); |
| background-position: |
| left 0px bottom 0px, |
| right 0px 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: normal; |
| 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; |
| } |
