@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

@import url('custom.css');

 body {
     padding: 0px;
     margin: 0px;
     font-size: 14px;
     background-color: #FFFAF9;
     font-family: 'Roboto', sans-serif;
}
 *, *:before, *:after {
     box-sizing: border-box;
}
 :focus-visible {
     outline: none;
}
 ol, ul, dl {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .radius-5 {
     border-radius: 5px;
}
 .clear {
     clear: both;
}
/*-------------------------------------------------------------- # Header Front css - Desktop --------------------------------------------------------------*/
 .signup-header {
     width: 100%;
     padding: 20px;
     background: #fff;
     box-shadow: 0px 3px 6px #00000029;
     position: relative;
}
 .signup-center {
     max-width: 94%;
     width: 100%;
     margin: 0 auto;
     padding: 0 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
}
 .logo-box {
     width: 151px;
     height: 37px;
}
 .logo-box a {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     width: 100%;
     height: 100% 
}
 .header-mid-box {
     flex: auto;
     margin: 0 auto;
     margin-left: 4%;
}
 .signup-search-bx {
     width: 560px;
     height: 42px;
     margin-bottom: 18px;
     position: relative;
}
 .sfrm {
     background: #F0F5F5 0% 0% no-repeat padding-box;
     border-radius: 12px;
     opacity: 1;
     outline: 0px;
     border: 0px;
     width: 100%;
     height: 58px;
     font-weight: 200;
     position: relative;
     padding: 0 22px;
}
 span.search-icon {
     position: absolute;
     top: 0;
     right: 6px;
     width: 58px;
     height: 58px;
     text-align: center;
     vertical-align: middle;
     color: #414a63;
     font-size: 25px;
     padding: 14px 0 0 0;
     cursor: pointer;
}
 .navigation {
     width: 100%;
     height: auto;
     padding: 12px 0;
}
 .navigation ul {
     margin: 0px;
     padding: 0px;
     display: flex;
}
 .navigation ul li a {
     text-align: left;
     color: #2A2A2A;
     text-decoration: none;
     font-weight: 400;
     padding: 0 28px 0 0;
}
 .navigation ul li a:hover {
     color: #0E294F;
}
 .user-loginbox {
     margin: 0px;
     padding: 0px;
     display: flex;
}
 .user-loginbox li {
     text-align: left;
     font: normal normal normal 14px/19px 'Roboto', sans-serif;
     letter-spacing: 0px;
     opacity: 1;
     width: 184px;
     height: 56px;
     border-radius: 5px;
     transition: 0.3s;
}
 .user-loginbox li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     text-decoration: none;
}
 .dealer-login-btn {
     background: #F68F11;
     margin-right: 22px;
}
 .dealer-login-btn:hover {
     background: #e28412 
}
 li.dealer-login-btn a {
     color: #fff 
}
 .user-loginbox li.normal-login {
     background: #FFFFFF;
     border: 1px solid #0E294F;
     display: flex;
}
 li.normal-login a {
     color: #0E294F;
}
 .u-login {
     background: #fff;
     border-radius: 5px 0 0 5px;
}
 a.active-login {
     background: #0E294F;
     color: #fff !important;
}
 .u-signup {
     background: #FFFFFF;
     border-radius: 0px 5px 5px 0px;
}


.topmenu>ul>li:hover>a,.topmenu>ul>li.active>a {color: #f68f11;}


/*-------------------------------------------------------------- # Header Front css End- Desktop --------------------------------------------------------------*/
/*-------------------------------------------------------------- # Mobile css --------------------------------------------------------------*/


 @media (max-width:1139px) {
     .dealer-login-btn {
         margin-right: 8px;
    }
     .header-mid-box {
         width: 47%;
    }
}

 @media (max-width:1199px) {
.navigation ul li a { padding: 0 26px 0 0;}
.user-loginbox li {width: 165px; height: 45px;}

}

 @media (max-width:992px) {
.user-loginbox {flex-direction: column;}
.user-loginbox li { width: 146px; height: 45px;}
.ld-second-bx a.btn.w-30.font-16{font-size: 14px!important;}


.signup-header {padding: 10px 0;}   
.header-right-box { margin: 0 2rem 0 0;}
.navigation ul {display: block;}
.topmenu>ul>li a {padding: 0 16px 0 0;  color: #fff;}
.topmenu>ul>li {width: 100%; margin: 0 0 20px 0;}
.navicon {display: block; float: right; cursor: pointer;position: absolute;top: 13px;right: 15px;z-index: 99;
width: 25px; height: 30px;  padding-top: 15px;}
.navicon span { width: 18px;  height: 2px; background: #000;position: relative; display: block;}
.navicon span:before,.navicon span:after {content: "";width: 25px;height: 2px;background: #000;display: block; position: absolute;
left: 0;    }
.navicon span:after {width: 18px;}
.navicon span:before {top: -6px;}
.navicon span:after {bottom: -7px;}
.active span:before,.navicon span:after {width: 18px;}
.navicon.active {position: fixed;top: 20px;right: 15px;}
.navicon.active span {background: none;}
.navicon.active span:before {transform: rotate(-48deg); background: #fff;}
.navicon.active span:after {transform: rotate(45deg);bottom: 6px; background: #fff;}
.topmenu { box-shadow: 0 0 3px #ccc; position: fixed; top: 0;right: 0; z-index: 98; width: 250px; padding: 50px 15px 40px;height: 100%; overflow-x: hidden; 
background: #000000; overflow: auto;-webkit-font-smoothing: antialiased; transform-origin: 0% 0%;
transform: translate(100%, 0);transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);}
.topmenu.showmenu {transform: translate(0%, 0);}
.topmenu>ul>li>a { padding: 10px 15px; color: #fff; line-height: 20px;}
.navigation.topmenu ul li a { font-weight: 400;}
.navicon { right: 8px;}
.navicon.active { top: 16px; right: 8px;}
}


 @media (max-width:767px) {
.signup-center {max-width: 100%;}
.ld-second-bx a.btn.w-30.font-16 {width: 40%!important;}
.signup-header {padding: 4px 0;}
.header-mid-box {width: 100%;}
.user-loginbox li a {padding: 11px 0; font-size: 14px;}
.header-right-box {margin: 0 2.5rem 0 0;}
.signup-search-bx {margin-bottom: 0px; margin-top: 12px;}
.sfrm {height: 42px; border-radius: 5px; border: 1px solid #e6e6e6;}
span.search-icon {width: 40px; padding: 6px 0 0 0; height: 42px;}
.user-loginbox li { width: 100%;  margin: 6px; height: auto;}
}

 @media (max-width:575px) {
.logo-box { width: 120px;}
.logo-box img{ width: 100%;}
.navicon { top: 10px;}
}