style.css.bak

html {
 font-family: sans-serif;
 line-height: 1.15;
 -webkit-text-size-adjust: 100%;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
 margin: 0;
 font-family: "Roboto", sans-serif;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 color: #6c757d;
 text-align: left;
 background-color: #ffffff;
}

.btn {
 padding: 10px 25px;
 border-radius: 100px;
}
.btn-social {
 width: 45px;
 height: 45px;
 padding-left: 0;
 padding-right: 0;
 text-align: center;
 border-radius: 45px;
}
.form-control {
 border-radius: 25px;
}
/* ================ Navigation Menu ====================*/
.navbar-light {
 display: none;
}
.navbar-light .navbar-nav .nav-link {
 padding: 25px 10px;
 color: #343a40;
 font-weight: 500;
 outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
 color: #0BCEAF;
}
@media (max-width: 991.98px) {
 .navbar-light .navbar-nav .nav-link {
 padding: 10px 0;
 }
}

.about-img{
margin-left: -100px;
right: -65px;
}
.display-1{
 font-size: 160px;
 font-weight: 1000;

} 	

@media (max-width: 700px) {
 .about-img{
 margin-left: 20px;
 right: 0px;
 top: 30px;
 }
}


.scroll-to-bottom {
 position: fixed;
 width: 20px;
 left: calc(50% - 10px);
 bottom: 30px;
 z-index: 11;
 animation: action 1s infinite alternate;
}

@keyframes action {
 0% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(-15px);
 }
}

/*====================== customer ratings ==================*/
* {
  box-sizing: border-box;
}

.ratings{
  font-family: Arial;
  margin: 0 auto; 
  max-width: 800px; 
  padding: 20px;
}

.heading {
  font-size: 25px;
  margin-right: 25px;
}

.fa {
  font-size: 25px;
}

.checked {
  color: orange;
}

/* Three column layout */
.side {
  float: left;
  width: 15%;
  margin-top:10px;
}

.middle {
  margin-top:10px;
  float: left;
  width: 70%;
}

/* Place text to the right */
.right {
  text-align: right;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */
.bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

/* Individual bars */
.bar-5 {width: 90%; height: 18px; background-color: #04AA6D;}
.bar-4 {width: 75%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 65%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 80%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 95%; height: 18px; background-color: #f44336;}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .side, .middle {
    width: 100%;
  }
  .right {
    display: none;
  }
}