﻿/* Common */
.CmnSubTitleHme { font-size: 30px; line-height: 50px; font-family: var(--boldFnt); color: var(--darkblue); margin: 0; padding: 0 15px; }
/* banner */
.bannerwrapper { min-height: 700px; background-color: var(--Bggrey); padding: 150px 0 0; position: relative; }
.bannerwrapper::after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; top: 0; background-image: url(../images/Vector.png); background-repeat: no-repeat; background-position: bottom center; background-size: 100%; }
.BannerContent { display: flex; align-items: center; min-height: 350px; position: relative; z-index: 1; }
.BannerInnerContent > p > span { display: block; font-family: var(--boldFnt); font-size: 30px; line-height: 43px; color: var(--darkblue); }
.BannerBtns { display: flex; align-items: flex-start; }
.BannerBtns > a { display: block; font-size: 17px; line-height: 26px; cursor: pointer; transition: all 0.4s ease; }
a.BookDemoLink:hover { border: 1px solid var(--darkblue); background-color: var(--darkblue); color: var(--white); }
a.DowndBrochure:hover { background-color: var(--darkblue); }
a.BookDemoLink { border: 1px solid var(--lightblue); color: var(--lightblue); font-family: var(--mediumFnt); padding: 8px 20px; border-radius: 25px; position: relative; margin-right: 15px; }
a.DowndBrochure { background-color: rgb(56,145,225);
background-color: -moz-linear-gradient(0deg, rgba(56,145,225,1) 25%, rgba(65,165,255,1) 71%);
background-color: -webkit-linear-gradient(0deg, rgba(56,145,225,1) 25%, rgba(65,165,255,1) 71%);
background-color: linear-gradient(0deg, rgba(56,145,225,1) 25%, rgba(65,165,255,1) 71%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3891e1",endColorstr="#41a5ff",GradientType=1); color: var(--white); font-family: var(--mediumFnt); padding: 9px 23px; border-radius: 25px; position: relative; filter: drop-shadow(0px 5px 10px rgba(98, 181, 255, 0.25)); }
/* Platform Designed for Your Business */
.PlatformDivs { background: #F8F8F8; border-radius: 25px; text-align: center; padding: 25px; margin-bottom: 20px; }
.PlatformDivs > em { display: block; width: 104px; height: 104px; margin: 0 auto 25px; background: #FFFFFF; border: 1px solid #D4E9FC; box-shadow: inset 0px 0px 20px rgba(56, 145, 225, 0.2); border-radius: 52px; padding: 23px; transition: all 0.4s ease; }
.PlatformDivs:hover > em { transform: scale(1.1); }
.PlatformDivs > p { margin: 0; }
.PlatformDivs > p > span { font-size: 25px; line-height: 30px; text-align: center; display: block; color: var(--darkblue); }
/* KeyFeature */
.KeyFeatureImg { transition: all 0.4s ease; }
.KeyFeatureInner .row:hover .KeyFeatureImg { transform: scale(1.03); }
.KeyFeatureInner { max-width: 1100px; margin: 0 auto; }
.KeyFeatureContent { background: #FFFFFF; box-shadow: 0px 5px 25px rgba(56, 145, 225, 0.18); border-radius: 25px; padding: 30px; margin: 90px 0; }
.KeyFeatureContent.mtLarge { margin: 110px 0; }
.KeyFeatureContent > h2 { font-size: 22px; line-height: 22px; /* identical to box height, or 100% */ color: var(--lightblue); margin: 0 0 15px; font-family: var(--mediumFnt); }
.KeyFeatureContent > p { margin: 0; font-size: 17px; line-height: 26px; color: var(--gray); }

@media only screen and (min-width: 1200px) {
    /* banner */
    .bannerwrapper { min-height: 750px; }
    .BannerContent { min-height: 420px; }
    .BannerInnerContent > p > span { font-size: 38px; line-height: 50px; }
}

@media screen and (min-width: 1300px) {
}

@media screen and (min-width: 1440px) {
}

@media screen and (min-width: 1600px) {
    /* banner */
    .bannerwrapper .bnr-img .hmeimgbnrcnt.digit { padding-top: 58px; }
    .bannerwrapper .bnr-img .hmeimgbnrcnt.dpth { padding-top: 5px; }
}

@media only screen and (max-width: 992px) {
    /*banner*/
    .bannerwrapper { padding: 100px 0; min-height: 700px; }
    .BannerContent { display: block; min-height: 1px; text-align: center; }
    .BannerBtns { justify-content: center; }
    /* KeyFeature */
    .KeyFeatureContent { padding: 25px; margin: 50px 0; }
    .KeyFeatureContent.mtLarge { margin: 100px 0; }
    .KeyFeatureContent > h2 { font-size: 20px; line-height: 22px; margin: 0 0 10px; }
    .KeyFeatureContent > p { font-size: 15px; line-height: 22px; }
}

@media only screen and (max-width: 767px) {
    /* Common */
    .CmnSubTitleHme { font-size: 25px; line-height: 30px; }
    /*banner*/
    .bannerwrapper { min-height: 650px; }
    /*KeyFeature */
    .KeyFeatureInner { max-width: 100%; }
    .KeyFeatureContent { margin: 20px 0 50px; }
    .KeyFeatureContent.mtLarge { margin: 20px 0 20px; }
    /* Platform Designed for Your Business */
    .PlatformDivs > p > span { font-size: 22px; line-height: 28px; }
}

@media only screen and (max-width: 479px) {
    /* Common */
    .CmnSubTitleHme { font-size: 25px; line-height: 30px; }
    /*banner*/
    .bannerwrapper { padding: 80px 0; min-height: 550px; }
    .BannerInnerContent > p > span { font-size: 25px; line-height: 35px; }
    .BannerBtns { display: block; }
    /*KeyFeature */
    .KeyFeatureImg { max-width: 320px; margin: 0 auto; }
    .KeyFeatureContent { margin: 10px 0 20px; }
    .KeyFeatureContent > h2 { font-size: 17px; line-height: 22px; }
    /* Platform Designed for Your Business */
    .PlatformDivs > p > span { font-size: 16px; line-height: 22px; }
    .PlatformDivs { padding: 25px 10px; }
    .PlatformDivs > em { width: 70px; height: 70px; padding: 15px; }
}
