:root {
    --PrimaryColor: #000;
    --SecondaryColor: #AD9A80;
    --WhiteColor: #fff;
    --BlackColor: #000;
    --heading-text: #342E2C;

}

html {
    font-size: 16px;
}
html,
body {
    scroll-behavior: smooth; overflow-x: hidden;
}
@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-ExtraLight.eot");
    src: url("../fonts/Inter24pt-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-ExtraLight.woff2") format("woff2"), url("../fonts/Inter24pt-ExtraLight.woff") format("woff"),
        url("../fonts/Inter24pt-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Bold.eot");
    src: url("../fonts/Inter24pt-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Bold.woff2") format("woff2"), url("../fonts/Inter24pt-Bold.woff") format("woff"), url("../fonts/Inter24pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Regular.eot");
    src: url("../fonts/Inter24pt-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Regular.woff2") format("woff2"), url("../fonts/Inter24pt-Regular.woff") format("woff"),
        url("../fonts/Inter24pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Thin.eot");
    src: url("../fonts/Inter24pt-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Thin.woff2") format("woff2"), url("../fonts/Inter24pt-Thin.woff") format("woff"), url("../fonts/Inter24pt-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Light.eot");
    src: url("../fonts/Inter24pt-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Light.woff2") format("woff2"), url("../fonts/Inter24pt-Light.woff") format("woff"),
        url("../fonts/Inter24pt-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Black.eot");
    src: url("../fonts/Inter24pt-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Black.woff2") format("woff2"), url("../fonts/Inter24pt-Black.woff") format("woff"),
        url("../fonts/Inter24pt-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-ExtraBold.eot");
    src: url("../fonts/Inter24pt-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-ExtraBold.woff2") format("woff2"), url("../fonts/Inter24pt-ExtraBold.woff") format("woff"),
        url("../fonts/Inter24pt-ExtraBold.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-SemiBold.eot");
    src: url("../fonts/Inter24pt-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-SemiBold.woff2") format("woff2"), url("../fonts/Inter24pt-SemiBold.woff") format("woff"),
        url("../fonts/Inter24pt-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter 24pt";
    src: url("../fonts/Inter24pt-Medium.eot");
    src: url("../fonts/Inter24pt-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Inter24pt-Medium.woff2") format("woff2"), url("../fonts/Inter24pt-Medium.woff") format("woff"),
        url("../fonts/Inter24pt-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body {
    color: #3a3a3a;
    font-family: "Inter 24pt";
    font-weight: 400;
}
a {
    text-decoration: none;
    transition: all 0.2s ease;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.bg-soft {
    background: #F8F8F8;
}

.btn {
    font-size: 0.8rem;
    padding: 0.5rem 1.6rem;
    border-radius: 3px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn:hover,
.btn:focus,
.btn.active {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary {
    color: var(--WhiteColor);
    background: var(--PrimaryColor);
    border-color: var(--PrimaryColor);
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
    background-color: var(--WhiteColor) !important;
    color: var(--PrimaryColor) !important;
    border-color: var(--PrimaryColor) !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-outline-primary{border:solid 1px var(--BlackColor); color: var(--BlackColor); background: var(--WhiteColor);}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--BlackColor) !important;
    color: var(--WhiteColor) !important;
    border-color: var(--BlackColor) !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-white{border:solid 1px var(--WhiteColor); background: var(--WhiteColor); color: var(--BlackColor);}

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



.same-section {
    padding: clamp(5rem, 7vw, 5rem) 0;
}
.same-heading {margin-bottom: 4rem;}
.same-heading h2 {
    color:#2D2D2D;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2; margin-bottom: 1rem;
}
.same-heading h3 {
    color:var(--BlackColor);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5; margin-bottom: 1rem;
}

.same-heading p {
     color: var(--BlackColor);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}

.black-text{color: var(--BlackColor) !important;}
.max-wid-50{width: 100%; max-width: 60%;}
.same-heading.text-center .max-wid-50{margin:0 auto;}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.header  {padding: 1rem 0;  transition: all 0.3s ease;}
.header .navbar{padding: 0; flex-wrap: nowrap;}
.header .container-fluid{padding: 0 3vw;}
.header .navbar .nav a:not(.btn-primary){color: var(--BlackColor); font-size: 0.9rem; font-weight: 400; padding: 0.3rem 1.3rem; border-radius: 3px; }

.header .navbar .nav a:not(.btn-primary):hover{background: #E0E0E0;}
.header .navbar .nav li.active a{background: #E0E0E0;}
.header .navbar .nav a.btn-primary{  min-width: 13rem;}
.header .navbar-brand {padding: 0;}
.header .navbar-brand img {max-height: 2.8rem;}
.header.headerFix { position: fixed; top: 0; left: 0; width: 100%; background: var(--WhiteColor); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08); z-index: 9999;animation:headerfixdown 0.7s; } 

@keyframes headerfixdown {
    0% {
    opacity: 0;
    transform: translateY(-100%);
} 
100% {
    opacity: 0.9;
    transform: translateY(0);
    } 
}

.mobile-menu-toggle { background: var(--PrimaryColor); color: var(--WhiteColor); width: 2rem; height: 2rem; padding: 0.2rem; border-radius: 50%; line-height: 0; border: solid 1px var(--PrimaryColor); font-size: 1rem; cursor: pointer;  display: none;}
.mobile-menu-toggle svg{width: 1rem; color: var(--WhiteColor);}
.body-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1050; display: none;}

 .btn-group-list {display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 3rem;}
 .btn-group-list .btn{width: 100%; max-width: 13rem;}



.hero-banner{background: url(../images/banner-bg.jpg)no-repeat center top/cover; padding-top: 5rem; min-height: 85vh;}
.hero-banner h1{font-size: 2.2rem; font-weight: 600; color: var(--BlackColor); line-height: 1.2; margin-bottom: 2rem;}
.btn-primary.wid-250{width: 100%; max-width:13rem ;}


.decentralized-wrap .same-heading{margin-bottom: 8rem;}
.decentralized-wrap .decentralized-content{text-align: center;}
.decentralized-wrap .decentralized-content .icon-bx{text-align: center; min-height: 4rem; margin: 0 auto 1.2rem;}
.decentralized-wrap .decentralized-content p{font-size: 1rem; color: #2D2D2D; line-height: 1.3; font-weight: 600;}
.decentralized-wrap .decentralized-content .icon-bx img {
    width: 100%;
    max-width: 50px;
}


.vision-wrap{background:url(../images/our-mission-bg.jpg)no-repeat center top/cover;     min-height: 34rem;}
.vision-wrap .same-heading h2{color: var(--WhiteColor); margin-bottom: 2rem;}
.vision-wrap .same-heading p{color: var(--WhiteColor);}
.vision-wrap .btn-outline-primary{background: transparent; color: var(--WhiteColor); border-color: var(--WhiteColor);}

.vehicle-license-wrap .licence-plate-img{ width: 100%; max-width: 56rem; margin: auto;} 



.technology-wrap{padding-bottom: 0 !important;}

.technology-wrap .bg-img-bx{background: url(../images/technolgy-secure-bg.png)bottom center/cover;min-height: 50rem; }
.technology-wrap .info-card{ background: var(--WhiteColor); border-radius: 5px; border: 1px solid rgba(15,23,42,0.06); text-align: left; transition: transform 220ms ease, box-shadow 220ms ease; padding: 1.5rem;}
.technology-wrap .info-card h3{ color: var(--BlackColor); font-size: 1rem; font-weight: 600; line-height: 1.5; min-height: 3rem; }
.technology-wrap .info-card p{ color: #646464; font-size: 0.8rem; font-weight: 400; line-height: 1.5; margin-bottom: 0; }
.technology-wrap .info-card .icon-bx{ width: 100%; min-height: 5rem;}
/* .technology-wrap .info-card .icon-bx img{ width: 100%;max-width: 4rem;} */




.faq-wrapper{background: #EEEEEE;}

.faq-wrapper  .accordion{margin-top: 3.5rem;}
.faq-wrapper  .accordion .accordion-item{border:0; }
.faq-wrapper .accordion .accordion-button{ font-size:0.9rem; padding:1.1rem 1.5rem;background: #EEEEEE; color: var(--BlackColor); font-weight: 600; padding-left: 0; border-bottom:1px solid #CFCFCF; }
.faq-wrapper  .accordion .accordion-button::after{display: none;}
.faq-wrapper .accordion .accordion-button:not(.collapsed){ box-shadow:none; }
.faq-wrapper .accordion  .accordion-button:focus{outline: none !important; box-shadow: none !important;}
.faq-wrapper .accordion .accordion-body{ padding:1rem 1.5rem 1.25rem; color:var(--BlackColor); font-size:0.9rem;background: #EEEEEE; padding-left: 0; }




/* Card */

.vehicle-card-wrap{background: #EEEEEE;}
.vehicle-card {

  background: var(--WhiteColor);
  border: 0.125rem solid var(--WhiteColor);
  border-radius:0;
  padding: 1rem;
  
}

/* Header */
.vehicle-card .vehicle-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vehicle-card .vehicle-header .vehicle-info{width: 60%;}
/* .vehicle-card .vehicle-header .rep-badge{width: 40%;} */
.vehicle-card .vehicle-model {
  margin: 0; 
  font-size: 1.1rem;color: var(--BlackColor); font-weight: 600;
}

.vehicle-card .vehicle-details {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: #484848;
}



.vehicle-card .vehicle-score {
  text-align: center;
}

.vehicle-card .score-value {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto 0.3rem;
}

.vehicle-card .score-text {
  margin: 0;
  font-size: 0.7rem;
  color: #333;
}

.vehicle-card .score-text span {
  color: #777;
}

/* Image */
.vehicle-card .vehicle-image {
  text-align: center;
  margin: 0.5rem 0;
}

.vehicle-card .vehicle-image img {
  max-width: 100%;
  height: auto;
}

/* Stats */
.vehicle-card .vehicle-stats { display: flex; justify-content: space-between; border-bottom: 1px solid #CACACA; padding:1rem 0; margin: 1rem 0; } 
.vehicle-card .stat-item { text-align: center; position: relative; }
.vehicle-card .stat-item:nth-child(2){padding: 0 1rem; margin: 0 0.5rem; } 
.vehicle-card .stat-item:nth-child(2)::before{position: absolute; left:-0; top: 0; width: 1px; height: 100%; background: #CACACA; content: '';}
.vehicle-card .stat-item:nth-child(2)::after{position: absolute; right:-0; top: 0; width: 1px; height: 100%; background: #CACACA; content: '';}

.vehicle-card .stat-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--BlackColor);
}

.vehicle-card .stat-unit {
  font-size: 0.75rem;
  color: #646464; font-weight: 400;
  margin-left: 0.2rem;
}

.vehicle-card .stat-label {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #828282;
}

/* Footer */
.vehicle-card .vehicle-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-card .price-amount {
  margin: 0;
  font-size: 1rem; color: var(--BlackColor); font-weight: 600;
}

.vehicle-card .price-period {
 font-size: 1.1rem;
  color: #717171; font-weight: 400;
}

.vehicle-card .price-note {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #3C3C3C;
}


.vehicle-card .rep-badge {
  width: 6rem; /* 100px */
  display: flex;
  flex-direction: column;
  align-items: center;

}

/* Gauge box */
.vehicle-card .rep-badge .gauge { width: 100%; height: 2.6rem;  position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } 
/* Arc (ring) */
.vehicle-card .rep-badge .arc {    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    background: radial-gradient(circle at center, #fff 2.1rem, transparent 2.1rem), conic-gradient(from -90deg, #ff6b3d 0deg, #ffb400 90deg, #7ed957 180deg), #f1f5f9;
    box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.05);} 

.vehicle-card .rep-badge .pointer { position: absolute; right: 1%; top: 30%; transform: translate(-50%, -50%) rotate(140deg); width: 0; height: 0; border-left: 0.7rem solid transparent; border-right: 0.7rem solid transparent; border-top: 0.7rem solid #ADD042;} 


/* Score number */
.vehicle-card .rep-badge .center-score { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-30%); text-align: center; z-index: 2; } 
.vehicle-card .rep-badge .center-score .score-in{font-size: 1rem; color: var(--BlackColor); font-weight: 700;}
.vehicle-card .rep-badge .reputation-text{color: #575757; font-size: 0.7rem; font-weight: 400; text-align: center; position: relative;   line-height: normal; top: -3px;}


.membership-wrap {    background: #EEEEEE;}
.membership-wrap  .same-heading h2{margin-bottom: 0.5rem;}
.membership-wrap .plan-card { background: var(--WhiteColor); padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 23rem; }

/* Header */
.membership-wrap .plan-card  .plan-header {
  margin-bottom: 0.8rem;
}
.membership-wrap .plan-card  .plan-name {
  font-size: 1.1rem;
  font-weight: 600; color:var(--BlackColor);
  margin-bottom: 0.4rem;
}
.membership-wrap .plan-card  .plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.5rem; color: var(--BlackColor);
}
.membership-wrap .plan-card .plan-price .currency {
  position: relative; top: -7px;
}
.membership-wrap .plan-card .plan-price .amount {
  font-size: 1.5rem;
  font-weight: 600; color: var(--BlackColor);
}
.membership-wrap .plan-card .plan-price .period {
  font-size: 1rem;  font-weight: 600;
color: var(--BlackColor);
}
.membership-wrap .plan-card .plan-sub {
  font-size: 0.8rem;  font-weight: 400;
color: #848484;
}

/* Body */
.membership-wrap .plan-card .plan-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  flex-grow: 1;
}
.membership-wrap .plan-card .plan-feature {
  margin-bottom: 1rem;
}
.membership-wrap .plan-card .feature-label {
  font-weight: 500;
  font-size: 0.7rem;color: #585858;
}
.membership-wrap .plan-card .feature-value {
  font-size: 0.9rem;
  color: var(--BlackColor); font-weight: 500;
  margin-top: 0.2rem;
}

/* Footer */
.membership-wrap .plan-card .plan-footer {
  margin-top: 2rem;
}

.membership-wrap .plan-card .plan-footer .btn-primary{display: block;width: 100%;}


.work-steps-wrap {position: relative; margin-top: 7rem;}
.work-steps-wrap .work-steps-lable {
  position: absolute;
  max-width: 14rem;    
  z-index: 5;
  color: var(--BlackColor);
  text-align: center;
  pointer-events: auto;
}

.work-steps-wrap .work-steps-lable .label-title {
  font-weight: 600;
  font-size: 0.95rem;     /* ~15px */
 color: var(--BlackColor);
}
.work-steps-wrap .work-steps-lable .label-sub {
  font-size: 0.75rem;     /* ~12px */
 color: var(--BlackColor); width: 100%; max-width: 60%;  margin:0 auto 0.5rem;
}

/* Connector dot */
.work-steps-wrap .work-steps-lable .connector {
  position: absolute;
  width: 2px;   
  height: 4rem;
  background: var(--BlackColor);
  border-radius: 50%;
left: 50%; transform: translateX(-50%);    bottom: -4rem;
  
}

/* Connector line (pseudo-element) — default vertical line above/below the dot */
.work-steps-lable .connector::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;  
  height: 10px;      border-radius: 50%;
  background: var(--BlackColor);
  bottom: 0;         
  opacity: 0.9; 
}

/* Individual label positions
   Adjust left/top values to match your specific SVG image layout.
   Values below match the reference placement but you may tune them slightly. */

.work-steps-wrap .work-steps-lable.label-1 {
left: 16.5%;
top: 44%;
}


/* Label 2 (slightly lower, mid-left) */
.work-steps-wrap .work-steps-lable.label-2 {
    left: 48.5%;
    top: 52%;
}

.work-steps-wrap .work-steps-lable.label-2 .connector {
top: -4rem;
}
.work-steps-wrap .work-steps-lable.label-2 .connector::before{
    top: 0;
}

/* Label 3 (upper-mid, centered above path) */
.work-steps-wrap .work-steps-lable.label-3 {
    left: 62%;
    top: -6%;
}


/* Label 4 (right side) */
.work-steps-wrap .work-steps-lable.label-4 {
left: 76%;
    top: 72%;
}
.work-steps-wrap .work-steps-lable.label-4 .connector {
top: -4rem;
}
.work-steps-wrap .work-steps-lable.label-4 .connector::before{
    top: 0;
}


.footer{background: #f5f5f5; color: #6b6b6b;  }
.footer .footer-top{padding: 2rem 0; }
.footer .footer-menu li a{ color: var(--BlackColor); font-size: 0.875rem; font-weight: 400; padding: 0.3rem 0; display: block;} 
.footer .footer-mid { border-top: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; } 
.footer .footer-mid .company-links{ display: flex; /* gap: 1.125rem; */ flex-wrap: wrap; align-items: center; font-size: 0.813rem; } 

.footer .footer-mid{background: #d4d4d4;}
.footer .footer-mid .company-links li a{padding: 9px; position: relative;    color: #252525; font-size: 0.8rem; font-weight: 400; display: block;}
.footer .footer-mid .company-links li a::after{content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); height: 11px; width: 1px; background: #000;}
.footer .footer-mid .company-links li:first-child a{background: #bfbfbf;    margin-right: 0.5rem; }
.footer .footer-mid .company-links li:first-child a:before{ content: ""; width: 0; height: 0; border-top: 7px solid transparent; border-left: 7px solid #bfbfbf; border-bottom: 7px solid transparent; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.footer .footer-mid .company-links li:first-child a::after{display: none;}
.footer .copyright{padding: 0.5rem 0;}
.footer .copyright p{ font-size: 14px; color: #656364; font-weight: 500; margin-bottom: 0;}
.footer .copyright p a{ color: #656364;}
.footer .copyright .socials-links { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.footer .copyright .socials-links a{ display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; color: #000; background: transparent; text-decoration: none; font-size: 0.875rem; }
.footer .copyright .socials-links a svg{width: 1.2rem;}
.footer .copyright .payments{ display: flex ; justify-content: end;}



.filter-wrapper{background: #f6f6f7; padding: 1rem 0 4rem;}
.filter-wrapper .filters { padding: 0.875rem; font-size: 0.8125rem; line-height: 1.3; }
.filter-wrapper .filters h4{ margin: 0.8rem 0; font-size:1rem; color: var(--BlackColor); font-weight: 600; } 
.filter-wrapper .filters .radios label{ display:flex; gap:0.5rem; align-items:center; padding:0.375rem 0.25rem; cursor:pointer; color: #222; }
.filter-wrapper .filters .radios input{ display:none }
.filter-wrapper .filters .custom-radio{ width:1.3rem; height:1.3rem; border-radius:50%; border:1px solid #6B6B6B; display:inline-block; position:relative; flex:0 0 1.3rem; box-sizing:border-box; }
.filter-wrapper .filters .radios input:checked + .custom-radio{ border-color:#444; }
.filter-wrapper .filters .radios input:checked + .custom-radio::after{ content:""; position:absolute; left:0.3rem; top:0.3rem; width:0.6rem; height:0.6rem; border-radius:50%; background:#444; }
.filter-wrapper .filters .radios .label-text{ font-size:0.78125rem; color:#333 }

/* Checkboxes */
.filter-wrapper .filters .checks label{ display:flex; gap:0.5rem; align-items:center; padding:0.375rem 0.25rem; cursor:pointer; color:var(--BlackColor); font-weight: 400; font-size: 0.9rem; }
.filter-wrapper .filters .checks input{ display:none }
.filter-wrapper .filters .custom-check{ width:1.3rem; height:1.3rem; border:1px solid #6B6B6B; display:inline-block; position:relative; border-radius:3px; flex:0 0 1.3rem; }
.filters .checks input:checked + .custom-check{ background:#111; border-color:#111; }
.filter-wrapper .filters .checks input:checked + .custom-check::after{ content: ""; position: absolute; left: 0.3rem; top: 0.1rem; width: 0.5rem; height: 0.8rem; border: 0.15rem solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg); } 
/* Color swatches */
.filter-wrapper .filters .swatches{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap }
.filter-wrapper .filters .swatch{ width:1.3rem; height:1.3rem; border-radius:0.25rem; box-shadow: 0 0.0625rem 0 rgba(0,0,0,0.07); border:0.125rem solid transparent; cursor:pointer; display:inline-block; flex:0 0 auto; }
.filter-wrapper .filters .swatch[data-color="#fff"]{ background: linear-gradient(45deg,#fff,#f0f0f0); border-color:#dcdcdc }
.filter-wrapper .filters .swatch[data-color="#e6e6e6"]{ background:#e6e6e6 }
.filter-wrapper .filters .swatch[data-color="#1f2937"]{ background:#1f2937 }
.filter-wrapper .filters .swatch[data-color="#0b69ff"]{ background:#0b69ff }
.filter-wrapper .filters .swatch[data-color="#002b2b"]{ background:#002b2b }
.filter-wrapper .filters .swatch[data-color="#a61919"]{ background:#a61919 }
.filter-wrapper .filters .swatch.selected{ outline: 0.125rem solid #111;}
.filter-wrapper .filters .muted{ color:#7a7a7a; font-size:0.75rem }


.filter-wrapper  .custom-select-wrapper .form-select{border: solid 1px #D2D2D2; border-radius: 5px; font-size: 0.8rem; color: var(--BlackColor); font-weight: 400; width: 100%; max-width: 200px; margin:0 0 1rem auto;}
.filter-wrapper .form-select:focus{outline: none !important; box-shadow: none !important;}
.filter-wrapper .mobile-filter-button{ display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 5px; font-size: 0.8rem; color: var(--BlackColor); font-weight: 400; border: solid 1px #D2D2D2; background: #fff; cursor: pointer;}
.filter-wrapper .mobile-filter-button svg{width: 1.3rem;}
.filters .close-filters { display: none; padding: 0; background: var(--BlackColor); border: none; font-size: 1rem; cursor: pointer; color: var(--WhiteColor); width: 2rem; height: 2rem; border-radius: 50%; margin:0 0 0.5rem auto; }
.filters .close-filters svg{width: 1.2rem; }





.product-detail-wrap .product-details h2{font-size: 1.5rem; color: var(--BlackColor); font-weight: 600; line-height: normal; margin-bottom: 0.5rem;}
.product-detail-wrap .product-details .sub-title{font-size: 1rem; color: var(--BlackColor); font-weight: 600;}
.product-detail-wrap .product-details p{font-size: 1rem; color: #4C4C4C; font-weight: 400; line-height: 1.6; }

.product-detail-wrap .stats-row .stat-item { text-align: center; position: relative; }
.product-detail-wrap .stats-row .stat-value { margin: 0; font-size: 1rem; font-weight: 600; color: var(--BlackColor); }
.product-detail-wrap .stats-row .stat-unit { font-size: 0.75rem; color: #646464; font-weight: 400; margin-left: 0.2rem; }
.product-detail-wrap .stats-row .stat-label { margin: 0.2rem 0 0; font-size: 0.75rem; color: #828282; } 
.product-detail-wrap .stat-item:nth-child(2){padding: 0 1rem; margin: 0 0.5rem;}
.product-detail-wrap .stat-item:nth-child(2)::before { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #CACACA; content: ''; }
.product-detail-wrap .stat-item:nth-child(2)::after { position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: #CACACA; content: ''; }

.product-detail-wrap .detail-list li{font-size: 0.9rem; color: #4C4C4C; font-weight: 400; padding: 0.2rem 0; }

.product-details .stats-row { display: flex; gap: 1rem; margin: 1rem 0; } 
.product-details .stat .value { font-weight: 600; font-size: 1.1rem; } 
.product-details .stat .label { font-size: 0.85rem; color: #6c757d; } 
.product-details .price-box { background: #E6E6E6; padding: 1rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid #E6E6E6; margin-top: 1.5rem; } 
.product-details .price-amount { font-size: 1.2rem; font-weight: 600; color: var(--BlackColor); } 
.product-details .price-amount .stat-unit{ color: #717171; font-weight: 400; } 
.product-details .fees-text{ color: #3C3C3C; font-weight: 400; font-size: 0.9rem; } 

.product-details .delivery-zip-wrap{margin-top: 2rem;}
.product-details .delivery-zip-wrap h4{ font-size: 1.4rem; color: var(--BlackColor); font-weight: 600; margin-bottom: 1rem;}
.product-details .delivery-zip-wrap .input-group {gap:0.5rem}
.product-details .delivery-zip-wrap .input-group .form-control{border-radius: 5px !important; border: solid 1px #C9C6C6; }
.product-details .delivery-zip-wrap .input-group .btn-primary{border-radius: 3px !important; }
.product-details .delivery-zip-wrap .lease-payment-wrap{margin: 2rem 0;}
.product-details .delivery-zip-wrap .btn-outline-primary{background: #F8F8F8;}
.product-details  .payment-title{color: var(--BlackColor); font-weight: 600; font-size:1.2rem;}
.product-details .order-fees{color: #828282; font-weight: 400; font-size:0.8rem;}
.product-details .price-amount{color: var(--BlackColor); font-size: 1rem; font-weight: 600;}
.product-details .price-amount .stat-unit{color: #717171; font-size: 0.8rem; font-weight: 400;}


.product-details .back-step-arrow{color: var(--BlackColor); margin-bottom: 1.5rem; display: inline-block;}
.product-details .product-qr-code hr{margin: 1.5rem 0;}
.product-details .product-qr-code .lease-payment-wrap{margin-bottom: 2rem;}
.product-details .product-qr-code .bar-code .img-bx{width: 100%; max-width: 150px; margin:0 auto 1.5rem;}
.product-details .product-qr-code p{font-size: 1rem; color: var(--BlackColor); font-weight: 400; text-align: center;}
.checkout-form-wrap .product-details .form-group{margin-bottom: 1rem;}

.checkout-form-wrap .product-media {margin-top: 200px;}
.checkout-form-wrap .product-details .form-group label{color: #5B5B5B; font-weight: 600; font-size: 1rem;}
.checkout-form-wrap .product-details .form-group .form-control{background: #EEEEEE;  font-weight: 600;  font-size: 0.9rem; color: #A4A4A4; border: solid 1px #EEEEEE; padding: 0.5rem ;}
.checkout-form-wrap .product-details .form-group .form-select{background-color:#EEEEEE; font-weight: 600; color: var(--BlackColor); font-size: 0.9rem; }
.checkout-form-wrap .product-details form p{font-size: 0.9rem; color: var(--BlackColor); font-weight: 400; text-align: left;}
.checkout-form-wrap .product-details form p a{color: var(--BlackColor); text-decoration: underline;}

.form-control:focus,.form-select:focus{outline: none !important; box-shadow: none !important;}


.clearAutomodal-wrap .btn-close{width: 1.5rem; height: 1.5rem; background: var(--WhiteColor); color: var(--BlackColor); border-radius: 50%; position: absolute; right: -16px; top: -16px; opacity: 1; cursor: pointer; z-index: 99; display: inline-flex; align-items: center; justify-content: center;}
.clearAutomodal-wrap video#myVideo { width: 100%;    height: 70vh; }
.clearAutomodal-wrap .modal-body{padding: 5px;background: var(--BlackColor); border: solid 5px #fff;}