@font-face {
    font-family: 'MyWebFont';
    src: url("../fonts/OpenSans-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url("../fonts/OpenSans-Light.ttf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url("../fonts/OpenSans-Italic.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'MyWebFont';
    src: url("../fonts/OpenSans-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url("../fonts/OpenSans-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: 'FontLato';
    src: url("../lato/Lato-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontLato';
    src: url("../lato/Lato-Italic.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'FontLato';
    src: url("../lato/Lato-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FontLato';
    src: url("../lato/Lato-Light.ttf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'FontLato';
    src: url("../lato/Lato-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}
/* line 35, ../scss/modules/_typography.scss */
body {
    font-family: 'MyWebFont', Raleway, sans-serif,'FontLato';
    /*color: #002b49;*/
    font-weight: normal;
    overflow-x: hidden;
}

header {
    width: 100%;
    border-left: none;
    border-right: none;
    position: relative;
    overflow: hidden;
}
header>img{
  width: 100%;
}

/* line 1, ../scss/layouts/_side_bar.scss */
.navigation {
    z-index: 999;
    position: relative;
    /*padding: 20px 0px 4px 0px;*/

}

/* Remove margins and padding from the list, and add a black background color */
/* line 11, ../scss/layouts/_side_bar.scss */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    /* Float the list items side by side */
    /* line 19, ../scss/layouts/_side_bar.scss */
    ul.topnav li {
        float: right;
    }

        /* line 21, ../scss/layouts/_side_bar.scss */
        .navbar .logo {
            float: left;
            height: 80px;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

            /* line 23, ../scss/layouts/_side_bar.scss */
            ul.topnav li.logo img {
                    width: 410px;
            }
          @media screen and (max-width: 768px){
          .navigation {
                background: #ffffff!important;
            }
            .navbar ul li a{
              font-size: 16px;
              font-weight: 500;
              text-align: left;
            }
            .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
                padding: 5px 16px 5px 50px;
            }
          }
          .navbar-toggle .icon-bar{
          background-color: #253553;
          }
          .navbar{
            margin-bottom: 0;
          }
        /* line 28, ../scss/layouts/_side_bar.scss */
        ul.topnav li.nav-items {
            margin: 20px 12px 0 16px;
        }
        .navbar-nav>li>a {
            margin-top: 30px;
        }
        /* Style the links inside the list items */
        /* line 30, ../scss/layouts/_side_bar.scss */
        nav ul li a {
            display: inline-block;
            color: #33465f;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
        }
.dropdown-menu li a{
  color: #fff;
  font-weight: 600;
  text-align: left;
}
.dropdown-menu{
  border: none;
  background-color: #21c1db;
  color: #fff;
}
.dropdown-menu li {
  color: #fff;

}
.dropdown-menu li a:hover{
  color: #fff;
  background-color: #33465f;
}


/*.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #fff;
    border-color: #337ab7;
}*/
            /* line 39, ../scss/layouts/_side_bar.scss */
            ul.topnav li a.menu-icon {
                font-size: 28px;
            }

            /* Change background color of links on hover */
            /* line 41, ../scss/layouts/_side_bar.scss */
            ul.topnav li a:hover {
                color: #ffffff;
            }
          ul.topnav li.home a:hover{
             color: #9dbbe3;
            }

    /* line 45, ../scss/layouts/_side_bar.scss */
    ul.topnav .active {
        color: #9dbbe3;
    }

    /* Hide the list item that contains the link that should open and close the topnav on small screens */
    /* line 50, ../scss/layouts/_side_bar.scss */
    ul.topnav li.icon {
        display: none;
    }

@media screen and (max-width: 320px) {
    /* line 54, ../scss/layouts/_side_bar.scss */
    ul.topnav li.nav-items {
        margin: 12px 0 !important;
    }

    /* line 58, ../scss/layouts/_side_bar.scss */
    ul.topnav li.icon {
        width: 24px !important;
    }
}

@media screen and (max-width: 768px) {
    /* line 66, ../scss/layouts/_side_bar.scss */
    ul.topnav li.nav-items {
        margin: 0px 24px 0px 0px;
    }

    /* line 67, ../scss/layouts/_side_bar.scss */
    ul.topnav li:not(:first-child) {
        display: none;
    }

    /* line 68, ../scss/layouts/_side_bar.scss */
    ul.topnav li.icon {
        float: right;
        display: inline-block;
        width: 10px;
    }

    /* line 74, ../scss/layouts/_side_bar.scss */
    ul.topnav li a {
        font-size: 20px;
    }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width: 768px) {
    /* line 83, ../scss/layouts/_side_bar.scss */
    ul.topnav.responsive {
        position: relative;
    }

        /* line 84, ../scss/layouts/_side_bar.scss */
        ul.topnav.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        /* line 89, ../scss/layouts/_side_bar.scss */
        ul.topnav.responsive li {
            float: none;
            display: inline;
        }

            /* line 93, ../scss/layouts/_side_bar.scss */
            ul.topnav.responsive li a {
                display: block;
                text-align: left;
            }
}

section {
    width: 100%;
    /*min-height: 340px;*/
    color: #222222;
    height: auto;
    padding: 60px 0;
}
.section1 {
    background-color: #ffffff;
}
.section1 .icon{
  width: auto;
}
.section1 h1{
    color: #21c1db;
    padding-bottom:20px;
}
.description{
  color: #21c1db;
  font-weight: bold;
  padding-top: 5px;
}
.team img{
  width: 150px;
}
@media screen and (max-width: 768px) {
  .team img{
  padding-top: 10px;
  }
}
.section2{
    background-color: #21c1db;
}
.section2 h1{
   color:#ffffff;
   padding-bottom:20px;
}
.section2 p{
   color:#ffffff;
}
.section2 i{
  color: #ffffff;
}
.section2 img{
  width: auto;
  padding-bottom: 20px;
    /*height: 75px;*/
}
.section2 table{
  position:relative;
  top:-100px;
  margin-bottom: -75px;
}
.section2 td{
    /*width: 80px;*/
    text-align: center;
    background-color:#253553;
    padding: 3px;
}
.section2 span{
 color:#fff;
}
.section4{
  height: 100px;
}
.banner-landing{
  background: url("../Content/images/Dadand.jpg") no-repeat;
  height: 500px;
  background-size: cover;
}
.banner-about{
  background: url("../Content/images/repairer.jpg") no-repeat;
  height: 500px;
  background-size: cover;
}
/*.banner-about h2{
  color: #1f2f4c;
}
.banner-about p{
  color: #1f2f4c;
  font-weight: bold;
}*/
.banner-location{
  background: url("../Content/images/LadyDriver.jpg") no-repeat;
  height: 500px;
  background-size: cover;
}
.center{
    text-align:center;
}
.left{
  text-align: left;
}
.no-padding{
    padding: 0;
}
.no-margin{
    margin: 0;
}
.vertical-align-middle {
    display: table-cell;
    vertical-align: middle;
}
.center-content {
    width: 100%;
    margin: auto;
    z-index: 999;
    position: relative;
    text-align: center;
    color: #fff;
}
.home-header button {
    width: 180px;
    height: 44px;
    background-color: #32465f;
    border: 0;
}
.hailoncar {
  background: url("../Content/images/Hailoncar.jpg") no-repeat;
  height: 320px;
  background-size: cover;
}
  .prd{
    background-color: rgba(255, 255, 255, 0.80);
    padding: 20px;
    margin: 10px;
}
.prd a{
  color: #21c1db;
}
.prd h3{
  color: #21c1db;
}
.details h1{
  display: inline-block;
}
.details h4{
  color: #1f2f4c;
  font-weight: bold;
}
.details td{
  color: #1f2f4c;
  padding: 15px 15px;
}
.details span{
  font-weight: bold;
}
.text{
  padding-top: 30px;
}
.read-more i{
  border: 2px solid;
  border-radius: 25px;
  padding: 3px;
}
.text h2{
  color: #1f2f4c;
  font-weight: bold;
  line-height: 1.45em;
}
@media screen and (max-width: 768px){
  .text h2{
    color: #ffffff;
  }
  .text p{
    color: #ffffff ;
  }
  .topnav img{
    width: auto !important;
  }
  .section1 .icon {
    width: auto;
    height: 100px;
    padding: 25px 25px;
  }
  .text-color h2{
    color: #1f2f4c;
  }
  .text-color p{
    color: #1f2f4c;
  }
}
.text p{
  color: #1f2f4c;
  font-weight: bold;
}
.phone-no{
background-color: #21c1db;
border-radius: 0;
border-color: #21c1db;
font-weight: 600;
font-size: large;
color:#fff;
}
.phone-no:hover{
  background-color:#fff;
}
.location{
  width: auto !important;
}

.our-partners-logo-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

    .our-partners-logo-container .partner-logo-column {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .our-partners-logo-container .partner-logo-column .members img {
        margin: auto;
    }

        .our-partners-logo-container .row-breaker {
           width:100%!important;
        }

.map-box {
    height: 500px;
    width: 100%;
}
.mapWrapper {
    position: relative;
}
#map {
    height: 500px;
}
footer{
    background-color: #c2c3d5;
    height: 100%;
    color: #2e4058;
    padding: 30px 20px;
    font-weight: bold;
}
.footer i{
  font-size: 25px;
}
.footer img{
  width: 100px;
}
.navbar-nav>li:hover .dropdown-menu {
  display: block;
}
.banner{
  background: url("../Content/images/banner2.png") no-repeat;
  height: 450px;
  background-size: cover;
  background-position: center -224px;
}

.service-areas-container {
    min-height: 500px;
    background-color: #eee;
    padding: 4%;
}

    .service-areas-container .service-area-state {
        color: #21c1db;
        margin-left: 27px;
        font-weight: 700;
    }

    .service-areas-container .service-area-location-list li {
        color: #1f2f4c;
        font-weight: bold;
        margin-bottom: 6px;
    }