File: /home/imensosw/www/imenso.co/dev/imenso/css/style.css
@charset "UTF-8";
/*!
Project Name: Advanchainge
URL: https://www.imensosoftware.com
Author: Imenso Software
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# mixin
# Common
/*--------------------------------------------------------------
# Mixin
--------------------------------------------------------------*/
/* Media query map function starts */
/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap");
@font-face {
font-family: 'ProximaNova-Regular';
font-style: normal;
font-weight: normal;
src: url("fonts/ProximaNova-Regular.otf"); }
@font-face {
font-family: 'ProximaNova-Bold';
font-style: normal;
src: url("fonts/Eina01-Regular.ttf"); }
@font-face {
font-family: 'ProximaNova-Thin';
font-style: normal;
font-weight: 300;
src: url("fonts/ProximaNova-Thin.otf"); }
@font-face {
font-family: 'ProximaNova-Extrabold';
font-style: normal;
font-weight: bold;
src: url("fonts/ProximaNova-Extrabold.otf"); }
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
body {
font-size: 18px;
font-family: "Plus Jakarta Sans", sans-serif;
color: #000;
overflow-x: hidden;
overflow-y: scroll;
line-height: 1.6; }
a {
color: #000; }
a:hover {
color: #c1312c; }
h1, h2, h3, h4, h5 {
line-height: 1.3;
font-weight: 800; }
.container {
max-width: 1200px; }
a:hover, a:focus {
text-decoration: none;
outline: none; }
.burger {
padding: 100px 0; }
.t-burger {
padding-top: 100px; }
.b-burger {
padding-bottom: 100px; }
.gutter {
padding: 0 100px; }
.gutter-sm {
padding: 0 50px; }
.offset {
margin-top: 100px; }
/*ul, ol{ margin-left:0; padding-left:0 }*/
form label {
font-size: 0.9em; }
.form-control {
padding: 0.575rem 0.85rem;
border-radius: 2px; }
.form-control:focus {
box-shadow: none;
background: #F0F5F7;
border-color: #fd2e35; }
.chosen-container {
width: 100% !important; }
.checkbox label:after, .radio label:after {
content: '';
display: table;
clear: both; }
.checkbox .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: 2px;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em; }
.checkbox label, .radio label {
margin-bottom: 0;
cursor: pointer; }
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: 100%;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
border-radius: 50%; }
.checkbox .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 13%; }
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 13%;
margin-left: 0.04em; }
.checkbox label input[type="checkbox"], .radio label input[type="radio"] {
display: none; }
.checkbox label input[type="checkbox"] + .cr > .cr-icon, .radio label input[type="radio"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in; }
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1; }
.checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr {
opacity: .5; }
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important; }
.btn-primary {
background: #20376A;
border-color: #20376A;
border-radius: 30px;
padding: 10px 40px;
font-weight: 600;
border: none; }
.btn-primary:hover {
background-color: #20376A;
border-color: #20376A; }
.btn-primary.active:not(:disabled):not(.disabled), .btn-primary:active:not(:disabled):not(.disabled), .show > .btn-primary.dropdown-toggle {
background-color: #c1312c;
border-color: #c1312c; }
.btn-inverse {
background-color: #F0F5F7;
border-color: #F0F5F7;
color: #666; }
.btn-inverse:hover {
background-color: #edf0f2;
border-color: #edf0f2;
color: #666; }
.btn-bordered {
border: 2px solid #000;
border-radius: 30px;
padding: 7px 27px;
background-color: transparent;
transition: 0.3s all;
display: inline-block;
color: #000; }
.btn-bordered:hover {
background-color: #20376A;
color: #FFF; }
.bg-light {
background-color: #FFF !important; }
.navbar {
padding: 0;
height: 100px;
border-color: #000;
transition: 0.3s all !important; }
.navbar.navbar-sml {
height: 70px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.navbar .nav-btn {
min-width: 240px;
border-left: 1px solid #DDD;
height: 70px;
align-items: center;
display: flex;
padding-left: 30px; }
.navbar .navbar-nav {
align-items: center; }
.navbar .navbar-nav .nav-link {
padding: 0.5em 1em;
color: #000;
font-size: 0.9em;
font-weight: 500; }
.navbar-expand-lg .navbar-collapse {
/*justify-content:flex-start;*/ }
nav .nav-link .fa-bars {
font-size: 1.4em;
color: #777; }
.white-text {
color: #FFF; }
.big-text {
font-size: 30px;
font-weight: 600;
line-height: 1.5; }
.bg-0 {
background: #212022; }
.bg-1 {
background: #FBEECA; }
.bg-2 {
background: #C6DBF2; }
.bg-3 {
background: rgba(123, 216, 240, 0.3); }
.bg-4 {
background: #f9939a40; }
.bg-5 {
background: rgba(193, 219, 131, 0.5); }
.bg-6 {
background: #a1c7f4; }
.bg-7 {
background: rgba(244, 204, 161, 0.5); }
.bg-8 {
background: #b9adf6; }
.theme-bg {
background-image: linear-gradient(to right, #0f346c 30%, #764ca6 100%); }
.main__cta {
color: #FFF;
font-size: 16px;
display: inline-block;
font-weight: 500;
padding: .5em 1.5em;
border-radius: 0.25em;
background-image: linear-gradient(to right, #764ca6 30%, #0f346c 100%); }
.main__cta.dark {
background: #FFF;
color: #0f346c; }
.main__cta.dark:after {
background: url(../images/arrow-dark.svg) right center/auto 100% no-repeat; }
.main__cta.dark:hover {
color: #0f346c; }
.main__cta:after {
content: " ";
display: inline-block;
width: 28px;
height: 16px;
background: url(../images/arrow.svg) right center/auto 100% no-repeat;
transition: width 0.2s ease-out;
vertical-align: -3px;
margin-left: 10px; }
.main__cta:hover {
color: #FFF; }
.main__cta:hover:after {
width: 36px; }
.title__link {
color: #FFF;
transform: rotate(90deg);
position: absolute;
text-transform: uppercase;
top: 20%;
letter-spacing: 2px;
transition: 0.3s all;
left: 3%;
font-size: 0.8em; }
.title__link:after {
height: 1px;
width: 100px;
background: #FFF;
content: "";
position: absolute;
top: 9px;
margin-left: 18px; }
.title__link:before {
height: 20px;
width: 20px;
border-radius: 100%;
background: #FFF;
content: "";
position: absolute;
right: -180%;
bottom: 3px; }
.title__link.dark {
color: #20376A; }
.title__link.dark:after {
background: #20376A; }
.title__link.dark:before {
background: #20376A; }
section {
position: relative; }
.video-btn {
display: flex;
align-items: center;
font-size: 0.9em;
color: #000; }
.video-btn i {
background-color: #7bd8f0;
height: 30px;
width: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
color: #FFF;
margin-right: 10px;
display: inline-block;
font-size: 0.9em; }
.text-changer {
margin-left: 20px;
color: #777;
font-size: 0.8em; }
.text-changer #changerificwordspanid {
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9em; }
.big-para {
font-size: 1.5em; }
.card-header {
background-color: #FFF; }
.card-header button {
color: #000;
font-size: 1.5em; }
@-webkit-keyframes mover {
0% {
transform: translateY(0); }
100% {
transform: translateY(-50px); } }
@keyframes mover {
0% {
transform: translateY(0); }
100% {
transform: translateY(-50px); } }
.masthead span {
font-weight: 600;
color: #ee2761;
border-bottom: 2px solid #ee2761;
font-size: 12px;
text-transform: uppercase; }
.masthead h2 {
font-weight: bold;
margin-top: 20px;
line-height: 1.4;
color: #0f346c; }
.masthead p {
opacity: 0.6; }
.masthead blockquote {
font-size: 1.8em;
margin-top: 30px; }
.mt-10 {
margin-top: 4rem !important; }
.grey-bg {
background-color: #f0f4f7; }
.small-heading {
font-family: "Shadows Into Light", cursive;
font-size: 22px;
color: red;
font-weight: 400;
position: relative;
margin-bottom: 20px;
display: inline-block; }
.relative {
position: relative; }
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden; }
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.has-scroll-smooth body {
overflow: hidden; }
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh; }
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap; }
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%; }
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0; }
.c-scrollbar:hover {
transform: scaleX(1.45); }
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
opacity: 1; }
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1); }
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3); }
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab; }
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing; }
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0; }
.bg-primary {
background-color: #20376A !important; }
.light-bg {
background-color: #f7f9fb; }
.text-uc {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
font-weight: 700; }
.list {
padding-left: 17px;
margin-top: 20px;
list-style: square; }
.list li {
margin-bottom: 8px;
font-size: 0.9em; }
.list a {
color: #FFF; }
.list-2 {
padding-left: 17px;
margin-top: 26px;
list-style: circle; }
.list-2 li {
margin-bottom: 8px; }
.list-2 a {
color: #000;
font-size: 0.9em;
opacity: 0.7; }
.bglight {
background-color: #f0f4f7; }
.section-header .sh-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
color: red; }
.section-header h2 {
font-size: 34px;
line-height: 1.4;
margin-top: 20px; }
.sml {
font-size: 0.9em; }
.link-arrow {
display: flex;
align-items: center;
margin-top: 20px;
color: #cf307d;
font-size: 0.9em;
font-weight: 500; }
.link-arrow ion-icon {
font-size: 30px;
margin-right: 5px; }
.section {
margin: 50px; }
.shade {
display: inline;
color: #fd2e35;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px; }
.shade.small {
font-size: 10px; }
.blur-heading {
display: block;
margin-top: 26px;
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
opacity: 1;
letter-spacing: 1px;
position: relative; }
.blur-heading:after {
width: 100px;
height: 2px;
background: #000;
position: absolute;
content: "";
top: 50%; }
.blur-heading:before {
width: 100px;
height: 2px;
background: #000;
position: absolute;
content: "";
top: 50%;
right: 56%; }
.m-auto {
margin: 0 auto; }
.alt-bg-1 {
background-color: #f0f4f7; }
.alt-bg-2 {
background-color: #E4EDED; }
.text-theme {
color: #20376A; }
/*=================MEGA DROPDOWN===================
===========================================*/
.megamenu {
position: static;
border-left: medium none !important;
border-radius: 0;
border-right: medium none !important;
box-shadow: none; }
.megamenu .dropdown-menu {
border: medium none;
border-radius: 0;
margin-top: -2px;
width: 100%;
padding: 3.125em 0;
border-bottom: 1px solid #DDD;
transition: all 0.3s ease 0s;
transform: scale3d(1, 0, 1);
transform-origin: center top 0;
display: block; }
.megamenu .dropdown-menu .blur-heading:after, .megamenu .dropdown-menu .blur-heading:before {
display: none; }
.megamenu .megamenu__item {
padding: 20px;
white-space: unset; }
.megamenu .megamenu__item span {
display: block; }
.megamenu .megamenu__item img {
width: 50px;
margin-bottom: 1.25em; }
.megamenu .megamenu__item-heading {
margin-bottom: 10px;
font-size: 1em; }
.megamenu .megamenu__item-number {
font-weight: 600;
color: #000;
font-size: 2em; }
.megamenu .dropdown-toggle {
color: #000; }
.megamenu .dropdown-toggle::after {
border: none;
position: absolute;
content: "\f107";
height: 5px;
width: 5px;
font-family: FontAwesome;
top: 10px;
right: 5%; }
.megamenu .nav-link {
position: relative; }
.dropdown:hover > .dropdown-menu {
transform: scale3d(1, 1, 1); }
.theme-bg-2 {
background-color: #20376A;
color: #FFF; }
.bg-shade {
background-color: #efefef; }
.bullets {
padding: 0;
padding-left: 17px;
list-style: none;
margin-top: 50px;
display: flex;
justify-content: center; }
.bullets li {
margin-bottom: 15px;
width: 25%;
padding: 50px;
border: 1px solid #000; }
.big-h2 {
font-size: 44px; }
.f-40 {
font-size: 40px; }
.dot-process {
list-style: none;
padding: 0;
display: flex; }
.dot-process li {
display: inline-block;
width: 24%;
position: relative; }
.dot-process li:after {
position: absolute;
top: -20%;
height: 20px;
width: 20px;
background: red;
border-radius: 100%;
content: "";
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.dot-process li:before {
content: "";
width: 100%;
position: absolute;
border-top: 2px dotted red;
top: -13%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.dot-process li:last-child:before {
display: none; }
.dot-process li span {
display: block; }
.dot-process li .dot-process-title {
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px; }
.dot-process li .dot-process-content {
font-weight: 600;
margin-top: 10px;
padding-right: 36px;
font-size: 0.9em; }
.form-wrapper {
border: 1px solid #000;
border-radius: 8px; }
.form-header {
padding: 14px 30px;
border-bottom: 1px solid #000; }
.form-header h4 {
margin: 0;
font-weight: 600; }
.form-body {
padding: 30px; }
.lm-dashboard {
padding: 100px;
background-color: white;
border-radius: 8px;
background-image: url("../images/ipad5.png");
background-repeat: no-repeat;
background-position: 546px 58px;
background-size: 70%;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.bigger-h1 {
font-size: 72px;
letter-spacing: -0.015em;
line-height: 1.05; }
.icon-developer-tech {
height: 70px;
width: 70px;
border-radius: 8px;
background-color: #fd2e35;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: inline-flex;
justify-content: center;
align-items: center; }
.big-p {
font-weight: 500; }
.service-col {
padding: 24px !important;
padding-left: 50px !important;
background: #FFF;
margin-bottom: 32px;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.service-col h3:before {
background-image: url("../images/yes.png");
left: -29px;
top: 3px !important;
background-size: contain;
background-position: center;
background-color: transparent !important;
height: 20px !important;
width: 20px !important; }
.hire-cta {
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden; }
.hire-cta__left {
background: #f0f4f7;
padding: 30px;
width: 70%;
font-size: 28px;
font-weight: 600;
color: #000; }
.hire-cta__right {
background: #FFF;
padding: 30px; }
.common-card {
background: #FFF;
border-radius: 18px;
padding: 40px; }
.service-3 .common-card {
min-height: 435px;
margin-bottom: 28px; }
.hire-expertise .service-2__wrapper-item .number {
width: 15%; }
.service-3 .number {
font-size: 50px;
display: inline-block;
margin-bottom: 20px; }
.service-3 h5 {
font-size: 24px;
margin-bottom: 20px; }
.service-3 p {
font-size: 14px; }
.sidebar-header {
background: url("../images/service-banner.png");
color: #FFF;
padding: 24px 30px;
border-radius: 18px 18px 0 0; }
.siderbar-body {
background: #FFF;
padding: 30px;
border-radius: 0 0 18px 18px; }
.form-group {
font-weight: 500;
font-size: 0.9em; }
.form-control {
border-color: #000;
height: 44px; }
.lining .shade {
position: relative;
display: block; }
.lining .shade:before {
height: 1px;
background: #fd2e35;
content: "";
position: absolute;
width: 100px;
left: -15%;
top: 47%; }
.two-item-row h3 {
font-size: 22px;
font-weight: 700;
margin-top: 30px; }
.two-item-row p {
font-size: 16px; }
.two-item-row .tir-content {
display: none; }
.cirled {
height: 60px;
min-width: 60px;
max-width: 60px;
display: flex;
border-radius: 10px;
background: #fd2e35;
justify-content: center;
align-items: center; }
.bullet-point-item {
display: flex;
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 45px;
align-items: center; }
.bullet-point-item h5 {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 0;
margin-left: 20px; }
#casestudies .project-brief {
flex-direction: column; }
.lining .big-p {
opacity: 0.6; }
.lining .techicons {
margin: 0;
padding-left: 20px; }
.lining .border-bottom {
border-color: #000 !important; }
#skillset h5 {
font-size: 16px; }
.borderbox {
margin-top: 40px; }
.borderbox:first-child {
margin-top: 0; }
.borderbox img {
width: 50px; }
.borderbox h3 {
font-size: 22px; }
.borderbox p {
font-size: 15px;
opacity: 0.7; }
.highlighted1 {
box-shadow: 0 -1.4em 0 0 #fedc86 inset !important; }
.underline {
border-bottom: 8px solid #fedc86; }
.engagement-models-box ul {
list-style: none;
padding: 0; }
#models .table-bordered {
background: #FFF;
font-size: 15px; }
#models th, #models td {
padding: 22px;
vertical-align: middle; }
#models .table-bordered thead th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px; }
#models .fn1 {
font-size: 22px;
font-weight: 800;
color: #20376A;
line-height: 1.3; }
#models .fn2 {
opacity: 0.7; }
#models ul {
padding-left: 10px;
font-weight: 500;
font-size: 16px; }
.zebra::after {
margin-left: 70px; }
.zebra::after {
margin-left: 140px;
top: 44%; }
.zebra::before {
width: 10em;
top: 38%;
margin-top: -8px; }
.zebra::after {
margin-left: 170px;
top: 49%;
margin-top: -10px; }
.zebra .media-heading {
font-size: 18px; }
.im-step {
height: 70px;
width: 70px;
background-color: #81d4fa;
margin-right: 0 !important;
line-height: 70px;
font-weight: 600;
font-size: 35px;
text-align: center; }
.zebra .media-body {
display: flex;
align-items: center;
font-size: 20px;
background-color: #b3e5fc;
height: 70px;
padding-left: 20px; }
.zebra .media-heading {
font-weight: 600 !important;
margin: 0; }
.sml-part {
padding-left: 115px;
font-size: 14px;
margin-top: 15px; }
.big-blur {
display: block;
font-weight: 700;
text-transform: uppercase;
color: #282562; }
.zebra::after {
background-color: #81d4fa;
border-radius: 50%;
content: " ";
height: 20px;
left: 100%;
margin-left: 75px;
margin-top: -5px;
position: absolute;
top: 30px;
width: 20px; }
.zebra::before {
border-bottom: 2px solid #81d4fa;
content: " ";
height: 1rem;
left: 96%;
position: absolute;
width: 105px;
top: 28px; }
.why-item .big {
font-size: 65px;
font-weight: bold;
display: block;
border-bottom: 1px solid #000;
color: #fd2e35; }
.why-item .title {
font-size: 20px;
font-weight: 500;
margin-top: 20px;
display: block; }
.why-item p {
font-size: 14px;
opacity: 0.6;
margin-top: 20px; }
#whyus .testimonial_review .review_slide .review__content {
padding-right: 0; }
#whyus .testimonial_review .review_slide .review__content .blockquote {
color: #000;
font-size: 20px;
font-weight: 500;
font-style: italic; }
#whyus .testimonial_review .review_slide .review-author {
color: #000; }
#whyus .testimonial_review .review_slide .review-author .review-role {
color: #666; }
.logo-position {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 auto;
transform: translate(-50%, -50%);
left: 50%; }
.techstack .border-bottom {
border-color: #000 !important; }
.cta-form {
display: flex; }
.cta-form .sidebar-header {
background: url("../images/service-banner.png");
color: #FFF;
padding: 24px 30px;
border-radius: 18px 0 0 0; }
.cta-form .siderbar-body {
background: #FFF;
padding: 30px;
border-radius: 0 18px 0 0px; }
.pattern1 {
position: absolute; }
.pattern1 span {
height: 100%;
width: 1px;
background: #000;
top: 0;
bottom: 0; }
.line1 {
position: absolute;
transform: rotate(-55deg);
right: -239px;
top: 106px; }
.line2 {
position: absolute;
transform: rotate(-55deg);
left: -121px;
top: 106px; }
.stats-light {
color: #FFF; }
.stats-light .why-item .big {
border-color: #FEDC86;
color: #FEDC86; }
.underline-2 {
border-bottom: 2px solid #fd2e35; }
.big-h3 {
font-size: 40px;
font-weight: 500;
line-height: 1.5; }
.service-3 {
position: relative; }
.service-3:after {
position: absolute;
content: "";
height: 100%;
width: 60%;
background: #f0f4f7;
top: 0;
z-index: -1; }
.xl-dot {
font-size: 200px;
color: #fd2e35; }
#models .bullet-points {
padding-left: 0; }
#models .bullet-points li {
padding-bottom: 10px;
list-style: none;
margin-bottom: 10px;
padding-left: 30px;
border-bottom: 1px solid #ccc;
position: relative; }
#models .bullet-points li:before {
content: '';
display: inline-block;
width: 8px;
height: 15px;
position: absolute;
left: 5px;
top: 3px;
/* border-radius: 100%; */
border: 2px solid #000;
border-left: 0;
border-top: 0;
transform: rotate(45deg); }
/*.col2{display: inline-block; margin-bottom: 0;
li{ width:calc(50% - 15px); float:left; margin:0 30px 15px 0;
&:nth-of-type(even){ margin-right: 0;}
}
}*/
.projects .tabs {
list-style: none;
display: flex;
padding: 0; }
.projects .tabs a {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: inline-block;
margin-right: 20px;
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
.projects .tabs a.active {
color: #c1312c; }
.img-text {
font-size: 168px;
line-height: .875em;
font-weight: 800;
letter-spacing: -5px;
text-transform: uppercase;
color: #132e67;
line-height: 1.1;
background-clip: text !important;
-webkit-background-clip: text !important;
color: transparent !important;
background-image: url("../images/bg4.gif");
background-size: cover;
background-repeat: no-repeat;
background-position: -18px -377px;
font-family: 'Montserrat', sans-serif; }
.hastag {
font-size: 30px;
font-style: italic;
font-weight: bold;
color: #fd2e35; }
.img-text-sml {
font-size: 68px;
background-position: center center; }
ul.timeline {
list-style-type: none;
position: relative; }
ul.timeline:before {
content: ' ';
background: #444fe5;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400; }
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
font-size: 16px; }
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #444fe5;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
margin-top: 5px; }
.border-top, .border-bottom {
border-color: #000 !important; }
.tipped {
position: relative; }
.tipped:after {
content: "";
position: absolute;
height: 1px;
width: 40px;
background: #000;
top: 24px;
right: -50px; }
.css-case .techicons li {
display: flex;
align-items: center; }
.css-case .techicons li a {
min-width: 155px; }
.css-case .tip-title {
margin-left: 60px;
font-size: 14px;
color: #666; }
.author-msg {
display: flex;
align-items: center;
flex-direction: column; }
.author-msg p {
font-size: 36px;
font-weight: 600;
line-height: 1.4;
color: #20376A;
font-style: italic; }
.author-msg .author-content {
display: flex;
align-items: center;
text-transform: uppercase; }
.author-msg .author-content .name {
font-weight: 600;
font-size: 18px;
color: #fd2e35;
letter-spacing: 1px; }
.author-msg .author-content .title {
text-transfrom: uppercase;
font-size: 12px;
opacity: 0.6;
letter-spacing: 4px;
margin-top: 6px; }
.color-primary {
color: #20376A; }
.about .f-sml {
font-size: 1.5rem;
color: #20376A;
font-style: italic;
font-weight: bold; }
.about .f-big {
font-size: 4.125rem;
text-transform: uppercase;
letter-spacing: -1px;
font-weight: 800; }
.founder-quote {
padding: 0 234px; }
.founder-quote p {
font-size: 28px !important;
font-weight: 600 !important; }
.founder-quote .name-role {
font-weight: 600;
color: #000;
display: block;
font-size: 22px;
line-height: 1.3; }
.founder-quote .name-role span {
font-weight: 500;
opacity: 0.6;
font-size: 16px; }
.we-quote {
padding: 50px 170px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
text-align: center; }
.we-quote p {
font-size: 2.5rem;
font-weight: 500; }
.marquee {
height: 250px;
width: 100%;
bottom: -42px;
overflow: hidden;
position: absolute; }
.marquee div {
display: block;
width: 200%;
height: 100%;
position: absolute;
overflow: hidden;
animation: marquee 10s linear infinite; }
.marquee span {
float: left;
width: 50%;
font-size: 180px;
font-weight: bold;
text-transform: uppercase;
color: #f0f4f7;
font-family: 'Montserrat', sans-serif;
letter-spacing: 5px; }
@keyframes marquee {
0% {
left: 0; }
100% {
left: -100%; } }
/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
.hero {
display: flex;
height: 100vh;
align-items: center; }
.hero h1 {
font-size: 82px;
margin-bottom: 50px;
font-weight: 800;
letter-spacing: -0.015em;
transform: skew(0deg, -6deg);
color: #20376A; }
.hero p {
font-size: 20px;
font-weight: 500;
opacity: 0.7; }
.hero__left {
width: 50%;
padding-left: 100px;
padding-right: 10px;
display: flex;
flex-direction: column;
justify-content: center; }
.hero__right {
width: 50%; }
.services h2 {
color: #FFF; }
.services p {
color: #FFF; }
.swiper-wrapper {
align-items: flex-end; }
.stats {
text-align: center;
color: #FFF;
display: flex;
list-style: none;
padding: 0;
margin-top: 0; }
.stats li {
margin-bottom: 0px;
text-align: center !important;
margin-right: 20px;
width: 130px;
padding: 36px 0; }
.stats li img {
height: 36px;
width: auto;
margin: 0 auto 10px;
display: block; }
.stats li strong {
font-size: 2em;
line-height: 1.2em;
margin-top: .5em;
display: block;
font-weight: 700; }
.stats li span {
font-size: 12px;
opacity: 0.5; }
.stats-2 li:nth-child(odd) {
border-right: 1px solid #fff; }
.stats-2 li:nth-child(1), .stats-2 li:nth-child(2) {
border-bottom: 1px solid #fff; }
.sr-container {
width: 600%;
height: 100%;
display: flex;
flex-wrap: nowrap; }
.sr-container .panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 10px;
will-change: transform; }
.sr-container .panel__content {
width: calc(100% - 200px);
height: calc(100% - 100px);
background-color: #efefef;
padding: 80px; }
.sr-container .srbg {
background-image: url("../images/sr-bg.png");
background-size: cover;
background-repeat: no-repeat;
color: #FFF; }
.sr-container h2 {
font-size: 32px;
line-height: 1.5;
color: #FFF; }
.sr-container .scroll-down {
padding-top: 100px;
position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 20px;
color: #000; }
.sr-container .scroll-down:before {
content: "";
position: absolute;
height: 100px;
width: 1px;
background-color: #000;
top: 0;
left: 50%; }
.zigzag h2 {
font-size: 26px;
line-height: 1.5; }
.capabilities .nav-link {
background-color: #efefef;
border-radius: 0 !important;
padding: 15px 40px; }
.capabilities .nav-pills .nav-link.active, .capabilities .nav-pills .show > .nav-link {
background-color: #20376A; }
.capabilities .media-body p {
font-size: 0.9em; }
.capabilities h5 {
color: #000; }
.about .section-header {
width: 80%; }
.about .section-header h2 {
font-size: 26px;
line-height: 1.7; }
.about .logos ul {
list-style: none;
padding: 0; }
.about .logos li {
width: 100px;
margin: 0 20px;
display: inline-block; }
.techstack .tech-icons {
list-style: none;
padding-left: 0; }
.techstack .tech-icons li {
display: inline-block;
text-align: center;
min-width: 136px;
margin-bottom: 50px; }
.techstack .tech-icons li span {
display: block;
font-size: 14px;
margin-top: 15px; }
.techstack h3 {
color: #000;
font-size: 22px; }
.techstack .nav-pills .nav-link {
color: rgba(0, 0, 0, 0.3); }
.techstack .nav-pills .nav-link.active, .techstack .nav-pills .show > .nav-link {
background-color: transparent;
color: #000;
font-size: 1em;
font-weight: 600;
position: relative; }
.techstack .nav-pills .nav-link.active:after, .techstack .nav-pills .show > .nav-link:after {
content: "";
position: absolute;
/*width: 50px;
height: 2px;
background-color: #000;
right: -18px;
top: 50%;*/
width: 100%;
height: 2px;
background-color: #000;
left: 0;
bottom: 0; }
/*=================SERVICE===================
===========================================*/
.service__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.service__wrapper-item {
width: 24%;
background-color: #f4f4f4;
padding: 30px;
margin-bottom: 30px; }
.service__wrapper-item h5 {
margin-top: 20px;
font-size: 16px;
background: #fd2e35;
width: 50px;
height: 50px;
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center; }
.service__wrapper-item p {
margin-top: 20px; }
.service-2__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center; }
.service-2__wrapper-item {
width: 100%;
margin-bottom: 150px;
display: flex;
align-items: flex-start; }
.service-2__wrapper-item:first-child {
margin-top: 100px; }
.service-2__wrapper-item:last-child {
margin-bottom: 0; }
.service-2__wrapper-item ul {
padding-left: 17px;
font-size: 0.9em;
font-weight: 600;
margin-top: 30px;
color: #000; }
.service-2__wrapper-item ul li {
margin-bottom: 10px; }
.service-2__wrapper-item .link-arrow {
margin-top: 30px; }
.service-2__wrapper-item .icon {
margin-right: 50px; }
.service-2__wrapper-item .icon ion-icon {
font-size: 60px;
color: #20376A; }
.service-2__wrapper-item img {
margin-right: 50px; }
.service-2__wrapper-item h5 {
margin-top: 0px;
font-size: 50px;
letter-spacing: -0.015em;
color: #000; }
.service-2__wrapper-item p {
font-size: 18px;
font-weight: 500;
margin-top: 20px;
opacity: 0.7; }
.service-2__wrapper-item .number {
font-size: 72px;
display: block;
margin-right: 20px;
line-height: 1;
font-weight: 800;
opacity: 0.1; }
.sidebar {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
height: 100%;
top: 30%;
bottom: auto;
padding-bottom: 50px; }
/*=================WORK===================
===========================================*/
.work {
display: flex; }
.work h2 {
font-size: 32px; }
.work__left {
width: 50%;
padding-left: 170px;
padding-right: 50px;
display: flex;
flex-direction: column;
justify-content: center; }
.work__right {
width: 50%; }
.work-2 {
height: calc(100vh - 70px);
display: flex;
align-items: center; }
.work-2 p {
font-size: 0.9em;
margin-top: 20px; }
.work-2 .section-header {
padding-left: 22%;
padding-right: 50px; }
.work-2 .work-shed {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 35%;
z-index: -1;
opacity: 0.9; }
.work-2 .p1 .work-shed {
background-color: #694986; }
.work-2 .p2 .work-shed {
background-color: #24849a; }
.work-2 .container-fluid {
padding-right: 0 !important;
height: 100%; }
.work-2 .swiper {
height: 100%; }
.work-2 .row {
height: 100%; }
.swiper-button-next, .swiper-button-prev {
height: 100px !important;
width: 60px !important;
background-color: #FFF;
color: #000 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 24px !important; }
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: 0px !important; }
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 0px !important; }
/*=================TECHSTACK===================
===========================================*/
.techstack .section-header {
width: 50%; }
.techstack h2 {
font-size: 44px; }
/*=================MODEL===================
===========================================*/
.model__item h3 {
font-size: 22px;
margin-bottom: 20px;
margin-top: 20px; }
.model__item p {
font-size: 0.9em; }
.models .number {
min-width: 50px;
height: 50px;
font-size: 28px;
color: #FFF;
background-color: #20376A;
border-radius: 100%;
text-align: center;
line-height: 50px; }
.models .list {
color: rgba(0, 0, 0, 0.7);
margin-bottom: 40px; }
/*=================ABOUT 2===================
===========================================*/
.about-2 .theme-bg {
color: #FFF; }
.about-2 .theme-bg h2 {
color: #FFF;
font-size: 32px; }
.about-2 .theme-bg p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0; }
.about-2 .theme-bg .btn-primary {
background: #FFF !important;
color: #20376A; }
.about-2 .section-header {
padding-right: 100px;
padding-bottom: 100px; }
.about-2 .section-header h2 {
font-size: 42px; }
.about-2 .section-header p {
font-size: 0.9em;
margin-bottom: 0; }
.about-2 .bg-noise {
position: relative; }
.about-2 .bg-noise .section-header {
z-index: 9;
position: relative; }
.about-2 .bg-noise:after {
height: 300px;
width: 300px;
background: url("../images/about-bg.png");
background-size: cover;
background-repeat: no-repeat;
content: "";
position: absolute;
right: 0;
bottom: 0; }
.about-2 .blur-heading {
margin-top: 0;
text-align: center; }
.about-2 .logos ul {
list-style: none;
padding: 0;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 0;
align-items: center; }
.about-2 .logos li {
width: 17%;
margin-bottom: 40px;
margin-right: 12px; }
.about-2 .facts {
list-style: none;
padding: 0;
margin-top: 30px;
margin-bottom: 0; }
.about-2 .facts li {
display: inline-block;
width: 49%;
text-align: center;
padding: 20px; }
.about-2 .facts li:nth-child(odd) {
border-right: 1px solid #20376A; }
.about-2 .facts li:first-child {
border-bottom: 1px solid #20376A; }
.about-2 .facts li:nth-child(2) {
border-bottom: 1px solid #20376A; }
.about-2 .facts li strong {
font-size: 30px;
font-weight: normal;
color: #20376A;
display: block; }
.about-2 .facts li span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.6;
display: block;
line-height: 1.3; }
.about-3 .fact-wrapper {
margin-left: 15%;
display: flex;
flex-wrap: wrap; }
.about-3 .fact-wrapper .fact-box {
width: 190px;
background-color: rgba(255, 255, 255, 0.9);
padding: 40px;
text-align: center;
margin: 1px; }
.about-3 .fact-wrapper .fact-box h4 {
font-size: 42px; }
.about-3 .fact-wrapper .fact-box span {
display: block;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase; }
.about-3 .theme-bg-2 {
position: relative;
overflow: hidden;
z-index: 9; }
.about-3 .theme-bg-2 .section-header {
padding-right: 15%;
color: #FFF;
position: relative;
z-index: 8;
padding-top: 80px;
padding-bottom: 80px;
padding-left: 80px; }
.about-3 .theme-bg-2 h2 {
color: #FFF;
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px; }
.about-3 .theme-bg-2 p {
color: rgba(255, 255, 255, 0.8); }
.about-3 .theme-bg-2 .btn-primary {
color: #20376A !important;
background: #FFF !important; }
.about-3 .theme-bg-2:before {
height: 500px;
width: 500px;
border-radius: 100%;
position: absolute;
content: "";
right: -20%;
top: -20%;
background-color: #fd2e35; }
.about-3 .fact-3 {
display: flex;
justify-content: center;
align-items: center; }
.about-3 .logos {
list-style: none;
margin-top: 20px;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap; }
.about-3 .logos li {
width: 90px;
margin-right: 26px;
margin-bottom: 30px; }
.about-3 .container-fluid {
padding: 0 !important; }
.about-4 p {
font-size: 0.9em; }
.about-4 .facts {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
color: #FFF;
align-items: center;
margin-bottom: 0;
margin-top: 50px; }
.about-4 .facts li {
width: 50%;
text-align: center;
padding: 30px; }
.about-4 .facts li strong {
font-size: 50px;
display: block;
font-weight: normal; }
.about-4 .facts li span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px; }
.about-4 .facts li:first-child {
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF; }
.about-4 .facts li:last-child {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF; }
.about-4 .logos ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center; }
.about-4 .logos ul li {
width: 150px;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
padding: 20px; }
/*=================REVIEW===================
===========================================*/
.reviews {
margin-top: 40px; }
.reviews .swiper-slide {
padding-bottom: 15px; }
.reviews .swiper-horizontal > .swiper-pagination-bullets, .reviews .swiper-pagination-bullets.swiper-pagination-horizontal, .reviews .swiper-pagination-custom, .reviews .swiper-pagination-fraction {
bottom: -3px; }
.review-img {
border-radius: 100%;
overflow: hidden;
height: 120px;
width: 120px;
background-color: #eff1f4; }
.review-author {
font-size: 18px;
font-weight: 600;
margin-top: 10px; }
.review-role {
font-size: 14px;
font-weight: normal; }
.review-contry {
display: flex;
align-items: center;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
margin-bottom: 0; }
.review-contry img {
margin-right: 10px; }
.review-quote {
color: #444;
font-size: 24px;
line-height: 1.6;
font-style: italic; }
.review-icon {
width: 70px; }
/*=================CTA===================
===========================================*/
.cta h2 {
font-size: 52px; }
.cta .btns .btn {
margin: 0 10px;
font-size: 18px; }
.more-stuffs {
padding: 10px 0; }
.more-stuffs a {
font-size: 0.9em;
color: #000;
display: flex;
align-items: center; }
.more-stuffs a ion-icon {
font-size: 18px;
margin-left: 10px; }
/*=================FAQ===================
===========================================*/
.faq h2 {
font-size: 20px; }
.schema-faq-code .faq-q {
font-size: 18px;
margin: 0;
padding: 12px 56px 12px 0px;
line-height: 1.4;
cursor: pointer;
position: relative;
border-bottom: 1px solid #dedee0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.schema-faq-code .faq-q:after {
content: "+";
position: absolute;
top: 50%;
right: 0;
width: 16px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
color: #000;
font-size: 20px; }
.schema-faq-code .faq-q .faq-q-open:after {
content: "-"; }
.schema-faq-code .faq-a {
margin: 0;
padding: 12px;
background-color: #fff;
font-size: 14px;
line-height: 1.4;
border-bottom: 1px solid #dedee0;
display: none; }
.schema-faq-code .faq-question:last-child .faq-div {
border-bottom: none; }
.schema-faq-code .faq-question:last-child .faq-a {
border-bottom: 0px; }
.schema-faq-code .faq-q {
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 12px 56px 12px 0px;
line-height: 1.4;
cursor: pointer;
position: relative;
border-bottom: 1px solid #dedee0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.faq-q:after {
content: "+";
position: absolute;
top: 50%;
right: 0;
width: 16px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
color: #000;
font-size: 20px; }
.faq-q.faq-q-open:after {
content: "-"; }
.faq-a {
margin: 0;
padding: 12px;
background-color: #fff;
font-size: 14px;
line-height: 1.4;
border-bottom: 1px solid #dedee0;
display: none; }
.faq-a ul {
list-style: disc;
margin-left: 30px; }
.faq-a li {
margin-bottom: 10px; }
.schema-faq-code .faq-question:last-child .faq-a {
border-bottom: 0px; }
.schema-faq-code .faq-q {
border: none !important;
font-size: 16px !important; }
.schema-faq-code .faq-a {
padding: 20px 0;
background-color: transparent;
font-size: 16px;
line-height: 24px;
padding-top: 5px;
color: #5d6769; }
.faq-div {
border-bottom: 1px solid #CCC; }
.faq-q-open, .faq-a-open {
opacity: 1; }
.faq-q-open {
color: #0f346c; }
.schema-faq-code .faq-q {
padding: 10px 56px 10px 0px !important; }
.schema-faq-code .faq-q::after {
font-size: 24px !important;
font-weight: normal !important; }
.schema-faq-code .faq-q {
font-size: 14px;
margin: 0;
padding: 12px 56px 12px 0px;
line-height: 1.4;
cursor: pointer;
position: relative;
border-bottom: 1px solid #dedee0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.faq-q:after {
content: "+";
position: absolute;
top: 50%;
right: 0;
width: 16px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
color: #000;
font-size: 20px; }
.faq-q.faq-q-open:after {
content: "-"; }
.faq-a {
margin: 0;
padding: 12px;
background-color: #fff;
font-size: 14px;
line-height: 1.4;
border-bottom: 1px solid #dedee0;
display: none; }
.schema-faq-code .faq-question:last-child .faq-a {
border-bottom: 0px; }
.schema-faq-code .fa {
margin-right: 5px; }
/*=================FOOTER===================
===========================================*/
.stars i {
color: orange; }
.g-review p {
font-size: 12px; }
.footer-creds {
display: flex;
align-items: center;
justify-content: flex-end; }
.footer-creds a {
margin: 0 10px; }
.footer .blur-heading {
margin-top: 0; }
.footer .blur-heading:after, .footer .blur-heading:before {
display: none; }
.footer .footer-links {
padding-left: 0;
list-style: none;
font-size: 0.8em;
margin-top: 15px; }
.footer .footer-links li {
margin-bottom: 7px; }
.footer .footer-links i {
min-width: 20px;
display: inline-block; }
.copyright {
font-size: 0.7em;
opacity: 0.5; }
.header .blur-heading {
margin-top: 0; }
.header .header-links {
padding-left: 0;
list-style: none;
font-size: 0.9em;
margin-top: 15px; }
.header .header-links li {
margin-bottom: 7px; }
.header .header-links i {
min-width: 20px;
display: inline-block; }
.about-5 p {
font-size: 0.9em; }
.about-5 .section-header {
padding-right: 100px; }
.about-5 .section-header h2 {
font-size: 44px; }
.about-5 .logos {
padding-left: 100px; }
.about-5 .logos ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap; }
.about-5 .logos ul li {
width: 120px;
padding: 20px; }
.about-5 .facts {
min-height: 200px;
position: relative;
padding: 0; }
.about-5 .facts li {
height: 180px;
width: 180px;
border-radius: 100%;
border: 4px solid #20376A;
background-color: transparent;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute; }
.about-5 .facts li strong {
font-size: 40px;
display: block;
font-weight: 400; }
.about-5 .facts li span {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px; }
.about-5 .facts li:first-child {
top: -50%;
left: 0; }
.about-5 .facts li:nth-child(2) {
top: 0%;
left: 25%;
transform: scale(0.9); }
.about-5 .facts li:nth-child(3) {
top: 0%;
left: 50%; }
.about-5 .facts li:nth-child(4) {
top: -55%;
left: 75%;
transform: scale(0.7); }
.bor-5 {
border: 3px solid #20376A; }
.inner-hero {
height: calc(100vh - 100px);
align-items: center;
display: flex; }
.inner-hero h1 {
font-size: 50px; }
.inner-hero .case-points {
margin-bottom: 20px; }
.inner-hero .case-points .cp-label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
color: #fd2e35;
margin-bottom: 10px; }
.inner-hero .case-points .cp-value {
font-size: 16px; }
.inner-hero .case-points ul.cp-value {
padding-left: 17px; }
.inner-hero .case-points ul.cp-value li {
margin-bottom: 5px; }
.creds {
display: flex; }
.creds .cred-item {
margin-right: 30px;
min-width: 130px; }
.creds span {
display: block; }
.creds .big {
font-size: 30px;
font-weight: bold;
color: #fd2e35; }
.creds .small {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase; }
.work-wrapper .work-image {
min-height: 450px;
padding: 30px;
display: flex;
justify-content: center;
align-items: center; }
.work-wrapper .work-content {
display: flex;
margin-top: 40px;
justify-content: space-between; }
.work-wrapper .work-content p {
margin-right: 50px;
width: 350px; }
.work-wrapper .work-content h3 {
font-size: 24px;
line-height: 1.5; }
.projects {
display: flex;
flex-wrap: wrap;
margin-right: -20px;
margin-left: -20px; }
.project-item {
flex: 0 0 50%;
max-width: 50%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 20px;
padding-left: 20px;
margin-top: 30px; }
.project-item img {
max-width: 100%;
border-radius: 8px; }
.project-brief {
display: flex;
margin-top: 40px;
justify-content: space-between; }
.project-brief p {
margin-right: 50px;
width: 350px; }
.project-brief h3 {
font-size: 24px;
line-height: 1.5;
font-weight: 500; }
.cursor {
position: fixed;
pointer-events: none;
opacity: 0; }
.cursor-eye {
top: -50px;
left: -50px;
padding: 20px;
z-index: 1;
border-radius: 50%;
background-color: var(--darkblue); }
.cursor-show {
height: 60px;
width: 60px;
background: rgba(0, 0, 0, 0.8);
display: flex;
border-radius: 100%;
text-align: center;
color: #FFF;
justify-content: center;
align-items: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px; }
.about-3 .section-header h2 {
font-size: 60px; }
.about-3 .link-arrow {
color: #FFF; }
.about-3 .link-arrow:hover {
color: #FFF;
opacity: 0.9; }
.feature-tabs .nav-pills .nav-link.active, .feature-tabs .nav-pills .show > .nav-link {
background: #f4f4f4;
color: #000; }
.feature-tabs h3 {
font-size: 30px; }
.icon-box {
padding: 30px; }
.pay-features h4 {
font-size: 26px;
line-height: 1.5; }
.card {
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 20px 30px; }
.bordercard {
/*border-right:1px solid #ccc;*/ }
.bordercard .icn {
display: block;
margin-top: 10px;
margin-bottom: 15px;
font-weight: bold;
color: #fd2e35;
font-size: 32px; }
.bordercard .icn i {
font-size: 40px; }
.bordercard p {
font-weight: 500; }
.list-options {
padding-left: 17px;
list-style: disclosure-closed; }
.list-options li {
margin-bottom: 10px;
font-weight: 500;
font-size: 22px; }
.on-dark {
color: #FFF; }
.on-dark .form-control {
background: transparent;
border: 1px solid #FFF; }
.case-cta {
background-color: black;
color: white;
background-image: url("../images/black-bg.jpg");
background-size: 52%;
background-repeat: no-repeat;
background-position: center; }
.case-brief ul {
padding-left: 17px; }
.case-brief li {
margin-bottom: 10px; }
.big-h1 {
font-size: 60px; }
.navbar-sml {
background: #FFF; }
.service-col {
padding: 0 30px;
font-size: 0.9em; }
.service-col h3 {
font-size: 20px;
margin-bottom: 20px;
position: relative; }
.service-col h3:before {
position: absolute;
content: "";
left: -29px;
top: 8px;
height: 14px;
width: 14px;
background-color: #fd2e35;
border-radius: 100%; }
.flex-type {
display: flex;
align-items: center; }
.big-cta {
padding: 30px 0;
width: 250px;
height: 250px;
border-radius: 100%;
background-color: #20376A;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 700;
text-align: center;
transition: .3s all;
font-size: 22px; }
.big-cta:hover {
color: #FFF;
transform: scale(1.1); }
.usp-list {
list-style: none;
font-size: 0.9em; }
.usp-list li {
position: relative;
padding-left: 25px;
margin-bottom: 10px; }
.usp-list li:before {
height: 14px;
width: 14px;
border-radius: 100%;
display: inline-block;
background: #20376A;
position: absolute;
content: "";
left: 0;
top: 29%; }
.banner-logo-wrapper {
position: absolute;
bottom: 30px;
width: 100%; }
.f-center {
display: flex;
justify-content: center;
align-items: center; }
.big-light {
font-size: 40px !important;
font-weight: 500 !important; }
.big-p {
font-size: 20px; }
.circle-icon {
background: transparent none repeat scroll 0 0;
border: medium none;
display: inline-block;
height: 5.5em;
outline: medium none;
overflow: visible;
position: relative;
text-indent: -9999rem;
width: 5.5em;
z-index: 2; }
.circle-icon img {
bottom: 0;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transform-origin: center center 0;
-ms-transform-origin: center center 0;
transform-origin: center center 0;
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s;
transition: transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s;
width: 100%;
z-index: 5; }
.circle-icon::before {
background: #fd2e35 none repeat scroll 0 0;
border-radius: 50%;
content: "";
height: 23%;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center 0;
-ms-transform-origin: center center 0;
transform-origin: center center 0;
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s;
transition: transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0.6, 0.7, 1) 0s;
width: 23%;
z-index: -1; }
.circle-icon:hover:before {
-webkit-transform: translate(-50%, -50%) scale(4) !important;
-ms-transform: translate(-50%, -50%) scale(4) !important;
transform: translate(-50%, -50%) scale(4) !important; }
.circle-icon:hover img {
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
filter: brightness(100); }
.circle-icon.bottom:before {
-webkit-transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%);
transform: translate(-50%, 100%); }
.circle-icon.right::before {
-webkit-transform: translate(100%, -50%);
-ms-transform: translate(100%, -50%);
transform: translate(100%, -50%); }
.tech-stack {
list-style: none; }
.tech-stack li {
height: 50px;
width: 50px;
line-height: 50px;
border-radius: 100%;
background-color: #FFF;
display: inline-block;
text-align: center;
margin-left: 10px;
margin-bottom: 10px; }
.tech-stack img {
width: 28px; }
div[role="progressbar"] {
--size: 5rem;
--fg: #fd2e35;
--bg: #666;
--pgPercentage: var(--value);
animation: growProgressBar 3s 1 forwards;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background: radial-gradient(closest-side, #333 80%, transparent 0 99.9%, #333 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
font-family: Helvetica, Arial, sans-serif;
font-size: calc(var(--size) / 5);
color: var(--fg);
z-index: 9;
position: relative; }
div[role="progressbar"]::before {
counter-reset: percentage var(--value);
content: counter(percentage) "%";
display: none; }
.p-line:after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: #FFF;
top: 14%; }
.service-accordion .card {
padding: 0;
box-shadow: none;
border-radius: 0;
margin-bottom: 15px;
padding-bottom: 20px;
border-bottom: 1px solid #000;
background-color: transparent; }
.service-accordion .card-header {
padding: 0;
border: none;
background-color: transparent; }
.service-accordion .card-body {
padding: 0;
font-size: 0.9em;
opacity: 0.7;
margin-top: 20px; }
.service-accordion .btn-link {
padding: 0;
font-size: 18px;
font-weight: 600;
outline: none !important; }
.service-accordion .btn-link:hover {
text-decoration: none;
color: #000; }
.service-accordion .btn-link:focus {
text-decoration: none; }
.img-frame {
position: absolute;
border: 8px solid #333;
border-radius: 8px;
bottom: -115px; }
.sml-p {
font-size: 0.8em; }
.lined {
position: relative; }
.lined:after {
width: 1px;
height: 100%;
content: "";
position: absolute;
background-color: #CCC;
left: 33%;
top: 0; }
.service-block h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 22px; }
.service-block p {
font-size: 0.9em; }
.works .project-brief {
display: block !important; }
.estimate input {
border-color: #000;
height: 50px; }
.estimate textarea {
border-color: #000; }
.shade-big {
display: inline;
color: #fd2e35;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 2px; }
.opaq {
opacity: 0.7; }
.worklist .project-brief {
flex-direction: column; }
.big-points {
list-style: none;
padding: 0;
margin-top: 50px; }
.big-points li {
font-size: 20px;
border-bottom: 1px solid #DDD;
padding: 16px 0;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center; }
.tick {
color: lightgreen; }
.featurescreen {
position: relative;
text-align: center;
/*&__content{ position:absolute; width:240px; left:50%; margin-top: 10px; transform: translateX(-50%);
img{ width:100%; height:auto; transition: .5s ease all; opacity:0; position: absolute; left:0;
&.show{ opacity:1;}
}
}*/ }
.featurescreen__mobile {
width: 100%;
position: absolute;
left: -2%;
opacity: 0;
transition: .5s ease all; }
.featurescreen__mobile.show {
opacity: 1; }
.techicons {
/*display: flex;
flex-wrap: wrap;*/
/*flex-wrap: wrap;
justify-content: center;*/
list-style: none;
/*overflow: auto;
padding: 0;*/ }
.techicons li {
display: inline-block;
max-width: 12rem;
flex-basis: 12rem;
margin: 0rem .75rem .75rem 0; }
.techicons li a {
position: relative;
display: inline-flex;
min-width: 130px;
align-items: center;
/*width: calc(100% - 1em);*/
padding: 10px 12px;
line-height: 130%;
color: #000;
background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 8px;
/*margin-bottom: 16px;*/
border: 1px solid #eee;
font-size: 0.8em;
transition: 0.3s all; }
.techicons li a .ti-image {
margin-right: 15px;
display: flex; }
.techicons li a .ti-image img {
width: 24px;
height: auto; }
.techicons li a:hover {
border-color: #fd2e35; }
.techstack .nav-pills .nav-link {
padding: 0.5rem;
font-size: .875rem;
text-align: left;
position: relative; }
.techstack .nav-pills .nav-link.active, .techstack .nav-pills .nav-link:hover {
font-size: .875rem !important;
color: #000; }
.techstack .nav-pills .nav-link.active:after, .techstack .nav-pills .nav-link:hover:after {
content: '';
position: absolute;
left: 100%;
top: 0;
width: 5px;
height: 100%; }
.techstack .nav-pills .nav-link:hover:after {
background: #ccc; }
.techstack .nav-pills .nav-link.active:after {
background: #000; }
.techstack .nav-pills .nav-link.active:hover:after {
background: #000; }
.techstack ul {
margin-bottom: 0; }
.review-section h2 {
font-size: 44px; }
.review-section .text-muted {
color: rgba(255, 255, 255, 0.7) !important; }
.review-section .section-header h2, .review-section .section-header p {
color: #fff; }
.testimonial_review .review_slide {
display: flex;
position: relative;
padding: 15px;
overflow: hidden;
height: 100%;
align-items: center; }
.testimonial_review .review_slide .author_img {
position: absolute;
bottom: 0;
left: 0;
bottom: 0;
width: 260px; }
.testimonial_review .review_slide .author_img img {
position: relative;
z-index: 1;
width: 100%; }
.testimonial_review .review_slide .author_img:before {
content: "";
position: absolute;
width: 250px;
height: 250px;
background-color: #fedc86;
left: 0px;
top: 0px;
z-index: 0;
border-radius: 100%;
transition: all ease .5s .3s; }
.testimonial_review .review_slide .review__content {
padding-left: 280px;
padding-right: 70px;
padding-bottom: 70px;
min-height: 320px; }
.testimonial_review .review_slide .review__content .blockquote {
color: #fff;
font-size: 1.25em;
font-weight: normal; }
.testimonial_review .review_slide .review__content .blockquote:after {
content: "\f10e";
font-family: FontAwesome;
font-size: 4em;
height: 80px;
opacity: 0.07;
position: absolute;
right: 40px;
top: 0;
width: 80px; }
.testimonial_review .review_slide .review-author {
color: #fff; }
.testimonial_review .review_slide .review-author .review-role {
color: rgba(255, 255, 255, 0.8); }
.testimonial_review .swiper-slide.swiper-slide-active .review_slide .author_img:before {
left: 24px;
top: -25px; }
.testimonial_review .swiper-slide.swiper-slide-active .review_slide {
width: 80%;
max-width: 1070px;
margin: 0 auto;
opacity: 1;
padding: 50px 50px 0px 50px;
border-radius: 4px; }
.testimonial_review .swiper-button-next, .testimonial_review .swiper-button-prev {
top: auto;
bottom: 10px;
background: url(../images/arrow-light.svg) center no-repeat !important;
background-size: 40px auto !important;
opacity: .5;
border-radius: 0%;
transition: .5s all ease;
overflow: hidden !important;
box-shadow: none;
height: 50px !important;
width: 80px !important; }
.testimonial_review .swiper-button-next:after, .testimonial_review .swiper-button-prev:after {
content: ''; }
.testimonial_review .swiper-button-next:hover, .testimonial_review .swiper-button-prev:hover {
opacity: 1; }
.testimonial_review .swiper-button-next {
right: 50% !important;
left: auto;
margin-right: -70px;
/*&:hover {margin-right: -120px;}*/ }
.testimonial_review .swiper-button-prev {
left: 50% !important;
right: auto;
margin-left: -70px;
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
/*&:hover {margin-left: -120px;}*/ }
.stats {
/*.big-text { font-weight: 700; color: #fff; background: #fedc86; width: 140px; text-align: center; height: 140px; line-height: 140px; border-radius: 100%; display: block; margin: auto; color: #474747; margin-bottom: 20px;}*/ }
.stats span {
display: block; }
.stats .text-muted {
font-size: .8em;
line-height: 18px;
margin-top: 10px; }
.stats .border-left {
border-color: rgba(255, 255, 255, 0.1) !important; }
.stats .stats_feature {
border-radius: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
background: #fedc86;
width: 190px;
height: 190px;
padding: 15px; }
.stats .stats_feature .text-muted {
color: #474747 !important;
margin-top: 0; }
.stats .stats_feature .big-text {
font-size: 3em;
font-weight: 700;
color: #474747;
font-size: 2.5em;
display: inline-block; }
.client_logo h5 {
margin-bottom: 50px;
position: relative; }
.client_logo h5 span {
color: #fff;
background: #474747;
display: inline-block;
padding: 5px 30px;
position: relative;
z-index: 1;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 16px; }
.client_logo h5:after {
content: '';
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
height: 1px;
z-index: 0; }
.client_logo ul {
margin: 0;
padding: 0;
/*display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;*/
list-style: none; }
.client_logo ul li {
/*width: 20%;*/
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
/*&:nth-child(5n){ border-right:0; }
&:nth-last-child(-n+5){ border-bottom:0; }*/ }
.client_logo ul li a {
display: block;
transition: .5s ease all;
cursor: default;
position: relative;
/*&:hover{ background:rgba(255,255,255,.05); }*/ }
.client_logo ul li a:after {
content: '';
display: block;
padding-bottom: 100%; }
.client_logo ul li a img {
width: 110px;
filter: grayscale(100%);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
.client_logo ul li a span {
display: block;
width: 100%;
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
text-transform: uppercase; }
.client_logo ul.col8 {
/*columns: 6; column-gap: 0;*/
display: grid;
gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: masonry;
width: 940px;
margin: 0 auto; }
.client_logo ul.col8 li {
/*width: 12.5% !important; break-inside: avoid;*/
position: relative; }
.client_logo ul.col8 li a img {
width: 60% !important; }
.client_logo ul.col8 li.bouble {
/*width: 25%;*/
background-color: #fff;
color: #474747;
grid-column: span 2; }
.client_logo ul.col8 li .stats_feature {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 170px; }
.client_logo ul.col8 li .stats_feature span {
display: block; }
.client_logo ul.col8 li .stats_feature span:last-child {
font-size: .8em;
line-height: 18px;
margin-top: 5px; }
.client_logo ul.col8 li .stats_feature .big-text {
font-size: 2.5em;
font-weight: 700;
color: #474747;
display: inline-block;
line-height: 100%; }
.whyus-section .card h3 {
margin-bottom: 10px;
min-height: 75px; }
.whyus-section .card p {
transition: .5s ease all; }
.whyus-section .card p.small {
font-size: 90%; }
.whyus-section .section_cnt {
position: relative;
height: 100%;
/* &:before{ content:''; position:absolute; left:-8px; top:-8px; width:calc(100% + 16px); height:45%; border-radius: 8px 8px 0 0; z-index:0; background:#20376A; transition:.5s ease all }*/ }
.whyus-section .section_cnt .card {
border-radius: 8px; }
.whyus-section .section_cnt.one .card {
background: #ffebbd; }
.whyus-section .section_cnt.two .card {
background: #f7d8f3; }
.whyus-section .section_cnt.three .card {
background: #fdeae2; }
.whyus-section .section_cnt:hover p {
color: #434c54 !important; }
.whyus-section .section_cnt:hover:before {
background: rgba(32, 55, 106, 0.2); }
.industry_list {
margin: 0;
padding: 0; }
.industry_list li {
display: inline-block;
margin: 8px 16px 8px 0; }
.industry_list li a {
display: block;
padding: 7px 27px;
font-size: 1rem;
background: #FFF;
border: 2px solid;
color: #20376A;
border-radius: 30px;
transition: 0.3s ease all; }
.industry_list li a:hover {
background: #20376A;
color: #fff; }
.inner-banner {
display: flex;
height: calc(100vh - 70px);
position: relative;
overflow: hidden;
padding-top: 80px; }
.inner-banner h1 {
font-size: 60px; }
.inner-banner h2 {
font-size: 60px; }
.inner-banner p {
color: rgba(0, 0, 0, 0.8); }
.inner-banner .banner-logos {
position: absolute;
bottom: 80px; }
.inner-banner .list li {
margin-bottom: 10px; }
.inner-banner .list li ion-icon {
color: #20376A; }
.navbar {
height: 100px; }
.lightform {
background-color: rgba(255, 255, 255, 0.2);
padding: 40px;
height: calc(100vh - 70px);
display: flex;
justify-content: center;
flex-direction: column; }
.lightform h3 {
color: #FFF;
font-size: 32px; }
.lightform .form-control {
margin-bottom: 20px; }
.s-overview h2 {
line-height: 1.3;
font-size: 34px; }
.inner-facts h3 {
font-size: 62px;
color: #000; }
.inner-facts span {
font-size: 0.9em; }
.s-services .item {
padding: 30px;
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: column;
min-height: 250px;
margin-bottom: 30px; }
.s-services .item p {
font-size: 0.8em; }
.s-services .item h3 {
font-size: 20px;
margin-bottom: 30px;
font-weight: 600; }
.s-services .item img {
margin-bottom: 20px; }
.s-why h2 {
font-size: 36px;
color: #FFF; }
.s-why .list {
font-size: 0.9em; }
.s-why .list h3 {
font-size: 20px; }
.s-why .list li {
padding-left: 50px;
margin-bottom: 30px;
list-style: none; }
.s-why .theme-bg-2 {
position: relative;
overflow: hidden;
z-index: 1; }
.s-why .theme-bg-2:after {
height: 350px;
width: 350px;
border-radius: 100%;
position: absolute;
content: "";
left: -20%;
top: -20%;
background-color: #9C19E0;
z-index: -1; }
.s-why .theme-bg-2:before {
height: 250px;
width: 250px;
border-radius: 100%;
position: absolute;
content: "";
right: -20%;
bottom: -20%;
background-color: #9C19E0;
z-index: -1; }
.s-why .theme-bg-2 p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9em; }
.s-why .theme-bg-2 .btn-primary {
background: #FFF !important;
color: #20376A; }
.industries {
/* Common style */
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */ }
.industries .grid {
position: relative;
padding: 1em 0 2em;
list-style: none;
text-align: center;
width: 100%;
margin: 0 auto; }
.industries .grid figure {
position: relative;
float: left;
overflow: hidden;
background: #3085a3;
text-align: center;
cursor: pointer; }
.industries .grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%; }
.industries .grid figure figcaption {
padding: 2em;
color: #fff;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.industries .grid figure figcaption::before,
.industries .grid figure figcaption::after {
pointer-events: none; }
.industries .grid figure figcaption,
.industries .grid figure figcaption > a {
/*position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;*/ }
.industries .grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0; }
.industries .grid figure h2 {
font-weight: 600;
color: #000;
font-size: 22px; }
.industries .grid figure h2 span {
font-weight: 800; }
.industries .grid figure h2,
.industries .grid figure p {
margin: 0; }
.industries .grid figure p {
text-transform: none;
color: #FFF;
font-size: 68.5%; }
.industries figure.effect-sarah {
background: #20376A; }
.industries figure.effect-sarah img {
max-width: none;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.industries figure.effect-sarah:hover img {
/* opacity: 0.4;*/
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.industries figure.effect-sarah figcaption {
text-align: left; }
.industries figure.effect-sarah h2 {
position: relative;
overflow: hidden;
padding: 0.5em 0; }
.industries figure.effect-sarah p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); }
.industries figure.effect-sarah:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.swiper-industries {
padding-bottom: 50px !important; }
.swiper-industries .swiper-button-next, .swiper-industries .swiper-button-prev {
top: 40%; }
.do-approach p {
font-size: 0.8em;
color: rgba(255, 255, 255, 0.6); }
.do-approach .media-heading {
color: #FFF;
font-size: 18px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 20px; }
.industries .grid figure {
background-color: transparent !important; }
.industries .grid figure .img {
position: relative;
display: block;
overflow: hidden; }
.industries .grid figure .img img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
width: 100%;
min-height: 100%;
object-fit: cover; }
.industries .grid figure .img:after {
content: '';
display: block;
padding-bottom: 105%; }
.industries .grid figure figcaption {
transition: .05s all ease;
position: relative;
padding: 1.2em 1.5em; }
.industries .grid figure figcaption a {
text-indent: 0;
border: 1px solid;
color: #fff;
opacity: 1;
font-size: 14px;
padding: 4px 20px 8px;
border-radius: 20px;
margin-top: 20px;
display: inline-block; }
.industries .grid figure figcaption h2 {
color: #fff;
margin-top: 0;
padding-top: 0; }
.industries .grid figure figcaption p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
font-size: 14px;
font-weight: 300; }
.industries .grid figure:nth-child(1n) figcaption {
background: #20376a !important; }
.industries .grid figure:nth-child(2n) figcaption {
background: #58698f !important; }
.industries .grid figure:nth-child(3n) figcaption {
background: #8f9bb4 !important; }
.industries .grid figure:nth-child(4n) figcaption {
background: #aeb6c7 !important; }
.industries .grid figure:nth-child(5n) figcaption {
background: #8f9bb4 !important; }
.industries .grid figure:nth-child(6n) figcaption {
background: #58698f !important; }
.industries .grid figure:nth-child(7n) figcaption {
background: #20376a !important; }
.industries .grid figure:hover .img img {
transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.industries .grid .swiper-industries {
padding-bottom: 50px !important; }
.viewport {
height: calc(100vh - 70px);
position: relative;
background-color: #f0f4f7;
padding-bottom: 200px; }
.viewport .head-label, .viewport .explore {
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
display: block; }
.viewport .explore {
color: #FFF;
font-weight: 700;
margin-top: 20px;
margin-bottom: 0;
padding-right: 50px;
position: relative; }
.viewport .explore:after {
position: absolute;
width: 40px;
top: 50%;
background-color: #FFF;
height: 2px;
margin-left: 10px;
content: ""; }
.main {
display: grid;
grid-template-rows: 2fr 1fr;
grid-template-areas: "headline" "nav";
align-items: end;
position: relative;
height: 100%; }
.main__slider {
position: absolute;
z-index: 0;
top: 0;
left: 0;
bottom: 0;
transition: 0.3s all;
right: 0;
overflow: hidden; }
.main__slider a {
display: block;
transition: 0.3s all;
cursor: pointer;
height: 100%; }
.main__slide-image img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.main__slide-image img {
display: block;
transition: 0.3s all; }
.main__slide-image:hover > img {
transform: scale(1.05);
transition: 0.3s all; }
.main__slide-image-enter img {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: scale(1.3); }
.main__slide-image-leave-to img {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.3); }
.main__slide-image-enter-active img {
transition: all 700ms;
transition-delay: 500ms; }
.main__slide-image-leave-active {
transition: all 700ms; }
.main__headline {
display: table-cell;
z-index: 1;
color: white;
font-size: 24px;
vertical-align: middle;
z-index: 1;
padding-left: 50px;
width: 70%; }
.main__nav {
z-index: 1;
display: grid;
grid-template-columns: 1fr auto;
grid-area: nav;
width: 30rem;
padding: 3rem 5rem;
color: white; }
.social-links {
display: grid;
grid-auto-flow: column;
grid-gap: 0.4rem;
align-items: center; }
.social-links:before, .social-links:after {
content: "";
display: block;
width: 1rem;
height: 0.1rem;
background: white; }
.social-links:before {
grid-column: 2; }
.social-links:after {
grid-column: 4; }
.social-links__item {
color: white; }
.aside {
position: absolute;
display: grid;
width: 350px;
height: 200px;
bottom: 100px;
right: 100px; }
.aside:after {
position: absolute;
width: 50px;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(180deg, var(--secondaryClr), var(--primaryClr));
content: ""; }
.aside:before {
position: absolute;
height: 30px;
right: 13px;
bottom: 0;
color: #FFF;
z-index: 9;
letter-spacing: 1px;
top: 38%;
transform: rotate(90deg);
content: "NEXT";
font-size: 0.8em; }
.aside__slider {
position: relative;
overflow: hidden;
background-color: #EEE;
height: 100%;
width: 100%; }
.aside__slide-image {
position: absolute;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
cursor: pointer;
transition: 0.3s all;
width: 100%; }
.aside__slide-image:hover {
transform: scale(1.1); }
.aside__slide-image-enter {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: scale(1.3); }
.aside__slide-image-leave-to {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transform: scale(1.3); }
.aside__slide-image-enter-active {
transition: all 700ms;
transition-delay: 500ms; }
.aside__slide-image-leave-active {
transition: all 700ms; }
.aside__slide-image-leave-active {
transition-delay: 200ms; }
.aside__slide-image-enter-active {
transition-delay: 600ms; }
.aside__button {
font-size: 1.5rem;
width: 100%;
height: 100px;
margin: 0;
cursor: pointer;
outline: 0;
background: #fff;
border-color: transparent;
color: #20376A; }
.aside__button:hover, .aside__button:focus {
border-color: transparent;
background-color: rebeccapurple;
outline: none;
color: #FFF; }
.aside__button:active {
color: white;
border-color: #rebeccapurple;
background: #rebeccapurple; }
.nav__slider {
display: table;
background-color: #20376A;
height: 200px;
width: 100%; }
.nav__slider .nav__progress {
width: 32%;
display: table-cell;
vertical-align: middle; }
.nav__count {
width: 10%;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #FFF; }
.progress {
height: 2px;
background: rgba(255, 255, 255, 0.2); }
.progress-bar {
background: #FFF; }
.nav__control {
width: 12%;
display: table-cell;
vertical-align: middle; }
.progress-indicator {
position: absolute;
top: 30%;
right: 0;
width: 100px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
list-style: none;
text-align: center;
padding: 0;
margin: 0; }
.progress-indicator__bar {
width: 5px;
height: 5px;
border-radius: 100%;
margin-bottom: 15px;
position: relative;
background: rgba(255, 255, 255, 0.4); }
.progress-indicator__bar--active {
background: #FFF;
position: relative; }
.progress-indicator__bar--active:after {
content: "";
width: 100%;
height: 100%;
background-color: var(--primaryClr);
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: scale(0);
border-radius: 50%;
opacity: .1;
transition: all ease .3s; }
.progress-indicator:before, .progress-indicator:after {
color: #030303; }
.progress-indicator:before {
content: "01"; }
.progress-indicator:after {
content: attr(data-slides-count); }
.scroller {
height: 100vh; }
.orange {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100vh;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #753500; }
.sr-story {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100vh;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #070707; }
.blue {
background-color: #00026d; }
.text-wrap {
position: relative;
overflow: hidden;
width: 450px;
height: 50vh; }
.panel-text {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
background-color: #070707;
transform: translateY(100%);
opacity: 0; }
.pin-spacer {
padding: 0px 0px 100px !important; }
.panel-text.blue-text {
color: blue; }
.panel-text.red-text {
color: red; }
.panel-text.purple-text {
color: purple; }
.panel-text.orange-text {
color: orange; }
.p-wrap {
position: relative;
overflow: hidden;
width: 450px;
height: 100vh; }
.panel {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 1;
width: 100%;
height: 100%;
background-image: url("../images/1.png");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat; }
.panel p {
color: #FFF; }
.panel._2 {
z-index: 1;
background-image: url("../images/2.png"); }
.panel.blue {
z-index: auto; }
.panel.red {
z-index: auto;
background-color: red;
background-image: none; }
.panel.orange {
z-index: auto;
background-color: #cf5d00;
background-image: none; }
.panel.purple {
z-index: auto;
background-color: #808;
background-image: none; }
@media (min-width: 320px) and (max-width: 767.98px) {
.navbar .navbar-nav {
height: auto !important; }
.navbar .nav-btn {
min-width: auto !important;
border-left: initial !important;
padding-left: 0 !important; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.about .blocks-sm {
padding: 24px !important; } }
/*=================BLOG===================
===========================================*/
.blogSwiper {
padding-bottom: 70px !important; }
.blogSwiper .media {
background-color: #f0f4f7; }
.blogSwiper .media .media-body {
font-size: 0.9em;
padding: 20px; }
.blogSwiper .media .media-body .post-cat {
font-size: 0.75em;
display: flex;
justify-content: space-between;
margin-bottom: 10px; }
.blogSwiper .media .media-body .post-cat a {
color: red; }
.blogSwiper .media h5 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 0; }
.blog {
border-radius: 18px;
overflow: hidden;
margin: 13px 15px;
display: inline-block;
background: #FFF;
/*&__body{ padding:.5rem 1.5rem; display:flex; flex-direction: column; justify-content: center; height: 100%; border: 1px solid #dee2e6!important;
h5{ font-size:1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
p{ font-size:.875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom:0 }
}*/ }
.blog .blog__img {
position: relative;
display: block;
overflow: hidden; }
.blog .blog__img:after {
content: '';
position: relative;
display: block;
padding-bottom: 62.67%; }
.blog .blog__img img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
min-height: 100%;
min-width: 100%; }
.blog .blog__img.col2:after {
padding-bottom: calc(130% - 7px); }
.blog .blog__body {
padding: 30px; }
.blog .blog__body .blog__date {
font-size: 70%;
margin-bottom: 15px; }
.blog .blog__body .blog__date a {
color: #6c757d !important; }
.blog .blog__body .blog__date i {
margin-right: 5px; }
.blog .blog__body h5 {
font-size: 22px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; }
.blog .blog__body p {
font-size: .875rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0; }
.blog .readmore {
font-size: .75rem;
margin-top: 25px;
display: inline-block;
position: relative; }
.blog .readmore:after {
content: "→";
margin-left: 10px;
transition: .5s ease all; }
.blog .readmore:before {
content: '';
position: absolute;
bottom: -5px;
width: 50px;
height: 1px;
background: #999; }
.blog .readmore:hover {
text-decoration: none; }
.blog .readmore:hover:after {
margin-left: 20px; }
.blog__search {
position: relative;
width: 50%;
margin: 0 auto 20px; }
.blog__search button {
position: absolute;
right: 0;
top: 0; }
.blog__search .form-group {
width: 100%; }
.blog__category {
padding: 20px 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 70px;
z-index: 1;
background-color: #fff; }
.blog__category ul {
list-style: none;
margin: auto;
padding: 0; }
.blog__category ul li {
display: inline-block;
margin: 5px; }
.blog__category ul li a {
display: block;
border-radius: 30px;
border: 1px solid;
padding: 5px 20px;
transition: .35s ease all;
font-size: 14px; }
.blog__category ul li a:hover {
background: #20376A;
color: #fff; }
.blog__category.fixed {
padding: 5px 0; }
.blog__category.fixed ul li a {
font-size: 12px;
padding: 3px 15px; }
.blog-section .sidebar {
margin-top: 13px; }
.blog-section .sidebar .card {
margin-bottom: 30px;
padding: 15px !important; }
.blog-section .sidebar .card .blog__category {
padding: 0;
border-radius: 10px;
padding-bottom: 20px; }
.blog-section .sidebar .blog__body a {
border-bottom: none;
padding: 10px; }
.blog-section .sidebar .blog__body a h5 {
font-size: 13px;
margin-bottom: 5px; }
.blog-section .sidebar .blog__body a:hover .text-muted {
color: rgba(255, 255, 255, 0.7) !important; }
.blog-section .sidebar h3 {
font-size: 18px;
padding: 15px 0px 10px;
position: relative; }
.blog-section .sidebar h3:after {
content: '';
position: absolute;
bottom: 0;
left: 10px;
width: 50px;
height: 3px;
background: #fd2e35; }
.blog-section .sidebar ul {
list-style: none;
margin: auto;
padding: 0; }
.blog-section .sidebar ul li {
display: block;
margin: 0; }
.blog-section .sidebar ul li a {
display: block;
border-radius: 0px;
border: none;
border-bottom: 1px solid #dee2e6;
padding: 10px 30px 10px 10px;
transition: .35s ease all;
font-size: 12px;
position: relative; }
.blog-section .sidebar ul li a span {
position: absolute;
right: 10px;
top: 10px;
text-align: right; }
.blog-section .sidebar ul li a:hover {
background: #20376A;
color: #fff; }
.blog-section .sidebar ul li:last-child a {
border-bottom: 0; }
.blog-section .blog__img {
position: relative; }
.blog-section .blog__img img {
width: 100%;
height: auto;
max-width: 650px; }
.blog-section .blog__img a {
position: absolute;
left: 20px;
top: 0px;
background: #fff;
padding: 10px;
z-index: 1;
border-radius: 0 0 4px 4px;
text-align: center;
font-size: 12px;
width: 65px;
display: none; }
.blog-section .blog__img a span {
display: inline-block;
width: 100%;
font-weight: 600;
font-size: 14px; }
.page .pagination .page-item {
margin: 5px; }
.page .pagination .page-item .page-link {
border: none;
background: none;
text-align: center;
width: 30px;
height: 30px;
border-radius: 100%;
color: #333; }
.page .pagination .page-item .page-link:focus {
outline: none;
box-shadow: none; }
.page .pagination .page-item .page-link:hover {
background: #f1f1f1; }
.page .pagination .page-item.active .page-link {
background: #fd2e35;
color: #fff; }
.page .pagination .page-item.disabled .page-link {
color: #ccc; }
.blog-details {
padding-top: 50px; }
.blog-details .bg-light {
background-color: #e5e5e5 !important;
color: #666;
padding: 5px 5px;
font-size: 12px;
margin-left: 5px; }
.blog-details .blog__img.ractangle {
position: relative;
overflow: hidden;
margin-bottom: 10px;
border-radius: 20px; }
.blog-details .blog__img.ractangle:after {
content: '';
display: block;
padding-bottom: 40%; }
.blog-details .blog__img.ractangle img {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: auto;
max-width: none; }
.blog-details .blog__body .blog__date {
font-size: 70%;
margin-bottom: 15px; }
.blog-details .blog__body .blog__date a {
color: #6c757d !important; }
.blog-details .blog__body h1 {
font-size: 44px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; }
.blog-details .blog__Table-cnt {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 70px;
padding-top: 20px; }
.blog-details .blog__Table-cnt h5 {
position: relative;
margin: 10px 0; }
.blog-details .blog__Table-cnt h5 span {
background: #f8f8f8;
padding-right: 10px;
position: relative;
z-index: 1; }
.blog-details .blog__Table-cnt h5:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background: #dee2e6; }
.blog-details .blog__Table-cnt ul {
list-style: none;
margin-bottom: 30px;
margin-left: 0;
padding-left: 0; }
.blog-details .blog__Table-cnt ul li a {
padding: 10px 0;
display: block;
border-bottom: 1px solid #dee2e6 !important;
position: relative; }
.blog-details .blog__Table-cnt ul li.active a {
color: #fd2e35; }
.blog-details .blog__Table-cnt ul li.active a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
border-bottom: 3px solid #fd2e35; }
.blog-details .sociallink li {
display: inline-block;
margin: 10px 10px 10px 0; }
.blog-details .sociallink li a {
display: block;
width: 40px;
height: 40px;
line-height: 20px;
text-align: center;
border: 1px solid #dee2e6 !important;
border-radius: 100%; }
.blog-details .sociallink li a:hover {
color: #fd2e35;
border: 1px solid #fd2e35 !important; }
.blog-details .blog__category {
background: transparent;
position: relative;
top: 0; }
.blog__content .section {
margin: 0; }
html {
scroll-behavior: smooth; }
/*=================About===================
===========================================*/
.about-stats {
text-align: center;
padding-bottom: 40px;
border-bottom: 1px solid; }
.about-stats .big {
border-bottom: none; }
.about-stats .title {
font-size: 14px;
text-transform: uppercase;
margin-top: 0px; }
.about-values .tir-image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; }
.about-values .tir-content {
display: block; }
.our-culture .card-columns {
column-count: 4;
column-gap: 2rem; }
.our-culture .card {
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
padding: 20px 15px; }
.our-culture .card p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px; }
.our-culture .card img {
border-radius: 4px; }
.about-culture .techicons li {
padding: 10px 20px;
border-radius: 4px;
background: #f4f4f4;
min-width: 190px; }
.about-culture .techicons li img {
width: 40px; }
.about-culture .techicons li .ti-name {
font-weight: 600; }
.care-points li {
font-weight: 600;
margin-bottom: 15px; }
.what-we-offer .item {
padding-top: 0px; }
/*# sourceMappingURL=style.css.map */