.section-banner { background: url(../png/banner-bg-2.png) no-repeat; background-size: cover !important; background-position: center !important; padding: 60px 0 150px 0; position: relative; } .branding-img { width: 39%; text-align: left; margin-left: 8%; } .branding-img .features-img-one, .branding-img .features-img-two { width: 339px; height: 381px; } .branding-flex { padding-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 100%; margin: 0 auto; } .branding-tab { -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; margin-left: 0; } .branding-tab.pright80 { padding-right: 50px; } .branding-tab.pleft40 { padding-left: 40px; } .branding-tab .accordion.active-acc h5, .branding-tab .accordion:hover h5 { color: #1967d2; } .branding-tab .accordion { margin-bottom: 0; padding: 25px 20px 25px 50px; } .branding-tab .accordion.videocontent { padding: 0 20px 20px 20px; display: flex; position: relative; border-bottom: solid 1px #ccc; margin-top: 20px; } .branding-tab .accordion.videocontent:last-child { border: none; } .branding-tab .accordion img { width: 28px; height: auto; } .branding-tab .accordion h5 { color: #000; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 20px; line-height: 30px; position: relative; cursor: pointer; margin-top: 0px; } .branding-tab .active-acc .arrows { border: none; } .branding-tab .accordion .comm-desc { color: #313131; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; margin-top: 10px; } .branding-tab .accordion h5:before { content: ""; width: 8px; height: 8px; position: absolute; left: -25px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 100%; margin-right: 10px; vertical-align: middle; background: #000; } .branding-tab .accordion.active-acc h5:before { background: -webkit-linear-gradient(left, #0799d6 0, #60d2a3 70%); background: -webkit-gradient(linear, left top, right top, from(#0799d6), color-stop(70%, #60d2a3)); background: -o-linear-gradient(left, #0799d6 0, #60d2a3 70%); background: -webkit-gradient(linear, left top, right top, from(#0799d6), color-stop(70%, #60d2a3)); background: linear-gradient(to right, #0799d6 0, #60d2a3 70%); } .branding-tab .accordion.active-acc.videocontent h5::before, .branding-tab .accordion.videocontent h5::before { display: none; } .accordioncontent { padding-left: 15px; } .subscription-img.noimgage { width: 60%; } .subscription-img.noimgage img { margin: 0 auto; display: block; } .branding-tab { -ms-flex: 0 0 40%; flex: 0 0 40%; } svg.arrows { position: absolute; right: 0; top: 10px; transform: rotate(180deg); transition: all ease 0.3s; cursor: pointer; } .mt50 { margin-top: 50px; } .features-list.content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .features-list .list { width: 32%; text-align: left; padding: 20px 20px; position: relative; } .features-list .list img { width: 40px; height: auto; } .features-list .list h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 25px; line-height: 35px; position: relative; margin-top: 15px; } .features-list .list p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 15px; line-height: 23px; margin-top: 15px; min-height: 70px; } .banner-center { width: 70%; margin: 0 auto; } .banner-center h1 { display: block; font-family: "proxima-nova", sans-serif; font-weight: 800; font-size: 46px; line-height: 50px; position: relative; color: #fff; text-align: center; } .banner-center h1 span.highlight { color: #18e9bd; display: block; } .banner-center h1 span.banner-sub-title { font-family: "proxima-nova", sans-serif; font-weight: 500; font-size: 17px; line-height: 28px; color: #ffffff; opacity: 80%; margin-bottom: 3px; display: block; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: #ffffff; } .banner-list-wrap { margin-top: 28px; } .banner-center p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 18px; line-height: 24px; width: 80%; margin: 0 auto; margin-top: 28px; margin-bottom: 28px; color: #fff; text-align: center; } ul.banner-list { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 25px; text-align: left; justify-content: space-between; width: 420px; margin: 0 auto; } ul.banner-list li { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 26px; margin-bottom: 6px; list-style-type: none; color: #ffffff; min-width: 200px; } ul.banner-list li svg { margin-right: 5px; transform: translateY(2px); } .banner-center ul li i { height: 10px; width: 10px; display: block; background: #fff; border-radius: 50px; display: inline-block; margin-right: 12px; } .banner-btns { text-align: center; } .button.talk-to-us { min-width: 199px; font-weight: 600; display: inline-block; overflow: inherit; margin-right: 15px !important; background: #fb7d17; color: #fff; border: 1px solid #f27d19; } .button.secondary { border: solid 1px #fff; background: 0 0; color: #fff; min-width: 199px; box-shadow: 8px 9px 27px 0 rgb(5 122 171 / 25%); font-weight: 600; display: inline-block; margin-top: 20px; } .button.secondary:hover { background: #fb7d17; color: #fff; border: solid 1px transparent; } .button { margin: 0 auto; } .section-container { padding: 50px 15px 0; } .client-logos { margin: 65px auto 20px auto; } .client-logos img { max-width: 75%; display: block; margin: 0 auto; height: auto; } .chat-apps { padding: 40px 0; } .chat-apps ul { margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .chat-apps ul li { width: 30%; margin: 40px 18px 7px; background: #fff; box-shadow: 0 3px 36px #435ee01a; padding: 30px 20px; border-radius: 10px; position: relative; min-height: 280px; max-height: 280px; overflow: hidden; } .chat-apps ul li svg { height: 37px; width: 37px; fill: url(#ultimate-icons1); } .chat-apps ul li img { width: 37px; } .chat-apps ul li h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; position: relative; margin-top: 15px; } .chat-apps ul li h4:after { content: ""; position: absolute; width: 46px; height: 2px; background-color: #0400c4; left: 0; bottom: -8px; } .chat-apps ul li p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 15px; line-height: 23px; margin-top: 24px; } .chat-apps ul li:after { position: absolute; content: ""; width: 0; height: 4px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; background-color: #0400c4; -webkit-transition: all ease 0.8s; -o-transition: all ease 0.8s; transition: all ease 0.8s; border-radius: 10px; } .chat-apps ul li:hover:after { width: 100%; } .chart { padding-top: 60px; text-align: center; } .chart img { margin: 0 auto; width: 55%; } .flex-container { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .saap { width: 50%; } .saap h3 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 32px; line-height: 40px; color: #000; width: 85%; margin-bottom: 20px; } .saap h3 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 32px; line-height: 40px; } .saap p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; width: 85%; padding-bottom: 20px; } .saap-img { flex: 1; position: relative; margin-bottom: 30px; } .saap-img img { width: 100%; height: auto; } .saap-img span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; text-align: center; position: absolute; } .top-left { top: 33%; left: 0; } .top-right { top: 33%; right: 0; } .bottom { bottom: -7%; left: 50%; transform: translateX(-50%); } .left { bottom: 15%; left: 10%; } .right { bottom: 15%; right: 11%; } .responsive { display: none; } .chat { padding: 50px 20px; } .comparison-table { width: 100%; max-width: 800px; margin: 0 auto; padding: 0px; border-radius: 24px; margin-top: 55px; overflow: auto; background: #ffffff 0% 0% no-repeat padding-box; box-shadow: 0px 0px 30px #0000ff1a; border-radius: 24px; opacity: 1; } .modal-content .comparison-table { max-width: 100%; } .comparison-table tbody tr.heading-title td { padding: 11px 20px; font-weight: 800; font-size: 18px; font-family: "proxima-nova", sans-serif; font-weight: 700; border: none; color: #0d5fe7; } .comparison-table tbody tr.heading-title td:first-child { border-top: none; border-bottom: none; } .comparison-table table tr td img, .comparison-table table tr td span { vertical-align: middle; } .featureinfor img { cursor: pointer; } .button.show-all-feature { padding: 12px 30px; border-radius: 25px; background-color: #0d5fe7; cursor: pointer; } .show-all-feature { margin: 10px auto; margin-bottom: 0px; } .button.show-all-feature svg { position: relative; top: 3px; } .comparison-table table tr td img { width: auto; height: auto; } .comparison-table table tr td span { margin-left: 15px; color: #014fce; font-size: 18px; } .comparison-table table { width: 100%; border-collapse: collapse; border-spacing: 0; background: #f3f7fe; /* border-top-left-radius: 16px; */ /* border-top-right-radius: 16px; */ } .comparison-table thead { border-bottom: 1px solid rgba(93, 119, 144, 0.2); } .comparison-table th { padding: 24px 28px; color: #000d45; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 20px; min-width: 162px; position: relative; /* border-top-right-radius: 16px; */ } .comparison-table th:first-child { text-align: left; } .comparison-table th:nth-child(2) { border-left: 1px solid #00205f; /* background-color: #00205F; */ border-top-right-radius: 0; /* border-top-left-radius: 16px; */ border-width: inherit; } .comparison-table th:nth-child(2) { background-color: #ffffff; border-right: 1px solid #00205f; border-width: inherit; border-top-right-radius: 16px; border-top-left-radius: 16px; } .comparison-table tbody tr td:first-child, .comparison-table th:first-child { text-align: center; } .comparison-table tbody tr td:nth-child(2), .comparison-table th:nth-child(2) { text-align: center; } .comparison-table tbody tr td:first-child, .comparison-table th:first-child { text-align: left; } .comparison-table tbody tr td { padding: 12px 20px; color: #030303; font-size: 16px; font-family: "proxima-nova", sans-serif; font-weight: 600; border-right: 1px solid rgba(93, 119, 144, 0.1); vertical-align: middle; } .comparison-table tr.heading-title { border-top: 1px solid rgba(93, 119, 144, 0.1); border-right: 1px solid rgba(93, 119, 144, 0.1); } .comparison-table tbody tr { border-bottom: 1px solid rgba(93, 119, 144, 0.1); } .comparison-table tbody tr:last-child { border-bottom: none; } .comparison-table tbody tr td.yes { color: #208900; } .comparison-table tbody tr td.no { color: #f13030; } .comparison-table th img { width: 70%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; } .comparison-table th.comp-sticky { /* position: sticky; */ /* top: 0px; */ } .faq-bg { background-color: #fcfcfc; padding: 0; position: relative; margin-bottom: 0; } .faq-bg:before { content: ""; position: absolute; right: -7%; top: 0; width: 350px; height: 60%; background-image: url(../png/pattern-1.png); background-repeat: no-repeat; background-size: contain; z-index: 0; } .faq-bg:after { content: ""; position: absolute; left: -7%; bottom: 32px; width: 350px; height: 60%; background-image: url(../png/pattern-2.png); background-repeat: no-repeat; background-size: contain; z-index: 0; } .faq-head { text-align: center; padding: 60px 0 50px 0; position: relative; } .faq-head .section-title { font-size: 36px; color: #000; text-transform: capitalize; line-height: 40px; margin-bottom: 10px; font-family: "proxima-nova", sans-serif; font-weight: 700; } .faq-subtitle { font-size: 18px; color: #000; max-width: 900px; margin: auto; margin-bottom: 25px; } .faq-head:after { content: ""; width: 97px; height: 1px; background: #000; position: relative; display: block; margin: 20px auto 0; } .faq-container { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; position: relative; } .faq-accordian-wrapper { width: 48%; } .faq-acc { background: #fff 0 0 no-repeat padding-box; box-shadow: 0 0 20px #0000001a; border-radius: 10px; margin-bottom: 20px; position: relative; z-index: 1; } .faq-acc h5 { font-size: 16px; font-family: "proxima-nova", sans-serif; font-weight: 700; line-height: 26px; cursor: pointer; width: 95%; } .faq-acc p { font-size: 16px; line-height: 24px; margin-top: 12px; padding: 0 25px 25px 25px; } .faq-acc.active-acc h5 { color: #1967d2; } .pt-30 { padding-top: 30px; } .faq { position: relative; padding: 25px; } .active-acc.faq { padding-bottom: 0; } .arrows { position: absolute; right: 0; vertical-align: middle; top: 5px; transform: rotate(180deg); transition: all ease 0.3s; } .rotate .arrows { transform: rotate(0); } img.arrows { position: absolute; right: 20px; vertical-align: middle; top: 30px; transform: rotate(180deg); transition: all ease 0.3s; border: solid 1px #000; border-radius: 50%; width: 20px; padding: 5px; } .active-acc .arrows { transform: rotate(0); border: solid 1px #0400ee; fill: #0400ee; } @media (max-width: 991px) { .faq-accordian-wrapper { width: 100%; } .faq-head .section-title { font-size: 21px; line-height: 0; } .faq-subtitle { font-size: 15px; padding: 10px; line-height: 26px; } .faq-bg:after { display: none; } .faq-bg:before { display: none; } } @media (min-width: 1500px) { .section-banner { padding: 80px 0; background-position: center; } } @media (max-width: 1200px) { .section-banner { padding: 45px 0 85px 0; margin-top: 70px; } } @media (max-width: 1024px) { .section-banner { padding: 50px 0 80px 0; } .banner-center { width: 50%; } .chat-apps ul li { width: 45%; } .saap h3 { width: 100%; } .saap p { width: 100%; } .saap h3 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 21px; line-height: 30px; } .saap h3 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 30px; } .section-banner { background-attachment: fixed; } .banner-center { width: 90%; } .banner-center ul { width: 100%; } .responsive { display: block; } .device { display: none; } .features-cont { display: none; } .client-logos { margin: 40px auto 20px auto; } } @media (max-width: 991px) { .saap h3 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 24px; line-height: 32px; } .saap h3 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; } } @media only screen and (max-width: 850px) { .branding-tab.pleft40 { padding-left: 0; } .branding-tab { -ms-flex: 0 0 100%; flex: 0 0 100%; } .upload-content .branding-tab { -ms-flex: 0 0 100%; flex: 0 0 100%; } .newbrandigtab .branding-tab { -ms-flex: 0 0 100%; flex: 0 0 100%; } .subscription-img.noimgage { display: none; } .features-list .list { width: 100%; padding: 10px 20px; } .mt50 { margin-top: 0; } .section-container { padding: 30px 15px 0; } .comparison-table table tr td span.tool-tip { display: none; } } @media (max-width: 768px) { .section-banner { margin-top: 60px; padding: 30px 0 150px 0; } .banner-center ul li { font-size: 14px; font-weight: 600; min-width: 180px; } } @media (max-width: 640px) { .comparison-table tbody tr td:first-child, .comparison-table th:first-child { text-align: left; min-width: 168px; font-size: 14px; } .comparison-table { padding: 0px; } .comparison-table table tr td span.featureinfor img { transform: translateY(-1px); } .comparison-table tbody tr td { padding: 12px 15px 12px 15px; line-height: 1.15; } .comparison-table tbody tr td:nth-child(2), .comparison-table th:nth-child(2) { min-width: 170px; } .comparison-table tbody tr td:nth-child(3), .comparison-table th:nth-child(3) { min-width: 170px; } .client-logos { margin: 35px auto 20px auto; } .heading h2, .heading h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 30px; } .section-banner { padding: 30px 0 40px 0; } .button.talk-to-us { margin-right: 0 !important; } .banner-center { width: 100%; } .banner-center h1 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 30px; line-height: 40px; position: relative; color: #fff; } .banner-center p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; margin-top: 16px; margin-bottom: 16px; } .banner-center h1 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 30px; line-height: 40px; } .banner-list-wrap { margin-top: 20px; } .banner-center ul li { width: 46%; } .banner-center ul { padding-left: 20px; } .chat-apps ul li { width: 100%; min-height: inherit; } .chart img { width: 100%; } .saap { width: 100%; } .saap-img { width: 100%; flex: inherit; margin-bottom: 0; } .saap h3 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 21px; line-height: 30px; } .saap h3 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 21px; line-height: 30px; } .client-logos img { max-width: 100%; } .banner-center ul li { width: 100%; } .banner-center ul { width: 180px; padding: 0; display: flex; justify-content: center; } } @media (max-width: 500px) { .section-banner { padding: 30px 0 50px 0; } .client-logos { margin: 35px auto 20px auto; } } @media (max-width: 400px) { .client-logos { margin: 35px auto 20px auto; } .section-banner { padding: 30px 0 50px 0; } .banner-center h1 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 26px; line-height: 40px; } }