/*gold rank technicians styling*/

.technicians{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 40px;
}
.top h1{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: -13px;
    margin-top: 10px;
    text-align: center;
    justify-content: center;
}
.technician-single{
    height: 380px;
    width: 270px;
    border-radius: 20px;
    margin: 3px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.cover-image img{
    height: 150px;
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}
.profile-image img{
    height: 100px;
    width: 100px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: 85px;
}
.technician-det{
    text-align: center;
    text-decoration: none;
}
.technician-det h1{
    color: black;
    font-size: 20px;
    text-decoration: none;
    margin-top: 10px;
}
.technician-det h5{
    color: black;
    font-size: 12px;
    opacity: 70%;
    text-decoration: none;
    text-transform: uppercase;
}
.technician-det h4{
    color: red;
    font-size: 18px;
    text-decoration: none;
}
.rating-vote-view{
    display: flex;
    justify-content: center;
}
.rating-vote-view h3{
    font-size: 10px;
    color: red;
    padding: 10px;
    margin-bottom: -5px;
    text-decoration: none;
}
.rating-vote-view h3:hover{
    text-decoration: underline white;
}
.rating-vote-view:hover h3{
    text-decoration: underline white;
}
.rating-vote-view h2{
    font-size: 10px;
    color: black;
    padding: 10px;
    margin-top: -10px;
}
.rating-vote-view i{
    color: black;
    transform: translateX(18px);
}

/*silver rank technicians styling*/
.item-a{
    background: silver;
    border-radius: 20px;
}
.silver-technician-single{
    height: 370px;
    width: 230px;
    border-radius: 20px;
    margin: 3px;
}
.cover-image img{
    height: 150px;
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}
.silver-profile-image img{
    height: 100px;
    width: 100px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: 65px;
}
.silver-technician-det{
    text-align: center;
    text-decoration: none;
}
.silver-technician-det h1{
    color: black;
    font-size: 20px;
    text-decoration: none;
    margin-top: 10px;
}
.silver-technician-det h5{
    color: black;
    font-size: 12px;
    opacity: 70%;
    text-decoration: none;
    text-transform: uppercase;
}
.silver-technician-det h4{
    color: red;
    font-size: 18px;
    text-decoration: none;
}
.silver-rating-vote-view{
    display: flex;
    justify-content: center;
}
.silver-rating-vote-view h3{
    font-size: 10px;
    color: red;
    padding: 10px;
    margin-bottom: -5px;
}
.silver-rating-vote-view h2{
    font-size: 10px;
    color: black;
    padding: 10px;
    margin-top: -10px;
}
.silver-rating-vote-view i{
    color: black;
    transform: translateX(18px);
}

/*bronze rank technicians styling*/
 
.bronze-technician-single{
    height: 300px;
    width: 200px;
    border-radius: 20px;
    margin: 11px;
    background: rgb(205, 127, 50);
}
.cover-image img{
    height: 130px;
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}
.bronze-profile-image img{
    height: 80px;
    width: 80px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: 60px;
}
.bronze-technician-det{
    text-align: center;
    text-decoration: none;
}
.bronze-technician-det h1{
    color: black;
    font-size: 18px;
    text-decoration: none;
    margin-top: 10px;
}
.bronze-technician-det h5{
    color: black;
    font-size: 12px;
    opacity: 70%;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: -5px;
}
.bronze-technician-det h4{
    color: white;
    font-size: 16px;
    text-decoration: none;
    margin-top: -5px;
}
.bronze-rating-vote-view{
    display: flex;
    justify-content: center;
    margin-top: -5px;
}
.bronze-rating-vote-view h3{
    font-size: 10px;
    color: white;
    padding: 10px;
    margin-bottom: -10px;
}
.bronze-rating-vote-view h2{
    font-size: 10px;
    color: black;
    padding: 10px;
    margin-top: -10px;
}
.bronze-rating-vote-view i{
    color: black;
    transform: translateX(18px);
}
@media only screen and (max-width: 768px){
    .technician-single{
        height: 290px;
        width: 156px;
        border-radius: 20px;
        margin: 4px;
        margin-top: 20px;
    }
    .cover-image img{
        height: 100px;
    }
    .profile-image img{
        height: 70px;
        width: 70px;
        margin-top: -40px;
        margin-left: 40px;
    }
    .technician-det h4{
        font-size: 15px;
    }
    .silver-technician-single{
        height: 285px;
        width: 160px;
        border-radius: 20px;
        margin: 7px;
    }
    .cover-image img{
        height: 100px;
        width: 100%;
    }
    .silver-profile-image img{
        height: 70px;
        width: 70px;
        margin-top: -40px;
        margin-left: 40px;
    }
    .bronze-technician-single{
        height: 270px;
        width: 150px;
        border-radius: 20px;
        margin: 7px;
    }
    .cover-image img{
        height: 100px;
    }
    .bronze-profile-image img{
        height: 70px;
        width: 70px;
        margin-top: -40px;
        margin-left: 40px;
    }
}
/*==================styling for technician registration form====================*/
.account-form button{
    color:white;
    background:black;
}
.account-form button:hover{
    background:red;
    border: red;
}
.account-form {
    height: auto;
    width: 100%;
    background: inherit;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.account-form::before {
    height: auto;
    width: 100%;
    background: inherit;
    filter: blur(10px);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
label{
    color: red;
}

@media only screen and (max-width: 768px) {
    .affiliate-form{
        height: auto;
        width: auto;
        margin-left: 0%;
    }
    .carousel-caption h4{
        margin-top: -10px;
        font-size: 25px;
        line-height: 25px;
    }
  }



  /*==================styling for technician dashboard form====================*/
  .technician-header{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: red;
  }
  .technician-header h1{
    color: white;
    font-size: 30px;
    justify-content: center;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
.tech-cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.admin-cards-single{
    height: 110px;
    width: 210px;
    justify-content: center;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin: 20px;
    transition: 0.3s;
  }
  .card-icon i{
    font-size: 20px;
    width: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 43px;
    border-radius: 50%;
    background: red;
    color: white;
    transform: translateY(15px);
    margin-left: 83.5px;
  }
  .card-text-detailes h2{
    font-size: 18px;
    color: gray;
    text-align: center;
    margin-top: 10px;
    text-decoration: none;
  }
  .admin-cards-single:hover h2{
    text-decoration: underline white;
  }
  .cover-imag img{
    margin-top: 5px;
    height: 300px;
    width: 100%;
  }
  .profile-imag img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-top: -120px;
    margin-left: 40%;
    margin-bottom: 10px;
  }
  .profile-vote{
    text-align: center;
  }
  .profile-vote h1{
    font-size: 20px;
    margin-top: 20px;
  }
  .profile-vote h2{
    height: auto;
    width: 300px;
    background: red;
    color: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 36%;
    margin-bottom: 20px;
  }
  .prfile h1{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: -10px;
    color: red;
  }
  .profile-body {
    height: auto;
    width: auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin: 20px;
  }
  .profile-body h3{
    color: black;
    font-size: 20px;
    text-align: center;
    margin: 10px;
  }
  .profile-body h1{
    opacity: 0%;
    font-size: 25px;
  }
 
  @media (max-width: 768px){
    .profile-body h3{
        font-size: 13px;
      }
    .cover-imag img{
        margin-top: 5px;
        height: 200px;
        width: 100%;
      }
      .profile-imag img{
        height: 140px;
        width: 140px;
        border-radius: 50%;
        margin-top: -85px;
        margin-left: 29%;
      }
      .admin-cards-single{
        height: 80px;
        width: 150px;
        border-radius: 10px;
        margin: 6px;
      }
      .card-icon i{
        font-size: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transform: translateY(1px);
        margin-left: 60px;
      }
      .profile-vote h2{
        margin-left: 4%;
      }
  }

  /*technicians detils styling*/
  .single-project{
    height: 400px;
    width: 22%;
    border-radius: 5px;
    margin: 10px;
    border: 1px solid black;
  }
  .single-project img{
    height: 60%;
    width: 100%;
    border-radius: 5px 5px 0px 0px;
  }
  .single-project h4{
    text-align: center;
    width: 300px;
  }
  .projects{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .detiled-info h1{
    text-align: center;
    font-size: 20px;
    color: black;
    margin-bottom: -10px;
  }
  .detiled-info hr{
    color: red;
  }
  .profession{
    display: flex;
    flex-wrap: wrap;
  }
  .profession i{
    margin-right: 10px;
    color: red;
  }
  .profession h3{
    font-size: 18px;
    font-weight: 400;
    color: black;
  }
  .location{
    display: flex;
    flex-wrap: wrap;
  }
  .location i{
    margin-right: 10px;
    color: red;
    font-size: 20px;
  }
  .location h3{
    font-size: 18px;
    font-weight: 400;
    color: black;
  }
  .cont-bton{
    display: flex;
  }
  .cont-bton button{
    background: black;
    color: white;
    width: 40%;
    border-radius: 7px;
    height: auto;
    margin: 5%;
  }
  .cont-bton button:hover{
    background: red;
  }
  .booking-inner h5{
    text-align: center;
    font-size: 22px;
  }
  .booking-inner input{
    width: 80%;
    margin-left: 10%;
    height: 45px;
    margin-top: 6px;
    margin-bottom: -20px;
  }
  .buton{
    margin: 15%;
    width: 70%;
    height: 40px;
    border-radius: 5px;
    background-color: red;
    color: black;
  }
  .single-project p{
    margin: 10px;
  }
  @media (max-width: 768px){
    .single-project{
        height: 400px;
        width: 90%;
        margin: 10px;
        border: 1px solid rgb(143, 16, 16);
      }
      .single-project img{
        height: 60%;
      }
      .cont-bton button{
        background: black;
        color: white;
        width: 46%;
        border-radius: 7px;
        font-size: 13px;
        height: auto;
        margin: 2%;
      }
      .cont-bton{
        margin-top: 20px;
      }
      .cont-bton i{
        font-size: 25px;
      }
    }