@import "font-awesome.css";
@import "font-awesome.min.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
--SecodsValue: 3s;
}
/* NO SELECT + HIGHLIGHT COLOR */
* {
user-select: none;
}
*::selection {
background: none;
}
*::-moz-selection {
background: none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
display: block;
}
body
{
line-height: 1;
}
ol, ul
{
list-style: none;
}
blockquote, q
{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: '';
content: none;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
*, *::after, *::before
{
box-sizing: border-box;
}
:after, :before
{
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
::selection
{
background:#076bdd; color:#fff;
}
::-moz-selection
{
background:#076bdd; color:#fff;
}
.scrollup
{
position: absolute;
z-index: 9999;
bottom: -50px;
right: -50px;
width: 50px;
height: 50px;
text-align: center;
display: none;
color: #000;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
background: #fff;
font-size: 10px;
padding-top: 15px;
}
.scrollup span
{
width: 2px;
height: 20px;
position: relative;
margin: auto;
display: block;
overflow: hidden;
}
.scrollup span:before
{
content: ' ';
-webkit-animation: elasticus 3s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: elasticus 3s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: elasticus 3s cubic-bezier(1, 0, 0, 1) infinite;
animation: elasticus 3s cubic-bezier(1, 0, 0, 1) infinite;
position: absolute;
top: 0px;
left: 0;
right:0;
margin:auto;
width: 3px;
height: 20px;
background: #000;
}
@keyframes elasticus
{
0%
{
top: 100%;
}
100%
{
top: -100%;
}
}
body
{
width:auto;
margin:0;
border:0;
font-family: 'Inter', sans-serif;
background:#fff;
}
img
{
max-width:100%;
vertical-align: middle;
border: 0;
}
.clearfix:after
{
display:block;
visibility:hidden;
overflow:hidden;
clear:both !important;
content:".";
line-height:0;
height:0;
}
.clearfix
{
display:inline-block;
}
html[xmlns] .clearfix
{
display:block;
}
*html .clearfix
{
height:1%;
}
:focus
{
outline:0;
}
.clear
{
clear:both !important;
}
.clear:after
{
display: block;
content: "";
clear: both;
}
.left
{
float:left;
}
.right
{
float:right;
}
p
{
color: #000;
line-height: 28px;
font-size: 15px;
font-weight: 400;
margin: 15px 0;
}
p strong
{
color: #636466;
font-weight: 700;
}
a
{
color:#0095da;
text-decoration:none;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
a:hover
{
color:#000;
}
h1, h2, h3
{
margin:15px 0;
}
ul.list
{
padding:0;
margin:15px 30px;
list-style:none;
}
ul.list li
{
color: #000;
line-height: 28px;
font-size: 16px;
font-weight: 400;
padding-left: 20px;
position: relative;
}
ul.list li:before
{
content: " ";
position: absolute;
top: 10px;
left: 0;
width: 8px;
height: 8px;
border: solid 2px #0095da;
border-radius: 50%;
}
ul.list li:after
{
content: " ";
position: absolute;
top: 13px;
left: 6px;
width: 8px;
height: 2px;
background: #272727;
border-radius: 30px;
z-index: -8;
}
ul.list li strong
{
color:#000;
}
ul.list li span
{
color:#2d3091;
}
.wow
{
visibility: hidden;
}
.wrapper
{
overflow: hidden;
position:relative;
}
.section
{
}
#navbar
{
position:fixed;
top:0;
left:0;
right:0;
transition:top 0.8s;
z-index:99999999;
}
.header
{
position:absolute;
top:0;
left:0;
right:0;
z-index:999;
padding:15px 50px;
}
.header h1, .nav__content h1
{
margin: 0 0;
position: relative;
}
.header h1 img, .nav__content h1 img
{
width:132px;
height:60px;
}
.getaquote
{
margin: 5px 30px 5px 0;
}
.getaquote a
{
display: block;
background: #0095da;
text-align: center;
padding: 16px 24px;
font-size: 17px;
font-weight: 500;
z-index: 999;
position: relative;
color: #000;
overflow: hidden;
}
.getaquote a:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background: #fff;
z-index: -8;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.getaquote a:hover:before
{
background: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.getaquote a:after
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 2px;
background: #fff;
z-index: -8;
}
.getaquote a:hover
{
}
.headercontact
{
margin: 5px 30px 5px 0;
}
.headercontact a
{
color: #000;
display: block;
font-size: 16px;
font-weight: 400;
margin: 6px 0;
position: relative;
padding-right: 25px;
text-align:right;
}
.headercontact a:before
{
content: " ";
background: url(../images/mobile.svg) center center no-repeat;
background-size: contain;
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
}
.headercontact a:nth-of-type(2):before
{
background: url(../images/email.svg) center center no-repeat;
background-size: contain;
}
.headercontact a:hover
{
text-decoration:underline;
}
.menu-icon
{
height: 30px;
width: 30px;
position: fixed;
z-index: 9999999999;
top: 36px;
right: 25px;
cursor: pointer;
}
.menu-icon__line
{
height: 2px;
width: 30px;
display: block;
background-color: #000;
margin-bottom: 4px;
transition: transform 0.2s ease, background-color 0.5s ease;
}
.menu-icon__line-left
{
width: 15px;
}
.menu-icon__line-right
{
width: 15px;
float: right;
}
.nav
{
position: fixed;
z-index: 999999999;
}
.nav:before
{
content: "";
position: fixed;
width: 65%;
left:0;
height: 100vh;
background: #fff;
z-index: -1;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transform: translateX(200%) translateY(0%);
transition-duration:2s;
}
.nav:after
{
content: "";
position: fixed;
width: 35%;
right:0;
height: 100vh;
background: #0095da;
z-index: -1;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transform: translateX(100%) translateY(0%);
}
.nav:after {
transition-delay: 3.1s;
}
.nav:before {
transition-delay: 1.6s;
}
.nav__content {
position: fixed;
/*top: 50%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);*/
width: 65%;
cursor: pointer;
padding:50px;
visibility: hidden;
}
.nav__content h1
{
opacity: 0;
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
margin-bottom:50px;
}
.nav__list
{
float:left;
}
.nav__list:first-of-type
{
margin-right:50px;
}
.nav__list-item
{
position: relative;
display: block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.nav__list-item a
{
font-size: 46px;
font-weight: 800;
color: #272727;
display: block;
margin-bottom: 15px;
overflow:hidden;
position:relative;
}
.nav__list-item a small
{
font-size: 24px;
line-height: 26px;
font-weight: 600;
color: #272727;
display: block;
overflow:hidden;
position:relative;
}
.nav__list-item a span
{
display: block;
-webkit-transform:translateY(0px);
transform:translateY(0px);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.nav__list-item a:hover span
{
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
.nav__list-item a:before
{
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
content: attr(data-hover);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font-size: 46px;
font-weight: 800;
color: #0095da;
}
.nav__list-item a small:before
{
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
content: attr(data-hover);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font-size: 24px;
font-weight: 600;
color: #0095da;
}
.nav__list-item a:hover:before, .nav__list-item a small:hover:before
{
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.navdetails
{
width:35%;
padding:50px;
position: fixed;
right:0;
visibility:hidden;
}
.navcontact
{
}
.navcontact a, .navcontact p
{
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: 500;
margin: 0 0 30px 0;
position: relative;
padding-left: 25px;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.navcontact a:after
{
content: " ";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #272727;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.navcontact a:hover:after
{
width:100%;
}
.navcontact a
{
line-height:20px;
border-bottom:solid 2px #fff;
padding-bottom:2px;
}
.m46{
padding-left: 20px;
}
.navcontact a small
{
display:block;
font-size: 16px;
font-weight: 400;
}
.navcontact a:before, .navcontact p:before
{
content: " ";
background: url(../images/mobile-white.svg) center center no-repeat;
background-size: contain;
position: absolute;
top: -1px;
left: 0;
width: 20px;
height: 20px;
}
.navcontact a:nth-of-type(2):before
{
background: url(../images/email-white.svg) center center no-repeat;
background-size: contain;
top: 5px;
}
.navcontact a:hover
{
}
.navcontact p:before
{
background: url(../images/location-white.svg) center center no-repeat;
background-size: contain;
top: 7px;
}
.navdetails a.linkbutton
{
background: #fff;
color: #fff;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.navdetails a.linkbutton:before
{
background: #0095da;
}
.navdetails a.linkbutton:after
{
background: #0095da;
}
.nav-social-icon
{
position: absolute;
bottom: 30px;
right: 10px;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.nav-social-icon a
{
display: block;
font-size: 22px;
color: #fff;
margin-top: 15px;
margin-right: 10px;
text-align: center;
}
.nav-social-icon a:hover
{
}
.textrotate
{
width:130px;
margin-bottom:30px;
-webkit-animation: rotating 6s linear infinite;
-moz-animation: rotating 6s linear infinite;
-ms-animation: rotating 6s linear infinite;
-o-animation: rotating 6s linear infinite;
animation: rotating 6s linear infinite;
}
.textrotate img
{
-webkit-transform: scale(0);
transform: scale(0);
opacity:0;
-webkit-transition: opacity 0.2s ease, transform 0.3s ease;
transition: opacity 0.2s ease, transform 0.3s ease;
}
body.nav-active .textrotate img
{
opacity:1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
transition-delay: 0.6s;
}
@-webkit-keyframes rotating
{
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating
{
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
body.nav-active .menu-icon__line {
background-color: #fff;
transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav, body.nav-active .nav__content, body.nav-active .navdetails
{
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
transition-delay: 0s;
}
body.nav-active .nav:before {
transition-delay: 0.9s;
transition:2s;
}
body.nav-active .nav__content h1 {
opacity: 1;
-webkit-transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 1.9s;
}
body.nav-active .nav__list-item, body.nav-active .navcontact a, body.nav-active .navcontact p, body.nav-active .navdetails a.linkbutton, body.nav-active .nav-social-icon {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
body:not(.nav-active) .nav__list-item, body:not(.nav-active) .nav__content h1,
body:not(.nav-active) .textrotate img, body:not(.nav-active) .nav-social-icon, body:not(.nav-active) .navdetails a.linkbutton,
body:not(.nav-active) .navcontact p, body:not(.nav-active) .navcontact a
{
visibility: visible;
-moz-animation: cssAnimation 0s ease-in var(--SecodsValue) forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in var(--SecodsValue) forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in var(--SecodsValue) forwards;
/* Opera */
animation: cssAnimation 0s ease-in var(--SecodsValue) forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
/*----Nav-Left-----*/
.nav__list-item:first-of-type
{
transition-delay: 1.5s;
}
.nav__list-item:nth-of-type(1)
{
transition-delay: 1.4s;
}
.nav__list-item:nth-of-type(2)
{
transition-delay: 1.3s;
}
.nav__list-item:nth-of-type(3)
{
transition-delay: 1.2s;
}
.nav__list-item:nth-of-type(4)
{
transition-delay: 1.1s;
}
.nav__list-item:nth-of-type(5)
{
transition-delay: 1.0s;
}
.nav__list-item:nth-of-type(6)
{
transition-delay: 0.9s;
}
.nav__list-item:nth-of-type(7)
{
transition-delay: 0.8s;
}
.nav__list-item:nth-of-type(8)
{
transition-delay: 0.7s;
}
.nav__list-item:nth-of-type(9)
{
transition-delay: 0.6s;
}
.nav__list-item:nth-of-type(10)
{
transition-delay: 0.5s;
}
/*-----Nav-right------*/
.navcontact a:first-of-type
{
transition-delay: 2.6s;
}
.navcontact a:nth-of-type(2)
{
transition-delay: 2.7s;
}
.navcontact p
{
transition-delay: 2.8s;
}
.navdetails a.linkbutton
{
transition-delay: 2.9s;
}
.nav-social-icon
{
transition-delay: 3.0s;
}
.textrotate img
{
transition-delay: 2.5s;
}
.nav__content h1
{
transition-delay: 1.6s;
}
/*body.nav-active .nav__list-item:first-of-type, body.nav-active .navcontact a:first-of-type
{
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-of-type(1), body.nav-active .navcontact a:nth-of-type(2)
{
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-of-type(2), body.nav-active .navcontact p
{
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-of-type(3), body.nav-active .navdetails a.linkbutton
{
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-of-type(4), body.nav-active .nav-social-icon
{
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-of-type(5)
{
transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-of-type(6)
{
transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-of-type(7)
{
transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-of-type(8)
{
transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-of-type(9)
{
transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-of-type(10)
{
transition-delay: 1.5s;
}*/
/*-----nav-left-------*/
body.nav-active .nav__list-item:first-of-type
{
transition-delay: 1.8s;
}
body.nav-active .nav__list-item:nth-of-type(1)
{
transition-delay: 1.9s;
}
body.nav-active .nav__list-item:nth-of-type(2)
{
transition-delay: 2.0s;
}
body.nav-active .nav__list-item:nth-of-type(3)
{
transition-delay: 2.1s;
}
body.nav-active .nav__list-item:nth-of-type(4)
{
transition-delay: 2.2s;
}
body.nav-active .nav__list-item:nth-of-type(5)
{
transition-delay: 2.3s;
}
body.nav-active .nav__list-item:nth-of-type(6)
{
transition-delay: 2.4s;
}
body.nav-active .nav__list-item:nth-of-type(7)
{
transition-delay: 2.5s;
}
body.nav-active .nav__list-item:nth-of-type(8)
{
transition-delay: 2.6s;
}
body.nav-active .nav__list-item:nth-of-type(9)
{
transition-delay: 2.7s;
}
body.nav-active .nav__list-item:nth-of-type(10)
{
transition-delay: 2.8s;
}
/*----nav-right-----*/
body.nav-active .navcontact a:first-of-type
{
transition-delay: 0.5s;
}
body.nav-active .navcontact a:nth-of-type(2)
{
transition-delay: 0.6s;
}
body.nav-active .navcontact p
{
transition-delay: 0.7s;
}
body.nav-active .navdetails a.linkbutton
{
transition-delay: 0.8s;
}
body.nav-active .nav-social-icon
{
transition-delay: 0.9s;
}
.banner
{
background: url(../images/bg.jpg) center center no-repeat;
background-size: cover;
position: relative;
height: 100vh;
width: 100%;
display: flex;
text-align: left;
padding: 0 50px;
}
.fullscreen-bg
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
background:url(../images/Cloud-Computing.gif) center center no-repeat;
background-size:cover;
display:none;
}
.banner:after
{
content:" ";
background:url(../images/bg.svg) center center no-repeat;
background-size:cover;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.roundanimation
{
position: absolute;
top: -50%;
bottom: 0;
left: -100%;
right: 0;
width: 200%;
height: 200%;
z-index:9;
}
.roundanimation svg
{
width:100%;
height:100%;
}
.banner > div
{
vertical-align: middle;
display: table-cell;
position: relative;
width: 50%;
z-index:99;
margin: auto 0;
}
.banner h2
{
color: #272727;
font-size: 46px;
font-weight: 700;
}
.banner h2 span
{
color: #0095da;
}
.banner h3
{
color: #000;
font-size: 24px;
line-height: 30px;
font-weight: 500;
}
.banner a, .intro aside a, .homeservices aside a, .hometechnology aside a, a.linkbutton, .enquirycontainer aside a, .footer-social-icon a, .contact-social-icon a, .services ul li a figcaption span
{
display: inline-block;
background: #0095da;
text-align: center;
padding: 18px 26px;
font-size: 17px;
font-weight: 500;
z-index: 999;
position: relative;
color: #000;
overflow: hidden;
margin: 15px 0;
}
.banner a:before, .intro aside a:before, .homeservices aside a:before, .hometechnology aside a:before, a.linkbutton:before, .enquirycontainer aside a:before, .footer-social-icon a:before, .contact-social-icon a:before, .services ul li a figcaption span:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background: #fff;
z-index: -8;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.banner a:hover:before, .intro aside a:hover:before, .homeservices aside a:hover:before, .hometechnology aside a:hover:before, a.linkbutton:hover:before, .enquirycontainer aside a:hover:before, .footer-social-icon a:hover:before, .contact-social-icon a:hover:before, .services ul li a figcaption span:hover:before
{
background: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.banner a:after, .intro aside a:after, .homeservices aside a:after, .hometechnology aside a:after, a.linkbutton:after, .enquirycontainer aside a:after, .footer-social-icon a:after, .contact-social-icon a:after, .services ul li a figcaption span:after
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 2px;
background: #fff;
z-index: -8;
}
.banner a:hover, .intro aside a:hover, .homeservices aside a:hover, .hometechnology aside a:hover, a.linkbutton:hover, .enquirycontainer aside a:hover, .footer-social-icon a:hover, .contact-social-icon a:hover, .services ul li a figcaption span:hover
{
}
.home
{
z-index:999;
position:relative;
}
.intro
{
margin-right:50px;
padding:35px 50px;
position:relative;
}
.dest{
color: #000;
font-size: 44px;
font-weight: 500;
}
.intro figure
{
width: 46%;
margin: 15px 0;
position: relative;
margin-left:-50px;
}
.intro figure:before, .aboutintro figure:before, .about-vision-mission article figure:before, .start-a-project fieldset:after
{
content: " ";
position: absolute;
bottom: -75px;
right: -75px;
width: 150px;
height: 150px;
background: rgba(0,149,218);
z-index: 9;
mix-blend-mode: multiply;
}
.intro figure:after
{
content: " ";
background: url(../images/Cloud.svg) center center no-repeat;
position: absolute;
background-size: contain;
top: -20%;
left: 30%;
width: 200%;
height: 150%;
}
.intro figure h1
{
position: absolute;
top: 50px;
left: 35%;
font-size: 76px;
margin: 0;
width: 100%;
font-weight: 700;
z-index: 99;
}
.intro aside
{
width:40%;
/*margin:120px 0 0 0;*/
position: relative;
z-index: 99;
}
.intro aside h2, .homeservices aside h2, .hometechnology h2, .homeportfolio h2, .homecontact fieldset h2, .enquirycontainer h2, .banner-heading h2, .banner-centre h2, .banner-portfolio h2, .image h2, .about-vision-mission article aside h2, .services-content h2, .career h2, .career-registration h2, .contactus fieldset h2, .portfolio-application article h2, .portfolio-mobile-apps article h2
{
color:#0095da;
font-size: 24px;
font-weight: 700;
}
.fifthdecember{
font-size:27px!important;
}
.fifthdecemb{
font-size:28px!important;
}
.itgeneration{
font-size: 22px;
color: #000;
font-weight: 600;
}
.decseventeen{
color: #000;
font-weight: 700;
font-size: 18px;
}
.jansix{
font-weight: 700;
color: #0095da;
font-size: 24px;
}
.mediacompress{
color: #0095da!important;
}
* {
box-sizing: border-box;
}
.decfifth{
font-size:25px!important;
}
.decseven{
padding-bottom: 120px!important;
}
.health_care{
width:50%;
}
.health_care1{
width:50%;
}
.decemberseven{
padding:75px 100px;
}
.secondrow{
padding-top: 75px;
}
.secrow{
padding-top: 130px
}
.secrows{
padding-top: 200px
}
.faq {
padding: 20px ;
width: 60%;
min-width:450px;
margin: auto;
position: relative;
height: auto;
}
.faq-container {
width: 100%;
height: 100%;
}
.faq-label {
cursor: pointer;
width: 100%;
padding: 10px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 19px;
background: #d0edf0;
box-shadow: 5px 5px 10px #b7d1d3,
-5px -5px 10px #e9ffff;
}
.faq-label-text {
color: #365A5E;
}
.faq-label-icon {
padding: 2px 3px;
background: #d0edf0;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
.material-icons {
color: #365A5E;
transition: 0.3s ease;
}
.faq-answer {
transition: 0.3s ease;
margin-top: 15px;
height: 0;
border-radius: 6px;
color: rgba(127, 121, 121, 1);
overflow: hidden;
}
.faq-answer-content {
padding: 10px 0 10px 15px;
}
.thirddec{
font-weight: 700;
font-size: 28px;
}
.actives {
background: #FFFFFF;
border: 1px solid #C7C4C4;
height: auto;
margin-bottom: 25px;
}
.questionanswer{
font-size:16px;
}
.rotate{
transform: rotate(180deg)
}
.global-label{
color:#365A5E;
width:100%;
height:35px;
border-bottom: solid 2px #C4C1C1;
margin-bottom: 35px;
}
.global-label-text{
font-size:18px;
font-weight:700;
color:#365A5E;
}
.score{
display:none;
color:#00ff2a;
padding:15px;
width:45px;
height:25px;
margin: 45px auto;
text-align:center;
padding: 5px;
justify-content:center;
align-items:center;
border-radius:5px;
background:white;
}
.about-me{
border-radius:5px;
width:300px;
margin:auto;
color:white;
text-align:center;
background:#ffff;
padding:7px 18px;
}
.intro aside h3, .homeservices aside h3, .hometechnology h3, .homeportfolio h3, .homecontact fieldset h3, .services-content h3
{
color:#272727;
font-size: 21px;
line-height:38px;
font-weight:500;
}
.webapplications{
padding: 0 50px
}
.image
{
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
height:660px;
padding: 50px;
display: flex;
align-items: center;
}
.image h2
{
color: #fff;
width: 60%;
line-height: 50px;
}
.homeservices, .hometechnology
{
margin:50px 50px;
position:relative;
background:#fff;
}
.sidebar__inner
{
}
.homeservices aside, .hometechnology aside
{
width:35%;
padding-right:50px;
}
.homeservices article
{
width:65%;
}
.homeservices article ul
{
padding: 0;
margin: 0;
}
.homeservices article ul li
{
width: 33.333333%;
float: left;
}
.homeservices article ul li a
{
display: flex;
margin: 15px;
padding:0px 10px;
text-align: center;
background:#e1eff4;
position:relative;
z-index:9;
height:260px;
align-items: center;
overflow:hidden;
}
.homeservices article ul li a:hover
{
background:#0095da;
}
.homeservices article ul li a figcaption
{
display: block;
width: 100%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transform: translateY(30px);
transform: translateY(30px);
z-index:999;
}
.homeservices article ul li a:hover figcaption
{
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.homeservices article ul li a:after
{
content:" ";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
margin:0 2px;
z-index:-8;
}
.homeservices article ul li a:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background: none;
z-index: -8;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.homeservices article ul li a:hover:before
{
background: #000;
-webkit-transform: rotate(-75deg);
transform: rotate(-75deg);
}
.homeservices article ul li a img
{
height: 86px;
margin:15px 0;
}
.homeservices article ul li a h3
{
color: #000;
font-size: 20px;
font-weight: 700;
}
.homeservices article ul li a p
{
color: #000;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
opacity:0;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.homeservices article ul li a:hover p
{
opacity:0.6;
}
/*.homeservices article ul li a .homeservices-image
{
background-position: center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
opacity:0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:0 2px;
}
.homeservices article ul li a:hover .homeservices-image
{
opacity:1;
}*/
.homeportfolio
{
padding:35px 50px 0 50px;
background: #636466;
}
.homeportfolio a.linkbutton
{
color: #fff;
}
.homeportfolio a.linkbutton:before
{
background: #636466;
}
.homeportfolio a.linkbutton:after
{
background: #636466;
}
.homeportfolio a.linkbutton:hover:before
{
background: #000;
}
.homeportfolio aside
{
width: 60%;
}
.homeportfolio h3
{
color:#fff;
}
.homeportfolio ul
{
padding: 0;
margin: 0px -50px -50px -50px;
}
.homeportfolio ul li
{
float: left;
width: 50%;
}
.homeportfolio ul li a
{
margin: 50px;
display: block;
position: relative;
}
.homeportfolio ul li a figure
{
overflow:hidden;
}
.homeportfolio ul li a figure img
{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.homeportfolio ul li a:hover figure img
{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.ban{
font-size: 18px!important;
}
}
.homeportfolio ul li a figure:after
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.2);
}
.homeportfolio ul li a:hover figure:after
{
background: rgba(0,0,0,0.5);
}
.homeportfolio ul li a figcaption
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
-webkit-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.homeportfolio ul li a:hover figcaption
{
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.homeportfolio ul li a figcaption h4, .portfolio ul li a figure h4
{
color: #fff;
font-size: 16px;
font-weight: 400;
background: #272727;
display: inline-block;
padding: 5px 5px 5px 20px;
position: relative;
left: -20px;
}
.homeportfolio ul li a figcaption h4:before, .portfolio ul li a figure h4:before
{
content: " ";
position: absolute;
top: 0;
right: -12px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 12px solid #272727;
}
.homeportfolio ul li a figcaption h4:after, .portfolio ul li a figure h4:after
{
content: " ";
position: absolute;
top: 12px;
right:100%;
width: 0;
height: 2px;
background: #0095da;
}
.homeportfolio ul li a:hover figcaption h4:after, .portfolio ul li a:hover figure h4:after
{
width: 150px;
}
.homeportfolio ul li a figcaption h3, .portfolio ul li a figcaption h3
{
color: #fff;
font-size: 24px;
font-weight: 700;
text-transform: none;
margin: 0;
}
.homeportfolio ul li a figcaption p
{
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin: 0;
opacity:0;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.homeportfolio ul li a:hover figcaption p
{
opacity:0.6;
}
.hometechnology
{
}
.hometechnology article
{
width:65%;
}
.hometechnology article ul
{
padding:0;
margin:0;
}
.hometechnology article ul li
{
width: 20%;
float: left;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.hometechnology article ul li figure
{
border-radius:50%;
overflow:hidden;
margin:10px;
position:relative;
background:#fff;
border:solid 1px #EAEAEA;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.hometechnology article ul li:hover figure
{
box-shadow:0px 0px 26px rgba(0,0,0,0.1);
}
.hometechnology article ul li figure img
{
-webkit-transform:scale(0.9);
transform:scale(0.9);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.hometechnology article ul li:hover figure img
{
-webkit-transform:scale(0);
transform:scale(0);
}
.hometechnology article ul li figure figcaption
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: #0095da;
text-align: center;
display: flex;
justify-content: center;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transform:translateY(102%);
transform:translateY(102%);
}
.hometechnology article ul li:hover figure figcaption
{
-webkit-transform:translateY(-0%);
transform:translateY(-0%);
}
.hometechnology article ul li figure figcaption p
{
color: #fff;
display: flex;
align-items: center;
font-size:16px;
opacity:0;
-webkit-transform:translateY(-20px);
transform:translateY(-20px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.hometechnology article ul li:hover figure figcaption p
{
opacity:1;
-webkit-transform:translateY(-0px);
transform:translateY(-0px);
transition-delay:0.5s;
}
.homecontact
{
}
.homecontact figure, .career-registration figure
{
}
.homecontact fieldset, .career-registration fieldset
{
background: #0095da;
padding:85px 200px;
margin:0 100px;
position:relative;
top:-100px;
}
.homecontact fieldset:before, .career-registration fieldset:before, .start-a-project fieldset:before
{
content: " ";
position: absolute;
top: -15px;
left: -15px;
width: 0;
height: 0;
border-top: 100px solid #272727;
border-right: 100px solid transparent;
}
.homecontact fieldset h3, .homecontact fieldset h2
{
color:#fff;
margin-left:10px;
}
.ml10
{
position: relative;
font-weight: 900;
font-size: 4em;
}
.ml10 .text-wrapper
{
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml10 .letter
{
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
.ml9
{
position: relative;
font-weight: 200;
font-size: 4em;
}
.ml9 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml9 .letter {
transform-origin: 50% 100%;
display: inline-block;
line-height: 1em;
}
.homecontact fieldset form, .career-registration fieldset form
{
margin-top:20px;
}
.homecontact fieldset input::-webkit-input-placeholder,
.homecontact fieldset textarea::-webkit-input-placeholder,
.career-registration fieldset input::-webkit-input-placeholder,
.career-registration fieldset textarea::-webkit-input-placeholder,
.contactus fieldset input::-webkit-input-placeholder,
.contactus fieldset textarea::-webkit-input-placeholder,
.start-a-project fieldset input::-webkit-input-placeholder,
.start-a-project fieldset textarea::-webkit-input-placeholder
{
color: #fff;
font-family: 'Inter', sans-serif;
font-weight:400;
font-size:16px;
}
.homecontact fieldset input::-moz-placeholder,
.homecontact fieldset textarea::-moz-placeholder,
.career-registration fieldset input::-moz-placeholder,
.career-registration fieldset textarea::-moz-placeholder,
.contactus fieldset input::-moz-placeholder,
.contactus fieldset textarea::-moz-placeholder,
.start-a-project fieldset input::-moz-placeholder,
.start-a-project fieldset textarea::-moz-placeholder
{
color: #fff;
font-family: 'Inter', sans-serif;
font-weight:400;
font-size:16px;
}
.homecontact fieldset input:-ms-input-placeholder,
.homecontact fieldset textarea:-ms-input-placeholder,
.career-registration fieldset input:-ms-input-placeholder,
.career-registration fieldset textarea:-ms-input-placeholder,
.contactus fieldset input:-ms-input-placeholder,
.contactus fieldset textarea:-ms-input-placeholder,
.start-a-project fieldset input:-ms-input-placeholder,
.start-a-project fieldset textarea:-ms-input-placeholder
{
color: #fff;
font-family: 'Inter', sans-serif;
font-weight:400;
font-size:16px;
}
.homecontact fieldset input:-moz-placeholder,
.homecontact fieldset textarea:-moz-placeholder,
.career-registration fieldset input:-moz-placeholder,
.career-registration fieldset textarea:-moz-placeholder,
.contactus fieldset input:-moz-placeholder,
.contactus fieldset textarea:-moz-placeholder,
.start-a-project fieldset input:-moz-placeholder,
.start-a-project fieldset textarea:-moz-placeholder
{
color: #fff;
font-family: 'Inter', sans-serif;
font-weight:400;
font-size:16px;
}
.homecontact fieldset aside, .career-registration fieldset aside, .contactus fieldset aside, .start-a-project fieldset aside
{
width: 50%;
}
.homecontact fieldset label, .career-registration fieldset label, .contactus fieldset label, .start-a-project fieldset label
{
padding:10px;
display:block;
}
.homecontact fieldset input[type=text], .homecontact fieldset select, .homecontact fieldset input[type=email], .homecontact fieldset input[type=number], .career-registration fieldset input[type=text], .career-registration fieldset input[type=email], .career-registration fieldset input[type=number], .contactus fieldset input[type=text], .contactus fieldset input[type=email], .contactus fieldset input[type=number], .start-a-project fieldset input[type=text], .start-a-project fieldset input[type=email], .start-a-project fieldset input[type=number]
{
padding: 16px 20px;
width: 100%;
background: #0071a5;
border: 1px solid #0071a5;
outline: 0px;
position: relative;
color: #fff;
font-size: 16px;
font-family: 'Inter', sans-serif;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.homecontact fieldset input[type=text]:hover, .homecontact fieldset input[type=email]:hover, .homecontact fieldset input[type=number]:hover, .homecontact fieldset textarea:hover, .career-registration fieldset input[type=text]:hover, .career-registration fieldset input[type=email]:hover, .career-registration fieldset input[type=number]:hover, .career-registration fieldset textarea:hover, .contactus fieldset input[type=text]:hover, .contactus fieldset input[type=email]:hover, .contactus fieldset input[type=number]:hover, .contactus fieldset textarea:hover, .start-a-project fieldset input[type=text]:hover, .start-a-project fieldset input[type=email]:hover, .start-a-project fieldset input[type=number]:hover, .start-a-project fieldset textarea:hover
{
border: 1px solid #38c0ff;
}
.career-registration fieldset input[type=text]:focus, .career-registration fieldset input[type=email]:focus, .career-registration fieldset input[type=number]:focus, .career-registration fieldset textarea:focus, .contactus fieldset input[type=text]:focus, .contactus fieldset input[type=email]:focus, .contactus fieldset input[type=number]:focus, .contactus fieldset textarea:focus, .start-a-project fieldset input[type=text]:focus, .start-a-project fieldset input[type=email]:focus, .start-a-project fieldset input[type=number]:focus, .start-a-project fieldset textarea:focus
{
box-shadow: 0px 0px 1px 3px #c0dce9;
}
.homecontact fieldset textarea,
.career-registration fieldset textarea,
.contactus fieldset textarea,
.start-a-project fieldset textarea
{
padding: 16px 20px;
height:150px;
width: 100%;
background: #0071a5;
border: 1px solid #0071a5;
outline: 0px;
position: relative;
color: #fff;
font-size: 16px;
font-family: 'Inter', sans-serif;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.homecontact fieldset input[type=submit],
.career-registration fieldset input[type=submit],
.contactus fieldset input[type=submit],
.start-a-project fieldset input[type=submit]
{
border: solid 1px #fff;
padding: 16px 30px;
outline: 0;
color: #fff;
font-weight: 500;
cursor: pointer;
font-size: 15px;
font-family: 'Inter', sans-serif;
border-radius: 3px;
background: none;
text-transform: uppercase;
letter-spacing: 1px;
margin:15px 0;
}
.enquirycontainer
{
position: relative;
padding: 10px 50px;
background: #EAEAEA;
box-shadow: -4px -2px 25px #9f9c9c;
border-radius: 25px;
margin: 0px 45px 15px 40px;
}
.enquirycontainer h2:before {
content: " ";
position: absolute;
top: -40px;
left: -90px;
width: 178px;
height: 178px;
border: 2px #0095da;
border-style: dotted;
border-radius: 50%;
}
.enquirycontainer h2
{
width:50%;
}
.enquirycontainer aside
{
width:40%;
}
.enquirycontainer aside a:before
{
background: #EAEAEA;
}
.enquirycontainer aside a:after
{
background: #EAEAEA;
}
.footer
{
background: #272727;
padding:50px;
position:relative;
margin:0 50px 50px 0;
}
.footer:before
{
content: " ";
background: url(../images/wave.png) center center;
background-size: contain;
position: absolute;
top: 70px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
-webkit-animation: wave 5s ease-in infinite;
-moz-animation: wave 5s ease-in infinite;
-ms-animation: wave 5s ease-in infinite;
-o-animation: wave 5s ease-in infinite;
animation: wave 5s ease-in infinite;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: -8;
opacity: 0.3;
}
@keyframes wave
{
0%
{
background-position-x: 0px;
}
50%
{
background-position-x: -100%;
}
100%
{
background-position-x: 0px;
}
}
@-webkit-keyframes wave
{
0%
{
background-position-x: 0px;
}
50%
{
background-position-x: -100%;
}
100%
{
background-position-x: 0px;
}
}
.footer:after
{
content: " ";
position: absolute;
z-index: -8;
top: -50px;
right: -50px;
width: 0;
height: 0;
border-bottom: 800px solid #0095da;
border-left: 800px solid transparent;
}
.footer-top
{
padding-bottom:30px;
border-bottom:dashed 1px #383838;
margin-bottom:30px;
}
.footer-top a img
{
width:132px;
height:60px;
}
.footer h3
{
color: #fff;
font-weight: 600;
font-size: 18px;
}
.footer-social-icon
{
padding: 5px 0;
}
.footer-social-icon a
{
display: block;
float: left;
color: #fff;
font-size: 22px;
text-align: center;
padding: 15px 0;
margin: 0 0 0 6px;
background: #fff;
width: 50px;
height: 50px;
}
.footer-social-icon a:hover
{
}
.footer-social-icon a:after
{
background: #272727;
}
.footer-social-icon a:before, .contact-social-icon a:before
{
top: 15px;
right: -12px;
width: 150%;
height: 20px;
background: #272727;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.footer article
{
}
.footer article aside
{
margin-right:10%;
}
.footer article aside:nth-of-type(3)
{
margin-right:0;
}
.footer article aside:last-of-type
{
margin-right:50px;
}
.footer article aside ul
{
padding:0;
margin:0;
}
.footer article aside ul li
{
}
.footer article aside ul li a
{
display: block;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height:30px;
position:relative;
}
.footer article aside ul li a i
{
width: 16px;
text-align: center;
display: inline-block;
}
.footer article aside ul li a:hover
{
}
.footer article aside ul li a:before
{
content: " ";
position: absolute;
top: 14px;
left: 0;
background: #0095da;
width: 8px;
height: 2px;
-webkit-transform: translateX(-25px);
transform: translateX(-25px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
opacity:0;
}
.footer article aside ul li a:hover:before
{
opacity:1;
-webkit-transform: translateX(-12px);
transform: translateX(-12px);
}
.footer p
{
color: #fff;
font-size: 16px;
font-weight: 400;
line-height:30px;
}
.footer p strong
{
color: #BCBCBC;
font-weight: 600;
display:block;
}
.footer-bottom
{
padding-top: 50px;
}
.footer-bottom a
{
color: #fff;
font-size: 16px;
font-weight: 400;
text-decoration:underline;
margin-left:12px;
}
.footer-bottom a:hover
{
text-decoration:none;
}
#pointer-dot
{
left: 0;
top: 0;
width: 0;
height: 0;
border: 3px solid #0095da;
position: fixed;
border-radius: 4px;
z-index: 9999999999;
pointer-events: none;
transition: border-color 0.5s;
}
#pointer-ring
{
left: 0;
top: 0;
width: 0;
height: 0;
padding: 15px;
border: 1px solid #272727;
position: fixed;
border-radius: 100px;
z-index: 9999999999;
pointer-events: none;
}
.banner-heading
{
background-size: cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
text-align: left;
margin-top:120px;
}
.banner-heading article
{
position:relative;
}
.banner-portfolio, .banner-centre
{
background-size: cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
text-align: left;
padding: 0 50px;
margin-top: 100px;
margin-bottom: 0px;
display: flex;
align-items: center;
}
.banner-centre
{
text-align: center;
}
.banner-centre aside
{
width:100%;
}
.banner-portfolio aside
{
}
.banner-heading h1
{
width:65%;
background:#fff;
padding:35px 50px 0 50px;
margin-bottom: 0;
z-index:999;
}
.banner-heading h1, .banner-centre h1, .banner-portfolio h1
{
color: #000;
line-height: 52px;
position: relative;
padding-top: 30px;
font-weight: 600;
font-size: 30px;
}
.banner-portfolio h1
{
padding-top: 0px;
}
.banner-heading h1 small
{
color: #0095da;
display: block;
/* text-transform: uppercase;*/
font-size: 40px!important;
font-weight: 700;
}
.decnineteenth{
color: #000;
font-weight: 600;
font-size: 45px;
}
.banner-heading h1:before
{
content: " ";
position: absolute;
top: -20px;
left: -0px;
width: 0;
height: 0;
border-top: 50px solid #636466;
border-left: 50px solid transparent;
z-index:9999;
}
.banner-heading h1:after
{
content: " ";
position: absolute;
bottom: -75px;
left: 0px;
right: 0px;
height: 75px;
background: #fff;
z-index: 9999;
}
.banner-heading figure
{
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 450px;
}
.banner-heading nav
{
position: absolute;
right: 50px;
bottom: 30px;
}
.banner-heading nav ul, .banner-centre aside ul, .banner-portfolio aside ul
{
padding:0;
margin:0;
}
.banner-heading nav ul li, .banner-centre aside ul li, .banner-portfolio aside ul li
{
margin-right: 12px;
display: inline-block;
color: #000;
font-size: 16px;
font-weight: 400;
}
.banner-heading nav ul li a, .banner-centre aside ul li a, .banner-portfolio aside ul li a
{
color: #000;
font-size: 16px;
font-weight: 400;
padding: 3px 5px;
display: block;
background: #0095da;
position:relative;
color: #fff;
}
.banner-heading nav ul li a:after, .banner-centre aside ul li a:after, .banner-portfolio aside ul li a:after
{
content: " ";
position: absolute;
top: 0;
right: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid #0095da;
}
.container
{
padding: 35px 50px;
}
.aboutintro
{
}
.aboutintro aside
{
width:50%;
}
.aboutintro figure
{
width:45%;
position:relative;
margin-top:150px;
}
.aboutintro figure:before
{
left: -75px;
right: auto;
z-index: 9999;
}
.aboutservices
{
padding:0 50px;
margin-top:-150px;
}
.aboutservices aside
{
width:50%;
padding:85px 100px;
background:#0095da;
}
.aboutservices aside:nth-of-type(2)
{
margin-top:150px;
background:#272727;
}
.aboutservices aside p
{
color:#fff;
position:relative;
padding-left:20px;
}
.aboutservices aside p:before, .career p:before
{
content:" ";
position: absolute;
top: 12px;
left: 0;
width: 12px;
height: 2px;
background: #fff;
}
.about-vision-mission
{
}
.about-vision-mission article
{
background:#272727;
margin:50px 0;
position:relative;
display: flex;
align-items: center;
}
.about-vision-mission article:nth-of-type(2)
{
flex-direction: row-reverse;
}
.about-vision-mission article:before, .career article:before
{
content:" ";
position:absolute;
background:#fff;
top:0;
bottom:0;
right:0;
width:30%;
}
.about-vision-mission article aside
{
padding:85px 100px;
position:relative;
width:50%;
}
.about-vision-mission article aside:before
{
content: "01";
position: absolute;
top: 40px;
left: 40px;
color: #fff;
font-weight: 800;
font-size: 160px;
opacity: 0.1;
}
.about-vision-mission article aside h2
{
font-size:35px;
}
.about-vision-mission article aside p, .about-vision-mission article aside h2
{
color:#fff;
}
.about-vision-mission article figure
{
width: 35%;
position: relative;
z-index: 9;
margin: 50px 0;
}
.about-vision-mission article:nth-of-type(2):before
{
left:0;
right:auto;
}
.about-vision-mission article:nth-of-type(2) aside:before
{
content: "02";
top: 40px;
left: auto;
right:40px;
}
.about-vision-mission article:nth-of-type(2) aside, .about-vision-mission article:nth-of-type(2) figure
{
margin-left:auto;
text-align:right;
}
.about-vision-mission article:nth-of-type(2) figure:before
{
left:-75px;
right: auto;
}
.portfolio-nav
{
margin: 50px 50px -20px 50px;
}
.portfolio-nav a
{
font-size: 18px;
font-weight: 600;
position: relative;
color: #000;
margin-right: 20px;
position: relative;
}
.portfolio-nav a:hover, .portfolio-nav a.active
{
/* color:#666; */
background:none;
}
.portfolio-nav a:after
{
content: " ";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 0;
background: #0095da;
}
.portfolio-nav a:hover:after, .portfolio-nav a.active:after
{
height: 5px;
}
.portfolio
{
padding:0 50px 50px 50px;
}
.portfolio ul
{
padding: 0;
margin: 15px -50px -50px -50px;
display: flex;
flex-wrap: wrap;
}
.portfolio ul li
{
float: left;
width: 50%;
}
.portfolio ul li a
{
margin: 50px;
display: block;
position: relative;
}
.portfolio ul li a figure
{
overflow:hidden;
position: relative;
padding:0 5px;
}
.portfolio ul li a figure:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
z-index:-8;
}
.portfolio ul li a:hover figure:before
{
background: #0095da;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.portfolio ul li a figure h4
{
color: #272727;
background: #fff;
position: absolute;
left: -0px;
bottom: 50px;
padding:5px;
}
.portfolio ul li a figure h4:before
{
border-left: 12px solid #fff;
}
.portfolio ul li a figure h4:after
{
left: 112%;
right:auto;
width:0px;
}
.portfolio ul li a figcaption
{
margin: 20px 0 0 50px;
}
.portfolio ul li a figcaption h3
{
color:#000;
font-size:30px;
position:relative;
}
.portfolio ul li a figcaption h3:before
{
content: " ";
position: absolute;
top: -45px;
left: -100px;
width: 0;
height: 0;
border-top: 75px solid rgba(0,149,218);
border-left: 75px solid transparent;
mix-blend-mode: multiply;
}
.portfolio ul li a figcaption p
{
color: #999;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
display: inline-block;
position: relative;
}
.portfolio ul li a figcaption p:before
{
content:" ";
position: absolute;
bottom: 5px;
left: auto;
right: 0;
height: 8px;
background: rgba(0,149,218,0.4);
width:0;
}
.portfolio ul li a:hover figcaption p:before
{
width:100%;
left: 0;
right: auto;
}
.portfolio-content
{
padding: 0 50px;
margin-bottom: 50px;
display: none;
}
.portfolio-content ul
{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.portfolio-content ul li
{
width: 16.66666666666667%;
float: left;
position: relative;
border-left: solid 2px #0095da;
padding: 0 15px 0 50px;
font-size:14px;
}
.portfolio-content ul li img
{
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 15px;
}
.portfolio-content ul li strong
{
font-weight: 600;
display: block;
margin-bottom: 5px;
}
.portfolio-desktop
{
}
.portfoliothumb
{
background: #EAEAEA;
padding:100px;
display: flex;
flex-wrap: wrap;
}
.portfoliothumb aside
{
width:50%;
padding:50px;
}
.portfoliothumb aside img
{
box-shadow: 0px 20px 36px rgb(150 150 150 / 30%);
}
.portfolio-tablet
{
}
.portfolio-mobile
{
position:relative;
}
.portfolio-mobile:before
{
content:" ";
background: #0095da;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
z-index: -8;
}
.portfolio-application
{
}
.portfolio-application article, .portfolio-mobile-apps article
{
background: #e1eff4;
padding: 35px 50px;
}
.portfolio-application article h2, .portfolio-mobile-apps article h2
{
width: 30%;
color: #000;
font-size: 30px;
position: relative;
}
.portfolio-application article h2:before, .portfolio-mobile-apps article h2:before
{
content:" ";
position: absolute;
top: 50%;
right: 0;
width: 30%;
height: 2px;
background: #0095da;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-application article p, .portfolio-mobile-apps article p
{
width: 65%;
}
.portfolio-application figure
{
background: #272727;
border-radius:15px;
padding:30px 5px 5px 5px;
margin: 100px 200px;
position:relative;
box-shadow: 0px 0px 80px rgb(100 100 100 / 60%);
}
.portfolio-application figure:after
{
content:" ";
background: url(../images/dot.svg) center center no-repeat;
background-size: contain;
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 10px;
}
.portfolio-application figure img
{
border-radius:10px;
}
.portfolio-mobile-apps
{
}
.portfolio-mobile-apps figure
{
padding: 0 200px;
}
.mobile-screens
{
padding: 25px;
}
.mobile-screens ul
{
padding: 0;
margin: 0;
}
.mobile-screens ul li
{
width: 25%;
float: left;
}
.mobile-screens ul li figure
{
margin: 25px;
background: #fff;
padding: 30px;
box-shadow: 0px 14px 50px rgb(100 100 100 / 30%);
border-radius: 30px;
}
.mobile-screens ul li figure img
{
border-radius: 15px;
}
.services
{
padding: 25px;
}
.services ul
{
padding: 0;
margin: 0;
}
.services ul li
{
width: 50%;
float: left;
}
.services ul li a
{
display: block;
float: left;
position: relative;
margin: 25px 20px;
margin-bottom:100px;
}
.services ul li a figure
{
padding:0 5px;
overflow:hidden;
position:relative;
}
.services ul li a figure:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
z-index:-8;
}
.services ul li a:hover figure:before
{
background: #0095da;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.services ul li a figcaption
{
position: absolute;
top: 0;
bottom: 0px;
right: 0;
width: 65%;
margin-top: 150px;
background: #e1eff4;
padding: 35px 50px 0 50px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.services ul li a:hover figcaption
{
background: #272727;
margin-top: 205px;
}
.services ul li a figcaption:after
{
content:" ";
position:absolute;
bottom:-50px;
left:0;
right:0;
height:50px;
background:#e1eff4;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.services ul li a:hover figcaption:after
{
background:#272727;
}
.services ul li a figcaption h3
{
color: #000;
font-size: 28px;
position: relative;
font-weight: 700;
}
.services ul li a figcaption p
{
font-size: 16px;
}
.services ul li a:hover figcaption h3, .services ul li a:hover figcaption p
{
color: #fff;
}
.services ul li a figcaption span
{
padding: 10px 16px;
font-size: 18px;
font-weight: 600;
}
.services ul li a:hover figcaption span
{
color:#fff;
}
.services ul li a figcaption span:before
{
background: #e1eff4;
}
.services ul li a:hover figcaption span:before, .services ul li a:hover figcaption span:after
{
background: #272727;
}
.services ul li a figcaption span:after
{
background: #e1eff4;
}
.services ul li a:hover figcaption span:before
{
background: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.services-content
{
}
.services-content h2
{
color: #000;
}
.services-content h3
{
color: #000;
font-weight: 700;
}
.services-content aside
{
width:47%;
}
.services-content aside:nth-of-type(2)
{
margin-top:50px;
}
.services-content figure
{
position: relative;
padding: 100px 0;
margin-top: 50px;
}
.services-content figure:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: -100px;
width: 50%;
background: #e1eff4;
z-index: -8;
}
.career
{
}
.career article
{
background:#F3F3F3;
padding:35px 50px;
position:relative;
margin-bottom: 50px;
}
.career article:before
{
right:auto;
left:0;
}
.career p
{
position:relative;
padding-left:20px;
}
.career p:before
{
background: #0095da;
}
.career ul
{
padding:35px 50px;
margin:0 -30px;
counter-reset: item;
display: flex;
flex-wrap: wrap;
}
.career ul h2
{
text-align:center;
}
.career ul li
{
width:25%;
float:left;
margin:20px 0;
position:relative;
display: flex;
}
.career ul li:before
{
counter-increment: item;
content: counter(item, decimal-leading-zero) "";
background: #fff;
position: absolute;
top: 30px;
left: -1px;
font-size: 46px;
font-weight: 900;
color: #e1eff4;
z-index: 999;
}
.career ul li figcaption
{
margin: 15px 30px;
padding:0px 20px 0 60px;
background:#e1eff4;
position:relative;
width:100%;
z-index:9;
overflow:hidden;
}
.career ul li figcaption img
{
margin: 15px 0;
height:75px;
}
.career ul li figcaption h4
{
margin: 15px 0;
color: #000;
font-size: 18px;
font-weight: 500;
line-height: 26px;
}
.career ul li:hover figcaption
{
background:#0095da;
}
.career ul li:hover figcaption
{
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.career ul li figcaption:after
{
content:" ";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
margin:0 2px;
z-index:-8;
}
.career ul li figcaption:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background: none;
z-index: -8;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.career ul li:hover figcaption:before
{
background: #000;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.career-registration
{
}
.career-registration figure
{
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
height: 660px;
}
.career-registration fieldset:before
{
top: -25px;
left: -25px;
border-top: 100px solid #0095da;
mix-blend-mode: multiply;
}
.career-registration fieldset
{
background: #fff;
margin-bottom: -100px;
}
.career-registration fieldset h2, .contactus fieldset h2
{
color:#272727;
margin-left:10px;
}
.career-registration fieldset input[type=text], .career-registration fieldset input[type=email], .career-registration fieldset input[type=number], .contactus fieldset input[type=text], .contactus fieldset input[type=email], .contactus fieldset input[type=number], .start-a-project fieldset input[type=text], .start-a-project fieldset input[type=email], .start-a-project fieldset input[type=number]
{
background: #fff;
border: 2px solid #d2dfe3;
color: #272727;
}
.career-registration fieldset input::-webkit-input-placeholder,
.career-registration fieldset textarea::-webkit-input-placeholder,
.contactus fieldset input::-webkit-input-placeholder,
.contactus fieldset textarea::-webkit-input-placeholder,
.start-a-project fieldset input::-webkit-input-placeholder,
.start-a-project fieldset textarea::-webkit-input-placeholder
{
color:#272727;
}
.career-registration fieldset input::-moz-placeholder,
.career-registration fieldset textarea::-moz-placeholder,
.contactus fieldset input::-moz-placeholder,
.contactus fieldset textarea::-moz-placeholder,
.start-a-project fieldset input::-moz-placeholder,
.start-a-project fieldset textarea::-moz-placeholder
{
color:#272727;
}
.career-registration fieldset input:-ms-input-placeholder,
.career-registration fieldset textarea:-ms-input-placeholder,
.contactus fieldset input:-ms-input-placeholder,
.contactus fieldset textarea:-ms-input-placeholder,
.start-a-project fieldset input:-ms-input-placeholder,
.start-a-project fieldset textarea:-ms-input-placeholder
{
color:#272727;
}
.career-registration fieldset input:-moz-placeholder,
.career-registration fieldset textarea:-moz-placeholder,
.contactus fieldset input:-moz-placeholder,
.contactus fieldset textarea:-moz-placeholder,
.start-a-project fieldset input:-moz-placeholder,
.start-a-project fieldset textarea:-moz-placeholder
{
color:#272727;
}
.career-registration fieldset input[type=text]:hover, .career-registration fieldset input[type=email]:hover, .career-registration fieldset input[type=number]:hover, .career-registration fieldset textarea:hover, .contactus fieldset input[type=text]:hover, .contactus fieldset input[type=email]:hover, .contactus fieldset input[type=number]:hover, .contactus fieldset textarea:hover, .start-a-project fieldset input[type=text]:hover, .start-a-project fieldset input[type=email]:hover, .start-a-project fieldset input[type=number]:hover, .start-a-project fieldset textarea:hover
{
border: 2px solid #92a5ab;
}
.career-registration fieldset input[type=text]:focus, .career-registration fieldset input[type=email]:focus, .career-registration fieldset input[type=number]:focus, .career-registration fieldset textarea:focus, .contactus fieldset input[type=text]:focus, .contactus fieldset input[type=email]:focus, .contactus fieldset input[type=number]:focus, .contactus fieldset textarea:focus, .start-a-project fieldset input[type=text]:focus, .start-a-project fieldset input[type=email]:focus, .start-a-project fieldset input[type=number]:focus, .start-a-project fieldset textarea:focus
{
background:#fff;
border: 2px solid #0071a5;
}
.career-registration fieldset input[type=submit],
.contactus fieldset input[type=submit],
.start-a-project fieldset input[type=submit]
{
border: solid 1px #0071a5;
color: #0071a5;
}
.career-registration fieldset textarea,
.contactus fieldset textarea,
.start-a-project fieldset textarea
{
background: #fff;
border: 2px solid #d2dfe3;
color: #272727;
}
.selectdiv
{
position: relative;
font-family: 'Inter', sans-serif;
}
.selectdiv select::-ms-expand
{
display: none;
}
.selectdiv:before
{
content: " ";
right: 30px;
top: 30px;
position: absolute;
width: 2px;
height: 10px;
background: #92a5ab;
-webkir-transform: rotate(45deg);
transform: rotate(45deg);
}
.selectdiv:after
{
content: " ";
right: 36px;
top: 30px;
position: absolute;
width: 2px;
height: 10px;
background: #92a5ab;
-webkir-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectdiv:hover:before
{
-webkir-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectdiv:hover:after
{
-webkir-transform: rotate(45deg);
transform: rotate(45deg);
}
.selectdiv select
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
padding:16px 20px;
font-size: 16px;
color: #272727;
background-color: #ffffff;
background-image: none;
border: 2px solid #d2dfe3;
-ms-word-break: normal;
word-break: normal;
font-family: 'Inter', sans-serif;
cursor:pointer;
}
.selectdiv:hover select
{
border: 2px solid #92a5ab;
}
.selectdiv select:focus
{
border: 2px solid #0071a5;
box-shadow: 0px 0px 1px 3px #c0dce9;
}
.file-upload
{
position:relative;
}
.fileUpload
{
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.fileUpload span
{
display: inline-block;
float: right;
color: #fff;
background:#fff url(../images/upload.svg) center center no-repeat;
background-size: contain;
font-size: 16px;
font-weight: 700;
margin: 22px 20px;
width: 25px;
height: 12px;
}
.fileUpload input.upload
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.contactus
{
}
.contactus fieldset
{
width:45%;
background: #fff;
position:relative;
overflow: hidden;
padding:50px;
z-index: 9;
right:50px;
top:-200px;
margin-bottom:-200px;
}
.contactus fieldset h2
{
margin-top:0;
}
.contactus fieldset:after
{
content:" ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
margin:0 6px;
z-index: -8;
}
.contactus fieldset:before
{
content: " ";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background: #0095da;
z-index: -8;
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
.contact-details
{
width:50%;
padding:50px;
}
.contact-details-inner
{
width:50%;
}
.contact-details h3
{
text-transform: uppercase;
color: #272727;
font-weight: 600;
position:relative;
}
.contact-details h3:before
{
content: " ";
position: absolute;
top: -10px;
left: -30px;
width: 0;
height: 0;
border-top: 25px solid #0095da;
border-left: 25px solid transparent;
}
.contact-details strong
{
color: #0095da;
font-weight: 600;
}
.contact-details p
{
font-weight: 600;
}
.contact-details p a
{
color:#000;
display:block;
}
.contact-details p a:hover
{
text-decoration:underline;
}
.contact-social-icon
{
}
.contact-social-icon a
{
display: block;
float: left;
color: #4b69b1;
font-size: 22px;
text-align: center;
padding: 15px 0;
margin: 0 6px 0 0px;
background: #4b69b1;
width: 50px;
height: 50px;
}
.contact-social-icon a:nth-of-type(2)
{
color: #37b1e2;
background: #37b1e2;
}
.contact-social-icon a:nth-of-type(3)
{
color: #0678b6;
background: #0678b6;
}
.contact-social-icon a:nth-of-type(4)
{
color: #2ba63b;
background: #2ba63b;
}
.contact-social-icon a:hover
{
}
.contact-social-icon a:after
{
background: #fff;
}
.contact-social-icon a:before
{
background: #fff;
}
.map
{
filter: grayscale(100%);
}
.start-a-project
{
position:relative;
background:linear-gradient(120deg,#0095da,#0a53e5);
padding-bottom:100px;
}
.start-a-project:before
{
content:" ";
background:url(../images/curve-shape.svg) top center no-repeat;
background-size:contain;
position:absolute;
top:-2px;
bottom:0;
left:0;
right:0;
}
.start-a-project fieldset
{
background: #fff;
padding:85px 200px;
margin:0 100px 0;
position:relative;
}
.start-a-project fieldset:before
{
border-top: 100px solid rgba(0,149,218);
mix-blend-mode: multiply;
}
.start-a-project fieldset:after
{
background: rgba(39,39,39);
}
.start-a-project fieldset label
{
font-weight:600;
}
/* .start-a-project fieldset label span */
.start-a-project fieldset label span:not(.submit)
{
color:#F00;
}
.start-a-project fieldset input[type=text], .start-a-project fieldset input[type=email], .start-a-project fieldset input[type=number], .start-a-project fieldset textarea, .start-a-project fieldset .selectdiv select
{
margin-top:8px;
}
.start-a-project fieldset .selectdiv:before, .start-a-project fieldset .selectdiv:after
{
top: 56px;
}
.section-content
{
padding:10px 50px;
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
.hide {
display: none;
}
.button {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 12.5rem;
margin: 0;
padding: 1.5rem 3.125rem;
background:none;
border: solid 1px #fff;
font-size: 15px;
font-family: 'Inter', sans-serif;
border-radius: 3px;
/* box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2); */
color: white;
font-weight: 500;
/* text-transform: uppercase;*/
overflow: hidden;
}
.button:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #0071a5;
}
.button span {
position: absolute;
line-height: 0;
}
.start-a-project .button, .contactus fieldset .button,
.career-registration fieldset .button
{border: solid 1px #0071a5;color: #0071a5;}
.start-a-project .button .loading, .start-a-project .button .check,
.contactus fieldset .button .loading, .contactus fieldset .button .check,
.career-registration fieldset .button .loading, .career-registration fieldset .button .check
{color: #ffffff;}
.error_career.hide-opacity{
opacity: 0;
}
.error_career {
color:#F00;
font-size:13px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
opacity: 1;
}
.button span i {
transform-origin: center center;
}
.button span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.button span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
font-size: 24px;
}
.button span:nth-of-type(3) {
display: none;
}
.active {
background-color: #0071a5;
}
.active:before {
width: 100%;
transition: width 3s linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
.active span:nth-of-type(3) {
display: none;
}
.finished {
background-color: #0071a5;
}
.finished .submit {
display: none;
}
.finished .loading {
display: none;
}
.finished .check {
display: block !important;
font-size: 24px;
animation: scale 0.5s linear;
}
.finished .check i {
transform-origin: center center;
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
z-index:9999;
}
.grecaptcha-badge:hover {
width: 256px !important;
}
.desktopcontent{display:block;}
.mobilecontent{display:none;}
@media only screen and (max-width:960px)
{
.grecaptcha-badge {
display: none !important;
}
}