@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

html,
body {
  height: 100%;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
}
#header
{
  background-image: url('../img/bg.png');
  background-size: cover;
  background-position: center center;
}
.navbar-brand {
  color: #fff !important;
}
.nav-link{
  color: #fff !important;
}
.hero-header{
  padding-top: 7rem !important;
}
.active{
  color: tomato !important;
}
h1 span{
  color: tomato;
}
#header .container h1{
  color: #fff;
}
#header .container  p{
  color: #b7b7b7;
}
.hero-btn{
  width: 12rem;
  border-radius: 50px;
  color: #fff;
  border: 2px solid tomato;
  outline: none;
  box-shadow: none !important;
  margin-bottom: 1rem;
  
}
.download-btn{
  background: tomato;
}
.download-btn:hover{
  color: #fff;
}
.hire-btn{
  margin-right: 2rem;
}
.hire-btn:hover{
  background: tomato;
  transition: .5s;
  color: #fff;

}


.futured-icon{
  width: 7rem;
  height: 6rem;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 3rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.p-title{
  font-size: .8rem;
}
.p-desc{
  font-size: .8rem;
}
.avatar-image{
  border-right: 6px solid tomato;
    border-bottom: 6px solid tomato;
}
.progress-bar{
  background-color: tomato !important;
}
.progress-title{
  font-size: .8rem;
}
.card-body h3{
  font-size: 1.3rem;
  font-weight: 700;
  padding-top: .5rem;
}
.card{
  border: none !important;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}
.card:hover{
  box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);
}
.card-body p{
  font-size: .8rem;
}
#services{
  background-color: #f0f0f0;
}
#contact{
 background: rgb(42 48 63);
}
.contact h1{
  color: #fff;
}
.slogan{
  color: tomato;
}
input, textarea{
  background: #222429 !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  color: #fff !important;
}
.contcat-btn{
  width: 9rem;
  border: 2px solid tomato;
  border-radius: 50px;
  color: #fff;
}
.contcat-btn:hover{
  color: #fff !important;
  background: tomato !important;
  transition: .5s !important;
  border-color: tomato;
}
.container h1{
  font-weight: 700;
}
.navbar-light .navbar-toggler-icon {

 background:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='tomato' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.navbar-light .navbar-toggler {
  color: rgb(255 99 71) !important;
  /* border-color: rgba(0,0,0,.1); */
  border: 1px solid tomato !important;
  box-shadow: none !important;
}
.change-nav-bg{
  background: #2d3341;
}

#button {
  display: none;
  background-color: tomato;
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s;
  z-index: 9999999;
}

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 40px;
  color: #fff;
}
.show-icon{
  display: inline-block !important;
}
@media(max-width:991px)
{
  .top-nav-mobile {
    background: #2d3341;
    
}

}