html {
  scroll-behavior: smooth;
}
*{
text-transform: capitalize;
margin: 0;
padding: 0;
}
ul,ol{
list-style-type: none;
}
.container{
width: 90%;
}
.main-title h2{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
}
.main-title h6{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-top: 0;
margin-bottom: 1rem;
font-weight: 300;
}
.main-title .line{
width: 40px;
height: 5px;
background-color: #0078ff;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* Start NAVBar  */
.navbar-toggler{
  border: 0;
  display: flex;
  flex-direction: column;
}
.navbar-toggler:focus{
  box-shadow: none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-child(1){
  transform: rotate(45deg);

}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-child(2){
display:none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-child(3){
  transform: rotate(135deg);
  margin-top: -6px;
}
.navbar-toggler .navbar-toggler-icon{
background: 0;
background-color: #fff;
height: 2px;
margin-bottom: 4px;
transition: .2s all ease-in-out;
}
.navbar-toggler .navbar-toggler-icon:nth-child(2){
  margin-left:4px ;
}
.navbar {
position: fixed;
width: 100%;
z-index: 100;
color: #fff;
}
.navbar-brand{
color: rgb(255, 255, 255);
font-size: 25px;
width: 500;
}
.container .navbar-collapse ul{
display: flex;
justify-content: flex-end;
width: 80%;
font-size: 20px;
font-weight: 400;
margin-left: 50px;
}
.navbar .container .navbar-collapse ul a{
color: #fff;
margin-left: 15px;
}
.navbar .container .navbar-collapse ul a:hover{
color: #0078FF;
}
/* End NAVBAR  */

/* Start Landing  */
.landing{
width: 100%;
background-image: url(../image/intro-bg.jpg);
height: 100vh;
background-size: cover;
background-position: center, center;
background-attachment: fixed;
}
.landing .main-landing{
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
width: 100%;
text-align: center;
}
.landing .main-landing h1{
font-size:65px;
font-weight: 700;
line-height: 1.5;
}
.landing .main-landing h2{
font-size:36px;
font-weight: 200;
}
.landing .main-landing h2::before{
content: "|";
animation-name: typing;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes typing{
0% {
content: "w | ";
}
5%{
content: "we|";
}
10% {
content: "web|";
}
15% {
content: "web d|";
}
20% {
content: "web de|";
}
25% {
content: "web dev|";
}
30% {
content: "web deve|";
}
35% {
content: "web devel|";
}
40% {
content: "web develo|";
}
45% {
content: "web develop|";
}
50% {
content: "web developer|";
}
60% {
content: "web develop|";
}
65% {
content: "web develo|";
}
70% {
content: "web devel|";
}
75% {
content: "web deve|";
}
80% {
content: "web dev";
}
85% {
content: "web de|";
}
90% {
content: "web|";
}
95% {
content: "we|";
}
100% {
content: "w|";
}
}
/* End Landing */
/* Start Section About  */
.about-me .container{
background-color: #fff;
}
.about-me .card ul li{
font-size: 18px;
line-height: 2.2 ;
}
.about-me .card ul li span{
font-weight: 600;
}
.items {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.items .item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
margin: 16px;
}
.items .item h2,h3 {
font-size: 1.25rem;
font-weight: 200;
}
.items .item .line1 {
position: absolute;
width: 100%;
height: .625rem;
background-color: #0077ff2d;
flex-direction: column;
display: flex;
}
.items .item .line-1 {
position: absolute;
width: 65%;
height: .625rem;
background-color: #0078FF;
flex-direction: column;
}
.items .item .line-2 {
position: absolute;
width: 75%;
height: .625rem;
background-color: #0078FF;
flex-direction: column;
}
.items .item .line-3 {
position: absolute;
width: 50%;
height: .625rem;
background-color: #0078FF;
flex-direction: column;
}
.items .item .line-4 {
position: absolute;
width: 90%;
height: .625rem;
background-color: #0078FF;
flex-direction: column;
}
.about-info span{
margin-bottom: 30px;
width: 25%;
height:4px;
background-color: #0078FF;
display: block;
font-size: 35px;
}
.about-info p{
font-weight: 200;
font-size: 1.25rem;
}
/* End Section About  */

/* Start Section Services  */
.services-icon{
width: 100px;
height: 100px;
margin: auto;
outline: 10px solid #0077ffcb;
margin-bottom: 30px;
transition: all .5s ease-in-out;
}
.services-icon i{
font-size: 50px;
}
.services-icon:hover{
color: #fff;
outline: 10px solid #0077ff46;
background-color: #0077ffcb;
}
.services-info{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.services-info h3{
font-size: 25px;
font-weight: 500;
margin:10px 0;
color: #0078FF;
}
.services-info p{
font-size: 16px;
font-weight: 400;
margin:10px 0;
}
/* End Section Services  */

/* Start section four  */
.four {
background-image: url(../image/counters-bg.jpg);
background-position: center, center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-attachment: fixed;
}
.four .items {
background-color: #0077ffa1;
}
.four .items .main-card{
margin: 100px 20px;
padding-top: 20px;
}
.four-icon{
width: 90px;
height: 90px;
margin: auto;
outline: 8px solid #cfddee94;
}
.four-icon i{
font-size: 50px;
color: #fff;;
text-align: center;
}
.four-title{
text-align: center;
color: #fff;
margin-top: 20px;
}
.four-title h2{
font-size: 60px;
font-weight: 200;
}
.four-title h3{
font-size: 18px;
font-weight: 400;
}
/* End section four  */

/* Start section Five  */
.port-card:hover .port-img img{
transform: scale(1.1);
}
.port-card .port-img{
overflow: hidden;
}
.port-card .port-img img{
transition:.5s all  ease-in-out;
}
.port-info p{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 300;

}
.port-info span{
font-size: 14px;
font-weight: 100;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #0078FF;
}
.port-info h4{
  font-size: 18px;
}
.port-info h5{
  font-size: 18px;
  font-weight: 200;
}
.port-icon{
margin-top: 30px;
font-size: 25px;
font-weight: lighter;
width: 30px;
height: 30px;
outline: 1px solid #0078FF;
}
.port-icon i{
color: #0077ff91;
border-radius: 50%;
}
/* End section Five  */

/* Start section Six  */
.six{
background-image: url(../image/overlay-bg.jpg);
background-position: center , center ;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 50px 0;
position: relative;
}
.six .layer{
background-color: #0077ff93;
position: absolute;
height: 100%;
width: 100%;
opacity: .8;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.six .six-img {
width: 10%;
border-radius: 50%;
margin:auto ;
}
.carousel-inner .carousel-item{
margin-top: 20px;
}
.carousel-item  .carousel-caption{
padding-top: 0;
position: unset;
FONT-WEIGHT: 60px;
padding-bottom: 60px;
}
.carousel-item  .carousel-caption h5{
font-size: 30px;
margin-top: 50px;
}
.carousel-item  .carousel-caption p{
font-size: 16px;
}
.six-icon{
width: 50px;
height: 50px;
margin: auto;
}
.six-icon i{
font-size: 50px;
}
/* End section six  */

/* start section seven  */
.blog-left img{
  width: 30px;
  height: 30px;
  margin-top: 7px;
}
.blog-right i{
  margin-top:11px ;
  margin-left:70px ;
}
.blog-right p{
  margin-top: 5px;
  margin-left: 2px;
}

/* End section seven  */

/* Start section Eight  */
.contact{
  background-image: url(../image/overlay-bg.jpg);
  background-attachment: fixed;
  background-position: center, center;
  background-repeat: no-repeat;
  position: relative;

}
.contact .overlay{
  background-color: #0078FF;
  opacity: .7;
  /* width: 100%;
  height: 100%; */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
}
.color-row{
  position: relative;
  z-index: 1;
}
.contact-info span{
margin-bottom: 30px;
width: 25%;
height:4px;
background-color: #195faf;
display: block;
font-size: 35px;
}
.contact-info p{
font-size: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 300;
line-height: 1.8;
}
span i{
font-size:18px;
color: #0078FF;
}
h6{
font-size:18px;
font-weight: 200;
margin-left: 20px;
}
.social-list{
margin-top: 20px;
}
.social-list i {
font-size:16px;
color: #000000;
transition: all .51s ease-in-out;
}
.social-list .icon{
width: 30px;
height: 30px;
transition: all .51s ease-in-out;
}
.social-list .icon:hover {
color: #fff;
background-color: #0078FF;
}
.social-list .icon:hover i {
color: #fff;
}
.contact .row h5{
  position: relative;
  text-align: center;
  top: 20px;
  font-size: 16px;
  font-weight: 400;
}