.mt-15{margin-top: 15px;}

.mt-60{margin-top: 60px;}

.rating {
	border-bottom: 1px solid #ededed;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  font-size: 20px;
  margin: 5px;
}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #000;
  width: 250px;
  height: 100%;
  box-shadow: 0px 0px 0px 6px #f9e01a;
}

/* Style the buttons inside the tab */
.tab button {
  display: flex;
  background-color: inherit;
  color: #fff;
  padding: 22px 16px;
  width: 100%;
  height:59px;
  /*border: none;*/
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 15px;
  font-weight: 500;
     margin-top: 5px;
    border-radius: 6px;
}

/* Change background color of buttons on hover */
.tab button:hover {
   background-color: #f7e65f;
   color:#000; 
}

/* Create an active/current "tab button" class */
/*.tab button.active {
  background-color: #f7e65f;
    height: 60px;
    width: 220px;
    color: #000;
    margin: 5px 0px 7px 13px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}*/

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  /*border: 1px solid #ccc;*/
  width: 70%;
  border-left: none;
  height: auto;
}

.scheduled{
	text-transform: unset;
	font-weight: 600;
    color: #4c450d;
	text-align:left;
	margin-left: 45px;
}

.packages{
	font-weight: 600;
	    color: #55831e;
    text-align:left;
}

.service-details-box{
	position: relative;
    min-height: 150px;
    background-color: #f7f7f7;
    border: 1px solid #9a9a9a;
    margin: 10px 0px;
    padding: 25px 10px 10px 10px;
    box-shadow: 5px 5px 5px #c5d0de;
    transition: 0.5s;
    border-radius: 0px;
    /* display: inline-flex; */
    width: 100%;
	left:50px;
}

.icooo i{
	font-size:8px;
	margin:5px;
}

.icooo1 i{
	font-size:17px;
	margin:8px;
}

.icoooo{
	text-align:left;
}

.circle i{
	margin-right:5px;
	color: #81d11e;
}

.dividerrr{
	margin-bottom: 0;
    border-top: 2px solid #000000;
}

.boxx{
	text-align:right;	
}

.flottt{
	text-align:left;	
}

.flottt-bold{
	font-weight:800;	
}

.btnnn{
	padding: 5px 10px 5px 5px;
}

.bottonnn{
	padding: 10px 15px;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    border-width: 1px;
display: block;
    position: relative;
	color:#000;
	text-align: center;
    cursor: pointer;
	text-transform: uppercase;
    font-weight: 600;
    transition: 250ms all ease-in-out;
}
.bottonnn:hover{
	color:#fff;
	background-color: #65aa1b;
    border-color: #65aa1b;
}

/* services form */

.scheduleddd{
	font-size:30px;
	text-transform: unset;
	font-weight: 600;
    color: #000;
	text-align:left;
	margin-bottom: 15px;
}

@media screen and (max-width:700px){
	.tabcontent{
		padding: 0px 5px;
		width: 95%;
    margin-top: 25px;
    padding-bottom: 30px;
	}
	.service-details-box{
		left:10px;
	}
	.tab{
		width:90%;
		margin-left: 20px;
	}
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1060; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: -90px;
  width: 100%; /* Full width */
  height: 120%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}

/* The Close Button */
.close {
  color: #070707;
  float: right;
  font-size: 28px;
  font-weight: bold;
 
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width:700px){
	/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 99px;
  padding: 20px;
  border: 1px solid #888;
  width: 78%;
  right:76px;
}
}

.modal .form-group{
	    margin-bottom: 10px;
    box-shadow: 2px 2px 3px #c1c7b9f5;
}

.default-btn{
	--offset: 6px;
  --border-size: 2px;
  display: block;
  position: relative;
  padding: 7px 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: #76b32a;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  transition: background 0.8s ease;
}
.button__horizontal, .button__vertical {
  position: absolute;
  top: var(--horizontal-offset, 0);
  right: var(--vertical-offset, 0);
  bottom: var(--horizontal-offset, 0);
  left: var(--vertical-offset, 0);
  transition: transform 0.8s ease;
  will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
  content: "";
  position: absolute;
  border: inherit;
}
.button__horizontal {
  --vertical-offset: calc(var(--offset) * -1);
  border-top: var(--border-size) solid currentcolor;
  border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
  top: calc(var(--vertical-offset) - var(--border-size));
  bottom: calc(var(--vertical-offset) - var(--border-size));
  left: calc(var(--vertical-offset) * -1);
  right: calc(var(--vertical-offset) * -1);
}
.default-btn:hover .button__horizontal {
  transform: scaleX(0);
}
.button__vertical {
  --horizontal-offset: calc(var(--offset) * -1);
  border-left: var(--border-size) solid currentcolor;
  border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
  top: calc(var(--horizontal-offset) * -1);
  bottom: calc(var(--horizontal-offset) * -1);
  left: calc(var(--horizontal-offset) - var(--border-size));
  right: calc(var(--horizontal-offset) - var(--border-size));
}
.default-btn:hover .button__vertical {
  transform: scaleY(0);
}

.pero{border-radius:15px;}


/* read more btn services */


.modal-contents {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 0;
    width: 600px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius: 0.5rem;
}


.modal-bodys {
    padding: 20px 12px;
}

.app
{
    margin-top: -21px;
    margin-left: 21px;
    margin-right: 21px;
	margin-bottom: 21px;
}


.boxshadow {
box-shadow: rgba(0,0,0,.25) 0 3px 11px 0!important;
    -moz-box-shadow: rgba(0,0,0,.25) 0 3px 11px 0!important;
    -webkit-box-shadow: rgba(0,0,0,.25) 0 3px 11px 0!important;
    background-color: var(--color_2)!important;
	padding: 15px;
	    border-radius: 2%;
}
.boxshadow:hover {
    box-shadow: rgba(0,0,0,.50) 0 3px 11px 0!important;
    -moz-box-shadow: rgba(0,0,0,.50) 0 3px 11px 0!important;
    -webkit-box-shadow: rgba(0,0,0,.50) 0 3px 11px 0!important;
    background-color: var(--color_2)!important;
    padding: 15px;
    border-radius: 8%;
}
.iconfa {
	    background-color: #f7931e;
    height: 50px;
    width: 50px;
    padding: 11px;
    border-radius: 50%;
    color: #fff;
	font-size:23px;
}

.mpopup {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.closedd {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closedd:hover, .closedd:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.mnpopup {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.closeds {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closeds:hover, .closeds:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.mipopup {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.closedi {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closedi:hover, .closedi:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.brakedrums {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.closediu {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closediu:hover, .closediu:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.disc {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.closedee {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closedee:hover, .closedee:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.brake {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.brakeclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.brakeclose:hover, .brakeclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.monsoon {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.monsoonclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.monsoonclose:hover, .monsoonclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.winter {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.winterclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.winterclose:hover, .winterclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.deep {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.deepclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.deepclose:hover, .deepclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.dry {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.dryclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.dryclose:hover, .dryclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.cleaning {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.cleaningclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.cleaningclose:hover, .cleaningclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.basic {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.basicclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.basicclose:hover, .basicclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.performance {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.performanceclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.performanceclose:hover, .performanceclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.care {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.careclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.careclose:hover, .careclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.insurance {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.insuranceclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.insuranceclose:hover, .insuranceclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.towinginsurance {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.towinginsuranceclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.towinginsuranceclose:hover, .towinginsuranceclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.coating {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.coatingclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.coatingclose:hover, .coatingclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.ceramic {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.ceramicclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.ceramicclose:hover, .ceramicclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.suspension {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.suspensionclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.suspensionclose:hover, .suspensionclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.engine {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.engineclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.engineclose:hover, .engineclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.replacement {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.replacementclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.replacementclose:hover, .replacementclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.clutchs {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.clutchsclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.clutchsclose:hover, .clutchsclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.sets {
    display: none;
    position: fixed;
    z-index: 9999999999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.setsclose {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.setsclose:hover, .setsclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width:700px){
.modal-contents{
	    width: 95%;
}

.dividerrr{
	    float: left;
}

}

.iconic{
	width: 50px!important;
}

.icon img:hover{
  filter: brightness(0) invert(1);
  width: 50px;
}