Not Responsive

The problem is this rule in your custom CSS:

.carousel-inner img {
   width: 100%;
   height: 450px !important;
   display: block !important;
}

So when you set the height to a fixed 450px, then it’s not going to scale proportionally as the width shrinks. In fact, on a desktop, the image looks squished vertically because of that fixed height.

So what you can do for a tablet or cell phone is add a media query that sets the height to auto. Add this to the end of your custom CSS:

@media only screen and (max-width: 768px) {
  .carousel-inner img {
   height: auto !important;
   }
}

By the way, you have a syntax error which is causing the bottom half of your custom CSS to not be in effect. Look for these lines:

@media only screen and ( min-width: 981px ) {
.enigma_service_area:hover .enigma_service_iocn i {
    color: white !important;
}
  @media (max-width:767px){
.nav.navbar-nav {
  text-align: center !important;
}
}

You are missing a closing right brace } before the second media query. That’s causing the rest of the CSS to not work.