* {
  box-sizing: border-box;
}
.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

.popup-social-contact li {
  margin-top: 20px;
  list-style: none;
  display: inline-block;
  padding-left: 6px;
  font-size: 32px;
 letter-spacing: 25px;
}
.popup-social-icons {
 margin-top: 20px;
  list-style: none;
  display: inline-block;
  padding-left: 6px;
  font-size: 32px;
 letter-spacing: 25px;
}
a{
  color: black;
}
.nav-link{
  color: black;
}
.overlay.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
}
.box-title1 {
  background-color: #008bba50;
}
.box-title2 {
  background-color: rgba(255, 166, 0, 0.425);
}
.box-title3 {
  background-color: rgba(255, 0, 0, 0.356);
}
.box-title4 {
  background-color: rgba(94, 255, 0, 0.466);
}
.box-title5 {
  background-color: rgba(255, 230, 0, 0.479);
}
.box-title6 {
  background-color: rgba(0, 81, 255, 0.479);
}
.box-title7 {
  background-color: rgba(255, 0, 234, 0.479);
}
.box-title8 {
  background-color: rgba(0, 0, 0, 0.479);
}
.b1:hover  .overlay {
  opacity: 1;
}
.b2:hover  .overlay {
  opacity: 1;
}
.b3:hover  .overlay {
  opacity: 1;
}
.b4:hover  .overlay {
  opacity: 1;
}
.b5:hover  .overlay {
  opacity: 1;
}
.b6:hover  .overlay {
  opacity: 1;
}
.b7:hover  .overlay {
  opacity: 1;
}
.b8:hover  .overlay {
  opacity: 1;
}




.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.row-1, .row-2, .row-3{
    margin-bottom: 20px;
}
.modal-dialog{
    max-width: 800px;
}
.contact{
  background-color: rgb(243, 243, 243);
  margin-top: 20px;
  padding-top: 40px;
}
#send-btn{
border-radius: 15px;

}