img { max-width: 100% } .faq.active-acc { color: #3806f5 } .connect-to-device { padding-top: 69px; position: relative } .lazy-img { height: 474px; width: 430px } .features-api { margin: 84px 0 0; position: relative } .features-img { width: 550px; float: left; text-align: center; margin-top: 99px; z-index: 1 } .features-img img { max-width: 100% } .features-communication { align-items: center } .features-img img.lazy-data { height: 498px; width: 537px } .features-content { width: 610px; float: left; border-radius: 10px; background-color: #fff; margin: 0 20px 0; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12); padding: 50px 0 58px; z-index: 1 } .features-content a { margin: 32px 0 0 52px } .features-content p a { margin-left: 0; font-weight: 600 } .security { margin-top: 85px; overflow: hidden } .security p { margin: 0 auto } .security-solutions { width: 333px; float: left; position: relative; right: -104px; background: -webkit-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: -o-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: linear-gradient(65deg, #35c6e8 0, #3a4adf 100%); border-radius: 6px; height: 362px } .security-solutions:after { position: absolute; content: ""; background: #ebf5fc; height: 310px; width: 300px; z-index: -1; top: 26px; left: -34px; border-radius: 6px } .security-content { position: absolute; width: 355px; color: #fff; border-radius: 6px; padding: 20px 42px 30px 35px } .security-content h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 30px; margin-top: 16px } .security-content p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; width: auto; margin-top: 15px } .security-content svg { height: 55px; width: 55px; fill: #fff } .connect-device-content .connect-device-solutions { width: 295px; position: relative; background: #fff; border-radius: 6px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12); cursor: pointer } .connect-device-content .connect-device-solutions:hover { background: -webkit-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: -o-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: linear-gradient(65deg, #35c6e8 0, #3a4adf 100%) } .connect-device-content .connect-device-solutions .connect-device-security-content { width: 100%; color: #000; border-radius: 6px; padding: 20px 20px 30px 20px } .connect-device-content .connect-device-solutions .connect-device-security-content svg { height: 35px; width: 35px; fill: #000 } .connect-device-content .connect-device-solutions .connect-device-security-content img { height: auto; width: 35px } .connect-device-content .connect-device-solutions .connect-device-security-content h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; margin-top: 16px } .connect-device-content .connect-device-solutions .connect-device-security-content p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; width: auto; margin-top: 15px } .connect-device-content.features-content { display: flex; align-items: center; box-shadow: none; margin: 54px 20px 0; padding: 50px 0 0 } .connect-device-content .connect-device-solutions:hover .connect-device-security-content svg { fill: #fff } .connect-device-content .connect-device-solutions:hover .connect-device-security-content img { filter: invert(1) } .connect-device-content .connect-device-solutions:hover .connect-device-security-content { color: #fff } .connect-device-content .connect-device-solutions:hover .connect-device-security-content a { color: #fff } .connect-device-content.features-content .first-set .connect-device-solutions { margin-bottom: 30px } .connect-device-content.features-content .first-set { margin-right: 20px } .connect-to-device .features-communication { display: flex; align-items: center } .connect-device-content.features-content .second-set { margin-left: auto } .lazy { display: inline-block; background-repeat: no-repeat; background-position: 49% 50% } .functionalities-section { padding-bottom: 0 } .functionalities-section .heading { padding-bottom: 35px } .functionalities-feature-row { display: flex; align-items: center } .feature-row-list h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 25px; padding: 10px 0 } .feature-row-list { padding: 10px 20px; margin: 10px; width: 25% } .feature-row-list p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 25px } .chat-api-banner { background-size: cover !important; background-position: center !important; padding: 0; position: relative; padding: 50px 0 50px; background-image: linear-gradient(90deg, #3D199D, #651B9A); } .banner-content { width: 55%; margin-top: 0 } .container.banner-heading { position: static } .banner-img { position: absolute; right: -4%; top: 0 } .container.banner-heading.clearfix { position: relative; display: flex; align-items: center } .banner-img img { height: auto } .banner-heading h1 { font-family: "proxima-nova", sans-serif; font-weight: 800; font-size: 38px; line-height: 46px; padding-bottom: 30px; position: relative; margin-bottom: 22px; } .banner-content h1 span.banner-sub-title { font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 22px; display: block; margin-bottom: 8px; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #FFFFFF; opacity: 90%; } .banner-heading h1 span.highlight { display: block; color: #FFCE00; font: inherit; } .banner-heading h1:after { content: ""; background-image: url(../svg/path-one-3.svg); position: absolute; left: 0; width: 160px; height: 13px; background-repeat: no-repeat; bottom: 0; } ul.banner-list { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 12px; margin: 0; width: 100%; list-style-position: inside; align-content: flex-start; } .banner-heading h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 25px; line-height: 45px } .banner-heading h1 span { position: relative } h1 span.heading-desc { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 32px; line-height: 48px } .banner-heading p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 0px; margin-bottom: 30px; max-width: 80% } .banner-heading .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 } .banner-heading .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 } .banner-heading .button.secondary:hover { background: #fb7d17; color: #fff; border: solid 1px transparent } .banner-img-human { position: absolute; top: 77%; height: auto; width: 220px; right: 32% } .banner-img-laptop { position: absolute; width: 280px; right: 15%; top: 19%; animation: laptop-moving 2s ease-in-out infinite; animation-direction: alternate } @keyframes laptop-moving { 0% { transform: translate(0, 0) } 100% { transform: translate(0, 15px) } } .banner-img-phone { position: absolute; width: 235px; right: 0; top: 22%; animation: phone-moving 2s ease-in-out infinite; animation-direction: alternate } @keyframes phone-moving { 0% { transform: translate(0, 15px) } 100% { transform: translate(0, 0) } } .banner-heading { color: #fff } .banner-content ul { margin-bottom: 12px } .banner-content ul li { font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; margin: 0px 0px 12px 0px; display: inline-block; color: #fff; width: 45%; } ul.banner-list li svg { margin-right: 5px; transform: translateY(2px); } .banner-content ul li i { height: 10px; width: 10px; display: block; background: #fff; border-radius: 50px; display: inline-block; margin-right: 12px } .chat-sdk { float: left; width: 553px } .container.chat-api-sdk { padding-bottom: 99px; overflow: hidden } .chat-sdk .heading.chat-api { margin-top: 67px } .chat-sdk.chat-features { float: left; width: 647px; text-align: center; position: relative; padding: 150px 0 0 50px } .heading.chat-api h2 { margin-bottom: 0; text-align: left } .heading.chat-api p { text-align: left; font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 36px; line-height: 44px; margin: 0 0 33px } .heading.chat-api p:after { content: ""; position: absolute; left: 0; bottom: -13px; background: #6a63ce; width: 136px; height: 3px; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } .chat-sdk p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 28px; color: #131313; margin: 60px 42px 35px 0 } .chat-sdk img { max-width: 100% } .chat-sdk.chat-features p { position: absolute; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; margin: 0; color: #3e207e; text-align: right } .chat-sdk.chat-features p.messaging-eng { top: 221px; left: -45px } .chat-sdk.chat-features p.high-profile { top: 135px; left: 69px } .chat-sdk.chat-features p.on-demand { top: 91px; left: 281px; text-align: center } .chat-sdk.chat-features p.features-demand { top: 138px; left: 494px; text-align: left } .chat-sdk.chat-features p.data-protection { top: 140px; left: 452px; text-align: left } .chat-sdk.chat-features p.devops { top: 221px; right: -6px; text-align: left } .chat-sdk.chat-features p.intergration { top: 289px; right: -13px; text-align: left } .chat-sdk.chat-features p.intergration-features { top: 369px; right: -38px; text-align: left } .chat-sdk .chat-content { width: 420px } .chat-sdk ul li { display: none; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 14px; line-height: 22px; color: #131313; padding: 12px 0 } .chat-sdk ul li svg { height: 30px; width: 30px; display: inline-block; vertical-align: middle; margin-right: 10px; fill: url(#ultimate-icons1) } .tab-section { padding-top: 69px; position: relative } .tab-section .container { overflow: hidden } .tab-section svg.circle { position: absolute; bottom: -50px; right: 0; z-index: -1 } ul.tabs { margin: 65px 0 0; padding: 0; float: left; list-style: none; width: 100%; border-bottom: 2px solid #ccc } ul.tabs li { float: left; cursor: pointer; padding: 0; color: #131313; overflow: hidden; position: relative; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 23px; text-align: center; width: 171px; margin: 0 auto; height: 90px; -webkit-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s } ul.tabs li i { display: block; margin-bottom: 5px } ul.tabs li i svg { width: 30px; height: 30px; fill: #131313 } ul.tabs li:hover { color: #2650bb; border-bottom: 3px solid #2650bb } ul.tabs li.active i svg, ul.tabs li:hover i svg { fill: url(#ultimate-icons1) } ul.tabs li.active { background-color: #fff; color: #2650bb; display: block; border-bottom: 3px solid #2650bb } .tab_container { clear: both; float: left; width: 100%; background: #fff; overflow: auto } .tab_content { padding: 25px 0 15px; display: none; overflow-y: hidden } .tab-img { text-align: center } .tab_drawer_heading { display: none } .tab-description, .tab-img { width: 50%; float: left } .tab-description { padding: 39px 0 0 17px } .tab-description h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 32px; line-height: 40px; margin-bottom: 10px; color: #000 } .tab-description p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-bottom: 24px; width: 500px; color: #131313 } .tab-description ul { width: 100% } .tab-description ul li { display: inline-block; padding: 9px 0; position: relative; vertical-align: top; padding-left: 24px; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 24px; color: #131313; width: 40% } .tab-description ul li span { content: ""; position: absolute; height: 10px; width: 10px; background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #7963da), color-stop(1%, #7963da), color-stop(99%, #25619a), color-stop(100%, #25619a)); background: -webkit-linear-gradient(45deg, #7963da 0, #7963da 1%, #25619a 99%, #25619a 100%); background: -o-linear-gradient(45deg, #7963da 0, #7963da 1%, #25619a 99%, #25619a 100%); background: linear-gradient(45deg, #7963da 0, #7963da 1%, #25619a 99%, #25619a 100%); border-radius: 50px; top: 16px; left: 0; margin-right: 12px } .tab-description .button { margin-top: 25px } .lazy { display: inline-block; background-repeat: no-repeat; background-position: 49% 50% } .lazy-img { height: 474px; width: 430px } .slider-loader { height: 467px; width: 407px } .features-api { margin: 84px 0 90px; position: relative } .bubble-top { position: absolute; right: -88px; top: 69px; z-index: -1 } .bubble-bottom { position: absolute; left: -144px; bottom: -63px; z-index: -1 } .features-img { width: 550px; float: left; text-align: center; margin-top: 50px; z-index: 1 } .features-img img { max-width: 100% } .features-img img.lazy-data { height: 464px; width: 550px } .features-content { width: 610px; float: left; border-radius: 10px; background-color: #fff; margin: 10px 20px 0; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .12); padding: 50px 0 58px; z-index: 1 } .features-content h3.heading-features, .features-content h4.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 40px; margin-bottom: 10px } .accordion { margin-bottom: 17px; position: relative; padding: 9px 42px 10px 90px } .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.height { width: 23px } .accordion.active-acc { background-color: #fff } .accordion.active-acc svg { fill: url(#ultimate-icons1) } .accordion h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; display: inline-block; cursor: pointer } .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 } .moderation li { width: 575px; display: inline-block; background-color: #f9f9ff; padding: 35px 60px 37px; margin-top: 76px; -webkit-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; border-radius: 6px } .moderation li h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 28px; line-height: 36px; margin-bottom: 27px } .moderation li p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 18px; line-height: 23px } .moderation li:nth-child(2) { margin-left: 45px } .moderation li:hover { background-color: #eef } .security { margin-top: 85px; overflow: hidden } .security p { margin: 0 auto } .security-list { width: 885px; margin: 71px auto 0; border: 1px solid #e1e1e1; padding: 55px; position: relative } .security-list ul { width: 440px; float: left } .security-list ul li { width: 220px; float: left } .security-list ul li h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; width: 207px; padding: 73px 30px 63px 23px; min-height: 188px } .security-list ul li p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; display: none } .security-list ul li svg { height: 37px; width: 37px; margin: 10px 10px 0; display: none } .security-list ul li:nth-child(1), .security-list ul li:nth-child(3) { border-right: 2px solid #efefef } .security-list ul li:nth-child(1), .security-list ul li:nth-child(2) { border-bottom: 2px solid #efefef } .security-solutions { width: 333px; float: left; position: relative; right: -104px; background: -webkit-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: -o-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: linear-gradient(65deg, #35c6e8 0, #3a4adf 100%); border-radius: 6px; height: 362px } .security-solutions:after { position: absolute; content: ""; background: #ebf5fc; height: 310px; width: 300px; z-index: -1; top: 26px; left: -34px; border-radius: 6px } .security-content { position: absolute; width: 355px; color: #fff; border-radius: 6px; padding: 20px 50px 30px 35px } .security-content h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 30px; margin-top: 16px } .security-content p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; width: auto; margin-top: 15px } .showSingle { cursor: pointer; color: #000 } .showSingle.active { background-color: #efebf8; display: block } .security-content svg { height: 55px; width: 55px; fill: #fff } .targetDiv { opacity: 0; -webkit-transition: all ease 2s; -o-transition: all ease 2s; transition: all ease 2s } .targetDiv.active { opacity: 1 } .container.chat-apps { overflow: hidden; padding-bottom: 40px; margin-top: 50px } .container.chat-apps .heading { margin-bottom: 30px } .chat-apps ul { width: 1200px; 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: 260px; margin: 40px 18px 7px; background: #fff; -webkit-box-shadow: 10px 13px 36px 0 rgba(67, 94, 224, .17); box-shadow: 10px 13px 36px 0 rgba(67, 94, 224, .17); padding: 30px 20px; border-radius: 10px; position: relative; min-height: 395px; overflow: hidden } .chat-apps ul li svg { height: 37px; width: 37px; fill: url(#ultimate-icons1) } .chat-apps ul li img { height: auto; width: 37px } .chat-apps ul li h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; position: relative; margin-top: 15px } .chat-apps ul li h3:after { content: ""; position: absolute; width: 46px; height: 2px; background-color: #5383ff; left: 0; bottom: -8px } .chat-apps ul li p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 21px; 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: #435ee0; -webkit-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; border-radius: 10px } .chat-apps ul li:hover:after { width: 100% } .full-text { white-space: nowrap } .video-call-solution-mainpage .banner-heading, .video-call-solution-mainpage .chat-api-sdk, .video-call-solution-mainpage ul.tabs { display: flex } .video-call-solution-mainpage .chat-apps ul { display: flex; flex-wrap: wrap } .same-design .features-content { background: 0 0; box-shadow: none; padding: 20px 0 30px } .same-design .features-content .accordion.active-acc, .same-design .features-content .accordion:hover { padding: 9px 42px 10px 90px; margin-bottom: 17px; background: #fff; border-radius: 10px; -webkit-box-shadow: -1px 0 20px #e3e2f5; box-shadow: -1px 0 20px #e3e2f5 } .same-design .features-content .accordion.active-acc span { top: 27px } .same-design .features-content .accordion span { width: 12px; height: 12px; display: block; background: #7060c9; border-radius: 50%; position: absolute; top: 17px; left: 24px; fill: #000; right: 0; bottom: 0 } .same-design .features-content .accordion { display: flex; align-items: start; flex-direction: column } .same-design .features-content .accordion h4 { flex-basis: 100% } .same-design .features-content .accordion.active-acc p { flex-basis: 100% } .live-broadcasting-section .features-content ul.live-broadcasting-items li:nth-child(2n) { border-right: none } .live-broadcasting-section .features-content ul.live-broadcasting-items li:nth-child(5), .live-broadcasting-section .features-content ul.live-broadcasting-items li:nth-child(6) { border-bottom: none } .live-broadcasting-section .features-content { padding: 0; box-shadow: none } .features-communication.live-broadcasting-section { display: flex; align-items: center } .live-broadcasting-section .features-content ul.live-broadcasting-items { display: flex; align-items: start; flex-wrap: wrap } .live-broadcasting-section .features-content ul.live-broadcasting-items li:hover { float: left; position: relative; background: -webkit-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: -o-linear-gradient(25deg, #35c6e8 0, #3a4adf 100%); background: linear-gradient(65deg, #35c6e8 0, #3a4adf 100%); transition: .5s all ease; transform: scale(1.02) } .live-broadcasting-section .features-content ul.live-broadcasting-items li:hover h3 { color: #fff } .live-broadcasting-section .features-content ul.live-broadcasting-items li:hover p { color: #fff } .live-broadcasting-section .features-content ul.live-broadcasting-items li { width: 50%; padding: 15px 15px 30px 15px; border-right: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9 } .live-broadcasting-section .features-content ul.live-broadcasting-items a { margin: 0; display: block } .live-broadcasting-section .features-content ul.live-broadcasting-items li h3 { font-size: 18px; font-family: "proxima-nova", sans-serif; font-weight: 700; line-height: 44px; color: #000 } .live-broadcasting-section .features-content ul.live-broadcasting-items li p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 5px; line-height: 22px; color: #000 } .screen-sharing .screen-sharing-list { display: flex; align-items: center; margin-right: 30px } .screen-sharing .screen-sharing-list ul li a { padding: 20px; min-width: 365px; margin-bottom: 10px } .screen-sharing .screen-sharing-list ul li h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; display: inline-block; cursor: pointer; color: #000; padding-left: 15px } .screen-sharing .screen-sharing-list ul li .active h3, .screen-sharing .screen-sharing-list ul li:hover h3 { color: #4061e0 } .screen-sharing .screen-sharing-list ul li svg.right-arrow { fill: #8c8c8c; margin-left: auto; width: 15px; height: 15px } .screen-sharing .screen-sharing-list ul { margin-right: 25px } .screen-sharing .screen-sharing-list ul li .active svg, .screen-sharing .screen-sharing-list ul li:hover svg { fill: url(#ultimate-icons1) } .screen-sharing .screen-sharing-list ul li .active, .screen-sharing .screen-sharing-list ul li:hover a { background: #fff; border-radius: 10px; -webkit-box-shadow: -1px 0 20px #e3e2f5; box-shadow: -1px 0 20px #e3e2f5; border: 1px solid #ddd } .screen-sharing .screen-sharing-list ul li svg { width: 30px; height: 30px } .screen-sharing .screen-sharing-list ul li a { display: flex; align-items: center; border: 1px solid transparent } .screen-sharing .screen-sharing-features { display: flex; align-items: center } .screen-sharing .screen-sharing-features .features-img { width: auto; margin-left: auto } .screen-sharing .screen-sharing-list .screen-sharing-solutions { max-width: 333px; float: left; padding: 20px; background: #fff; border-radius: 10px; -webkit-box-shadow: -1px 0 20px #e3e2f5; box-shadow: -1px 0 20px #e3e2f5 } .screen-sharing .screen-sharing-list ul li.screen-sharing-points .active:before, .screen-sharing .screen-sharing-list ul li.screen-sharing-points:hover a:before { background: #4061e0; position: absolute; width: 6px; height: 100%; left: 0; content: ""; border-radius: 10px 0 0 10px } .screen-sharing .screen-sharing-list ul li.screen-sharing-points { position: relative; border-radius: 4px } .screen-sharing .screen-sharing-list .screen-sharing-solutions h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 30px; color: #4061e0 } .screen-sharing .screen-sharing-list .screen-sharing-solutions p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; width: auto; margin-top: 15px } .screen-sharing .screen-sharing-list .screen-sharing-solutions .targetDiv-screensharing { opacity: 0; -webkit-transition: all ease 2s; -o-transition: all ease 2s; transition: all ease 2s; display: none } .screen-sharing .screen-sharing-list .screen-sharing-solutions .active.targetDiv-screensharing { opacity: 1; display: block } .features-api.same-features { padding: 0; margin: 0; padding-top: 0; padding-bottom: 30px } .features-api.same-features#feature-enriched { margin: 0 0 0 } .features-api.same-features#broadcasting-sdk { margin: 0 0 50px } .faq-bg { padding: 0; position: relative; background-image: url(../png/faq-bg.png); background-repeat: no-repeat; background-size: 100% 100% } .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: 40px 0 50px 0; position: relative } .faq-head .section-title { color: #000; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 36px; line-height: 44px; text-transform: capitalize; margin-bottom: 10px } .faq-subtitle { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #444; max-width: 800px; 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; box-shadow: 0 3px 6px #00000029; border-radius: 10px; margin-bottom: 20px; z-index: 2; position: relative } .faq-acc h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 28px; line-height: 26px; cursor: pointer; width: 95% } .faq-acc p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 24px; margin-top: 12px; padding: 0 25px 25px 25px } .faq-acc p a {color: #0042f2;} .faq-acc.active-acc h5 { color: #0400ee } .pt-30 { padding-top: 30px } .faq { position: relative; padding: 25px; cursor: pointer } .arrows { position: absolute; right: 0; vertical-align: middle; top: 5px; transform: rotate(180deg); transition: all ease .3s; border: solid 1px #ccc; border-radius: 50%; height: 20px; width: 20px; padding: 5px; fill: #ccc } img.arrows { position: absolute; right: 20px; vertical-align: middle; top: 30px; transform: rotate(180deg); transition: all ease .3s; border: solid 1px #000; border-radius: 50%; width: 20px; padding: 5px } .faq.active-acc { padding-bottom: 0 } .active-acc .arrows { transform: rotate(0); border: solid 1px #0400ee; fill: #0400ee } @media (max-width:1600px) { .banner-img img { width: 680px; padding: 0 } } @media (max-width:1450px) { .banner-img img { width: 680px; padding: 0 } .banner-img { top: 0 } } @media (max-width:1366px) { .banner-img img { width: 680px; padding: 0 } .banner-img { top: 0; right: -30px } } @media (min-width:1280px) { .banner-img img { top: 0; position: relative } } @media (max-width:1300px) { .banner-heading h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 22px; line-height: 45px } .banner-img img { width: 600px } .innerpagesmenu .container { padding: 0 20px } } @media (max-width:1200px) { .banner-img img { width: 560px } .banner-img { top: 10% } } @media (max-width:1130px) { .banner-img img { width: 500px } .banner-content { width: 60% } } @media (max-width:1200px) { .features-content { width: 48% } .chat-api-banner { position: relative; padding: 60px 0 90px; margin-top: 70px } .banner-content { margin-top: 0; padding-left: 10px } } @media (max-width:1199px) { .screen-sharing .screen-sharing-features .features-img { display: none } .screen-sharing .screen-sharing-features { display: block; width: 100%; margin-top: 57px } .screen-sharing .screen-sharing-list { margin: 0 } .screen-sharing .screen-sharing-list ul { width: 50% } } @media (max-width:1024px) { .feature-row-list { padding: 10px 0 } .features-content { width: 48%; padding: 20px 0 30px; margin: 55px 0 0 10px } .features-content h3.heading-features, .features-content h4.heading-features { margin-bottom: 10px } .features-img img.lazy-communication, .features-img img.lazy-data { padding-top: 50px } .chat-sdk.chat-features p.on-demand { top: 95px; left: 244px } .chat-sdk.chat-features p.features-demand { top: 148px; left: 454px } .chat-sdk.chat-features p.devops { top: 230px; right: -27px } .features-communication.live-broadcasting-section .features-img { display: none } .live-broadcasting-section .features-content { width: 100%; margin: 65px 0 0 0 } .banner-img-human, .banner-img-laptop, .banner-img-phone { display: none } .chat-apps ul li { min-height: 248px } .banner-heading h1 { font-size: 24px; line-height: 30px; font-weight: 600; } .banner-content h1 span.banner-sub-title { margin-bottom: 8px; } } @media (min-width:769px) and (max-width:1024px) { .banner-heading h1 { font-family: "proxima-nova", sans-serif; font-weight: 300; font-size: 40px; line-height: 48px } .banner-heading h1 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 30px; line-height: 40px } .banner-heading h4 { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 30px; line-height: 51px } h1 span.heading-desc { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 40px; line-height: 48px } ul.tabs li { width: 142px } .banner-img { right: 0; top: 0 } .banner-content { width: 65% } .banner-img { width: 50% } .banner-content { margin-top: 50px } .banner-img img { max-width: 100% } .chat-api-banner { padding: 40px 0 50px } .chat-sdk.chat-features { display: none } .chat-sdk, .chat-sdk .chat-content { width: 100% } .chat-sdk .heading.chat-api { margin-top: 40px } .chat-sdk.chat-features p { font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 15px; line-height: 20px } .features-img { margin-top: 37px; width: 50% } .tab-description p { width: 100% } .bubble-top { right: 0 } .bubble-bottom { left: 0 } .chat-sdk ul li { display: inline-block; width: 49% } .chat-sdk p { margin: 30px 42px 10px 0 } .chat-sdk ul li:last-child { margin-bottom: 20px } .features-img img.lazy-communication, .features-img img.lazy-data { height: auto; max-width: 100% } .chat-apps ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% } .chat-apps ul li { width: 44.4% } } @media screen and (max-width:991px) { .banner-img, .video-call-solution-mainpage ul.tabs { display: none } .banner-content { width: 100%; margin-top: 0 } .tab_content { padding: 20px 0 25px } .d_active.tab_drawer_heading svg.plus, .tab-img img, .tab_drawer_heading svg.minus, .tabs { display: none } .tab_drawer_heading { background-color: #553696; color: #fff; border-top: 1px solid #fff; margin: 0; padding: 10px 45px 10px 20px; display: block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; cursor: pointer; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 23px } .tab_drawer_heading svg.minus, .tab_drawer_heading svg.plus { position: absolute; top: 12px; right: 15px; height: 18px; width: 18px } .d_active.tab_drawer_heading svg.minus, .tab_drawer_heading svg.plus { display: block } .d_active { background-color: #4b249c; color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 16px; line-height: 23px } .tab_container { margin-top: 35px } .tab-description, .tab-description p, .tab-description ul li, .tab-img { width: 100% } .tab-description { padding: 0 0 0 6px } .tab-description p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 15px; line-height: 23px; margin-bottom: 7px } .tab-description ul li { font-family: "proxima-nova", sans-serif; font-weight: 600; font-size: 15px; line-height: 23px } .chat-sdk.chat-features p.on-demand { top: 95px; left: 239px } .chat-sdk.chat-features p.features-demand { top: 148px; left: 444px } .chat-sdk.chat-features p.devops { right: -40px } .faq-accordian-wrapper { width: 100% } } @media (min-width:769px) and (max-width:991px) { .security-solutions { position: absolute; right: -10px } .security-list { width: 100% } } @media (max-width:768px) { .functionalities-feature-row { display: flex; align-items: center; flex-wrap: wrap } .feature-row-list { padding: 10px 45px; margin: 10px; width: 47% } .banner-content ul { width: 210px; margin: 0 auto } .banner-content ul li { width: 100% !important; text-align: left; } .banner-heading h1 span:after { left: 50%; transform: translateX(-50%) } .container.chat-api-sdk .button { margin: 0 auto } .features-api.same-features#feature-enriched { margin: 35px 0 0 } .features-api.same-features#broadcasting-sdk { margin: 0 0 35px } .video-call-solution-mainpage .features-api .features-communication, .video-call-solution-mainpage .features-api .features-data-moderation { flex-direction: column } .features-communication .features-img, .features-data-collaboration .features-img, .features-data-communication .features-img, .features-data-moderation .features-img { order: 1 } .features-communication .features-content, .features-data-collaboration .features-content, .features-data-communication .features-content, .features-data-moderation .features-content { order: 2 } .screen-sharing .screen-sharing-list .screen-sharing-solutions p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; width: auto; margin-top: 0 } .screen-sharing .screen-sharing-list .screen-sharing-solutions h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 30px; color: #4061e0 } .banner-content { margin-top: 0 } .banner-heading h1:after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .chat-api-banner { background-image: linear-gradient(90deg, #3D199D, #651B9A); background-size: cover; background-position: center; padding: 80px 0 50px } .chat-sdk ul { margin-bottom: 20px } .chat-sdk ul li { display: inline-block; width: 49% } .chat-sdk .heading.chat-api { margin-top: 0 } .container.chat-api-sdk { padding-top: 30px; padding-bottom: 30px } .banner-content, .chat-apps ul, .chat-sdk, .chat-sdk .chat-content, .features-content, .features-img { width: 100% } .banner-img, .bubble-bottom, .bubble-top, .chat-features { display: none } .heading.chat-api p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px } .heading.chat-api p:after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .chat-sdk p { margin: 30px 0 20px } .features-content { margin: 20px 0 0 } .tab-description h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 24px } .features-content h3.heading-features, .features-content h4.heading-features { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; margin-bottom: 20px } .features-content { padding: 20px 0 } .accordion h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 26px } .accordion { margin-bottom: 10px; padding: 9px 15px 10px 65px } .accordion svg { left: 15px } .accordion img { left: 15px } .features-content a { margin: 20px 0 0 52px } .features-api { margin: 35px 0 } .tab-section { padding-top: 30px } .chat-apps ul li { width: 46.5%; margin: 30px 10px 7px; min-height: 270px } .features-img { margin-top: 40px } .security { margin-top: 30px } .security-list { margin-bottom: 50px; width: 100%; padding: 35px 10px } .security-content { padding: 20px; width: 100% } .security-list ul, .security-list ul li { width: 50% } .security-list ul { margin-top: 40px } .security-solutions { right: 0; float: right; width: 48%; height: 320px } .security-solutions:after { top: 14px; left: -11px; height: 280px; width: 350px } .security-content h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px } .security-content p { margin-top: 10px; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px } .security-list ul li h3 { width: 100%; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; padding: 35px 10px; min-height: 118px } .features-img img.lazy-communication, .features-img img.lazy-data { padding-top: 0 } .faq-bg:before { content: none } .faq-bg:after { content: none } } @media (max-width:640px) { .heading h2, .heading h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 25px; line-height: 40px } .feature-row-list { padding: 10px 20px; margin: 10px auto; width: 100%; text-align: center } .banner-content.banner-left.animated { text-align: center } .banner-heading .button.talk-to-us { margin-right: 0 !important } .banner-heading h1 span:after { bottom: -13px } .screen-sharing .screen-sharing-list ul { display: none } .screen-sharing .screen-sharing-list .screen-sharing-solutions .targetDiv-screensharing { opacity: 1; display: block; margin-bottom: 30px } .screen-sharing .screen-sharing-list .screen-sharing-solutions { max-width: 100% } .features-communication.live-broadcasting-section, .features-communication.live-broadcasting-section .features-img { display: block } .chat-api-banner { padding: 10px 0 50px; background-image: linear-gradient(90deg, #3D199D, #651B9A); margin-top: 60px } .banner-heading h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 30px } .banner-heading h1 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 23px; line-height: 32px } .banner-heading h1 span.heading-desc { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 22px; line-height: 32px } .banner-heading p { font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 18px; margin-bottom: 18px; } .chat-apps ul li { width: 100%; margin: 25px 0 7px; min-height: auto } .features-img img.lazy-communication, .features-img img.lazy-data { height: auto; width: auto } .chat-sdk ul li, .security p, .security-list ul, .security-list ul li, .security-list ul li h3 { width: 100% } .security-list ul, .security-solutions:after { display: none } .security-list { width: 100%; margin: 40px auto 30px; padding: 0 } .security-list ul li h3 { padding: 10px; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 17px; line-height: 25px } .security-list ul li:nth-child(1), .security-list ul li:nth-child(2), .security-list ul li:nth-child(3) { border: none } .security-list ul li p { display: block; padding: 0 10px 10px } .security-list ul li { margin-bottom: 10px } .security-list ul li h3 { min-height: auto } .security-list ul li svg { display: block; fill: url(#ultimate-icons1) } .showSingle.active { background-color: transparent } .security-list { border: none } .security-solutions { display: block; float: left; width: 100%; height: auto } .security-content { position: relative; display: block } .targetDiv { opacity: 1 } .faq-head .section-title { font-size: 22px } .faq-subtitle { font-size: 15px } .faq-head { padding: 60px 0 40px 0 } } @media (max-width:580px) { .live-broadcasting-section .features-content ul.live-broadcasting-items { display: block } .live-broadcasting-section .features-content ul.live-broadcasting-items li { width: 100%; border-right: none } .live-broadcasting-section .features-content ul.live-broadcasting-items li:nth-child(5), .live-broadcasting-section .features-content ul.live-broadcasting-items li:nth-child(6) { border-bottom: 1px solid #c9c9c9 } .faq-acc h3 { width: 85% } } @media (max-width:479px) { .chat-sdk ul li { position: relative; padding: 12px 0 12px 45px } .chat-sdk ul li svg { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } } @media (max-width:375px) { .banner-heading h1 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 20px; line-height: 32px } .chat-sdk ul li { position: relative; padding: 12px 0 12px 45px } .chat-sdk ul li svg { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .banner-content ul { margin-bottom: 12px } .heading h2, .heading h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 23px; line-height: 40px } } @media (max-width:320px) { .banner-heading h1 span { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 17px; line-height: 32px } .heading h2, .heading h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 23px; line-height: 40px } .banner-content ul { margin-bottom: 12px; padding: 0 20px } } @media (max-width:1199px) { .connect-device-content .connect-device-solutions { width: 100% } } @media (max-width:1024px) { .banner-img img { height: auto } .connect-device-content.features-content { display: block } .connect-device-content.features-content .first-set { margin-right: 0 } .features-content { width: 48%; padding: 20px 0 30px; margin: 65px 0 0 10px } .features-img img.lazy-communication, .features-img img.lazy-data { padding-top: 50px } } @media (min-width:769px) and (max-width:1024px) { .features-img { margin-top: 37px; width: 50% } .features-img img.lazy-communication, .features-img img.lazy-data { height: auto; max-width: 100% } } @media (min-width:769px) and (max-width:991px) { .security-solutions { position: absolute; right: -10px } } @media (max-width:768px) { .connect-device-content.features-content { margin: 20px 0 } .banner-heading p { max-width: 90%; margin: 0 auto; margin-bottom: 18px; } .chat-api-mainpage .chatapi-security, .chat-api-mainpage .features-perform, .features-communication, .features-data-collaboration, .features-data-communication, .features-data-moderation { display: block } .connect-to-device .features-communication { flex-direction: column } .features-communication .features-img, .features-data-communication .features-img { order: 1 } .features-communication .features-content, .features-data-communication .features-content { order: 2 } .features-content, .features-img { width: 100% } .chat-features { display: none } .features-content { margin: 20px 0 0 } .features-content { padding: 20px 0 } .features-content a { margin: 20px 0 0 52px } .features-api { margin: 35px 0 } .features-img { margin-top: 40px } .security { margin-top: 30px } .security-content { padding: 20px; width: 100% } .security-solutions { right: 0; float: right; width: 48%; height: 320px } .security-solutions:after { top: 14px; left: -11px; height: 280px; width: 350px } .security-content h4 { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px } .security-content p { margin-top: 10px; font-family: "proxima-nova", sans-serif; font-weight: 400; font-size: 16px; line-height: 24px } .features-img img.lazy-communication, .features-img img.lazy-data { padding-top: 0 } .banner-button { text-align: center; } } @media (max-width:640px) { .chat-api-banner { padding: 10px 0 40px } .features-img img.lazy-communication, .features-img img.lazy-data { height: auto; width: auto } .security p { width: 100% } .security-solutions:after { display: none } .security-solutions:after { width: 100%; margin: 40px auto 30px; padding: 0 } .security-solutions { display: block; float: left; width: 100%; height: auto } .security-content { position: relative; display: block } }