.btnTheme {
  background-color: #535f52;
}

/* Price highlight used across en/ar services sections */
.price {
  color: #cc7d2a;
}

/* ---------------------------------------------------------
	 
1	 pageWrapper
2	 bgCover
3	 headingII
4	 headingIII
5	 headingIV
6	 headingV
7	 headingVI
8	 headingVII
9	 mainHeader
10	 introBlock
11	 bannerBlockHolder
12	 heroBlockHolder
13	 introBannerHolder
14	 breadCrumbs
15	 chooseUs-sec
16	 chooseList
17	 featureCol
18	 contactListColumn
19	 comming-timer
20	 dealSlider
21	 subscribeSecBlock
22	 quotationBlock
23	 masonryHolder
24	 itemCol
25	 testimonailSlider
26	 newsPostColumn
27	 newsBlogColumn
28	 discoverSecHolder
29	 partnerSlider
30	 widget
31	 show-head
32	 pagination
33	 productTextHolder
34	 tabSetList
35	 socialNetworkList
36	 commentsBlock
37	 commentform
38	 cartHolder
39	 footerHolder
40	 copyRightHolder
39	 abtSecHolder
40	 progressCounter
41	 accordionList
42	 teamBlock
43	 stepCol
44	 contactListHolder
45	 mapHolder
46	 contactForm

---------------------------------------------------------*/
html {
  background-color: #343a40;
  font-family: "tajawal", sans-serif;
}

body {
  -ms-overlfow-style: scrollbar;
  min-width: 320px;
}

/* ---------------------------------------------------------
1	 pageWrapper
---------------------------------------------------------*/
#pageWrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.js-tab-hidden {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
  top: -9999px !important;
}

a {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/* ---------------------------------------------------------
2	 bgCover
--------------------------------------------------------*/
.bgCover {
  background-size: cover;
  background-position: 50% 50%;
}

.playfair {
  font-family: "Playfair Display", serif;
}

.fwEbold {
  font-weight: bold;
}

.btn {
  font-size: 16px;
  line-height: 18px;
}

.btn .fas {
  font-size: 14px;
}

/* Language flag styles: apply to flag images used in the language selector.
   */
.lang-flag {
  width: 22px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* small toast for wishlist feedback */
#deplanta-toast-container {
  pointer-events: none;
}
.deplanta-toast {
  pointer-events: auto;
  display: inline-block;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.deplanta-toast.success {
  background: #2d8a2d;
}
.deplanta-toast.info {
  background: #444;
}
.deplanta-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.btn:hover {
  opacity: 0.7;
}

.btn.btnShop {
  min-width: 140px;
}

.btn.btnCart {
  min-width: 200px;
}

.md-round {
  border-radius: 40px;
}

.sm-round {
  border-radius: 10px;
}

.bg-lightGray {
  background: #f6f6f6;
}

.bg-dark {
  background: #313538;
}

.bgCover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ensure phone numbers with leading + render LTR even inside RTL pages */
.phoneAr {
  direction: ltr;
  unicode-bidi: embed;
}

/* ---------------------------------------------------------
3	 headingII
---------------------------------------------------------*/
.headingII {
  font-size: 25px;
  line-height: 27px;
  color: #333333;
}

.headingII:before {
  width: 60px;
  height: 3px;
  background: #535f52;
  bottom: 0;
  left: 0;
}

/* Accessibility helpers: visually-hidden for screen readers and
   touch-target to increase hit area for small icon-only links */
.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}
.touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
}

/* Make social link lists easier to activate on touch */
.followSocailNetwork a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
}

/* Custom file input styling for request-quote form */
.custom-file-wrapper {
  /* look like Bootstrap custom-file but compact: label + colored browse area */
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  overflow: hidden;
  background: #fff;
}
.custom-file-input {
  display: none;
}
.html[lang="ar"] custom-file-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  color: #212529;
  font-size: 14px;
  line-height: 1;
  width: 50%;
}
.custom-file-label::after {
  content: "Browse";
  display: inline-block;
  padding: 8px 12px;
  margin-left: 8px;
  background: #535f52;
  color: #fff;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  height: auto;
}
.custom-file-label:hover::after {
  background: #4a8b12;
}
.custom-file-name {
  display: none;
}
.custom-file-clear {
  background: transparent;
  border: none;
  color: #c0392b;
  font-size: 20px;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
}
.custom-file-clear.d-none {
  display: none;
}

@media (max-width: 576px) {
  .custom-file-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .custom-file-name {
    max-width: 100%;
  }
}

/* Simple lightbox styles for gallery images */
.deplanta-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 12000;
}
.deplanta-lightbox.is-open {
  display: flex;
}
.deplanta-lightbox .lb-inner {
  /* fill viewport so image can be scaled to fit without scrollbars */
  width: 100vw;
  height: 100vh;
  padding: 18px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.deplanta-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* prevent background page scrolling while lightbox is open */
html.deplanta-lightbox-open,
body.deplanta-lightbox-open {
  overflow: hidden !important;
  height: 100% !important;
}
.deplanta-lightbox .lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.deplanta-lightbox .lb-prev {
  left: 12px;
}
.deplanta-lightbox .lb-next {
  right: 12px;
}
.deplanta-lightbox .lb-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.headingII:before {
  width: 60px;
  height: 3px;
  background: #535f52;
}

/* Icon accent color: make icons use the brand accent */
/* Targets font icons (Font Awesome) and inline SVG icons (except floating actions) */
.icon,
.icon-call,
.icon-phone,
.icon-email,
.icon-place,
.fas,
.far,
.fab,
.fal,
.fad,
.fa,
.fontawesomesvg,
.social-svg,
.download-float i,
.footer-slogan::before,
.brand-name::after {
  color: #cc7d2a !important;
}

/* Ensure inline SVG paths/strokes follow the accent color for social icons */
.followSocailNetwork svg path,
.fontawesomesvg path,
.social-svg path,
.social-svg circle,
.social-svg rect {
  fill: #cc7d2a !important;
  stroke: #cc7d2a !important;
}

/* Exceptions: keep floating action icons white (WhatsApp/download) */
.whatsapp-float svg,
.whatsapp-float svg path,
.whatsapp-float svg circle {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.download-float .fas {
  color: #ffffff !important;
}

.btn .fas.fa-arrow-right,
.btn .fas.fa-arrow-left,
.btn .fas.fa-arrow-up,
.btn .fas.fa-arrow-down,
.btn .fas.fa-long-arrow-alt-right,
.btn .fas.fa-long-arrow-alt-left {
  color: #ffffff !important;
}

/* Small helper: make icon fonts inherit accent when used inside buttons */
.btn .fas,
.btn .fab {
  color: #cc7d2a;
}

/* Partner section header with left accent */
.partnerHeader {
  position: relative;
}
.partnerHeader .headingVI {
  margin: 0;
  padding-left: 18px;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.partnerHeader .headingVI::before {
  content: "";
  position: absolute;
  left: 510px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 26px;
  background: #cc7d2a;
  border-radius: 3px;
}

@media (max-width: 575px) {
  .partnerHeader .headingVI {
    font-size: 18px;
    padding-left: 14px;
  }
  .partnerHeader .headingVI::before {
    height: 28px;
    width: 5px;
  }
}

/* Force brand accent for common pseudo-elements site-wide */
/* This targets pseudo-elements that are used for decorative lines, bullets and accents */
.headingII:before,
.headingIII:before,
.headingIV:before,
.headingV:before,
.headingVI:before,
.headingVII:before,
.introBlock h1:before,
.introBlock .title:before,
.bannerBlockHolder .title:before,
.heroBlockHolder .title:before,
.partnerHeader .headingVI::before,
.brand-name::after,
.footer-slogan::before,
.custom-file-label::after,
.introBlock .slickNums li:before,
.bannerBlockHolder .slickNums li:before,
.heroBlockHolder .slickNums li:before,
.headingII:before {
  /* background-color: #CC7D2A !important; */
  color: #cc7d2a !important;
  border-color: #cc7d2a !important;
  fill: #cc7d2a !important;
  stroke: #cc7d2a !important;
}

.headingII:before,
.headingIII:before,
.headingIV:before,
.headingV:before,
.headingVI:before,
.headingVII:before,
.introBlock h1:before,
.introBlock .title:before {
  background-color: #cc7d2a !important;
}
/* ---------------------------------------------------------
4	 headingIII

---------------------------------------------------------*/

.headingIII {
  font-size: 20px;
  line-height: 22px;
  color: #444444;
}

/* ---------------------------------------------------------
5	 headingIV
---------------------------------------------------------*/
.headingIV {
  font-size: 25px;
  line-height: 27px;
  color: #333333;
}

/* ---------------------------------------------------------
6	 headingV
---------------------------------------------------------*/
.headingV {
  font-size: 15px;
  line-height: 18px;
  color: #444444;
}

/* ---------------------------------------------------------
7	 headingVI
---------------------------------------------------------*/
.headingVI {
  font-size: 16px;
  line-height: 18px;
  color: #444444;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
8	 headingVII
---------------------------------------------------------*/
.headingVII {
  font-size: 15px;
  line-height: 17px;
  color: #444444;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
9	 mainHeader
---------------------------------------------------------*/
.mainHeader .headerBorder {
  min-width: 100%;
}

.mainHeader .headerBorder .img-bdr {
  width: 270px;
}

/* ---------------------------------------------------------
10	 introBlock
---------------------------------------------------------*/
.introBlock {
  font-size: 16px;
  line-height: 20px;
  color: #6e6e6e;
}

.introBlock .align {
  min-height: 390px;
}

.introBlock .holder {
  z-index: 2;
}

.introBlock h1 {
  font-size: 25px;
  line-height: 30px;
  color: #333333;
  font-family: "Playfair Display", serif;
}

.introBlock h1:before {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

.introBlock h1:before {
  width: 100px;
  height: 5px;
  background: #333333;
}

.introBlock h2 {
  font-size: 25px;
  line-height: 30px;
  color: #333333;
  font-family: "Playfair Display", serif;
}

.introBlock .title {
  font-size: 14px;
  line-height: 16px;
  color: #555555;
  letter-spacing: 2px;
}

.introBlock .title:before {
  content: "";
  position: absolute;
  top: 2px;
  right: auto;
  bottom: auto;
  left: 0;
}

.introBlock .title:before {
  width: 5px;
  height: 12px;
}

.introBlock br {
  display: none;
}

.introBlock .slick-prev,
.introBlock .slick-next {
  font-size: 17px;
  line-height: 22px;
  color: #444444;
}

.introBlock .slick-next {
  margin-left: 109px;
}

.introBlock .slickNavigatorsWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
}

/* Use simple circular dots for the intro slider navigation (no numbers) */
.introBlock .slickNums {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.introBlock .slickNums li {
  pointer-events: auto;
  text-indent: 0;
  position: relative;
  margin: 0;
}

.introBlock .slickNums button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: #ddd;
  border: 0;
  display: block;
  cursor: pointer;
  /* visually hide numeric text produced by Slick but keep control focusable */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
}

.introBlock .slickNums li.slick-active button {
  background: #cc7d2a;
}

/* Force active dot appearance across all breakpoints */
.introBlock .slickNums li.slick-active button,
.introBlock .slickNums li.slick-active button:focus,
.introBlock .slickNums li.slick-active a {
  background: #cc7d2a !important;
  border-color: #cc7d2a !important;
}

/* Mobile: show circular dot indicators under the intro banner */
@media (max-width: 576px) {
  .introBlock .slickNavigatorsWrap {
    display: none;
  }
  .introBlock .slickNums {
    display: flex !important;
    justify-content: center;
    bottom: 12px;
    gap: 8px;
    pointer-events: auto;
    padding: 0;
  }
  .introBlock .slickNums li {
    text-indent: 0;
    position: relative;
    margin: 0;
  }
  .introBlock .slickNums li:before {
    display: none;
  }
  .introBlock .slickNums li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: #ddd;
    border: 0;
    display: block;
    cursor: pointer;
  }
  .introBlock .slickNums li.slick-active button {
    background: #cc7d2a;
  }
}

/* Desktop / Tablet: show numeric pagination instead of dots */
@media (min-width: 577px) {
  .introBlock .slickNums {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    bottom: 12px;
  }
  .introBlock .slickNums li {
    text-indent: -99999px; /* hide button text; numbers appear via :before */
  }
  .introBlock .slickNums li:before {
    /* hide numeric counters on desktop — we display dots everywhere */
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .introBlock .slickNums li.slick-active:before {
    /* no-op when counters are hidden */
    opacity: 0 !important;
    visibility: hidden !important;
  }
  /* keep dot buttons visually hidden on desktop (numbers used instead) */
  .introBlock .slickNums button {
    /* show circular dot buttons on desktop/tablet as well */
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ddd !important;
    border: 0 !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
  }
  .introBlock .slickNavigatorsWrap,
  .introBlock .slickNums {
    bottom: 100px;
    left: 180px;
  }
}

/* ---------------------------------------------------------
11	 bannerBlockHolder
---------------------------------------------------------*/
.bannerBlockHolder {
  font-size: 16px;
  line-height: 20px;
  color: #6e6e6e;
}

.bannerBlockHolder .align {
  min-height: 380px;
}

.bannerBlockHolder .holder {
  z-index: 2;
}

.bannerBlockHolder h1 {
  font-size: 30px;
  line-height: 35px;
  color: #333333;
  font-family: "Playfair Display", serif;
}

.bannerBlockHolder .title {
  font-size: 16px;
  line-height: 20px;
  color: #555555;
  letter-spacing: 2px;
}

.bannerBlockHolder .title:before {
  content: "";
  position: absolute;
  top: 2px;
  right: auto;
  bottom: auto;
  left: 0;
}

.bannerBlockHolder .title:before {
  width: 5px;
  height: 16px;
}

.bannerBlockHolder .year {
  font-size: 40px;
  line-height: 45px;
  color: #555555;
}

.bannerBlockHolder .sub-title {
  font-size: 20px;
  line-height: 24px;
  color: #444444;
  letter-spacing: 2px;
  font-weight: 500;
}

.bannerBlockHolder br {
  display: block;
}

.bannerBlockHolder .slick-prev,
.bannerBlockHolder .slick-next {
  font-size: 17px;
  line-height: 22px;
  color: #444444;
}

.bannerBlockHolder .slick-next {
  margin-left: 109px;
}

.bannerBlockHolder .slickNavigatorsWrap,
.bannerBlockHolder .slickNums {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  margin-left: auto;
  margin-right: auto;
}

.bannerBlockHolder .slickNums {
  font-size: 20px;
  line-height: 28px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  pointer-events: none;
  counter-reset: item;
}

.bannerBlockHolder .slickNums li {
  pointer-events: auto;
  position: relative;
}

.bannerBlockHolder .slickNums li:first-child {
  margin-left: 58px;
}

.bannerBlockHolder .slickNums li:last-child {
  display: block;
  padding-left: 22px;
  text-indent: 0;
}

.bannerBlockHolder .slickNums li:before {
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  text-indent: 0;
  counter-increment: item;
  content: counters(item, ". ", decimal) "/";
}

.bannerBlockHolder .slickNums li.slick-active:before {
  opacity: 1;
  visibility: visible;
}

.bannerBlockHolder .slickNums button {
  padding: 0;
  background-color: transparent;
  border: 0;
}

/* ---------------------------------------------------------
12	 heroBlockHolder
---------------------------------------------------------*/
.heroBlockHolder .containerHolder {
  max-width: 1390px;
}

.heroBlockHolder .containerHolder .coll-6 {
  width: 100%;
}

.heroBlockHolder .containerHolder .coll-6:first-child {
  width: 45%;
  z-index: 2;
  padding: 0;
  display: none;
}

.heroBlockHolder .title {
  font-size: 16px;
  line-height: 21px;
  color: #444444;
}

.heroBlockHolder .title:before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}

.heroBlockHolder .title:before {
  width: 100px;
  height: 3px;
}

.heroBlockHolder .txtwrap {
  z-index: 1;
}

.heroBlockHolder .subTitle {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #666666;
}

.heroBlockHolder h1 {
  font-size: 35px;
  line-height: 40px;
  color: #333333;
}

.heroBlockHolder .slick-prev,
.heroBlockHolder .slick-next {
  font-size: 17px;
  line-height: 22px;
  color: #444444;
}

.heroBlockHolder .slick-next {
  margin-left: 109px;
}

.heroBlockHolder .slickNavigatorsWrap,
.heroBlockHolder .slickNums {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none !important;
  margin-left: auto;
}

.heroBlockHolder .slickNums {
  font-size: 20px;
  line-height: 28px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  pointer-events: none;
  counter-reset: item;
}

.heroBlockHolder .slickNums li {
  pointer-events: auto;
  text-indent: -99999px;
  position: relative;
}

.heroBlockHolder .slickNums li:first-child {
  margin-left: 58px;
}

.heroBlockHolder .slickNums li:last-child {
  display: block;
  padding-left: 22px;
  text-indent: 0;
}

.heroBlockHolder .slickNums li:before {
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  text-indent: 0;
  counter-increment: item;
  content: counters(item, ". ", decimal) "/";
}

.heroBlockHolder .slickNums li.slick-active:before {
  opacity: 1;
  visibility: visible;
}

.heroBlockHolder .slickNums button {
  padding: 0;
  background-color: transparent;
  border: 0;
}

/* ---------------------------------------------------------
13	 introBannerHolder
---------------------------------------------------------*/
.introBannerHolder {
  min-height: 130px;
}

/* ---------------------------------------------------------
14	 breadCrumbs
---------------------------------------------------------*/
.breadCrumbs {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.breadCrumbs a {
  color: #707070;
  display: block;
}

/* ---------------------------------------------------------
15	 chooseUs-sec
---------------------------------------------------------*/
.chooseUs-sec .btnMore {
  color: #535f52;
}

/* ---------------------------------------------------------
16	 chooseList
---------------------------------------------------------*/
.chooseList {
  color: #838383;
  margin: 0 0 0 -10px;
}

.chooseList .icon {
  font-size: 70px;
  line-height: 75px;
  color: #535f52;
}

/* ---------------------------------------------------------
17	 featureCol
---------------------------------------------------------*/
.featureCol {
  width: 100%;
}

.featureCol:hover .postHoverLinskList {
  bottom: 20px;
}

.featureCol .title {
  font-size: 13px;
}

.featureCol .title a {
  color: #707070;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.featureCol .price {
  font-size: 16px;
  line-height: 18px;
  font-weight: 900;
  color: #444444;
}

.featureCol .price del {
  font-size: 14px;
  line-height: 16px;
  color: #bebebe;
  font-weight: 400;
  margin: 0 10px 0 0;
}

.featureCol .hotOffer {
  font-size: 14px;
  line-height: 16px;
  top: 11px;
  left: 4px;
  min-width: 50px;
  padding: 4px 5px 7px 2px;
  border-radius: 0 15px 15px 0;
  background: #f9861f;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.featureCol .hotOffer.green {
  background: #535f52;
}

.featureCol .postHoverLinskList {
  font-size: 16px;
  line-height: 20px;
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.featureCol .postHoverLinskList li {
  -webkit-box-shadow: 0 1px 19px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 19px 6px rgba(0, 0, 0, 0.1);
}

.featureCol .postHoverLinskList li:first-child {
  border-radius: 20px 0 0 20px;
}

.featureCol .postHoverLinskList li:last-child {
  border-radius: 0 20px 20px 0;
}

.featureCol .postHoverLinskList a {
  padding: 8px;
  color: #444444;
  background: #fff;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.featureCol .postHoverLinskList a:hover {
  color: #fff;
}

/* ---------------------------------------------------------
18	 contactListColumn
---------------------------------------------------------*/
.contactListColumn {
  border-radius: 50px;
}

.contactListColumn .icon {
  font-size: 30px;
  line-height: 40px;
  color: #535f52;
}

/* Make advantage cards equal height and center content */
.contactListBlock .row {
  display: flex;
  flex-wrap: wrap;
}
.contactListBlock .row > [class*="col-"] {
  display: flex;
}
.contactListColumn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 120px; /* adjust if you want taller/shorter cards */
}
.contactListColumn .alignLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 576px) {
  .contactListBlock .row > [class*="col-"] {
    display: block; /* stacked columns should behave normally on small screens */
  }
  .contactListColumn {
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Make the left image in the Why choose us section full width and fixed height */
.chooseUs-sec .img-fluid {
  width: 100%;
  height: 600px;
  object-fit: cover;
  display: block;
}

@media (max-width: 992px) {
  /* On smaller screens keep natural height so layout remains flexible */
  .chooseUs-sec .img-fluid {
    height: auto;
    max-width: 100%;
  }
  .logo .img-fluid {
    max-width: 55px;
  }
}

/* Make product offer images the same size */
.productOfferSec .img-fluid {
  width: 100%;
  height: 320px; /* choose desired ad banner height */
  object-fit: fill;
  display: block;
}

@media (max-width: 576px) {
  .productOfferSec .img-fluid {
    height: auto;
    max-width: 100%;
  }
}

/* Compact variant for advantage card with longer text */
.contactListColumn.adv-compact .headingV {
  font-size: 14px;
  line-height: 16px;
}
.contactListColumn.adv-compact p {
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 0;
}

/* ---------------------------------------------------------
19	 comming-timer
---------------------------------------------------------*/
.comming-timer .countdown-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.comming-timer .countdown-row .countdown-section {
  min-width: 30px;
  margin: 0 20px 0 0;
  position: relative;
}

.comming-timer .countdown-row .countdown-section:before {
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  bottom: auto;
  left: auto;
}

.comming-timer .countdown-row .countdown-section:before {
  content: ":";
  font-size: 30px;
  line-height: 35px;
  color: #535f52;
}

.comming-timer .countdown-row .countdown-section:last-child:before {
  display: none;
}

.comming-timer .countdown-row .countdown-section .countdown-amount {
  font-size: 25px;
  line-height: 27px;
  color: #535f52;
  font-weight: 700;
  background: none;
  border-top: none;
  display: block;
  padding: 0;
  border-bottom: none;
}

.comming-timer .countdown-row .countdown-section .countdown-amount:before {
  display: none;
}

.comming-timer .countdown-row .countdown-section .countdown-period {
  font-size: 12px;
  line-height: 14px;
  color: #b2b2b2;
}

/* ---------------------------------------------------------
20	 dealSlider
---------------------------------------------------------*/
.dealSlider .slick-dots {
  margin: 0;
  padding: 0;
  text-align: center;
}

.dealSlider .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px 0 0;
}

.dealSlider .slick-dots .slick-active button:before {
  opacity: 1;
  visibility: visible;
}

.dealSlider .slick-dots button {
  background: none;
  border-radius: 100%;
  outline: none;
  text-indent: -9999px;
  width: 10px;
  height: 10px;
  padding: 5px;
  position: relative;
  display: block;
  background: #d1d1d1;
  border: none;
}

.dealSlider .slick-dots button:before {
  content: "";
  position: absolute;
  top: -5px;
  right: auto;
  bottom: auto;
  left: -5px;
}

.dealSlider .slick-dots button:before {
  width: 20px;
  height: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #535f52;
  padding: 5px;
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
}

/* ---------------------------------------------------------
21	 subscribeSecBlock
---------------------------------------------------------*/
.subscribeSecBlock {
  min-height: 330px;
}

.subscribeSecBlock .emailForm1 {
  width: 100%;
  font-size: 14px;
  line-height: 16px;
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .form-control {
  width: 100%;
  height: 50px;
  background: #fff;
  margin: 0 0 20px;
  border-radius: 40px;
}

.subscribeSecBlock .emailForm1 .form-control::-webkit-input-placeholder {
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .form-control::-moz-placeholder {
  opacity: 1;
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .form-control:-moz-placeholder {
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .form-control:-ms-input-placeholder {
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .form-control.placeholder {
  color: #bebebe;
}

.subscribeSecBlock .emailForm1 .btn {
  border-radius: 40px !important;
}

/* ---------------------------------------------------------
22	 quotationBlock
---------------------------------------------------------*/
.quotationBlock {
  font-size: 16px;
  line-height: 26px;
  color: #707070;
}

.quotationBlock q {
  padding: 0 20px;
  font-style: italic;
}

.quotationBlock q:after,
.quotationBlock q:before {
  display: none;
}

.quotationBlock cite {
  font-style: normal;
}

.quotationBlock cite strong {
  font-size: 20px;
  line-height: 22px;
  color: #444444;
}

.quotationBlock cite span {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
}

/* ---------------------------------------------------------
23	 masonryHolder
---------------------------------------------------------*/
.masonryHolder .grid-item {
  width: 100%;
  float: left;
}

.masonryHolder .grid-item.grid-item2 {
  width: 100%;
}

/* ---------------------------------------------------------
24	 itemCol
---------------------------------------------------------*/
.itemCol .hoverTextBlock {
  left: 20px;
  top: 20px;
}

.itemCol .hoverTextBlock .txt {
  font-size: 16px;
  line-height: 18px;
  color: #707070;
  word-spacing: 1px;
}

.itemCol .headingIV {
  font-size: 25px;
  line-height: 30px;
  color: #353535;
}

.itemCol .headingIV a {
  color: #353535;
}

/* ---------------------------------------------------------
25	 testimonailSlider
---------------------------------------------------------*/
.testimonailSlider.slick2 .slick-dots {
  display: none !important;
}

.testimonailSlider .slide {
  padding: 0 20px;
}

.testimonailSlider .icon-qoute {
  font-size: 20px;
  line-height: 22px;
  color: #707070;
}

.testimonailSlider .title {
  font-size: 20px;
  line-height: 22px;
  color: #666666;
}

.testimonailSlider .desnation {
  font-size: 14px;
  line-height: 16px;
  color: #9f9f9f;
}

.testimonailSlider .slick-dots {
  margin: 0;
  padding: 0;
  text-align: center;
}

.testimonailSlider .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px 0 0;
}

.testimonailSlider .slick-dots .slick-active button:before {
  opacity: 1;
  visibility: visible;
}

.testimonailSlider .slick-dots button {
  background: none;
  border-radius: 100%;
  outline: none;
  text-indent: -9999px;
  width: 10px;
  height: 10px;
  padding: 5px;
  position: relative;
  display: block;
  background: #d1d1d1;
  border: none;
}

.testimonailSlider .slick-dots button:before {
  content: "";
  position: absolute;
  top: -5px;
  right: auto;
  bottom: auto;
  left: -5px;
}

.testimonailSlider .slick-dots button:before {
  width: 20px;
  height: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #535f52;
  padding: 5px;
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
}

/* ---------------------------------------------------------
26	 newsPostColumn
---------------------------------------------------------*/
.newsPostColumn {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.newsPostColumn:hover {
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
}

.newsPostColumn .imgHolder {
  margin: 0 -10px;
}

.newsPostColumn .imgHolder .time {
  width: 50px;
  height: 50px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  left: 10px;
  top: 11px;
}

.newsPostColumn .imgHolder .time strong {
  font-size: 16px;
  line-height: 18px;
}

.newsPostColumn .postBy {
  font-size: 12px;
  line-height: 14px;
  color: #afafaf;
  word-spacing: 2px;
}

.newsPostColumn .postBy a {
  color: #afafaf;
}

.newsPostColumn .headingV a {
  color: #444444;
}

/* ---------------------------------------------------------
27	 newsBlogColumn
---------------------------------------------------------*/
.newsBlogColumn .time {
  width: 110px;
  height: 50px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}

.newsBlogColumn .time strong {
  font-size: 16px;
  line-height: 18px;
}

.newsBlogColumn .postBy {
  font-size: 12px;
  line-height: 14px;
  color: #afafaf;
  word-spacing: 2px;
  border-bottom: 1px solid #ebebeb;
}

.newsBlogColumn .postBy a {
  color: #afafaf;
}

.newsBlogColumn .headingV a {
  color: #444444;
}

/* ---------------------------------------------------------
28	 discoverSecHolder
---------------------------------------------------------*/
.discoverSecHolder .rightAlign .title:before {
  right: auto;
  left: 0;
}

.discoverSecHolder .rightAlign .imgHolder .bdr {
  left: -40px;
  top: -30px;
}

.discoverSecHolder .title {
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #555555;
  letter-spacing: 1px;
}

.discoverSecHolder .title:before {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 2px;
  left: auto;
}

.discoverSecHolder .title:before {
  width: 30px;
  height: 1px;
}

.discoverSecHolder .headingIV {
  color: #444444;
}

.discoverSecHolder .btn {
  border: 1px solid;
}

.discoverSecHolder .btn:hover {
  color: #fff;
}

.discoverSecHolder .imgHolder {
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  z-index: 1;
}

.discoverSecHolder .imgHolder .bdr {
  right: -40px;
  top: -30px;
  z-index: -1;
}

/* ---------------------------------------------------------
29	 partnerSlider
---------------------------------------------------------*/
.partnerSlider .logoColumn {
  width: 155px;
}

/* ---------------------------------------------------------
30	 widget
---------------------------------------------------------*/
.widget .searchForm {
  width: 100%;
  height: 40px;
}

.widget .searchForm .form-control {
  font-size: 14px;
  line-height: 16px;
  color: #b3b3b3;
  height: 40px;
  background: none;
  border-radius: 0;
  padding: 0 40px 5px 11px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #ebebeb;
}

.widget .searchForm .form-control::-webkit-input-placeholder {
  color: #b3b3b3;
}

.widget .searchForm .form-control::-moz-placeholder {
  opacity: 1;
  color: #b3b3b3;
}

.widget .searchForm .form-control:-moz-placeholder {
  color: #b3b3b3;
}

.widget .searchForm .form-control:-ms-input-placeholder {
  color: #b3b3b3;
}

.widget .searchForm .form-control.placeholder {
  color: #b3b3b3;
}

.widget .searchForm button {
  font-size: 18px;
  line-height: 20px;
  color: #656565;
  right: 1px;
  top: 10px;
  background: none;
  border: none;
}

.widget .categoryList {
  line-height: 20px;
}

.widget .categoryList a {
  color: #707070;
}

.widget .categoryList .num {
  border-radius: 5px;
  padding: 0 13px;
}

.widget .filter-ranger-form .get-results-wrap {
  padding-top: 24px;
}

.widget .filter-ranger-form #demo {
  font-size: 12px;
  line-height: 1.33333;
}

.widget .filter-ranger-form .btn {
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  letter-spacing: 1px;
  vertical-align: top;
  min-width: 100px;
}

.widget .filter-ranger-form #amount {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
}

.widget .recentListHolder .alignleft {
  width: 27%;
}

.widget .recentListHolder .description-wrap {
  width: 73%;
}

.widget .recentListHolder .headingVII {
  font-weight: 400;
}

.widget .recentListHolder .headingVII a {
  color: #707070;
  display: block;
}

.widget .recentListHolder .price {
  font-size: 15px;
  line-height: 17px;
  color: #27272f;
}

.widget .tagNavList {
  font-size: 14px;
  line-height: 16px;
}

.widget .tagNavList li {
  margin: 0 8px 10px 0;
}

.widget .tagNavList a {
  color: #707070;
  letter-spacing: 1px;
  padding: 7px 14px 9px 17px;
  border: 1px solid #ebebeb;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.widget .tagNavList a:hover {
  color: #fff;
}

.widget .recentPostList a {
  color: #707070;
  letter-spacing: 1px;
  border-bottom: 1px solid #ebebeb;
}

.widget .archiveList a {
  color: #707070;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
31	 show-head
---------------------------------------------------------*/
.show-head .viewFilterLinks {
  font-size: 15px;
  line-height: 17px;
  color: #707070;
  width: 100%;
}

.show-head .viewFilterLinks li {
  letter-spacing: 1px;
}

.show-head .viewFilterLinks a {
  width: 40px;
  height: 40px;
  color: #707070;
  display: block;
  padding: 8px;
  border: 1px solid #ebebeb;
}

.show-head .viewFilterLinks a:hover {
  color: #fff;
}

.show-head .viewFilterLinks .fas {
  font-size: 20px;
  line-height: 22px;
}

.show-head .groupTitle {
  font-size: 14px;
  line-height: 17px;
  color: #b3b3b3;
}

.show-head .dropdown {
  width: 170px;
  height: 40px;
}

.show-head .dropdown .dropdown-toggle {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  width: 100%;
  height: 40px;
  text-align: left;
  border: 1px solid #ebebeb;
  padding: 0 0 3px 8px;
  letter-spacing: 1px;
  background: none;
}

.show-head .dropdown .dropdown-toggle:after {
  margin: 8px 8px 0 0;
  float: right;
}

.show-head .dropdown .dropdown-menu {
  margin: 0 0 0 -10px;
  padding: 0;
  width: 100%;
}

.show-head .dropdown .dropdown-menu a {
  padding: 5px 8px;
  color: #707070;
  display: block;
}

.show-head .dropdown .dropdown-menu a:hover {
  color: #fff;
}

/* ---------------------------------------------------------
32	 pagination
---------------------------------------------------------*/
.pagination {
  font-size: 16px;
  line-height: 18px;
  color: #808086;
}

.pagination li {
  margin: 0 10px 0 0;
  font-weight: 700;
}

.pagination .active a {
  color: #fff;
}

.pagination a {
  border: 1px solid #ebebeb;
  display: block;
  border-radius: 5px;
  padding: 5px 9px;
  color: #808086;
}

.pagination a:hover {
  color: #fff;
}

/* ---------------------------------------------------------
33	 productTextHolder
---------------------------------------------------------*/
.productTextHolder h2 {
  font-size: 30px;
  line-height: 33px;
  color: #333333;
  letter-spacing: 2px;
}

.productTextHolder .ratingList {
  font-size: 15px;
  line-height: 17px;
  color: #808086;
  letter-spacing: 1px;
}

.productTextHolder .ratingList a {
  color: #f9861f;
  display: block;
}

.productTextHolder .price {
  font-size: 28px;
  line-height: 30px;
}

.productTextHolder .productInfoDetail {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  letter-spacing: 1px;
}

.productTextHolder .productInfoDetail span {
  font-weight: 600;
  color: #1d1d1d;
}

.productTextHolder .productInfoDetail a {
  color: #707070;
  word-spacing: -3px;
}

.productTextHolder .sizeList {
  font-size: 15px;
  line-height: 17px;
  color: #444444;
  font-weight: 600;
  letter-spacing: 1px;
}

.productTextHolder .sizeList [type="checkbox"] {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.productTextHolder .sizeList .fake-label {
  font-size: 14px;
  line-height: 16px;
}

.productTextHolder .sizeList .fake-input,
.productTextHolder .sizeList label {
  display: inline-block;
  vertical-align: middle;
}

.productTextHolder .sizeList label {
  padding-right: 5px;
}

.productTextHolder .sizeList .fake-input {
  width: 20px;
  height: 20px;
  background: #e4e4e4;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 1px;
  border-radius: 100%;
}

.productTextHolder .sizeList [type="checkbox"] + .fake-input:before {
  content: "";
  width: 10px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 3px solid #fff;
  border-width: 0 0 3px 3px;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: -4px 0 0 -5px;
}

.productTextHolder .sizeList [type="checkbox"]:checked + .fake-input:before {
  opacity: 1;
}

.productTextHolder .sizeList input:disabled + .fake-input,
.productTextHolder .sizeList input:disabled ~ .fake-label {
  opacity: 0.5;
}

.productTextHolder .colorList {
  font-size: 15px;
  line-height: 17px;
  color: #444444;
  font-weight: 600;
  letter-spacing: 1px;
}

.productTextHolder .colorList a {
  width: 20px;
  height: 20px;
  display: block;
}

.productTextHolder .colorList .red {
  background: #ec2026;
}

.productTextHolder .colorList .yellow {
  background: #fdc135;
}

.productTextHolder .colorList .purple {
  background: #9a2f81;
}

.productTextHolder .jcf-number {
  overflow: hidden;
  width: 100%;
  height: 50px;
  margin: 0 0 20px;
}

.productTextHolder .jcf-number input {
  font-size: 18px;
  line-height: 20px;
  color: #707070;
  text-align: center;
  padding: 0;
  width: 100%;
  border-radius: 40px;
  border: 1px solid #535f52;
}

.productTextHolder .jcf-number .jcf-btn-inc,
.productTextHolder .jcf-number .jcf-btn-dec {
  width: 50px;
  height: 50px;
  background: none;
  top: 0;
  font-size: 10px;
  line-height: 12px;
  text-indent: -9999px;
}

.productTextHolder .jcf-number .jcf-btn-inc:before,
.productTextHolder .jcf-number .jcf-btn-dec:before {
  top: 18px;
  left: 19px;
  background: none;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 0;
  text-indent: 0;
}

.productTextHolder .jcf-number .jcf-btn-dec {
  left: 0;
  border-right: 1px solid #535f52;
}

.productTextHolder .jcf-number .jcf-btn-dec:before {
  content: "\f068";
  display: block;
}

.productTextHolder .jcf-number .jcf-btn-inc {
  right: 0;
  border-left: 1px solid #535f52;
}

.productTextHolder .jcf-number .jcf-btn-inc:before {
  content: "\f067";
  display: block;
}

.productTextHolder .socialNetwork {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  letter-spacing: 1px;
}

.productTextHolder .socialNetwork a {
  font-size: 16px;
  line-height: 18px;
  color: #707070;
}

/* ---------------------------------------------------------
34	 tabSetList
---------------------------------------------------------*/
.tabSetList {
  font-size: 20px;
  line-height: 25px;
  color: #444454;
}

.tabSetList a {
  color: #444454;
  position: relative;
}

.tabSetList a:after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.tabSetList a:after {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  border-bottom: 2px solid;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50% 100% 0;
  -ms-transform-origin: 50% 100% 0;
  transform-origin: 50% 100% 0;
}

.tabSetList a:hover:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.tabSetList a.active:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

/* ---------------------------------------------------------
35	 socialNetworkList
---------------------------------------------------------*/
.socialNetworkList {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  letter-spacing: 1px;
}

.socialNetworkList a {
  font-size: 16px;
  line-height: 18px;
  color: #707070;
}

/* ---------------------------------------------------------
36	 commentsBlock
---------------------------------------------------------*/
.commentsBlock .commentArea .img {
  width: 23%;
}

.commentsBlock .commentArea .txtHolder {
  width: 77%;
}

.commentsBlock .commentArea .commentDate {
  color: #b8b8b8;
  word-spacing: 2px;
}

.commentsBlock .commentArea .commentDate a {
  color: #444444;
}

/* ---------------------------------------------------------
37	 commentform
---------------------------------------------------------*/
.commentform .row1 {
  margin: 0 -15px;
}

.commentform .coll {
  width: 100%;
  padding: 0 15px;
}

.commentform .form-control {
  width: 100%;
  height: 50px;
  font-size: 15px;
  line-height: 17px;
  color: #b8b8b8;
  background: #f5f5f5;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  padding: 9px 7px;
}

.commentform textarea {
  resize: none;
}

.commentform textarea.form-control {
  width: 100%;
  height: 200px;
}

/* ---------------------------------------------------------
38	 cartHolder
---------------------------------------------------------*/
.cartHolder .cartTable {
  min-width: 930px;
}

.cartHolder .cartTable th {
  font-size: 15px;
  line-height: 17px;
  color: #444444;
  padding: 10px 0;
  letter-spacing: 1px;
}

.cartHolder .cartTable td {
  vertical-align: middle;
  letter-spacing: 1px;
}

.cartHolder .cartTable .jcf-number {
  overflow: hidden;
  height: 50px;
  margin: 0 20px 0 0;
}

.cartHolder .cartTable .jcf-number input {
  font-size: 20px;
  line-height: 22px;
  color: #707070;
  text-align: center;
  padding: 0;
  width: 150px;
  border: 1px solid #e1e1e1;
}

.cartHolder .cartTable .jcf-number .jcf-btn-inc,
.cartHolder .cartTable .jcf-number .jcf-btn-dec {
  width: 50px;
  height: 50px;
  background: none;
  top: 0;
  font-size: 10px;
  line-height: 12px;
  text-indent: -9999px;
}

.cartHolder .cartTable .jcf-number .jcf-btn-inc:before,
.cartHolder .cartTable .jcf-number .jcf-btn-dec:before {
  top: 18px;
  left: 19px;
  background: none;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 0;
  text-indent: 0;
}

.cartHolder .cartTable .jcf-number .jcf-btn-dec {
  left: 0;
  border-right: 1px solid #e1e1e1;
}

.cartHolder .cartTable .jcf-number .jcf-btn-dec:before {
  content: "\f068";
  display: block;
}

.cartHolder .cartTable .jcf-number .jcf-btn-dec:hover:before {
  color: #fff;
}

.cartHolder .cartTable .jcf-number .jcf-btn-inc {
  right: 0;
  border-left: 1px solid #e1e1e1;
}

.cartHolder .cartTable .jcf-number .jcf-btn-inc:before {
  content: "\f067";
  display: block;
}

.cartHolder .cartTable .jcf-number .jcf-btn-inc:hover:before {
  color: #fff;
}

.cartHolder .cartTable .imgHolder {
  width: 70px;
}

.cartHolder .cartTable .title a {
  color: #707070;
}

.cartHolder .cartTable .fas {
  color: #666666;
}

.cartHolder .cartForm label {
  color: #444444;
  letter-spacing: 1px;
}

.cartHolder .cartForm .form-control {
  width: 100%;
  height: 200px;
  color: #707070;
  border: 1px solid #ebebeb;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}

.cartHolder .couponForm .mt-holder {
  width: 100%;
}

.cartHolder .couponForm label {
  color: #444444;
  letter-spacing: 1px;
}

.cartHolder .couponForm .form-control {
  width: 100%;
  height: 50px;
  color: #707070;
  border: 1px solid #ebebeb;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---------------------------------------------------------
39	 abtSecHolder
---------------------------------------------------------*/
.abtSecHolder h2 {
  font-size: 30px;
  line-height: 30px;
  color: #333333;
}

.abtSecHolder h2:before {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

.abtSecHolder h2:before {
  width: 70px;
  height: 1px;
  background: #535f52;
}

/* ---------------------------------------------------------
40	 progressCounter
---------------------------------------------------------*/
.progressCounter li {
  min-width: 100%;
}

.progressCounter .counter {
  font-size: 50px;
  line-height: 52px;
  color: #333333;
}

.progressCounter .txtWrap {
  font-size: 14px;
  line-height: 16px;
  color: #999999;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------
41	 accordionList
---------------------------------------------------------*/
.accordionList .card {
  border: 1px solid #dddddd;
}

.accordionList .card-header {
  border: none;
  background: #fff;
  border-radius: 0;
}

.accordionList .btn-link {
  font-size: 14px;
  line-height: 16px;
  color: #333333;
}

/* ---------------------------------------------------------
42	 teamBlock
---------------------------------------------------------*/
.teamBlock:hover .imgWrap:before,
.teamBlock:hover .socialNetworks {
  opacity: 1;
  visibility: visible;
}

.teamBlock .imgWrap:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.teamBlock .imgWrap:before {
  opacity: 0;
  visibility: hidden;
  background: rgba(51, 51, 51, 0.8);
  -webkit-transition: opacity 0.35s linear, visibility 0.35s linear;
  -o-transition: opacity 0.35s linear, visibility 0.35s linear;
  transition: opacity 0.35s linear, visibility 0.35s linear;
}

.teamBlock .socialNetworks {
  font-size: 14px;
  line-height: 26px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.35s linear, visibility 0.35s linear,
    -webkit-transform 0.35s linear;
  transition: opacity 0.35s linear, visibility 0.35s linear,
    -webkit-transform 0.35s linear;
  -o-transition: opacity 0.35s linear, visibility 0.35s linear,
    transform 0.35s linear;
  transition: opacity 0.35s linear, visibility 0.35s linear,
    transform 0.35s linear;
  transition: opacity 0.35s linear, visibility 0.35s linear,
    transform 0.35s linear, -webkit-transform 0.35s linear;
}

.teamBlock .socialNetworks li {
  margin-right: 17px;
  margin-left: 17px;
}

.teamBlock .socialNetworks a {
  color: #fff;
  -webkit-transition: color 0.35s ease;
  -o-transition: color 0.35s ease;
  transition: color 0.35s ease;
}

.teamBlock .socialNetworks a:hover {
  color: #535f52;
}

.teamBlock .name {
  font-size: 15px;
  line-height: 17px;
  color: #333333;
}

.teamBlock .name a {
  color: #333333;
  -webkit-transition: color 0.35s ease;
  -o-transition: color 0.35s ease;
  transition: color 0.35s ease;
}

teamBlock .name a:hover {
  color: #535f52;
}

.teamBlock .desination {
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  font-weight: 400;
}

/* ---------------------------------------------------------
43	 stepCol
---------------------------------------------------------*/
.stepCol {
  width: 100%;
}

.stepCol .mainTitle {
  font-size: 14px;
  line-height: 19px;
  color: #fff;
  max-width: 109px;
  background: #535f52;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------
44	 contactListHolder
---------------------------------------------------------*/
.contactListHolder {
  font-size: 14px;
  line-height: 23px;
  color: #707070;
}

.contactListHolder li {
  min-width: 100%;
}

.contactListHolder a {
  color: #707070;
}

.contactListHolder .icon {
  font-size: 20px;
  line-height: 22px;
  color: #333333;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  border: 1px solid #eaeaea;
}

.contactListHolder .title {
  font-size: 14px;
  line-height: 16px;
  color: #333333;
}

/* ---------------------------------------------------------
45	 mapHolder
---------------------------------------------------------*/
.mapHolder {
  height: 260px;
}

@media (min-width: 576px) {
  .mapHolder {
    height: 320px;
  }
}

@media (min-width: 768px) {
  .mapHolder {
    height: 370px;
  }
}

@media (min-width: 992px) {
  .mapHolder {
    height: 420px;
  }
}

/* Position descriptive labels over the top border of the file selector (Request Quote form) */
.contactSecBlock .col-md-6 {
  position: relative;
  padding-top: 12px;
}
.contactSecBlock .col-md-6 > label.d-block.mb-1 {
  position: absolute;
  top: 0;
  left: 12px;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 8px;
  font-size: 13px;
  color: #444;
  z-index: 3;
}
@media (max-width: 576px) {
  /* On small screens keep labels in normal flow above the input */
  .contactSecBlock .col-md-6 {
    padding-top: 0;
  }
  .contactSecBlock .col-md-6 > label.d-block.mb-1 {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
  }
}
@media (min-width: 1170px) {
  .mapHolder {
    height: 500px;
  }
}

.mapHolder iframe {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
46	 contactForm
---------------------------------------------------------*/
.contactForm .row1 {
  margin: 0 -15px;
}

.contactForm .coll {
  width: 100%;
  padding: 0 15px;
}

.contactForm .form-control {
  width: 100%;
  height: 50px;
  font-size: 13px;
  line-height: 15px;
  color: #c8c8c8;
  background: none;
  border: 1px solid #eaeaea;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  padding: 9px 14px;
}

.contactForm textarea {
  resize: none;
}

.contactForm textarea.form-control {
  width: 100%;
  height: 227px;
  padding: 17px 14px;
}

#header {
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

#header .headerHolderCol {
  background: #313538;
}

#header .headerHolderCol .tel {
  font-size: 13px;
  line-height: 15px;
  color: #fff;
  font-weight: 500;
}

#header .headerHolderCol .tel .icon-call {
  font-size: 15px;
  line-height: 17px;
}

#header .headerHolderCol .txt {
  font-size: 13px;
  line-height: 15px;
  color: #fff;
}

#header .headerHolder .logo {
  width: 125px;
}

#header .mainHolder .logo {
  width: 115px;
}

#header .h-logo {
  width: 100px;
}

.static-block {
  position: static;
}

.langList {
  font-size: 13px;
  line-height: 1.14286;
}

.langList > li {
  margin: 0 0 0 13px;
}

.langList > li:first-child {
  margin: 0;
}

.langList > li > a {
  color: #333333;
  border: none;
  padding: 0;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.langList > li > a:after {
  font-size: 15px;
  margin: 0 -2px 2px 3px;
  vertical-align: bottom;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.langList > li > a:hover {
  border: none;
}

.langList .icon-menu {
  font-size: 18px;
  line-height: 1.11111;
}

.langList .dropdown-menu {
  min-width: 120px;
  top: 30px !important;
  border-radius: 0;
  padding: 0;
  -webkit-box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
}

.langList .dropdown-menu .dropdown-item {
  font-size: 12px;
  line-height: 1.16667;
  color: #444444;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid #ebebeb;
  background: none;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.langList .dropdown-menu .dropdown-item a {
  color: #444444;
}

.langList .dropdown-menu .dropdown-toggle:after {
  display: none;
}

.langListII {
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;
  color: #fff;
}

.langListII li {
  margin: 0 16px 0 0;
}

.langListII li.show a {
  background: none;
  border: none;
}

.langListII a {
  color: #fff;
  border: none;
  padding: 0;
  font-weight: 700;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.langListII a:after {
  font-size: 13px;
  margin: 0 0 2px 5px;
  vertical-align: bottom;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.langListII a:hover {
  border: none;
}

.langListII .dropdown-menu {
  min-width: 120px;
  top: 10px !important;
  border-radius: 0;
  padding: 0;
  -webkit-box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
}

.langListII .dropdown-menu .dropdown-item {
  font-size: 12px;
  line-height: 1.16667;
  color: #444444;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid #ebebeb;
  background: none;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.pageNav1 {
  font-size: 14px;
  line-height: 16px;
  color: #333333;
  font-weight: 700;
  float: left;
}

.pageNav1 .navbar-nav li.dropdown.show > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.pageNav1 .navbar-nav .nLogo {
  display: none;
}

.pageNav1 .navbar-nav a {
  color: #333333;
  padding: 10px 15px;
  background: none;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.pageNav1 .navbar-nav a:after {
  display: none;
}

.pageNav1 .navbar-nav .dropdown-menu {
  font-size: 16px;
  line-height: 18px;
  opacity: 0;
  visibility: hidden;
  left: 0;
  top: 100%;
  min-width: 234px;
  font-weight: 600;
  border-radius: 0;
  border-top: 2px solid #535f52;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
}

.pageNav1 .navbar-nav .dropdown-menu a {
  color: #444444;
  display: block;
  padding: 10px 15px;
  margin: 0;
}

.pageNav1 .navbar-nav .dropdown-menu a:hover {
  color: #fff;
}

.pageNav1 .navbar-toggle {
  padding: 8px;
  background: none;
  border: 1px solid #333333;
  border-radius: 0;
  margin: 15px 0 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.pageNav1 .navbar-toggle:focus {
  outline: 0;
}

.pageNav1 .navbar-toggle:hover .icon-bar {
  background: #fff;
}

.pageNav1 .navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #333333;
  border-radius: 1px;
}

.pageNav1 .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

.pageNav1 .navbar-collapse {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  z-index: 9999;
}

/* Keep pageNav1 items on a single line and prevent wrapping */
.pageNav1 .navbar-nav {
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

/* Tablet-specific: align nav to right and hide center logo in the list */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pageNav1 .navbar-nav .nLogo {
    display: none !important;
  }
  .pageNav1 {
    float: right;
    position: relative !important;
    right: -200px !important;
    top: 10px;
  }
}

.pageNav2 {
  font-size: 14px;
  line-height: 0.875;
  color: #333333;
  font-weight: 700;
  float: right;
}

.pageNav2 .navbar-nav li.dropdown.show > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.pageNav2 .navbar-nav .dropdown-menu {
  font-size: 16px;
  line-height: 18px;
  opacity: 0;
  visibility: hidden;
  left: 0;
  top: 100%;
  min-width: 234px;
  font-weight: 600;
  margin: 0;
  border-radius: 0;
  border-top: 2px solid #535f52;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06);
}

.pageNav2 .navbar-nav .dropdown-menu a {
  color: #444444;
  display: block;
  padding: 10px 15px;
  margin: 0;
}

.pageNav2 .navbar-nav .dropdown-menu a:after {
  display: none;
}

.pageNav2 .navbar-nav .dropdown-menu a:hover {
  color: #fff;
}

.pageNav2 .navbar-nav .active > a:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.pageNav2 .navbar-nav a {
  color: #333333;
  padding: 10px 15px;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  position: relative;
  cursor: pointer;
}

.pageNav2 .navbar-nav a:after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.pageNav2 .navbar-nav a:after {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  border: none;
  border-bottom: 2px solid;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50% 100% 0;
  -ms-transform-origin: 50% 100% 0;
  transform-origin: 50% 100% 0;
}

.pageNav2 .navbar-nav a:hover:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.pageNav2 .navbar-toggle {
  padding: 8px;
  background: none;
  border: 1px solid #333333;
  border-radius: 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.pageNav2 .navbar-toggle:focus {
  outline: 0;
}

.pageNav2 .navbar-toggle:hover .icon-bar {
  background: #fff;
}

.pageNav2 .navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #333333;
  border-radius: 1px;
}

.pageNav2 .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

.pageNav2 .navbar-collapse {
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  background: #fff;
  z-index: 9999;
}

/* When the collapse menu is open, hide the centered nav logo inside it
   so the logo does not appear in the opened mobile menu. */
.navbar-collapse.show .nLogo,
.pageNav1 .navbar-collapse.show .nLogo,
.pageNav2 .navbar-collapse.show .nLogo {
  display: none !important;
}

.wishList {
  font-size: 18px;
  line-height: 1.11111;
  padding: 0 15px 0 0;
}

.wishList li {
  margin: 0 0 0 20px;
}

.wishList li:first-child {
  margin: 0;
}

.wishList a {
  color: #333333;
  border: none !important;
  padding: 0;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.wishList a .num {
  position: absolute;
  top: -6px;
  right: -15px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  line-height: 0.75px;
  color: #fff;
  background: #535f52;
  padding: 7px 0 0 5px;
}

.wishList .dropdown-menu {
  min-width: 120px;
  top: 10px !important;
  border-radius: 0;
  padding: 0;
  -webkit-box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
}

.wishList .dropdown-menu .dropdown-item {
  font-size: 12px;
  line-height: 1.16667;
  color: #444444;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid #ebebeb;
}

.wishListII {
  font-size: 19px;
  line-height: 21px;
}

.wishListII li {
  margin: 0 0 0 21px;
}

.wishListII a {
  color: #333333;
  border: none !important;
  padding: 0;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.wishListII a .num {
  position: absolute;
  top: -6px;
  right: -15px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  line-height: 0.75px;
  color: #fff;
  background: #535f52;
  padding: 7px 0 0 5px;
}

.wishListII .dropdown-menu {
  min-width: 120px;
  top: 10px !important;
  border-radius: 0;
  padding: 0;
  -webkit-box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
  box-shadow: -4px 1px 18px 3px rgba(0, 0, 0, 0.2);
}

.wishListII .dropdown-menu .dropdown-item {
  font-size: 12px;
  line-height: 1.16667;
  color: #444444;
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid #ebebeb;
}

/* ---------------------------------------------------------
39	 footerHolder
---------------------------------------------------------*/
.footerHolder .coll-1 {
  width: 100%;
}

.footerHolder .coll-2 {
  width: 100%;
}

.footerHolder .coll-3 {
  width: 100%;
}

.footerHolder .coll-4 {
  width: 100%;
}

.footerHolder .footerContactList {
  font-size: 15px;
  line-height: 17px;
  color: #707070;
}

.footerHolder .footerContactList .pr30 {
  padding-right: 0;
}

.footerHolder .footerContactList address {
  color: #444444;
}

.footerHolder .footerContactList a {
  color: #707070;
}

.footerHolder .footerContactList .icon {
  color: #444444;
}

.footerHolder .footerContactList .email .icon {
  font-size: 12px;
}

.footerHolder .followSocailNetwork {
  font-size: 15px;
  line-height: 18px;
  color: #444444;
}

.footerHolder .followSocailNetwork a {
  color: #808080;
}

/* Ensure inline SVG social icons inherit the link color and animate on hover */
.footerHolder .followSocailNetwork .social-svg {
  color: inherit;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.15s ease;
}

.footerHolder .footerNavList a {
  color: #707070;
}

.footerHolder .tagNavList {
  font-size: 14px;
  line-height: 16px;
}

.footerHolder .tagNavList li.mr2 {
  margin: 0 2px 0 0;
}

.footerHolder .tagNavList a {
  color: #666666;
  min-width: 100px;
  border: 1px solid #e0e0e0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.footerHolder .tagNavList a:hover {
  color: #fff;
}

/* ---------------------------------------------------------
40	 copyRightHolder
---------------------------------------------------------*/
.copyRightHolder {
  border-top: 1px solid #d1d1d1;
}

.copyRightHolder.v-II {
  color: #fff;
  border-top: none;
}

.copyRightHolder.v-II p a {
  color: #fff;
}

/* ---------------------------------------------------------
41   fontawesomesvg
---------------------------------------------------------*/
.fontawesomesvg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* Brand name leaf icon using Font Awesome pseudo-element */
.brand-name::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* use solid icon */
  content: "\f06c"; /* fa-leaf */
  display: inline-block;
  margin-left: 0.4rem;
  color: #cc7d2a;
  font-style: normal;
  line-height: 1;
  position: relative;
  top: -12px;
  left: -7px;
  font-size: xx-small;
}

/* Add a leaf icon before footer slogan lines and color it the same */
.footer-slogan::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06c";
  display: inline-block;
  margin-right: 0.4rem;
  color: #cc7d2a;
  font-style: normal;
  line-height: 1;
  position: relative;
  top: 0;
  font-size: 0.8em;
}

/* Partner logos: uniform size and contained scaling */
.partnerSlider .logoColumn img.partner-logo {
  width: 140px;
  height: 80px;
  object-fit: contain;
  display: block;
}

@media (max-width: 576px) {
  .partnerSlider .logoColumn img.partner-logo {
    width: 100px;
    height: 80px;
  }
}

/* ---------------------------------------------------------
   WhatsApp floating button
---------------------------------------------------------*/
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.whatsapp-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(37, 211, 102, 0.32);
}
.whatsapp-float:active {
  transform: translateY(-1px);
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
  display: block;
}

@media (min-width: 992px) {
  .whatsapp-float {
    right: 28px;
    bottom: 28px;
  }
}

/* ---------------------------------------------------------
   Download floating button (left-bottom circular, FontAwesome icon)
   Mirrors WhatsApp button style but positioned at bottom-left.
---------------------------------------------------------*/
.download-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  left: 20px;
  background-color: #cc7d2a; /* brand accent */
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 6px 18px rgba(204, 125, 42, 0.25);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}
.download-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(204, 125, 42, 0.32);
}
.download-float:active {
  transform: translateY(-1px);
}
.download-float .fas {
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
}

@media (min-width: 992px) {
  .download-float {
    left: 28px;
    bottom: 28px;
  }
}

@media (max-width: 576px) {
  .download-float {
    width: 52px;
    height: 52px;
    left: 14px;
    bottom: 14px;
  }
}

/* ---------------------------------------------------------
   Gallery Photos (Sample Of Our Work)
   Uses column-like flex-wrap layout so images flow vertically
   into columns; each <picture> is sized by class for variety.
---------------------------------------------------------*/
.gallery-photos {
  --gap: 1.25rem;
  height: 72.8125rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--gap);
  align-content: flex-start;
}
.gallery-photos picture {
  width: calc((100% - (var(--gap) * 2)) / 3);
  display: block;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}
.gallery-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-photos .layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.gallery-photos picture:hover .layer {
  transform: translateY(0);
}
.gallery-photos .project-name {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
}

/* Individual sizes to create a collage */
.gallery-photos picture.install {
  height: 520px;
}
.gallery-photos picture.vertical {
  height: 360px;
}
.gallery-photos picture.large-install {
  height: 860px;
}
.gallery-photos picture.tabletop {
  height: 300px;
}
.gallery-photos picture.cafe {
  height: 320px;
}
.gallery-photos picture.seasonal {
  height: 260px;
}
.gallery-photos picture.maintenance {
  height: 320px;
}

/* Slider mode overrides: when gallery is initialized as a slick slider */
.gallery-photos.is-slider {
  display: block !important;
  height: auto !important;
  gap: 0 !important;
  padding: 0 !important;
}
.gallery-photos.is-slider picture {
  width: 100% !important;
  height: auto !important;
  border: none !important;
  margin: 0 6px;
}
.gallery-photos.is-slider img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* spacing between slides: use slide padding and compensate on the list */
.gallery-photos.is-slider .slick-list {
  margin: 0 -6px;
}
.gallery-photos.is-slider .slick-slide {
  padding: 0 6px;
  box-sizing: border-box;
}

/* styled arrows for the gallery slider */
.gallery-photos.is-slider .slick-prev,
.gallery-photos.is-slider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #535f52;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.gallery-photos.is-slider .slick-prev {
  left: 8px;
}
.gallery-photos.is-slider .slick-next {
  /* Hide any pseudo-elements (icons/text via :before/:after) inside the gallery
   to remove stray plus signs added by icon fonts or plugin pseudo-elements. */
  .gallery-photos *::before,
  .gallery-photos *::after {
    display: none !important;
    content: none !important;
  }
  right: 8px;
}
.gallery-photos.is-slider .slick-prev:hover,
.gallery-photos.is-slider .slick-next:hover {
  background: #3f4a41;
}

/* ensure arrows don't overlap small screens too much */
@media (max-width: 576px) {
  .gallery-photos.is-slider .slick-prev,
  .gallery-photos.is-slider .slick-next {
    width: 36px;
    height: 36px;
  }
  .gallery-photos.is-slider .slick-prev {
    left: 6px;
  }
  .gallery-photos.is-slider .slick-next {
    right: 6px;
  }
}

@media (max-width: 991px) {
  .gallery-photos picture {
    width: calc((100% - var(--gap)) / 2);
  }
  .gallery-photos picture.large-install {
    height: 640px;
  }
}

@media (max-width: 576px) {
  .gallery-photos {
    height: auto;
  }
  .gallery-photos picture {
    width: 100%;
    height: 250px;
  }
  .gallery-photos picture.large-install {
    height: 420px;
  }
  .gallery-photos picture.install {
    height: 300px;
  }
}

/* Portfolio filter bar */
.portfolio-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.5rem 0;
}
.portfolio-filters button {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  color: #535f52;
}
.portfolio-filters button.active,
.portfolio-filters button:hover {
  background: #535f52;
  color: #fff;
  border-color: #535f52;
}

/* Caption overlay for portfolio items */
.portfolio-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.28) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  color: #fff;
  transform: translateY(100%);
  transition: transform 260ms ease, opacity 260ms ease;
  opacity: 0;
}
.imgHolder:hover .portfolio-caption {
  transform: translateY(0);
  opacity: 1;
}
.portfolio-caption h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

/* Portfolio header styles (About Our Work) */
.portfolio-header {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}
.portfolio-header .headingIV {
  font-size: 28px;
  line-height: 1.05;
  color: #233222;
}
.portfolio-lead {
  color: #6b6b6b;
  font-size: 15px;
  margin-top: 6px;
}
.portfolio-cta {
  display: inline-block;
  margin-left: 6px;
  color: #ffffff;
  background: #535f52;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}
.portfolio-cta:hover {
  background: #3f4a41;
  color: #fff;
}

@media (max-width: 576px) {
  .portfolio-header .headingIV {
    font-size: 22px;
  }
  .portfolio-lead {
    font-size: 14px;
  }
}

/* Portfolio hover animation: slide-up + fade-in for overlay links */
.featureCol .imgHolder .postHoverLinskList {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
}
.featureCol .imgHolder:hover .postHoverLinskList {
  transform: translateY(0);
  opacity: 1;
}

/* Slight lift for images on hover for a polished effect */
.featureCol .imgHolder img {
  transition: transform 320ms ease;
}
.featureCol .imgHolder:hover img {
  transform: scale(1.03);
}

/* Footer: brand color and separator sizing */
.footerHolder .brand-name {
  color: #535f52;
  text-decoration: none;
}

.footerHolder hr {
  width: 48px;
  height: 2px;
  margin: 0.75rem 0;
  border: 0;
  background-color: rgba(0, 0, 0, 0.06);
}

/* Mobile: collapsed navbar item hover/active styles
   Make collapsed menu links use white text with primary bg on hover/focus/active
*/
@media (max-width: 991.98px) {
  .pageNav1 .navbar-collapse .navbar-nav .d-block {
    display: block;
    padding: 0.75rem 1rem;
    color: inherit;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .pageNav1 .navbar-collapse .navbar-nav .d-block:hover,
  .pageNav1 .navbar-collapse .navbar-nav .d-block:focus,
  .pageNav1 .navbar-collapse .navbar-nav .d-block.active,
  .pageNav2 .navbar-collapse .navbar-nav .d-block:hover,
  .pageNav2 .navbar-collapse .navbar-nav .d-block:focus,
  .pageNav2 .navbar-collapse .navbar-nav .d-block.active {
    color: #ffffff;
    background-color: #535f52;
    text-decoration: none;
  }
}

/* ------------------------------------------------------------------
   Page-scoped styles for `our-services.html` (Services section)
   
------------------------------------------------------------------ */
.servicesSec {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.servicesSec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(83, 95, 82, 0.9);
  z-index: 0;
}
.servicesSec .container {
  position: relative;
  z-index: 1;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  align-items: stretch;
}
/* ensure grid items stretch and can grow when fewer columns exist */
.services-grid > .service-card {
  display: flex;
}

/* Indicate to users they can hover/flip the service cards */
.services-grid .service-card {
  cursor: pointer;
}
.services-grid .service-card .card-front {
  position: relative;
}
.services-grid .service-card .card-front::after {
  content: "Hover to flip";
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.95;
  pointer-events: none;
}

/* Arabic pages: show Arabic hint and flip horizontal placement */
html[lang="ar"] .services-grid .service-card .card-front::after {
  content: "مرر لعرض التفاصيل";
  left: 0.75rem;
  right: auto;
}

/* Highlight prices inside the Services section */
.servicesSec .price {
  color: #cc7d2a;
  font-weight: 700;
}

.service-card {
  perspective: 1000px;
  position: relative;
}
.service-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Position front/back absolutely so flipping occurs in-place without affecting layout */
.service-card .card-front,
.service-card .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.service-card .card-back {
  transform: rotateY(180deg);
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
}
.service-card:hover .card-inner,
.service-card:focus-within .card-inner {
  transform: rotateY(180deg);
}
.service-card i {
  color: #fff;
  margin-bottom: 14px;
}
.service-card h4 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
}
/* Ensure front card titles are centered and single-line with ellipsis */
.service-card .card-front h4 {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: medium;
  width: 100%;
  display: block;
}
.service-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* give grid items a sensible min-height so the absolute children have space */
.services-grid > .service-card {
  min-height: 220px;
}

@media (max-width: 767px) {
  .service-card .card-front,
  .service-card .card-back {
    min-height: 200px;
    padding: 20px;
  }
}

/* Services hero styles (moved from page) */
.services-hero .eyebrow {
  display: block;
  color: #cc7d2a;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  margin-bottom: 14px;
}
.services-hero .hero-title {
  font-size: 2.6rem;
  line-height: 1.02;
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  .services-hero .hero-title {
    font-size: 2rem;
  }
}
@media (max-width: 575px) {
  .services-hero .hero-title {
    font-size: 1.6rem;
  }
}

/* Intro image for Services section: full width, fixed height */
.services-intro-img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  display: block;
}

/* Slightly shorter on small screens to avoid huge vertical space */
@media (max-width: 575px) {
  .services-intro-img {
    height: 360px !important;
  }
  /* replace icons places at pageNav1 */
  .pageNav1 {
    float: right;
  }
  #header .mainHolder .logo {
    float: left !important;
  }
  #navbarNav {
    left: 0;
    z-index: 9999;
  }
}
/* Specific small-screen spacing for the NHC partner SVG (matches original inline spacing) */
@media (max-width: 575px) {
  .partnerSlider .partnerNhc-logo {
    margin-right: 22px !important;
    margin-top: 20px;
  }
  /* Adjust position of heading underline for Vietnamese text */
  .partnerHeader .headingVI::before {
    left: 110px !important;
  }
}
@media (max-width: 991px) {
  .partnerSlider .partnerNhc-logo {
    margin-right: 22px !important;
    margin-top: 20px;
  }
  /* Adjust position of heading underline for Vietnamese text */
  .partnerHeader .headingVI::before {
    left: 270px;
  }
}

/* Language selector: remove blue focus outline when clicked (compact UI) */
.langList .dropdown-toggle:focus,
.langListII .dropdown-toggle:focus,
.langList .dropdown-toggle:active,
.langListII .dropdown-toggle:active,
.langList .dropdown-item:focus,
.langListII .dropdown-item:focus,
.langList .dropdown-item:active,
.langListII .dropdown-item:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/*ar language*/
html[lang="ar"] body,
html[lang="ar"] .text-left {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"] .fa-arrow-right,
html[lang="ar"] .fa-chevron-left,
html[lang="ar"] .fa-chevron-right {
  transform: rotate(180deg);
}
html[lang="ar"] aside ul,
html[lang="ar"] i,
html[lang="ar"] .icon,
html[lang="ar"] .chooseList,
ul {
  margin-right: 0 !important;
  padding-right: 0 !important;
}
html[lang="ar"] i,
html[lang="ar"] .icon {
  margin-left: 8px !important;
  padding-left: 8px !important;
}
html[lang="ar"] .brand-name::after {
  transform: rotate(270deg);
}
html[lang="ar"] .abtSecHolder h2:before {
  right: 0;
}

html[lang="ar"] .contactSec .icon,
html[lang="ar"] .contactSec i,
html[lang="ar"] .fa-download {
  margin-right: initial !important;
  padding-right: initial !important;
  margin-left: initial !important;
  padding-left: initial !important;
  margin: auto !important;
}
html[lang="ar"] .partnerHeader .headingVI::before {
  left: 650px !important;
}
/* Flip text (txtwrap) and image (imgHolder) in Arabic */
html[lang="ar"] .introBlock .row {
  display: flex !important;
  flex-direction: row-reverse !important;
}

/* Optional: keep text aligned right */
html[lang="ar"] .introBlock .txtwrap {
  text-align: right !important;
  padding-right: 0 !important;
  padding-left: 20px !important;
}

/* Ensure imgHolder goes fully left */
html[lang="ar"] .introBlock .imgHolder {
  text-align: left !important;
  direction: ltr !important;
}
@media (min-width: 1300px) {
  html[lang="ar"] .introBlock .imgHolder {
    left: -300px;
    top: -50px;
  }
}

html[lang="ar"] .introBlock .title:before {
  left: 100% !important;
}

html[lang="ar"] .introBlock h1:before {
  left: 400px !important;
}

html[lang="ar"] .pageNav2 {
  float: left;
}

@media (max-width: 991px) {
  html[lang="ar"] .pageNav2 .navbar-nav {
    padding: 0;
  }
}
@media (min-width: 992px) {
  .contactListHolder li + li {
    border-left: 0 solid #eaeaea !important;
    border-right: 1px solid #eaeaea;
  }
}
@media (max-width: 575px) {
  html[lang="ar"] .pageNav1 {
    float: left !important;
  }
  html[lang="ar"] #header .mainHolder .logo {
    float: right !important;
  }
  .is-home .introBlock .bgCover {
    background-image: url(./images/phone-banner.webp) !important;
  }
  .introBannerHolder {
    padding-top: 50px !important;
    height: 390px;
  }
  .introBannerHolder .row div {
    margin-top: 80px;
  }
  .introBannerHolder .row div {
    display: inline-block; /* shrink to word width */
    backdrop-filter: blur(2px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0 5px;
  }

  #header {
    position: absolute !important;
  }
  .ourWorkBanner {
    background-image: url(./images/our-work-banner-phone.webp) !important;
  }
  .aboutBanner {
    background-image: url(./images/about-use-banner-phone.webp) !important;
  }
  .packageBanner {
    background-image: url(./images/package-banner-phone.webp) !important;
  }
  .ourServicesBanner {
    background-image: url(./images/our-services-banner-phone.webp) !important;
  }
  .requestQuoteBanner {
    background-image: url(./images/request-banner-phone.webp) !important;
  }
  .privacyBanner {
    background-image: url(./images/privacy-banner-phone.webp) !important;
  }
  .introBannerHolder li,
  .introBannerHolder .breadCrumbs a,
  .introBannerHolder .row .headingIV {
    color: white !important;
  }

  .contactSec ul,
  .introBannerHolder .breadCrumbs {
    padding-right: 0;
  }
}

.brand-name {
  color: #cc7d2a !important;
}
.price {
  color: #cc7d2a !important;
  font-weight: bold;
}
.contactSec .playfair {
  padding-top: 10px;
}
html[lang="ar"] .phoneAr {
  direction: ltr !important;
  text-align: left !important;
}
.introBannerHolder{
  height: 350px;
}