:root {
    --black: #000000;
    --white: #ffffff;
    --yellow: #F49B00;
    --lightyellow: #F8B53A;
    --grey: #58595B;
    --lightgrey: #c5c5c5;
}

:root {
    --font-main: 'Interstate Regular', sans-serif;
    --font-light: 'Interstate Light', sans-serif;
    --font-black: 'Interstate Black', sans-serif;
    --font-ultrablack: 'Interstate UltraBlack', sans-serif;
}

@font-face {
    font-family: 'Interstate Regular';
    src: url('../webfonts/Interstate-RegularComp.eot');
    src: url('../webfonts/Interstate-RegularComp.otf');
    src: url('../webfonts/Interstate-RegularComp.eot?#iefix') format('embedded-opentype'), url('../webfonts/Interstate-RegularComp.woff2') format('woff2'), url('../webfonts/Interstate-RegularComp.woff') format('woff'), url('../webfonts/Interstate-RegularComp.ttf') format('truetype'), url('../webfonts/Interstate-RegularComp.svg#Interstate-RegularComp') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interstate Light';
    src: url('../webfonts/InterstateLightCompressed.otf');
    src: url('../webfonts/InterstateLightCompressed.eot');
    src: url('../webfonts/InterstateLightCompressed.eot?#iefix') format('embedded-opentype'), url('../webfonts/InterstateLightCompressed.woff2') format('woff2'), url('../webfonts/InterstateLightCompressed.woff') format('woff'), url('../webfonts/InterstateLightCompressed.ttf') format('truetype'), url('../webfonts/InterstateLightCompressed.svg#InterstateLightCompressed') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interstate Black';
    src: url('../webfonts/Interstate-BlackComp.otf');
    src: url('../webfonts/Interstate-BlackComp.eot');
    src: url('../webfonts/Interstate-BlackComp.eot?#iefix') format('embedded-opentype'), url('../webfonts/Interstate-BlackComp.woff2') format('woff2'), url('../webfonts/Interstate-BlackComp.woff') format('woff'), url('../webfonts/Interstate-BlackComp.ttf') format('truetype'), url('../webfonts/Interstate-BlackComp.svg#Interstate-BlackComp') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interstate UltraBlack';
    src: url('../webfonts/Interstate-UltraBlackComp.oft');
    src: url('../webfonts/Interstate-UltraBlackComp.eot');
    src: url('../webfonts/Interstate-UltraBlackComp.eot?#iefix') format('embedded-opentype'), url('../webfonts/Interstate-UltraBlackComp.woff2') format('woff2'), url('../webfonts/Interstate-UltraBlackComp.woff') format('woff'), url('../webfonts/Interstate-UltraBlackComp.ttf') format('truetype'), url('../webfonts/Interstate-UltraBlackComp.svg#Interstate-UltraBlackComp') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
* {
  transition: all 0.3s ease;
}
body,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-size: 24px;
    color: var(--black);
    letter-spacing: 1px;
    margin: 0px;
}

a{
    text-decoration: none;
}

[class*='sec-'] {
    padding: 80px 0px;
}

[class*='sec-'].dark {
    background-color: var(--black);
}

[class*='sec-'].dark .main-heading {
    color: var(--white);
}

[class*="sec-"] .main-heading {
    font-size: 70px;
    font-family: var(--font-black);
    margin-bottom:35px;
}

.navbar-brand img{
    width: 200px;
}

.offcanvas-end {
  width: 300px;
}

.offcanvas-header {
    background: var(--black);
}

.offcanvas-title {
    width: 100%;
}

.offcanvas-title button {
    background-color: var(--white);
    float: right;
    transform: translateY(15px);
    position: relative;
}

.menu-screen {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 15px;
}

.menu-screen [class*="theme-btn"] {
    margin-bottom: 15px;
    text-align: center;
}

.menu-screen.active {
  display: flex;
}

.mobile-menu-btn {
    background-color: var(--yellow) !important;
    padding-top: 10px;
    min-height: 40px;
}

.menu-link {
  padding: 1rem;
  text-decoration: none;
  color: var(--black);
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.menu-link:hover {
  background-color: var(--yellow);
  color: var(--black);
}

.menu-link i {
    float: right;
    font-size: 18px;
    line-height: 35px;
}

.back-btn {
  padding: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  background-color: #f1f1f1;
}

.dropdown-menu {
display: none;
}

.dropdown-menu.show {
display: block;
}

.main-heading {
    font-size: 70px;
    font-family: var(--font-black);
}

.main-sub-heading {
     font-size: 52px;
    font-family: var(--font-black);
}

.theme-btn {
    background: var(--yellow);
    text-transform: uppercase;
    font-size: 24px;
    border-radius: 0;
    border: 3px solid var(--yellow);
    color: var(--black);
    padding: 15px 30px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.theme-btn:hover,.theme-btn:focus, .theme-btn:focus-visible, .theme-btn:active, .theme-btn.theme-btn-outline:hover {
    background-color: var(--white) !important;
    border-color: var(--white) !important;
    color: var(--black) !important;box-shadow: none !important;
}

.theme-btn.theme-btn-outline {
    color: var(--yellow) !important;
    background-color: transparent !important;
}

nav {
    position: absolute !important;
    width: 100%;
    z-index: 111;
}

.navbar-nav {
    gap: 40px;
}

.btns-area {
    gap: 20px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--yellow);
}
#mobileMenu button.btn-close { 
   background-color: #ffffff;
   opacity: .8;
}

.hero-sec.user-register {
    background: url(../images/hero-bg.webp) no-repeat center center / cover;
    position: relative;
}

.hero-sec.user-register .roof-icon {
    width: 645px;
    max-width: 100%;
}

.hero-sec {
  position: relative;
  width: 100%;
  height: 800px;
  color: white;
  display: flex;
  align-items: center;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.3); /* Optional: dim for better text contrast */
  width: 100%;
}

.hero-sec:before {
    position: absolute;
    content: '';
    background-image: linear-gradient(#000000de, #00000099);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.hero-sec [class*="col-"]:first-child {
    position: relative;
    z-index: 1;
}

.hero-sec .container-fluid .img-style {
    width: 750px;
}

.hero-sec h1{
    font-family: var(--font-ultrablack);
    font-size: 105px;
}

.hero-sec .text-end img {
    position: absolute;
    right: 0px;
    width: 700px;
    top: 50%;
    transform: translateY(-50%);
    display:none!important;
}
.hero-sec .text-area .searchbar button{
    background-color: var(--yellow) !important;
}

.hero-sec .text-area .searchbar button:hover{
    background-color: var(--black);
}

.hero-sec .text-area .searchbar input[type="text"]::placeholder {
    color: var(--lightgrey);
}

.hero-sec .text-area .searchbar input[type="text"] {
    font-size: 24px;
    text-transform: uppercase;
    color: var(--grey);
}

.hero-sec .text-area .searchbar i.fa-location-dot:before {
    color: var(--yellow);
}

.counter-sec .brand-aarow {
    max-width: 100%;
    width: 40%;
}

.counter-sec .card img:first-child {
    max-width: 100%;
    padding: 40px 0;
    width: 530px;
}

.counter-sec h2 {
    font-size: 70px;
    font-family: var(--font-black);
}

.counter-sec h2 span {
    color: var(--yellow);
}

.counter-sec p {
    font-size: 30px;
    max-width: 1000px;
    letter-spacing: 0;
    margin: 0 auto 55px;
    font-family: var(--font-light);
}

.counter-sec .feature-wid-icon h5 {
    font-size: 34px;
}

.counter-sec .feature-wid-icon p {
    margin: 0px;
}

.counter-sec .card  img.img-fluid.rating-star {
    width: 30%;
}

.counter-sec .card img:last-child {
    max-width: 260px;
}

.counter-sec .card {
    border: 0;
    background: var(--yellow);
    border-radius: 0;
    margin: 50px 50px 0;
}

.counter-sec .card h3 {
    font-size: 105px;
    margin-top: -82px;
    font-weight: bold;
    margin-bottom: -20px;
    color: var(--black);
}

.counter-sec .card p {
    font-size: 55px;
    margin: 0;
}

.services-sec {
    background: var(--black);
    padding: 70px 0;
}


.services-sec .box a:hover h3 {
  color: var(--yellow) !important;
}


.services-sec .box img {
    max-width: 65px
}


.services-sec .box a:hover img {
    transform: scale(0.9);
    fill: #fff !important;
}


.services-sec .box a h3 {
    font-size: 30px;
    text-transform: uppercase;
}

.services-sec .box a h3:hover{
    color: var(--yellow) !important;
}

.service-area .card-body {
    background-color: var(--black);
}

.service-area .card, .service-area .card img {
    border-radius: 0px;
}

.service-area .card .card-title {
    font-family: var(--font-black);
    color: var(--white);
    font-size:48px;
    text-transform: uppercase;
    margin-top: 10px;
}

.service-area .card .theme-btn:hover {
    background: var(--black);
    color: var(--white);
}

.popular-services-slider .slick-arrow img {
    max-width: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slick-prev {
    left: -55px;
}

.popular-services-slider .slick-prev:before, .popular-services-slider .slick-next:before {
    font-size: 0px;
}

.popular-services-slider .slick-slide{
    margin: 0px 15px;
}

.sec-reviews {
    background: url(../images/reviews-bg.webp) center/cover no-repeat;
    background-color: transparent;
}
.newcta {background: url(../images/newctabg.jpg) center/cover no-repeat;padding: 150px 0;}
.newcta p {color: var(--white); max-width: 80%;margin: 0 auto 40px;}
.newcta .btn-group .theme-btn {width: 180px}

.review-testimonials-area .star-group, .review-testimonials-area .star-group i {
    color: var(--yellow);
    text-align: center;
}
.review-testimonials-area .RT-Slide{
    padding: 0px 30px;
}
.review-testimonials-area .quote-text {
    color: var(--white);
    text-align: center;
    margin: 15px;
}
.review-testimonials-area .author-info {
    text-align: center;
}
.review-testimonials-area .author-info span {
    display: block;
    color: var(--white);
    font-size: 18px;
}
.review-testimonials-area .author-info span:first-child {
    color: var(--yellow);
    font-size: 22px;
}

.section-before-footer {
    background-color: var(--yellow);
}

.section-before-footer .theme-btn {
    background-color: var(--black);
    color: var(--white);
    border: 0;
}

.section-before-footer .theme-btn:hover{
    background-color: var(--white);
    color: var(--black);
}
.section-before-footer p {
    font-size: 30px;
        line-height:2rem;
    max-width: 980px;
    margin: 15px auto;
}
.section-before-footer .theme-btn {width:180px;}

.sec-main-footer {
    padding-bottom: 20px;
}

[class*="widget-footer-"] h4 {
    color: var(--white);
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 600;
}

[class*="widget-footer-"] ul {
    padding-left: 20px;
}

[class*="widget-footer-"] li a {
    font-size: 18px;
    color: var(--white);
    text-decoration: none;
}

[class*="widget-footer-"] li a:hover, [class*="widget-footer-"] li a i {
    color: var(--yellow);
}
.sec-main-footer .footer-logo {
    margin: auto;
    display: block;
    width: 100%;
    text-align: left;
}

.sec-main-footer .after-logo {
    padding: 0px;
    margin: 15px 0px;
    text-align: left;    
}

.sec-main-footer .footer-social {
    text-align: left;
}

.sec-main-footer .footer-social a {
    background: var(--yellow);
    padding: 5px;
    color: var(--black) !important;
    display: inline-block;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 1.3em;
}

.sec-main-footer .footer-social a:hover{
    background: var(--white);
    color: var(--black) !important;
}

.sec-main-footer .after-logo li {
    display: inline-block;
    margin-right: 10px;
}

.sec-main-footer .after-logo li a {
    font-size: 12px;
    color: var(--white);
    text-decoration: none;
}

.sec-main-footer .copyrights {
    color: var(--white);
    font-size: 12px;
    text-align: left;
    margin-bottom: 0px;
}

/**********************************************************Information Step 1*/
.compare-process-list {
    background: var(--black);
    padding: 35px 0px 15px;
    
}

.compare-process-list .step-menu {
    margin: 0px;
    padding: 0px;
    float: right;
    display: none !important;
}

.compare-process-list .step-menu .step-items {
    
    margin-right: 45px;
    display: inline;
}

.compare-process-list .step-menu .step-items a {
    color: var(--white);
    text-transform: uppercase;
}

.compare-process-list .number {
    background: transparent;
    width: 40px;
    height: 40px;
    border: 3px solid var(--yellow);
    border-radius: 100%;
    line-height: 36px;
    text-align: center;
    display: inline-block;
   /* margin-right: 10px;*/
}
.compare-process-list .active .number {
    background: var(--yellow);
}
.sec-page-hero {
    padding: 100px 0px 200px 0px;
}
.compare-field-container {
    background: var(--white);
    padding: 40px;
    text-align: center;
}
.compare-field-container h3 {
    font-family: var(--font-black);
    margin-bottom: 30px;
}
.compare-field-container .input-group{
    gap:15px;
}
.compare-field-container .theme-btn {
    width: 180px;
    color: #fff;
}
.compare-field-container .theme-btn:hover {
    background-color: var(--black) !important;
    color: var(--white) !important;
}
.compare-field-container .form-control:focus {
    border-color: #f5c87b;
    box-shadow: 0 0 0 .25rem rgb(244 155 0 / 30%);
}
.compare-field-container .form-control, .compare-field-container .input-group-text {
    border-radius: 0px;
    border: 2px solid #999999;
    padding: 15px;
    font-size: 24px;
    background: #e6e7e8;
}
.compare-field-container textarea.form-control {
    min-height: 150px;
}

.compare-field-container .input-group-text {
    color: var(--yellow);
    padding: 15px 25px;
}

/**********************************************************Information Step 2*/

.compare-field-container .theme-btn-outline {
    color: var(--yellow);
}
.compare-field-container .theme-btn-outline:hover {
    color: var(--white) !important;
}
.compare-field-container .custom-radio-group label {
    background-color: var(--white);
    border: 2px solid #999999;
    padding:15px;
    display: block;
    width: 100%;
    text-align: left;
    border-top: 0px;
    line-height: 28px;
    display: flex;
}
.compare-field-container .custom-radio-group label:first-child {
    border-top: 2px solid #999999;
}
.compare-field-container .custom-radio-group label.active {
    background-color: #e6e7e8;
}

.compare-field-container .custom-radio-group input {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #999;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin-top: 2px;
    margin-right: 10px;
    vertical-align: middle
}

.compare-field-container .custom-radio-group input[type="checkbox"] {
    border-radius: 0;
}

.compare-field-container .custom-radio-group input:checked {
  border-color: var(--yellow);
  background-color: var(--yellow);
}

/**********************************************************Information Step 6*/
.contrectors {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    border: 1px solid var(--grey);
    padding: 20px;
}

.contrectors-bio {
  display: flex;
  flex-direction: column;
}

.contrectors-bio ul {
    display: flex;
    flex-direction: row;
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 18px;
}

.contrectors-bio li {
    margin-right: 10px;
}

.contrectors-bio ul img {
    width: 18px;
    margin-top: -4px;
    margin-right: 2px;
}

.contrectors label {
    cursor: pointer;
    font-size: 38px;
    text-align: left;
}

.contrectors input {
    margin-left: 10px;
    transform: scale(1.2);
    border-radius: 0px !important;
}

.section-quote-info .theme-btn:hover {
    background-color: var(--black);
    color: var(--white);
}


#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  font-size: 18px;
  background-color: var(--black);
  color: var(--white);
  flex-wrap: wrap;
}

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

.footer-right {
  text-align: right;
}

.footer-right a {
   color: var(--white);
  text-decoration: none;
  font-size: 18px;
}

/* login form page style start*/
.loginform-sec {background: var(--black);}
.formbtn-group {display: flex; justify-content: space-between;}
.loginform-sec .compare-field-container .theme-btn {width: 48%;}
.loginform-sec .compare-field-container .theme-btn.btn-outline { background-color: transparent !important; color: var(--yellow) !important;}
.loginform-sec .compare-field-container .theme-btn.btn-outline:hover, .loginform-sec .compare-field-container .theme-btn.btn-outline:focus, .loginform-sec .compare-field-container .theme-btn:hover, .loginform-sec .compare-field-container .theme-btn:focus { background-color: var(--black) !important; color: var(--white) !important;border-color:var(--black) !important;}
.loginform-sec .compare-field-container form p {font-size: 16px; letter-spacing: 0; padding: 15px 0 0; text-align: left;}
.loginform-sec .compare-field-container form p  i {padding-right: 5px;color: #f49b00;}
.compare-process-list h3 {color:#fff; text-align: right;text-transform: uppercase;}
.compare-process-list h3 a {color:var(--yellow);}
.loginform-sec .compare-field-container label, .loginform-sec .compare-field-container p, #codeSection label {font-size: 18px; color: var(--black)!important;}
.compare-field-container #resendBtn, .compare-field-container #gobackBtn {padding: 7px 30px;}
.compare-field-container #alert-placeholder .alert { font-size: 20px;line-height: 22px;}
.compare-field-container #multiStepForm .form-step .compare-field-container {padding: 0;}
p.legal-text, p.legal-text a {font-size: 20px;line-height: 28px;letter-spacing: 0.25px;}
p.legal-text a {text-decoration: underline;}

/*User Registartion*/

.sec-user-register p.lead {
    font-size: 26px;
}

.sec-user-register .step-box {
  width: 150px;
  text-align: center;
}

.sec-user-register .step-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 3px solid var(--yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    margin-bottom: 0.5rem;
    background: transparent;
    font-size: 24px;
}

.sec-user-register .step-circle.active-step {
  background:var(--yellow);
  color: var(--white);
  border: none;
}

.sec-user-register .step-label {
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--white);
    font-weight: bolder;
}

.sec-user-register .form-box .form-control, .sec-user-register .form-box .form-select {
    border-radius: 0px;
    border: 2px solid #999999;
    padding: 10px;
    font-size: 24px;
    background: #e6e7e8;
    box-shadow: none;
}

.sec-user-register .form-box .form-check-input {
    border-radius: 0px !important;
    border: 2px solid #999999;
}

.sec-user-register .form-box .form-check-input:checked[type=checkbox] {
    border: none;
}

.sec-user-register .form-box #step4 .form-control {
    text-align: center;
}

.sec-user-register .form-box .theme-btn {
    width: 48%;
    color: var(--white);
}

.sec-user-register .form-box .theme-btn.btn-outline {
    background-color: transparent !important;
    color: var(--yellow) !important;
}

.sec-user-register .form-box .theme-btn:hover,
.sec-user-register .form-box .theme-btn:focus, 
.sec-user-register .form-box .theme-btn.btn-outline:hover,
.sec-user-register .form-box .theme-btn.btn-outline:focus{
    background-color: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important; 
}

[class*="sec-"] .form-box .main-heading {
    font-size: 65px;
}

#step4 p.text-center {
    font-size: 16px;
    letter-spacing: 0px;
    margin: 15px 0px;
}

#step2 #verification_code_boxes {
    width: 480px;
    max-width: 100%;
    margin: 0px auto 30px; 
}

#step9 .compare-field-container {display: flex; gap: 10px;}

/*pricing page style */
.pricing-row {
    padding:250px 0 0;
}
.pricing-row p {
/*    color: var(--white);*/
    text-align: center;
    margin: 0px 150px 40px;
}
.pricing-row .price-box {
    background-color:#262626;
    border-radius: 20px;
    margin: 10px;
    text-align: center;
}
/*.pricing-row .price-box, .pricing-row .price-box .price h3 {
    color: var(--white);
}*/
.pricing-row .price-box .price h3 {
        font-size: 72px;
    font-family: var(--font-black);
}
.pricing-row .price-box .price h3 span {
    font-size: 24px;
}
.pricing-row .price-box .price h4 {
    font-size: 24px;
    color: var(--yellow);
    display: block;
    margin: 10px 15px 25px;
}
.pricing-row .price-box p i {

}
.pricing-row .price-box h2 {
   color: var(--yellow);
    font-size: 170px;
    text-transform: uppercase;
    font-weight: bolder;
    font-family: var(--font-black);
    letter-spacing: 2px;
}
.pricing-row .price-box .theme-btn {
    padding: 8px 20px;
    min-width: 270px;
    font-family: var(--font-black);
}
.pricing-row .price-box ul {
    margin: 40px 30px 0;
    list-style: none;
    padding: 40px 0 40px;
    border-top: 2px solid #636466;
}
.pricing-row .price-box ul li, #dashboard-section .card-box p, .sec1 .price p, .legal-doc .features p {
    font-size: 30px;
    padding-bottom: 20px; 
    line-height: 38px; 
}
h2.h2-stl {
    color:var(--yellow);
    font-size:140px; 
    font-weight: 900;     
    font-family: var(--font-black);
}
.sec1 h1 {
   font-family: var(--font-ultrablack);
}
.sec1 p, .sec1 h1 {
    max-width: 900px;
    margin: 0 auto;
}
.sec1 p {
    margin: 15px auto 50px;
}
.sec1 .price p {
    margin: 0 auto;
}
.whychoose-row {
    padding: 80px 0;
}
.whychoose-row h3 {
    font-size: 35px;font-weight: 600;
}
.whychoose-row .box img {
    max-width: 100px;
}
.sec1.pricing-row .price-box ul {
    border-top: 0;
    margin-top: 0;
}
.sec1 hr {
    margin: 50px 50px 0;
    height: 3px;
    background-color: #636466;
    color: #636466;
}
.sec1 h2, .h2-stl, .pricing-row .price-box h2 {
     background-image: linear-gradient(0deg, #eeae39, #ffa001); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;}
.com-soon-text {color:var(--black); background: linear-gradient(to bottom, #f7941d, #fbc02d); 
    border-radius:20px 20px 0 0; text-align:center; font-size:60px; font-weight: 900;}
.registration-steps-section {border-bottom: 1px solid #323232;}

/* Dashboard page style */
.dashboard-panel .btn-primary:hover { background: #ffffff; color: #000;}
.dashboard-panel .col-md-3 { padding: 0;}
.dashboard-panel .top-part {padding: 40px 30px 30px;}
.dashboard-panel .top-part .username, .dashboard-panel .top-part .searchform { border: 2px solid #414042;background-color: #000;
    padding: 6px 10px;border-radius: 8px;}
.dashboard-panel .top-part .username {margin: 35px 0 20px 0;display: flex;gap: 15px;}
.dashboard-panel .top-part .username img {max-width: 45px;}
.dashboard-panel .top-part .username h3, .leftbar-links ul li a, .bottom-link a, #mobileMenu ul li a {font-size: 20px;color: var(--white);
    font-family: var(--font-black);}
.dashboard-panel .top-part .username h3 span {font-family: 'Interstate Regular'; display: block;color:#808285;}
.dashboard-panel .top-part .searchform input {padding: 0 0 0 25px; background-color: transparent;border: 0;background: url("../images/search-icon.png") no-repeat left center;
    background-size: 16px;font-size: 28px;line-height: 28px;}
.dashboard-panel .top-part .searchform input::placeholder {color: #808285;opacity: 1; /* Firefox */}
.dashboard-panel .top-part .searchform input::-ms-input-placeholder { /* Edge 12 -18 */  color: #808285;}
.leftbar-links ul {    list-style: none; padding: 0;}
.leftbar-links ul li a, .bottom-link a, #billing-section .card p, #mobileMenu ul li a { font-size: 28px;padding: 15px 30px;display: block;}
.leftbar-links ul li a.active, .bottom-link a.active, #mobileMenu ul li a.active {background-color: var(--black);color: var(--yellow);}
.leftbar-links ul li a img, .bottom-link a img {margin-right: 5px;}
.leftbar-links ul li a.active .wht-icon, .leftbar-links ul li a .ylw-icon, 
.bottom-link a.active .wht-icon, .bottom-link a .ylw-icon {display: none;}
.leftbar-links ul li a.active .ylw-icon, .bottom-link a.active .ylw-icon {display: inline-block;}
.right-panel {padding: 50px;}
#dashboard-section .card-box, #billing-section .card-box, #settings-section .card-box, #leads-section table, #billing-section table, #marketplace-section .card-box, .adm-lgn.card-box { background-color: #161616;border-radius: 8px; border: 2px solid #414042;}
#dashboard-section .card-box h3 { color: var(--yellow);font-size: 72px;font-family: var(--font-black);}
#dashboard-section .card-box h3, #dashboard-section .card-box p {font-family: var(--font-black);}
.help-icon ul { list-style: none;}
.help-icon a.sidelink { background: var(--yellow);width: 32px;display: inline-block;text-align: center; font-size: 18px;border-radius: 50%;
    padding: 0px;border: 2px solid var(--yellow);} 
.help-icon a.sidelink.user {background: transparent;}
#dashboard-section .card-box p.lead-p {font-size: 40px; line-height: 36px;}
#dashboard-section .card-box small, #billing-section p, #billing-section table, #marketplace-section h5, #marketplace-section label.form-label, #marketplace-section form p, #marketplace-section form {font-size: 28px;}
#dashboard-section .card-box button.theme-btn, #settings-section button.theme-btn, #billing-section a.theme-btn, #marketplace-section button.theme-btn, #leads-section button.theme-btn {height: 60px;padding: 10px 30px;border-radius: 4px;font-weight: 600;}
#dashboard-section .card-box:hover a p {color: var(--yellow) !important;}

/* Leads Style*/
#leads-section table {font-size: 20px;line-height: 20px;}
#leads-section table th, #billing-section table th {background-color: transparent;font-size: 18px;border-bottom-width: 2px; padding: 14px;}
#leads-section table tr, #billing-section table tr {border-bottom: 2px solid #414042;}
#leads-section table td, #billing-section table td {background-color: var(--black);padding: 14px;}
#leads-section table th:first-child, #leads-section table td:first-child {padding-left:25px;}
#leads-section table th:last-child, #leads-section table td:last-child {padding-right:25px;}

/* billing style */
#billing-section h4, #settings-section h4, #marketplace-section h4 {font-size: 38px;font-weight: 600;}
#billing-section .plan-name {color: var(--yellow);font-size: 72px;line-height: 72px; font-weight: 600;}
#billing-section table td a {color: var(--yellow);}
#billing-section table th {font-size:26px;}
#billing-section a.theme-btn {width: 200px; padding: 10px;}
#billing-section .card p {padding: 0;}
.scrollable-table { max-height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #414042 #000000;}
/*#billing-section .lead-balance-number {font-size: 140px; line-height: 136px;}*/
/*#billing-section a.*/
 
/* setting style */
#settings-section label {font-size: 28px;}
#settings-section input, #settings-section select, #settings-section textarea, #marketplace-section form select, #marketplace-section form input, #settings-section .div-stl, .adm-lgn form input {font-size: 28px; background-color: var(--black);border: 2px solid #414042;color: #fff;padding: 2px 15px;box-shadow: none;}
#settings-section .div-stl {border-radius: 0.375rem;min-height: 48.21px;}
#settings-section input.form-check-input {background-color: var(--yellow);border-color: var(--yellow);}
#settings-section .cstmw-20 {width: 20%}
#settings-section .cstmw-80 {width: 80%}
#settings-section .cstmw-75 {width: 75%}
#settings-section .cstmw-25 {width: 25%}
.dashboard-panel select.form-select option:hover { background-color: var(--yellow);}
#documents-edit .small {color: var(--white) !important;}
.license-scroll {max-height: 110px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #414042 #000000;}
/*Marketplace style */
#marketplace-section form input.form-range {padding: 0;background-color: transparent;border: 0;}
#marketplace-section form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #414042;}
#marketplace-section form input::-moz-placeholder { /* Firefox 19+ */
  color: #414042;}
#marketplace-section form input:-ms-input-placeholder { /* IE 10+ */
  color: #414042;}
#marketplace-section form input:-moz-placeholder { /* Firefox 18- */
  color: #414042;} 
#marketplace-section .card-box .price {font-size: 48px; font-weight: 600;}

/* policy page style */
.policy-wrap {background: var(--black);}
.terms-condition{ padding-top:120px; }
.yellow-see h1 { color: var(--yellow); font-size: 72px; line-height: 72px; font-weight: 600;}
#marketplace-section input[type="checkbox"] {border-radius: 0;}
.dashboard-panel input:checked, .cat-stl .btn.active { border-color: var(--yellow) !important;background-color: var(--yellow) !important;}
#leads-section select, #applyFilters, .cat-stl .btn, #leads-section input { background-color: #161616; border-radius: 6px;border: 2px solid #414042;color: var(--white); font-size: 24px; text-transform:uppercase; box-shadow: none;}
#leads-section input::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color: var(--grey);}
#leads-section input::-moz-placeholder { /* Firefox 19+ */  color: var(--grey);}
#leads-section input:-ms-input-placeholder { /* IE 10+ */  color: var(--grey);}
#leads-section input:-moz-placeholder { /* Firefox 18- */  color: var(--grey);}
#leads-section form select {font-size: 18px; text-transform:normal;} 
#leads-section button.theme-btn {height: 50px; font-size: 20px;line-height: 20px;padding: 10px 55px;}
#lead-scroll-container {scrollbar-width: thin; scrollbar-color: #414042 #000000;}
.cat-stl .btn.disabled {opacity: 1;width: 130px;text-transform: none;}
.dashboard-panel .btn-primary:hover {background: #fff;color: #000000;}
.note-form textarea { background: transparent; border-color: #414042; resize: none;border-radius: 4px;margin-bottom: 5px;width: 100%  !important;}
#billing-section .paycardbox { line-height: 72px;}
#helpModal form label {color: var(--black);}
/* Legal Center Page Style */
.legal-doc.sec1 hr { margin: 0px 50px 0;}

/* blog page style */
.bloghero {background: url(../images/blog-heroimg.webp) center/cover no-repeat;padding: 250px 0 165px 0;position: relative;   }
.bloghero:before {position: absolute;content: ''; background-color: var(--black);opacity: .5; width: 100%; height: 100%; top: 0;}
.bloghero .container {position: relative;}
.bloghero h1 {font-size: 260px; font-family: var(--font-ultrablack); }
.bloghero p {font-size: 30px;}
.postgrid {padding: 100px 0 50px; background: var(--black);}
.blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.blog-grid .blog-item {border-radius: 4px; background: var(--white);}
.blog-grid .blog-item img {border-radius: 4px 4px 0 0;width:100%; height: auto;}
.blog-grid .blog-item .blogtext {padding: 25px;}
.blog-grid .blog-item .post-category {font-size: 24px;color: var(--yellow); letter-spacing: 0.25;}
.blog-grid .blog-item h3 a {font-size: 34px;letter-spacing: 0; margin: 5px 0; display: inline-block;}
.blog-grid .blog-item .post-date {font-size: 20px;}
.blog-grid .blog-item p { letter-spacing: 0; font-size: 20px; margin: 10px 0;}
.blog-grid .blog-item a.bloglink {letter-spacing: 0; display: inline-block;}

/* single post style */
.single-post, .errorpage {background: var(--black);}
.single-post main {padding: 200px 15px 50px;max-width: 1320px !important; color: var(--white);}
.single-post main img {margin: 0 auto 20px;}
.single-post main h1 {max-width: 1320px !important; color: var(--white); font-size: 50px; margin-bottom: 20px; }
.single-post main p, #subusers-section {color: var(--white); }


/* 404-error page style */
.errorpage h1 { font-size: 240px; color: var(--yellow);font-family: var(--font-black); }
.errorpage h2 {font-size: 60px; }

.contractors-table {border-collapse: collapse;  margin-top: 20px;}
.contractors-table th, .contractors-table td { border: 2px solid #414042 !important; padding: 10px;font-size: 18px;line-height: 26px;
    color: #fff;background-color:#161616;font-weight: 400;}
.contractors-table td { font-size: 18px!important;background-color: var(--black);  }
.contractors-table tr:nth-child(even) { background: #f9f9f9; }
ul.nav.flex-column{padding:0px; background-color: #161616 !important;}
ul.nav ul li a.active  {color: #f49b00 !important;}
.adm-lgn h1 { font-size: 30px; font-family: var(--font-black);}
.adm-lgn form input {font-family: var(--font-main); font-size: 18px;padding: 12px 15px;border: none !important;box-shadow: none !important;}
.adm-lgn form  #togglePassword {top: 68px; bottom: 0; right: 10px; cursor: pointer;}
.admin-side.left-bar {width: 100%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #414042 #000000;
    background-color: #161616;
}
.dashboard-panel .table-responsive {scrollbar-color: #414042 #000000; scrollbar-width: thin;}
#datatablesSimple_length {float:left; margin-right:25px;}
#datatablesSimple_filter input[type="search"] {padding: 4px 10px;border-radius: 6px;outline: none;
    box-shadow: none;background: var(--white);color: var(--black);}
#leads-section button.theme-btn.buttons-csv {background-color: var(--yellow); border: 0;margin-right: 20px;}
#datatablesSimple_length select {padding: 8px 5px; border: 0;border-radius: 6px;outline: none;}
.export-btn {padding: 8px 30px;}
.leftbar-links ul ul li a, #mobileMenu ul ul li a {padding:5px 50px; font-size: 22px;}


 @media (min-width: 992px) { 
    .fixed-sidebar { position: fixed; top: 0; left: 0; width: 25%; height: 100vh; background-color: #161616; z-index: 999;}
    .main-content { margin-left: 75%;}
}