@import url("constant.css?t=dserf");

/*:root {
   --main_background_color : #FFFFFF;
   --main_background_text_color :#545454;

   --header_button_color : #fff;
   --header_button_text_color : #3eb5dd;
   --header_button_hover_color : transparent;
   --header_button_text_hover_color : #fff;

   --menu_color : #FFFFFF;
   --menu_hover_color : #fff;

   --primary_color :#3db5e0;
   --primary_text_color : #FFFFFF;
   --primary_hover_color : #3db5e0;
   --primary_text_hover_color : #fff;

   --secondary_color:#59c29f;
   --secodary_text_color : #FFFFFF;
   --secodary_hover_color : #59c29f;
   --secodary_text_hover_color : #fff;

   --footer_background_color : #1a1a1a;
   --footer_second_background_color : #000;
   --footer_text_color : #5F5F5F;
   --footer_text_hover_color : #fff;
   --social_icons_background_color : #3cb4e5;
   --social_icons_background_hover_color : #FFFFFF;
   --social_icons_text_color : #FFFFFF;
   --social_icons_text_hover_color : #000;

   --heading_title_color :#3eb5dd;
   --heading_sub_title_color :#545454;
}*/

/***button css***/

.btn-outline-light {
   font-size: 16px;
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 8px;
   padding-bottom: 8px;
   background-color: var(--header_button_color);
   color: var(--header_button_text_color);
   font-weight: 500;
   -webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.16);
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.16);
   text-transform: uppercase;
   letter-spacing: 0.6px;
   font-family: 'PT Sans';
    font-weight: 600;
}
.btn-outline-light:hover {
   -webkit-box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   background-color: var(--header_button_hover_color);
   color: var(--header_button_text_hover_color);
   border: 1px solid var(--header_button_hover_color);
}
.btn-primary {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   border: none;
   font-size: 16px;
   padding-left: 25px;
   padding-right: 25px;
   padding-top: 8px;
   padding-bottom: 8px;
   font-weight: bold;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   color: var(--primary_text_color);
   -webkit-box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
   font-family: "Metropolis";
}
.btn-primary:hover {
   -webkit-box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   color: var(--primary_text_hover_color);
   background: -webkit-gradient(linear, left top, right top, from(var(--secondary_color)), to(var(--primary_color)));
   background: linear-gradient(to right, var(--secondary_color), var(--primary_color));
}
.btn-outline-dark {
   color: var(--primary_color);
   border-color: var(--primary_color);
   background-color: #fff;
   font-size: 18px;
   font-weight: 500;
   font-family: "Metropolis"; 
}
.btn-outline-dark:hover {
   -webkit-box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 7px rgba(0, 0, 0, 0.2);
   background-color: #fff;
   color: var(--primary_color);
   border-color: var(--primary_color);
}
.btn-outline-light {
   color: var(--header_button_text_color); 
   border-color: var(--header_button_color); 
}

/***hedear color***/

header.blue {
   background: -webkit-gradient(linear, left top, right top, from(var(--home_header_primary_bg)), to(var(--home_header_secondary_bg)));
   background: linear-gradient(to right, var(--home_header_primary_bg), var(--home_header_secondary_bg));
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 99;
   box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05);
}
body.inner header {
   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    background: -webkit-gradient(linear, left top, right top, from(var(--fix_header_primary_bg)), to(var(--fix_header_secondary_bg)));
   background: linear-gradient(to right, var(--fix_header_primary_bg), var(--fix_header_secondary_bg));
}

.block.main-menu ul li a {
   color: var(--menu_color);
   font-size: 18px;
   padding: 10px 15px;
   line-height: 20px;
   display: block;
   text-decoration: none;
   border: 1px solid transparent;
   border-bottom: 3px solid transparent;
   -webkit-transition: 0.3s ease;
   transition: 0.3s ease;
   border-radius: 40px;
   font-weight: 400;
   letter-spacing: 0.7px;
   font-family: "Metropolis";
}

.block.main-menu ul li a:hover {
 color: var(--menu_hover_color);
}
.main_footer .company ul li a:hover {
 color: var(--menu_hover_color) !important;
}
.main_footer .marketing-collaboration ul li a:hover {
 color: var(--menu_hover_color) !important;
}

.block.main-menu ul li.submenu .droupdown li a:focus,
.block.main-menu ul li.submenu .droupdown li a:hover {
   border-radius: 0px;
   border: none;
   color: var(--sub_menu_hover_color);
}

/* h2 as well as h1: only the FIRST hero heading on the page is an h1 now,
   so a second slider slide renders h2 and must look identical. */
.block.showcase-text h1,
.block.showcase-text h2 {
   font-size: 48px;
   margin-bottom: 0;
   font-weight: 900;
   line-height: 55px;
   color: #fff;
   font-family: "Metropolis";
}
.block.showcase-text p {
   font-size: 19px;
   margin-bottom: 0;
   padding: 15px 0 20px;
   color: #fff;
   font-family: "Metropolis";
}

/***body section**/

.block.heading h3 {
   font-size: 34px;
   color: var(--heading_title_color);
   line-height: 45px;
   margin-bottom: 0px;
   font-weight: bold;
   font-family: "Metropolis";
}
.block.heading h3 span {
   display: block;
   font-size: 30px;
   font-weight: 400;
   color: var(--heading_sub_title_color);
}
.block.devices .category.row .card .image:after {
   background-color: #fff;
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-radius: 50%;
   z-index: -1;
}
.block.devices .category.row .card .image:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -2;
   margin: -3px;
   border-radius: inherit;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.block.devices .category.row .card .image:hover:before {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   border-top-right-radius: 40%;
   border-top-left-radius: 60%;
   border-bottom-left-radius: 30%;
   border-bottom-right-radius: 60%;
   opacity: 0.7;
}
.block.devices .category.row .card .image:hover:after {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.block.devices .card h5 {
   font-size: 20px;
   color: var(--main_background_text_color);
   margin-bottom: 0px;
   padding-bottom: 30px;
   font-weight: 400;
   letter-spacing: 0.5px;
   font-family: "Metropolis";
}

/***block calculate-cost***/

.block.calculate-cost h3 {
   color: #fff;
   font-weight: 600;
   font-size: 27px;
   padding-bottom: 8px;
   font-family: "Metropolis";
   letter-spacing: 0.6px;
}
/* Home model-search field. Was transparent + white text: a pair that only
   reads over a dark hero image, and 10 of 14 tenants have a LIGHT hero, so
   the typed text and placeholder were invisible fleetwide (input contrast
   audit, 2026-08-17). White field + dark text reads on any hero; dark-scheme
   tenants restore the transparent look via BaseLayout's (G2). */
.block.calculate-cost form .form-control {
   background-color: #fff;
   color: #111;
   border: 1px solid #ced4da !important;
   text-align: center;
   min-width: 260px;
   font-family: "Metropolis";
   letter-spacing: 0.5px;
}
.block.calculate-cost form button.btn {
   color: #fff;
}
.device-slider .device h5 {
   font-size: 20px;
   color: var(--main_background_text_color);
   margin-bottom: 0;
   padding-top: 20px;
   font-weight: 400;
   letter-spacing: 0.5px;
   font-family: "Metropolis";
}
.device-slider .device:hover h5 {
   color: var(--primary_color);
}
.device-slider .slick-dots li.slick-active {
   background: var(--primary_color);
   width: 30px;
   -webkit-transition: 0.3s;
   transition: 0.3s;
   border: none;
}
.device-slider .slick-dots li {
   list-style: none;
   float: left;
   width: 10px;
   height: 10px;
   border-radius: 10px;
   -webkit-transition: 0.3s;
   transition: 0.3s;
   border: 2px solid var(--primary_color); 
}
.home_brand_section .block.device-brands .brand-roll .brand a {
   border: 2px solid #e9ecef;
   min-height: 80px;
   position: relative; 
   /*height: 170px;*/
   height:160px;
   -webkit-box-shadow: 0 8px 15px -10px rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0 8px 15px -10px rgba(0, 0, 0, 0.16);
   -o-box-shadow: 0 8px 15px -10px rgba(0, 0, 0, 0.16);
   box-shadow: 0 8px 15px -10px rgba(0, 0, 0, 0.16);
   /*width: 270px;*/
   width:210px;
   border-radius:5px;
   margin:0 8px;
}

/***22/08/2020***/

.home_brand_section .block.device-brands .brand-roll .brand a:hover {
   background:none;
   cursor: pointer;
   border:2px solid var(--primary_color);
   -webkit-transition: 0.3s;
   transition: 0.3s;
   -webkit-transform: scale(1.1);
   transform: scale(1.1)
}
.block.newsletter.text-right #clk_ftr_signup_btn .fab {
    color:var(--primary_color);
}
.home_brand_section .block.device-brands .brand-roll .brand a:hover img {
   filter: none;
}
.home_brand_section .block.device-brands .brand-roll .brand .arrow i {
    display: none;
}
.home_brand_section .block.device-brands .brand-roll .brand a:hover .arrow {
   display: block;
   position: absolute;
   right: -23px;
   top: -6px;
   border-left: 35px solid transparent;
   border-right: 35px solid transparent;
   border-bottom: 35px solid var(--primary_color);
   transform: rotate(45deg);
}
.home_brand_section .block.device-brands .brand-roll .brand a:hover .arrow i{
   position: absolute;
   transform: rotate(-45deg);
   left: -8px;
   top: 12px;
   color: var(--primary_text_color);
   display: block;
}
.home_brand_section .block.device-brands .brand-roll .brand a:hover:before {
   display:none;
}
/***end 22/08/2020***/

.block.device-brands .brand-roll .brand a:hover {
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   border: none;
}
.block.heading.thin-title h3 {
   font-weight: bold;
   color: var(--heading_title_color);
   font-size: 40px;
}
.block.condition-tab .nav.nav-pills .nav-link.active {
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   -webkit-box-shadow: 0 5px 10px rgba(14, 39, 39, 0.2);
   box-shadow: 0 5px 10px rgba(14, 39, 39, 0.2);
   color: #fff;
   border-radius: 30px;
}
.block.condition-tab .upto-price-button {
   top: -53px;
   right: 0;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   background: var(--primary_color) !important;
   background-image: none;
}

/***why choose***/

.block.why-choose .card-title {
   font-size: 22px;
   line-height: 30px;
   margin: 0;
   padding: 20px 0 15px 0;
   color: var(--main_background_text_color);
   font-weight: 400;
   font-family: "Metropolis";
}
.block.why-choose .card-body p {
   color: var(--main_background_text_color);
   font-size: 17px;
   font-weight: 400;
   letter-spacing: 0.5px;
   font-family: "Metropolis";
}
.block.why-choose .card-group>.card+.card:after {
   position: absolute;
   content: "";
   width: 3px;
   height: 100%;
   -webkit-transform: rotate(10deg);
   transform: rotate(10deg);
   background:#000;
}

/***easy how it work***/

body #how-it-works {
   background-repeat: no-repeat;
   background-position: top center;
   background-size: 100% auto;
   background-color: var(--primary_color);
}
body #how-it-works .block.heading.black h3 span {
   color: var(--secondary_text_color);
}
body #how-it-works .block.easy-steps .card-title {
   color: var(--main_background_text_color);
}
body #how-it-works .block.easy-steps p {
   color: var(--main_background_text_color);
   font-family: "Metropolis";
   font-weight:400;
}
.block.heading.black h3 {
   color: var(--secondary_text_color);
   font-weight: bold;
   font-family: "Metropolis";
}
.block.easy-steps .card-title {
   font-size: 26px;
   color: var(--main_background_text_color);
   text-align: center;
   font-weight: 500;
   letter-spacing: 0.5px;
}
.block.easy-steps p {
   font-size: 16px;
   padding-left: 30px;
   padding-right: 30px;
   text-align: center;
   color: var(--main_background_text_color);
   letter-spacing: 0.5px;
   font-weight: 400;
}

/***ready to start***/

#readyStart .block.heading h3 {
   color: var(--heading_title_color);
}
#readyStart .block.heading p {
   color: var(--main_background_text_color);
   margin: 0;
   padding: 20px 0 5px !important;
   font-weight: 500;
   letter-spacing: 0.8px;
   font-size:17px;
}

/***review section***/

#review:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
}
.block.heading.dark h3 {
   color: var(--secondary_text_color);
}
#review .block.heading h3 span {
   color: var(--secondary_text_color);
   letter-spacing: 0.5px;
}
.block.review-slide .card .card-body .image {
   position: absolute;
   width: 85px;
   height: 85px;
   border-radius: 95px;
   overflow: hidden;
   border: 2px solid #fff;
   left: -47.5px;
   top: 40px;
}
.block.review-slide .card .card-body {
   background: var(--primary_color);
   border: 2px solid #fff;
   height: auto;
   min-height: 195px;
   position: relative;
   padding: 15px 5px 15px 45px;
   -webkit-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -o-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   display: flex;
   justify-content: center;
   align-items: center;
}
.block.review-slide h4 {
   font-size: 16px;
   font-weight: 300;
   margin-bottom: 0px;
   padding-top: 0px;
   color: #fff;
   font-family: "Metropolis";
   letter-spacing: 0.6px;
   /*word-break: break-all;*/
}
.block.review-slide p {
   font-size: 13px;
   font-weight: 300;
   color: #fff;
   margin-bottom: 0px;
   line-height: 20px;
   letter-spacing: 0.7px;
   padding: 5px 10px 8px 0;
   font-family: "Metropolis";
   letter-spacing: 0.6px;
}

/***news lettersection***/

.block.newsletter h3 {
   font-size: 25px;
   color: var(--heading_title_color);
   font-weight: 400;
   letter-spacing: 0.5px;
   font-family: "Metropolis";
}
.block.newsletter .form-inline {
   border-radius: 40px;
   display: inline-block;
   padding-left: 10px;
   padding-right: 0px;
   overflow: hidden;
   border: 2px solid var(--primary_color);
}

/***inner page**/

.block.devices .category.row.model-category .card h6 {
   font-size: 18px;
   color: var(--primary_color);
   padding-top: 5px;
   font-family: "Metropolis";
}
.block.heading .form-control {
   border-radius: 30px;
   text-align: center;
   font-size: 18px;
   width: 30%;
   border: 1px solid var(--primary_color) !important;
   font-family: "Metropolis";
}
body.inner .block.heading.page-heading h3 {
   color: var(--heading_title_color);
   font-weight: 500;
}
/* Custom CMS pages without a header image now render their title as <h1> for
   SEO (was <h3>). Hold the H1 to the previous H3 appearance so the visual size
   is unchanged. Lives in color.css because it ships un-purged. */
body.inner .block.heading.page-heading h1 {
   color: var(--heading_title_color);
   font-weight: 400;
   font-size: 1.75rem;
   line-height: 1.2;
   letter-spacing: 0.7px;
   margin-bottom: 0.5rem;
}
@media (max-width: 767.98px) {
   body.inner .block.heading.page-heading h1 {
      font-size: 20px;
   }
}

/* The model page heading is now an <h1> (was <h3>): product pages shipped with
   no h1 at all. Pin it to the EXACT previous h3 appearance so nothing moves on
   any tenant. Old cascade was `.block.heading h3` (34px / 45px / Metropolis /
   margin-bottom 0) with `body.inner .block.heading.page-heading h3` overriding
   the weight to 500. Scoped by id so it beats the generic page-heading h1 rule
   above without touching CMS page titles.
   The :not(.bb-head) is what protects the chip layout: an id selector here
   OUT-SPECIFIES that layout's own `.bb-brutal #bb_model_heading { font-size:
   19px }`, so without the exclusion this rule would blow the heading up
   wherever chips are enabled. No tenant runs chips today, so it is defensive,
   but the first one to enable them would have found it the hard way. */
body.inner .block.heading.page-heading:not(.bb-head) h1#bb_model_heading {
   font-size: 34px;
   line-height: 45px;
   font-weight: 500;
   letter-spacing: normal;
   margin-bottom: 0;
   font-family: "Metropolis";
   color: var(--heading_title_color);
}
/* Catalog listing pages (category, brand, device, /sell) now carry a topical
   <h1> where they previously had a generic <h3> and NO h1 at all. Pin the h1 to
   the exact former h3 appearance so nothing moves on a live tenant.

   The pair below mirrors the existing h3 cascade one for one: `.block.heading
   h3` sets 34px/45px/bold/Metropolis, and `body.inner .block.heading.page-heading
   h3` then overrides the weight to 500.

   `body` is in the base selector on purpose. Without it this ties on
   specificity with the generic `body.inner .block.heading.page-heading h1` rule
   for CMS titles (28px) and would be decided by source order, which is exactly
   the kind of thing that breaks the next time someone reorders this file. */
body .block.heading h1.bb-page-h1 {
   font-size: 34px;
   color: var(--heading_title_color);
   line-height: 45px;
   margin-bottom: 0px;
   font-weight: bold;
   font-family: "Metropolis";
   letter-spacing: normal;
}
/* The category page's heading sits inside .page-heading, so the generic CMS
   title rule above (`body.inner .block.heading.page-heading h1`, 4 classes)
   OUT-SPECIFIES the base rule here (3 classes) and shrank it to 28px. This
   variant carries 5 classes, so it wins, and it has to restate the size and
   line-height, not just the weight override that the h3 pair needed. Caught by
   diffing computed styles against live before promoting. */
body.inner .block.heading.page-heading h1.bb-page-h1 {
   font-size: 34px;
   line-height: 45px;
   font-weight: 500;
   letter-spacing: normal;
   margin-bottom: 0px;
}
@media (max-width: 767.98px) {
   body .block.heading h1.bb-page-h1 {
      font-size: 24px;
      line-height: 32px;
   }
}

body.inner .block.heading .back-button {
   position: absolute; 
   right: 15px;
   top: 11px;
   background-color: #fff; 
   border: 1px solid var(--primary_color); 
   color: var(--primary_color);
   background-image: none;
}
body.inner .block.heading.page-heading .back-button {
   position: absolute;
   right: 15px;
   top: 11px;
   background-color: #fff;
   border: 1px solid var(--primary_color);
   color: var(--primary_color);
   background-image: none;
}
.block.phone-details .upto-price-button {
   top: -2px;
   right: 0;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.block.phone-details .card .h4 span i {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.block.phone-details .card .status-options .custom-control.custom-radio .custom-control-label,
.block.phone-details .card .carrier-options .custom-control.custom-radio .custom-control-label,
.block.phone-details .card .storage-options .custom-control.custom-radio .custom-control-label {
   padding: 10px 8px;
   min-width: 130px;
   max-width: 200px;
   text-align: center;
   font-size: 16px;
   border: 2px solid #e9ecef;
   font-weight: 400;
}
.block.phone-details .card .status-options .custom-control.custom-radio .custom-control-label span,
.block.phone-details .card .carrier-options .custom-control.custom-radio .custom-control-label span,
.block.phone-details .card .storage-options .custom-control.custom-radio .custom-control-label span {
   color: var(--main_background_text_color);
   font-family: "Metropolis";
}
.block.phone-details .card .status-options .custom-control.custom-radio .custom-control-input:checked~.custom-control-label,
.block.phone-details .card .carrier-options .custom-control.custom-radio .custom-control-input:checked~.custom-control-label,
.block.phone-details .card .storage-options .custom-control.custom-radio .custom-control-input:checked~.custom-control-label {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   color: #fff;
   border: 2px solid var(--primary_color);
}
.custom-control.custom-radio.custom-control-inline:hover {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   color:var(--primary_text_color);
}
.question .modern-block__content .options_values .btn:hover { 
   border-color: var(--primary_color);
   color: var(--primary_text_color)!important;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.question.client .custom-control input:checked~.custom-control-label {
   color: var(--primary_text_color)!important;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.question .modern-block__content .options_values .btn.sel {
   color: var(--primary_text_color)!important;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}
.custom-control.custom-radio.custom-control-inline .custom-control-label:hover span {
   color: #fff !important;
}
.block.condition-tab .show-price .price-total {
   font-size: 110px;
   font-weight: 100;
   background: var(--primary_color);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.block.condition-tab .show-price button.accept-btn.btn-outline-light,
.block.condition-tab .show-price a.accept-btn.btn-outline-light {
   border-color: #ced4da;
   font-size: 14px;
   line-height: 20px;
}
.block.why-choose-page {
   font-size: 25px;
   color: var(--main_background_text_color);
   padding-left: 0px;
   padding-right: 0px;
   margin-left: 0px;
   margin-right: 0px;
}
.faq_page .block.setting-page .accordion .card {
   border: 1px solid #d9d9d9 !important;
   margin-bottom: 15px;    
   border-radius: 0;    
}
.faq_page .h2 {
   color: var(--primary_color);
   font-family: "Metropolis";
}
.block.setting-page .accordion .card .card-header .btn.btn-link.collapsed {
   text-decoration: none;
   color: var(--main_background_text_color);
   -webkit-text-fill-color: var(--main_background_text_color);
   letter-spacing: 0.5px;
   font-family: "Metropolis";
}
.block.setting-page .accordion .card .card-header .btn.btn-link {
   padding: 0px;
   color: var(--main_background_text_color) !important;
   font-size: 20px; 
   font-weight: 400;
   position: relative;
   width: 100%;
   text-align: center;  
   padding-right: 40px; 
   text-decoration: none;
   text-shadow: none;
   letter-spacing: 0.5px;
}
.block.setting-page .accordion .card .card-body {
   padding: 20px 20px 20px 20px;
   font-size: 16px;
   color: var(--main_background_text_color);
   font-weight: 400;
   text-align: center;
   letter-spacing: 0.2px;
   margin: 0 0 
}     
.block.heading h4 {
   color: var(--main_background_text_color);
   font-size: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-bottom: 0px;
}
.table-div .table-row.head .table-cell {
   color: #fff;
   padding: 10px;
   font-family: "Metropolis";
}
.table-div .table-row.head {
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   border-radius: 8px;
   margin-bottom: 10px;
}

.table-div .table-row:nth-child(even) {
   background-color: #f1f1f1;
   border-radius: 8px;
}

.price-item {
   background-color: #fff;
   font-size: 20px;
   font-weight: 700;
   border: 1px solid #e9ecef;
   padding: 10px 20px;
   display: inline-block;
   border-radius: 30px;
   min-width: 110px;
   text-align: center;    
}

.price-item span {
   background: #000;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-family: "Metropolis";
}

.table {
   width: 100%;
   margin-bottom: 1rem;
   color: var(--main_background_text_color);
   font-family: "Metropolis";
}

.cart-total-cell p.note {
   color: var(--main_background_text_color);
   font-size: 14px;
   max-width: 300px;
   margin-bottom: 20px;
}

.cart-total-cell h5.title {
   color: var(--main_background_text_color);
   font-size: 24px;
   font-weight: 400;
   display: inline-block;
   margin-right: 2px;
   font-family: "Metropolis";
}

.cart-total-cell {
   font-size: 18px;
   font-family: "Metropolis";
}

.cart-total-cell h5.price-coupon .form-control {
   border-left: 0;
   border-right: 0;
   border-top: 0;
   font-size: 22px;
   border-radius: 0px;
   text-align: center;
   padding-left: 35px;
   color: var(--primary_color);
   border-color: var(--primary_color);
   font-family: "Metropolis";
   padding-right: 45px;
}

.modal .modal-dialog .modal-content .modal-body ul.nav.nav-tabs.signInUpTab li.nav-item .nav-link.active {
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
}

.modal .modal-dialog .modal-content .modal-body ul.nav.nav-tabs.signInUpTab li.nav-item .nav-link p {
   font-size: 29px;
   color: var(--primary_color);
   font-family: "Metropolis";
}

.modal .modal-dialog .modal-content .modal-body .form-group a {
   padding-left: 7px;
   color: #7c8d9c;
   text-decoration: underline;
   font-family: "Metropolis";
   letter-spacing: 0.4px; 
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
   font-size: 26px;    
   text-align: center;  
   color: var(--main_background_text_color);
   width: 100%;
   font-family: "Metropolis";
}

.modal .modal-dialog .modal-content .modal-body.payment_form_section ul.nav.nav-tabs li.nav-item .nav-link.active {
   -webkit-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -o-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   min-height: 170px;
   border: 2px solid var(--primary_color);
   border-style: dashed;
}

.modal .modal-dialog .modal-content .modal-body ul.nav.nav-tabs li.nav-item .nav-link span {
   display: block;
   text-align: center;
   color: #7c8d9c;
   font-size: 18px;
   padding-top: 10px;
}

.modal .modal-dialog .modal-content .modal-body .custom-control-label {
   color: #000;
   font-family: "Metropolis";
   letter-spacing: 0.4px;
}

.block.main-menu ul li.submenu .droupdown {
   display: none;
   position: absolute;
   -webkit-box-shadow: 0 0 5px rgba(14, 39, 39, 0.2);
   box-shadow: 0 0 5px rgba(14, 39, 39, 0.2);
   background: var(--sub_menu_background_color);
   min-width: 220px;
   border-radius: 4px;
   z-index: 98;
   padding-top: 0px !important;
   padding-left: 0;
}

.block.main-menu ul li.submenu .droupdown li a {
   border: none;
   color: var(--sub_menu_color);
}

.location-adr-show-hide strong {
   font-size: 22px;
   color: var(--primary_color);
}

.row.service_hour {
   min-height: 85px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border: none;
   position: relative;
   -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
   -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
   -o-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
   padding: 16px 15px 15px;
   line-height: 25px;
   margin: 20px 0 15px;
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   color: #fff;
}

table.table-condensed tr td:hover {
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   color: #fff;
   cursor: pointer;
}

button#clk_ftr_signup_btn img {
   -webkit-filter: opacity(.5) drop-shadow(0 0 0 var(--primary_color));
   filter: opacity(.6) drop-shadow(0 0 0 var(--primary_color));
}

.d-table {
   color: var(--main_background_text_color);
   font-family: "Metropolis";
}

.block.shipping-step p {
   color: var(--main_background_text_color);
   font-size: 18px;
}

.block.shipping-info p {
   font-size: 18px;
   color: var(--main_background_text_color);
}

.block.shipping-info p span {
   color: var(--main_background_text_color);
   font-weight: 400;
}

/***footer section***/

footer {
   background-color: var(--footer_background_color);
   color: var(--footer_text_color);
}

footer #top {
   padding-top: 50px;
   background: var(--footer_background_color);
   padding-bottom: 30px;
}

footer .social h5 {
   padding-top: 20px;
   font-weight: 500;
   font-size: 20px;
   color: var(--footer_text_color);
   margin-bottom: 15px;
   font-family: "Metropolis";
}

footer .customer_support h5,
footer .company h5,
footer .marketing-collaboration h5 {
   font-weight: 500;
   font-size: 20px;
   color: var(--footer_text_color);
   margin-bottom: 20px;
   font-family: "Metropolis";
}

footer .customer_support ul li,
footer .company ul li,
footer .marketing-collaboration ul li {
   line-height: 24px;
   font-size: 16px;
   color: var(--footer_text_color);
   font-family: "Metropolis";
}

footer .customer_support ul li a,
footer .company ul li a,
footer .marketing-collaboration ul li a {
   color: var(--footer_text_color);
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.6px;
   line-height: 25px;
   font-family: "Metropolis";
   word-break: break-all;
}

footer .social ul li a {
   background-color: var(--social_icons_background_color);
   color: var(--social_icons_text_color);
   display: block;
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   border-radius: 30px;
}

footer .social ul li a:hover {
   background-color: var(--social_icons_background_hover_color);
   color: var(--social_icons_text_hover_color);
}

footer #bottom {
   background-color: var(--footer_second_background_color);
   padding-top: 10px;
   padding-bottom: 20px;
}

footer .customer_support ul li a:hover,
footer .company ul li a:hover,
footer .marketing-collaboration ul li a:hover {
   text-decoration: none;
   color: var(--footer_text_hover_color);
}

.block.product-links h4 { 
   font-size: 20px; 
   font-weight: 500; 
   padding-bottom: 10px;
   color: var(--footer_text_color); 
   font-family: "Metropolis";
}

.block.product-links ul li a {
   display: block;
   line-height: 24px;
   font-size: 16px;
   color: var(--footer_text_color);
   font-weight: 500;
   letter-spacing: 0.5px;
   line-height: 25px;
   font-family: "Metropolis";
}

.block.product-links ul li a:hover {
   text-decoration: none;
   color: var(--footer_text_hover_color);
}
 
.block.copyright p {
   font-size: 14px;
   color: var(--footer_text_color); 
   font-weight: 500;
   letter-spacing: 0.6px;
   font-family: "Metropolis";
} 

.block.condition-tab .tab-content .tab-pane ul { 
   color: var(--main_background_text_color);  
   font-size: 19px;
   line-height: 50px;
   padding-left: 15px;
}

.block.condition-tab .nav.nav-pills .nav-link {
   font-size: 18px; 
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: center;  
   color: var(--main_background_text_color);  
   border-radius: 30px;
}

#v-pills-tabContent h4.title {
   color: var(--main_background_text_color);
}

table.table.table-borderless th h6,
table.table.table-borderless td h6 { 
   font-size: 22px;
   font-weight: 700;
   color: var(--main_background_text_color);
   padding: 15px 0 0;
   margin:0;
}

table.table.table-borderless td p.quantity-info {
   font-size: 24px;
   color: var(--main_background_text_color);
   font-weight: 400;
   padding-left: 0 !important;
   margin-bottom: 8px;
}

.quantity-form label {
   font-size: 19px;
   color: var(--main_background_text_color);
   font-weight: 400;
}

.quantity-form.sell_your_model label {
   color: var(--main_background_text_color);
}

.block.page-content p {
   font-size: 18px;
   color: var(--main_background_text_color);
}

table.table.table-stripped.table-percentage th {
   border-top: 0px;
   font-size: 19px;
   color: var(--main_background_text_color);
   font-weight: 300;
}

table.table.table-borderless th {
   background-color: #fff;
   border-bottom: 1px solid #e1e1e1;
   font-size: 19px;
   color: var(--main_background_text_color); 
   font-weight: 400;
}

table.table.table-stripped.table-percentage td {
    color: var(--primary_color);
    font-size: 25px;
    vertical-align: middle;
    font-weight: 400;
    padding: 3px 15px;
    border:none; 
}
  
.bonus-up h4 {
   font-size: 63px;
   color: var(--main_background_text_color);
   font-weight: 100;
   padding-bottom: 20px;
   padding: 0 0 0 20px;
}

.bonus-up h4 span{
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold;   
}

/***blog section***/

.all_blog_detail_section img {
   -webkit-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   -o-box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
   max-width: 100%;
   border: 3px solid var(--primary_color);
   margin-bottom: 23px;
   object-fit: cover;
   width: 100%;
}

.all_blog_detail_section .h3 {
   font-weight: 600;
   margin-bottom: 10px !important;
   background: -webkit-gradient(linear, left top, right top, from(var(--primary_color)), to(var(--secondary_color)));
   background: linear-gradient(to right, var(--primary_color), var(--secondary_color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.blog .blog-credits a {
   padding-bottom: 20px;
   font-weight: 500;
   color: var(--primary_color);
}

/***04/08/2020***/

#how-it-works .easy-steps .image:after {
   position: absolute;
   content: "";
   left: 0;
   right: 0;
   top: 0;
   width: 190px;
   height: 230px;
   background: var(--header_button_color);
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   transform: rotate(233deg);
   margin: 0 auto;
}

table.table.table-borderless td.action img {  
   -webkit-filter: opacity(.6) drop-shadow(0 0 0 var(--primary_color)); 
   filter: opacity(.6) drop-shadow(0 0 0 var(--primary_color));
}

.cart-total-cell span.total-price_section {
   padding: 10px 10px 8px;
   border: 2px solid #000;
}

/***16/04/2022***/

.block.user-menu ul li a i { 
	color: var(--fix_header_primary_bg);
	background:  var(--menu_color);
}
.mobile-user-menu li a i {
	color: var(--fix_header_primary_bg);
	background:  var(--menu_color);
}

/* The open mobile menu paints the header, so the header background and the
   menu link colour are a PAIR and must be set together.

   `body.menu-active header` alone was not enough. site.purged.css carries
   `body.inner header { background: linear-gradient(...var(--fix_header_primary_bg)...)
   !important }` at the SAME specificity (0,2,1) and LATER in the document, so
   on every INNER page it won and the header kept the light inner-header
   gradient while the links below were still forced to --mobile_menu_color.
   On a tenant whose menu text is white that is white on white: the whole menu
   invisible on /faq, /sell, /contact, every category and every product page,
   while the homepage (no body.inner) looked correct.
   Reach a specificity the inner-header rule cannot: body.inner.menu-active is
   (0,3,1). background-image is zeroed explicitly so no later gradient can
   paint over the flat colour. */
body.menu-active header,
body.inner.menu-active header {
	background: var(--mobile_menu_bg_color) !important;
	background-image: none !important;
}
body.menu-active .main-menu li a {
	color: var(--mobile_menu_color) !important;
}
body.menu-active .close-icon .fa-times {
	color: var(--mobile_menu_color) !important;
	font-size: 24px !important;
}
/* Expanded mobile submenu: the rule above forces EVERY .main-menu link to
   --mobile_menu_color, but .droupdown kept its desktop
   --sub_menu_background_color panel. When the two collide (dark tenants:
   white submenu bg + white mobile menu text) the expanded submenu is
   invisible. Pin bg+fg as a PAIR: drop the desktop panel so the links sit
   directly on --mobile_menu_bg_color, the surface their forced color is
   designed against. */
body.menu-active .block.main-menu ul li.submenu .droupdown {
	background: transparent !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}