index.css

*
@-ms-viewport{
  width: device-width;
}
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
{
margin: 0;
padding 0;
font-family: Century Gothic;
}
::-webkit-scrollbar {
  width: 10px;
}
.text{
  height: 10px;
  border: 25px;
  width:50%;
  box-shadow: 0 10px 10px -10px #006400 inset;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background: black;
}
::-webkit-scrollbar-thumb {
  background: orange; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

#imagez{
  background-origin: cover;
        background-position: center;
        opacity: 0.8;
}
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{height: 40px;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #228B22!important;
}
.navbar
{
background: #000000;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
/*------Slider------*/
#slider
{
width: 100%;
}
.carousel-caption
{
top: 50%;
transform: translateY(-50%)
bottom: initial!important;
}
.carousel-caption h5
{
color: #fff;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #000000, 0 0 40px #000000, 0 0 50px #000000, 0 0 60px #000000, 0 0 70px #000000;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #000000, 0 0 40px #000000, 0 0 50px #000000, 0 0 60px #000000, 0 0 70px #000000, 0 0 80px #000000;
  }
.pulkit{
width: 20%;
}
body{
background: #3b4172
font-family: poppins;
}
.wrapper{
width: 1170px;
margin: 2% auto;
}
.section-header
text-align: center;
margin-bottom: 30px;
}
.section-header h2{
text-transform: uppercase;
margin: 0;
color #fff;
font-size: 45px;
letter-spacing: 5px;
}
.team-member{
width: 29%
height: auto;
float: left;
box-shadow: 5px 5px 15px #000;
position: relative;
display: block;
overflow: hidden;
padding: 15px;
text-align: center;
margin: 0 5px;
background: #222859;
}
.team-member h3{
margin: 0;
text-transform: uppercase;
font-size: 25px;
color: #fff;
}
.team-member p{
color: #fff;
}
.team-member:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 4px;
width: 100%;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
box-sizing: border-box;
transform: translateX(100%);
}
.team-member:after{
position: absolute;
content: '';
left: 0;
top: 0;
height: 4px;
width: 100%;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
box-sizing: border-box;
transform: translateX(-100%);
}
.team-member:hover:before{
border-color: #do4f81;
height: 100%;
transform: translateX(0);
transition: .3s transform linear, .3s height linear .3s;
}
.team-member:hover:after{
border-color: #do4f81;
height: 100%;
transform: translateX(0);
transition: .3s transform linear, .3s height linear .3s;
}
.services-section{
  background: url(https://image.freepik.com/free-vector/futuristic-technology-background-with-honeycombs_23-2148481277.jpg);
  background-size: cover;
  padding: 60px 0;
}
.inner-width{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  overflow: hidden;
}
.section-title{
  text-align: center;
    color: black;
  text-transform: uppercase;
  font-size: 30px;
}
.border{
  width: 160px;
  height: 2px;
  background: #82ccdd;
  margin: 40px auto;
}
.services-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-box{
  max-width: 33.33%;
  padding: 10px;
  text-align: center;
  color: #ddd;
  cursor: pointer;
}

.service-icon{
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 3px solid #ba6b1c;
  color: #ba6b1c;
  transform: rotate(45deg);
  margin-bottom: 30px;
  margin-top: 16px;
  transition: 0.3s linear;
}
.service-icon i{
  line-height: 70px;
  transform: rotate(-45deg);
  font-size: 26px;
}
.service-box:hover .service-icon{
  background: #ba6b1c;
  color: black;
}
.service-title{
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 10px;
    color: black;
}
.service-desc{
  font-size: 14px;
    color: black;
}

@media screen and (max-width:960px) {
  .service-box{
    max-width: 45%;
  }
}

@media screen and (max-width:768px) {
  .service-box{
    max-width: 50%;
  }
}

@media screen and (max-width:480px) {
  .service-box{
    max-width: 100%;
  }
}
.team-member:hover{
  border: 2px solid orange;
  border-radius: 10px;
}
.pic:hover{
  border-radius: 10px;
  box-shadow: 10px 10px;
  background: #228B22;
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%,#000000 25%,#1e539e 50%,#ff3083 75%,#7800a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
  width: 500px;
  height: 500px;
  max-width: 100vw;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #228B22;
  position: relative;
  cursor: pointer;
  transition: .5s all;
  
  &:hover {
    background-position: 100% 100%;
  }
}
.yuvi{
font-family: 'Roboto Slab';
}
.post{
font-family: 'Roboto Slab';
font-size: 20px;
}
.pos{
font-family: 'Roboto Slab';
font-size: 40px;
}
.about{
background-image: linear-gradient(45deg, rgb(20, 222, 124) 0%, rgb(20, 222, 124) 21%,rgb(25, 190, 119) 21%, rgb(25, 190, 119) 37%,rgb(30, 158, 113) 37%, rgb(30, 158, 113) 46%,rgb(35, 126, 108) 46%, rgb(35, 126, 108) 53%,rgb(39, 94, 103) 53%, rgb(39, 94, 103) 59%,rgb(44, 62, 97) 59%, rgb(44, 62, 97) 77%,rgb(49, 30, 92) 77%, rgb(49, 30, 92) 100%);
}
.obj{
  background-image: linear-gradient(45deg, rgba(187, 187, 187,0.04) 0%, rgba(187, 187, 187,0.04) 50%,rgba(86, 86, 86,0.04) 50%, rgba(86, 86, 86,0.04) 100%),linear-gradient(135deg, rgba(166, 166, 166,0.04) 0%, rgba(166, 166, 166,0.04) 50%,rgba(92, 92, 92,0.04) 50%, rgba(92, 92, 92,0.04) 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); background-size: 142px 142px;
  color: #fff;
}
.video{
background-image: radial-gradient(circle at center center, rgba(33, 33, 33,0.04) 0%, rgba(33, 33, 33,0.04) 8%,transparent 8%, transparent 100%),radial-gradient(circle at center center, rgba(38, 38, 38,0.04) 0%, rgba(38, 38, 38,0.04) 90%,transparent 90%, transparent 100%),radial-gradient(circle at center center, rgba(107, 107, 107,0.04) 0%, rgba(107, 107, 107,0.04) 7%,transparent 7%, transparent 100%),radial-gradient(circle at center center, rgba(9, 9, 9,0.04) 0%, rgba(9, 9, 9,0.04) 74%,transparent 74%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255)); 
background-size: 18px 18px;
}
.apper{
background-image: linear-gradient(135deg, transparent 0%, transparent 26%,rgba(151, 151, 151,0.07) 26%, rgba(151, 151, 151,0.07) 39%,transparent 39%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 48%,rgba(151, 151, 151,0.07) 48%, rgba(151, 151, 151,0.07) 58%,transparent 58%, transparent 100%),linear-gradient(0deg, transparent 0%, transparent 70%,rgba(151, 151, 151,0.07) 70%, rgba(151, 151, 151,0.07) 81%,transparent 81%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 32%,rgba(151, 151, 151,0.07) 32%, rgba(151, 151, 151,0.07) 33%,transparent 33%, transparent 100%),linear-gradient(90deg, rgb(0,0,0),rgb(0,0,0));
}
.po{
font-family: "Luckiest Guy", cursive;
font-size: 20px;
color: white;
font-size: 30px;
}
.wrapper{
background-image: radial-gradient(circle at 90% 24%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 50%,rgba(160, 160, 160,0.04) 50%, rgba(160, 160, 160,0.04) 100%),radial-gradient(circle at 91% 63%, rgba(45, 45, 45,0.04) 0%, rgba(45, 45, 45,0.04) 50%,rgba(87, 87, 87,0.04) 50%, rgba(87, 87, 87,0.04) 100%),radial-gradient(circle at 17% 2%, rgba(124, 124, 124,0.04) 0%, rgba(124, 124, 124,0.04) 50%,rgba(117, 117, 117,0.04) 50%, rgba(117, 117, 117,0.04) 100%),linear-gradient(88deg, rgb(33, 20, 105),rgb(1, 15, 13));
}
h2{
	margin: 0;
  font-size: 8em;
  padding: 0;
  color: white;
  text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
    0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
    0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
    -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
  span {
    transform: scale(0.9);
    display: inline-block;
  }
  span:first-child {
    animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite
      alternate;
  }
  span:last-child {
    animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
      infinite alternate;
  }
}

@keyframes bop {
  0% {
    transform: scale(0.9);
  }
  50%,
  100% {
    transform: scale(1);
  }
}

@keyframes bopB {
  0% {
    transform: scale(0.9);
  }
  80%,
  100% {
    transform: scale(1) rotateZ(-3deg);
  }
}
h3{
font-family: 'Roboto Slab';	
}
.service-desc{
font-family: 'Roboto Slab';
}	
.media{
background: url(https://i.pinimg.com/originals/b0/a8/ff/b0a8ff43c9c21062dcce0b066c60053b.gif);	
}	
.pt{
font-family: 'Roboto Slab';	
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 95px;
  text-align: center;
  text-decoration: none;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 90px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 95%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}
.fa-vimeo {
  background: #45bbff;
  color: white;
}
.fa-whatsapp {
  background: #00b489;
  color: white;
}