@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..800&display=swap');
html{ margin: 0; padding: 0; position: relative;}
body{ background: #fefefe; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #111; margin: 0px; padding: 0px; -webkit-text-size-adjust: none; position: relative;}
h1, h2, h3, h4, h5, h6{ font-weight: 500;}
a{ color: #fff; text-decoration: none !important; outline: none; -moz-outline: none;}
a:hover{ color: #287EFF; text-decoration: none;}
a:active, a:focus{ outline: none;}
p{line-height: 1.5em;}
.block{ display: block;}
.highlight{ color: #287EFF;}
strong{ font-weight: 700;}
.ulclear{ list-style: none; margin: 0; padding: 0;}
.badge{font-weight:500;}
.transition, .btn{ transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;}
.no-select, #menu, .grid-item li .thumb{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.text-base{line-height: 1.4em;}
.logo-icon img{width: 100px;}
.heading-2x{font-size: 2.2em; font-weight: 700; line-height: 1.5; margin-bottom: 2rem;}
.heading-1x{font-size: 1.6em; font-weight: 700; line-height: 1.5; margin-bottom: 2rem;}
.heading-2x span{position: relative;}
.heading-2x strong{font-weight: 700;}
.container{width: 1300px; max-width: 100%;}
/* button */
.btn{ border-radius: 5px; border: none; box-shadow: none !important; display: inline-flex; align-items: center; gap: .5rem;}
.btn.btn-block{ display: flex; width: 100%; justify-content: center;}
.btn:active, .btn:focus{ box-shadow: none !important;}
.btn-primary{color: #fff !important; background-color: #287EFF !important;}
.btn-secondary{ background-color: #4e5266 !important; color: #fff !important;}
.btn-radius{ border-radius: 80px; padding-left: 30px; padding-right: 30px;}
.btn{ font-size: 14px; font-weight: 500;}
.btn-sm{ font-size: 12px;}
.btn-lg{ font-size: 16px; padding: .75rem 1.5rem;}
.btn-radius{ border-radius: 30px;}
.btn .btn-icon img{ height: 16px; width: auto;}
.btn-lg .btn-icon img{ height: 24px; width: auto;}
/* layout */
#header{position: relative; z-index: 9; height: 100px; display: flex; justify-content: space-between; align-items: center;}
#logo{margin: 0; display: block; position: relative; z-index: 6;}
#logo img{ height: 40px;}
#header #menu{position: relative; z-index: 6; margin: 10px 0;}
#header #menu .top-menu{list-style: none; padding: 0; margin: 0; display: flex; align-items: center;}
#header #menu .top-menu li{position: relative; font-size: 1em;}
#header #menu .top-menu li + li{ margin-left: 3rem;}
#header #menu .top-menu li a{ cursor: pointer}
#header #m-menu{display: none;}
#on-top{padding: 0; position: relative; background-color: #04225C; color: #fff;}
#on-top:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0 0 100px 100px #031944 inset;}
.on-top-wrap{position: relative;}
.on-top-wrap:before{ content: ""; opacity: .2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../images/on-top.webp); background-size: cover; background-position: center center;}
.on-top-wrap .ts-heading{font-size: 3.6em; font-weight: 700; line-height: 1.4; position: relative; z-index: 4; margin-bottom: 2rem;}
.on-top-wrap .ts-body{font-size: 1.2em; margin-bottom: 3rem; position: relative; z-index: 4;}
.on-top-wrap .ot-buttons .ot-btn{ border: none !important;}
.on-top-wrap-content{padding: 120px 0px 150px; max-width: 680px; margin: 0; text-align: left}
.ot-buttons{ display: flex; gap: 1.5rem; align-items: center; position: relative; z-index: 4;}
.ot-buttons .ot-btn{ padding: 1rem 2rem; border: 1px solid #0002; min-width: 240px; background-color: #fff; border-radius: 1rem; box-shadow: 0 5px 10px 0 #0001; text-align: center;}
.ot-buttons .ot-btn img{ height: 40px; width: auto;}
.section{width: 100%; display: block; position: relative; padding: 4rem 0;}
.section-about{ padding-top: 0; position: relative; z-index: 9;}
.section-about .site-canvas{ position: absolute; left: 0; right: 0; top: 0;}
.section-about .site-canvas img{ width: 100%; height: auto;}
.section-about .container{ position: relative; z-index: 3;}
.section-about .container .sa-content{ display: flex; position: relative;}
.section-about .sac-text{position: relative; flex-grow: 1; padding-right: 3rem;}
.section-about .sac-text .app-icon{ margin-top: -110px; margin-bottom: 3rem;}
.section-about .sac-photo{ flex-shrink: 0; width: 440px;}
.section-about .sac-photo .os-phone{ position: absolute; top: -550px; right: 0;}
.section-about .sac-photo .os-phone img{ width: 440px; height: auto;}
.section-about .sac-text .h-inline{display: inline-block; font-size: 1em !important; line-height: 1.5em !important; font-weight: 400; margin: 0;}
.section-about .sac-text .text{ margin-bottom: 1em;}
.section-features{ position: relative; z-index: 10;}
.section-features::before{ content: ""; position: absolute; left: 0; top: -100px; right: 0; height: 300px; background: rgb(18,19,24); background: linear-gradient(0deg, rgba(18,19,24,1) 0%, rgba(18,19,24,0) 100%);}
.section-features::after{ content: ""; position: absolute; left: 0; bottom: 0; right: 0; top: 200px; background: rgb(18,19,24);}
.section-features .container{ position: relative; z-index: 2;}
.features-list{ position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;}
.features-list .fl-item{ position: relative; display: flex; align-items: center; gap: 1rem;}
.features-list .fl-item .fl-content .fl-title{font-weight: 500; font-size: 1em;}
.features-list .fl-item .fl-content p{ color: #898E9A;}
.features-list .fl-item .fl-icon{ flex-shrink: 0;}
.features-list .fl-item .fl-icon img{width: auto; height: 60px;}
.section-download{ padding: 100px 0 100px !important;}
.section-download .ot-buttons{ margin-top: 3rem;}
#landingpage{ width: 100%; overflow-x: hidden !important;}
.supported-formats{ margin-top: 3rem;}
.supported-formats h3{ font-size: 1.6em; font-weight: 700; line-height: 1.5;}
.supported-formats p{ font-size: 1em; line-height: 1.5}
.supported-formats .sf-item{ font-size: 1em; line-height: 1.5; margin-bottom: 1.5rem;}
.supported-formats .sf-link{ font-weight: 500; font-size: 1em; line-height: 1.5; margin-bottom: 0.5rem;}

#footer{ background: #031945; color: #fff; padding: 2rem 0; font-size: 14px;}
#footer .footer-logo{ display: block;}
#footer .footer-logo img{ height: 40px;}
.footer-flex{ display: flex; align-items: center; justify-content: space-between;}
.footer-flex > div{ display: flex; flex-direction: column; gap: 1rem;}
.footer-flex > .ff-left{ position: relative;}
.footer-flex > .ff-right{  text-align: right;}
.footer-menu{ display: flex; align-items: center; justify-content: center; gap: 2rem;}
.footer-menu a{ color: #fff;}
.footer-menu a:hover{ color: #287EFF;}
.modal-medium .modal-dialog .modal-content{border-radius: 0;}
.modal-medium .modal-dialog .modal-content .modal-body{padding: 40px; font-size: 14px;}
.modal-medium .modal-dialog .modal-content .modal-header{border-bottom: none; text-align: center;}
.modal-medium .close{position: absolute; top: 10px; right: 10px; line-height: 1em; padding: 5px;}
.modal-medium .close span{font-size: 30px; text-shadow: none;}
.modal-medium .heading-2x{ font-size: 2em; margin-bottom: 20px; line-height: 1.3em;}
.social-list .btn{min-width: 120px;}
.fl-socials{ display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; padding: .5rem 0;}
.fts-icon{ width: 30px; line-height: 30px; text-align: center; font-size: 24px;}
.div-relative{position: relative; display: inline-block; margin: 0 auto;}
.div-relative .dropdown-menu{ width: 100%; border-radius: 0; box-shadow: 0 20px 20px rgba(0,0,0,0.15);}
.div-relative .dropdown-menu .dropdown-item:active{color: #fff;}
.app-icon{display: block; margin-bottom: 20px;}
.app-icon img{width: 120px; height: 120px; border-radius: 1.5rem; box-shadow: 0 5px 30px rgba(0,0,0,0.3);}
#on-top.page-header{ background: #232E3C;}
#on-top.page-header .on-top-wrap{padding: 10px 0;}

.sc-article{ font-size: 1em; line-height: 1.6; padding: 1rem 0; max-width: 1000px; margin: 0 auto;}
.sc-article img{ max-width: 100%; margin: 1rem 0; max-height: 600px;}
.sc-article p{ line-height: 1.6; margin-bottom: .75rem;}
.sc-article .heading-a{ font-weight: 700; margin: 0 0 1rem; font-size: 2em; line-height: 1.5; color: #287EFF !important}
.sc-article .heading-b{ font-weight: 700; margin: 0 0 .75rem; font-size: 1.5em; line-height: 1.5;}
.sc-article .heading-c{ font-weight: 700; margin: 0 0 .5rem; font-size: 1.2em; line-height: 1.5;}
.sc-article .heading-d{ font-weight: 600; margin: 0 0 .5rem; font-size: 1em; line-height: 1.5;}
.sc-article .ul-list{ margin: 2rem 0;}
.sc-article .ul-list li + li{ margin-top: .5rem;}
.sc-article a{ color: #111;}
.sc-article a:hover{ color: #287EFF;}

#page-header{background: #04225C}
#page-header #header{text-align: center; height: 80px; justify-content: flex-start;}
#page-header #header .btn-header{border-radius: 30px;}
#page-header #logo{ margin-left: 20px;}
#page-bar{background: #22242d; text-align: center; padding: 20px 0;}
#page-bar .pbc-heading{font-size: 1.3em; color: #287EFF; margin: 0; line-height: 1.4em; cursor: pointer}
#page-bar .pbc-heading .dropdown-item i{width: 30px; text-align: center}
.section{ padding: 3rem 0;}