body,html{}

body{font-family: 'Montserrat', sans-serif; font-weight: normal; line-height: 1.5; color: #3b3836; position: relative; height: 100%; overflow-x: hidden; background: #fff4e4}

.light{font-weight: 300}

.regular,.normal{font-weight: normal}

.medium{font-weight: 500}

.semibold{font-weight: 600}

.bold{font-weight: bold}

.heavy{font-weight: 900}

p{margin-bottom: 20px;}

b,strong{font-weight: 600}

h1,h2,h3,h4,h5,h6{font-family: 'Playfair Display'; font-weight: bold}

.text-center p{text-align: center}

h1{font-size:40px;}

h2{font-size:36px; color: #1a1613; text-transform: uppercase}

h2 span{color:#f90000}

h3{font-size:30px;}

h4{font-size:24px;}

h5{font-size:22px;}

a:hover,a:focus,a:active, button:hover,button:focus,button:active{outline: 0;}

button,a{outline: none; outline: 0}

.btn:focus{box-shadow: none!important}

a{color: #007fff}



h1.title1{font-size: 80px; text-transform: uppercase; font-weight: 900; font-family: 'Playfair Display'; margin: 0; line-height: 1; color: #000; letter-spacing: 2px}

h1.title2{font-size: 80px; text-transform: uppercase; font-weight: 900; font-family: 'Playfair Display'; margin: 0; line-height: 1; color: #000; letter-spacing: 2px}

.text-success{color: #666!important}



.form-control,.img-thumbnail,.btn{border-radius:0;}

.btn{padding: 8px 20px; text-transform: uppercase; font-size: 15px}

.btn.btn-sm{padding: 6px 16px; font-size: 13px}



.btn-dark:hover {

  color: #fff;

  background-color: #111;

  border-color: #111;

}

.lead{font-weight: 500}

.btn-primary{background: #032d57; border-color:#032d57;transition: ease-in-out 0.3s}

.btn-primary:hover{background: #f7b72f;border-color: #f7b72f;}

.btn-outline-primary{background: #fff; border-color:#032d57;color: #032d57; transition: ease-in-out 0.3s}

.btn-outline-primary:hover{background: #032d57; border-color:#032d57;color: #fff;}

.btn-secondary{background: #f0f0f0; border-color:#eee;color: #545e6c;transition: ease-in-out 0.3s}

.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{background: #333;border-color: #545e6c; color: #fff}

.text-primary{color: #f7b72f!important}

.bg-primary{background: #f7b72f!important; color: #fff}

.lead{font-size: 20px}

.color-333{color: #333}

.color-666{color: #666}

.color-999{color: #999}

.color-aaa{color: #aaa}





.owl-carousel{padding: 0 25px}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{width: 30px; height: 30px; font-size: 20px; line-height: 30px; padding: 0; background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.5); z-index: 100; border-radius: 50%; margin: 0}

.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.5)}



header{background: #38a72d; color: #fff; line-height: 1.2; padding: 5px 0; font-size: 13px}

header a{color: #fff; font-size: 13px; display: inline-block}

header a i{font-size: 16px; width: 20px}

header a:hover{color: #ff0;text-decoration: none}



.owl-theme .owl-nav{position: absolute; top: 50%; left: -22px; right: -22px; transform: translateY(-50%); z-index: 5; margin: 0}

.owl-theme .owl-dots .owl-dot span{width: 14px ; height: 14px; border-radius: 50%; margin: 5px; background: #bbb}

.owl-theme .owl-dots .owl-dot.active span{background: #f90000}

.owl-prev{position: absolute; left: 5px; top: 50%; transform: translateY(-50%)}

.owl-next{position: absolute; right: 5px; top: 50%; transform: translateY(-50%)}

.navbar-toggler{font-size: 30px}

.navbar-toggler i{color: #fff}

.navbar-toggler.collapsed .la-times{display: none}

.navbar-toggler.collapsed .la-bars{display: block}

.navbar-toggler .la-times{display: block}

.navbar-toggler .la-bars{display: none}



.navbar{background:#fff; padding:0; transition: ease-in-out 0.3s; position: sticky; top: 0; z-index: 99}

.navbar-expand-lg .navbar-nav .nav-item{margin-left:20px;}

.navbar-expand-lg .navbar-nav .nav-link{color: #000;padding: 30px 0;line-height:1; text-transform: uppercase; font-weight: 500; border: 4px solid transparent}

.navbar-expand-lg .navbar-nav .nav-link:hover,.navbar-expand-lg .navbar-nav .active .nav-link{color: #f90000; border-bottom-color: #f90000}

.navbar-expand-lg .navbar-nav .active .nav-link{border-bottom-color: #f90000}



.navbar img{max-width: 220px; transition: ease-in-out 0.3s}

.navbar-brand{padding: 0; margin: 0}



.dropdown-menu{border-radius: 0}

.dropdown-item{padding: 8px 18px; transition: ease-in-out 0.2s; }

.dropdown-item:hover{background: #555; color: #fff}

.dropdown-item.active, .dropdown-item:active{background:#333;}

.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{display: block;}

.dropdown-menu{margin-top: 0;}

.dropdown-toggle{margin-bottom: 2px;}

.navbar .dropdown-toggle, .nav-tabs .dropdown-toggle{margin-bottom: 0;}  





/* dd menu hover */

.dropdown-toggle-custom:after {

  display: inline-block;

  margin-left: .255em;

  vertical-align: .255em;

  content: "";

  border-top: .3em solid;

  border-right: .3em solid transparent;

  border-bottom: 0;

  border-left: .3em solid transparent;

}

/* dd menu hover */



/*home banner*/

.homebanner{position: relative; background: url(../images/bg-banner.png) top left; background-size:auto; padding: 40px 0 10px}

.cbox{}

.cbox h2{font-size: 36px; line-height: 1.2; margin: 0; text-transform: uppercase; color: #000; font-weight: normal}

.cbox h1{font-size: 44px; line-height: 1.2;font-weight: 800;text-transform: uppercase; color: #000; margin-bottom: 15px}

.cbox h1 span{color: #f00}

.cbox a{font-size: 24px; color: #000; display: inline-flex; align-items: center; }

.cbox a:hover{text-decoration: none; color: #f00}

.owl-carousel .owl-item .cbox a img{max-width: 100%; width: auto; display: inline-block; padding-left: 20px; margin: 0}



.owl_home_main{padding: 0}

.owl_home_main.owl-theme .owl-dots {bottom: 20px; right: 30px; margin: 0; position: absolute; z-index: 999}

.owl_home_main .owl-nav{left: 20px; right: 20px; transform: translateY(-50%); z-index: 5}



.bg-primary{background: #421cef!important; color: #fff}

/*home welcome*/

.welcome{background: url(../images/img-about.jpg) top left no-repeat; padding: 50px 0 100px}

.welcome2{background: url(../images/services2.png) top right no-repeat; padding: 50px 15px 20px}

.welcome-content{background: #fff; padding: 40px; box-shadow: 0 0 30px #0000003d}

blockquote{border-left: 8px solid #38a72d; padding: 0 0 0 15px; margin-bottom: 20px}

blockquote h5{margin: 0 0 5px; text-transform: uppercase; line-height: 1; font-weight: normal}

blockquote h2{margin: 0; line-height: 1}

.welcome-content p{line-height: 1.7}

.welcome-content p:last-child{margin: 0}

.design_consul{padding: 100px 0; background: #f9f6f4}

.home-service{background-image:url(../images/bg-product.jpg); padding: 100px 0;}

.home-service h1.title1{color: #000; letter-spacing:-04px;}

.service-content{width: 100%; max-width: 900px;margin: 0 auto}

.sbox{position: relative}

.sbox .no{position: absolute; top: 20px; left: 20px; z-index: 5; font-size: 24px; color: #fff;}

.sbox .name{position: absolute; bottom: 30px; left: 30px; right: 30px; text-align: center; z-index: 2; font-size: 26px; color: #fff; font-weight: 800; text-transform: uppercase; line-height: 1.1}



.sbox .sboxhover{position: absolute; top: 0; right: 0; left:0; bottom: 0; z-index: 4; opacity: 0; transition: ease-in-out 0.2s; background: url(../images/bg-cbox.jpg) center repeat-x}

.sbox:hover .sboxhover{opacity: 1;}

.sbox a:hover{text-decoration: none; color: #ff0!important}

.sbox .sboxhover .hoverc{position: absolute; top: 50%; transform: translateY(-50%); left: 20px; right: 20px; z-index: 6; text-align: center; margin-top: 20px}

.hoverc h4{text-align: center; font-weight: normal; font-size: 26px; text-transform: uppercase; line-height: 1.2; color: #fff; margin-bottom: 20px}



.home-showcase{padding: 100px 0; }

.link-port{position: absolute; top: 30px; right: 0; z-index: 1}



hr{border-color: #eee; margin: 0}

.home-feedback{padding: 100px 0; background-image:url(../images/bg-feedback.jpg);}

.home-feedback h1.title2{color: #000}



.testi{display: flex}

.owl-carousel .owl-item .testi img{max-width: 650px; margin: 0 auto}



/*.testi-img{width:140px; height: 140px; margin-right: 20px; border-radius: 50%; overflow: hidden}

.testi-img img{width: 100%; height: 100%; object-fit: cover}

.testi-cont{width:calc(100% - 200px);}

.testi-cont p{color: #4e4e4f}

.testi-cont h5{color: #4e4e4f; font-weight: 500; font-size: 18px; margin: 0}

.testi-cont h6{color: #444; font-weight: 400; font-size: 16px}*/







footer{background-image: linear-gradient(#9d261c, #f63423); color: #fff; font-size: 18px}

footer i{margin-bottom: 10px; font-size: 36px}

footer a{color: #fff}

footer a:hover{color: #fff; text-decoration: none}



footer h6{text-transform: uppercase; font-weight: 400}

footer h2{position: relative; display: inline-block; color: #fff}

footer h2:before{position: absolute; bottom: -5px; left: 50%; width: 50px; margin-left: -25px; content: ''; z-index: 2; height: 2px; background: #fff}

footer p{line-height: 1.7}

footer hr{border-color: #4a4a4a}



.footer_link {margin-bottom: 10px}

.footer_link a{display: inline-block; padding: 5px 10px; position: relative; color: #fff; font-weight: 500;}

.footer_link a.active{color: #f90000;}

.footer_link a:hover{color: #f90000;}

.footer_link a:after{position: absolute; top: 11px; right: -4px; width: 1px; height: 10px; background: #fff; z-index: 1; content: ''}

.footer_link a:last-child:after{display: none}



.copyright{background:#000; color: #baa89c}

.copyright .text-muted{font-size: 14px}





.static-banner{position: relative; background-position: center; background-size: cover; height: 320px;}

.static-banner h2{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; text-transform: uppercase; letter-spacing: 1px; color:#fff;text-align:center;}

.footer-social a{font-size: 20px; color: #fff; padding: 10px 5px}

.footer-social a:hover{color: #f90000; text-decoration: none}



.contactbox{box-shadow: 0 0 40px #0000001c; padding: 80px; border-top:8px solid #f90000; border-radius: 5px; background-color:#FFF;}

.form-control{min-height: 60px; background: #f5f5f5; border-color: #ddd}

.form-control:focus{background: #f9f9f9; border-color: #f90000}

.btn-warning{color: #fff;background-color: #f90000;border-color: #f90000;}

.btn-warning:hover,.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show>.btn-warning.dropdown-toggle, .btn-warning.focus, .btn-warning:focus{color: #fff;background-color: #c00;border-color: #c00;}

.mb-30{margin-bottom: 30px}

.contact-map {min-height: 88px}

.contact-map h3{text-transform: uppercase; color: #000; text-align: center; margin: 0}

.contact-map h3 span{text-transform: uppercase; color: #f00;}

.contact-map p{color: #000; text-align: center; margin: 0}

.contact-map p span{font-weight: 500}



.grid {

  -moz-column-count: 1;

       column-count: 1;

  -moz-column-gap: 20px;

       column-gap: 20px;

  -moz-column-fill: balance;

       column-fill: balance;

  margin:  auto;

  padding: 0;

}

.grid .item {

  display: inline-block;

  margin: 0 0 20px;

  page-break-inside: avoid;

  -moz-column-break-inside: avoid;

       break-inside: avoid;

  width: 100%;

}

.grid .item img {

  width: 100%;

  height: auto;

}



.col-sm-12.col-md-7{flex: 0 0 100%;

    max-width: 100%;}

div.dataTables_wrapper div.dataTables_paginate{text-align: center; margin-top: 20px!important}

div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content: center!important}

#tblCars thead{display: none}

#tblCars tbody tr td{width: 33.33%; padding: 20px 15px}



.list-item{display:block; width: 100%; background-size: cover; background-position: center; height: 260px}



@media (min-width: 600px) {

  .grid {

    -moz-column-count: 2;

         column-count: 2;

  }

}

@media (min-width: 1200px) {

  .grid {

    -moz-column-count: 3;

         column-count: 3;

  }

}





.owl-dots .owl-dot {

  margin: 5px 0;

}

.owl-dots .owl-dot button {

  background: none;

  border: none;

  padding: 5px;

  color: #6e6e6e;

  font-size: 16px;

  font-weight: 500;

  cursor: pointer;

}

.owl-dots .owl-dot button:focus {

  outline: none;

}

.owl-dots .owl-dot.active button {

  color: #333;

  font-weight: bold;

  text-decoration: underline

}





.nav-tabs{border: 0}

.nav-tabs .nav-link{border: 1px solid #333; border-radius: 0; color: #000; font-weight: 500; padding: 10px 30px}

.nav-tabs .nav-link:hover{border-color: #f00; background:#f00; color: #fff}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    color: #fff;

    background-color: #c00;

    border-color: #c00;

    font-weight: 600

}



.owl_portfolio .item{ transition: ease-in-out 0.2s; margin-bottom: 20px; background-color:#FFF;}

.owl_portfolio .item:hover{box-shadow: 0 10px 15px #e5e5e5;}

.owl_portfolio .item a{display: block; padding-bottom: 12px}

.owl_portfolio .item a:hover{text-decoration: none;}

.owl_portfolio .item a img{margin-bottom: 15px}

.owl_portfolio .item a h5{font-size: 16px; text-align: center; color: #333; font-weight: 600; margin-bottom: 5px; padding: 0 5px}

.owl_portfolio .item a p{font-size: 16px; margin: 0; text-align: center; color: #f00; font-weight: 500}



.card-car-item{border:0; box-shadow: 0 10px 20px #bbb}

.card-car-item h5{font-size: 20px; color: #000; font-weight: 600; margin:0; min-height: 50px}

.card-car-item h5 a{color: #000; display: block}

.card-car-item h5 a:hover{color: #f00; text-decoration: none}

.card-car-item p{font-size: 16px; margin: 0 0 20px; color: #222;font-weight: 500}

.card-car-item hr{margin: 10px 0; border-color: #ccc}

.page-link{color:#555; border: 0; font-weight: 500; min-width: 36px; text-align: center}

.page-item.active .page-link{color:#fff; background: #c00}

.page-link:hover{color:#fff; background: #f00}

.page-link:focus{box-shadow: none;}

.page-item:first-child .page-link,.page-item:last-child .page-link{border-radius: 0}



.product-image{}





.product-details{}

.product-details tr td{padding: 4px 6px}

.product-details tr td:first-child{white-space: nowrap; font-weight: 500; color: #c00}

#sync1{margin-bottom: 20px}

#sync2.owl-theme .owl-nav{top:38%}



#sync2.owl-theme .owl-item{border: 1px solid transparent}

#sync2.owl-theme .owl-item.current{border-color: #c00}



@media (min-width: 1300px){

.container-xl {

    max-width: 1200px;

}

}



@media screen and (min-width: 1300px){

  .container-fluid{padding-left: 100px; padding-right: 100px}

}

@media screen and (max-width: 1200px){

  .container{width: 100%; max-width: 100%;}

  .owl-theme .owl-nav{left: -12px; right: -12px;}

  .owl-carousel{padding-left: 30px; padding-right: 30px;}

  .owl-theme.owl_home_main .owl-nav{left: 20px; right: 20px;}

  .owl-carousel.owl_home_main{padding-left: 0; padding-right: 0;}

  .contactbox .btn{min-width: 230px}

}



@media screen and (max-width: 1199px){



}



@media screen and (max-width: 1024px){

.homebanner .content .cbox{padding: 20px}

.homebanner .content .cbox h1{font-size: 40px}

}

@media (min-width: 992px){

  .navbar-expand-lg .navbar-nav .dropdown-menu {

    position: absolute; z-index:99

  }

}



@media screen and (max-width: 991px){

  .navbar-collapse{position: absolute;top: 100%;z-index: 9999;background: #222; padding: 20px; left: 0;right: 0;}

  .navbar{padding: 10px}

  .navbar-expand-lg .navbar-nav .nav-link{padding: 20px 15px; font-size: 20px; border: 0}

  footer{text-align: center}

  .navbar-expand-lg .navbar-nav .nav-item{margin: 0}

  .list-contact li{display: block}

  footer h3:before{left:50%;transform:translateX(-50%)}

  .list-quick-links li a:before{left:auto; margin-left:-20px}

  .homebanner .content{position: relative; bottom: 0}

  .homebanner .content .cbox{max-width: 100%; text-align: center; padding: 20px}

  .homebanner .content .cbox h3{margin-bottom: 20px}

  .homebanner .content .cbox h3 br{display: none}

  .welcome-content{padding: 20px;}

  .welcome{padding: 50px 0;background-size: 400px}

  .welcome2{padding: 50px 15px 20px;background-size: 400px}

  .homebanner .content .cbox h1,h2{font-size: 30px}

  .homebanner .content .cbox h3{font-size: 24px}

  h1.title1,h1.title2{font-size: 40px}

  .home-service,.home-showcase,.home-feedback{padding: 50px 0}

  .link-port{top: 0; right: 15px;}

  .contactbox{padding: 40px}

  .static-banner{height: 200px}

  .homebanner .content{left: 0; right: 0;}

  .cbox{text-align: center}

  .contact-map {min-height: 50px}

  #tblCars tr td{display: block; width: 100%; padding: 20px 0}

}

@media screen and (max-width: 767px){

  .owl_home_main .banner-wrapper h1{font-size:30px;}

  .owl_home_main .banner-wrapper p{font-size:16px;}

}

@media screen and (max-width: 640px){

.homebanner .content{top:-40px}

.homebanner .content .cbox{padding: 15px}

.homebanner .content .cbox h1{font-size: 20px; margin: 0}

.homebanner .content .cbox h3{font-size: 20px; margin-bottom: 5px}

.homebanner .content .cbox img{width:30px}

blockquote{border: 0; padding: 0; text-align: center}

.welcome-content p{text-align: center}

.design_consul{padding: 70px 0}

}

@media screen and (max-width: 575px){

  .owl_home_main .banner-wrapper{padding:10px;}

  .toggleLeftNav.active .la-bars{display: none}

  .toggleLeftNav.active .la-times{display: block}

  .owl-theme.owl_home_main .owl-nav{display:none;}

  /*.pb-5, .py-5 {padding-bottom: 2rem!important;}

  .pt-5, .py-5 {padding-top: 2rem!important;}*/

  .list-contact li i{display:block;margin:12px auto 5px;}

  .static-banner h2{font-size:20px;}

  .owl_home_service.owl-theme .owl-dots{left:15px;right:15px;transform: translateX(0);-webkit-transform: translateX(0);}

  .free_quote{top: 20%;}

  .card-service .card-body{min-height:100px}

  .card-team .card-head .hover{bottom: 0; opacity: 1;}

  .link-port img{width: 40px; top:10px; height: auto}

  .owl-carousel,.owl_testimonial, .owl_portfolio{padding: 0!important}

  .testi{display: block}

  .testi-img{width: 100%; text-align: center; margin-bottom: 20px}

  .testi-img img{display: block; margin: 0 auto; max-width: 180px}

  .testi-cont{width: 100%; text-align: center}

  .link-port{position: relative; right: 0; display: inline-block}

  footer{font-size:17px;}

  .welcome-content{margin: 275px auto 0; width: 90%}

  .welcome,.welcome2 {

    background-size: 100% auto;

  }

  .contactbox{padding: 30px 20px}

  .static-banner{height: 150px}

  .cbox h2{font-size: 28px;}

  .cbox h1{font-size: 30px;}

  .homebanner{padding: 50px 0 20px; background-position:  -40px -30px; background-repeat: no-repeat}

  .owl-carousel .owl-item img{margin-bottom: 20px}

  #sync2.owl-carousel .owl-item img{margin-bottom: 0}

  .cbox a{margin-bottom: 20px}

  .card-car-item{text-align: center}

  .form-control{min-height: 50px}

  .contactbox .btn{width: 100%}

  #sync1{margin-bottom: 0}

  #tblCars tbody tr td{width: 100%; display: block}

}

@media screen and (max-width: 480px){

}

@media screen and (max-width: 375px){



}

@media screen and (max-width: 360px){



}

@media screen and (max-width: 320px){



}