.banner-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column } .cfly-banner h1 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 42px; line-height: 60px; color: #fff; width: 85%; margin: 0 auto; padding-bottom: 40px; position: relative } .cfly-banner h1:after { content: ""; position: absolute; width: 100px; background: #fff; height: 2px; bottom: 20px; left: 45% } .cfly-banner h1 span { line-height: 50px; } .cfly-banner h1 span.tag-line { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 42px; line-height: 60px } .cfly-banner h1 strong { font-family: "proxima-nova", sans-serif; font-weight: 700 } .cfly-banner .banner-content { width: 100%; padding-top: 45px; text-align: center } .cfly-banner .banner-content .sub-head { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #fff; margin-bottom: 30px; display: block; width: 65%; margin: 0 auto 30px; } .cfly-banner .banner-content ul li { display: inline-block; padding: 0 0 0 25px; position: relative; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; color: #fff; margin: 0 35px 15px 0; width: 23.3%; text-align: left } .cfly-banner .banner-content ul li:after { content: ""; position: absolute; left: 0; top: 50%; height: 10px; width: 10px; border-radius: 50%; background: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .cfly-banner .banner-content ul.points { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 65%; margin: 0 auto } .banner-image { width: 100%; padding-top: 30px; position: relative } .banner-image img { width: 85%; margin: 0 auto; display: block } .heading p:after { content: none } .section-bg { background: #e6e6fa } .section-padding { padding: 40px 0 } .gradient-bg { background-size: cover } .gradient-bg .heading h2 { color: #fff } .gradient-bg .heading p { color: #fff } .cards-flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 40px } .cards-flex .cards { width: 31%; padding-right: 40px } .cards-flex .cards img { width: auto; height: 180px; display: block; margin-bottom: 30px } .cards-flex .cards h3 { color: #000; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 24px; line-height: 34px } .cards-flex .cards p { color: #000; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; padding: 10px 0 } .flex-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between } .features-img { width: 53%; float: left; text-align: center; margin-top: 37px; z-index: 1 } .features-img img { max-width: 100% } .features-communication, .features-data-moderation { flex-wrap: wrap; align-items: center; display: flex } .features-img img { height: auto; width: 100%; display: block } .features-img img.lazy-communication { height: auto; width: 70%; margin: 0 auto } .features-img img.lazy-data { height: 464px; width: 550px } .features-content { flex: 1; float: left; border-radius: 10px; padding: 50px 0 58px 40px; z-index: 1 } .features-content.left { padding: 20px 40px 0 0 } .features-content h3.heading-features { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 32px; line-height: 40px; margin-bottom: 10px; padding-left: 40px } .features-content .desp { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 5px; padding: 0 50px; margin-bottom: 10px } .accordion { margin-bottom: 17px; position: relative; padding: 9px 15px 0 90px } .accordion { position: relative } .accordion:after { content: ""; position: absolute; right: 0; width: 83%; height: 1px; background: #ccc; bottom: -15px } .accordion svg { position: absolute; top: 10px; left: 40px; fill: #000; right: 0; bottom: 0; width: 31px; height: 26px } .accordion img { position: absolute; top: 10px; left: 40px; right: 0; bottom: 0; width: 31px; height: auto } .accordion img.download { width: 25px } .arrows svg { position: absolute; right: 10px; top: 13px; width: auto; height: auto; bottom: inherit; left: inherit; fill: #ccc; transform: rotate(180deg); transition: all ease .3s } .arrows img.arrow { position: absolute; right: 10px; top: 13px; width: auto; height: auto; bottom: inherit; left: inherit; fill: #ccc; transform: rotate(180deg); transition: all ease .3s } .accordion.active-acc svg { fill: url(#ultimate-icons1) } .accordion.active-acc .arrows svg, .arrows img.arrow { fill: #4061e0; transform: rotate(0) } .accordion h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; display: inline-block; cursor: pointer; width: 70% } .accordion.active-acc h4 { color: #4061e0 } ul.one-to-one { display: flex; flex-wrap: wrap; margin-top: 10px } ul.one-to-one li { width: 50%; margin-bottom: 15px; position: relative; padding-left: 20px; padding-right: 10px; line-height: 22px } ul.one-to-one li:after { content: ""; width: 10px; height: 10px; background: #4061e0; display: block; border-radius: 50%; position: absolute; left: 0; top: 6px } .accordion p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 5px } .accordion-desc { display: none } .features-content a { margin: 32px 0 0 52px } .security { margin: 80px 0 20px 0 } .flex-container .img-section { width: 50% } .flex-container .img-section img { display: block; height: auto } .flex-container .content-section { flex: 1; padding-left: 120px } .section-head h3 { color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 26px; line-height: 36px; margin-bottom: 30px } .content-section ul li { color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; padding-bottom: 20px; padding-left: 30px; position: relative } .content-section ul li::before { content: ""; background-color: #fff; height: 10px; width: 10px; border-radius: 15px; top: 10px; position: absolute; left: 0 } .banner-content.education h1 { line-height: 50px !important } .banner-content.education h1 span.tagline-point { line-height: 60px } @media (max-width:1200px) { .cfly-banner .banner-content ul li { margin: 0 35px 10px 0 } .banner-button { margin-top: 30px } section.cfly-banner { margin-top: 70px } } @media screen and (max-width:1024px) { .banner-image { display: none } .cfly-banner .banner-content { padding: 0 } .banner-flex { padding: 50px 20px } } @media screen and (max-width:991px) { .cfly-banner { background-size: cover } .cards-flex .cards { width: 100%; text-align: center; margin-bottom: 10px; padding: 0 20px } .cards-flex .cards img { margin: 0 auto } .features-img { width: 100%; margin-top: 30px } .features-content { width: 100%; flex: inherit; padding: 20px 0 !important } .flex-container .img-section { width: 100% } .flex-container .content-section { width: 100%; flex: inherit } .fd-cr { flex-direction: column-reverse } } @media (min-width:769px) and (max-width:1026px) { .cfly-banner .banner-content ul li { width: 36.3% } .features-img img { width: 70% !important; margin: 0 auto } .features-content { padding-left: 20px } .features-content.left { padding-right: 20px } .flex-container .content-section { padding-left: 20px } } @media only screen and (max-width:768px) { .cfly-banner h1 { width: 100% } .banner-image { display: none } .cfly-banner .banner-content { width: 100%; padding: 30px 0 15px; text-align: center } .cfly-banner { padding-bottom: 23px } .banner-button { margin-top: 26px } .cfly-banner { padding-bottom: 10px } .cfly-banner h1, .cfly-banner h1 span, .cfly-banner h1 span.tagline-point { line-height: 34px !important; font-size: 25px !important; text-align: center; display: inline; } .cfly-banner h1:after { bottom: 10px; left: 50%; transform: translateX(-50%) } .cfly-banner .banner-content ul { text-align: center } .cfly-banner .banner-content ul li { margin: 0 10px 10px 0; font-size: 16px; line-height: 24px; text-align: left } .banner-button { margin-top: 0; padding: 10px 22px } .cfly-banner .banner-content ul.points { max-width: 70% } .accordion { padding: 9px 15px 10px 50px } .accordion svg { left: 5px } .accordion img { left: 5px } .flex-container .content-section { padding-left: 0; margin-top: 30px } .security { margin: 30px 0 20px 0 } .cards-flex .cards h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 34px } } @media (max-width:640px) { section.cfly-banner { margin-top: 60px } .banner-flex { padding: 0 20px } .cfly-banner h1 { padding-bottom: 20px } .button.talk-to-us { margin-right: 0 !important } .cfly-banner .banner-content ul li { margin: 0 10px 10px 0; font-size: 16px; width: 100% } .cfly-banner .banner-content ul.points { max-width: 50% } .features-content h3.heading-features { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 23px; line-height: 32px } .accordion h4 { width: 100% } .banner-content.education h1 { font-family: "proxima-nova", sans-serif; font-size: 25px !important; line-height: 35px !important; margin-bottom: 10px; display: block } .cfly-banner .banner-content .sub-head { line-height: 25px; margin-bottom: 0 } } @media (max-width:500px) { .features-img img.lazy-communication { width: 100% !important; margin: 0 auto } .features-img img.lazy-communication { width: 70% !important } } @media screen and (max-width:480px) { .cfly-banner .banner-content ul { text-align: left } .cfly-banner .banner-content ul li { width: 100% } .cfly-banner .banner-content .sub-head { font-size: 16px; margin-bottom: 0; width: 100%; } .cfly-banner .banner-content ul.points { max-width: 60% } } @media screen and (max-width:375px) { .cfly-banner .banner-content ul li { width: 75% } .cfly-banner .banner-content ul.points { max-width: 85% } } section#feature-enriched { padding-top: 0 } section.section-padding.section-bg.mb-20 { margin-bottom: 0 }