/*
Theme Name: SimpelFix
Theme URI: https://simpelfix.ch
Author: The Simpelfix team
Author URI: https://simpelfix.ch/about
Description: This is Mobile Repair shop theme by Simpelfix.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0
Requires at least: 5.4
Tested up to: 5.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simpelfix
*/
/*----------Additional CSS----------------*/
@media only screen and (max-width: 768px) {
.search-results {
    position: absolute;
    top: 42% !important;
    width: 238px;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    height: auto;
    overflow-y: auto;
    z-index: 999;
    border-radius: 13px 8px 5px 8px;
}

}

@media only screen and (max-width: 1122px) {
.search-results {
    position: absolute;
    top: 52%;
    width: 238px;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    height: auto;
    overflow-y: auto;
    z-index: 999;
    border-radius: 13px 8px 5px 8px;
}

}
@media only screen and (min-width: 1120px) {
.search-results {
    position: absolute;
    top: 53%;
    width: 228px;
    background-color: white;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    height:auto;
    overflow-y: auto;
    z-index: 999;
    border-radius: 13px !important;
}
}
.page-numbers.current {
    background: #D0112B;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.page-numbers {
    cursor: pointer;
    border-radius: 50px;
    border: 1px solid;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination {
    width: 80%;
    margin: 20px auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.modelsearch-form {
    max-width: 320px !important;
 
}
.modelsearch-form .sim-ajax-search-input{
    
    padding: 10px 15px;
    font-size: px;
    border-radius: 24px;
    font-size:18px;
}

.modelsearch-form span#search-results {
    font-size: 12px;
    font-weight: 400 !important;
    margin: 0px;
    padding: 0px;
    max-width: 260px;
 }
 .modelsearch-form span#search-results::-webkit-scrollbar{
 width: 8px;
}


/* Customize the scrollbar */
 .modelsearch-form span#search-results::-webkit-scrollbar {
    width: 4px; /* Set the scrollbar width */
}

/* Scrollbar track (background) */
 .modelsearch-form span#search-results::-webkit-scrollbar-track {
    background: green; /* Background of the scrollbar */
}

/* Scrollbar handle (thumb) */
 .modelsearch-form span#search-results::-webkit-scrollbar-thumb {
    background: #fff; /* Color of the scrollbar */
    border-radius: 18px; /* Round the corners of the scrollbar */
}

/* Scrollbar handle on hover */
 .modelsearch-form span#search-results::-webkit-scrollbar-thumb:hover {
    background: #d0112b; /* Darker color on hover */
}






.modelsearch-form span#search-results li a {
font-weight:400 !important;
font-size:14px;
}

@media (min-width:1122px) and (max-width: 1920px) {
.gap-3.mobileflex.content-center.container {
    display: flex;
}
}

div#tab1 {
    width: 100%;
}
.testimonial-slider img {
    position: relative;
    width: 50%;
    margin: 0px auto;
    display: flex;
    width:160px;
    height:200px;
}
p.tabMobileLink {
    margin: 5px;
    padding-bottom: 5px;
    font-size:14px;
    font-weight:500;
    line-height: 24px;
    color: #1d1d1f;
}
img.responsive-img {
    width: 160px;
    height: 200px;
}
img.nd-map {
    margin: 0px 0px 0px 60px;
    width: 280px;
    transform: rotate(-360deg);
}
a.button:hover{
    
    color:#fff !important;
}
.formcartdetails {
    width: 100%;
}
.form-button {
    margin: 0px auto;
}
input[type="submit"]{
    cursor: pointer;    
}
input[type="submit"]:hover{
    opacity: 0.8;
}
.form-button input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.error-section {
    color: red;
    text-align: right;
}
body {

    margin: 0px auto;
    line-height: normal;
    overflow-x: hidden;
    background-color: #f5f5f7; 

  min-height: 100vh; /* Full viewport height */
    /* Gradient for modern browsers */
    background: -webkit-linear-gradient(#f5f5f7 0%, #fff 50%);
    background: -moz-linear-gradient(#f5f5f7 0%, #fff 50%);
    background: -o-linear-gradient(#f5f5f7 0%, #fff 50%);
    background: linear-gradient(#f5f5f7 0%, #fff 50%);

    font-weight:400;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
a,
span,
td,
th{
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}


/*---------------------New Style here-----------------------------------*/
body,
p,
td{
    color: #808080; /* Hex color */

    /* Font settings */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400; /* Normal */
    font-style: normal;
    font-variant: normal;
    font-stretch: 100%;
    /* Text transformations and decorations */
    text-transform: none;
    text-decoration: none;
    text-align: start;
    text-indent: 0px;
text-align:justify;
    /* Spacing */
    letter-spacing: -0.396px;
    word-spacing: 0px;
    padding: 0px;
    vertical-align: baseline;
}

h2 {
    color: #1d1d1f ; /* Hex color */
    /* Font settings */
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 38px;
    line-height: normal;
    font-weight: 700; /* Bold */
    font-style: normal;
    font-variant: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-stretch: 100%;
    font-variation-settings: normal;
    font-feature-settings: normal;

    /* Text transformations and decorations */
    text-transform: uppercase;
    text-decoration: none;
    text-align: start;
    text-indent: 0px;

    /* Spacing */
    letter-spacing: normal;
    word-spacing: 0px;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
}
.col-md-6 {
	flex: 0 0 auto;
	width: 50%;

}
h3 {
    font-size: 1.4em;
    line-height: 1.2em;
    font-weight: 600;
    color: #1d1d1f ;
    text-transform: uppercase !important;
    text-align: left;
}
h4.card-title-sm {
    font-size: 18px;
}

.services .boxArea p {
    margin: 0px;
}

a:hover {
    color: #043d7b !important;
}

.section {
    margin: 0px auto;
}

.litext {
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
}

header {
    min-height: 60px;
    background: rgba(250, 250, 252, 1);
    padding: 0px 5%;
    box-shadow: 0px 0px 16px 2px rgb(0 0 0 / 6%);
    border-bottom: 0px solid #d0112b;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1); 
}


.current-menu a {
    color: #D0112B !important;
}

.container {
    max-width: 1366px;
    margin: 0px auto;
}

@media(min-width:992px) and (max-width:1440px) {
    .container {
        max-width: 90%;
        margin:0px auto;
    }
}

.faqs {
    background: #F5F5F5;
    padding: 30px 0;
    max-width: 100%;
    margin: 0px auto;
    padding: 30px;
}

/***** header ****/
.mbl-menu .hamburger,
.close {
    border: none;
    cursor: poRoboto;
    /* position absolute position the icons relative to the body because they have no position relative parents*/
    position: absolute;
    top: 15px;
    right: 20px;
    width: 36px;
    height: 36px;
    color: #000;
}

.mbl-menu {
    display: none;
}

.mbl-menu .close {
    background: black;
}

.mbl-menu .hamburger img,
.mbl-menu .close img {
    width: 100%;
    height: 100%;
}

.mbl-menu .navbar {
    position: absolute;
    /* a higher z-index put navbar above hamburger */
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* basic menu styling*/
    list-style: none;
    background: black;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 34px;
    /* animate slide up/down */
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

/* :target is called when its anchor id #navbar is called by clicking on the hamburger which has href="#navbar" */
.mbl-menu .navbar:target {
    /* show navbar */
    transform: translateY(0);
}

.mbl-menu li a {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    /* remove default underline and add our own with padding and border bottom */
    text-decoration: none;
    border-bottom: 1px solid black;
    padding-bottom: 0.5rem;
}

.mbl-menu li a:hover,
li a:focus {
    /* show border bottom */
    border-bottom: 1px solid white;
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section a {
    display: grid;
}

.logo-section a img {
    width: 203px;
    height: 37px;
    object-fit: contain;
}

.nav ul li {
    padding: 0 15px;
    display: inline-block;
}

.nav ul li a {
    font-size: 18px;
    padding: 0;
    color: #1d1d1f;
}

.nav ul li.active a,
.nav ul li a:hover {
    color: #D0112B;
}

.navButton button {
   
    height: 50px;
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
   background: #d0112b;
    font-size: 0.94em;
    font-weight: 700;
    color: #fff;
	padding: 0rem 1.5rem;
}

.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.my-5 {
    margin-top: 48px;
    margin-bottom: 48px;
}

.shadow {
   background-color:#ffffff;
}

.mt-5 {
    margin-top: 28px;
	 margin-bottom: 28px;
}


.pt-2 {
    padding-top: 8px;
}

.my-4 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mx-3 {
    margin-left: 15px;
    margin-right: 15px;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.border-0 {
    border: 0px solid #000;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100%;
}

.bg-transparent {
    background: transparent !important;
    background-color: inherit !important;
    font-size: 1.6em;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
    padding: 0 15px;
}

.col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
    padding: 0 15px;
}

.col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
    padding: 0 15px;
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.gap-3 {
    gap: 7px;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.bg-white {
    background: #fff;
}

.p-4 {
    padding: 20px;
}

.p-3 {
    padding: 15px;
}

.pt-3 {
    padding-top: 15px;
}

.justify-content-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-4 {
    gap: 24px;
}

.text-center {
    text-align: center !important;
}

.py-5 {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.text-white {
    color: #fff;
}

.mx-0 {
    margin-left: 0px;
    margin-right: 0px;
}

@media only screen and (max-width:1122px) {
    .navButton {
        display: none;
    }
}

@media only screen and (max-width: 992px) {
    .mbl-menu {
        display: block;
    }

    .nav {
        display: none;
    }
}
 section.main-contain.dynamic-data .col-md-6{
     margin:0px 20px !important;
     width:46%;
 } 
@media screen and (max-width: 768px) {
.col-md-6 {
        flex: 0 0 auto;
        width: 96% !important;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    .mb-md-0 {
        margin-bottom: 0;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
	.custom-col-right,
	.custom-col-left{
	width:100%
	}
    .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    .flex-md-column {
        flex-direction: column !important;
    }
}

@media only screen and (max-width:767px) {
    header {
        background: #F5F5F7;
        padding: 15px 5%;
    }

    /* navbar */
    .navbar-toggler {
        margin-right: 15px;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .my-sm-4 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .col-lg-4,
    .col-lg-3,
    .col-lg-8,
    .col-lg-2 {
        flex: 0 0 auto;
        width: 100%;
        padding: 0 15px;
    }

    .col-lg-3.col-md-6 {
        justify-content: center;
    }

    .text-sm-left {
        text-align: left;
    }
}

/*-------------- Footer CSS--------------*/
footer {
    background: rgb(245, 245, 247);
    padding: 30px 0;
}

footer img {
    margin-bottom: 15px;
	width: 60%;
}
footer a{
color:#808080;
}
footer h4 {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
}


footer li{
margin:5px;
}
.socialLink {
    margin-top: 25px;
    display: flex;
    gap: 20px;
}

.socialLink a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    background: #d0112b;
    justify-content: center;
    align-items: center;
}

.socialLink a img {
    margin: 0;
}


footer ul li a:hover {
    color: #fff;
}
.repairePrice table {
    width: 92%;
   
    margin: 0px auto;
    border: 1px solid #ebebeb;
}
.repairePrice table {
    width: 100%;
    border-radius: 10px;
   
}
.repairePrice thead {
    color: #FFF;
    background-color: #D0112B;
    padding:15px 0px;
}



tab {
    background-color: inherit;
    height: 50px;
    border-radius: 25px;
    float: left;
    border: 1px solid #121212;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 18px;
    font-weight: 500;
    margin: 10px 2px;
    padding: 0.5rem 1.5rem;
}


.tab a {

    color: #000;
    list-style-type: none;
}

.tab:hover a {

    color: #fff;
    list-style-type: none;
}

.tab.active a {

    color: #fff;
    list-style-type: none;
}

.pricessection h1 {
    font-size: 31px;
    font-weight: 700;
    line-height: 78px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
}

.repair-var{
display:flex;
}

.columns {
    width: 80%;
	margin:0px auto;
	border: 1px solid #eee;
}
li.pricedata.repairvalue {
    border: 1px solid;
    border-radius: 50%;
    display: flex;
	margin: 10px;
}
li.pricedata.repairvalue:hover {
background-color:#d0112b;
color:#fff;
}
.datacarticon{
	width:5%;
	 display: grid;
 place-items: center;
}
.repairdata {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	display:flex;
}
.repairvalue{
min-width:5%;
padding: 0 2%;
text-align:center;
 display: grid;
 place-items: center;
overflow:hidden;
color:#000;
font-weight:700;
font-size:1em;
min-height:50px;
float:right;
}
.warrantydata{
min-width:40%;
}
.devliverydata{
width:20%;
}
.columns:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.repairdata .header {
	width:20%;
	color: #000000;
	font-size:1em;
	font-weight:700;
}

.button {
    background-color: #D0112B;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight:1000;
}
.button:hover,
.navButton button:hover{
    background-color:#ff1c1c;
}
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}


.snr-main {
    width: 100%;
    margin: 0px auto;
    display: flex;
}

.custom-col-left {

    width: 70%;
}

.custom-col-right {

    width: 30%;
}







/*----------- repair-list CSS---------*/
.repair-list {
    margin-top: 100px;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    padding: 5% 0%;
    min-height: 360px;
}

.right-list {

    min-height: 460px;
}

.repair-cart {
    padding: 1% 5%;
    min-height: 320px;
}

.service-item-title {
    font-size: 10px;
    line-height: 12px;
}

.itemlist-li {
    margin: 10px 0px;
    min-height: 30px;
    display: flex;
}

.cross-icon {
    width: 10%;
    float: left;
}

.listleft {
    width: 70%;
}

.listright {
    width: 20%;
    float: right;
}

@keyframes bounceInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%) scale(0.8);
    }

    60% {
        opacity: 1;
        transform: translateX(0) scale(1.1);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

.move-effect.fly-animation {
    animation: bounceInFromLeft 0.5s forwards;
    /* Adjust animation duration here */
}

.repairbtn {
    width: 100%;
    display: inline;
    margin: 0px auto;
}

.repairbtn .button {

    width: 100%;
    border: 1px solid;
    background-color: #D0112B;
}

.subtotal {
    margin-top: 80px;
}

#total-value,
.total {
    padding: 0px 20px;
    font-size: 22px;
    font-weight: 700;
}

h3.repair-list-title {
    background-color: #d0112b;
    color: #fff;
    font-weight: 700;
    line-height: 60px;
    padding: 0px 0px 0px 20px;
}

.display-none {

    display: none;
}

.form-bookig {

    display: flex;

}

.column-booking-right {
    max-width: 580px;
    margin: 0px auto;
}

/*---------------cart design-----------*/
li.repair-cart-item {
    display: flex;
    padding: 10px 5px;
    margin: 5px 0px;
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid;
}

span.cart-item-price {
    width: 10%;
    float: right;
    margin-left: 10px;
    padding: 5px;

    font-size: 1em;
    padding: 1% 0 0 0;
    background-color: #fff;
    color: #d0112b;
}

span.cart-item-title {
    width: 90%;
    text-align: left;
}

a {
    cursor: poRoboto;
}

.repairPhone br {
    display: contents;
}

.repairPhone h3 {
    margin-top: 25px;
    display: inline-block;
    color:#1d1d1f ;
}

.repairPhone ol {
    margin-top: 30px;
}

.repairPhone ol li {
    margin-top: 15px;
}

.deviceSection1 h4 {
    font-size: 22px !important;
    margin-bottom: 0px !important;
}

.repairePrice input {
    border: 0px solid #000;
    padding: 0 12px;
    margin-left: 10px;
}

@media only screen and (max-width:767px) {
	
    .models .models-row {
        justify-content: space-between;
    }
}

/*---------------cart design-----------*/
li.repair-cart-item {
    display: flex;
    padding: 10px 5px;
    margin: 5px 0px;
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    border-bottom: 1px solid;
}
span.cart-item-price {
    width: 10%;
    float: right;
    margin-left: 10px;
    padding: 5px;

    font-size: 1em;
    padding: 1% 0 0 0;
    background-color: #fff;
    color: #d0112b;
}
span.cart-item-title {
    width: 90%;
    text-align: left;
}
a{
cursor: poRoboto;
}
.formcartdetails {
    width: 100%;
	padding:1em;
	margin-right: 2em;
}
span.cart-cross-icon {
    margin-right: 15px;
    font-size: 1em;
    margin-top: 3px;
    font-weight: 700;
    cursor: poRoboto;
}
span.cart-cross-icon:hover {
  opacity: 0.8;
  color: #000;
}
.carttitle-a{
text-align: left;
width: 80%;
color: #000;
font-size:1.1em;
font-weight:700;
}
.repairbtn .button:hover{
    color: white !important;
    opacity: 0.8;
}
.form-button {
    text-align: center;
    margin: 0px auto;
}
/*----------------Header Menu start css-----------------------*/
.header .new_menu_class .menu {
  display: flex;
  gap: 20px;

  position: relative;
}

.header .nav ul li {
  line-height: 80px;
  display: block;
}


/* Ensure only the immediate child submenu is shown */

.header .nav ul li:hover>ul.sub-menu {
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  visibility: visible;
  opacity: 1;
}


/* Submenu hidden by default */

.header .nav ul li ul.sub-menu {
  position: absolute;
  background: #ffffff;
  left: 0;
  min-width: 230px;
  margin-top: 5px;
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  transition: all .2s ease-in-out;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  border-radius: 10px;
  box-shadow: 0px 0px 12px rgba(10, 10, 10, .1);
}

.header .nav ul li ul.sub-menu li.menu-item-has-children {
  //  position: relative;
}

.header .nav ul li ul.sub-menu li {
  display: block;
  position: static;
  width: 100%;
  text-align: left;
  line-height: 38px;
  padding: 0;
}

.header .nav ul li ul.sub-menu li:hover {
  background-color: #ffffff8c;
}

.header .nav ul li ul.sub-menu li a {
  margin: 0;
  border-radius: 0;
  //position: relative;
  width: 100%;
  display: inline-block;
  padding: 7px 15px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.header .nav ul li ul.sub-menu li:first-child a {
  border-radius: 10px 10px 0 0;
}

.header .nav ul li ul.sub-menu li:last-child a {
  border-radius: 0 0 10px 10px;
}


/* Submenu within submenu - hidden by default */

.header .nav ul li ul.sub-menu li ul.sub-menu {
  -ms-transform: translateX(calc(100% + 10px));
  transform: translateX(calc(100% + 10px));
  top: -5px;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  background: #f5f5f7;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  box-shadow: 5px 5px 5px rgba(10, 10, 10, .1);
}


/* Show only the hovered submenu's child submenu */

.header .nav ul li ul.sub-menu li:hover>ul.sub-menu {
  -ms-transform: translateX(calc(100% - 2px));
  transform: translateX(calc(100% - 2px));
  opacity: 1;
  visibility: visible;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a {
  font-weight: normal;
  color: #353439;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a:hover {
  color: #e72329;
}

.header .nav ul li ul.sub-menu li.menu-item-has-children>a {
  position: relative;
}

.header .nav ul li ul.sub-menu li.menu-item-has-children>a::after {
  content: "";
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0iTTM4NS4xIDIxOS45IDE5OS4yIDM0Yy0yMC0yMC01Mi4zLTIwLTcyLjMgMHMtMjAgNTIuMyAwIDcyLjNMMjc2LjcgMjU2IDEyNi45IDQwNS43Yy0yMCAyMC0yMCA1Mi4zIDAgNzIuM3M1Mi4zIDIwIDcyLjMgMGwxODUuOS0xODUuOWMxOS45LTE5LjkgMTkuOS01Mi4zIDAtNzIuMnoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+');
  display: inline-block;
  position: absolute;
  top: 50%;
  /* Adjusted for cross-browser consistency */
  transform: translateY(-50%);
  /* Vertically centers the icon */
  width: 10px;
  height: 10px;
  right: 10px;
  /* Instead of margin-left, use right for better positioning */
  background-size: cover;
  /* Changed from contain to cover */
  background-repeat: no-repeat;
  /* Ensure the icon doesn't repeat */
}
/*---------------Heade menu css end ---------------------------------------*/
/* Basic CSS for styling */
.mbl-menu .navbar ul {
    list-style-type: none;
}

.mbl-menu .navbar ul ul {
    display: none;
}

.mbl-menu .navbar li {
    position: relative;
}

.mbl-menu .navbar li a {
    padding: 10px 0;
    margin: 10px 0;
}

.mbl-menu .navbar li:focus-within>ul {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

.mbl-menu .navbar li:focus-within>ul li {
    width: 100%
}

.mbl-menu .navbar li:focus-within>ul li a {
    padding: 10px 0;
    display: inline-block;
}

.mbl-menu li a {
    border-bottom: 0px solid white !important;
}

.mbl-menu li a:hover,
li a:focus {
    border-bottom: 0px solid white !important;
}

/* Additional styling */
.mbl-menu .navbar ul ul ul {
    left: 100%;
    top: 0;
}


/*-------Mobile menu CSS------------*/
#custom-mobile-menu .sub-menu {
    display: none;
}

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

#custom-mobile-menu {
    display: none !important;
}
.menu-toggle{
display:none !important;
}
}
@media only screen and (max-width: 994px) {
.menu-icon-svg{
    margin-right: 3px;
}
#custom-mobile-menu {
    display: none;
}

    .menu-toggle {
        display: flex;
        font-size: 18px;
        font-weight: 700;
        cursor: poRoboto;
        color: gray;
        border: solid 1px transparent;
	background: transparent !important;
        border-radius: 4px;
        padding-top: 4px;
    }

#custom-mobile-menu .sub-menu {
    display: none;
}
    #custom-mobile-menu .sub-menu {
        display: none;
        margin-top: 20px;
        height: 300px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d7d7d7 #f0f0f0;
    }
 #custom-mobile-menu .sub-menu::-webkit-scrollbar {
        width: 8px; 
    }

    #custom-mobile-menu .sub-menu::-webkit-scrollbar-thumb {
        background-color: #888888; 
        border-radius: 4px; 
    }

    #custom-mobile-menu .sub-menu::-webkit-scrollbar-track {
        background-color: #f0f0f0;
    }
.menu{
        background-color: #F5F5F7;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
        padding: 0px 1rem;
        position: fixed;
        z-index: 9999;
        width: 100%;
        height: 100%;
}
span.menu-child-indicator {
    float: right;
    width: 14px;
}
.menu li{
 	box-shadow:  0px -1px 1px 0px rgba(0,0,0,0.1);
    padding: 13px 5px;
	cursor:pointer;
    }
.menu li a{
 color: #000;
cursor:pointer;
    }

}

/*-----------------------Mobile css--------------------*/
@media only screen and (max-width: 990px) {
.custom-col-left,
.custom-col-right{
	width:100% !important;
	}
	.repair-var{
display:inline-block;
}
}

/*-----------------------Grid css--------------------*/

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}



@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 48%;

  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
.float-start {
  float:left !important;
}
.float-end {
  float:right !important;
}


/*---------------Repair CSS-----------------*/

h1.repair-title{
text-transform:uppercase;
}
.main-container {
	padding-left:0px !important;
	padding-right:0px !important;
}
.hero-section {
	margin:3rem 0rem;
	padding:1.5rem;
}
.hero-section h1 {
	color:#d0112b;
	font-weight:bold;
}
.blocks-row {
	margin-left:0.5rem !important;
	margin-right:0.5rem !important;
}
.hero-section-block {
  background: #FFF;
  margin: 0.2rem;
  padding-top: 1rem;
  padding: 0.5rem 2rem 2rem 2rem;
  border-radius: 20px;
  box-shadow: 5px 5px 15px #6d3b3b14;
}
.row-hero {
	padding:1rem;
}
.hero-section-block h2 {
    color: black;
    font-weight: 600;
    margin-block-start: 0.1em;
}
.hero-section-block hr {
	border:none;
	border-top:solid 1px rgba(0,0,0,0.075);
}
.hero-section-block label {
	font-weight:bold;
	color:black;
}
.price {
	color:#d0112b;
	font-weight:bold;
}
.hero-section-block button {
	  margin-top: 1rem;
    font-size: 1.25rem;
}
.add-to-cart-btn {
	background:green;
	width:50%;
	border:solid 1px green;
	padding:1rem;
	text-align:center;
	color:#FFF;
	font-weight:700;
	text-transform: uppercase;
	border-radius:26px;
}
.add-to-cart-btn:active, .add-to-cart-btn:hover {
	opacity:0.75;
	transition:1s;
}
.repair-variation{
	width:80%;
	margin:8px auto;
}
.cart-clear-item.clear-cart-button {
    padding: 5px 35px !important;
    margin-top: 10px !important;
	background:red;
	width:50%;
	border:solid 1px red;\
	text-align:center;
	color:#FFF;
	font-weight:700;
	text-transform: uppercase;
	border-radius:26px;
	cursor:pointer;
}
.remove-from-cart-btn {
	background:red;
	width:50%;
	border:solid 1px red;
	padding:1rem;
	text-align:center;
	color:#FFF;
	font-weight:700;
	text-transform: uppercase;
	border-radius:26px;
	cursor:pointer;
}
.remove-from-cart-btn:active, .remove-from-cart-btn:hover {
	opacity:0.75;
	transition:1s;
}

.hero-section-block-info {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0px;
}
.my-repairs-items {
    border-radius: 6px;
    margin: 0.5rem 1rem;
}
.my-repairs {
    margin-top: 5px;
    border-radius: 20px;
    margin: 0.5rem 0rem 1rem 1rem;
    box-shadow: 2px 4px 12px #00000014;
    background: #FFF;
}

.my-repairs-title {
	background:red;
	padding:1rem;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;
}
.repair-item {
	padding:1rem;
	margin:0.5rem;
	border-bottom:solid 1px rgba(0,0,0,0.075);
}
.repair-item {
	margin:0.5rem 0rem;
}
.repair-item label {
	font-weight:bold;
}
.my-repairs-footer {
	padding:1rem;
}
.my-repairs-footer-price {
	font-size:20px;
	text-align:center;
}
.my-repairs-footer-price label {
	font-weight:bold;
}
.footer-price {
	color:#d0112b;
}
.my-repairs-buttons {
	margin-top:1rem;
	padding:10px;
	border-top:solid 1px rgba(0,0,0,0.075);
}
.confirmation-section img {
    border-radius: 50%;
}
.my-repairs-buttons button {
    background: green;
    width: 100%;
    border: green;
    padding: 1rem;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    border-radius: 26px;
    cursor: pointer;
    margin: 0.25rem 0rem;
font-size: 1.2em;
    text-transform: uppercase;
}
.my-items-empty {
	min-height:300px;
	text-align:center;
	padding:2rem; 
}
.my-items-empty h1 {
	font-weight:700;
	margin-top:2rem;
	color:#000000;
}
.my-items-empty p {
	font-weight:500;
}

.my-items-svg {
	background:green;
	padding:1.5rem;
	max-width:120px;
	margin:auto;
	border-radius:15px;
}


.formcartdetails b {
    font-size: 24px;
    margin: 0rem 1rem;
    color: #d0112b;
    border-bottom: solid;
    padding-bottom: 0.5rem;
}

.formcartitems .repair-item {
    padding: 0.5rem 1rem;
    color: slategray;
    line-height: 28px;
}

# update CSS

.single-form button {
    border-radius: 5px;
    background: #D0112B;
    padding: 5px;
    margin: 0.5rem;
    max-width: 50px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
}

.formcarttotle {
    padding: 1rem;
    padding-bottom: 1.5rem;
    text-align: center;
    border-bottom: solid 1px rgba(0,0,0,0.075);
    font-size: 25px;
    color: #d0112b;
}

.formcarttotle b {
    color: gray;
    border-bottom: none;
}

.single-form button {
    border-radius: 5px;
    background: #D0112B;
    padding: 5px;
    margin: 0.5rem;
    max-width: 50px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
}
/*-------------------Booking Confirm CSS-------------------------------------*/
.single-form .row { 
	margin:0px auto; 
}
.booking-form-inputs .col-lg-6 { 
	padding:0px 4px 
}
.error-message { 
	color: red;
	width: 100%; 
	padding-left: 5px;
}
.single-form input[type="text"], .single-form input[type="email"], .single-form input[type="tel"], .single-form input[type="date"], .single-form input[type="datetime-local"], .b-select-time {
   border-radius: 50px; 
    background: #f9f9f9; 
    height: 61px;
    padding: 10px 30px;
    font-size: 18px;
    border: solid 1px rgba(0, 0, 0, 0.1); 
    width: 49.4%;
}
#button-wrapper input {
    border-radius: 25px !important;
}
.confirmation-section {
		position:relative;
		width:100%;
		margin:3rem 0rem;
	}
	.booking-confirmation-info {
		position: absolute;
		left: 50%;
		top: 25%;
		transform: translate(-50%,-25%);
		width:100%;
	}
	.confirmation-button {
		border: 0px solid #000;
		border-radius: 25px;
		background: #d0112b;
		font-size: 0.94em;
		font-weight: 700;
		color: #fff;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
		cursor:pointer;
		float:right;
		padding:1rem 2rem;
		margin:3rem;
	}
	
	@media (max-width:992px) {
		.confirmation-button {
			float:none !important;
			margin-top:50%;
		}
	}
/*----------------------Booking form CSS-------------------------------*/
.booking-form-inputs input {
    margin: 0.5rem 0rem;
}


@media (min-width: 990px) {
	.b-select-time {
		margin-top: 7px;
		margin-left: 4px;
	}
    
}
.more-repair button {
    max-width: 320px;
    color: #fff;
    text-align: center;
    border: none;
    padding: 8px 12px;
    border-radius: 17px;
}
.more-repair button:hover{
opacity:0.8;
}
button,
a,
input[type="submit"]{
	cursor: pointer;
}

.single-form {
    padding: 30px 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 2rem;
}

/*-------------Track Booking CSS-----------------*/
@media (max-width:992px) {
	.track-form input {
		margin-bottom:0.5rem;
	}
    .add-to-cart-btn,
	.remove-from-cart-btn{
   width:100% !important;
}
	.perc-list{
	display:none;
	}
}
@media (max-width:1028px) {
    .hero-section-block button {
    font-size:0.8em !important;
}
}
.track-body {
	padding:2rem;
	min-height:100vh;
}
.track-body h1 {
	font-weight:1000;
	text-transform:uppercase;
	text-align: center;
	color:#d0112b;
	margin-block-end: 0em;    
}
.track-body h3 {
	text-align: center;
	font-weight: 300;
	margin-block-start: 0.2em;
}

.track-form {
	background:#fff;
	padding:1rem 2rem;
	border-radius:10px;
	margin:0.5rem 0.5rem;
	box-shadow: 2px 4px 12px #00000014;
}

form.repair-tracking-form {
    max-width: 480px;
    margin: 20px auto;
    padding: 20px 15px 20px 15px;
    border-radius: 9px;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
}
.track-form label {
	color: #202020;
    font-size: 1em;
    font-weight: 700;
	padding-left:10px;
}
.track-form input {
	width:100%;
	border-radius:13px;
	margin-bottom:1rem;
	margin-top:0.5rem;
	padding:0px 0px 0px 15px;
	font-weight:700;
	font-size:1.2em;
	border: .09375rem solid rgba(202, 201, 201, .65);
	color:#000000;
	height:58px;
}
.track-form input::placeholder {
    color:#999999;
}
.track-form button {
    width: 100%;
    text-align: center;
    cursor: pointer;
    background: #000;
    border-radius: 28px;
    border: none;
    padding: 8px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    transition: background 0.3s, opacity 0.3s;
    height: 65px;
}

.track-form button:hover {
	opacity: 0.8;
}
p.track{
text-align:center;
}


.track-details {
	margin:0.5rem;
	padding:1.7rem 1rem;
	background:#FFF;
	border:solid 1px rgba(0,0,0,0.05);
	border-radius:10px;
	box-shadow: 2px 4px 12px #00000014;
}
.track-details-block {
	padding:1rem;
}
.track-details-block .track-d-b {
	padding:1rem;
	border-radius:6px;
	margin:1rem 0.5rem;
	border:solid 1px rgba(0,0,0,0.05);
	color:gray;
}
.track-details-block .track-d-b label {
	color:#d0112b;
	font-weight:400;
}
.space5px {
	height:5px;
}
/* new css for this new blocks found and empty */
.track-info-message {
	padding:1rem;
	text-align: center;
}

.track-info-message h3 {
	color:gray;
	font-weight: 600;
}
.track-info-message p {
	color:gray;
	font-weight:300;
}

/*--------------Booking Form Additional CSS ---------------------*/
@media only screen and (max-width:767px) {
	.perc-list {
	padding: 10px;
	
	}
}
.booking-form-header hr {
	border-color:rgba(0,0,0,0.1);
}
.perc-list {
    width: 100%;
    padding: 10px;
    max-width: 560px;
    text-align: left;
    margin: 0px auto;
}
.perc-item {
	background:rgba(0,0,0,0.1);
	width:24%;
	height:12px;
	display:inline-block;
}
.active-perc {
	background:#000000;
}
#current-percentage-first-item {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#current-percentage-done-item {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.booking-form-header {
    max-width: 460px;
    margin: 10px auto;
	text-align:center;
}
.perc-item p {
	margin-top:-28px;
}

b.text-center.booking-help-text {
    font-weight: 400;
    color: #d0112b;
    letter-spacing: 1px;
    padding: 0px 30px 30px 30px;
}
.booking-form-header h3{
	margin-bottom: 10px;
 text-transform: capitalize !important;
}
.loader {
    width: 40px;
    height: 40px;
    border: 5px solid #d0112b;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
} 

#button-wrapper {
	text-align: center;
	margin:0.5rem 0rem;
}

#time-slot {
	padding:0.25rem 0rem;
	margin-top:0.25rem;
	position: relative;
}
#time-slot input[type="radio"] {
    display: none; 
}

.radio-relative {
	position:relative;
	width:100%;
}

.radio-relative svg {
    position: absolute;
    right: 0;
    top: 12px;
    left: 13px;
	fill: rgb(237 237 237);
	z-index:9;
}

/* Style the custom radio buttons */
#time-slot input[type="radio"] + label {
    display: inline-block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    color: green;
	margin:0.25rem;
	padding-left:2rem;
	width:100%;
	font-size:16px;
	position:relative;
	font-weight:600;
}


/* Style the custom radio buttons when checked */
#time-slot input[type="radio"]:checked + label {
    background-color: red;
    color: white; 
}
#time-slot input {
	margin-top:0.5rem;
}

#previous-step {
    background-color: #D0112B;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    max-width: 125px; 
    cursor: pointer;
}
.success-result {
	width: 100%;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.success-result h1 {
	text-align:center;
	color:#D0112B;
}
.success-result div {
	margin:0.5rem 0rem;
}
.success-result div label {
	color:gray;
	font-weight:700;
}

.booking-form-inputs {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	padding:1rem;
	border-radius:10px;
	height:100%;
	min-height:300px;
}
div#step_1 #input_location{
    margin: 70px auto;
}

/*-------------------------Single page CSS ----------------*/
.page-title {
    padding: 50px 0px;
    font-weight:700;
    font-size: 60px;
}
@media only screen and (max-width: 767px) {
    .image-with-content {
        padding:0px;
    }
    .page-title {
        font-size: 40px;
    }
}
.page-content p {
    color: #6c6c6c;
    font-weight: 300;
}

/*----------------------Tooltips---------------------*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #fcfcfd;
    color: #fff;
    font-size: .7em;
    text-align: center;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
    color: #000000;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*---------------FAQ css-----------------*/
        .faq-section {
            padding: 50px 20px;
            background-color: #f9f9f9;
        }

        .faq-section h2 {
            text-align: center;
margin-bottom:30px;
        }

        .accordion {
            max-width: 800px;
            margin: 0 auto;
        }

        .accordion-item {
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        .accordion-header {
            background-color: #fff;
            padding: 15px 20px;
            font-size: 1.1rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .accordion-header:hover {
            background-color: #f1f1f1;
        }

        .accordion-content {
            padding: 15px 20px;
            background-color: #fff;
            display: none;
            font-size: 1rem;
            color: #000;
        }

        .accordion-content p {
            margin: 0;
        }

        .icon {
            font-size: 1.5rem;
            color: #333;
            transition: transform 0.3s ease;
        }


        .accordion-item.active .accordion-header {
            background-color: #f1f1f1;
        }
        

    /* Styles for two columns */
.col-half-left,
.col-half-right {
    width: 48%; /* Adjust if needed */
    display: inline-block;
    vertical-align: top;
    padding: 1%;
}

.col-half-left {
    float: left;
}

.col-half-right {
    float: right;
}

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