/*
[Master Stylesheet]
Project:ClickSites AI HTML
-------------------------------------------------------------------*/
/********************************************************
1. body start
*******************************************************/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
overflow-x:hidden;
font-family: "Outfit", sans-serif;
}
html {
scroll-behavior: smooth;
}
*,*:before,*:after{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
a, a:hover, a:focus{
text-transform: capitalize;
text-decoration: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
h1, h2, h3, h4, h5, h6{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
margin:0;
padding:0;
word-break: break-word;
font-family: "K2D", sans-serif;
}
img, video {
max-width: 100%;
}
input, textarea, select, button, label, svg, svg path, svg rect, svg polygon, img, a, :after, :before, :hover, :focus, .form-control:focus{
outline: none !important;
box-shadow:none;
}
ul{
padding:0;
margin:0;
list-style-type: none;
}
p {
margin: 0px;
word-break: break-word;
}
/* Scroll */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background-color: #fff;
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
height: 100px;
background-image: linear-gradient(-89deg, #fb9e31 0%, #fb7e4e 52%, #fd6d41 100%);
}
/* Scroll */
/* Bottom To Top CSS Start */
.cs_top_icon a {
display: flex;
background-image: linear-gradient(-89deg, #fb9e31 0%, #fb7e4e 52%, #fd6d41 100%);
filter: drop-shadow(-13.753px 9.992px 15px rgba(152,75,239,0.3));
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
border-radius: 50px;
position: fixed;
bottom: 30px;
right: 20px;
transition: 0.3s;
opacity: 0;
visibility: hidden;
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease-in-out;
animation: 4s installation infinite alternate;
}
@keyframes installation {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.cs_top_icon a svg {
fill: #fff;
transform: rotate(270deg);
}
.cs_top_icon a.show {
opacity: 1;
visibility: visible;
}
/* Bottom To Top CSS End */
/* Button CSS Start */
.cs_btn, .cs_btn:focus, .cs_btn:active {
background-image: url(../images/btn-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
max-width: 637px;
width: 100%;
min-height: 88px;
display: flex;
justify-content: center;
align-items: center;
font-size: 38px;
font-weight: 600;
color: #ffffff;
box-shadow: -6.498px 17.854px 29px 0px rgba(228, 152, 0, 0.35);
text-transform: capitalize;
margin: auto;
border-radius: 50px;
transition: all 0.3s;
text-align: center;
padding: 10px 25px;
}
.cs_btn:hover{
transform: translateY(-5px);
}
/* Button CSS End */
/* Background Cover CSS */
.cs_bg_cover{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Background Cover CSS */
/* Banner CSS Start */
.cs_banner_wrapper {
background-image: url(../images/banner-new.png);
padding-top: 30px;
padding-bottom: 90px;
position: relative;
}
.cs_banner_wrapper .container{
max-width: 1760px;
}
.cs_banner_head ul {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
padding: 25px 0 15px 0;
}
.cs_banner_head ul li{
font-size: 24px;
font-weight: 700;
color: #3f284d;
text-transform: capitalize;
height: 70px;
border-radius: 10px;
filter: drop-shadow(0 0 30px rgba(230,97,17,0.1));
background-color: #faf5ff;
border: 2px solid #ffffff;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 0 20px;
}
.cs_banner_head h2, .cs_banner_head h4{
font-size: 60px;
font-weight: 800;
color: #441059;
text-transform: capitalize;
}
.cs_banner_head h4 {
color: #ff4576;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 5px 0 15px 0;
}
.cs_banner_head p{
background-image: linear-gradient(0deg, rgba(51,39,177,0.99) 0%, rgba(139,50,235,0.99) 47%, rgba(127,29,225,0.99) 100%);
filter: drop-shadow(-7.08px 10.903px 10px rgba(151,45,231,0.24));
border-radius: 10px;
height: 50px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 28px;
font-weight: 600;
color: #ffffff;
text-transform: capitalize;
padding: 0 25px;
}
.cs_scroll_parent {
position: relative;
}
.cards {
position: relative;
padding-top: 30px;
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
gap: 60px;
}
.cs_nav > p{
display: inline-flex;
align-items: center;
gap: 15px;
height: 62px;
background-image: linear-gradient(0deg, rgba(255,151,61,0.99) 0%, rgba(220,109,10,0.99) 49%, rgba(255,151,61,0.99) 100%);
filter: drop-shadow(15.543px 12.586px 10px rgba(255,152,46,0.76));
border-radius: 50px;
padding: 0 30px;
font-size: 26px;
font-weight: 600;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 40px;
}
.cs_tabs_menu {
display: flex;
margin-left: 20px;
position: relative;
}
.cs_scroll_line {
width: 3px;
height: 443px;
border-radius: 2px;
background-color: #ffcf96;
position: absolute;
top: -43px;
}
.cs_scroll_line span:before {
content: '';
width: 19px;
height: 19px;
display: flex;
background-image: linear-gradient(#fff, #fff),linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border: 3px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
border-radius: 50%;
filter: drop-shadow(0px 0px 10px rgba(255,127,0,0.52));
transition: all 0.3s;
position: absolute;
left: -8px;
bottom: 0;
}
.cs_scroll_line span{
width: 3px;
height: 123px;
background-image: linear-gradient(184deg, rgba(255,147,41,0.99) 0%, rgba(255,91,148,0.99) 100%);
border-radius: 2px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.3s;
}
.cards.stepOne .cs_scroll_line span{
height: 293px;
}
.cards.stepTwo .cs_scroll_line span{
height: 443px;
}
ul.nav.nav-tabs {
border-bottom: 0;
flex-direction: column;
gap: 20px;
margin-left: 30px;
}
.nav-tabs li:last-child{
margin-right: 0;
}
.nav-tabs li a {
max-width: 390px;
width: 100%;
min-height: 130px;
background-color: #fff;
border-radius: 10px;
padding: 22px;
position: relative;
display: block;
border: 2px solid transparent;
transition: all .3s ease-in-out;
}
.cs_banner_scroll_tab h4 {
font-size: 22px;
font-weight: 700;
color: #161938;
text-transform: capitalize;
font-family: 'Outfit';
transition: all 0.3s;
}
.nav-tabs>li.active>a .cs_banner_scroll_tab h4, .nav-tabs>li.active>a:focus .cs_banner_scroll_tab h4, .nav-tabs>li.active>a:hover .cs_banner_scroll_tab h4{
color: #ff9c3a;
}
.cs_banner_scroll_tab p {
font-size: 20px;
font-weight: 400;
color: #8286af;
transition: all 0.3s;
padding-top: 10px;
}
.nav-tabs>li.active>a .cs_banner_scroll_tab p, .nav-tabs>li.active>a:focus .cs_banner_scroll_tab p, .nav-tabs>li.active>a:hover .cs_banner_scroll_tab p{
color: #161938;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
background-image: linear-gradient(#fff, #fff),linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
}
.custom_card_wrapper {
position: relative;
max-width: 980px;
width: 100%;
height: 600px;
margin: 0 auto 0 0;
}
.custom-card {
background-color: #ffffff;
border-radius: 12px;
border: 4px solid #fff;
overflow: hidden;
position: absolute;
width: 100%;
top: 0;
height: 100%;
margin-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cs_video_bullets {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 4px solid #fff;
background-color: #ff9c3a;
}
.card2 .cs_video_bullets{
background-color: #be8ef1;
}
.card3 .cs_video_bullets{
background-color: #01b3f7;
}
.cs_main_video {
width: 100%;
height: 100%;
position: relative;
}
.cs_bullet{
display: flex;
align-items: center;
gap: 10px;
}
.cs_bullet span{
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #ffffff;
display: flex;
}
.cs_bullet span:last-child{
background-color: #feb83b;
}
.card2 .cs_bullet span:last-child {
background-color: #cc9cff;
}
.card3 .cs_bullet span:last-child {
background-color: #8ecde5;
}
.card2 {
top: 0px;
display: none;
}
.card3 {
top: 0px;
display: none;
}
.cards.stepOne .card2 {
display: block;
}
.cards.stepTwo .card2,.cards.stepTwo .card3 {
display: block;
}
.cs_banner_wrapper .cs_down_banner_arrow {
margin-bottom: 25px;
padding-top: 30px;
}
.cs_down_arrow_img img{
filter: drop-shadow(-7.08px 10.903px 10px rgba(255,152,46,0.52));
}
.custom_card_wrapper{
position: relative;
}
img.cs_video_bot {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -226px;
}
.cs_circle_shape {
width: 477px;
height: 477px;
border-radius: 50%;
background-image: radial-gradient(circle at center, rgba(239,79,105,0.99) 0%, rgba(253,171,59,0.99) 100%);
position: absolute;
top: -20px;
right: -120px;
}
.cs_banner_options {
position: relative;
z-index: 9;
}
.cs_banner_options ul{
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
.cs_banner_options ul li{
background-image: linear-gradient(#fff, #fff),linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border-radius: 10px;
filter: drop-shadow(-7.08px 10.903px 20px rgba(255,150,44,0.3));
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
display: inline-flex;
align-items: center;
gap: 10px;
height: 70px;
padding: 0 25px;
font-size: 24px;
color: #161938;
font-weight: 700;
text-transform: capitalize;
}
/* Payment CSS Start */
.cs_pymnt_main_parent {
position: relative;
z-index: 1;
}
.cs_pymnt_main_parent h1 {
font-size: 46px;
font-weight: 800;
color: #441059;
font-family: 'outfit';
padding: 55px 0 10px 0;
}
.cs_pymnt_main_parent h4 {
font-size: 36px;
font-weight: 600;
color: #161938;
font-family: 'outfit';
padding-bottom: 30px;
}
.cs_pymnt_main_parent h1 > span{
background-image: url(../images/otp-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
max-width: 403px;
width: 100%;
height: 62px;
display: inline-flex;
justify-content: center;
align-items: center;
text-transform: capitalize;
color: #ff8400;;
}
.cs_pymnt_main_parent .cs_btn {
margin-bottom: 40px;
}
.cs_pymnt_main_parent img{
display: block;
margin: auto;
}
.cs_pymnt_main_parent p {
font-size: 16px;
font-weight: 400;
color: #271e42;
padding-top: 10px;
}
.cs_down_arrow_img {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
z-index: 1;
}
/* Payment CSS End */
/* Top Pyment css */
.cs_top_pymnt_wrapper {
background-image: url(../images/top-pymnt-bg.png);
padding: 250px 0 80px 0;
position: relative;
z-index: 1;
width: 100%;
background-position: top;
margin-top: -260px;
}
/* Top Pyment css */
/* Banner CSS End */
/* Website Builder Slider CSS Start */
.cs_webst_buildr_wrapper{
background-image: url(../images/slider-bg.jpg);
padding: 80px 0;
position: relative;
}
.csLineShape{
position: absolute;
z-index: 1;
}
.csTopLeftLineShape{
top: -20px;
left: 0;
}
.csTopRightLineShape{
top: -20px;
right: 0;
}
.csBotmLeftLineShape{
bottom: -20px;
left: 0;
}
.csBotmRightLineShape{
bottom: -20px;
right: 0;
}
.cs_sb_heading{
display: inline-flex;
justify-content: center;
align-items: center;
height: 50px;
background-image: linear-gradient(0deg, rgba(255,151,61,0.99) 0%, rgba(219,109,9,0.99) 49%, rgba(255,151,61,0.99) 100%);
border-radius: 50px;
filter: drop-shadow(6.994px 5.664px 10px rgba(255,152,46,0.3));
padding: 0 25px;
font-size: 24px;
color: #ffffff;
font-weight: 600;
text-align: center;
font-family: 'outfit';
}
.cs_main_heading {
font-size: 46px;
font-weight: 800;
color: #ffffff;
text-align: center;
padding-top: 15px;
}
.cs_main_heading > span {
position: relative;
z-index: 1;
}
.cs_main_heading > span > img{
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
.cs_webst_build_slider_inner {
position: relative;
overflow: hidden;
padding-top: 30px;
}
.cs_webst_build_img {
text-align: center;
}
/* Swiper custom pagination bullet */
.cs_webst_build_slider_main{
position: relative;
}
.cs_webst_build_slider_main .swiper-button-next:after, .cs_webst_build_slider_main .swiper-button-prev:after{
display: none;
}
.cs_webst_build_slider_main .swiper-button-next, .cs_webst_build_slider_main .swiper-button-prev {
width: 61px !important;
height: 61px !important;
}
.cs_webst_build_slider_main .swiper-button-prev {
left: 40px;
}
.cs_webst_build_slider_main .swiper-button-next {
right: 40px;
}
.cs_webst_build_slider_inner .swiper-pagination {
position: unset;
margin-bottom: 50px;
}
.cs_webst_build_slider_inner .swiper-pagination-bullet{
min-width: 160px;
width: auto;
height: 60px;
line-height: 60px;
background-image: linear-gradient(184deg, rgba(19,9,25,0.99) 0%, rgba(54,23,79,0.99) 100%);
border-radius: 6px;
border: 1px solid #4d385d;
opacity: 1;
padding: 0 20px;
font-size: 20px;
font-weight: 500;
color: #fff;
text-transform: capitalize;
position: relative;
transition: all 0.3s;
margin: 0 13px 10px 13px !important;
z-index: 1;
}
.cs_webst_build_slider_inner .swiper-pagination-bullet:before {
content: '';
filter: drop-shadow(-7.08px 10.903px 10px rgba(151,45,231,0.24));
background-image: linear-gradient(0deg, rgb(69 60 163 / 99%) 0%, rgba(139, 50, 235, 0.99) 47%, rgba(127, 29, 225, 0.99) 100%);
border-radius: 6px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.cs_webst_build_slider_inner .swiper-pagination-bullet-active:before, .cs_webst_build_slider_inner .swiper-pagination-bullet:hover:before{
opacity: 1;
visibility: visible;
color: #fff;
}
/* Swiper custom pagination bullet */
/* Modal CSS */
.modal-backdrop {
backdrop-filter: blur(8px) !important;
opacity: 1 !important;
background-color: #0000008a;
}
.modal-dialog {
max-width: 800px;
width: 100%;
margin: auto;
}
.modal-content {
position: relative;
}
.cs_webst_img{
max-height: 600px;
overflow-x: hidden;
}
.modal-content button {
position: absolute;
top: -10px;
right: -10px;
z-index: 1;
border: none;
box-shadow: none;
background: transparent;
padding: 0;
}
/* Modal CSS */
/* Website Builder Slider CSS End */
/* Feature Section CSS Start */
.cs_feature_wrapper{
background-image: url(../images/feat-main-bg.jpg);
padding: 100px 0;
position: relative;
}
.cs_feature_wrapper .container{
max-width: 1680px;
}
.cs_dark_main_head h1{
color: #441059;
}
.cs_feat_inner{
position: relative;
}
.cs_feat_inner:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 4px;
/* height: 6800px; */
padding: 0px;
top: 90px;
text-align: center;
z-index: 0;
margin: 0 auto;
background-color: rgb(226, 216, 239);
}
.cs_feat_inner:before{
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
background-image: linear-gradient(0deg, rgba(24,134,179,0.99) 0%, rgba(47,185,242,0.99) 48%, rgba(25,133,179,0.99) 100%);
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 2;
}
.movable_vertical_line {
position: absolute;
top: 90px;
bottom: 0;
overflow: hidden;
left: calc(50% - 2px);
width: 4px;
min-height: 50px;
z-index: 1;
}
.movable_vertical_line > .movable_vertical_line_inner {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.cs_feat_flex {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.cs_feat_flex:nth-of-type(2n+1) {
flex-direction: row-reverse;
}
.cs_feat_flex.cs_feat_1 {
margin-top: 0px;
}
.cs_feat_flex.cs_feat_1 > span {
top: 70px;
}
.cs_feat_flex > span {
width: 50px;
height: 50px;
background-image: linear-gradient(0deg, rgba(51,39,177,0.99) 0%, rgba(139,50,235,0.99) 47%, rgba(127,29,225,0.99) 100%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 700;
color: #ffffff;
border: 5px solid #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 26px);
z-index: 1;
}
.cs_feat_2 > span{
background-image: linear-gradient(0deg, rgba(1,111,237,0.99) 0%, rgba(0,179,247,0.99) 48%, rgba(1,111,237,0.99) 100%);
}
.cs_feat_3 > span{
background-image: linear-gradient(0deg, rgba(23,195,139,0.99) 0%, rgba(97,185,77,0.99) 48%, rgba(23,195,139,0.99) 100%);
}
.cs_feat_4 > span{
background-image: linear-gradient(0deg, rgba(255,0,192,0.99) 0%, rgba(255,84,212,0.99) 48%, rgba(255,0,191,0.99) 100%);
}
.cs_feat_5 > span{
background-image: linear-gradient(0deg, rgba(218,0,30,0.99) 0%, rgba(255,80,104,0.99) 48%, rgba(217,0,31,0.99) 100%);
}
.cs_feat_6 > span{
background-image: linear-gradient(0deg, rgba(189,94,9,0.99) 0%, rgba(241,134,9,0.99) 48%, rgba(189,93,9,0.99) 100%);
}
.cs_feat_7 > span{
background-image: linear-gradient(0deg, rgba(0,179,164,0.99) 0%, rgba(0,212,194,0.99) 48%, rgba(0,179,163,0.99) 100%);
}
.cs_feat_8 > span{
background-image: linear-gradient(0deg, rgba(179,0,255,0.99) 0%, rgba(205,87,254,0.99) 48%, rgba(179,0,255,0.99) 100%);
}
.cs_feat_9 > span{
background-image: linear-gradient(0deg, rgba(0,0,255,0.99) 0%, rgba(96,96,255,0.99) 48%, rgba(0,0,255,0.99) 100%);
}
.cs_feat_10 > span{
background-image: linear-gradient(0deg, rgba(0,157,81,0.99) 0%, rgba(0,217,112,0.99) 48%, rgba(0,157,81,0.99) 100%);
}
.cs_feat_11 > span{
background-image: linear-gradient(0deg, rgba(182,50,41,0.99) 0%, rgba(246,84,37,0.99) 48%, rgba(181,51,41,0.99) 100%);
}
.cs_feat_12 > span{
background-image: linear-gradient(0deg, rgba(0,81,143,0.99) 0%, rgba(31,125,199,0.99) 48%, rgba(0,81,143,0.99) 100%);
}
.cs_feat_13 > span{
background-image: linear-gradient(0deg, rgba(24,134,179,0.99) 0%, rgba(47,185,242,0.99) 48%, rgba(25,133,179,0.99) 100%);
}
.cs_feat_14 > span{
background-image: linear-gradient(0deg, rgb(255 133 160) 0%, rgb(239 79 130 / 99%) 48%, rgb(251 130 158) 100%);
}
.cs_feat_15 > span{
background-image: linear-gradient(0deg, rgb(165 123 240) 0%, rgb(184 87 201 / 99%) 48%, rgb(156 136 255) 100%);
}
.cs_feat_flex > img {
position: absolute;
top: 50%;
left: 52.5%;
transform: translate(-50%, -50%);
z-index: 1;
}
.cs_feat_flex:nth-of-type(2n+1) > img {
left: 42.6%;
}
.cs_feat_4 > img {
left: 45.9% !important;
}
.cs_feat_6 > img {
left: 46.5% !important;
}
.cs_feat_8 > img {
left: 43.2% !important;
}
.cs_feat_10 > img {
left: 47.2% !important;
}
.cs_feat_12 > img {
left: 42.2% !important;
}
.cs_feat_14 > img {
left: 44.3% !important;
}
.cs_Feat_left > img {
max-width: 700px;
width: 100%;
height: auto;
object-fit: contain;
}
.cs_Feat_right {
max-width: 630px;
width: 100%;
}
.cs_feat_contnt_head {
display: inline-block;
position: relative;
z-index: 1;
padding-bottom: 25px;
}
.cs_feat_contnt_head::before {
content: '';
height: 3px;
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(96,33,255,0.99) 51%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
position: absolute;
top: 0;
left: -30px;
right: -30px;
margin: auto;
z-index: -1;
}
.cs_feat_2 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(1,133,239,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_3 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(55,191,111,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_4 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(255,37,201,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_5 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(233,33,61,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_6 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(233,129,9,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_7 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(1,211,193,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_8 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(193,47,253,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_9 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(96,33,255,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_10 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(1,179,93,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_11 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(241,81,37,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_12 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(15,103,171,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_13 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(41,169,223,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_14 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(239,79,130,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_15 .cs_feat_contnt_head::before{
background-image: linear-gradient(-90deg, rgba(255,255,255,0.99) 0%, rgba(184,87,201,0.99) 49%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,0.99) 100%);
}
.cs_feat_content h4{
display: inline-flex;
align-items: center;
height: 50px;
background-image: linear-gradient(0deg, rgba(51,39,177,0.99) 0%, rgba(139,50,235,0.99) 47%, rgba(127,29,225,0.99) 100%);
border-radius: 0 0 20px 20px;
font-size: 30px;
font-weight: 800;
color: #ffffff;
padding: 0 25px;
text-align: center;
}
.cs_feat_2 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(1,111,237,0.99) 0%, rgba(0,179,247,0.99) 48%, rgba(1,111,237,0.99) 100%);
}
.cs_feat_3 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(23,195,139,0.99) 0%, rgba(97,185,77,0.99) 48%, rgba(23,195,139,0.99) 100%);
}
.cs_feat_4 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(255,0,192,0.99) 0%, rgba(255,84,212,0.99) 48%, rgba(255,0,191,0.99) 100%);
}
.cs_feat_5 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(218,0,30,0.99) 0%, rgba(255,80,104,0.99) 48%, rgba(217,0,31,0.99) 100%);
}
.cs_feat_6 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(189,94,9,0.99) 0%, rgba(241,134,9,0.99) 48%, rgba(189,93,9,0.99) 100%);
}
.cs_feat_7 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(0,179,164,0.99) 0%, rgba(0,212,194,0.99) 48%, rgba(0,179,163,0.99) 100%);
}
.cs_feat_8 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(179,0,255,0.99) 0%, rgba(205,87,254,0.99) 48%, rgba(179,0,255,0.99) 100%);
}
.cs_feat_9 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(0,0,255,0.99) 0%, rgba(96,96,255,0.99) 48%, rgba(0,0,255,0.99) 100%);
}
.cs_feat_10 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(0,157,81,0.99) 0%, rgba(0,217,112,0.99) 48%, rgba(0,157,81,0.99) 100%);
}
.cs_feat_11 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(182,50,41,0.99) 0%, rgba(246,84,37,0.99) 48%, rgba(181,51,41,0.99) 100%);
}
.cs_feat_12 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(0,81,143,0.99) 0%, rgba(31,125,199,0.99) 48%, rgba(0,81,143,0.99) 100%);
}
.cs_feat_13 .cs_feat_content h4{
background-image: linear-gradient(0deg, rgba(24,134,179,0.99) 0%, rgba(47,185,242,0.99) 48%, rgba(25,133,179,0.99) 100%);
}
.cs_feat_14 .cs_feat_content h4 {
background-image: linear-gradient(0deg, rgb(255 133 160) 0%, rgb(239 79 130 / 99%) 48%, rgb(251 130 158) 100%);
}
.cs_feat_15 .cs_feat_content h4 {
background-image: linear-gradient(0deg, rgb(165 123 240) 0%, rgb(184 87 201 / 99%) 48%, rgb(156 136 255) 100%);
}
.cs_feat_content p {
max-width: 500px;
width: 100%;
font-size: 18px;
font-weight: 500;
color: #3a3e5d;
padding-bottom: 25px;
font-family: "Roboto", sans-serif;
}
.cs_feat_content p:last-child{
padding-bottom: 0;
}
/* Feature Section CSS End */
/* Demo Section CSS Start */
.cs_demo_wrapper{
background-image: url(../images/demo-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_demo_wrapper .container{
max-width: 1800px;
}
.cs_demo_head .cs_sb_heading{
background-image: linear-gradient(0deg, rgba(51,39,177,0.99) 0%, rgba(139,50,235,0.99) 47%, rgba(127,29,225,0.99) 100%);
filter: drop-shadow(-7.08px 10.903px 10px rgba(151,45,231,0.24));
}
.cs_demo_head .cs_main_heading{
color: #fff;
}
.cs_demo_content {
margin-top: 70px;
position: relative;
}
.cs_demo_video_parent {
max-width: 760px;
width: 100%;
height: 440px;
margin: auto;
background-image: linear-gradient(#1f0f2b, #1f0f2b), linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border-radius: 6px;
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
position: absolute;
top: 52%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
.cs_demo_video {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
}
.cs_pymnt_dark_bg h1, .cs_pymnt_dark_bg h4, .cs_pymnt_dark_bg p{
color: #fff;
}
.cs_pymnt_dark_bg h1 > span{
background-image: url(../images/otp--bg-orange.png);
color: #fff;
}
.cs_pymnt_dark_bg .cs_btn{
box-shadow: none;
}
.cs_demo_content .cs_down_arrow_img {
bottom: 30px;
}
.cs_demo_content .resp-img {
display: none;
}
/* Demo Section CSS End */
/* Edge Feature Section CSS Start */
.cs_edge_feat_wrapper {
background-image: url(../images/edge-feature-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_edge_feat_parent{
padding-top: 60px;
}
.cs_edge_feat_inner{
margin-bottom: 30px;
}
.csEdgFeatMngSpncing{
margin-bottom: 37px;
}
.cs_edge_feat_inner img{
width: 100%;
}
/* Edge Feature Section CSS End */
/* Compare Section CSS Start */
.cs_compare_Wrapper{
background-image: url(../images/compare-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_compare_tble_parent {
display: flex;
justify-content: center;
align-items: center;
position: relative;
max-width: 900px;
width: 100%;
margin: 60px auto auto;
}
.csComprShape1{
position: absolute;
left: 15px;
}
.csComprShape2 {
position: absolute;
right: 25px;
}
.csComprShape3 {
position: absolute;
bottom: -10px;
left: 40px;
}
.csComprShape4 {
position: absolute;
top: -10px;
left: 10px;
}
.csComprShape5 {
position: absolute;
bottom: -60px;
right: 5px;
}
.csComprShape6 {
position: absolute;
top: -40px;
right: 0px;
}
.cs_compr_left_tble {
max-width: 410px;
width: 100%;
background-color: #42235b;
border-radius: 34px 0 0px 30px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 1px;
}
.cs_compr_right_tble {
background-color: #fff;
border-radius: 34px;
padding-right: 0;
padding-bottom: 40px;
margin-left: -20px;
}
.cs_cpm_tbl_box_right{
position: relative;
z-index: 1;
}
.cs_cpm_tbl_box_right:before {
content: '';
max-width: 300px;
width: 100%;
height: 640px;
background-image: linear-gradient(90deg, #f91f03 0%, #ff9100 100%);
border-radius: 30px;
position: absolute;
bottom: -10px;
right: 10px;
z-index: -1;
}
.cs_cpm_tbl_box_right:after {
content: '';
max-width: 300px;
width: 100%;
height: 50px;
background-image: linear-gradient(90deg, #f91f03 0%, #ff9100 100%);
border-radius: 30px;
position: absolute;
top: -10px;
right: 40px;
z-index: -1;
}
.cs_compr_logo{
margin: 10px;
}
.cs_compr_left_tble ul {
padding: 0 5px;
}
.cs_compr_left_tble ul li{
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 500;
color: #ffffff;
padding: 15px 0 15px 30px;
}
.cs_compr_right_tble ul li{
color: #161938;
}
.cs_compr_left_tble ul li:nth-last-of-type(2n+2){
background-color: rgba(255,255,255,0.102);
}
.cs_compr_right_tble ul li:nth-last-of-type(2n+2){
background-image: linear-gradient(0deg, rgba(255,119,0,0.102) 0%, rgba(255,176,83,0.102) 48%, rgba(255,119,0,0.102) 100%);
}
.cs_compr_left_tble h4 {
display: inline-flex;
align-items: center;
gap: 10px;
height: 60px;
background-color: #ff3d54;
font-size: 30px;
font-weight: 700;
color: #ffffff;
border-radius: 0 50px 50px 0;
padding: 0 40px;
margin-top: 10px;
font-family: 'outfit';
}
.cs_compr_left_tble h4 span{
font-size: 22px;
font-weight: 600;
text-transform: capitalize;
}
.cs_price_shape{
display: inline-flex;
margin-left: -10px;
position: relative;
z-index: 1;
}
.cs_price_shape img{
position: absolute;
left: 0;
z-index: -1;
}
.cs_compr_right_tble h4 {
display: inline-flex;
align-items: center;
background-image: linear-gradient(0deg, rgba(255,151,61,0.99) 0%, rgba(220,109,10,0.99) 49%, rgba(255,151,61,0.99) 100%);
margin-left: 0;
}
.cs_compare_Wrapper .cs_pymnt_dark_bg{
padding-top: 30px;
}
/* Compare Section CSS End */
/* Revenue Slider CSS Start */
.cs_revenu_wrapper{
background-image: url(../images/revenue-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_line_bg {
font-size: 30px;
font-weight: 700;
color: #441059;
text-transform: capitalize;
font-family: 'outfit';
text-align: center;
position: relative;
z-index: 1;
margin: 45px 0 25px 0;
}
.cs_line_bg > img{
position: absolute;
left: 0;
right: 0;
bottom: -15px;
margin: auto;
}
.cs_revne_box{
position: relative;
z-index: 1;
}
.cs_revne_box::before{
content: '';
width: 250px;
height: 50px;
background-color: #b6e0f7;
border-radius: 10px;
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s;
}
.cs_revne_box:hover:before{
background-color: #4dbafa;
}
.cs_revne_box_inner {
width: 100%;
min-height: 352px;
background-color: #ffffff;
border-radius: 10px;
filter: drop-shadow(0 0 20px rgba(38,45,63,0.1));
border: 1px solid rgba(139,84,255,0.22);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
z-index: 1;
padding: 0 10px;
}
.cs_revne_content > h4 {
font-size: 24px;
font-weight: 800;
color: #441059;
text-transform: capitalize;
padding: 20px 0 10px;
}
.cs_revne_content > p {
font-size: 18px;
font-weight: 400;
color: #3a3e5d;
max-width: 230px;
width: 100%;
margin: auto;
}
.csRvneShape{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.cs_renve_slider_parent, .cs_savemoney_slider_parent {
padding-top: 50px;
position: relative;
}
.swiper-button-next::after, .swiper-button-prev::after{
display: none;
}
.cs_renve_slider_parent .swiper-button-next, .cs_renve_slider_parent .swiper-button-prev {
width: 50px;
height: 50px;
background-color: #4dbafa;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
.cs_save_money_wrapper .cs_line_bg {
margin-bottom: 20px;
margin-top: 70px;
}
.cs_savemoney_slider_parent .cs_revne_box::before{
background-color: #ddb4f0;
}
.cs_savemoney_slider_parent .cs_revne_box:hover:before{
background-color: #cb67f7;
}
.cs_savemoney_slider_parent .swiper-button-next, .cs_savemoney_slider_parent .swiper-button-prev{
width: 50px;
height: 50px;
background-color: #cb67f7;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
/* Revenue Slider CSS End */
/* Guarantee Section CSS Start */
.cs_gurantee_wrapper{
background-image: url(../images/compare-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_gurantee_wrapper .container{
max-width: 1650px;
}
.cs_grntee_box{
max-width: 1560px;
width: 100%;
margin: 50px auto 0 auto;
background-color: rgba(50,19,67,0.800);
filter: drop-shadow(15.745px 18.113px 34px rgba(158,4,255,0.24));
border-radius: 10px;
border: 2px solid rgba(255,255,255,0.1);
padding: 50px;
}
.cs_grntee_flex{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.cs_grntee_content p{
max-width: 590px;
width: 100%;
font-size: 20px;
font-weight: 400;
color: #ffffff;
padding-bottom: 30px;
}
.cs_grntee_content p:last-child{
padding-bottom: 0;
}
/* Guarantee Section CSS End */
/* Table Section CSS Start */
.cs_table_wrapper{
background-image: url(../images/table-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.cs_table_wrapper .container{
max-width: 1600px;
}
.cs_table_flex {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 130px;
gap: 30px;
}
.cs_table_box{
max-width: 620px;
width: 100%;
margin: auto;
margin-top: 0;
border-radius: 20px;
background-color: #ffffff;
filter: drop-shadow(0 0 30px rgba(47,32,71,0.1));
border: 1px solid #e1cce6;
padding: 10px;
text-align: center;
position: relative;
}
.cs_table_header {
position: relative;
max-width: 500px;
width: 100%;
margin: -90px auto auto auto;
}
.cs_table_header > p {
width: 160px;
height: 50px;
border-radius: 50px;
background-image: linear-gradient(0deg, rgba(255,119,0,0.99) 0%, rgba(255,176,83,0.99) 48%, rgba(255,119,0,0.99) 100%);
padding: 0px 20px;
font-size: 30px;
font-weight: 700;
color: #fff;
text-transform: capitalize;
position: absolute;
bottom: -25px;
left: 0;
right: 0;
margin: auto;
}
.csAllAccessTable .cs_table_header > p{
width: 200px;
background-image: linear-gradient(0deg, rgba(16,19,155,0.99) 0%, rgba(165,63,255,0.99) 100%);
filter: drop-shadow(11.321px 9.841px 16px rgba(127,52,229,0.75));
}
.csTblShape1 {
position: absolute;
bottom: -30px;
left: 10px;
}
.csTblShape2{
position: absolute;
bottom: -30px;
right: 10px;
}
.cs_table_content {
background-color: #fceeff;
border: 2px solid #da2cfc;
border-radius: 16px;
padding: 15px;
margin-top: 75px;
}
.cs_table_content ul li{
display: flex;
align-items: center;
gap: 15px;
text-align: left;
font-size: 22px;
font-weight: 500;
color: #441059;
border-radius: 10px;
padding: 20px 25px;
}
.cs_table_content ul li:nth-of-type(2n+2){
background-color: #f8d7ff;
border: 2px solid #da2cfc;
}
.csAllAccessTable .cs_table_content ul li:nth-of-type(2n+1){
background-color: #f8d7ff;
border: 2px solid #da2cfc;
}
.csAllAccessTable .cs_table_content li:nth-of-type(2n+2){
background:transparent;
border: none;
}
.cs_table_pymnt{
text-align: center;
}
.cs_table_pymnt h1 {
font-size: 35px;
padding-top: 20px;
}
.cs_table_pymnt h1 span {
max-width: 340px;
height: 55px;
}
.cs_table_pymnt h6 {
background-color: #f8d7ff;
padding: 10px;
border-radius: 20px;
font-size: 18px;
font-weight: 600;
color: #161938;
font-family: 'outfit';
max-width: 300px;
width: 100%;
margin: auto;
line-height: 1.5;
}
.cs_table_pymnt h6 span{
color: #da2cfc;
}
.cs_table_pymnt .cs_btn {
background-image: url(../images/table-btm-bg.png);
max-width: 415px;
min-height: 55px;
font-size: 25px;
margin-top: 15px;
margin-bottom: 20px;
}
.cs_tble_pymnt_cards {
max-width: 270px;
width: 100%;
height: auto;
}
.cs_table_pymnt p {
font-size: 13px;
padding-top: 5px;
}
.cs_tble_rating {
max-width: 150px;
width: 100%;
height: auto;
margin-top: -5px !important;
}
.cs_tble_mwc_btn {
max-width: 300px;
width: 100%;
height: auto;
}
/* Table Section CSS End */
/* Faq Section CSS Start */
.cs_faq_wrapper{
background-image: url(../images/compare-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.ve_faq_main {
margin-top: 80px;
}
div#accordionExample {
margin-right: 20px;
}
.accordion-header{
position: relative;
}
.accordion-header img {
position: absolute;
top: -35px;
left: -27px;
z-index: 3;
}
.accordion-item {
background-image: linear-gradient(#fff, #fff),linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
color: #fff;
border-radius: 10px !important;
margin-bottom: 50px;
}
.accordion-item:not(:first-of-type) {
background-image: linear-gradient(#fff, #fff),linear-gradient(150deg, #ffb973, #fd6210, #fe5698, #dd81ff);
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
}
.accordion-button {
background-color: #ffffff;
filter: drop-shadow(-7.08px 10.903px 20px rgba(255,150,44,0.3));
border: none;
color: #441059;
font-size: 26px;
font-weight: 500;
border-radius: 10px !important;
line-height: 1.5;
padding: 20px 15px 20px 25px;
font-family: 'Outfit';
}
.accordion-body{
background-color: #fff6eb;
border-radius: 8px;
padding: 15px;
margin: 10px;
}
.accordion-body p{
font-size: 20px;
font-weight: 400;
color: #441059;
padding-bottom: 10px;
}
.accordion-body p:last-child{
padding-bottom: 0;
}
.accordion-button::after{
background-image: url(../images/faq-arrow.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 36px;
height: 36px;
margin-left: auto;
}
.accordion-button:not(.collapsed)::after{
background-image: url(../images/faq-arrow.png);
}
.accordion-button .collapsed::after{
background-image: url(../images/faq-arrow.png);
transform: rotate(180deg);
}
.accordion-button:focus {
border: none;
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: #fff;
color: #441059;
border: none;
box-shadow: none;
}
.ve_faq_pymnt_main h2{
color: #fff;
}
.ve_faq_pymnt_main {
padding-top: 20px;
}
.ve_faq_pymnt_main .ve_pymnt_inner p{
color: #fff;
}
.ve_faq_wrapper .ve_arrow_down {
position: absolute;
top: 160px;
right: 0;
left: 0;
}
.cs_faq_wrapper .cs_pymnt_main_parent h1{
padding-top: 0px;
}
/* Faq Section CSS End */
/* Footer Section CSS Start */
.cs_footer_wrapper{
background-image: url(../images/footer-main-bg.jpg);
padding: 80px 0;
position: relative;
}
.ve_footer_head p{
max-width: 876px;
width: 100%;
margin: auto;
font-size: 22px;
font-weight: 400;
color: #220f3c;
padding: 20px 0 35px 0;
}
.ve_footer_box {
background-image: linear-gradient(#fbf9ff, #fbf9ff),linear-gradient(150deg, #c872f2, #fe5698, #dd81ff);
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 20px 50px 30px 50px;
border-radius: 20px;
}
.ve_footer_box p{
font-size: 20px;
font-weight: 400;
color: #220f3c;
padding-top: 10px;
}
.ve_footer_box p span {
color: #fc9439;
font-weight: 500;
}
.ve_footer_box p img{
display: inline-block;
margin: 0 5px;
}
.ve_footer_address {
max-width: 675px;
width: 100%;
margin: 25px auto 40px auto;
border-radius: 50px;
filter: drop-shadow(6.994px 5.664px 10px rgba(255,152,46,0.64));
background-image: linear-gradient(0deg, rgba(255,151,61,0.99) 0%, rgba(220,109,10,0.99) 49%, rgba(255,151,61,0.99) 100%);
font-size: 22px;
font-weight: 500;
color: #fff;
padding: 12px 20px 9px 50px;
position: relative;
}
.ve_footer_address > img {
position: absolute;
top: 5px;
left: 5px;
}
.ve_footer_box ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.ve_footer_box ul li, .ve_footer_box ul li a {
font-size: 20px;
font-weight: 400;
color: #3a3e5d;
text-transform: capitalize;
}
.ve_footer_box ul li a{
text-decoration: underline;
}
/* Footer Section CSS End */
/* Video Version */
.cs_feat_inner {
margin-top: 60px;
}
.cs_feat_flex {
margin-bottom: 50px;
}
.cs_feat_flex:last-child{
margin-bottom: 0;
}
.cs_Feat_left {
max-width: 690px;
width: 100%;
height: 390px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #da30ff, #0b1b9d);
border: 2px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
font-size: 0;
border-radius: 12px;
}
.cs_feat_2 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #037cee, #04a5f5);
}
.cs_feat_3 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #21c386, #62ba50);
}
.cs_feat_4 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #da30ff, #ff4dd2);
}
.cs_feat_5 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #dc0523, #f43b55);
}
.cs_feat_6 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #cc6b0c, #ea820c);
}
.cs_feat_7 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #03b6a7, #03d4c2);
}
.cs_feat_8 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #da30ff, #ba17ff);
}
.cs_feat_9 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #0d0dff, #4848ff);
}
.cs_feat_10 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #37b377, #03d670);
}
.cs_feat_11 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #be382b, #ea4f28);
}
.cs_feat_12 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #0a5d9d, #207cc5);
}
.cs_feat_13 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #2195c5, #2fb3ea);
}
.cs_feat_14 .cs_Feat_left {
max-width: 691px;
height: 371px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #ff85a0, #fb829e);
}
.cs_feat_15 .cs_Feat_left {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.99) 0%, rgba(251, 235, 255, 0.99) 100%), linear-gradient(to bottom, #a57bf0, #9c88ff);
}
.cs_Feat_left video {
border-radius: 10px;
width: 100%;
height: 100%;
}
.movable_vertical_line > .movable_vertical_line_inner {
background: linear-gradient(to bottom, #6130ce 520px, #0094f3 200px, #40be6b 1200px, #ff2eca 1400px, #f0304a 2000px, #db760a 2300px, #00c4b4 2700px, #c437fd 3200px, #3a39fe 3600px, #ff85a0 4400px, #a57bf0 4800px, #01c365 5300px, #de4827 5700px, #166EB2 6200px, #28a7da 6700px);
}
.cs_feat_8 > img {
top: 64%;
}
.cs_feat_10 > img {
top: 60%;
}
.cs_feat_12 > img {
top: 58%;
}
/* Video Version */