/* Start Header */
.top-color-fill .logo-fill-1, .top-color-fill .logo-fill-2{ fill: #fff !important;}
.header{position: relative; width: 100%; height: 80px; top: 0; z-index: 9999; }
.blog-bg .header{position: fixed;}
.logo{float: left; padding-top: 18px;}
.logo svg{width: 332px;}
.header-right{float: right; padding-top: 24px;}
.menu{padding-top: 6px; float: left;}
.menu li{float: left;}
.menu li a{color: #172A3A; padding: 0 20px 10px; position: relative; margin: 0 12px;}
.menu li a:before{content: ''; background: #0086E6; height: 3px; position: absolute; width: 0; bottom: 0; left: 0; right: 0;}
.top-color-fill .menu li a, .top-color-fill h1, .hero-text .sub-heading{color: #fff;}
.menu li a:hover::before, .menu li.active a:before{width: 100%;}
.header-btn{float: left;}
.header-btn a{min-width: 120px; float: left; margin-left: 24px; padding: 5px 15px;}
.header-btn a:first-child{margin-left: 9px;}
.headerFix{position: fixed; background: #FFFFFF; -moz-box-shadow: 4px 12px 40px 2px rgba(104, 152, 186, 0.15); -webkit-box-shadow: 4px 12px 40px 2px rgba(104, 152, 186, 0.15); box-shadow: 4px 12px 40px 2px rgba(104, 152, 186, 0.15);}
.top-color-fill .headerFix .menu li a{color: #172A3A;}
.top-color-fill .headerFix .logo-fill-1{fill: #09BC8A !important;}
.top-color-fill .headerFix .logo-fill-2{fill: #172A3A !important;}

.home-left-line-1{position: absolute; left: -208px; top: 80px; width: 313px; height: 737px; background: url("../images/bg/home-left-line-1.svg") 0 0 no-repeat;}
.home-right-line-1{position: absolute; right: -210px; top: -61px; width: 1107px; height: 447px; background: url("../images/bg/home-right-line-1.svg") 0 0 no-repeat;}
.home-right-line-2{position: absolute; right: -1072px; top: -265px; width: 1107px; height: 447px; background: url("../images/bg/home-right-line-1.svg") 0 0 no-repeat;}

.smolNav {display: none; position:absolute; right: 48px; top: 23px; width:36px; height:36px; padding:7px 6px; z-index: 10; float: right; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;}
.smolNav span { background-color: none; height: 3px; display: block; float: left; width: 100%; background: #172A3A; }
.smolNav span { -webkit-transition: 0.3s ease; transition: 0.3s ease; }
.smolNav span:nth-child(2), .closeNav span:nth-child(2) { margin: 6px 0; }
.closeNav span:first-child { -webkit-transform: translateY(6px) rotate(-45deg); -moz-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg);}
.closeNav span:nth-child(2) { opacity: 0;}
.closeNav .lastChild { -webkit-transform: translateY(-12px) rotate(45deg); -moz-transform: translateY(-12px) rotate(45deg); transform: translateY(-12px) rotate(45deg); }

.top-color-fill .smolNav span{  background: #fff;}
.top-color-fill .headerFix .smolNav span{  background: #172A3A;}
.headerFix .logo{padding-top: 15px;}
.headerFix .logo svg{width: 226px;}
.headerFix .header-right{padding-top: 12px;}
.headerFix {height: 56px;}
.headerFix .menu li a{padding-bottom: 7px;}
/* End Header */

/* Start Home */
.hero-text{float: left; padding-top: 178px; width: 47%; position: relative;}
.hero-text .sub-heading{margin-top: 25px; max-width: 570px; width: 100%;}
.hero-text .btn{margin-top: 41px; margin-right: 12px;}
.hero-img{float: right; padding-top: 28px; width: 51%; position: relative; margin-right: -40px;}
.hero-img img{max-width: 100%;}
.hero-img .white-bg{width: 242px; text-align: center; padding: 30px 15px; position: absolute; top: 370px; right: 510px;}
.hero-img .white-bg h4{margin-top: 15px; font-size: 16px; line-height: 24px;}
.subtract-shadow{background: url("../images/icon/subtract-shadow.svg") center bottom no-repeat; width: 141px; height: 22px; margin: 8px auto 0;}
.home-plan{margin-top: -125px;}
.home-plan h3{margin-bottom: 40px; text-align: center;}
.plan-highlight img{vertical-align: middle; max-width: 100%;}
.home-plan-organize{padding-top: 175px; text-align: center;}
.home-plan-organize h1{margin-bottom: 58px;}
.plan-col-box{text-align: center; width: 350px;}
.planIcon{height: 150px; width: 150px; display: table; margin: 0 auto 31px;}
.plan-col-box h4{color: #0086E6; margin-bottom: 13px;}

.middleBox{background: url("../images/bg/middle-box.svg") center top no-repeat; margin-top: 25px; padding-top: 148px; overflow: hidden;}
.middleBoxText{float: left; height: 100%; width: 490px}
.middleBoxText h2{margin-bottom: 32px;}
.middleBoxText .link{margin-top: 16px; display: inline-block;}
.middleBoxImg{float: right; height: 100%;}
.middleBoxImg img{max-width: 100%;}
.float-reverse .middleBoxText{float: right; width: 575px; padding-right: 65px;}
.float-reverse .middleBoxImg{float: left;}
.interactive-bg{background: url("../images/bg/interactive-bg.svg") center left no-repeat; position: absolute; width: 571px; height: 243px; z-index: 0; }
.interactive-bg-1{left: -28px; top: 100px;}
.interactive-bg-2{left: 102px; top: 230px;}
.memory-bg{background: url("../images/bg/memory-bg.svg") 0 0 no-repeat; position: absolute; width: 1196px; height: 430px; z-index: 0;}
.memory-bg-1{right: -250px; top: 120px;}
.memory-bg-2{right: -1150px; top: -68px;}

.testimonial{padding-top: 200px; max-width: 1200px; margin: 0 auto;}
.testimonial h1{text-align: center; margin-bottom: 119px;}
.testimonialImg{width: 513px; float: left; text-align: center;}
.testimonialImg img{max-width: 100%; width: auto !important; display: inline-block !important;}
.testimonialText{ float: left; width: 530px; margin-left: 155px; position: relative;}
.testimonialText .sub-heading{position: relative;}
.testimonialText .sub-heading:before{content: ''; position: absolute; left: -50px; top: -12px; background: url("../images/icon/quote.svg") 0 0 no-repeat; width: 33px; height: 27px; background-size: cover;}
.testimonialText h4{margin-top: 11px;}
.testimonial .owl-carousel .owl-stage-outer{padding-top: 40px; min-height: 220px;}

.home-footer-bg{background: url("../images/bg/footer-bg.svg") center bottom no-repeat; padding-top: 343px;}
.start-planing{ margin-bottom: 148px;}
.start-planing img{max-width: 100%;}
.start-planing h1{margin-bottom: 25px;	}
.start-planing h4{max-width: 700px; margin: 0 auto 23px;}
.start-planing .btn{margin-bottom: 40px;}
/* End Home */

/* Start Footer */
.footer-top{ padding: 52px 0 32px;}
.footer-logo{float: left;}
.footer-link{float: right; padding-top: 10px;}
.footer-link a{margin-left: 63px;}
.footer-link a:first-child{margin-left: 0;}
.footer-bottom{border-top: 1px solid #6B767F; padding: 24px 0 66px;}
.footer-bottom-left{padding-top: 8px; float: left;}
.copy{float: left;}
.footer-bttom-link{margin-left: 16px; float: left;}
.footer-bttom-link:before{content: '//'; color: #fff;}
.footer-bttom-link a{ margin: 0 16px;}
.footer-follow{float: right;}
.footer-follow a{margin-left: 56px; display: inline-block;}
.footer-follow a:hover svg path{fill:#0086E6 !important}

.footer-link a, .copy, .footer-bttom-link a{ color: #fff;}
.footer-link a:hover, .footer-bttom-link a:hover{color: #0086E6}
/* End Footer */

/* Start Login Page */
.loginBox{min-height: 100%;}
.loginLeft{float: left; width: 37%; height: 100%; padding: 11.5vh 48px 40px;}
.login-width{max-width: 457px; width: 100%; margin: 0 auto;}
.loginLogo svg{max-width: 457px; width: 100%;}
.loginLeft h1{padding-top: 7.5vh; margin-bottom: 24px;}
.need-account{margin-bottom: 4.15vh;}
.need-account a{margin-left: 5px;}
.login-copy{padding-top: 24px;}
.login-copy a{text-decoration: underline; color: #172A3A;}
.login-copy a:hover{text-decoration: none;}

.loginRight{position: fixed; right: 0; top: 0; width: 63%; height: 100%; padding: 11.5vh 7vw;}
.loginRight img{width: 100%; height: 100%; object-fit: cover;}

.regiaterBox{height: 100%;}
.regiaterBox .login-width{ padding: 10vh 0 0; height: 100%;}
.registerLeft{float: left; width: 37%; height: 100%; padding: 0 48px;}
.regiaterBox .loginLogo{display: none;}
.registerLeft h2{margin: 30px 0;}
.need-account.mb-34{margin-bottom: 34px;}
.registerRight{position: fixed; right: 0; top: 0; width: 63%; height: 100%;background: url("../images/register.jpg") center center no-repeat; background-size: cover; padding: 0 10vw;}
.registerRight{text-align: center;}
.registerRight .disTableCell img{max-width: 725px; width: 100%;}
.regiaterBox .pb-10{padding-bottom: 10vh;}

.regiaterCrateBox .registerLeft{ padding: 11.5vh 48px; height: auto;}
.regiaterCrateBox h1{margin: 87px 0 24px;}

/* End Login Page */

/* Start Purchase Page */
.purchaseBox{max-width: 1026px; width: 100%; padding: 45px 48px 82px; margin: 0 auto;}
.putchaseLogo{line-height: 0;}
.putchaseLogo svg{max-width: 293px; width: 100%;}
.purchaseBoxTop{text-align: center;}
.complete-icon{display: inline-block; height: 62px; width: 62px; border: 2px solid #09BC8A; margin: 80px auto 0;}
.complete-icon span{display: block; background: url("../images/icon/true.svg") center center no-repeat; height: 100%; width: 100%;}
.purchaseBoxTop h3{color: #000; margin-top: 25px;}
.purchaseBoxTop h1{margin-top: 60px;}
.purchaseBoxTop h4{margin-top: 23px;}
.subscription{margin-top: 38px;}
.subscription .blue-bg h4, .subscriptionBilling .blue-bg h4{padding: 8px 5px 7px; text-align: center; background: #172A3A; color: #fff;}
.subscriptionBox ul{margin: 22px 0 53px;}
.subscriptionBox li{padding: 0 12px; float: left; text-align: center; width: 33.33%;} 
.subscriptionBox li .white-bg{padding: 32px 5px 28px; display: block; border: 2px solid #fff;}
.subscriptionBox li h3, .subscriptionBox li h1{display: inline-block; vertical-align: top; letter-spacing: 1px;}
.subscriptionBox li h3{letter-spacing: 5px;}
.subscriptionBox .title{margin-top: 6px;}
.subscriptionText{margin-top: 26px; color: #172A3A;}
.subscriptionText span{display: block;}
.subscriptionBox .white-bg.active, .subscriptionBox .white-bg:hover{background: rgba(0, 134, 230, 0.05); border: 2px solid #0086E6;}
.subscriptionBilling{margin-top: 60px;}
.subscriptionBilling .blue-bg h4{margin-bottom: 33px;}
.paymentInfo{padding-top: 43px;}
.subscriptionBilling .btn{ max-width: 455px; width: 100%; margin: 69px auto 0; display: block;}
.cardIcon span{position: absolute; top: 15px; right: 12px; display: inline-block;}
.card-cvv span{position: absolute; color: #fff; height: 16px; width: 16px; display: inline-block; top: 21px; right: 13px; background: #0086E6; text-align: center;}
/* End Purchase Page */

/* Start Contact Page */
.contact-bg{background: url("../images/bg/contact-bg.svg") center 336px no-repeat; overflow: hidden;}
.contact-wrap{max-width: 930px; padding: 178px 0 154px; margin: 0 auto;}
.contactText{text-align: center; max-width: 510px; margin: 0 auto 72px;}
.contactText h1{margin-bottom: 36px;}
.contact-wrap .white-bg{padding: 25px 24px 24px;}
.contact-wrap form h4{margin-bottom: 34px;}
.contact-wrap form h4 br{display: none;}
.contact-wrap form .btn{margin-top: 9px;}

.contact-left-line-1{left: -240px; top: -90px; width: 457px; height: 320px; background-image: url("../images/bg/contact-left-line-1.svg");}
.contact-left-line-2{left: -209px; top: -90px; width: 121px; height: 290px; background-image: url("../images/bg/contact-left-line-2.svg");}
.contact-right-line-1{right: -471px; top: 310px; width: 461px; height: 741px; background-image: url("../images/bg/contact-right-line-1.svg");}
.contact-right-line-2{right: -208px; top: 310px; width: 461px; height: 741px; background-image: url("../images/bg/contact-right-line-1.svg");}
.contact-right-line-3{right: -555px; top: 535px; width: 461px; height: 741px; background-image: url("../images/bg/contact-right-line-1.svg");}

/* End Contact Page */

/* Start Pricing Page */
.priceTitle{padding: 178px 0 35px 0; text-align: center;}
.priceTitle h1, .priceTitle h3{margin-bottom: 36px;}

.pricing-bg{background: url("../images/bg/contact-bg.svg") center 0 no-repeat; padding-bottom: 156px;}
.priceSubscription ul{margin: 0;}
.priceSubscription .sky-blue h4{ line-height: 48px; color: #fff;}
.priceSubscription li .white-bg{padding: 52px 16px 19px 16px; position: relative;}
.priceSubscription li .white-bg:hover{background: #fff;}
.priceSubscription .title{margin-top: 2px;}
.priceSubscription{margin-top: 38px;}
.priceSubscription span{display: inline-block;}
.priceSubscription a.btn{display: block; max-width: 216px; margin: 40px auto 0;}
.priceSubscription hr{margin: 40px 0 26px;}
.priceSubscription .subscriptionText{margin-top: 35px;}
.subscriptionBox .sub-heading span{display: inline-block !important; height: 18px; width: 18px; background: url("../images/icon/trueIcon.svg") 0 0 no-repeat; margin-left: 10px; margin-top: 0; background-size: cover;}
.priceFeature{margin: 24px 0 0;}
.priceFeature .white-bg{ padding: 26px 24px 0;}
.priceFeature h3{float: left; width: 330px;}
.featureList{float: left; width: calc(100% - 330px); padding-top: 6px;}
.featureList ul{margin: 0 -12px;}
.featureList ul li{float: left; padding: 0 12px 39px; width: 33.33%; position: relative;}
.featureList ul li:before{content:'';  background: url("../images/icon/trueIcon.svg") 0 0 no-repeat; height: 26px; width: 26px; background-size: cover; position: absolute; display: inline-block; left: 12px; top: -1px;}
.featureList ul li h4{padding-left: 42px;}
.additional{text-align: center; margin-top: 24px; padding: 60px 16px 60px;}
.additional h2{margin-bottom: 38px;}
.additional h3{margin-bottom: 45px;}
.additional img{margin-right: 29px;}
.additional a{display: inline-block;}
.additional a h4:hover{color: #0086E6;}
.lifesaver{margin-top: 200px; text-align: center;}
.lifesaver h2{ margin-bottom: 18px;}
.pricing-practice{margin-top: 143px;}
.pricing-practice h3{margin-bottom: 60px;}

.price-left-line-1{left: -240px; top: -80px; width: 549px; height: 401px; background-image: url("../images/bg/price-left-line-1.svg");}
.price-left-line-2{left: -209px; top: -78px; width: 213px; height: 371px; background-image: url("../images/bg/price-left-line-2.svg");}
.price-right-line-1{right: -471px; top: 350px; width: 461px; height: 741px; background-image: url("../images/bg/price-right-line-1.svg");}
.price-right-line-2{right: -208px; top: 350px; width: 461px; height: 741px; background-image: url("../images/bg/price-right-line-1.svg");}
.price-right-line-3{right: -555px; top: 575px; width: 461px; height: 741px; background-image: url("../images/bg/price-right-line-1.svg");}
/* End Pricing Page */

/* Start Blog & Blog Details Page */
.blog-bg{position: relative; height: 737px; overflow: hidden;}
.blogTitle{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.blogTitle .wrap { height: 100%;}
.blogTitle h1{max-width: 860px;}
.banner{height: 100%;}
.banner img{width: 100%; height: 100%; object-fit: cover;}
.banner span{display: block; height: 100%; width: 100%; background: rgba(23, 42, 58, 0.8); position: absolute; left: 0; top: 0;}
.blogPage{}
.blogListing{margin: 100px 0;}
.bloglistImg{ float: left; width: 48.15%;}
.bloglistImg img{ width: 100%;}
.bloglistText{ float: right; width: 40.6%; margin-top: 35px;}
.bloglistText h2{margin-bottom: 11px;}
.authorImg{ margin-bottom: 30px;}
.authorImg img{vertical-align: middle; max-width: 165px; padding-left: 5px;}
.bloglistText .btn{width: 190px;}
.blogListing:nth-of-type(even) .bloglistImg{ float: right;}
.blogListing:nth-of-type(even) .bloglistText{ float: left;}

.blogDetails{max-width: 931px; margin: 44px auto 35px;}
.blogmeta{border-bottom: 1px solid #D4DCE2; padding-bottom: 28px; margin-bottom: 26px;}
.blogmeta .authorImg{float: left; margin-bottom: 0;}
.blog-date{float: right;}
.blogDetailText::first-letter { font-size: 64px; line-height: 60px; letter-spacing: 1px; font-weight: 700; float: left; margin-right: 2px;}
.blogDetails p{padding-bottom: 24px;}
.blogDetailText h4{font-weight: 600;}
.blogDetails .btn{margin-top: 34px; width: 215px;}
.blog-right-line-1{right: -180px; top: -178px; width: 735px; height: 555px; background-image: url("../images/bg/blog-right-line-1.svg");}
.blog-right-line-2{right: -0px; top: 0; width: 735px; height: 555px; background-image: url("../images/bg/blog-right-line-1.svg");}
.blog-right-line-3{right: -590px; top: -90px; width: 735px; height: 555px; background-image: url("../images/bg/blog-right-line-1.svg");}
/* End Blog & Blog Details Page */

/* Start Works Page */
.work-hero{padding: 166px 0 37px; overflow: hidden;}
.work-hero-text{padding-top: 40px; float: left; max-width: 692px; width: 49.2%;}
.work-hero-text h1{margin-bottom: 36px;}
.work-hero-text .sub-heading{max-width: 496px; padding-bottom: 36px;}
.work-hero-text .btn{width: 140px;}
.work-hero-img{float: right; margin-right: -100px; width: 51%;}
.work-hero-img img{width: 100%;}
.work-bg{background: url("../images/bg/work-bg.svg") center top no-repeat; padding: 200px 0 186px;}
.work-middle-img{float: left; width: 535px; margin-left: 50px; padding-right: 20px; text-align: right;}
.work-middle-img img{max-width: 100%;}
.work-middle-text{float: right; width: 535px; padding-left: 20px;}
.work-middle-text h2{margin-bottom: 20px;}
.work-middle-text .sub-heading{margin-bottom: 45px;}
.work-middle:nth-of-type(even) .work-middle-img{float: right; text-align: left; padding: 0 0 0 60px;  margin-left: 0;}
.work-middle:nth-of-type(even) .work-middle-text{ float: left; padding: 0 20px 0 0; margin-left: 50px;}

.more-plan-bg{background: url("../images/plan-bg.jpg") center top no-repeat; background-size: cover;}
.more-plan{padding: 150px 0; text-align: center;}
.more-plan h2{margin-bottom: 44px;}
.more-plan .light-white{ padding: 44px 50px 40px;}
.more-plan h3{margin-bottom: 40px;}
.more-plan h2, .more-plan h3, .more-plan .sub-heading{color: #fff;}
.work-footer-bg.home-footer-bg{ padding-top: 186px; margin-top: 195px;}
.creat-plan{max-width: 1174px; margin: 0 auto 310px; text-align: center; padding: 56px 150px;}
.creat-plan h1{margin-bottom: 32px;}
.creat-plan h4{max-width: 691px; padding-bottom: 23px; margin: 0 auto;}
.creat-plan .btn{width: 214px;}

.work-left-line-1{left: -256px; top: -90px; width: 267px; height: 736px; background-image: url("../images/bg/work-left-line-1.svg");}
.work-left-line-2{left: -256px; top: 32px; width: 150px; height: 736px; background-image: url("../images/bg/work-left-line-2.svg");}
.work-right-line-1{right: -256px; top: -285px; width: 701px; height: 401px; background-image: url("../images/bg/work-right-line-1.svg");}
.work-right-line-2{right: -183px; top: -235px; width: 374px; height: 362px; background-image: url("../images/bg/work-right-line-2.svg");}
/* End Works Page */


/****  Start floating-Lable  ****/
.floating-label { position:relative; }
.floating-input , .floating-select {}
.floating-input:focus , .floating-select:focus {border: 1px solid #09BC8A;}
.floating-label label { position:absolute; pointer-events:none; left:11px; top:15px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label, .floating-select:-webkit-autofill ~ label, .floating-select:-webkit-autofill ~ label { top:5px; font-size:8px; line-height: 10px;}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label, .selectLabel {top:5px !important; font-size:8px; line-height: 10px;}
.floating-input:not(:placeholder-shown){border: 1px solid #09BC8A;}
.floating-select option:first-child{display: none;}
/**** End  floating-Lable  ****/

.contentBox{max-width: 1026px; margin: 0 auto; padding: 50px 0;}
.contentBox h1, .contentBox h2{margin-bottom: 24px;}
.contentBox ul{list-style: disc; padding-left: 15px;}
.linkLogin{margin-top: 6px;}
.linkLogin a{margin: 0 0 0 20px; position: relative;}
.linkLogin a:before{position: absolute; left:-12px; top: -3px; content: '.'; font-weight: 700; font-size: 14px; color: #172A3A;}
.linkLogin a:first-child::before{display: none; }
.linkLogin a:first-child{margin-left: 0;}
.linkLogin a:hover{color: #0086E6;}
.sport-slider .owl-carousel .owl-item img{display: inline-block; background-color: #fff; width: 100% !important; max-width: 85px; max-height: 85px;}
.sport-slider .owl-dots{display: none;}
.btn-hero-span{
    min-width: 200px;
}
.btn-hero-span span{
    display: block;
    font-size: 13px;
    font-weight: 400;
}
.btn-hero-buy{
    height: 62px;
    line-height: 42px;
    font-size: 25px;
    min-width: 200px;
}