html{overflow-x: hidden;}
body
{
overflow-x:hidden;
}
@font-face
{
font-family: 'Kenney';
src: url('../fonts/Kenney-Space.ttf');
}
@font-face
{
font-family: 'Nasalization';
src: url('../fonts/nasalization-rg.ttf');
}
@font-face
{
font-family: 'QuestrialRegular';
src: url('../fonts/Questrial-Regular.ttf');
}
@font-face
{
font-family: 'LatoRegular';
src: url('../fonts/Lato-Regular.ttf');
}
@font-face
{
font-family: 'LatoBold';
src: url('../fonts/Lato-Bold.ttf');
}
/*=================end-fonts====================*/
/*========banner-section===========*/
.bannerTitle
{
content:'';
position:absolute;
top:52%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
z-index:100;
}
.bannerTitle h3
{
color:white;
font-family:'Nasalization';
text-align:center;
font-size:4vw;
opacity:1;
transform:scale(0);
animation: scaleAnimate 1s linear 2s forwards;
}
@keyframes scaleAnimate
{
0%
{
transform:scale(0);
}
100%
{
transform:scale(1);
}
}
.bannerTitle h3:first-letter
{
color:#ffe84e;
font-size:5vw;
}
.bannerMain
{
width:100%;
height:760px;
background:url(../images/home/banner.jpg)no-repeat;
position:relative;
overflow:hidden;
background-size:cover;
}
.colorOverlay
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#016fea;
opacity:.35;
z-index:10;
}
.bannerCircle1 i,
.bannerCircle2 i,
.bannerCircle3 i
{
position:absolute;
transform:translate(-50%,-50%);
animation:outerline 1s linear alternate infinite;
font-size:30px;
width:50px;
height:50px;
border-radius:50%;
border:1px solid black;
line-height:50px;
text-align:center;
background-color:black;
color:white;
box-shadow:inset 2px 2px 10px grey,2px 2px 10px grey;
}
.bannerCircle1 i:nth-child(1) ,
.bannerCircle2 i:nth-child(1),
.bannerCircle3 i:nth-child(1)
{
left:50%;
top:0px;
}
.bannerCircle1 i:nth-child(2),
.bannerCircle2 i:nth-child(2),
.bannerCircle3 i:nth-child(2)
{
left:50%;
top:100%;
}
.bannerCircle1 i:nth-child(3),
.bannerCircle2 i:nth-child(3),
.bannerCircle3 i:nth-child(3)
{
left:0px;
top:50%;
}
.bannerCircle1 i:nth-child(4),
.bannerCircle2 i:nth-child(4),
.bannerCircle3 i:nth-child(4)
{
left:100%;
top:50%;
}
.bannerCircle1,
.bannerCircle2,
.bannerCircle3
{
border-radius:50%;
position:absolute;
left:0;
right:0;
margin:auto;
box-shadow :inset 2px 2px 10px grey;
}
.bannerCircle1
{
width:95%;
top:20%;
animation: roll 20s linear infinite;
}
.bannerCircle2
{
width:75%;
top:40%;
animation: roll 10s linear reverse infinite;
}
.bannerCircle3
{
width:55%;
top:60%;
animation: roll 18s linear infinite;
}
.bannerCircle1:after,
.bannerCircle2:after,
.bannerCircle3:after
{
content:'';
padding-bottom:100%;
display:block;
}
.bannerCircle4 img
{
position:absolute;
top:70%;
left:0;
right:0;
margin:auto;
-webkit-filter: drop-shadow( -22px 6px 10px black);
animation: roll 10s linear infinite;
}
@keyframes roll
{
from
{
transform:rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
.shootingStar
{
width:5px;height:85px;
background:linear-gradient(to top,rgba(255,255,255,0),white);
box-shadow:1px 1px 5px white;
border-bottom-right-radius:100%;
border-bottom-left-radius:5%;
animation:shootingStar 10s linear infinite;
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%,-50%);
}
@keyframes shootingStar
{
0%
{
transform:translateY(8px) translateX(0px) rotate(-45deg);
opacity:0;
height:50px;
}
10%
{
opacity:1;
width:3px;
}
25%
{
width:5px;
opacity:.5;
}
100%
{
transform:translateY(-2560px) translateX(-2560px) rotate(-45deg);
opacity:1;
box-shadow:1px 1px 5px black;
height:150px;
}
}
@media screen and (min-width:767px) and (max-width:1035px)
{
.bannerMain
{
height:450px;
}
}
@media screen and (min-width:320px) and (max-width:767px)
{
.home-about p{text-align: center;padding: 0 30px; width: unset !important;margin: unset !important;letter-spacing: unset !important;}
.Locker-innercontent{text-align: center;}
.Locker-innercontent p{padding-top: unset !important;padding-right: unset !important;text-align: center;}
.lato{font-size: 14px;}
.tech-content p{width: 100%;font-size: 20px;}
.tech-content h3{font-size: 30px !important;}
.animation-img{width: 20px;}
.bannerCircle1,
.bannerCircle2,
.bannerCircle3
{
display:none;
}
.bannerCircle4 img
{
top:60%!important;
}
.bannerMain
{
height:400px!important;
}
}
/*========end-banner===========*/
.Slide-Image
{
width:100%;
height:500px;
position:relative;
}
.Slide-Image img
{ content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:250px;
height:auto;
}
.Locker-innercontent{padding-top: 25px;}
.Locker-innercontent p
{
color:white;
padding-top:60px;
text-align:justify;
font-size:16px;
padding-right: 30px;
font-family:'LatoRegular';
}
.Locker-innercontent li{
color: white;
padding-top: 20px;
text-align: justify;
font-size: 16px;
font-family: 'LatoRegular';
}
.mobileCircle
{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
background-color:white;
border-radius:50%;
box-shadow:2px 2px 10px grey;
}
.mobileCircle:after
{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:260px;
height:260px;
border-radius:50%;
background-color:lightgrey;
animation:circleScale 5s linear infinite;
}
@keyframes circleScale
{
0%
{
transform:translate(-50%,-50%) scale(1);
}
100%
{
transform:translate(-50%,-50%) scale(1.1);
}
}
/*locker*/
.mobileRightLocker
{
content:'';
position:absolute;
top:0;
left:50%;
bottom:0;
width:100%;
height:100%;
background-color:#2a2a2a;
transition:.5s;
cursor:pointer;
}
.mobileLeft
{
content:'';
position:absolute;
top:0;
left:50%;
width:50%;
height:100%;
background-color:#ffe84e;
opacity:1;
transition:.2s;
}
.mobileRight
{
content:'';
position:absolute;
top:0;
left:0%;
width:50%;
height:100%;
background-color:#002f5e;
opacity:1;
transition:.2s;
}
.mainLocker
{
width:100%;
min-height:600px;
position:relative;
overflow:hidden;
}
.leftArrowIcon,
.rightArrowIcon
{
content:'';
position:absolute;
top:50%;
left:92%;
transform:translate(-50%,-50%);
font-size:30px;
color:white;
cursor:pointer;
z-index:1;
opacity:0;
transition:.5s;
width:50px;
height:50px;
border-radius:50%;
text-align:center;
display:grid;
align-items:center;
background-color:#2a2a2a;
}
.rightArrowIcon
{
top:50%;
left:8%;
background-color:#073466;
}
.mobileLeftLocker
{
content:'';
position:absolute;
top:0;
left:-50%;
bottom:0;
width:100%;
min-height:100%;
background-color:#002f5e;
transition:.5s;
cursor:pointer;
}
.ma-vertical
{
content:'';
position:absolute;
top:50%;
right:0%;
transform:translateX(20%)rotate(-90deg);
letter-spacing:2px;
font-size:25px;
font-family:'LatoBold';
color:white;
}
.mobilelocker-Title
{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
width:100%;
}
.mobilelocker-Title h3
{
font-family:'Nasalization';
font-size:3em;
}
.mobilelocker-Title p
{
font-family:'LatoRegular';
font-size:15px;
}
/*lock*/
.lock,.lock2
{
content:'';
position:absolute;
top:50%;
right:50px;
width:40px;
height:70px;
background-color:#073466;
border-radius:10px;
cursor:pointer;
}
.lock2
{
top:50%;
left:50px;
background-color:#ffe84e;
cursor:pointer;
}
.lockCircle
{
content:'';
position:absolute;
top:40%;
left:50%;
transform: translate(-50%,-50%);
width:20px;
height:20px;
border-radius:50%;;
background-color:#ffe84e;
overflow:hidden;
}
.lock2 .lockCircle,.lock2 .lockSmallCircle,
.lock2 .lockSmallCircle:after
{
background-color:#073466;
}
.lock2 .lockCircle:after,.lock2 .lockLine
{
background-color:#ffe84e;
}
.lockCircle:after
{ content:'';
position:absolute;
top:0;
left:-7px;
width:20px;
height:20px;
border-radius:50%;
background-color:#073466;
}
.lockLine
{
width: 66px;
height: 14px;
background-color:#073466;
border-radius: 10px;
content:'';
position: absolute;
top: 40%;
left: -30%;
transform: translate(-50%,-50%);
transform-origin:right;
}
.lockSmallCircle
{
content:'';
position:absolute;
top:75%;
left:50%;
transform: translate(-50%,-50%);
width:10px;
height:10px;
border-radius:50%;;
background-color:#ffe84e;
}
.lockSmallCircle:after
{
content:'';
position:absolute;
top:7px;
left:2.5px;
width:5px;
height:10px;
border-radius:2px;
background-color:#ffe84e;
}
.mobileLeft:hover .lockLine
{
transform:translate(-50%,-50%) rotate(-60deg);
transition:.1s;
}
.mobileRight:hover
.lockLine
{
transform:translate(-50%,-50%) rotate(-60deg);
transition:.1s;
}
/*lock end*/
.wd-vertical
{
content:'';
position:absolute;
top:50%;
left:2%;
transform:translateX(-35%)rotate(90deg);
letter-spacing:2px;
font-size:25px;
font-family:'LatoBold';
color:white;
}
/*locker end*/
.locker-sm
{
display:none;
background:#073466;
}
.locker2-sm
{
display:none;
background:#2a2a2a;
}
@media screen and (min-width:320px) and (max-width:1300px)
{
.mainLocker
{
display:none;
}
.locker-sm,.locker2-sm
{
display:block;
}
}
.web-development h4
{
font-family:'Nasalization';
color:white;
font-size:3rem;
padding:2% 0 0 0 ;
}
.web-development h4:first-letter
{
color:#ffe84e;
}
/*ABOUT*/
.lato{font-family: 'LatoRegular';letter-spacing: 3px;line-height: 1.5;}
.home-about
{
padding:50px 0px;
}
.home-about h3
{
font-size:5rem;
font-family:'Nasalization';
}
.home-about h3:first-letter
{
color:#ffe84e;
}
.home-about p
{
font-size:20px;
font-family:'LatoRegular';
width:75%;
margin:auto;
text-align:justify;
letter-spacing: 1px;
}
/*END ABOUT*/
/**/
.DedicatedTitle h5
{
font-family:'Nasalization';
text-align:center;
font-size:5rem;
padding:50px 0 0 0px;
}
.DedicatedTitle h5:first-letter
{
color:#ffe84e;
}
.Dedicated-Team
{
width:100%;
height:600px;
position:relative;
}
.Dedicated-LeftContent,
.Dedicated-RightContent
{
content:'';
position:absolute;
top:10%;
}
.Dedicated-Team .Dedicated-LeftContent:nth-child(2),
.Dedicated-RightContent:nth-child(2)
{
content:'';
position:absolute;
top:70%;
}
.Dedicated-LeftContent:nth-child(2) h5
{
color:#dd393c;
}
.Dedicated-LeftContent h5,
.Dedicated-RightContent h5
{
font-family:'LatoBold';
text-align:right;
font-size:25px;
color:#073466;
}
.Dedicated-RightContent h5,
.Dedicated-RightContent:nth-child(2) h5
{
color: #ff782a;
text-align:left;
}
.Dedicated-RightContent:nth-child(2) h5
{
color:#0a5595;
}
.Dedicated-RightContent p
{
text-align:left;
font-family:'LatoRegular';
font-size:16px;
}
.Dedicated-LeftContent p
{
font-family:'LatoRegular';
font-size:16px;
text-align:right;
}
@media screen and (min-width:768px) and (max-width:1200px)
{
.Dedicated-LeftContent p, .Dedicated-RightContent p
{
font-size:14px!important;
}
.Dedicated-LeftContent h5,
.Dedicated-RightContent h5
{
font-size:20px;
}
}
.Dedicated-Circle,
.Dedicated-Circle:after,
.Dedicated-Circle:before,
.Dedicated-Smile
{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.Dedicated-Circle
{
width:500px;
height:500px;
border:1px solid #073466;
border-radius:50%;
}
@media screen and (min-width:768px) and (max-width:991px)
{
.Dedicated-Circle
{
width:400px!important;
height:400px!important;
}
.Dedicated-Circle:after
{
width:380px!important;
height:380px!important;
}
.Dedicated-smallCircle
{
width:120px!important;
height:120px!important;
}
}
@media screen and (min-width:320px) and (max-width:767px)
{
.Dedicated-Team
{
display:none;
}
}
.Dedicated-Circle:after
{
width:480px;
height:480px;
border:30px solid #073466;
border-radius:50%;
}
.Dedicated-Circle:before
{
width:380px;
height:380px;
border:1px solid #073466;
border-radius:50%;
}
.Dedicated-smallCircle
{ content:'';
position:absolute;
top:0;
left:0%;
width:150px;
height:150px;
border-radius:50%;
background-color:#073466;
border:10px solid white;
z-index:1;
display:grid;
align-items:center;
}
.Dedicated-smallCircle:nth-child(2)
{ content:'';
position:absolute;
top:0;
left:70%;
background-color:#ff782a;
}
.Dedicated-smallCircle:nth-child(3)
{ content:'';
position:absolute;
top:70%;
left:70%;
background-color:#0a5595;
}
.Dedicated-smallCircle:nth-child(4)
{ content:'';
position:absolute;
top:70%;
left:0%;
background-color:#dd393c;
}
.Dedicated-Smile
{
width:220px;
height:220px;
border:1px solid transparent;
border-bottom:5px solid #073466;
border-radius:50%;
display:grid;
align-items:center;
text-align:center;
}
.Dedicated-Smile h5
{
font-family:'LatoBold';
font-size:30px;
}
.DedicatedTitle p
{
font-family:'LatoRegular';
font-size:18px;
width:60%;
margin:auto;
text-align:center;
}
@media (max-width: 600px)
{
.DedicatedTitle h5
{
font-size:30px;
}
.mobile-process
{
font-size: 17px !important;
font-family: 'Lato-Bold';
font-weight: 700;
line-height: 35px;
}
}
.Planning-sm,.Designing-sm,.Testing-sm,.Quality-sm
{
width:50%;
margin:auto;
text-align:center;
}
@media screen and (min-width:320px) and (max-width:450px)
{
.Planning-sm,
.Designing-sm,
.Testing-sm,
.Quality-sm
{
width:80%;
}
}
.Planning-sm h4,.Designing-sm h4,.Testing-sm h4,.Quality-sm h4
{
color:#073466;
font-family:'LatoBold';
font-size:25px;
}
.Designing-sm h4
{
color: #ff782a;
}
.Testing-sm h4
{
color:#0a5595;
}
.Planning-sm p,.Designing-sm p,.Testing-sm p,.Quality-sm p
{
font-size:20px;
font-family:'LatoRegular';
}
/*=========process-section-end==============*/