*{
    border: none;
        font-family: "Roboto", sans-serif;

}
body{
    background: #f5f5f5;
}

.home{
    background-image:linear-gradient(rgba(0,0, 0, .5),rgba(0, 0, 0, .5)) ,url(../images/hero-bg.jpg);
    
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    background-attachment: fixed;
}
.home h1{
    font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-size: 72px;
        position: relative;
}
.font0{
    font-size: 16px;
    font-weight: 600;
}
.contant {
    transform: scale(.9);
}
 .hedar h1::after{
    content: "|";
position: absolute;
top: 100%;
left: 40%;
animation-name: word;
animation-iteration-count: infinite;
animation-duration:5s;
font-family: "Roboto", sans-serif;
        font-weight: 600;
        font-size: 40px;
/* animation-direction: alternate; */
}
@keyframes word{
    0%{
        content: "De|";
    } 
    2%{
        content: "Des|";
    } 
    4%{
        content: "Desi|";
    } 
    6%{
        content: "Desig|";
    } 
    8%{
        content: "Design|";
    } 
    10%{
        content: "Designe|";
    } 
    12%{
        content: "Designer|";
    } 
    14%{
        content: "Designe|";
    }
    16%{
        content: "Design|";
    }
    18%{
        content: "Desig|";
    } 
    20%{
        content: "Desi|";
    } 
    22%{
        content: "Des|";
    }
    24%{
        content: "De|";
    } 
    25%{
        content: "|";
    }
    26%{
        content: "F|";
    }
    28%{
        content: "Fr|";
    }
    30%{
        content: "Fre|";
    }
    32%{
        content: "Free|";
    }
    34%{
        content: "Freel|";
    }
    34%{
        content: "Freela|";
    }
    36%{
        content: "Freelan|";
    }
    38%{
        content: "Freelanc|";
    }
    40%{
        content: "Freelance|";
    }
    42%{
        content: "Freelancer|";
    }
    44%{
        content: "Freelance|";
    }
    46%{
        content: "Freelanc|";
    }

    48%{
        content: "Freelan|";
    }
    50%{
        content: "Freela|";
    }
    52%{
        content: "Free|";
    }
    54%{
        content: "Fre|";
    }
    56%{
        content: "Fr|";
    }
    58%{
        content: "F|";
    }
    59%{
        content: "|";
    }
    60%{
        content: "D|";
    }
    62%{
        content: "De|";
    }
    64%{
        content: "Dev|";
    }
    66%{
        content: "Deve|";
    }
    68%{
        content: "Devel|";
    }
    70%{
        content: "Develo|";
    }
    72%{
        content: "Develop|";
    }
    74%{
        content: "Develope|";
    }
    76%{
        content: "Developer|";
    }
    78%{
        content: "Develope|";
    }
    80%{
        content: "Develope|";
    }
    82%{
        content: "Develo|";
    }
    84%{
        content: "Devel|";
    }
    86%{
        content: "Deve|";
    }
    88%{
        content: "Dev|";
    }
    90%{
        content: "De|";
    }
    92%{
        content: "D|";
    }
    94%{
        content: "|";
    }
}
.font2{
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
color: #4E4E4E;

}
.font{

    font-family: "Roboto", sans-serif;

}
.hr{
    color: #0d6efd;
    background-color: #0d6efd;
   
    width: 90px;
height: 3px;
}
.icon{
    font-size: 25px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 7px #0d6efd ;
    border-radius: 50%;
    margin-top: 6px;
    transition: all 500ms ease;
}
.contant{
    background-color: white !important;
    transition: all 500ms ease;
}
.contant:hover .icon {
    background-color: #0078ff;
    color: #fff;
    box-shadow: 0 0 0 7px #cde1f8;
    transform: scale(1.002);
  
  }
  .h{
    color: #0d6efd;
    background-color: #0d6efd;
   
    width: 40px;
height: 5px;
  }
  .con{
    font-size: 25px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 10px #e8e9ec ;
    border-radius: 50%;
    margin-top: 6px;
    color: #e8e9ec;
  }
  .page{
    background-image:linear-gradient(rgba(39,117,209,.8),rgba(39,117,209,.8)) ,url(../images/counters-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .back3{
    background-color: #1971d6a8;
  }
  .color4{
    background-color: rgba(255, 255, 255, 0) !important;
  }
  .font3{
    font-size: 22.7px;
    font-weight: 500;
  }
  .font4{
    color: #4E4E4E;
    font-size: 16;
    font-weight: 400;
  }
  .font5{
    font-size: 48px;
    font-weight: 700;
  }
  .over{
    overflow: hidden;
    margin-bottom: 10px;
  }
  .photo5 img{
    transition: 2s;

  }
.photo5 img:hover{
    transform: scale(1.5);
}
.l i{
    color: #0d6efd;
   
    border: 3px solid #0d6efd;
    padding-top: 5px;
  height: 30px;
  width: 30px;
    text-align: center;
    border-radius: 50%;
}
.font7{
 
    font-size: 12.8px;
    font-weight: 400;
    color: #4E4E4E;
}
.font8{
 
    font-size: 12.8px;
    font-weight: 400;
    color: #0d6efd;
}
.bu{
height: 15px !important; 
width: 15px !important;
background-color: #e8e9ec !important;
border-radius: 50% !important;
}
.BAW{
    background-image:linear-gradient(rgba(39,117,209,.8),rgba(39,117,209,.8)) ,url(../images/overlay-bg.jpg); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;   
}
.tp{
    bottom: -10px;
  transform: translatex(-50%);
}
.ph{
    height: 40px;
    width: 40px;
    border-radius: 50%;

}
.lf i{
    width: 30px;
    height: 30px;
    color: #4E4E4E;
}
.w90{
   background-color: #f8f8f8;

}
.ss{
    transition: .5s;
}
.ss:hover{
    color: #0078ff;
}
.wd90{
    width: 90%;
}
.contact{
    background-image:linear-gradient(rgba(39,117,209,.8),rgba(39,117,209,.8)) ,url(../images/overlay-bg.jpg); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;   

}
.bd{
    border: .5px solid #c1c1c1;
    border-radius: 4px;
}
.brl{
    border: .5px solid #797979;
    border-radius: 4px;
    border-top: none;
}

.hg{
    height: 50px;
    border: 1px solid #c1c1c1 ;
    border-radius: 3px;
}
.hg2{
    height: 100px;
    border: 1px solid #c1c1c1 ;
    border-radius: 3px;
}
.y90{
    width: 80%;
}
.hg3{
    height: 40px;
    width: 40px;
    border:  solid ;
}
.ico{
    transition: .5s;
}
.ico:hover{
    background-color: #0078ff;
    color: white;
    box-shadow: 0 0 0 5px #cde1f8;
    transform: scale(1.002);

}
.f20{
    font-size: 20px;
    font-weight: 300;
    color: #4E4E4E;
}
.fn16{
    font-size: 16px;
    font-weight: 400;
    color: #4E4E4E;
}