Viewing File: /home/ubuntu/socialwhispers-landing/assets/css/style.css
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');
@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
:root {
--primary-color:#f21b3f;
--secondary-color: #ffffff;
--tertiary-color: #000000;
--quaternary-color: #8a909a;
}
/*------------- Body -------------*/
html {
background-color: #fff;
}
.container {
max-width: 1220px;
}
#header{
position: relative;
z-index: 9;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
overflow-x: hidden;
position: relative;
font-family: 'Figtree', sans-serif;
color: var(--tertiary-color);
background-color: #fff;
font-size: 16px;
letter-spacing: 0.8px;
}
/*-----------------------------
General
-----------------------------*/
/*.container {
max-width: 1220px;
}
*/
a,
input,
textarea {
outline: none !important;
box-shadow: none;
text-decoration: none !important;
}
.sm-padding {
padding: 4em 0;
}
img {
width: auto;
display: block;
max-width: 100%;
height: auto;
}
.btn:focus {
box-shadow: none !important;
outline: none !important;
}
.default-btn {
/*background-color: var(--primary-color);*/
/*background-image: -webkit-gradient(linear, left top, left bottom, from(#915AF2), to(#2D2DCE));
background-image: linear-gradient(-180deg, #915AF2 0%, #2D2DCE 100%);*/
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
padding: 0.6em 2em !important;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 15px 30px 0 rgb(5 16 44 / 15%);
color: var(--secondary-color) !important;
display: inline-block;
border: none;
font-size: 1.1em;
font-weight: 600;
}
.default-btn:hover,
.default-btn:focus,
.default-btn:active {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.default-btn-outline {
background-color: transparent;
padding: 0.6em 2em !important;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
color: var(--primary-color) !important;
display: inline-block;
border: 1px solid var(--primary-color);
font-size: 1.1em;
font-weight: 600;
}
.default-btn-outline:hover,
.default-btn-outline:focus,
.default-btn-outline:active {
background: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.box-shadow {
box-shadow: 3px 7px 25px 0px rgb(0 0 0 / 5%);
}
.logo {
object-fit: contain;
height: 3em;
}
.section-title{
margin-bottom: 4em;
}
.section-title h1{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.section-title h2{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.section-title h3{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
}
.section-title .h3{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
}
.section-title h4{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.section-title h5{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.section-title h6{
font-size: 3em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.section-title p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
/*-----------------------------
Header
-----------------------------*/
.header-nav-center .navbar-nav .nav-link {
font-size: 1.2em;
font-weight: 600;
color: var(--tertiary-color);
}
.header-nav-center .navbar-nav .nav-link.active {
color: var(--primary-color);
position: relative;
}
.header-nav-center .navbar-nav .nav-link.active:before{
content: ". . .";
position: absolute;
bottom: -12px;
color: var(--primary-color);
text-align: center;
width: 100%;
left: 0;
font-size: 15px;
font-weight: 800;
}
.header-nav-center .navbar {
padding: 1.3em 0;
}
.header-nav-center .navbar-nav .nav-item {
margin: 0 1em;
}
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
}
.home-banner-sec {
background-image: url('../images/home-banner-bg.webp');
min-height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
width: 100%;
display: block;
}
/* .banner-content{
display: flex;
align-items: baseline;
flex-direction: column;
gap: 1.3em;
} */
.banner-btn{
display: flex;
align-items: center;
gap: 1em;
}
.banner-sec{
height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
}
.banner-content h1{
font-size: 3.3em;
margin: 0;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.banner-content p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 1em 0;
color: var(--quaternary-color);
}
/*-----------------------------
How its works
-----------------------------*/
.how-its-work-card{
margin-top: 2em;
}
.how-its-work-sec{
/*background-color: #7c60d5;*/
background-size: cover;
background-repeat: no-repeat;
-webkit-box-shadow: 0 15px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 15px 30px 0 rgb(5 16 44 / 15%);
position: relative;
background-image: url('../images/landing-page/how-its-works-bg-1.webp');
-webkit-animation: bg-animation 25s ease-in-out infinite;
animation: bg-animation 25s ease-in-out infinite;
z-index: 99;
}
@-webkit-keyframes bg-animation {
0% {
background-position: top;
}
50% {
background-position: bottom;
}
100% {
background-position: top;
}
}
@keyframes bg-animation {
0% {
background-position: top;
}
50% {
background-position: bottom;
}
100% {
background-position: top;
}
}
.how-its-work-icon-sec{
/*border: 10px solid #7c60d5;*/
background: #ffffff;
text-align: center;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
position: relative;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: one-animated 10s infinite;
margin: 0 auto;
z-index: 1;
margin-bottom: 1em;
}
@keyframes one-animated {
0% {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
box-shadow:15px 15px 50px rgba(0, 0, 0, 0.2);
}
25% {
border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
}
50% {
border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
box-shadow:-10px -5px 50px rgba(0, 0, 0, 0.2);
}
75% {
border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
}
}
.how-its-work-bg-img-sec{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 92%;
height: 270px;
z-index: 0;
}
.how-its-work-info h4{
font-size: 1.5em;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 1em;
}
.how-its-work-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--secondary-color);
}
.waves-box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9;
}
.how-its-work-play {
position: relative;
width: 14rem;
height: 14rem;
left: 0px;
right: 0px;
top: 50%;
z-index: 2;
float: right;
}
.how-its-work-play .play {
position: absolute;
width: 384px;
width: 14rem;
height: 384px;
height: 14rem;
background: rgba(255, 255, 255, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
border-radius: 320px;
background-clip: padding-box;
-webkit-animation: play 3s ease-in-out infinite;
animation: play 3s ease-in-out infinite;
}
.how-its-work-play .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.how-its-work-play .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.how-its-work-play .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes play {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
@keyframes play {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
.video-box{
position: relative;
}
.content-desc p{
font-size: 1.1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--secondary-color);
/* color: var(--tertiary-color);*/
/* margin-bottom: 2em; */
text-align: center;
max-width: 620px;
margin: auto;
position: relative;
}
.video-box-img{
width: 100%;
}
.play-box{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9;
}
/*-----------------------------
Video
-----------------------------*/
.video-sec{
position: relative;
/*padding: 0 0 80px;*/
display: inline-block;
width: 100%;
}
.video-sec:before {
position: absolute;
content: "";
background: url('../images/landing-page/video-bg.png') no-repeat 0 0;
background-size: 100%;
mix-blend-mode: multiply;
top: 0px;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
}
.video-play {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*margin-left: -30px;
margin-top: -30px;*/
background-color: #ffffff;
color: #33e2a0;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 90%;
}
.video-people {
position: absolute;
height: 100%;
width: 100%;
display: inline-block;
top: 0;
left: 0;
}
.video-people .one {
position: absolute;
bottom: 20px;
left: 30px;
max-width: 12em;
}
.video-people .two {
position: absolute;
bottom: 20px;
right: 30px;
max-width: 13em;
}
.how-its-work-icon-sec img{
max-width: 5em;
}
/*-----------------------------
Content marketing
-----------------------------*/
.status-chart-box{
display: flex;
align-items: center;
gap: 3em;
text-align: center;
}
.status-chart-card h5{
font-size: 1.1em;
font-weight: 600;
color: var(--tertiary-color);
margin-top: 1em;
}
.progress-circle {
font-size: 26px;
/*margin: 20px;*/
position: relative; /* so that children can be absolutely positioned */
padding: 0;
width: 5em;
height: 5em;
background-color: #F2E9E1;
border-radius: 50%;
line-height: 5em;
}
.status-chart-box .status-chart-card:nth-child(2) .value-bar{
border-color: #7c60d5;
}
.status-chart-box .status-chart-card:nth-child(3) .value-bar{
border-color: #6934cb;
}
.status-chart-box .status-chart-card:nth-child(3) .progress-circle.over50 .first50-bar{
background-color: #6934cb;
}
.progress-circle:after{
border: none;
position: absolute;
top: 0.35em;
left: 0.35em;
text-align: center;
display: block;
border-radius: 50%;
width: 4.3em;
height: 4.3em;
background-color: white;
content: " ";
}
/* Text inside the control */
.progress-circle span {
position: absolute;
line-height: 5em;
width: 5em;
text-align: center;
display: block;
color: var(--tertiary-color);
z-index: 2;
font-weight: 800;
}
.left-half-clipper {
/* a round circle */
border-radius: 50%;
width: 5em;
height: 5em;
position: absolute; /* needed for clipping */
clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
clip: rect(auto,auto,auto,auto);
}
/* .status-chart-card .progress-circle .left-half-clipper .value-bar:nth-child(2){
border: 0.45em solid #7c60d5;
} */
.value-bar {
/*This is an overlayed square, that is made round with the border radius,
then it is cut to display only the left half, then rotated clockwise
to escape the outer clipping path.*/
position: absolute; /*needed for clipping*/
clip: rect(0, 2.5em, 5em, 0);
width: 5em;
height: 5em;
border-radius: 50%;
border: 0.45em solid var(--primary-color); /*The border is 0.35 but making it larger removes visual artifacts */
/*background-color: #4D642D;*/ /* for debug */
box-sizing: border-box;
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
/*Progress bar for the first 50%, filling the whole right half*/
position: absolute; /*needed for clipping*/
clip: rect(0, 5em, 5em, 2.5em);
background-color: var(--primary-color);
border-radius: 50%;
width: 5em;
height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }
/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }
.content-marketing-sec .section-title{
margin-bottom: 2em;
}
.status-chart-info h5{
font-size: 1em;
color: var(--tertiary-color);
font-weight: 600;
}
/*-----------------------------
news sec
-----------------------------*/
.news-card{
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
border-radius: 10px;
padding: 2em;
display: flex;
align-items: center;
gap: 2em;
}
.news-content a{
font-size: 1.2em;
color: var(--tertiary-color);
line-height: 1.3;
font-weight: 600;
transition: all 0.5s ease-out 0s;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.news-content a:hover{
color: var(--primary-color);
}
.news-content h5{
font-size: 0.9em;
color: #666666;
margin: 0;
display: flex;
align-items: center;
gap: 1em;
font-weight: 400;
}
.news-content h5 span img{
max-width: 1em;
}
.news-content{
display: flex;
flex-direction: column;
gap: 1em;
}
.news-img img{
max-width: 6em;
border-radius: 5px;
}
/*-----------------------------
faq sec
-----------------------------*/
.faq-img-sec{
padding-right: 2em;
}
.faq-accordion .accordion-button:not(.collapsed){
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid rgba(1,1,1,0.1);
color: var(--tertiary-color);
}
.faq-accordion .accordion-item{
border: none;
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
}
.faq-accordion .accordion-item .accordion-button{
border-bottom: 1px solid rgba(1, 1, 1, 0.1);
font-size: 0.55em;
font-weight: 600;
color: var(--tertiary-color);
padding: 1.3em;
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
}
.faq-accordion .accordion-item .accordion-button:focus{
box-shadow: none;
}
.faq-accordion .accordion-item .accordion-body{
color: #666666;
font-weight: 400;
font-size: 1em;
line-height: 1.8;
margin: 0;
}
.faq-accordion .accordion-button:not(.collapsed)::after{
background-image: url(../images/minus.svg);
transform: unset;
}
.faq-accordion .accordion-button::after{
background-image: url(../images/plus.svg);
}
/*-----------------------------
service page
-----------------------------*/
.home-banner-sec.new-home-banner{
background-image: none;
position: relative;
/* min-height:unset; */
}
.new-home-banner-img{
/* position: absolute;
right: 0;
top: 0;
z-index: 0; */
position: absolute;
right: 0;
top: 0;
z-index: 0;
width: 45%;
min-height: 100vh;
object-fit: cover;
border-radius: 0 0 0 80px;
}
.static-page-banner .new-home-banner-img{
position: absolute;
right: -25px;
top: 0;
z-index: 0;
width: 44%;
min-height: 50vh;
object-fit: contain;
border-radius: 0 0 0 80px;
}
.data-analysis-sec{
display: flex;
min-height: calc(100vh - 112px);
align-items: center;
}
.new-banner-sec{
min-height: 50vh;
background-color: #eeeeee;
align-items: center;
display: flex;
justify-content: space-between;
}
.service-banner {
z-index: 1;
position: relative;
}
.global-icon{
max-width: 2.5em;
height: 2.5em;
object-fit: contain;
}
.global-card{
display: flex;
align-items: flex-start;
gap: 2em;
/*box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);*/
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
padding: 1em;
border-radius: 15px;
}
.global-info h4{
font-size: 1.4em;
font-weight: 600;
color: var(--tertiary-color);
margin-bottom: 0em;
}
.global-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.global-box{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
}
.global-reach-img-sec{
padding-right: 2em;
}
/*-----------------------------
Contact Us
-----------------------------*/
.contact-us-box{
border-style: solid;
padding: 2em;
border-radius: 15px;
border-color: #FFFFFF;
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}
.contact-us-left-card{
position: relative;
/*background-color: #4787fa;*/
background-image: -webkit-gradient(-48deg, linear, 0% 0%, 0% 100%, from(#FF512F), to(#DD2476));
background-image: -webkit-linear-gradient(-48deg, #ff512f, #DD2476);
padding: 2em;
border-radius: 15px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-us-left-card::before{
background-image: url('../images/landing-page/contact-us/contact-us-left-bg.webp');
background-position: bottom right;
background-repeat: no-repeat;
background-size: 70% auto;
opacity: 0.3;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
content: '';
border-radius: 15px;
z-index: 0;
}
.contact-us-list li{
display: flex;
align-items: center;
gap: 1em;
color: var(--secondary-color);
}
.contact-us-list li a{
display: flex;
align-items: center;
gap: 1em;
color: var(--secondary-color);
font-size: 1em;
font-weight: 400;
}
.contact-us-list li{
margin-bottom: 1em;
}
.contact-us-list li:last-child{
margin-bottom: 0;
}
.contact-us-list li .contact-us-icon{
max-width: 2em;
}
.default-btn-white {
background-color: var(--secondary-color);
padding: 0.6em 2em !important;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
color: var(--tertiary-color)!important;
display: inline-block;
border: 1px solid var(--secondary-color);
font-size: 1.1em;
font-weight: 600;
}
.default-btn-white:hover,
.default-btn-white:focus,
.default-btn-white:active {
background-color: var(--secondary-color);
color: var(--tertiary-color);
}
.contact-us-form .form-control{
background-color: #f8f8f8;
border-radius: 10px 10px 10px 10px;
padding: 9px 15px 9px 15px;
border: 0!important;
height: 50px;
}
.contact-us-form .form-control:focus{
outline: none!important;
box-shadow: none!important;
}
.contact-us-form textarea.form-control{
height: auto;
}
.contact-us-form{
padding: 0 2em;
}
.contact-us-form .form-label{
font-size: 1em;
font-weight: 600;
color: var(--tertiary-color);
margin: 0 0 1em;
}
.contact-us-list {
margin-bottom: 0;
}
.contact-us-info h3{
font-size: 1.4em;
font-weight: 600;
margin-bottom: 0.6em;
color: var(--secondary-color);
}
.contact-us-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin-bottom: 1.5em;
color: var(--secondary-color);
}
.contact-us-banner-sec{
background: #eeeeee;
}
.breadcrumb-item a{
color: var(--quaternary-color);
}
.breadcrumb-item.active {
color: #7c60d5;
}
.breadcrumb-item+.breadcrumb-item::before {
content: "";
background: #7c60d5;
height: 6px;
margin-top: 10px;
padding: 0;
width: 6px;
display: inline-block;
border-radius: 90px;
margin-right: 10px;
}
.breadcrumb-item:last-child:after {
content: "";
display: inline-block;
height: 1px;
width: 80px;
background: #7c60d5;
margin-left: 10px;
}
.breadcrumb-item+.breadcrumb-item {
margin-left: 5px;
font-weight: 600;
}
.service-banner-content h2{
font-size: 2em;
margin: 0;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
/* contact */
.select-service-form .form-check {
padding: 0;
margin: 0;
position: relative;
display: block;
}
.select-service-form .form-check input[type="checkbox"] {
width: auto;
opacity: 0.00000001;
position: absolute;
left: 0;
margin-left: -20px;
}
.select-service-form .form-check label {
position: relative;
}
.select-service-form .form-check label:before {
content: '';
position: absolute;
left: 0;
top: -2px;
margin: 4px;
width: 15px;
height: 15px;
transition: transform 0.28s ease;
border-radius: 3px;
border: 2px solid #ff512f;
}
.select-service-form .form-check label:after {
content: '';
display: block;
width: 8px;
height: 5px;
border-bottom: 2px solid #ff512f;
border-left: 2px solid #ff512f;
-webkit-transform: rotate(-45deg) scale(0);
transform: rotate(-45deg) scale(0);
transition: transform ease 0.25s;
will-change: transform;
position: absolute;
top: 6px;
left: 8px;
}
.select-service-form .form-check input[type="checkbox"]:checked~label::before {
color: #ff512f;
}
.select-service-form .form-check input[type="checkbox"]:checked~label::after {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
.select-service-form .form-check label {
display: block;
padding-left: 30px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
vertical-align: sub;
font-size: 0.8em;
font-weight: 500;
}
.select-service-form .form-check label span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.select-service-form .form-check input[type="checkbox"]:focus+label::before {
outline: 0;
}
.service-form-box{
display: flex;
flex-wrap: wrap;
gap: 0.7em;
}
/*-----------------------------
Why Choose Us
-----------------------------*/
.skill-content-wrap {
margin-top: 1em;
}
.skill-content-wrap .progress-bar {
background-image: linear-gradient(40deg, #FF43C0 0%, #FFA95C 100%);
}
.skill-content-wrap .progress-item {
margin-top: 1em;
}
.progress-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.progress-title h6 {
font-size: 1em;
line-height: 1.8;
font-weight: 500;
margin: 0;
color: var(--tertiary-color);
}
.why-choose-us-img-sec {
padding-left: 2em;
}
.why-choose-us-img-sec img{
width: 100%;
}
.content-marketing-img-sec {
padding-right: 2em;
}
.content-marketing-img-sec img{
width: 100%;
}
.footer-sec {
position: relative;
padding: 15em 0 0;
background-color: #edecf0;
}
.footer-bg {
content: "";
top: -1px;
left: 0;
width: 100%;
height: 205px;
background-size: cover;
display: inline-block;
position: absolute;
}
.footer-logo p {
color: #666666;
font-weight: 400;
font-size: 1em;
line-height: 1.8;
margin: 0;
}
.footer-logo {
display: flex;
flex-direction: column;
gap: 2em;
}
.footer-logo ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.footer-logo ul li {
list-style: none;
}
.footer-logo ul li a img {
width: 1.5em;
}
.footer-title h4 {
color: #7c60d5;
font-size: 1.3em;
font-weight: 700;
margin: 0 0 1em;
}
.footer-list {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1em;
}
.footer-list li {
list-style: none;
}
.footer-list li a {
font-size: 1em;
color: #666666;
font-weight: 400;
transition: all 0.8s ease-out 0s;
}
.footer-list li p {
font-size: 1.2em;
color: var(--quaternary-color);
font-weight: 400;
line-height: 1.8;
}
.footer-list li a:hover {
color: var(--primary-color);
}
.footer-logo img {
max-width: 15em;
}
.copyright-list ul {
padding: 0;
margin: 0;
display: flex;
gap: 1.5em;
justify-content: end;
}
.copyright-list li {
list-style: none;
}
.copyright-list li a {
font-size: 1em;
color: #666666;
font-weight: 400;
transition: all 0.8s ease-out 0s;
}
.copyright-list li a:hover {
color: var(--primary-color);
}
.copyright-contents {
font-size: 1em;
color: #666666;
font-weight: 400;
margin: 0;
}
.copyright-sec {
border-top: 1px solid var(--secondary-color);
margin: 2em 0 0;
padding: 2em 0;
}
.footer-events-content h4 {
font-size: 1em;
margin: 0 0 0.3em;
color: #666666;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
line-height: 1.8;
transition: all 0.8s ease-out 0s;
}
.footer-events-content h4:hover{
color: var(--primary-color);
}
.footer-events-list {
padding: 0;
margin: 0;
}
.footer-events-list li {
display: flex;
flex-direction: column;
gap: 1em;
}
/* .footer-list li a:hover::before {
content: "";
background: var(--primary-color);
height: 6px;
width: 6px;
position: relative;
display: inline-block;
border-radius: 90px;
line-height: 26px;
vertical-align: middle;
right: 10px;
} */
.footer-logo ul li::before {
content: "";
background: #7c60d5;
height: 6px;
width: 6px;
position: absolute;
border-radius: 90px;
top: 10px;
left: -5px;
line-height: 26px;
vertical-align: middle;
}
.footer-logo ul li:first-child:before {
content: unset;
}
.footer-logo ul li {
position: relative;
padding: 0 1em;
}
.footer-logo ul li:first-child {
padding-left: 0;
}
.footer-contact ul li a {
font-size: 1em;
color: rgb(102, 102, 102);
font-weight: 400;
transition: all 0.8s ease-out 0s;
}
.footer-contact ul li a:hover {
color: var(--primary-color);
}
.footer-contact ul li {
padding: 0;
}
.footer-contact ul li::before {
content: "|";
position: unset;
background: transparent;
padding: 0 1em;
}
/* partner logo sec */
.partner-img-box {
/* display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1em;
justify-items: center; */
/*box-shadow: 0px 0px 10px 1px rgb(124 96 213 / 20%);*/
/* box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);*/
/* -webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
border-radius: 15px;
padding: 2em; */
}
/* .trusted-by-img-box{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1em;
} */
.trusted-by-img-box .trusted-by-img{
/* -webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%); */
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
border-radius: 15px;
padding: 2em;
}
.trusted-by-img-box .trusted-by-img img {
max-width: 8em;
object-fit: contain;
margin: auto;
}
.parnter-img-box .partner-img img {
max-width: 8em;
object-fit: contain;
margin: auto;
}
/* marketing sec */
.marketing-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
padding: 2em;
}
.marketing-card:hover {
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
border-radius: 15px;
}
.marketing-content{
text-align: center;
}
.marketing-content h4 {
font-size: 1.2em;
font-weight: 600;
line-height: 1.5;
margin: 0 0 0.5em;
}
.marketing-content p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
/* pricing sec */
.pricing-card {
border: 1px solid #ececec;
position: relative;
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2em;
}
.pricing-img img {
max-width: 15em;
}
.pricing-value h4 {
font-size: 2em;
line-height: 1.2;
font-weight: 700;
margin-bottom: 1em;
}
.pricing-value h4 span {
color: var(--quaternary-color);
font-weight: 400;
font-size: 0.5em;
}
.pricing-content {
flex: 2;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 2em;
}
.pricing-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.pricing-list h5 {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
display: flex;
align-items: center;
gap: 0.5em;
}
.pricing-content h3 {
font-size: 1.4em;
font-weight: 600;
margin: 0;
}
.pricing-list h5 span img {
max-width: 1.1em;
}
/* service sec */
.service-card {
background: #ffffff;
position: relative;
/*border: 1px solid rgba(238, 238, 238, 1);*/
/*box-shadow: 0px 15px 35px 0px rgb(0 0 0 / 10%);*/
/*box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);*/
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
border-radius: 15px;
transition: all 0.5s ease-out 0s;
z-index: 2;
}
.service-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2em;
}
.service-icon img {
max-width: 2em;
}
.service-icon {
color: #ffffff;
background-image: linear-gradient(40deg, #FF43C0 0%, #FFA95C 100%);
text-align: center;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
width: 75px;
height: 75px;
position: relative;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: one-animated 10s infinite;
}
.service-title {
display: flex;
align-items: center;
gap: 1em;
margin: 0 0 1em;
}
.service-details {
padding: 2em;
}
.service-content p {
/* color: #666666;
font-weight: 400;
font-size: 1.1em;
line-height: 1.8;
margin: 0;
text-align: start;
letter-spacing: 1px;*/
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--teritary-color);
}
.service-title h4 {
font-size: 1.2em;
font-weight: 600;
margin: 0;
}
.service-btn {
padding: 1em 2em;
border-top: 1px solid #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
.service-btn a {
color: var(--primary-color);
font-weight: 500;
font-size: 1em;
}
/*.service-card:hover {
background-color: rgba(124, 96, 213, 0.7);
border-color: rgba(124, 96, 213, 0);
}*/
/*.service-card:hover .service-title h4,
.service-card:hover .service-content p,
.service-card:hover .service-btn a {
color: var(--secondary-color);
}*/
.service-sec {
position: relative;
}
.service-bg {
position: absolute;
right: 0;
bottom: -275px;
z-index: 1;
}
/* project sec */
.project-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
z-index: 2;
position: relative;
margin-bottom: 1em;
}
.project-detail {
display: flex;
gap: 1em;
align-items: baseline;
}
.project-detail h2 span {
font-size: 2em;
font-weight: 600;
}
.project-detail h2 sup {
top: -2em;
font-weight: 800;
}
.project-detail h2 {
margin: 0;
font-size: 1.5em;
}
.project-detail h3 {
font-size: 1.8em;
font-weight: 600;
margin: 0;
}
.project-sec {
position: relative;
}
.project-bg {
position: absolute;
left: 0;
bottom: 10px;
z-index: 1;
}
.project-slider {
z-index: 2;
position: relative;
}
.project-slider-content {
position: relative;
}
.slider-bottom-content {
position: absolute;
bottom: -15px;
left: 12%;
transition: all 0.5s ease-in-out;
color: transparent;
width: 75%;
text-align: center;
background: transparent;
}
.slider-bottom-content a {
font-size: 1.1em;
font-weight: 500;
color: var(--teritary-color);
}
.project-slider-content:hover .slider-bottom-content {
display: block;
width: 75%;
text-align: center;
background: #fff;
padding: 0.5em;
border-radius: 5px;
bottom: 12px;
color: unset;
}
.project-slider-content img {
transition: all 0.5s ease-in-out;
}
.project-slider-content:hover img {
transform: scale(1.05);
}
.slick-slide {
padding: 10px;
text-align: center;
}
/* client review sec */
.client-review-sec{
background-image: url(../images/landing-page/client/client-bg.png);
background-size: 100% 100%;
position: relative;
background-repeat: no-repeat;
}
.client-review-content {
/* max-width: 700px;
margin: 0 auto; */
/* -webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%); */
padding: 2em;
border-radius: 15px;
/* background-color: var(--secondary-color); */
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
display: flex!important;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
position: relative;
z-index: 9;
min-height: 22em;
}
.client-review-content img{
border-radius: 100%;
max-width: 5em;
margin: 0 auto;
}
.silde-nav-img img{
border-radius: 100%;
max-width: 5em;
margin: 0 auto;
transition: all 0.5s ease-out 0s;
}
.client-detail{
display: flex;
align-items: center;
gap: 1em;
justify-content: center;
background-color: var(--secondary-color);
padding: 0.6em 2em !important;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
color: var(--tertiary-color)!important;
border: 1px solid var(--secondary-color);
}
.client-detail h4{
margin: 0;
font-size: 1.2em;
color: #7c60d5;
font-weight: 600;
}
.client-detail h5 {
margin: 0;
font-size: 1em;
text-transform: uppercase;
font-weight: 600;
}
.client-detail h5 span{
color: #666666;
text-transform: capitalize;
font-weight: 400;
}
.client-review-content p{
font-style: italic;
font-size: 1em;
color: var(--secondary-color);
line-height: 1.8;
margin: 0em 0 1em;
font-weight: 400;
}
.client-background{
position: absolute;
left: 0;
bottom: -150px;
z-index: 0;
}
.silde-nav-img{
cursor: pointer;
}
.silde-nav-img:hover img{
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
/* about sec */
.achivement-box-list ul.achivement::after {
position: absolute;
height: 450px;
width: 450px;
content: "";
border: 2px dashed #e7e7e7;
left: 0;
top: 0;
border-radius: 50%;
z-index: -1;
animation: rotate-animation 1s infinite linear;
}
@keyframes rotate-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.achivement-box-list{
position: relative;
}
.achivement-box-list ul.achivement {
position: relative;
z-index: 1;
text-align: center;
height: 450px;
width: 450px;
margin-left: 35px;
margin-top: 15px;
}
ul.achivement li {
display: inline-block;
background: #ffffff;
padding: 16px 0;
min-width: 180px;
}
ul.achivement li:first-child {
text-align: center;
position: relative;
top: -60px;
}
ul.achivement li:last-child {
position: absolute;
right: -60px;
bottom: 80px;
}
ul.achivement li:nth-child(2) {
position: absolute;
left: -60px;
bottom: 80px;
}
.achivement-box .counter{
display: flex;
justify-content: center;
}
.achivement-box .counter .timer{
font-size: 3em;
font-weight: 600;
color: var(--tertary-color);
}
.achivement-box .counter .operator{
font-size: 3em;
font-weight: 600;
color: var(--tertary-color);
}
.achivement-box .counter span{
font-size: 1.3em;
font-family: 500;
color: var(--primary-color);
}
/*.slick-list.draggable .slick-slide:nth-child(1) .silde-nav-img{
position: absolute;
top: 0;
}*/
.contact-us-header-card{
border-radius: 15px;
border-color: #FFFFFF;
box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
padding: 2em;
}
.contact-us-header-box{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
margin-bottom: 3em;
}
.contact-us-header-icon{
max-width: 4em;
}
.contact-us-header-info h4{
font-size: 1.2em;
font-weight: 600;
color: var(--tertiary-color);
margin-bottom: 0em;
}
.contact-us-header-info p{
font-size: 0.9em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.contact-us-header-card{
display: flex;
gap: 1em;
flex-direction: column;
align-items: center;
text-align: center;
}
/*-----------------------------
service detail page
-----------------------------*/
.service-left-content h4 {
font-size: 2em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.service-left-content h2 {
font-size: 2em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.service-right-content h2 {
font-size: 2em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.service-left-content h3 {
font-size: 2.5em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.service-right-content h3 {
font-size: 2em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.service-left-content p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
.service-right-content h4 {
font-size: 2.5em;
margin-bottom: 1em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.service-right-content p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
.service-list ul li h5 span img {
max-width: 1.5em;
margin-top: 0.3em;
}
.service-list ul li h5 {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.service-list ul li h5 {
grid-template-columns: 35px auto;
display: grid;
align-items: flex-start;
}
.service-list ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1em;
}
.service-list ul li {
list-style: none;
}
.single-service-content h3 {
font-size: 1.4em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.single-service-content p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
.service-work-sec {
background-color: #f5f5f5;
}
.work-card h4 {
font-size: 1.5em;
font-weight: 600;
color: var(--teritary-color);
margin-bottom: 0.5em;
text-align: center;
}
.work-card {
padding: 2em;
background-color: var(--secondary-color);
border-radius: 10px;
border-bottom: 2px solid #ff43c0;
}
.work-card p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--teritary-color);
text-align: center;
}
/* static page */
.privacy-policy-content h3{
font-size: 1.4em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 600;
color: var(--tertiary-color);
}
.privacy-policy-content p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
.privacy-policy-content ol li{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
/*-----------------------------
dropdown-list css
-----------------------------*/
.navbar-nav .nav-item.new-dropdown-list .dropdown-menu-list{
background: transparent;
visibility: hidden;
opacity: 1;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
left: 0;
display: none;
}
.navbar-nav .nav-item.new-dropdown-list{
position: relative;
}
.navbar-nav .nav-item.new-dropdown-list:hover>.dropdown-menu-list,
.navbar-nav .nav-item.new-dropdown-list .dropdown-menu-list:hover {
visibility: visible;
opacity: 1;
display: block;
}
/*-----------------------------
Our Expertise
-----------------------------*/
.our-expertise-sec {
/*background-color: #f6f6f6;*/
}
.our-expertise-tab-sec .nav-pills {
justify-content: center;
gap: 1em;
}
.our-expertise-icons {
max-width: 3em;
margin: auto;
}
.our-expertise-tab-sec .nav-pills .nav-link.active {
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
background-color: var(--secondary-color);
color: var(--primary-color);
}
.our-expertise-tab-sec .nav-pills .nav-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.8em;
text-align: center;
font-size: 0.9em;
font-weight: 600;
color: var(--tertiary-color);
}
.our-expertise-tab-content {
margin-top: 4em;
}
.our-expertise-tab-content .our-expertise-tab-info p {
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0 0 1.3em;
color: var(--quaternary-color);
}
.our-expertise-list {
margin-bottom: 1.5em;
}
.our-expertise-list li {
font-size: 1em;
font-weight: 400;
color: var(--tertiary-color);
margin-bottom: 0.5em;
}
.our-expertise-list li:last-child {
margin-bottom: 0;
}
.our-expertise-tab-info h4 {
font-size: 1.2em;
font-weight: 600;
margin-bottom: 1em;
}
/* thank you sec */
.error-page-sec {
padding:3em 0;
}
.error-page-card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error-page-card img {
max-width: 35em;
}
.error-page-card h3 {
padding: 0.2em 0;
font-size: 65px;
color: #000;
font-weight: 600;
text-align: center;
}
.thanks-desc {
padding-bottom: 0.5em;
color: var(--quaternary-color);
}
.thank-you-btn {
border: none;
margin: 1em 0 0;
padding: 1em 4em;
font-size: 1.3em;
}
.service-list-sec{
margin-bottom: 0;
margin-top: 1em;
}
.service-list-sec li{
display: flex;
align-items: center;
gap: 0.8em;
font-size: 0.9em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
padding-bottom: 1em;
}
.service-list-sec li:last-child{
padding-bottom: 0;
}
.data-analysis-sec .service-left-content h1{
font-size: 2.8em;
margin-bottom: 0.5em;
line-height: 1.2;
font-weight: 700;
color: var(--tertiary-color);
}
.data-analysis-sec .service-left-content h1 span{
color: var(--primary-color);
font-weight: 800;
}
.data-analysis-sec .service-left-content p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.data-analysis-sec .service-left-content p strong{
color: var(--primary-color);
}
.banner-img{
width: 100%;
max-width: 32em;
margin-left: auto;
}
.contact-us-details{
position: relative;
z-index: 9;
}
/*.service-right-content{
display: flex;
flex-direction: column;
align-items: center;
}*/
.service-left-img-sec{
padding-right: 2em;
}
.service-right-img-sec{
padding-left: 2em;
}
.trusted-by-sec .slider-marquee .slick-list{
overflow: visible;
}
.partner-img img{
margin: auto;
}
/* .service-box .service-card:nth-child(1n){
background-color: rgba(30,226,207,0.7);
}
.service-box .service-card:nth-child(2n){
background-color: rgba(139,64,229,0.7);
}
.service-box .service-card:nth-child(3n){
background-color: rgba(255,136,90,0.7);
}
.service-box .service-card:nth-child(4n){
background-color: rgba(253,52,110,0.7);
}
.service-box .service-card:nth-child(5n){
background-color: rgba(13,136,255,0.7);
}
.service-box .service-card:nth-child(6n){
background-color: rgba(12,214,138,0.7);
}
.service-box .service-card:nth-child(7n){
background-color: rgba(252,220,2,0.7);
} */
.cta-card{
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
padding: 2em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 9;
}
.cta-info h4{
font-size: 1.5em;
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5em;
max-width: 700px;
line-height: 1.5;
}
.text-right {
text-align: right;
}
.cta-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--secondary-color);
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: -17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{
position: relative;
display: inline-block;
padding: 10px;
/* width: 110px; */
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
color: var(--white);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
font-weight:400;
font-size: 1em;
}
.checkbox-tools:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-tools:checked + label{
/* background-color: transparent; */
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
color: var(--secondary-color);
/* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); */
font-weight: 600;
}
.checkbox-tools:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.why-choose-list-sec li{
grid-template-columns: 35px auto;
display: grid;
align-items: flex-start;
padding-bottom: 1em;
}
.why-choose-list-sec li:last-child{
padding-bottom: 0;
}
.why-choose-list-sec li p{
font-size: 1.1em;
line-height: 1.5;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
/* Fixed Popup */
.fixed-popup-sec {
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
height: 80vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 50%;
display: block;
position: fixed;
left: 25%;
top: 12%;
z-index: 5555555555555;
bottom: 0;
overflow: hidden;
right: 0;
animation-delay: 2s;
border-radius: 15px;
}
.fixed-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 200;
transition: opacity 0.3s;
will-change: opacity;
background-color: rgba(0, 0, 0, 0.8);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fixed-popup-sec .close-menu {
height: 50px;
width: 50px;
font-size: 30px;
border-radius: 50px;
color: #e64363 !important;
background-color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
z-index: 9999;
}
.popup-form {
max-width: 100%;
position: relative;
z-index: 9999;
text-align: center;
}
.popup-form-sec .popup-img{
/* border-radius: 25px; */
border-radius: 10px;
width: 100%;
object-fit: contain;
max-width: 30em;
margin: auto;
}
.popup-form-sec {
max-width: 100%;
display: flex;
justify-content: center;
height: 80vh;
flex-direction: column;
gap: 2em;
padding: 2em;
}
.popup-btn{
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pop {
0% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}
.popup-img-sec h3{
text-align: center;
line-height: 1.5;
font-weight: 700;
color: var(--secondary-color);
font-size: 1.5em;
margin-bottom: 0;
}
.popup-btn-right-arrow{
width: 1.5em;
}
.popup-btn .default-btn-white{
display: flex;
align-items: center;
gap: 1em;
}
.bg-thin-color{
background-color: rgba(255,201,205,.35)
}
.shape20 {
position: absolute;
left: 40%;
bottom: 0;
z-index:1;
}
.shape20 img {
animation: moveLeftBounce 3s linear infinite;
max-width: 10em;
}
@keyframes moveLeftBounce {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
to {
transform: translateX(0);
}
}
.shape21 {
position: absolute;
left:0%;
top:100px;
z-index:1;
}
.shape21 img {
animation: moveBounce 5s linear infinite;
max-width: 10em;
}
@keyframes moveBounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
to {
transform: translateY(0);
}
}
.shape22 {
position: absolute;
left:30%;
top:100px;
z-index:1;
}
.shape22 img {
animation: moveBounce 20s linear infinite;
max-width: 15em;
display: none;
}
@keyframes animationFramesOne {
0% {
transform: translate(0) rotate(0deg);
}
20% {
transform: translate(73px, -1px) rotate(36deg);
}
40% {
transform: translate(141px, 72px) rotate(72deg);
}
60% {
transform: translate(83px, 122px) rotate(108deg);
}
80% {
transform: translate(-40px, 72px) rotate(144deg);
}
to {
transform: translate(0) rotate(0deg);
}
}
.shape23 {
position: absolute;
left:0%;
bottom:0px;
z-index:1;
}
.shape23 img {
animation: moveBounce 5s linear infinite;
max-width: 10em;
display: none;
}
/* .my-slider{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
align-items: center;
place-items: center;
} */
/* Feature CSS */
.feature-card{
display: flex;
align-items: flex-start;
gap: 1em;
flex-direction: column;
/*box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);*/
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
background-color: var(--secondary-color);
padding: 2em;
border-radius: 15px;
}
.feature-info h4{
font-size: 1.4em;
font-weight: 600;
color: var(--tertiary-color);
margin-bottom: 0.5em;
}
.feature-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.feature-box{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5em;
}
.feature-reach-img-sec{
padding-right: 2em;
}
/* Value CSS */
.margin-md{
margin-bottom: 2em;
}
.value-card{
background-color: var(--secondary-color);
padding: 2em;
/* box-shadow: 0px 10px 30px rgb(55 43 125 / 10%); */
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
border-radius: 15px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
text-align: center;
height: 100%;
}
.value-info h4 {
font-size: 1.4em;
font-weight: 600;
color: var(--tertiary-color);
margin-bottom: 0.5em;
}
.value-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.value-icon{
width: 5em;
}
.value-box{
margin-top: 2em;
}
/* Service offers CSS */
.services-offers-card{
display: grid;
grid-template-columns: 80px auto;
gap: 1em;
/*box-shadow: 0px 15px 50px 0px rgb(14 17 51 / 10%);*/
-webkit-box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
box-shadow: 0 10px 30px 0 rgb(5 16 44 / 15%);
background-color: var(--secondary-color);
padding: 2em;
border-radius: 15px;
}
.services-offers-info h4{
font-size: 1.4em;
font-weight: 600;
color: var(--tertiary-color);
margin-bottom: 0.5em;
}
.services-offers-info p{
font-size: 1em;
line-height: 1.8;
font-weight: 400;
margin: 0;
color: var(--quaternary-color);
}
.services-offers-box{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5em;
}
.services-offers-reach-img-sec{
padding-right: 2em;
}
.venom-button{
z-index: 99;
}
.cta-card-1{
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
padding: 2em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 9;
flex-direction: column;
}
.view-more-btn-sec{
display: flex;
align-items: center;
justify-content:center;
margin-top: 3em;
}
.service-box.view-more-service-box{
margin-top: 3em;
}
Back to Directory
File Manager