:root {
  --font-family: system-ui;
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --clr-primary-300: hsl(219, 76%, 55%); 
  --clr-primary-400: hsl(219, 76%, 40%);

  --blue: #2095ea;
  --primary: #2095ea;
  --secondary: #2b2e4a; 
  --black: #171819; 
  --blacker: #000;  
  --dark: #212122; 
  --darker: #1c1e32;
  --white-l: #fff;
  --white: #ffffffff;
  --gray: #909090;
  --light: #ebebeb;
  --lighter: #f2f2f2; 
  --info: #2095ea;
  --brand: #454f9f;
  --text: #666262;
  --link: #404040;
  --cl-1: #2095ea;
  --cl-2: #454f9f;
  --cl-3: #263180;
  --cl-light: #454f9f;
  --warning: #f5c6cb;
  --danger: hsl(358, 72%, 50%);
  --grad-1: linear-gradient(#4bb2fc, #2095ea);
  --grad-2: linear-gradient(#454f9f, #263180);
  --grad-3: linear-gradient(#ffffff, #ebebeb);
  --grad-4: linear-gradient(#ebebeb, #909090);
  --grad-5: linear-gradient(#fff, #f2f2f2, #ebebeb);
  --grad-danger: linear-gradient(hsl(358, 72%, 50%), hsl(358, 72%, 35%));
  --bold: bold;
  --bolder: bolder;
  --normal: normal;
  --middle: 400;
  --small: 300;
  --thin: 100;
  --full: 100%;
  --menu: 14px;
  --bg: #f9f9f9;
  --radius: 3.5px;
  --border: #cecece;
  --border-2: #dee2e6;
  --card: #c6c6c6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/*  ------------------------------------------------------------------------------- */
html {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

body { 
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 14px;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff url('./../../images/background/bg.png') 0 0 repeat fixed !important;
  line-height: 1.5;
}


* {
  position: relative;
}


/* ========= -------------------------------------------------------------------- */       
.tooltip-inner {
    padding: 4px 6px !important;
    color: var(--text);
    background: var(--white) !important;
    background-color: var(--white) !important;
    text-transform: capitalize;
    font-size: 0.78rem;
    border: 1.2px solid var(--cl-1);
    outline: 2px solid var(--light);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    opacity: 1 !important;
    z-index: 98;
}
 
.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-color: var(--cl-1) !important;
}

.toltip-card {
    width: 100%;
    display: block;
    position: relative;
    background-color: var(--white) !important;
    padding: 6px;
    border: 2.5px solid var(--lighter);
}

.toltip-card span {
    color: var(--brand);
    width: 100%;
    display: block;
    padding-bottom: 2px;
    margin-bottom: 3px;
    font-weight: 500 !important;
    background-color: var(--lighter);
    border: 1px solid var(--light);
}

.toltip-card span b {
    color: var(--cl-1);
    font-size: 12px;
    font-weight: 500 !important;
}


/* ----------------------------- General ----------------------------------------- */
.container-fluid { 
  width: 92%;
  padding: 8px;
  background-color: #ffffff;
  background: #ffffff;
  border-radius: 3px;
  border: 1px solid var(--card);
  border-radius: var(--radius);
}

.container {margin: auto;}
.card .container {width: 100% !important;}
.menu .container-fluid {border: none !important;}

.row,
.carousel,
.carousel-inner {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

p, p.text {
  font-size: 0.9rem;
  line-height: 1.4;
}

.block {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}


@media (min-width: 1700px) {
  .container-fluid {width: 80%;}
}

@media (max-width: 768px) {
  .container-fluid {width: 100%;}
}

.errors #menu_btns,
.user #P_Head {display: none;}
.border-b {border-color: var(--border-2) !important;}

.block {
  display: block;
  width: 100%;
  position: relative;
}

  
/* ----------------------------- Hero Section --------------------------------------------- */
.modal {
  margin-top: 0;
  max-width: 97% !important
}

.modal .foot {
  margin: 0;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  font-style: italic;
  text-transform: capitalize;
  background-image: url(../../images/background/bar.png);
  background-size: cover;
  border: 2px solid #ffffff !important;
  border-radius: 3px !important;
  vertical-align: text-bottom;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}


.modal .card-head {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 14px;
  line-height: 1;
}


.modal small.policy {
  display: block;
  margin: 0.25rem 0rem 0.01rem;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text);
  text-transform: capitalize;
  background: linear-gradient(#ffffff, #fff 40%, transparent 70%) !important;
  border-radius: var(--radius) !important;
}

@media (max-width: 768px) {
  small.policy span {display: none;}
}

  
/* ----------------------------- Hero Section --------------------------------------------- */
.hero-carousel {
  padding: 3px;
  text-transform: capitalize;
}

.hero-carousel .carousel {
  height: 100%;
  background-image: url(./../../images/background/hero-content.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110% 105%;
}

.hero-carousel .carousel {min-height: 9rem;}
.hero-carousel .row {height: 100%;}

.hero-carousel .text-block {
  display: block;
  width: 85%;
  padding: 10px;
  border-radius: 3px;
}

.hero-carousel h1 {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--dark);
}

.hero-carousel p {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
}

.hero-carousel h1,
.hero-carousel p {
  margin: 0;
  padding: 2px 0;
  line-height: 1.1;
}

.hero-carousel hr {
  height: 0.11rem;
  background: var(--grad-1);
  border-radius: 2px;
}

.hero-carousel .d-inline-flex {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (min-width: 920px) {
  .hero-carousel .carousel {min-height: 19rem;}
}

@media (max-width: 768px) {
  .hero-carousel .text-block {
    min-width: 98%;
    transform: translateY(-14%);
    background: linear-gradient(#ffffff, transparent);
    border: 2px solid transparent;
    outline: 1.5px solid #fff;
  }

  .hero-carousel h1 {font-size: 1.25rem; padding: 0;}
  .hero-carousel hr {margin: 8px 0;}
}


/*  -------------------------------------------------- Border ----------------------------- */
.border {border-radius: 4px; border-color: #dee2e6;}
.border-card {border-color: var(--card) important;}
.p-grad {background: linear-gradient(#4bb2fc, #2095ea, #1583f1);}


/* ----------------------------- Background --------------------------------------------- */
.bg-brand,
.btn-brand,
.bg-primary {
  color: #fff !important;
}
 
.bg-primary {
  border-color: #2095ea;
  background: linear-gradient(#4bb2fc, #2095ea) !important;
}

.text-primary, .text-color {color: #2095ea;}
.text-brand, .text-secondary {color: var(--cl-2);}
.text-yellow {color: yellow;}

.bg-primary {
  background: linear-gradient(#4bb2fc, #2095ea);
  border-color: #2095ea;
}

.bg-brand {background: var(--grad-2) !important;}

.bg-dark {
  color: #fff;
  background: var(--dark);
}



/* ----------------------------- Form Custom --------------------------------------------- */
input, input:focus,
input.form-control, input.form-control:focus,
.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
}


/* ========= ------------------------------------- */
.form-custom {
  width: 100%;
  font-size: 0.8rem;
  text-transform: capitalize;
  position: relative;
  line-height: 1.2;
}

.form-custom .field-block {text-transform: capitalize;}

.form-custom .field-block label {
    margin: 0;
    margin-bottom: 2px;
    padding: 2px;
    font-size: 0.8rem;
    font-weight: bold !important;
}

.form-custom .field-block .checkbox {
    font-size: 0.7rem;
    color: var(--gray);
 }

small.field-note,
.form-custom small {
  display: block;
  margin: 0;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-style: italic;
  text-transform: capitalize;
  color: var(--text);
  vertical-align: text-bottom;
  line-height: 1 !important;
}

.form-custom small b {
    margin: auto 0;
    display: inline-flex;
    float: right !important;
    vertical-align: baseline;
}

small.field-note b {vertical-align: text-bottom !important;}

.form-custom .field-block,
.form-custom .field-block label,
.form-custom .field-block small {
    position: relative;
    display: block;
    width: 100%;
    text-transform: capitalize;
}

.form-custom .field-block input[type="radio"] {
    position: relative;
    margin: auto 0;
    padding: 0;
    line-height: 1;
}



@media (max-width: 998px) {
  small.field-note span:first-of-type {display: none;}
}

@media (max-width: 768px) {
  small.field-note span {display: none;}
}

@media (max-width: 768px) {
  .form-custom small span {display: none;}
}


/*  --------------------------------------------------  ----------------------------- */
.catalogue-img {
    margin: 0 auto;
    padding: 0;
    display: block;
    position: relative;
    width: 164px;
    height: 252px;
    background-color: #fff;
    background-image: url(./../../images/brand/catalogue.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: 2px solid var(--card) !important;
    outline: 1px solid var(--white) !important;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 5px, rgba(0, 0, 0, 0.23) -1px -2px 7px;
    zoom: 0.78;
}


/*  -------------------------------------------------- Images ----------------------------- */
.img-fluid {
  margin: auto;
  width: 100%;
  object-fit: fill;
}

.theme-img {
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 1 / 0.0625;
    border: 1px solid #ebebeb;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    box-shadow: rgba(33, 35, 28, 0.60) 0px 11px 8px -12px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .theme-img {aspect-ratio: 1 / 0.11 !important}
}

.btn-sw {box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}


/*  ------------------------------------------------------------------------------- */
.tagline, .tagline-carousel {
  display: block;
  margin: 0;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--card);
  border-radius: 3px !important;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.tagline small, .tagline-carousel small {
  display: inline-flex;
  margin: auto 0;
  width: 100%;
  padding: 3px 5px 4px;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 3.5px;
  line-height: 1;
}

.tagline-carousel small ax {
  display: inline-block;
  margin: auto 0;
  padding: 0px 5px;
  vertical-align: text-bottom;
}

.tagline small.tag, 
.tagline small .tag-text, .tagline-carousel small .tag-text {
  margin: auto 0;
  padding: 0;
  flex: 1 1 auto;
  font-weight: 600;
  text-align: center !important;
  text-transform: capitalize;
  font-style: italic;
  opacity: 0.7;
}

.tagline {padding: 5px 8px !important;}
.tagline small.tag {
  display: block;
  font-size: 0.74rem !important;
  padding: 5px !important;
  border-radius: 3.5px !important;
}


@media (max-width: 768px) {
  .tagline small.tag span, .tagline .tag-text span, .tagline-carousel .tag-text span {display: none;}
}


/*  -------------------------------------------------- Brand ----------------------------- */
.logo {color: var(--_logo-color);}

.logo-icon {
  display: inline-block;
  width: 1.8rem;
  margin: auto 0;
  padding: 0;
  object-fit: fill;
  aspect-ratio: 1 / 1;
  background-image: url(../../images/logos/Kleanmax-logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  vertical-align: bottom !important;
  line-height: 1;
}

.logo-icon.medium {width: 4rem;}

.logo-icon.trad-mark::after {
  content: ' Kleanmax™ ';
  margin: auto 0;
  transform: translateX(38%);
  padding: 0px 2px;
  color: var(--text);
  font-weight: bold;
  font-style: italic;
  text-transform: capitalize;
}

.brand-logo {
  display: inline-flex;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 6px;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.brand-logo .brand {
  margin: auto 0;
  padding-left: 6px;
}

.brand-logo .brand small {
  margin: 0;
  padding: 1px;
  font-style: italic;
}

.brand-logo .brand h5 {
  margin: 2px 0; 
  font-size: 0.98rem; 
  font-weight: 700 !important; 
  padding: 1px; 
  flex: 1 1 auto;
  line-height: 1;
}

@media (max-width: 768px) {
  .brand-logo .brand small span {display: none;}
}


.trade-logox {
  margin: auto 0;
  text-transform: capitalize !important;
  font-style: italic !important;
  font-weight: bold !important;
  vertical-align: baseline !important;
  background:  url(../../images/logos/Kleanmax-logo.png);
  background-size: cover;
  line-height: 1;
}


.trademark {
  margin: auto 0;
  text-transform: capitalize !important;
  font-style: italic !important;
  font-weight: bold !important;
  vertical-align: baseline !important;
/*  border: 1px solid var(--card);*/
  border-color: var(--card);
  border-radius: var(--radius);
  line-height: 1;
}

.trademark::after {
  content: ' Kleanmax™ ';
  margin: auto 0;
  padding: 0px 5px;
  opacity: 0.9;
  zoom: 0.9;
}

.modal .foot .trademark {
  font-size: 0.8rem !important;
  color: var(--brand);
}


.line-icon {
  display: inline-block;
  position: relative;
  margin: auto 0;
  padding: 3px 4px;
  vertical-align: baseline !important;
}

.head-box ,
.head-box-small{
  display: inline-block;
  margin: auto 0;
  margin-inline: auto;
  min-width: 1rem;
  padding: 3px 4px;
  justify-content: center;
  text-align: center;
  font-size: 83%;
  flex-wrap: wrap;
  background-color: #cfcfcf;
  vertical-align: text-middle;
  border-radius: 2.5px;
  line-height: 1;
}

.head-box-small {
  font-size: 0.78rem !important;
  line-height: 1;
}

.head-box-trademark {
  content: ' ';
  display: inline-flex;
  margin: auto 0;
  padding: 2px 3px;
  font-size: inherit;
  position: relative;
  background: var(--grad-5);
  border: 1px solid var(--card);
  border-radius: 3px;
  vertical-align: text-top;
  line-height: 1;
  zoom: 0.9;
}

.head-box-trademark::before {
  content: ' Kleanmax™ ';
  margin: auto 0;
  padding: 2px 6px;
  font-size: 80%;
  font-weight: bold;
  font-style: italic;
  vertical-align: text-middle;
  text-transform: capitalize;
  border: none !important;
}

.head-box-trademark.brand,
.head-box-trademark.primary {
  color: #ffffff !important;
}

.head-box-trademark.brand {
  border-color: #263180 !important;
  background: var(--grad-2);
}

.head-box-trademark.primary {
  border-color: #2095ea !important;
  background: var(--grad-1);
}

@media (max-width: 1200px) {
  .detail-box .head-box-trademark::before {display: none !important;}
}

@media (max-width: 900px) {
  .head-box-trademark::before {display: none !important;}
}



.box-icon {
  display: inline-flex;
  margin: auto 0;
  flex-wrap: wrap;
  min-width: 1.5rem; 
  padding: 4px;
  font-size: 86%;
  justify-content: center;
  text-align: center !important;
  border-radius: 2.5px !important;
}


/*  -------------------------------------------------- Heading ----------------------------- */
.page-head {
  display: inline-block;
  margin: auto 6px;
  padding: 0;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: capitalize;
  line-height: 1;
}

.title {
  display: inline-flex;
  margin: 0 auto;
  width: 100%;
  text-transform: capitalize;
  font-weight: bold;
  background: url(../../images/background/bar.png) 0px 50% repeat-x;
  line-height: 1;
}

.title span {
  padding: 0;
  background: #fff;
  vertical-align: text-bottom !important;
}

.title span:nth-child(even),
.title span span:nth-child(even) {
  padding-left: 4px;
  color: #2095ea;
}

.icon {
  display: inline-flex;
  flex-wrap: wrap;
  margin: auto 0;
  padding: 5px;
  font-size: 80%;
  text-align: center;
  justify-content: center;
  background: var(--grad-5);
  vertical-align: top;
  border-radius: 3px;
  line-height: 1;
}

.icon.smaller {
  padding: 4px 4.5px !important;
  font-size: 70% !important;
}

.title .icon {
  margin-left: auto !important;
}

.card-head {
  display: inline-flex;
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
  padding: 2px;
  font-size: inherit;
  font-weight: 550;
  text-transform: uppercase;
  line-height: 1;
}

.bar,
.card-head {
  background-image: url(../../images/background/bar.png);
  background-repeat: repeat-x;
  background-position: center;
}

.bar {min-height: 3rem;}
.card .bar {min-height: 1rem !important;}

.card-head.small {font-size: 13.5px !important;}
.card-head.medium {font-size: 14px;}
.card-head.large {font-size: 22px;}
.card-head.head-one {text-transform: uppercase;}

.card-head span {
  margin: auto 0;
  padding: 0;
  padding-left: 3.5px;
  background-color: #fff;
  vertical-align: text-bottom;
  line-height: 1;
}

.page-head span:nth-child(even),
.card-head span:nth-child(even) {color: #2095ea;}
.head-box, .head-box-small {margin-left: auto !important;}

@media (max-width: 768px) {
  .page-head,
  .card-head {
    text-transform: capitalize !important;
    font-size: 14px;
  }
}


/* ----------------------------- Head Menu ----------------------------------------- */
.pre-head {
  color: #ffffff;
  margin-inline: auto;
  font-weight: 500;
  border-radius: 0;
  line-height: 1;
}

.pre-head .d-inline-flex {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  flex-wrap:wrap;
  line-height: 1;
}

.pre-head .tag-text {
  text-transform: capitalize;
  font-style: italic;
}

.pre-head .btn {
  margin: auto;
  padding: 0.63rem 0.73rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem !important;
  text-align: center;
  border-color: #fff;
  border-width: 1.5px !important;
  line-height: 1;
}

.pre-head .btn:hover {
  color: #61656b;
  background-color: #ffffff;
  border-color: #fff;
}

.pre-head .btn.email {
  text-transform: lowercase;
  font-size: 0.99rem !important;
  font-weight: 500;
  color: #ffffff;
  font-style: italic;
  border: 0 !important;
  line-height: 1;
}

.pre-head .btn.email:hover {
/*  color: #ffffff !important;*/
  color: var(--cl-2) !important;
  background: transparent !important;
}

.manage #pre_foot,
.manage #menu_btns {display: none;}
.manage .menu {margin-top: 1.1rem !important;}


/* ----------------------------- List --------------------------------------------- */
.list-group-item-action {
  margin: 2px 0px;
  padding: 13px 10px;
  text-transform: capitalize;
  background: linear-gradient(transparent, #efefef);
  transition: color, background 0.1s ease;
  border-radius: 0;
}

.side-navbar {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 8px 7px;
    position: relative;
    background: #fffe !important;
    border: 1px solid var(--card);
    box-shadow: rgba(0, 0, 0, 0.16) 0.5px 1px 3px;
}

.side-navbar .list-group-item.list-group-item-action {
    margin: 1.5px 0px !important;
    padding: 10px 7px;
    font-size: 0.9rem;
    font-weight: 400 !important;
    color: var(--gray);
    background: linear-gradient(transparent, #efefef);
    border-radius: 0.1px !important;
    line-height: 1.2;
}

.list-group-item b.bi {margin-right: 8px !important;}
.side-navbar .list-group-item:first-of-type {margin-top: 2px !important;}
.side-navbar .list-group-item:last-of-type {margin-bottom: 2px !important;}

.side-navbar .list-group-item:hover {
    color: var(--white) !important;
    background: var(--grad-1) !important;
}

@media (min-width: 768px) {
  .side-navbar .row .col:nth-child(2) {display: none;}
}

@media (max-width: 768px) {
  .related .col:nth-child(-n+2) {display: none !important;}
}


/* ----------------------------- Cards #6c757d--------------------------------------------- */
.card {
    margin: 0;
    padding: 0.18rem 0.13rem !important;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
  text-transform: capitalize;
    transition: border-color, color 0.5s ease;
    color: var(--gray);
    background: linear-gradient(#fff, #fdfdfd) !important;
    border-color: var(--card);
    overflow: hidden;
}

.card:hover {border: 1px solid var(--cl-1);}

.card img {
    margin: 0 auto;
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1 !important;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    justify-content: center;
    mix-blend-mode: multiply !important;
    background-color: #ededed !important;
    background: url(../../images/icons/product-image.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-bottom-width: 2px !important;
    line-height: 1;
}

.card button.view {
    display: none;
    min-width: 37%;
    position: absolute !important;
    padding: 3px 6px !important;
    top: 1.5%;
    right: 1.85%;
    font-size: 0.77rem !important;
    line-height: 1.014;
    z-index: 98;
}

.card:hover button.view {display: flex;}

.card .container {
  width: 100%;
  padding: 0.3rem 0.25rem 0.1rem;
  background: transparent !important;
}

.card .btn-group {
  width: 100%;
  margin: auto 0;
  margin-bottom: 4px;
  line-height: 1;
}

.card .btn-group .btn {
  padding: 1.5px 4.5px;
  font-size: 0.81rem;
  font-weight: 500;
}

.card h4 {
  margin: 2px auto;
  padding: 1px 1px 2px;
  font-size: 0.8rem;
  font-weight: 600;
}

.card p {
  margin: 4px auto;
  padding: 4px 2px;
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cl-1);
  background: url(../../images/background/bar.png) 0px 50% repeat-x !important;
  line-height: 1;
}

.card:hover h4 {color: var(--cl-1);}
.card:hover p {color: var(--cl-2);}
.home-carousel .card p {font-size: 0.78rem;}
.side-navbar .card p {display: none !important;}

@media (max-width: 768px) {
  .card .btn-group .btn .bi {display: none;}
}


/* ==================== #dee2e6--------------------- */
.row-card {
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  text-transform: capitalize;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120% 100%;
  border: 1px solid var(--card) !important;
  border-radius: 3px;
}

.row-card h5 {
  font-size: 1.44rem;
  font-weight: bold;
  line-height: 1.4;
}

.row-card hr {
  margin: 0.18rem auto 0.45rem;
  width: 40%;
  text-align: right;
  position: relative;
  background: #666262;
  border-color: #909090;
  border-radius: 2px;
}

.row-card .d-block {text-align: right;}
.row-card.brand .d-block {color: #ffffff;}

.row-card p {
  margin: 0.22rem 0;
  padding: 0.1rem;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
}

.row-card small {
  display: block;
  margin: 0.1rem 0rem 0.4rem;
  padding: 2px !important;
  text-align: right;
  text-transform: capitalize;
  font-style: italic;
  font-size: 0.72rem;
}

.row-card.brand {color: #ffffff;}

.row-card.brand small span,
.row-card small span {
  margin: auto 0;
  margin-inline: aut0;
  margin-left: 8px;
  padding: 5px 6px;
  color: #ffffff;
  font-size: 78% !important;
  font-style: normal !important;
  font-weight: 500;
  text-transform: uppercase !important;
  background: linear-gradient(#454f9f, #263180) !important;
  border-radius: 3px;
}

.row-card.brand small span {background: var(--grad-1) !important;}

.row-card .btn-group {
  margin-top: .5rem;
  width: 100%;
  line-height: 1;
}

.row-card .btn-group .btn {
  padding: 2.5px 6px !important;
  font-size: 0.8rem;
  font-weight: 500;
}

@media (max-width: 978px) {
  .row-card .d-block {text-align: left !important;}
  .row-card .btn-group .btn .bi {display: none;}
}

@media (max-width: 768px) {
  .row-card .d-block {text-align: left !important;}
  .row-card.brand .d-block {color: var(--text) !important;}
  .row-card {background-image: url(../../images/background/bg-pattern.png) !important; background-size: 150% 120%;}
  .row-card p {font-size: 0.88rem;}
  .row-card small {text-align: left; font-size: 0.8rem; margin-bottom: 1rem;}
  .row-card .btn-group .btn {padding: 3px !important;}
}


/*  -------------------------------------------------- Carousel ----------------------------- */
.list-card .row .col {margin-bottom: 4rem !important;}

.small-Carousel .card h4 {
  padding: 5px 0;
  font-size: 0.72rem !important;
}

.side-list .card h4,
.list-card .card h4 {
  margin: 4px 0.5px 8.5px;
  font-size: 0.8rem;
  font-weight: 600;
}

.related .card p,
.side-list .card p,
.list-card .card p,
.related .card .btn.view,
.list-card .card .btn.view,
.list-card .card:hover button.view,
.small-Carousel .card p {display: none;}

.small-Carousel .card .btn-group .btn {
  padding: 4px;
  font-size: 0.77rem;
  line-height: 1;
}

@media (max-width: 978px) {
  .FooterCarouse .row .col:nth-child(-n + 1) {display: none;}
}

@media (max-width: 991px) { 
  .home-carousel .row .col:nth-child(-n + 1),
  .related .row .col:nth-child(-n + 1),
  .related .row .col:nth-child(-n + 3) {display: none !important;}
}

@media (max-width: 768px) {
  .home-carousel .row .col:nth-child(-n + 2),
  .related .row .col:nth-child(-n + 2),
  .FooterCarouse .row .col:nth-child(-n + 2) {display: none;}
}

@media (max-width: 576px) {
  .home-carousel .row .col:nth-child(-n + 3),
  .FooterCarouse .row .col:nth-child(-n + 4) {display: none;}
}

@media (max-width: 778px) and (min-width: 540px) {
  .small-Carousel .card .bi {display: none;}
}


/*  ------------------------------------------------- ------------------------------ */
.header-button-02 {
  position: relative;
  background: linear-gradient(#fff 4%, #f2f2f2, #ebebeb) !important;
  border: 1.5px solid var(--white) !important;
  border-radius: 3px !important;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  overflow: hidden;
  line-height: 1;
}


/*  -------------------------------------------------- Flex Content ----------------------------- */
.flex-container {
  display: inline-flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.flex-container .btn {
  flex: 1 1 auto;
}

.flex-content-text {
  margin: auto 0;
  flex: 1 1 auto;
  text-transform: capitalize;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
}

.flex-content-text.smaller {
  font-size: 88% !important;
}


/*  -------------------------------------------------- Nav Menu ----------------------------- */
.container-fluid.menu {
  padding: 6px !important;
  background: transparent !important;
  border-color: #c6c6c6 !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0.5px 1px 3px !important;
}

.navbar {
  width: 100% !important;
  margin: 0 !important;
  padding: 4px;
  padding-left: 5px;
	font-size: 13px;
	background: #ffffff !important;
  box-shadow: 0 0 8px rgba(240,79,1,0.2);
  border-radius: 3.5px;
  line-height: 1;
}

.navbar .container-fluid {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar .navbar-brand {
	color: #555;
	padding-left: 0;
	font-size: 20px;
	padding-right: 50px;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
}

.navbar .navbar-brand b {color: #2095ea;}

.navbar .navbar-nav a {
	font-size: 94%;
	font-weight: bold;		
	text-transform: uppercase;
  transition: 0.1s;
  border-radius: 0 !important;
}

.navbar .navbar-nav a {margin-left: 3px;}
.navbar .navbar-nav a.first {margin-left: 0;}

.navbar .navbar-nav a.active,
.navbar a.hover,
.navbar a.nav-item:hover,
.navbar a.nav-item:focus {
	color: #fff !important;
	background: linear-gradient(#4bb2fc, #2095ea);
}

.nav-color, .nav-brand {color: #fff !important;}
.navbar a.nav-color, .navbar a.nav-brand:hover {background:  linear-gradient(#4bb2fc, #2095ea);}
.navbar a.nav-brand, .navbar a.nav-color:hover {background: linear-gradient(#454f9f, #263180);}

.navbar-form {
  margin: 0;
  margin-right: 5p;
  display: inline-flex;
  padding: 0;
}

.dropdown-menu,
.navbar .dropdown-menu {
	border-radius: 1px;
	border-color: #e5e5e5;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.navbar .dropdown-menu {
  margin: 0;
  padding: 2px;
}

.navbar .dropdown-menu a, .navbar .dropdown-menu a:active {
  margin: 2px 1px 0px;
  padding: 8px 10px;
	color: var(--text);
	font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  background: linear-gradient(transparent, #efefef);
}

.navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus {
	color: #333;
  background: #f8f9fa;
}

.navbar .dropdown:hover .nav-link {
  color: #ffffff;
  background: var(--grad-2) !important;
}

@media (max-width: 992px) {
  .navbar .navbar-nav a {
    margin: 2px 0px;
    padding: 6px 8.5px;
    font-size: 14px;
    text-transform: capitalize !important;
  }
  .navbar .nav-link.nav-color {padding: 7px 9px; text-align: center;}
	.form-inline {display: block; margin-right: 0.5rem;}
}


/*  -------------------------------------------------- Dropdown ----------------------------- */
.dropdown-menu {margin: 0;}

.dropdown-menu .dropdown-item {
  border-radius: 0 !important;
  transition: color, background 0.1s !important;
}

.dropdown-item .bi {margin-right: 8px;}

.dropdown .dropdown-item:hover {
  color: #fff !important;
  background: var(--grad-1) !important;
}

@media (min-width: 980px){
  .dropdown:hover>.dropdown-menu {display: block;}
}


/*  --------------------------------------------------  ----------------------------- */
.user .page-heading {display: none;}


/* ----------------------------- --------------------------------------------- */
.f-gap {gap: clamp(0.8rem, 1.2vw, 0.5rem);}
.mm-gap {gap: clamp(1.2rem, 2vw, 0.9rem);}
.sm-gap {gap: clamp(0.4rem, 0.9vw, 0.6rem);}
.lg-gap {gap: clamp(2rem, 3vw, 1.9rem);}
.line {line-height: 1;}


/* ----------------------------- --------------------------------------------- */
.fw-4 {font-weight: 400 !important;}
.fw-5 {font-weight: 500 !important;}
.fw-6 {font-weight: 600 !important;}
.fw-7 {font-weight: 700 !important;}


/* ----------------------------- --------------------------------------------- */
.cart-icon {
    color: #ffffff !important;
    font-weight: bold;
    background: linear-gradient(lime, limegreen);
    border-color: limegreen;
}


/* ----------------------------- --------------------------------------------- */
.loading {
  padding: 1rem;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

/* ----------------------------- --------------------------------------------- */
.d-inline-flex {
  margin: 0;
  width: 100%;
  flex: wrap;
  position: relative;
}

.loading span {
  margin: auto 0;
  font-style: italic;
  font-weight: 500;
  color: #2095ea;
  vertical-align: bottom;
}


/* ----------------------------- --------------------------------------------- */
.modal-content {
  background: #ffffff;
  text-transform: capitalize;
}


/* ----------------------------- --------------------------------------------- */
.m-close {
  min-width: 2rem;
  position: absolute; 
  z-index: 99; 
  right: 0.7%; 
  top: -3.5%; 
  padding: 5px 8px;
  color: #ffffff;
  font-size: 0.88rem;
  background: linear-gradient(#4bb2fc, #2095ea);
  border: 1.5px solid #2095ea;
  border-radius: 4px;
  outline: 1.5px solid #fff !important;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 10px -2px, rgba(0, 0, 0, 0.3) 0px 3px 6px -3px;
}

.m-close:hover {
  background: linear-gradient(#454f9f, #263180);
  border-color: #263180;
}

@media (max-width: 380px) {
  .m-close {top: -0.5% !important; }
}


/* ----------------------------- --------------------------------------------- */
.list-small {
  margin: auto 0;
  padding: 0;
  list-style: none;
  text-transform: capitalize;
}

.list-small .list-group-item {
  margin: 0;
  padding: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.list-small.email .list-group-item {
  text-transform: lowercase;
  font-style: italic !important;
}

.list-small.borderless .list-group-item {
  border: none !important;
}

.list-small .btn {
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
}


/* ----------------------------- --------------------------------------------- */
.flex-text {
  margin: auto 0;
  vertical-align: text-bottom;
}

.flex-text span {
  vertical-align: text-bottom;
}

.flex-text span.tag {
  vertical-align: middle;
}


/* ----------------------------- --------------------------------------------- */
.content-text {
  margin: 0;
  padding: 5px;
  text-transform: capitalize;
  background: #ffffff;
  border: 1px solid var(--card);
  border-radius: var(--radius);
  line-height: 1;
}

.content-text .list-group-item {
  margin: 0.5px;
  padding: 6px 8px;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  background: linear-gradient(transparent, #efefef, #f1f1f1) !important;
  border-radius: var(--radius);
  line-height: 1;
}

.content-text .list-group-item .right {
  margin-left: auto !important;
}


/* ----------------------------- --------------------------------------------- */
.flex-heading {
    display: inline-flex;
    width: 100%;
    margin: 0;
    padding: 8px;
    color: #343a40;
    font-weight: bold;
    text-transform: uppercase;
    flex-wrap: wrap;
    line-height: 1;
}

.flex-heading div span {
    margin: auto 1px;
    padding-left: 5px !important;
    vertical-align: text-bottom;
    line-height: 1;
}

.v-head div span {
    padding: 0px 1px;
}

.flex-heading sn {
    padding: 0px 4px;
    vertical-align: text-top !important;
}

.v-head div span:nth-child(even),
.flex-heading div span:nth-child(even) {
    color: #2095ea;
}

.v-head div span {
    vertical-align: text-bottom;
}

.v-head .box-tag.bg-brand {
    margin-right: 8px !important;
}

@media (max-width: 768px) {
    .flex-heading {
        text-align: center;
        text-transform: capitalize !important;
    }

    .capitalize-sm {text-transform: capitalize !important;}
}


/* ----------------------------- --------------------------------------------- */
.nsw-01 {box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}
.nsw-02 {box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.nsw-03 {box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;}
.nsw-04 {box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.nsw-05 {box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}



/* ----------------------------- --------------------------------------------- */
.footer,
.footer a,
.footer .text-body {
  position: relative;
  font-size: 0.89rem;
  color: #f1f1f1;
  line-height: 1.4;
}

.footer .container-fluid {
  padding: 0;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.brand-text {
  margin: 0; 
  padding: 1px; 
  font-weight: bold;
  font-style: italic;
  font-size: 0.9rem; 
  font-weight: bold; 
  line-height: 1;
}

.foot-copyright {
  width: 100%;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.20);
}


/* ----------------------------- --------------------------------------------- */
@media (max-width: 768px) {
  .dn-sm {display: none;}
  .w-100-sm {width: 100% !important;}
}