.page-header-bg {

    background-color: #60a14842;

}



.page-header {

    position: relative;

    background-size: cover;

}



.page-caption {

    padding-top: 1.445vw;

    padding-bottom: 3.738vw;

}



.page-caption li {

    color: #000;

}



.page-caption ul li {

    list-style-type: none;

    list-style: none;

}



.page-caption ul li:before {

    content: '';

    display: inline-block;

    height: 10px;

    width: 18px;

    background-size: 18px;

    background-image: url("/assets/images/icons/body/double-check.png");

    background-repeat: no-repeat;

    margin-right: 5px;

}

.page-title {

    font-size: 30px;

    line-height: 1;

    color: #5fa248;

    font-weight: 600;

    text-align: center;

    white-space: nowrap;

}

.page-titleM {

    font-size: 1.2rem;

    line-height: 1;

    color: #5fa248;

    font-weight: 600;

    white-space: normal;

}



.page-description {

    font-size: 16px;

    line-height: normal;

    color: #000;

    font-weight: 500;

    text-align: center;

    margin-top: 1rem;

}

.inline-con {

    display: inline-flex;

    align-content: space-around;

    justify-content: flex-start;

    justify-items: center;

    flex-wrap: nowrap;

    flex-direction: row;

    align-items: center;

}

.button-box {

    display: inline-block;

    text-align: center;

    margin-right: 1rem;

}

.text-sm-w{

    color:#fff;

    font-size: 10px;

    font-weight: 400;

    margin: 0px;

}



.text-sm-5{

    margin: -5%;

}

.button-blue-inverseP {

    color: #fff !important;

    border: 1px solid #1562ad !important;

    background-color: #1562ad!important;

}



.button-blue-inverseP:hover {

    background-color: transparent!important;

    color: #1562ad !important;

}

.rowImage {

    width: 100%;

}



.rowImage img {

    margin: 0.7320644216691069vw;

    width: 162px;

}

.submenu {

    background-color: #fff;

    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);

    left: 0px;

    right: 0px;

    z-index: 100;

    height: auto;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}



.submenu.submenu-sticky {

    min-height: auto;

    width: 100%;

    position: -webkit-sticky;

    position: sticky;

    top: 0;

}



@media (max-width: 576px) {

    #submenu {

        display: none;

    }

}

#overview {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}



#overview li {

    color: #000;

}



#overview ul li {

    font-size: 16px;

    line-height: 2.2em !important;

    padding-left: 2vw;

    list-style: none;

}





#overview ul li:before {

    content: '';

    display: inline-block;

    height: 12px;

    width: 18px;

    background-size: 18px;

    background-image: url("/assets/images/icons/body/check.png");

    background-repeat: no-repeat;

    margin-right: 5px;

}

#overview .container-fluid .row .col-12 .row .overview-left .pra-text {

    width: 90% !important;

}



@media (min-width:768px) {

    /* Column 6/12 */

    #overview .overview-left {

        width: 50%;

    }

}

.left-text {

    text-align: left;

}

.main-text {

    color: #5FA248;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;

    text-align: center;

}

.main-text2 {

    color: #5FA248;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 600;

    text-align: center;

}

.main-blue {

    color: #1562ad;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;

    text-align: center;

}

.main-blueM {

    color: #1562ad;

    font-size: 2.3rem;

    line-height: 1.2;

    font-weight: 600;

    text-align: center;

}

.pra-text {

    color: #000;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 400;

    text-align: justify;

}

.pra-text-j {

    color: #000;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 400;

}

.head-text {

    color: #000;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 600;

    text-align: justify;

    padding-top: 2vw;

}



.head-text-w {

    color: #5fa248;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 600;

    text-align: left;

    padding-top: 2vw;

}

#why {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}



.card-why {

    background: #fff;

    border-radius: 2px;

    display: inline-block;

    min-height: auto;

    height:100%;

    margin: 1rem;

    position: relative;

    text-align: center;

    padding: 2rem;

    border-radius: 25px;

    box-shadow: 0px 0px 4px 4px rgb(183 210 237);;

}



.card-why:hover {

    box-shadow: 0px 0px 4px 4px rgb(120 180 239);;

}

#why .card-why img {

    max-width: 80px !important;

}

#client {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}

#client-testimonial {

    padding: 3.6603221083455346vw 1.4641288433382138vw 2.562225475841874vw 1.4641288433382138vw;

    background: #fff;

    text-align: center;

    box-shadow: 0px 4px 4px rgb(111 135 159);

    border-radius: 3%;

}



.client-test {

    padding: 0 0 0 8vw;

    margin: 1.333vw 2vw 0vw 8vw;

    position: relative;

}



.client-test .pic {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    border: 2px solid #1562ad;

    overflow: hidden;

    position: absolute;

    top: 0;

    left: -50px;

}



.client-test .pic img {

    width: 100%;

    height: auto;

}



.client-test .title {

    font-size: 22px;

    font-weight: 600;

    color: #000;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: 0 0 7px 0;

}



.client-test .description {

    font-size: 16px;

    color: #000;

    line-height: 28px;

}



#client-testimonial .owl-theme .owl-controls {

    margin-top: 10px;

}



#client-testimonial div span {

    width: 30px;

    height: 10px;

    border-radius: 0;

    background: #5fa248;

    opacity: 0.8;

    transition: all 0.3s ease 0s;

    border:1px;

}



#client-testimonial .active span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #1562ad;

}



@media only screen and (max-width: 479px) {

    .client-testimonial {

        padding: 20px 0 20px 60px;

        margin: 10px 20px 50px 50px;

    }

    .client-testimonial .title {

        font-size: 20px;

    }

}

.card-client {

    background: #fff;

    border-radius: 2px;

    display: inline-block;

    min-height: auto;

    margin: 1rem;

    position: relative;

    text-align: center;

    padding: 2rem;

    border-radius: 25px;

    /*box-shadow: 0px 0px 4px 4px #1562ad;*/

}



.card-client img {

    margin: 1rem;

    width: 162px;

}

#features {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}



.card-features {

    background: #fff;

    border-radius: 2px;

    display: inline-block;

    min-height: auto;

    margin: 0.1rem;

    position: relative;

    text-align: center;

    padding: 0.2rem;

    padding-left: 1vw;

    padding-right: 1vw;

    border-radius: 25px;

    /*box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);*/

}



.card-features img {

    width: 80px;

    float: left;

    align-items: center;

}



.line {

    position: relative;

}



.line:after {

    content: '';

    position: absolute;

    right: 0;

    border-right: 1px solid #5fa248;

    top: 10%;

    bottom: 10%;

}



.card-features:hover .line:after {

    border-right: 2px solid #1562ad;

    top: 5%;

    bottom: 5%;

}

.purchase-credit {

    background-color: #4f93d5;

    background-image: url("/assets/images/header/credit-bg.webp");

    background-size: cover;

    padding: 2%;

    border: 1px;

    border-radius: 1rem;

}



.purchase-credit-d .head-text,.purchase-credit .head-text{

    color:#fff;

}



#purchase-credit .container-fluid>.row {

    padding-top: 1vw;

    padding-bottom: 1vw;

}

.button-blue-inverse {

    color: #fff !important;

    border: 1px solid #1562ad !important;

    background-color: #1562ad!important;

}



.button-blue-inverse:hover {

    background-color: transparent!important;

}

.button-credit {

    color: #fff !important;

    border: 1px solid #5fa248 !important;

    background-color: #5fa248!important;

}



.button-credit:hover {

    background-color: transparent!important;

}

.button-blueBP {

    color: #1562ad !important;

}



.button-blueBP:hover {

    background-color: #1562ad!important;

    color: #fff !important;

}

#working {

    padding: 5.856515373352855vw 0vw 7.856515373352855vw 0vw;

}



#working img {

    width: 456px;

}



#working .box {

    width: 3.392386530014641vw;

    height: 3.392386530014641vw;

    background: #FFFFFF;

    border-radius: 9px;

    margin: 1vw;

    font-size: 1.9282576866764276vw;

    text-align: center;

}

.boxG {

    box-shadow: 0px 3px 0px 5px #5FA248;

    color: #1562ad;

}



.boxB {

    box-shadow: 0px 3px 0px 5px #1562ad;

    color: #5FA248;

}

.box-inline {

    text-align: right;

}



.box-title {

    font-size: 25px;

    text-align: left;

}



.box-desc {

    font-size: 16px;

    text-align: left;

}

.image-stack {

    position: relative;

    max-width: 670px;

    top: 0;

    left: 0;

}



.il {

    position: absolute;

    top: 5.3vw;

    left: 16vw;

    z-index: 2;

    opacity: 0.5;

}



.ir {

    position: absolute;

    top: 4.6vw;

    left: 24vw;

    z-index: 1;

    opacity: 0.3;

}



.im {

    position: relative;

    top: 1vw;

    left: 12vw;

    z-index: 3;

}



#working p a img.link {

    width: 26px;

}



#working p.guide{

    font-size: 16px;

    font-weight: 600;

    text-align: left;

    margin-left: 1rem;

    margin-top: 1rem;

}

#requirement {

    padding: 4.856515373352855vw 0vw 4.856515373352855vw 0vw;

}

.lineV {

    position: relative;

}



.lineV:after {

    content: '';

    position: absolute;

    bottom: 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    left: 2%;

    right: 2%;

}

#requirement img {

    width: 80px;

    text-align: center;

    padding-top: 1vw;

    margin: 0.2vw;

}



.head-text i {

    color: #1562ad;

}



#requirement li {

    color: #000;

}



#requirement ul li {

    font-size: 16px;

    line-height: 2.2em !important;

    padding-left: 2vw;

    list-style: none;

}





#requirement ul li:before {

    content: '✓';

    color: #1562ad;

}

#faq {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}

#faq ul li::before {

    content: "✓";

    color: rgb(21, 98, 173);

}

.headingFaqL {

    background-color: #fff;

    border-radius: 25px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 0px;

}



.headingFaqR {

    background-color: #fff;

    border-radius: 25px;

    border-top-left-radius: 0;

    border-bottom-left-radius: 0px;

}



.headingFaqL p,

.headingFaqR p {

    font-size: 25px;

    text-align: center;

}



#faq .grey-bg {

    border-radius: 25px !important;

    box-shadow: 0px 4px 4px rgba(95, 162, 72, 0.5);

}



#faq .generalFaq,

#faq .technicalFaq {

    width: 100%;

    height: 356px;

    overflow: auto;

}

#faq ::-webkit-scrollbar {

    width: 5px;

}



#faq ::-webkit-scrollbar-track {

    background: #5fa248;

}



#faq ::-webkit-scrollbar-thumb {

    background: #1562ad;

    border-radius: 5px;

}



#faq ::-webkit-scrollbar-thumb:hover {

    background: #555;

}

#comparison {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}



.container-com {

    background-color: #fff;

    color: #000;

    font-family: "Nunito", sans-serif;

    width: 70%!important;

    border-radius: 7px;

    margin: 5% auto;

    margin-top: 0;

    margin-bottom: 0;

}



.flex-com {

    display: flex;

    justify-content: space-around;

    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);

}



.flex2 {

    border-right: 0.1px solid rgba(178, 170, 171, 0.185);

}



.flex_content {

    padding: 5% 10%;

    flex: 1;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    align-content: center;

    justify-content: space-between;

}



.flex_content h2 {

    font-weight: 600;

}



.flex_content h4 {

    font-weight: 600;

    margin: 0;

    color: #5fa248;

}



.flex_content span {

    font-weight: 300;

}



.flex_content ul {

    padding-inline-start: 7%;

    margin: 10% 0;

}



.flex_content ul li {

    font-weight: 300;

    border-bottom: 1px dotted #1562ad;

    margin-bottom: 0.5rem;

    line-height: normal;

    list-style: none;

}



.flex_content button {

    outline: none;

    border: none;

    background: #5fa248;

    color: #ffffff;

    width: 100%;

    height: 50px;

    border-radius: 5px;

    font-family: "Nunito", sans-serif;

    cursor: pointer;

}

.flex_content button:hover {

    background: #71b15b;

}



.flex_content:nth-of-type(1) button {

    background: transparent;

    border: 1px solid #1562ad;

    color: #1562ad;

}

.flex_content:nth-of-type(1) button:hover {

    background: #e7f3ff;

    border: 1px solid #6595c5;

    color: #6595c5;

}



@media screen and (max-width: 540px) {

    .flex {

        flex-direction: column;

    }

    .flex2 {

        border: none;

    }

}

#related-product {

    padding: 5.856515373352855vw 0vw 5.856515373352855vw 0vw;

}

.card-related {

    background: #f1f2f3;

    border-radius: 2px;

    display: inline-block;

    min-height: auto;

    /*margin: 1rem;*/

    position: relative;

    text-align: center;

    padding: 1rem;

    border-radius: 25px;

    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

}



.card-related img {

    text-align: center;

    width: 80px;

}



#related-product .card-related .col-8 {

    padding-left: 0px;

    padding-right: 0px;

}

.rel-box-title {

    font-size: 25px;

    text-align: left;

}



.rel-box-desc {

    font-size: 16px;

    text-align: left;

}

[data-tooltip] {

  position: relative;

  z-index: 2;

  cursor: pointer;

  border-bottom: 2px dotted #1562ad;

}



/* Hide the tooltip content by default */

[data-tooltip]:before,

[data-tooltip]:after {

  visibility: hidden;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);

  opacity: 0;

  pointer-events: none;

}



/* Position tooltip above the element */

[data-tooltip]:before {

  position: absolute;

  bottom: 150%;

  left: -50%;

  margin-bottom: 5px;

  margin-left: -100%;

  padding: 7px;

  min-width: 20rem;

  height: auto;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

  background-color: #7bbaf7;

  color: #000;

  content: attr(data-tooltip);

  text-align: center;

  font-size: 14px;

  line-height: 1.2;

}



/* Triangle hack to make tooltip look like a speech bubble */

[data-tooltip]:after {

  position: absolute;

  bottom: 150%;

  left: 50%;

  margin-left: -5px;

  width: 0;

  border-top: 5px solid #7bbaf7;

  border-right: 5px solid transparent;

  border-left: 5px solid transparent;

  content: " ";

  font-size: 0;

  line-height: 0;

  font-weight: 600;

}



/* Show tooltip content on hover */

[data-tooltip]:hover:before,

[data-tooltip]:hover:after {

  visibility: visible;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);

  opacity: 1;

}

.grey-bg {

    background-color: #f1f2f3;

}



.white-bg {

    background-color: #ffffff;

}

.pre-req{

    width: 677px!important;

    height: 318px!important;

    margin: 0!important;

    padding-top: 0!important;

}