*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PT Serif', serif;
    

}
body{

    /* white space remove code */
    max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          /* end white space remove code */
}
#loading{
    height:100vh;
    width: 100%;
    background: #fff url('../img/loader.gif') no-repeat center;
    z-index: 99999;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
li{
    list-style: none;
}
p{
    font-size: 0.89rem;
    line-height: 1.6;
    font-weight: 400;
}
.extra-div h2, .servicediv h2 {
    font-size: 0.9rem;
    margin:20px 0 15px 0;
    font-weight: bold;
    line-height: 1.1;
    word-spacing: 4px;
}

.header-top{

    background-color: #060c21;
    height: 40px;
    line-height: 40px;
    font-size: 13px; 
    
}
.header-contact span:first-child{
    margin-right: 20px;
}
.social-icons{
margin: 0px;
padding: 0px;
list-style: none;
display: block;
width: 100%;
text-align: right;
}

.social-icons li{
    display: inline-block;
    margin: 0px 6px;
}
.social-icons li:last-child{
margin-right: 0px;
}
.social-icons li{
font-size: 14px;
}

.header{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(14, 26, 32, 0.568), #060c21) ,url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    clip-path: polygon(100% 0%, 100% 77%, 50% 100%, 0 75%, 0  0);
}
.header:before{
    content: "";
    position: absolute;
    top:0%;
    left:0;
    right:0;
    bottom:0%;
    opacity: .4;
    z-index: -1;
    background: linear-gradient(to right, #060c21 0%, #1b5777 0%, #060c21 100%);
}
.navbar:before{ 
    content: "";
    position: absolute;
    top:0%;
    left:0;
    right:0;
    bottom:0%;
    opacity: .4;
    z-index: -1;
    background: linear-gradient(to right, #1b5777 0%, #060c21 0%, #060c21 100%);
}
.nav-item a{
    color: #fff !important;
}
.header-section{
    width: 100%;
    height: inherit;
    color: white;
    text-align: center;
    position: relative;
}

.center-div{
width: 100%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
-webkit-transform: translate(-50% , -50%);
}
.header-button a{
    border: 1px solid #fff;
    border-radius: 100px;
    margin: 0px 5px;
    padding: 12px 35px;
    outline:none;
    color: #fff;
    font-size:1rem;
    font-weight:400;
    text-align: center;
    line-height: 1.5;
}
.header-button a:hover{
color:#060c21;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0, 170, 255, 0.3);
}
.center-div p{
    padding:0px 0px 20px 0px;
}
.center-div h1{
    font-size:4rem;
    padding:0px 0px 20px 0px;
}
.header-extra{
    width: 100%;
    height: auto;
    margin: 40px 0;
    
}
.extra-div{
    background: #fff;
    border: medium none;
    padding:50px;
    border-radius:3px;
    transition:0.3s;
    
}
.extra-div:hover{
    box-shadow: 0 0 20px 0 rgba(0, 170, 255, 0.3);
     transform:translateY(-20px); /* This property is used to animate three div in upper side you can also change in x axis */
}
.extra-div a{
    color:#468cb3;
}


/* ***** Skills Css Start ***** */
.skills{
    background: linear-gradient(to right, #1b5777 0%, #1b5777 0%, #060c21 100%);
    padding:50px 0;
    margin-bottom: 50px;
    color:#fff;
}
.picture{
    padding:50px 0;
    margin-bottom: 50px;
}
.heading{
    margin-bottom: 50px;

}
.heading h1{
    font-size:1.5rem;
    font-weight:600;
    text-transform: uppercase;
}
.name h1{
font-size:0.9rem;
color : #2e2e2e;
text-transform: uppercase;
font-weight: bold;
}
.skillicons{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.Mobile i{
    color:#060c21;
}
/* ** Progress bar set height ** */
.progress{
    height:0.7rem !important ;
}

/* Project Done css */

.project-work{
    margin: 100px 0;

}
.project-work h1{
    font-size:2rem;
    text-align: center;
}
.mainheader{
    display: grid;
    

}
.design{
    position: relative;
    width: 300px;
    height:300px;
}
.design > *, .blend > * {
    position:absolute;
    width: 300px;
    height:300px;
}
#rotateborder{
    border:15px solid #1b5777;
transform:rotate(45deg);
box-shadow: 0 0 10px #1b5777, inset 0 0 20px #1b5777;
}

.grid{
    display:grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;

}
.data-white{
    background: #fff;
}

.blend{
    mix-blend-mode: multiply;
}
img{
    object-fit: cover;
    
}
.design > img{
    box-shadow: 0 0 20px #bac3c3;
}
.Work{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;




}
.Work .container{
    position: relative;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-template-rows: auto;
    grid-gap: 0 20px;


}
.container .box{
    position: relative;
    height:400px;
    background: #060c21;    
display:flex;
justify-content: center;
align-items: center;
border:1px solid #000;
}
.container .box:before
{
content: '';
position: absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
z-index:-1;
background:#fff;
transform: skew(2deg,2deg);

}
.container .box:nth-child(1):before{
    background: linear-gradient(315deg, #ff0057, #e64a19);
}
.container .box:nth-child(2):before{
    background: linear-gradient(315deg, #89ff00, #00bcd4);
}

.container .box:nth-child(3):before{
    background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container .box:nth-child(4):before{
    background: linear-gradient(315deg, #ff0000, #ffc107);
}
.content{
    position: relative;
    padding:20px;
}
.box .content h2{
    position :absolute;
    top:-60px;
    right:20px;
    margin:0;
    padding:0;
    font-size:10em;
    color:rgba(255, 255, 255, .05);
    transition: 0.5s;

}
.box:hover .content h2{
    top:-140px;
}

.box .content h3{
    margin: 0 0 10px;
    padding:0;
    font-size:24px;
    font-weight: 500;
    color:#fff;
}
.box .content p{
    margin: 0;
    padding:0;
    font-size:16px;
    color:#fff;
}

.box .content a{
    position : relative;
    margin: 0;
    padding:10px 20px;
    text-decoration: none;
    border: 1px solid #fff;
    display: inline-block;
    color:#fff;
    transition: 0.5s;
    transform:translateY(-40px);
    opacity: 0;
    visibility: hidden;
}

.box:hover .content a{

    transform:translateY(0);
    opacity: 1;
    visibility: visible;
}

.box .content a:hover{
color:#000;
background: #fff;
}

.ml2 {
    font-weight: 900;
    font-size: 30px;
    color:#fff;
    margin: 0 0 10px;
    padding:0;

  }
  
  .head{
    color:#fff;
    margin: 0 0 10px;
    padding:0;
  }
  .ml2 .letter {
    display: inline-block;
    line-height: 1em;
    color:#333;
  }

  .squuare{
      position: relative;
      width:400px;
      height:400px;
      display: flex;
      justify-content:center;
      align-items:center;
  }

  .squuare span:nth-child(1){
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      border: 2px solid #000000;
      border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
      transition:0.5s;
animation: animate 6s linear infinite;
  }
  .squuare:hover span:nth-child(1){
      border:none;
      background: rgba(0,0,255,0.8);
  }
  .squuare span:nth-child(2){
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border: 2px solid #000000;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition:0.5s;
animation: animate 4s linear infinite;
}
.squuare:hover span:nth-child(2){
    border:none;
    background: rgba(0,0,255,0.8);
}
.squuare span:nth-child(3){
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border: 2px solid #000000;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition:0.5s;
animation: animate2 10s linear infinite;
}
.squuare:hover span:nth-child(3){
    border:none;
    background: rgba(0,0,255,0.8);
}
  @keyframes animate{
      0%{
          transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
    }
      
  }
  @keyframes animate2{
    0%{
        transform: rotate(360deg);
    }
    100%{
      transform: rotate(0deg);
  }
    
}

.content1{
    position:relative;
    padding:40px 60px;
    color: #000;
    text-align:center;
    transition:0.5s;
    z-index:1000;
    
}
.content1:hover{
    position:relative;
    padding:40px 60px;
    color: #fff;
    text-align:center;
    transition:0.5s;
    z-index:1000;
    
}
.content1 a{
    position:relative;
    display:inline-block;
    margin-top:10px;
    border:2px solid #000;
    padding:6px 18px;
    text-decoration: none;
    color:#000;
}
.content1 a:hover{
    position:relative;
    display:inline-block;
    margin-top:10px;
    border:2px solid #fff;
    padding:6px 18px;
    text-decoration: none;
    color:#fff;
}

.Effect{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:50px 0;
    transform-style: preserve-3d;
}

.Effect .boxx{
position:relative;
width:400px;
height:300px;
margin:60px 0;
background: #000;
transform-style: preserve-3d;
justify-content: space-around;

}

.Effect .boxx:hover{

box-shadow: 0 50px 80px rgba(0,0,0,.2);
}
.Effect .boxx .ImgBox{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

}
.Effect .boxx .ContentBox_Latest{

    position:absolute;
    top:50%;
    left:50px;
    right:50px;
    background:#fff;
transform:translateZ(20px)  scaleY(0);
padding:40px 25px;
transform-origin:top;
transition:0.5s;
transform-style: preserve-3d;

}
.Effect .boxx:hover .ContentBox_Latest{
    transform:translateZ(20px)  scaleY(1);
}

.Box_Effect{
    position:sticky;
top:50%;
float:right;
    transform: translate(-50%, -50%);
    width:400px;
    height:400px;
    background: #001e2d;
    box-sizing: border-box;
    overflow:hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
    border: 2px solid rgba(0,0,0,.5);
	
	
}
.Box_Effect:before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: rgba(255,255,255,.1);
    transition:0.5s;
    pointer-events: none;

}

.Box_Effect:hover:before{
    left:-50%;
    transform: skewX(-5deg);
}

.Box_Effect .content_Effect{
    position: absolute;
    top:15px;
    left:15px;
    right:15px;
    bottom:15px;
     border: 2px solid #ffeb3b;
     padding:30px;
     text-align:center;
     box-shadow: 0 5px 10px rgba(0,0,0,.5);
}
.Box_Effect span{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    box-sizing:border-box;
}
.Box_Effect span:nth-child(1){
    transform: rotate(0deg);
}
.Box_Effect span:nth-child(2){
    transform: rotate(90deg);
}
.Box_Effect span:nth-child(3){
    transform: rotate(180deg);
}
.Box_Effect span:nth-child(4){
    transform: rotate(270deg);
}
.Box_Effect span:nth-child(2):before{
animation-delay:-2s;
}


.Box_Effect span:nth-child(4):before{
    animation-delay:-2s;
    }
.Box_Effect span:before{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    background: #0093ff;
    animation: animate_new 4s linear infinite;
    

}
@keyframes animate_new{
    0%{
        transform:scaleX(0);
        transform-origin: left;
    }
    50%{
        transform:scaleX(1);
        transform-origin: left;

    }

    50.1%{
        transform:scaleX(1);
        transform-origin: right;
    }

    100%{
        transform:scaleX(0);
        transform-origin: right;
    }
}

.down
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    background-color: #060c21;
    text-transform: uppercase ;
}
.down:hover{

background-color: #1b5777;
}
#parent {
    height: 40px;
    white-space: nowrap;
    overflow: hidden;   
    font-size: 28px;
    color: #060c21;
    position: absolute;
    font-weight: 900;

  }
  
  #border {
    border-bottom: solid 3px rgba(0,255,0,.75);
    position: absolute;
    right: -7px;
    width: 20px;
  }
  
  /* Animation */
  #parent {
    animation: animated-text 2s steps(30,end) 1s 1 normal both
  }
  
  #border {
     animation: animated-cursor 600ms steps(30,end) infinite;
  }
  
  /* text animation */
  
  @keyframes animated-text{
    from{width: 0;}
    to{width: 480px;}
  }
  
  /* cursor animations */
  
  @keyframes animated-cursor{
    from{border-bottom-color: rgba(0,255,0,.75);}
    to{border-bottom-color: transparent;}
  }
  .foot
  {
    background: linear-gradient(to right, #1b5777 0%, #1b5777 0%, #060c21 100%);
  }
  .foot a{
      text-decoration: none;
      color: #fff;
  }

  @media(max-width:991px)
  {
      .down{
          margin-left:0px;
          font-size: smaller;
          display: table-cell;      
        }
       
  }

  @media only screen and (max-width: 900px)
  {
    .navbar-brand {
        display: inline-block;
        padding-top: .3125rem;
        padding-bottom: .3125rem;
        margin-right: 1rem;
        font-size:11px;
        line-height: inherit;
        white-space: nowrap;
    }
    .center-div h1 {
        font-size: 27px;
        padding: 0px 0px 20px 0px;
    }
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .center-div {
        width: 100%;
        height: auto;
        position: absolute;
        top: 30%;
        left: 50%;
    }
    .header-button a {
        border: 1px solid #fff;
        border-radius: 100px;
        margin: 0px 5px;
        padding: 9px 35px;
        outline: none;
        color: #fff;
        font-size: 10px;
        font-weight: 400;
        text-align: center;
        line-height: 1.5;
    }

  }
  .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 250, 253)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 250, 253);
} 


    .Effect {display:block;}
    .Mobile {display:none;}


@media all and (max-width: 700px) {
    .Effect {display:none;}
    .Mobile {display:block;}
}


.modal-body{
    background: linear-gradient(to right, #060c21 0%, #1b5777 0%, #060c21 100%);
    box-shadow: 0 0 20px rgba(0,0, 0, 0.2);

}
.contactinfo h2{
    color:#fff;
    font-size: 24px;
    font-weight: 500;
}
.contactinfo p{
    color:#fff;
    opacity: 0.5;
    font-weight: 500;
    text-indent: 50px;
}
.contactinfo p:hover{
   
    opacity: 1;
    
}
.contactinfo .info{
position: relative;

margin:20px 0;

}
.contactinfo .info li{
    position: relative;
    list-style: none;
    display:flex;
    margin:20px 0;
    cursor:pointer;
    align-items: flex-start;
    }
.contactinfo .info li span:nth-child(1)
{
    width:30px;
    min-width:30px;
}
.contactinfo .info li span:nth-child(1) img
{
    max-width:100%;
}

.contactinfo .info li span:nth-child(2)
{
    margin-left:10px;
    color:#fff;
    font-weight:300;
    opacity:0.5;

}
.contactinfo .info li:hover span:nth-child(1) img,
.contactinfo .info li:hover span:nth-child(2)
{
opacity: 1;
}

.contactinfo .sci
{
    position:relative;
    display:flex;

}
.contactinfo li
{
list-style: none;
margin-right: 15px;
}

.contactinfo li a 
{
text-decoration: none;
}

.contactinfo li a img{
    filter: invert(1);
    opacity: 0.5;
}

.contactinfo li:hover a img{
    opacity: 1;
}