/* Global CSS Starts */
:root {
  --white: #ffffff;
  --black: #000000;
  --primary: #2190CF;
  --primary-dark: #1b72a5;
  --blue-dark: #102A48;
  --blue-dark2: #25476e;
  --black-light: #1B223C;
  --black-light2: #3C3C3C;
  --grey: #F6F6F6;
  --grey2: #F5F5F5;
  --grey3: #f5f8ff;
  --grey4: #EFF3FF;
  --grey5: #D7D6D6;
  --grey6: #F8F8F8;
  --grey7: #C7C7C7;
  --grey8: #797878;
  --grey3-dark: #f1f2f3;
  --grey-light: #E7EBFF;
  --grey-light2: #DFE5EC;
  --grey-dark: #929292;
  --yellow-light: #FFFBEE;

  --blue-light: rgba(21, 124, 193, 0.05);
  --red-light: rgba(239, 68, 68, 0.05);

  --primary-light-gradient: linear-gradient(90deg, #F6F9FF 0%, rgba(246, 249, 255, 0.00) 100%);
  --primary-dark-gradient: linear-gradient(90deg, #138ACC 0%, #0FABE7 100%);
  --blue-dark-gradient: linear-gradient(117deg, #0B1828 0%, #12273F 40%, #1C3554 100%);

  --light-gradient: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);;

  --font-be-vietnam-pro: "Be Vietnam Pro", sans-serif;
  --font-sora: "Sora", sans-serif;
}

body, p, li{font-family: var(--font-be-vietnam-pro);font-size: 14px;font-weight: 400;line-height: 22px;color: var(--black);margin: 0px;}

h1,h2,h3,h4,h5,h6,strong,b{font-family: var(--font-sora);font-weight: 600;}

h1,h2,h3,h4,h5,h6{color: var(--black);}

.bg-grey{background-color: var(--grey-dark) !important;}
.bg-blue{background-color: var(--primary) !important;}
.bg-red-light{background-color: var(--red-light) !important;}
.bg-blue-light{background-color: var(--blue-light) !important;}
/* Global CSS Ends */++border-radius: 6px;


/* Container CSS Starts */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width: 1200px;}
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width: 1200px;}
}
/* Container CSS Ends */

/* Section Title CSS Starts */
.section-title{}
.section-title h1{font-size: 42px;}
.section-title h2{font-size: 31px;line-height: 40px;font-weight: 700;}
.section-title h3{font-size: 24px;}
.section-title h4{font-size: 18px;}
.section-title p{font-size: 16px;margin-top: 10px;}

.section-title-center{max-width: 700px;display: block;margin: auto;}

.section-title-white h1,
.section-title-white h2,
.section-title-white h3,
.section-title-white h4,
.section-title-white p
{color: var(--white);}

.section-title h1 span,
.section-title h2 span,
.section-title h3 span,
.section-title h4 span,
.section-title p span
{color: var(--primary);}

.section-desc{}
/* Section Title CSS Ends */

/* Buttons CSS Starts */
.btn,header .navbar-nav li.btn-header a
{font-family: var(--font-be-vietnam-pro);font-size: 14px;font-weight: 500;color: var(--white);background-color: var(--primary);border: 1px solid var(--primary);padding: 12px 20px !important;border-radius: 6px;display: inline-block;transition: all 0.3s ease-in;}

.btn-blue{background-color: var(--blue-dark);color: var(--white);border-color: var(--blue-dark);}

.btn-grey{background-color: var(--grey3);color: var(--black);border-color: var(--grey3);}

.btn-blank{background-color: transparent;color: var(--blue-dark);border-color: var(--blue-dark);}

.btn-blank-white{background-color: transparent;color: var(--white);border-color: var(--white);}

.btn svg{transform: translateY(-1px);margin-right: 5px;}

.btn:hover,header .navbar-nav li.btn-header a:hover
{color: var(--white);background-color: var(--primary-dark);border-color: var(--primary-dark);}

.btn-blue:hover, .btn-blank:hover, .btn-blank-white:hover{background-color: var(--blue-dark2);color: var(--white);border-color: var(--blue-dark2);}

.btn-grey:hover{background-color: var(--grey3);color: var(--black);border-color: var(--grey3);}

.btn-blank:hover svg path{fill: var(--white);}
/* Buttons CSS Ends */

/* Form CSS Starts */
.form-group{margin-bottom: 15px;}
.form-group label,
.form-group .form-control
{font-size: 14px;}
.form-group label{font-weight: 500;color: var(--black);margin-bottom: 7px;}
.form-group .form-control{padding: 10px;}
/* Form CSS Ends */

/* Sections Padding CSS Starts */
.manual-section,
.testimonials-section,
.plans-section,
.footer-cta-section,
.inner-page-content
{padding-top: 80px;padding-bottom: 80px;}

.banner-section{padding-top: 180px;padding-bottom: 80px;}

.system-section{padding-top: 70px;}
/* Sections Padding CSS Ends */

/* Header CSS Starts */
header{width: 100%;background-color: transparent;position: absolute;top: 20px;left: 0;display: block;margin: auto;z-index: 9;}
header .container{display: block;position: relative;}
header .navbar{padding: 0px;}
.header-inner{width: 100%;display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;justify-content: space-between;background-color: rgba(255,255,255,0.9);border-radius: 10px;padding: 10px 20px;}
header .navbar .navbar-brand{}
header .navbar .navbar-brand img{}
.navbar-expand-lg .navbar-collapse{justify-content: center;}
header .navbar-nav{align-items: center;}
header .navbar-nav li{padding: 0px 15px;position: relative;}
header .navbar-nav li a{font-size: 14px;color: var(--black);display: block;position: relative;text-decoration: none;}
header .navbar-nav li.btn-header{padding-right: 0px;}
header .navbar-nav li.btn-header a{}

header .navbar .navbar-brand img,
.footer-logo img
{width: 220px;}

.navbar-toggler{outline: unset !important;box-shadow: unset !important;}

header .navbar-nav li.mm-menu{display: none !important;}
/* Header CSS Ends */

/* Inner Page Content Section CSS Starts */
.inner-page-content{}
.inpc-inner{}

.inner-page-content h1{}
.inner-page-content h2{margin-top: 0px;}

.inner-page-content h3,
.inner-page-content h4,
.inner-page-content h5,
.inner-page-content h6
{margin-top: 25px;}

.inner-page-content p
{margin: 10px 0px;}

.inner-page-content h2{font-size: 30px;}
.inner-page-content h3{font-size: 24px;color: var(--primary);}
.inner-page-content h4{font-size: 19px;}
.inner-page-content h5{font-size: 16px;}
.inner-page-content h6{font-size: 14px;}

.inner-page-content a{color: var(--primary);}
/* Inner Page Content Section CSS Ends */

/* Banner Section CSS Starts */
.banner-section{background-image: url(../images/bg-banner.jpg);background-size: cover;background-position: center center;border-bottom: 5px solid var(--primary);position: relative;}
.banner-section::before{content: '';width: 100%;height: 100%;border-radius: 1766px;background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);position: absolute;top: 0;left: 0;}
.banner-section:after{content: '';width: 100%;height: 5px;background-color: var(--blue-dark);position: absolute;bottom: 0;}

.scroll-down{position: absolute;bottom: 92px;right: 0;transform: rotate(-90deg);}
.scroll-down p{margin: 0px;}
.scroll-down p a{display: block;color: var(--black);text-decoration: none;}
.scroll-down p img{width: 30px;margin-right: 10px;}

.banner-inner{position: relative;}
.banner-left{}
.banner-right{padding-left: 20px;}
.banner-left-inner{}
.banner-trusted{display: flex;flex-wrap: wrap;flex-direction: row;align-items: center;}
.banner-trusted-left{}
.banner-trusted-right{padding-left: 30px;}
.btl-inner{}
.btl-img{}
.btl-img img{margin-right: -15px;}
.btr-inner{}
.btr-inner p{color: var(--black);margin: 0px;}
.banner-title{margin-top: 20px;}
.banner-title .section-title{}
.banner-title .section-title h1{font-size: 48px;font-weight: 700;}
.banner-title .section-title p{}
.banner-ecoms{margin-top: 30px;margin-bottom: 40px;}
.banner-ecoms img{margin-right: 20px;}
.banner-btn-outer{margin-top: 36px;}
.banner-btn-outer .btn{margin-right: 15px;}

.inner-banner-section{}
.inner-banner-section .section-title{}
.inner-banner-section .section-title h1{position: relative;padding-bottom: 20px;}
.inner-banner-section .section-title h1::after{content: '';width: 60px;height: 5px;background-color: var(--primary);position: absolute;bottom: 0;left: 0;right: 0;display: block;margin: auto;}
/* Banner Section CSS Ends */

/* Manual Section CSS Starts */
.manual-section{}
.manual-inner{}
.manual-box-outer{margin-top: 70px;}
.manual-box{}
.manual-box-inner{min-height: 180px;padding: 20px 20px;background-color: var(--grey6);border-radius: 10px;}
.manual-box-icon{width: 60px;height: 60px;line-height: 60px;text-align: center;background-image: var(--primary-dark-gradient);border-radius: 6px;margin-top: -44px;}
.manual-box-icon img{width: 36px;height: 36px;}
.manual-box-content{margin-top: 25px;}
.manual-box-content h4{font-size: 17px;}
.manual-box-content p{}
/* Manual Section CSS Ends */

/* System Section CSS Starts */
.system-section{position: relative;}
.system-section::before{content: '';width: 100%;height: 200px;background-color: var(--primary);position: absolute;top: 0;}
.system-inner{position: relative;z-index: 9;}
.system-left{padding-top: 10px;}
.system-right{}
.system-left-inner{}
.system-btn-outer{margin-top: 75px;}
.system-btn-outer .btn{}
.system-right-inner{}
.system-box{}
.system-box-inner{min-height: 220px;padding: 50px 18px;background-color: var(--white);border: 1px solid var(--grey7);border-radius: 8px;position: relative;}
.system-box-inner::before{content: '';width: 21px;height: 21px;border-radius: 100%;background-color: var(--primary);border: 4px solid var(--white);position: absolute;top: -10px;left: -10px;filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));}
.system-box-content{}
.system-box-content h4{font-size: 14px;}
.system-box-content p{}

.system-section-2{padding-top: 80px;padding-bottom: 80px;background-image: url(../images/bg-banner.jpg);background-size: cover;background-position: center center;position: relative;}
.system-section-2::after{content: '';width: 100%;height: 100%;border-radius: 1766px;background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);position: absolute;top: 0;left: 0;}
.system-section-2::before{display: none !important;}
.system-box-outer{margin-top: 36px;}
.system-section-2 .system-box-inner{min-height: 150px;padding: 30px 18px;}
/* System Section CSS Ends */

/* Testimonials Section CSS Starts */
.testimonials-section{background-image: url(../images/bg-banner.jpg);background-size: cover;background-position: center center;border-bottom: 5px solid var(--primary);position: relative;}
.testimonials-section::before{content: '';width: 100%;height: 100%;border-radius: 1766px;background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);position: absolute;top: 0;left: 0;}

.testimonials-inner{position: relative;}
.testimonial-box-outer{margin-top: 36px;}
.testimonial-box{}
.testimonial-box-inner{min-height: 220px;padding: 30px 30px;border-radius: 16px;background-color: var(--yellow-light);border: 1px solid var(--grey-light2);}
.test-quote-icon{}
.test-quote-icon svg{}
.testimonial-box-desc{margin: 10px 0px;}
.testimonial-box-desc p{font-size: 15px;line-height: 24px;font-style: italic;}
.testimonial-box-meta{}
.testimonial-box-meta h5{font-size: 15px;margin: 0px;}
.testimonial-box-meta p{font-size: 13px;}
.testimonial-btn-outer{margin-top: 30px;}

.testimonials-section-2{}
.testimonials-section-2 .test-quote-icon{font-size: 18px;font-weight: 700;color: var(--primary);}
.testimonials-section-2 .testimonial-box-inner{min-height: 180px;}
/* Testimonials Section CSS Ends */

/* How Works Section CSS Starts */
.how-works-section{padding-top: 80px;padding-bottom: 80px;}
.how-works-inner{}
.how-works-outer{margin-top: 30px;}
.how-works-box{}
.hwbox-inner{min-height: 382px;padding: 32px 32px;background-color: var(--grey4);border-radius: 10px;border: 1px solid var(--grey4);}
.hwbox-icon{width: 100px;height: 100px;line-height: 100px;text-align: center;background-color: var(--white);border: 1px solid var(--grey5);border-radius: 100%;}
.hwbox-icon svg{width: 40px;height: 40px;}
.hwbox-content{min-height: 136px;margin-top: 25px;}
.hwbox-content h4{font-size: 18px;}
.hwbox-content p{font-size: 15px;}
.hwbox-btn-outer{margin-top: 25px;}
.hwbox-btn-outer .btn{}

.hwbox-inner:hover{background-color: var(--white);border-color: var(--primary);}
.hwbox-inner:hover .hwbox-icon{background-color: var(--primary);border-color: var(--primary);}

.hwbox-inner:hover .hwbox-icon svg path
{fill: var(--white) !important;}
.how-works-outer .row .col-lg-4:nth-child(1) .hwbox-inner:hover .hwbox-icon svg path
{stroke: var(--white) !important;fill: transparent !important;}
/* How Works Section CSS Ends */

/* Plans Section CSS Starts */
.plans-section{}
.plans-inner{}
.plans-box-outer{margin-top: 36px;}
.plans-box{}
.plans-box-inner{padding: 36px;border-radius: 26px;border: 1px solid var(--grey-light);background: var(--white);box-shadow: 0 26px 40px 0 rgba(188, 202, 255, 0.13);}
.plan-box-icon{}
.plan-box-icon img{width: 50px;}
.plan-box-title{padding-bottom: 22px;margin-bottom: 22px;border-bottom: 1px solid var(--grey-light);}
.plan-box-title .section-title{margin-top: 20px;}
.plan-box-title .section-title h2{font-weight: 500;color: var(--black-light);}
.plan-box-title .section-title h2 span{font-size: 14px;line-height: 1;font-weight: 300;color: var(--black);padding: 8px 10px;background: rgba(255, 255, 255, 0.30);border: 1px solid #FFF;border-radius: 8px;display: inline-block;transform: translateY(-4px);}
.plan-box-title .section-title p{font-size: 18px;color: var(--grey8);margin: 0px;}
.plan-box-list{min-height: 130px;}
.plan-box-list ul{margin: 0px;padding: 0px;}
.plan-box-list ul li{list-style: none;margin-bottom: 10px;color: var(--black-light);}
.plan-box-list ul li svg{width: 20px;margin-right: 3px;}
.plan-box-btn-outer{margin-top: 30px;}
.plan-box-btn-outer .btn{}

.plans-box.active{}
.plans-box.active .plans-box-inner{background-image: url(../images/bg-plan.svg);background-size: cover;background-position: right center;}
/* Plans Section CSS Ends */

/* Contact Section CSS Starts */
.contact-section{padding-top: 80px;padding-bottom: 80px;}
.contact-inner{max-width: 500px;display: block;margin: auto;border-radius: 26px;overflow: hidden;background-image: url(../images/bg-plan.svg);background-size: cover;background-position: right center;box-shadow: 0 26px 40px 0 rgba(188, 202, 255, 0.13);}
.contact-left-inner,.contact-right-inner
{padding: 36px;}
.contact-left{}
.contact-right{}
.contact-left-inner{}
.contact-info-box{padding-left: 42px;margin-bottom: 25px;position: relative;}
.contact-info-box h4{font-size: 16px;color: var(--blue-dark);}
.contact-info-box h4 i{width: 30px;height: 30px;line-height: 30px;font-size: 14px;text-align: center;background-color: var(--primary);color: var(--white);border-radius: 100%;position: absolute;top: -5px;left: 0;}
.contact-info-box p{}
.contact-info-box p a{color: inherit;text-decoration: none;}
.contact-right-inner{}
/* Contact Section CSS Ends */

/* Footer CTA Section CSS Starts */
.footer-cta-section{background-image: var(--blue-dark-gradient);position: relative;}
.footer-cta-section::before{content: '';width: 384px;height: 384px;border-radius: 100%;background: rgba(13, 185, 242, 0.10);filter: blur(60px);position: absolute;top: 0;left: 0;right: 0;margin: auto;}
.footer-cta-inner{position: relative;}

.footer-cta-section .section-title p{}

.cta-list-section{}
.cta-list-section ul{margin: 0px;padding: 0px;display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}
.cta-list-section ul li{list-style: none;font-size: 16px;color: var(--white);margin: 0px 10px;}

.footer-cta-btn-outer{margin-top: 40px;}
.footer-cta-btn-outer .btn{margin: 0px 7px;}
/* Footer CTA Section CSS Ends */

/* Footer CSS Starts */
footer{}
.footer-top{padding-top: 50px;padding-bottom: 10px;}
.footer-top-inner{}

.footer-box-outer{}
.footer-box{}

.footer-box-1{padding-right: 70px;}
.footer-box-2{padding-left: 130px;}
.footer-box-3{padding-left: 130px;}

.footer-box-inner{}

.footer-logo{}
.footer-logo img{}

.footer-desc{margin-top: 10px;}
.footer-desc p{}

.footer-box-title{}
.footer-box-title h3{font-size: 14px;margin-bottom: 15px;}

.footer-box-menu{}
.footer-box-menu ul{margin: 0px;padding: 0px;}
.footer-box-menu ul li{list-style: none;margin-bottom: 10px;}
.footer-box-menu ul li a{font-size: 14px;color: var(--black);display: block;text-decoration: none;}

.footer-bottom{margin-top: 20px;}
.footer-bottom-inner{padding-top: 15px;padding-bottom: 15px;border-top: 1px solid rgba(0, 0, 0, 0.10);}
.footer-bottom p{font-size: 12px;}
/* Footer CSS Ends */

/* Media Query CSS Starts */
@media screen and (max-width: 1200px)
{
    header .navbar-nav li{padding: 0px 8px;}

    .section-title-center{max-width: 636px;}

    .section-title h1, .banner-title .section-title h1{font-size: 38px;}
    .section-title h2{font-size: 28px;line-height: 35px;}
    .section-title p{font-size: 14px;}

    .inner-banner-section .section-title h1{font-size: 36px;}

    .inner-page-content h2{font-size: 26px;}
    .inner-page-content h3{font-size: 22px;}
    .inner-page-content h4{font-size: 18px;}
    .inner-page-content h5{font-size: 15px;}
    .inner-page-content h6{font-size: 14px;}
    
    .banner-right{padding-left: 0px;}
    .banner-btn-outer .btn{margin-right: 3px;}

    .scroll-down{right: -36px;}

    .manual-box-inner{min-height: 170px;}

    .system-box-inner{padding: 40px 16px;}
    .system-box-content p{font-size: 13px;}

    .testimonial-box-inner{min-height: 230px;padding: 22px 22px;}

    .hwbox-inner{min-height: 382px;padding: 26px 26px;}
    .hwbox-icon{width: 90px;height: 90px;line-height: 90px;}
    .hwbox-icon svg{width: 36px;height: 36px;}

    .plan-box-title .section-title p{font-size: 16px;}

    .footer-box-2{padding-left: 80px;}
    .footer-box-3{padding-left: 50px;}
}

@media screen and (max-width: 990px)
{
    .section-title h1{font-size: 38px;}

    .manual-section, .testimonials-section, .how-works-section, .plans-section, .footer-cta-section, .inner-page-content, .contact-section
    {padding-top: 60px;padding-bottom: 60px;}

    .header-right-menu{display: none !important;}
    header .navbar-nav li.mm-menu{display: block !important;}
    header .navbar-nav li.btn-header{margin-top: 10px;margin-bottom: 10px;}

    .inner-banner-section .section-title h1{font-size: 34px;}

    .banner-title .section-title h1{font-size: 38px;}
    .banner-right{padding-left: 0;margin-top: 30px;text-align: center;}

    .scroll-down{bottom: 120px;right: -10px;}

    .manual-box-outer{margin-top: 25px;}
    .manual-box{margin-bottom: 50px;}

    .system-box, .testimonial-box, .how-works-box, .plans-box
    {margin-top: 24px;}

    .manual-box{margin-bottom: 0;margin-top: 50px;}

    .system-box-inner{min-height: 180px;padding: 25px 15px;}

    .hwbox-content{min-height: 100px;}

    .testimonial-box-inner{min-height: 210px;}

    .contact-left-inner{padding-bottom: 0px;}
    .contact-right-inner{padding-top: 10px;}

    .footer-box-1{padding-right: 20px;}
    .footer-box-2{padding-left: 30px;}
    .footer-box-3{padding-left: 0px;}
}

@media screen and (max-width: 767px)
{
    header .navbar .navbar-brand img, .footer-logo img{width: 200px;}

    .section-title h1, .banner-title .section-title h1{font-size: 30px;}
    .section-title h2{font-size: 23px;line-height: 30px;}

    .manual-section, .testimonials-section, .how-works-section, .plans-section, .footer-cta-section, .inner-page-content, .contact-section
    {padding-top: 50px;padding-bottom: 50px;}

    .inner-banner-section .section-title h1{font-size: 26px;}
    .inner-page-content h2{font-size: 24px;}
    .inner-page-content h3{font-size: 20px;}
    .inner-page-content h4{font-size: 17px;}
    .inner-page-content h5{font-size: 14px;}
    .inner-page-content h6{font-size: 13px;}

    .banner-trusted{flex-direction: column;align-items: flex-start;}
    .btl-img img{width: 36px;height: 36px;}
    .banner-trusted-right{padding-left: 0;margin-top: 10px;}
    .banner-title .section-title h1{font-size: 30px;}
    .banner-btn-outer .btn{margin: 5px 0px;min-width: 300px;}

    .scroll-down{bottom: 80px;right: -32px;z-index: 9;}

    .manual-box-inner, .testimonial-box-inner, .hwbox-inner{min-height: inherit;}

    .banner-section{padding-top: 150px;padding-bottom: 50px;}

    .system-section{padding-top: 50px;padding-bottom: 50px;}
    .system-section::before{height: 250px;}
    .system-left{padding-top: 0;}
    .system-right{margin-top: 15px;}
    .system-btn-outer{margin-top: 20px;}
    .system-box-outer{margin-top: 10px;}
    .system-section-2 .system-box-inner{min-height: inherit;padding: 20px 18px;}

    .testimonial-box-outer, .how-works-outer, .plans-box-outer{margin-top: 10px;}

    .testimonials-section-2 .testimonial-box-inner{min-height: inherit;padding: 18px 18px;}

    .hwbox-content{min-height: inherit;}

    .plan-box-list{min-height: 100px;}

    .contact-left-inner, .contact-right-inner{padding: 26px;}
    .contact-left-inner{padding-bottom: 0px;}

    .footer-cta-btn-outer .btn{min-width: 280px;margin: 7px auto;}

    .footer-box-1{padding-right: 0px;}
    .footer-box-2, .footer-box-3{padding-left: 0;margin-top: 22px;}
}
/* Media Query CSS Ends */