@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  src: url('/static/website/fonts/Poppins-Regular.ttf') format('truetype');
}

:root {
  --primary-color: #DB4E39;
  --primary-light-color: #fff0ed;
  --secondary-color: #1E1F22;
  --alternative-color: #888888;
  --alternative-light-color: #e3f2fd;
  --place-holder-color: #bfbfbf;
  --third-color: #f9f9f9;
  --border-color: #e7e7e7;
  --border-radius: 5px;
  --font-size: 16px;
  --background-color: #fbfbfb;
  /* --silver white */
  --background-color-2: #ededed;
  /* --light gray */
  --background-color-3: #FBEDEB;
  /* --light red */
  --space-1x: 10px;
  --space-2x: 20px;
  --space-3x: 30px;
  --space-4x: 40px;
  --space-5x: 50px;
  --space-half: 5px;
}

body {
  margin: 0px;
  padding: 0px;
  font-size: var(--font-size);
  line-height: 20px;
  font-style: normal;
  font-weight: normal;
  font-family: "Poppins", sans-serif;
}

html {
  font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
}

ul,
li,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

img {
  max-width: 100%;
}

span,
strong,
p,
br,
form,
section,
footer,
header,
caption,
nav,
figure,
small {
  margin: 0px;
  padding: 0px;
}

.fwb {
  font-weight: bold !important;
}

.evo-parts-loader-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--primary-color) !important;
}

.evo-asterisk {
  color: var(--primary-color);
  font-size: calc(var(--font-size) - 7px) !important;
  vertical-align: super;
}

.default_padding {
  padding: 40px 0px !important;
}

.default_padding_half {
  padding: 20px 8px !important;
}

.double_padding {
  padding: 80px 0px !important;
}

/* Padding */
.p-t-1x {
  padding-top: var(--space-1x) !important;
}

.p-t-2x {
  padding-top: var(--space-2x) !important;
}

.p-t-3x {
  padding-top: var(--space-3x) !important;
}

.p-t-5x {
  padding-top: var(--space-5x) !important;
}

.p-b-1x {
  padding-bottom: var(--space-1x) !important;
}

.p-b-2x {
  padding-bottom: var(--space-2x) !important;
}

.p-b-3x {
  padding-bottom: var(--space-3x) !important;
}

.p-b-5x {
  padding-bottom: var(--space-5x) !important;
}

.p-l-1x {
  padding-left: var(--space-1x) !important;
}

.p-l-2x {
  padding-left: var(--space-2x) !important;
}

.p-l-3x {
  padding-left: var(--space-3x) !important;
}

.p-l-5x {
  padding-left: var(--space-5x) !important;
}

.p-r-1x {
  padding-right: var(--space-1x) !important;
}

.p-r-2x {
  padding-right: var(--space-2x) !important;
}

.p-r-3x {
  padding-right: var(--space-3x) !important;
}

.p-r-5x {
  padding-right: var(--space-5x) !important;
}

.p-1x {
  padding: var(--space-1x) !important;
}

.p-2x {
  padding: var(--space-2x) !important;
}

.p-3x {
  padding: var(--space-3x) !important;
}

.p-5x {
  padding: var(--space-5x) !important;
}

/* Combined Padding */
.p-tb-05x {
  padding-top: var(--space-half) !important;
  padding-bottom: var(--space-half) !important;
}

.p-tb-1x {
  padding-top: var(--space-1x) !important;
  padding-bottom: var(--space-1x) !important;
}

.p-tb-2x {
  padding-top: var(--space-2x);
  padding-bottom: var(--space-2x) !important;
}

.p-lr-1x {
  padding-left: var(--space-1x);
  padding-right: var(--space-1x) !important;
}

.p-lr-2x {
  padding-left: var(--space-2x);
  padding-right: var(--space-2x) !important;
}

.p-r-5 {
  padding-right: var(--space-half) !important;
}

/* Margin */
.m-t-1x {
  margin-top: var(--space-1x) !important;
}

.m-t-2x {
  margin-top: var(--space-2x) !important;
}

.m-t-3x {
  margin-top: var(--space-3x) !important;
}

.m-t-4x {
  margin-top: var(--space-4x) !important;
}

.m-t-5x {
  margin-top: var(--space-5x) !important;
}

.m-b-1x {
  margin-bottom: var(--space-1x) !important;
}

.m-b-2x {
  margin-bottom: var(--space-2x) !important;
}

.m-b-3x {
  margin-bottom: var(--space-3x) !important;
}

.m-b-4x {
  margin-bottom: var(--space-4x) !important;
}

.m-b-5x {
  margin-bottom: var(--space-5x) !important;
}

.m-l-1x {
  margin-left: var(--space-1x) !important;
}

.m-l-2x {
  margin-left: var(--space-2x) !important;
}

.m-l-3x {
  margin-left: var(--space-3x) !important;
}

.m-l-4x {
  margin-left: var(--space-4x) !important;
}

.m-l-5x {
  margin-left: var(--space-5x) !important;
}

.m-r-1x {
  margin-right: var(--space-1x) !important;
}

.m-r-2x {
  margin-right: var(--space-2x) !important;
}

.m-r-3x {
  margin-right: var(--space-3x) !important;
}

.m-r-4x {
  margin-right: var(--space-4x) !important;
}

.m-r-5x {
  margin-right: var(--space-5x) !important;
}

/* Combined Margin */
.m-tb-1x {
  margin-top: var(--space-1x);
  margin-bottom: var(--space-1x) !important;
}

.m-tb-2x {
  margin-top: var(--space-2x);
  margin-bottom: var(--space-2x) !important;
}

.m-lr-1x {
  margin-left: var(--space-1x);
  margin-right: var(--space-1x) !important;
}

.m-lr-2x {
  margin-left: var(--space-2x);
  margin-right: var(--space-2x) !important;
}

.m-lr-3x {
  margin-left: var(--space-3x);
  margin-right: var(--space-3x) !important;
}

.m-r-5 {
  margin-right: var(--space-half) !important;
}


.w-35 {
  width: 35% !important;
}

.w-50 {
  width: 50% !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-color);
  cursor: pointer;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--secondary-color);
  cursor: pointer;
}

.btn {
  background: var(--primary-color);
  color: #fFFFFF !important;
  border-color: #ffffff !important;
  line-height: 1.5;
  padding: 6px 12px;
  border: medium none;
  border-radius: var(--border-radius);
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content;
}

.btn:hover {
  background: var(--primary-color);
  border: medium none;
  border-radius: var(--border-radius);
  color: #FFFFFF;
}

.btn-link:hover {
  color: var(--primary-color);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #ffffff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-select-sm {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: .5rem !important;
  font-size: .875rem !important;
  border-radius: calc(var(--border-radius) + 2px) !important;
}

.evo_banner-img {
  /* background-image: url(../images/hero-banner.png); */
  min-height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;

}

.border_top-default {
  border-top: 1px solid var(--border-color);
}

.border_bottom-default {
  border-bottom: 1px solid var(--border-color);
}

.evo_top-header {
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0px;
}

.evo_bottom-header .navbar-toggler {
  background-color: var(--border-color);
}

.evo_top-header-left ul li {
  margin-right: 0px;
}

.evo_top-header-left ul li:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

.evo_top-header-left ul li a {
  color: var(--primary-color) !important;
}

.evo_top-header-right .dropdown {
  display: flex;
  align-items: center;
  justify-content: end;
}

.evo_top-header-right .dropdown .link-body-emphasis {
  border: 1px solid var(--border-color);
  padding: 5px 10px;
  border-radius: var(--border-radius);
}

.evo_top-header-right .dropdown-menu {
  border-radius: calc(var(--border-radius) - 5px) !important;
}

.evo_top-header-right .dropdown-menu li a {
  line-height: 5px;
}

.evo_center-header-right .form-control:focus {
  box-shadow: 0 0 0 0rem;
}

.evo_center-header {
  padding: 10px 0px;
}

.evo_rfq_cart button {
  padding: 5px 7px;
  background-color: transparent;
  border: 0px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  margin-right: 10px;
  font-size: calc(var(--font-size) - 2px);
  white-space: nowrap;
}

.evo_buy_cart button {
  padding: 5px 7px;
  background-color: transparent;
  border: 0px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  margin-right: 10px;
  font-size: calc(var(--font-size) - 2px);
  white-space: nowrap;
}

.evo_rfq_cart button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.evo_buy_cart button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.evo_sign_up_btn {
  border-radius: var(--border-radius);
  padding: 8px 10PX;
  margin-left: 40px;
  margin-top: -5px;
  /* font-size: calc(var(--font-size) - 2px);
  font-weight: bold !important;
  letter-spacing: 1px; */
  margin-top: -5px;
}

.evo_sign_in_img {
  height: 16px;
}

.evo_center-header-left img {
  margin-left: 10px;
}

.evo_center-header-right input[type=text] {
  padding: 6px 6px 6px 15px;
  border: 1px solid var(--border-color);
}

.evo_center-header-right button {
  padding: 9px 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  cursor: pointer;
}

.field-label .shipping-method-label {
  white-space: nowrap;
}

.evo_bottom-header .login-register a {
  color: #ffffff !important;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap
}

.login-register a:hover {
  cursor: pointer;
}

.login-register a span:hover {
  cursor: pointer;
  background-color: var(--third-color);
}

.login-register span {
  color: #ffffff !important;
}

.login-register {
  float: right;
  margin-right: -10px;
}

.login-register .navbar-nav li {
  padding-top: 5px;
}

.login-register .navbar-nav {
  display: flex;
  flex-direction: row;
}

.evo_bottom-header {
  background-color: var(--secondary-color);
}

.evo_bottom-header .navbar-expand-lg .navbar-nav .nav-link {
  color: #ffffff;
  line-height: 18px;
  margin-right: 10px;
}

/* .nav-link .ti-list-search{
  font-size: calc(var(--font-size) + 5px);
} */
.evo_bottom-header i.ri.ri-arrow-down-s-line.ms-2 {
  font-size: calc(var(--font-size) + 5px) !important;
  font-weight: 500;
  vertical-align: middle;
}

.evo_bottom-header .mega-menu {
  width: 1284px;
  border-radius: calc(var(--border-radius) - 5px) calc(var(--border-radius) - 5px) calc(var(--border-radius) + 5px) calc(var(--border-radius) + 5px);
  margin-top: 0px;
  border: 1px solid var(--border-color);
  padding: 5px 15px 5px 15px !important;
  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}

/* .list-unstyled-v2 {
  padding-left: 60px !important;
  display: none;
} */

.child-category {
  display: none;
  padding-left: 15px;
}

.child-category.active {
  display: block;
}

.arrow {
  display: inline-block;
  margin-left: 6px;
  border: solid #666;
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(-45deg);
  transition: transform 0.3s;
}

/* Rotate arrow when parent is expanded */
.expanded>.category-header .arrow {
  transform: rotate(45deg);
  /* down arrow */
}


.dropdown-menu-v2 {
  display: none;
}

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

.evo_bottom-header .mega-menu h6 {
  line-height: 1.5;
  font-weight: 600;
  color: var(--primary-color);
  margin: -3px 0px 0px 0;
}

.evo_bottom-header .mega-menu a {
  line-height: 14px;
  font-weight: 500;
  color: black;
  white-space: nowrap;
}

.evo_bottom-header .mega-menu li {
  padding-top: 8px;
}

.evo_bottom-header .mega-menu h6 a {
  font-weight: 800;
  color: var(--primary-color);
}

.evo_bottom-header .mega-menu a:hover {
  color: var(--primary-color);
}

.first-link {
  padding-left: 0px !important;
  white-space: nowrap;
}

.evo_banner-main {
  position: relative;
  background: var(--background-color-3) !important;
}

#navbarNav .dropdown:hover .dropdown-menu {
  display: block;
}

.evo_banner-main::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: block;
  /* background: rgba(0, 0, 0, 0.4); */
}

.evo_banner-img {
  width: 100%;
}

.evo_banner-box {
  position: absolute;
  color: var(--secondary-color);
  top: 50%;
  /* left: 16%; */
  /* right: 0; */
  /* transform: translateY(-50%); */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1320px;
  padding: 0 15px;
}

.evo_banner-box h3 {
  font-size: calc(var(--font-size) + 15px);
  line-height: 33px;
  margin-bottom: 20px;
}

.evo_banner-box p {
  line-height: 36px;
}

.evo_banner-box .bar-pri {
  color: var(--primary-color);
}

.evo_product-img img {
  box-shadow: none;
}

.evo_product-img:hover {
  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
  border-radius: var(--border-radius);
}

.evo_sprite-image {
  display: inline-block;
  width: 190px;
  height: 160px;
  border-radius: var(--border-radius);
}

.evo_banner-box-text {
  font-size: calc(var(--font-size) * 3);
  font-weight: 700;
  text-shadow: 1px 1px 2px #888888;
}

.evo_banner-box-text-w {
  color: var(--primary-color) !important;
  background-color: transparent;
  /* padding: 4px 7px 1px 7px; */
  /* border: 1px solid #DB4E39; */
  /* border-radius: 5px; */
}

.evo_banner-box-subtext {
  font-size: calc(var(--font-size) + 5px);
  font-weight: 500;
  margin-top: 20px;
  text-shadow: 1px 1px 2px #888888;
}

.evo_banner-button {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  font-weight: 500;
  /* margin-top: 20px; */
  border-radius: var(--border-radius);
}

.search-input::placeholder {
  color: var(--place-holder-color);
  opacity: 1;
  /* Firefox */
}

.form-control::placeholder {
  color: var(--place-holder-color);
  opacity: 1;
  /* Firefox */
}

.search-input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--place-holder-color)
}

.search-input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--place-holder-color)
}

.evo_product-name a {
  color: var(--primary-color);
  line-height: 19px;
  font-weight: 500;
}

.evo_material-name {
  text-align: center;
}

.evo_material-name span {
  line-height: 19px;
  font-weight: 500;
}

.evo_material-name a {
  line-height: 19px;
  font-weight: 500;
}

.evo_material-img {
  background-color: rgba(22, 22, 22, 0.6);
  /* padding: 21px 18px;
  border-left: 1px solid #4e595f;
  border-top: 1px solid #4e595f;
  margin-bottom: 30px;
  -webkit-box-shadow: 2px 2px 5px rgba(44, 44, 44, .3), 13px 13px 0 rgba(193, 193, 193, .7);
  -moz-box-shadow: 2px 2px 5px rgba(44, 44, 44, .3), 13px 13px 0 rgba(193, 193, 193, .7);
  box-shadow: 2px 2px 5px rgba(44, 44, 44, .3), 13px 13px 0 rgba(193, 193, 193, .7); */
  text-align: center;
}

.evo_material-img img {
  opacity: 0.6;
}

.evo_material-img img:hover {
  opacity: 1;
}

.evo_material-main .row {
  padding-right: calc(var(--bs-gutter-x) - .5);
  padding-left: calc(var(--bs-gutter-x) - .5);
}

.evo_map-img {
  text-align: center;
}

.evo_featuredPropBox {
  padding: 0;
}

.evo_featuredPropBox ul {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.category-card {
  flex: 1;
  min-width: 220px;
  max-width: 300px;
  height: 300px;
  background: white;
  border: 1px solid #f3f4f6;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
  box-shadow: 5px 5px 2px #f3f4f6;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.category-card-link {
  display: block;
  height: 100%;
  width: 100%;
}

.category-image-wrapper {
  height: 180px;
  width: 100%;
  overflow: hidden;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.category-image {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.category-card:hover .category-image {
  transform: scale(1.1);
}

.category-content {
  padding: 20px;
  text-align: center;
  position: relative;
  height: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  transition: all 0.4s ease;
}
.category-content-v2 {
  padding: 20px;
  text-align: center;
  position: relative;
  height: calc(100% - 180px);
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}

.category-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary-color);
  margin: 0;
  transition: all 0.4s ease;
  line-height: 1.2;
}

.category-description {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0 20px 20px;
  opacity: 0;
  transition: all 0.4s ease;
  background: white;
}

.category-description p {
  font-size: 13px;
  color: var(--alternative-color);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-card:hover .category-content {
  transform: translateY(-20px);
}

.category-card:hover .category-description {
  top: 70%;
  opacity: 1;
}

.category-card:hover .category-title {
  transform: translateY(-10px);
  color: var(--primary-color);
}

#blogPage .blogs-category {
  display: flex;
}

#blogPage .blog-tag-btn {
  padding: 8px 20px;
}

.contact-section .contact-us-p {
  font-weight: normal !important;
  text-align: center;
}

.contact-section {
  display: grid;
  justify-content: center;
}

@media (max-width: 992px) {
  .evo_featuredPropBox ul li {
    width: 45%;
    height: 250px;
  }
}

@media (max-width: 768px) {
  .evo_featuredPropBox ul li {
    width: 100%;
    height: 220px;
    margin: 10px 0;
  }
}

@media (max-width: 480px) {
  .evo_featuredPropBox ul li {
    height: 200px;
  }
}



.evo_why-body-title h6 {
  font-size: calc(var(--font-size) + 3px);
  line-height: 22px;
  font-weight: 500;
}

.evo_sell {
  background-color: var(--secondary-color);
}

.evo_sell-content {
  color: #ffffff;
}

.evo_logo {
  height: 45px;
  padding-bottom: 5px;
}

.evo_why-content {
  color: var(--alternative-color);
}

.evo_newsletter {
  /* background-color: var(--secondary-color);
    padding: 50px 0px !important; */
  /* padding: 50px 0px !important;
  background-color: #21262b;
  background-image: url(../images/cubic-grid.8fc65453.svg);
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden; */
  background: #f8f8f8;
  border-top: 1px solid var(--border-color);
  /* padding-top: 60px; */
}

.evo_newsletter .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.evo_newsletter .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.evo_newsletter .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.evo_newsletter .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.evo_newsletter .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #ffffff;
  text-decoration: none;
  background-color: var(--primary-color);
}

.evo_newsletter .form-control {
  background: transparent;
  color: white;
  border: 1px solid var(--border-color);
}

.evo_newsletter .form-control:focus {
  box-shadow: 0 0 0 0rem;
  border-color: white;
}

.evo_newsletter .form-control::placeholder {
  color: white;
}

.evo_newsletter p {
  color: #DEDEDE;
}

.evo_newsletter_1f1gz7g {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: -50px;
}

.evo_newsletter-1guy87l {
  background: linear-gradient(180deg, #FEFEFE 0%, #BFBFBF 100%);
  border-radius: 50%;
  height: 29px;
  width: 29px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.evo_footer-bottom {
  display: flex;
  background-color: var(--secondary-color);
  padding: 15px 0px;
  color: white;
}

.evo_footer-bottom a:not(:last-of-type)::after {
  content: "|";
  display: inline-block;
  padding: 0 10px;
  color: white;
}

.evo_footer_1 {
  flex: 1;
  font-size: 0.9em;
  white-space: nowrap;
}

.evo_footer_2 {
  flex: 2;
  font-size: 0.9em;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none;
}

.evo_footer-bottom a {
  color: white;
}

.evo_footer h6 {
  color: var(--alternative-color);
  font-weight: bold;
  margin-bottom: 20px;
}

.evo_other-cat {
  margin-bottom: 10px;
}

.evo_footer ul li a {
  color: black;
  font-weight: 500;
}

.evo_footer ul li a:hover {
  color: var(--primary-color);
}

.evo_other-cat a {
  color: black;
  font-weight: 500;
}

.evo_other-cat a:hover {
  color: var(--primary-color);
}

.evo_footer ul li {
  margin-bottom: 10px;
}

.evo_other {
  color: var(--alternative-color);
  font-weight: bold;
}

.evo_round_box .ti {
  font-size: 35px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  color: var(--primary-color);
}

.evo_cm-info {
  display: block;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  padding: 20px 0px;
  /* background-color: var(--third-color); */
}

.evo_cm-info-img {
  width: 80px;
}

.evo_cm-info-msg {
  display: flex;
  padding-left: 20px;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  text-align: left;
  margin-top: -5px;
  width: 100%;
  color: var(--alternative-color);
}

.evo_cm-info-msg-bold {
  color: #000000 !important;
  font-weight: bold;
  margin-bottom: 2px;
}

.evo_supp-info {
  display: block;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  padding: 20px 0px;
}

.evo_supp-info-img {
  max-width: 80px;
}

.evo_supp-info-msg {
  display: flex;
  padding-left: 20px;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin-top: -5px;
  color: var(--alternative-color);
  font-size: calc(var(--font-size) + 2px);
  line-height: 1.5;
}

.evo_supp-info-msg-bold {
  color: #000000 !important;
  font-weight: bold;
  margin: 10px 0px 2px 0px;
}

.evo_supp-info-msg-evo-bold {
  color: var(--primary-color) !important;
  font-weight: bold;
  margin: 10px 0px 2px 0px;
}

.evo_supp-info-hr {
  width: 90%;
  margin: auto;
  text-justify: center;
  color: var(--border-color) !important;
}

.evo_fl {
  float: left;
}

.evo_fr {
  float: right;
}

.evo_heading2 {
  font-size: calc(var(--font-size) * 2);
}

.evo_heading3 {
  font-size: calc(var(--font-size) + 10px);
}

.evo_heading4 {
  font-size: calc(var(--font-size) + 5px);
}

.evo_heading5 {
  font-size: var(--font-size);
}

.p-b-0 {
  padding-bottom: var(--default-padding-bottom) - 10px;
}

.evo_material-main {
  background-color: #fff;
}

.evo_static_page {
  color: var(--secondary-color);
  line-height: 1.8 !important;
}

.evo_static_page h1 {
  font-size: calc(var(--font-size) + 5px);
  font-weight: bold;
  padding-bottom: 20px;
}

.evo_static_page h2 {
  font-size: calc(var(--font-size) + 4px);
  padding-top: 20px;
  padding-bottom: 10px;
  color: #000;
  font-weight: bold;
}

.evo_static_page h3 {
  font-size: calc(var(--font-size) + 3px);
  padding-top: 20px;
  padding-bottom: 10px;
}

.evo_static_page h4 {
  font-size: calc(var(--font-size) + 2px);
  padding-top: 20px;
  padding-bottom: 10px;
}

.evo_static_page h6 {
  font-size: calc(var(--font-size) + 1px);
  padding-top: 20px;
  padding-bottom: 10px;
}

.evo_static_page p {
  font-size: var(--font-size);
  color: #555;
  padding-top: 10px;
}

.evo_static_page ul li {
  list-style: circle !important;
  margin-left: 35px !important;
  color: #555;
}

.evo_static_page ol li {
  list-style: auto !important;
  margin-left: 35px !important;
  color: #555;
}

.evo_static_page ol.custom-list {
  list-style-type: lower-alpha;
  /* a, b, c */
  counter-reset: item;
  margin-left: 0px;
}

.evo_static_page ol.custom-list li::marker {
  content: counter(item, lower-alpha) ") ";
  /* Outputs a), b), c) */
}

.evo_static_page ol.custom-list li {
  counter-increment: item;
}

.evo_about_image {
  height: 100%;
  border-radius: calc(var(--border-radius) + 2px);
  /* margin: 10px 10px; */
}

.evo_blog_image {
  height: 100%;
  /* margin: 10px 10px; */
}

.evo_blog_main_image_rounded {
  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

.evo_blog_sub_image_rounded {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.evo_avatar-md {
  height: 75px;
  width: 75px;
}

.evo_avatar-name {
  font-size: var(--font-size);
  font-weight: bold;
}

.evo_avatar-des {
  font-size: calc(var(--font-size) - 2px);
  color: var(--place-holder-color);
}

.evo_avatar-cont {
  font-size: calc(var(--font-size) - 1px);
}

.evo_contact-badge-1 {
  padding: 10px 10px;
  margin: 5px 5px 5px 0px;
  border-radius: calc(var(--border-radius) - 2px);
  color: var(--primary-color);
  background: #DB4E391f;
  line-height: 2 !important;
}

.evo_contact-badge-2 {
  padding: 10px 10px;
  margin: 5px 5px 5px 0px;
  border-radius: calc(var(--border-radius) - 2px);
  color: #0055ff;
  background: #0055ff1f;
  line-height: 2 !important;
}

.evo_contact-badge-3 {
  padding: 10px 10px;
  margin: 5px 5px 5px 0px;
  border-radius: calc(var(--border-radius) - 2px);
  color: #17a2b8;
  background: #17a2b81f;
  line-height: 2 !important;
}

.buy_sell-container-main {
  background-color: var(--third-color);
  display: block;
  display: flex;
  flex-direction: row;
}

.buy_sell_supplier {
  display: flex;
  justify-content: center;
}

.buy_sell_supplier-text {
  font-size: calc(var(--font-size) + 10px);
  background: var(--primary-color);
  border-radius: 30px;
  padding: 50px 50px;
  width: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  float: left;
  justify-content: space-between;
  line-height: 1.3;

}

.buy_sell_supplier-text-2 {
  font-size: calc(var(--font-size) + 10px);
  display: flex;
  align-items: center
}


.buy_sell_supplier-text-2 .ti {
  font-size: calc(var(--font-size) + 15px);
  margin-left: -10px;
}

.buy_sell_supplier-text-3 {
  padding: 20px 30px;
  display: flex;
  align-items: center
}

.buy_sell_round_box .ti {
  font-size: calc(var(--font-size) + 20px);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  color: var(--primary-color);
}

.buy_sell_desc-content {
  display: flex;
  padding-left: 20%;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin-top: -78px;
}

.buy_sell_circle {
  height: 3rem;
  width: 3rem;
  display: inline-block;
  border-radius: 6.25rem;
  background-color: var(--primary-light-color);
  margin-bottom: 30px;
}

.buy_sell_circle p {
  color: var(--primary-color);
  padding: 14px;
  font-size: calc(var(--font-size) + 10px);
  font-weight: bold;
  margin: 0%;
}

.buy_sell_doted-line {
  content: "";
  display: block;
  border-top: .25rem dotted var(--primary-color);
  width: 16.4rem;
  position: relative;
  left: 12rem;
  top: 1.7rem;
  opacity: .8;
}

#evo_home .benefits-section .feature-list {
  justify-items: left;
  /* margin: 30px; */
  /* margin-left: 76px;*/
}

#evo_home .benefits-section .feature-list .benefit-icon i {
  color: var(--primary-color);
  font-size: 30px;
}

/* added by me */
.category-item {
  background-color: #777;
  position: relative;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  margin: 10px;
  font-weight: bold;
}

/* Create pseudo-element for icon */
.category-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6rem;
  /* line-height: 1; */
}

/* Individual icons (using emoji as background) */
.category-item.icon-bolt::before {
  content: "⚡";
}

.category-item.icon-gear::before {
  content: "⚙️";
}

.category-item.icon-wind::before {
  content: "💨";
}

.category-item.icon-tool::before {
  content: "🛠️";
}

.dropdown-toggle::after {
  margin-left: 5%;
}

/* over */
@media (max-width: 1600px) and (min-width: 1201px) {
  .evo_bottom-header .mega-menu {
    width: 900px;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }
}

@media (max-width: 1200px) {
  .evo_bottom-header .navbar-expand-lg .navbar-nav .nav-link {
    margin-right: 0px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .evo_bottom-header .mega-menu {
    width: 800px;
  }
}

@media (max-width: 1280px) {

  .evo_footer_1,
  .evo_footer_2 {
    font-size: 0.85em;
  }
}

/* Add the below CSS in the dashboard.css file instead of main.css. */
@media (max-width: 1366px) and (min-width: 768px) {
  .register-form .form-group .password-toggle-icon {
    position: absolute;
    left: 21.5em;
    margin-top: 0.1px;
    transform: translateY(-100%);
    cursor: pointer;
  }

  #id_login_email,
  #id_login_password {
    width: 20em;
  }

  #loginPage .login-form .password-toggle-icon {
    left: 47px;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }

  .login-form .signin-btn {
    flex: 0 0 auto;
    width: 120.333333%;
  }

  .place-order-btn .btn-primary.buy-cart {
    font-size: calc(var(--font-size) - 0.25em) !important;
    padding: 6px 0 !important;
    white-space: wrap;
  }

  #evo_base_header .custom-dropdown-button {
    width: 8em;
  }

  .hero-content .hero-video {
    margin-right: 8%;
  }

  .all-tile-products {
    width: 32%;
  }
}

@media (max-width: 1280px) and (min-width: 800px) {
  .hero-content .hero-video {
    margin-right: 8%;
  }

  .register-form .form-group .password-toggle-icon {
    position: absolute;
    left: 22em;
    margin-top: 0.1px;
    transform: translateY(-100%);
    cursor: pointer;
  }

  #id_login_email,
  #id_login_password {
    width: 20em;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }

  .login-form .signin-btn {
    flex: 0 0 auto;
    width: 149.333333%;
  }

  .place-order-btn .btn-primary.buy-cart {
    font-size: calc(var(--font-size) - 0.25em) !important;
    padding: 6px 14px !important;
    white-space: wrap;
  }

  #evo_base_header .custom-dropdown-button {
    width: 8em;
  }

  .footer-copyright {
    justify-content: space-around !important;
  }

  .copyright-text {
    width: 11%;
  }

  .evo-footer-links {
    width: 56%;
  }

  .evo_footer_2 {
    flex-wrap: wrap !important;
  }

  .btn-req-quote {
    margin-left: 0px !important;
  }

  .animated-evobrain {
    margin-right: 0px !important;
  }

  .btn-req-quote-back {
    white-space: nowrap !important;
  }

  .ai-bar-main {
    width: 82% !important;
  }

  .search-bar-main {
    width: 82% !important;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .ai-bar-main {
    width: 85% !important;
  }

  .search-bar-main {
    width: 85% !important;
  }

  .evo_product-main .evo_p {
    flex: 0 0 25%;
    width: 25%;
  }

  .user-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 38%;
  }

  .user-actions .nav-postal-code {
    display: inline-block;
    /* margin-top: -5px !important; */
    /* width: 100%; */
    /* margin-left: -3px; */
    /* width: 69%; */
  }

  .user-actions .postal-code-div {
    width: 49%;
    text-align: right;
  }

  .user-actions .dropdown-toggle {
    white-space: pre-wrap;
  }

  /* .btn-req-quote-back {
    margin-left: 12px;
  } */

  .evo_bottom-header .login-register a {
    margin-right: 15px;
  }


  .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0%;
    vertical-align: .255em;
    content: "";
    border-top: 0.19em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
  }

  .evo_featuredPropBox ul {
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
  }

  .user-actions .action-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    white-space: pre-line;
    width: 55%;
  }

  #productsPage .product-navigation-controls .fw-bold {
    white-space: nowrap;
  }

  #evo_base_header .custom-dropdown-button {
    width: 8em;
  }

  input#id_login_email,
  input#id_login_password {
    width: 17em;
  }

  .register-form .form-group .password-toggle-icon {
    position: absolute;
    left: 16.5em;
    margin-top: 0.1px;
    transform: translateY(-100%);
    cursor: pointer;
  }

  .evo_material-main .evo_m {
    flex: 0 0 50%;
    width: 50%;
  }

  .evo_bottom-header .mega-menu {
    width: 642px;
  }

  #shoppingCart .product-info-table .product-info-table-col1 {
    width: 82%;
  }

  .evo_banner-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .evo_banner-box h3 {
    font-size: calc(var(--font-size) + 10px);
    line-height: 30px;
    margin-bottom: 5px;
  }

  .evo_banner-box p {
    line-height: 13px;
  }

  .category-card {
    max-width: 200px;
    min-width: 180px;
    height: 280px;
  }

  .category-title {
    font-size: 16px;
  }

  .evo_footer_1,
  .evo_footer_2 {
    font-size: 0.8em !important;
  }

  .evo_footer_1 {
    width: 30%;
    /* left section */
    flex: 0 0 30%;
    text-align: left;
  }

  .evo-footer-links .evo_footer_2 {
    padding: 0 14px;
    /* width: 70%;   right section */
    /* flex: 0 0 70%; */
    /* margin-left: 5em; */
    /* justify-content: flex-end; */
  }

  .shop-by-department {
    width: 16%;
  }


  /* .shop-by-department .header-nav-menu {
       text-align: center;
    width: 94%;
} */
  .header-nav-menu {
    margin-left: 12em
  }

  .footer-copyright {
    justify-content: space-around !important;
  }

  .copyright-text {
    width: 11%;
  }

  .evo-footer-links {
    width: 53%;
  }

  .evo_footer_2 {
    flex-wrap: wrap !important;
  }

  .btn-req-quote {
    margin-left: 20px !important;
  }

  .animated-evobrain {
    margin-right: 36px !important;
  }

  .btn-req-quote-back {
    white-space: pre-wrap !important;
  }

  .nav-content {
    justify-content: flex-start !important;
  }
}

/* media query for mobile responsive  */

@media (max-width: 873px) and (min-width: 393px) {
  #evo_home .hero-content .hero-text {
    /* flex: 1; */
    color: white;
    width: 100%;
  }

  #evo_home .hero-content .hero-text h1 {
    width: 100%;
    font-size: 32px;
    margin-bottom: 0.6em;
  }

  #evo_home .hero-content .hero-text p {
    line-height: 1.3 !important;
    margin-bottom: 1em;
  }

  #evo_home .hero-content .xls-feature {
    padding: 5px;
    max-width: 100%;
  }

  #evo_home .hero-content {
    padding: 0px 0;
  }

  #evo_home .hero-content .container {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
    gap: 1.2em;
  }

  #evo_home .default_padding {
    padding: 1.1em 0em !important;
  }

  #evo_home .btn-upload-request,
  #evo_home .btn-become-supplier {
    margin-top: 0.5rem !important;
  }

  #evo_home .benefits-title {
    margin-bottom: 0.5em;
  }

  #evo_home .benefits-wrapper {
    gap: 3em;
  }

  #evo_home .cta-button {
    padding: 9px 20px;
  }

  #evo_home .evo-analysis .text-center h2 {
    margin-bottom: 0.3em !important;
  }

  #evo_home .step-item {
    width: 100%;
    padding: 0px 24px;
    align-content: center;
  }

  #evo_home .steps-container {
    gap: 1em;
  }

  #evo_home .evo_featuredPropBox ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  #evo_home .evo_featuredPropBox ul li {
    width: 47%;
    /* height: 220px; */
    margin: 10px 0;
    height: 14rem;
  }

  #evo_home .evo_featuredPropBox ul li .fplogo {
    padding: 0.1em;
    letter-spacing: 0px;
  }

  #evo_home .products-grid {
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 15px;
    height: 31%;
  }

  #evo_home .bestsellers-section .product-image {
    height: 109px;
  }

  .blog-hero-5 {
    background-attachment: local !important;
  }

  .banner-hero-5 {
    text-shadow: 2px 2px 2px #000 !important;
    color: #fff !important;
    font-size: 55px !important;
  }

  #loginPage .signin-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 30vw;
  }

  #loginPage .btn-link,
  #loginPage #id_login_email,
  #loginPage .email_field {
    width: max-content;
  }

  .login-form form span {
    width: max-content;
  }

  #loginPage #id_login_password {
    width: 14.2em;
  }

  /* #loginPage .password-toggle-icon {
    left: 154px;
  }*/

  .cate-aside-col {
    width: 100% !important;
  }

  #productsPage .products-detailed {
    padding: 10px 10px 10px 20px !important;
  }

}

@media (max-width: 844px) and (min-width: 390px) {
  #evo_home .hero-content .hero-text {
    /* flex: 1; */
    color: white;
    width: 100%;
  }

  #evo_home .hero-content .hero-text h1 {
    width: 100%;
    font-size: 32px;
    margin-bottom: 0.6em;
  }

  #evo_home .hero-content .hero-text p {
    line-height: 1.3 !important;
    margin-bottom: 1em;
  }

  #evo_home .hero-content .xls-feature {
    padding: 5px;
    max-width: 100%;
  }

  #evo_home .hero-content {
    padding: 0px 0;
  }

  #evo_home .hero-content .container {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
    gap: 1.2em;
  }

  .blog-hero-5 {
    background-attachment: local !important;
  }

  .banner-hero-5 {
    text-shadow: 2px 2px 2px #000 !important;
    color: #fff !important;
    font-size: 55px !important;
  }

  #evo_home .default_padding {
    padding: 1.1em 0em !important;
  }

  #evo_home .btn-upload-request,
  #evo_home .btn-become-supplier {
    margin-top: 0.5rem !important;
  }

  #evo_home .benefits-title {
    margin-bottom: 0.5em;
  }

  #evo_home .benefits-wrapper {
    gap: 3em;
  }

  #evo_home .cta-button {
    padding: 9px 20px;
  }

  #evo_home .evo-analysis .text-center h2 {
    margin-bottom: 0.3em !important;
  }

  #evo_home .step-item {
    width: 100%;
    padding: 0px 24px;
    align-content: center;
  }

  #evo_home .steps-container {
    gap: 1em;
  }

  #evo_home .evo_featuredPropBox ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  #evo_home .evo_featuredPropBox ul li {
    width: 48%;
    /* height: 220px; */
    margin: 10px 0;
    height: 14rem;
  }

  #evo_home .evo_featuredPropBox ul li .fplogo {
    padding: 0.1em;
    letter-spacing: 0px;
  }

  #evo_home .products-grid {
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 15px;
    height: 31%;
  }

  #evo_home .bestsellers-section .product-image {
    height: 109px;
  }

  #loginPage .signin-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 30vw;
  }

  #loginPage .btn-link,
  #loginPage #id_login_email,
  #loginPage .email_field {
    width: max-content;
  }

  .login-form form span {
    width: max-content;
  }

  #loginPage #id_login_password {
    width: 14.2em;
  }

  /* #loginPage .password-toggle-icon {
    left: 154px;
  } */

  .cate-aside-col {
    width: 100% !important;
  }

  #productsPage .products-detailed {
    padding: 10px;
  }
}

@media (max-width: 800px) and (min-width: 360px) {


  .w-100 {
    width: 100% !important;
  }

  #evo_home .hero-content .hero-text {
    /* flex: 1; */
    color: white;
    width: 100%;
  }

  #evo_home .hero-content .hero-text h1 {
    width: 100%;
    font-size: 32px;
    margin-bottom: 0.6em;
  }

  #evo_home .hero-content .hero-text p {
    line-height: 1.3 !important;
    margin-bottom: 1em;
  }

  #evo_home .hero-content .xls-feature {
    padding: 5px;
    max-width: 100%;
  }

  #evo_home .hero-content {
    padding: 0px 0;
  }

  #evo_home .hero-content .container {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
    gap: 1.2em;
  }

  .blog-hero-5 {
    background-attachment: local !important;
  }

  .banner-hero-5 {
    text-shadow: 2px 2px 2px #000 !important;
    color: #fff !important;
    font-size: 55px !important;
  }

  #evo_home .default_padding {
    padding: 1.1em 0em !important;
  }

  .default_padding {
    padding: 20px 0em !important;
  }

  #evo_home .btn-upload-request,
  #evo_home .btn-become-supplier {
    margin-top: 0.5rem !important;
  }

  #evo_home .benefits-title {
    margin-bottom: 0.5em;
  }

  #evo_home .benefits-wrapper {
    gap: 3em;
  }

  #evo_home .cta-button {
    padding: 9px 20px;
  }

  #evo_home .evo-analysis .text-center h2 {
    margin-bottom: 0.3em !important;
  }

  #evo_home .step-item {
    width: 100%;
    padding: 0px 24px;
    align-content: center;
  }

  #evo_home .steps-container {
    gap: 1em;
  }

  #evo_home .evo_featuredPropBox ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  #evo_home .category-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 280px;
  }

  #evo_home .products-grid {
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 15px;
    height: 31%;
  }

  #evo_home .bestsellers-section .product-image {
    height: 200px;
  }

  #loginPage .signin-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* .otp-btn{
  margin: 0 !important;
} */
  #loginPage .signin-btn-email {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  #loginPage .btn-link,
  #loginPage .email_field,
  .password_label {
    width: max-content;
  }

  .login-form form span {
    width: max-content;
  }

  #loginPage #id_login_email {
    width: 100%;
  }

  #loginPage #id_login_password {
    width: 100%;
  }

  /* #loginPage .password-toggle-icon{
      left: 154px;
} */
  .sign-in-secondary-btn {
    width: 45%;
  }

  .about-content-history {
    padding-right: 8px;
  }

  .shadow-none {
    margin-top: 16px;
  }

  .about-content-history .row>* {
    padding-right: 0;
    flex-direction: column-reverse;
  }

  .about-content-mission .row {
    padding-right: 0;
    flex-direction: column-reverse;
  }

  .evo_fr,
  .evo_fl {
    /* padding-left: 18px; */
    float: none;
  }

  /* .evo_rl{
  padding-right: 12px;
} */
  .cate-aside-col {
    width: 100% !important;
  }

  #productsPage .products-detailed {
    padding: 10px 10px 10px 15px;
  }

  #productsPage .products-detailed .category_index {
    white-space: nowrap;
  }

  .cart-alert.show {
    right: 5% !important;
    width: 90%;
  }

  .video-container {
    border-radius: 10px;
    /* margin-left: 30px; */
  }

  .video-title {
    display: flex !important;
  }

  iframe {
    /* border: 0; */
    width: 89vw;
    /* margin-left: 20px; */
    height: 25vh;
  }

  .hero-video {
    /* margin-right: 9% !important; */
    margin-right: 0 !important;
  }

  #blogPage .blogs-category {
    /* display: flex; */
    flex-wrap: wrap;
  }

  #blogPage .text-black {
    padding: 0 0.5em;
  }

  .product-price {
    flex-wrap: wrap;
  }

  .product-view {
    margin: 0 0.2em;
  }

  .contact-section .contact-grid {
    grid-template-columns: repeat(1, 1fr);

  }

  .contact-section .contact-us-p {
    font-weight: normal;
  }

  .category-content .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1px;
    padding-top: 10px;
  }

  .newsletter-form .newsletter-div input {
    padding: 12px 10px;
  }

  .newsletter-form .newsletter-div {
    width: 21em;
  }

  .faq_accordion-title {
    padding: 0px 20px 10px 0px !important;
    display: flex;
  }

  .evo_page_title {
    white-space: pre-line !important;
  }
}

@media (max-width: 932px) and (min-width: 430px) {
  .category-content .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(334px, 1fr));
  }

  .faq_accordion-title {
    padding: 0px 20px 10px 0px !important;
    display: flex;
  }
}

/* For 1024x768 or smaller */
@media (max-width: 767px) {
  .evo_top-header-left ul li {
    margin-right: 0px;
  }

  .evo_bottom-header .col-md-8 {
    width: 50%;
    float: left;
  }

  .evo_bottom-header .col-md-4 {
    width: 50%;
    float: right;
  }

  .evo_bottom-header .mega-menu {
    width: 280px;
  }

  .evo_bottom-header .navbar-toggler {
    margin-left: -12px;
  }

  .btn-link.buy-cart {
    display: flex;
    font-size: 0.8em;
    padding: 0.1em;
    white-space: nowrap;
    margin: 0 2px 0 0;
  }

  .evo_center-header-left img {
    margin-left: 0px;
    width: 40%;
    margin-bottom: 10px;
  }

  .evo_product-main .evo_p {
    text-align: center;
  }

  .evo_material-main .evo_material {
    margin-bottom: 20px;
  }

  .evo_bottom-header .navbar-toggle {
    position: relative;
    float: right;
    right: 0;
    padding: 0;
    margin: 0;
    background: none;
    outline: none;
  }

  .evo_bottom-header .navbar-collapse {
    position: absolute;
    width: 100%;
    min-width: 280px;
    top: 100%;
    text-align: center;
    background-color: #3e4354;
    z-index: 99;
  }

  .evo_bottom-header .navbar-expand-lg .navbar-nav .nav-link {
    color: white;
  }

  /* .evo_footer img {
    width: 40%;
  } */

  .evo_banner-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: unset;
  }

  .evo_banner-box h3 {
    font-size: calc(var(--font-size) - 5px);
    line-height: 13px;
    margin-bottom: 5px;
  }

  .evo_banner-box p {
    font-size: calc(var(--font-size) - 3px);
    line-height: 12px;
  }

  .evo_sub_header {
    font-size: calc(var(--font-size) + 3px);
  }

  .text-white {
    text-shadow: 1px 1px 2px #000000;
  }

  .text-black {
    color: var(--secondary-color) !important;
    font-weight: bold;
  }

}



/* ***************
registration page css
******************/

.field-label {
  display: block;
  margin: 5px 0px;
  color: var(--alternative-color);
}

.text-justify {
  text-align: justify;
}

.pass-validation-success,
.cart-title {
  color: green;
  font-size: calc(var(--font-size) - 3px);
  margin-top: 5px !important;
}

.pass-validation-success:before,
.cart-title::before {
  position: relative;
  content: "✔";
}

.pass-validation-error,
.required {
  color: #c66c6c;
  font-size: calc(var(--font-size) - 3px);
  margin-top: 5px !important;
}

.pass-validation-error:before {
  position: relative;
  content: "✖";
}

.password-toggle-icon {
  float: right;
  margin-top: -28px;
  margin-right: 10px;
  cursor: pointer;
}

.no-number-spinners::-webkit-outer-spin-button,
.no-number-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-group.row.postal-city-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  white-space: nowrap;
}

.no-number-spinners[type="number"] {
  width: 100%;
  -moz-appearance: textfield;
  appearance: textfield;
}

.checkout-container .price-unit-label {
  white-space: nowrap;
}

.input-error-border {
  border: 1px solid #c66c6c !important;
}

.input-error-border-newsletter {
  border: 1px solid #c66c6c !important;
  border-radius: 25px 0px 0px 25px;
}

.error-message {
  display: block;
  position: relative;
  color: #c66c6c;
  font-size: calc(var(--font-size) - 3px);
  ;
}

.error-message-hard {
  display: block;
  position: relative;
  color: #721c24;
  font-size: var(--font-size);
  background-color: #f8d7da;
  border-color: #f5c6cb !important;
  border-radius: var(--border-radius);
  margin-top: 10px;
  padding: 5px 10px;
}

.alert {
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-size: calc(var(--font-size) + 5px);
}

.alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.alert-info {
  background-color: #cce5ff;
  border: 1px solid #b8daff;
  color: #004085;
}

.alert-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
}

.alert-danger {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.server-error-msg {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: var(--font-size);
}

button.close {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
}

.btn-close {
  float: right;
  font-size: calc(var(--font-size) - 5px);
  margin: 3px -13px;
}

.alert-message span {
  font-size: calc(var(--font-size) - 1px);
}

.alert-message p {
  font-size: calc(var(--font-size) - 3px);
  color: #6d6e70;
}

#validate_message p {
  margin-bottom: 5px;
}

::placeholder {
  color: var(--place-holder-color);
}

.register-form,
#loginPage {
  display: block;
  margin-bottom: 30px;
  margin-top: 30px;
}

.password-toggle-icon {
  position: relative;
  left: 8px;
  transform: translateY(-25%);
  padding: 8px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

.evo_page_title {
  font-size: calc(var(--font-size) + 7px);
  font-weight: 300;
  margin-bottom: 20px;
  color: #000000 !important;
  white-space: nowrap;
}

/* .sign-up-form {

} */

.login-form h2,
.sign-up-form h2 {
  color: #696763;
  font-size: calc(var(--font-size) + 5px);
  font-weight: 300;
  margin-bottom: 20px;
}


.sign-up-form input {
  border: medium none;
  color: #696763;
  display: block;
  font-size: var(--font-size);
  font-weight: 300;
  height: 40px;
  margin-bottom: 10px;
  outline: medium none;
  padding-left: 10px;
  width: 100%;
  border: 1px solid var(--border-color);
}

.login-form form span {
  line-height: 25px;
}

.login-form form span input {
  width: 15px;
  float: left;
  height: 15px;
  margin-right: 5px;
}

.login-form form button,
.sign-up-form form button {
  background: var(--primary-color);
  border: medium none;
  border-radius: var(--border-radius);
  color: #FFFFFF;
  display: block;
  padding: 6px 25px;
  margin: 10px 10px 10px 0;
}

.login-form form button {
  margin-top: 20px;
}

/* added */
.login-form form button.col-md-4.guest-signin-btn {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.login-form sub_title {
  padding-bottom: 10px;
}


.login-form label input {
  border: medium none;
  display: inline-block;
  height: 0;
  margin-bottom: 0;
  outline: medium none;
  padding-left: 0;
}


.or {
  background: var(--primary-color);
  border-radius: 40px;
  color: #FFFFFF;
  font-size: var(--font-size);
  height: 50px;
  line-height: 50px;
  margin-top: 75px;
  text-align: center;
  width: 50px;
}


.prod-breadcrumb {
  padding: 5px 10px;
  display: flex;
  flex-direction: row;
  font-size: calc(var(--font-size) - 3px);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prod-breadcrumb li a {
  color: var(--primary-color);
}

.prod-breadcrumb li a:hover {
  text-decoration: underline;
}

.prod-breadcrumb li i {
  font-size: calc(var(--font-size) - 2px);
}

.prod-breadcrumb li {
  float: left;
}

.prod-breadcrumb .separator {
  padding-left: 5px;
  padding-right: 5px;
}

.prod-breadcrumb .separator span {
  color: var(--border-color);
  padding: 0px 5px;
}

.cart-alert {
  border: 1px solid var(--border-color);
  position: fixed;
  width: 400px;
  background: #fff;
  z-index: 1;
  top: 20px;
  /* Start above the viewport */
  padding: 15px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, transform 0.0s, top 0.6s ease-in-out;
  /* Add transition for top */
}

.cart-alert.show {
  opacity: 1;
  /* Fully visible */
  top: 50px;
  /* Move to the desired position */
  visibility: visible;
  right: 16%;
}

.cart-alert__title {
  font-weight: 600;
  display: flex;
  gap: 10px;
}

.field-label.ship-method-label {
  white-space: nowrap;
}

.cart-alert__title span {
  font-size: calc(var(--font-size) + 1px) !important;
  margin: 0 !important;
  font-weight: normal;
}

.cart-alert__content p {
  font-weight: 700;
  margin-bottom: 10px;
}

[v-cloak] {
  display: none !important;
}

.cart-alert__button {
  float: right;
}

.my-profile-nav .dropdown-menu {
  padding: 0px !important;
  border-radius: calc(var(--border-radius) - 5px);
  transform: translate(45px, 33px) !important;
}

.my-profile-nav .dropdown-menu a {
  padding: 15px 20px !important;
  color: var(--secondary-color);
}

.my-profile-nav .dropdown-menu span,
.my-profile-nav .dropdown-menu i {
  color: var(--secondary-color) !important;
}

.my-profile-nav label {
  color: var(--alternative-color);
}

.my-profile-nav .dropdown-menu a:focus,
.my-profile-nav .dropdown-menu a:active {
  background-color: #ededed;
}

.btn-req-quote {
  /* background: var(--secondary-color) !important; */
  /* border: 1px solid; */
  /* padding: 4px 10px 5px 10px; */
  /* font-size: calc(var(--font-size)); */
  /* margin-left: 20px; */
  /* color: #ffffff; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  font-size: calc(var(--font-size) - 2px);

}

/* .gradient-border {
  --border-width: 1px;

  position: relative;

  &::hover {
    position: absolute;
    content: "";
    top: calc(0* var(--border-width));
    left: calc(-1* var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width)* 2);
    height: calc(100% + var(--border-width)* 0);
    background: linear-gradient(60deg, hsl(224, 85%, 66%), hsl(269, 85%, 66%), hsl(314, 85%, 66%), hsl(359, 85%, 66%), hsl(44, 85%, 66%), hsl(89, 85%, 66%), hsl(134, 85%, 66%), hsl(179, 85%, 66%));
    background-size: 300% 300%;
    background-position: 0 50%;
    animation: moveGradient 4s alternate infinite;
    border-radius: 5px;

  }
}  */

.btn-req-quote-back {
  /* padding: 4px 8px 4px 8px; */
  /* border-radius: calc(var(--border-radius) + 3px); */
  background-clip: text;
  animation: hue 5s infinite linear;
  -webkit-background-clip: text;
  -webkit-animation: hue 5s infinite linear;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 25px;
  padding: 8px 10px 8px 10px;
  border: 2px dashed #ddd;
  height: 45px;
  justify-content: center;
  white-space: nowrap;

}

.btn-req-quote-back:hover {
  /* color: #fff;
    -webkit-background-clip: text;
    -webkit-animation: hue 5s infinite linear;
    background: var(--bs-success); */
  border: 1px solid var(--primary-color);
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

.gradient-text {
  background-image: -webkit-linear-gradient(60deg, hsl(224, 85%, 66%), hsl(269, 85%, 66%), hsl(314, 85%, 66%), hsl(359, 85%, 66%), hsl(44, 85%, 66%), hsl(89, 85%, 66%), hsl(134, 85%, 66%), hsl(179, 85%, 66%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 2s infinite linear;
  -webkit-animation: hue 2s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.gradient-text-dark {
  background-image: -webkit-linear-gradient(60deg, hsl(224, 85%, 33%), hsl(269, 85%, 33%), hsl(314, 85%, 33%), hsl(359, 85%, 33%), hsl(44, 85%, 33%), hsl(89, 85%, 33%), hsl(134, 85%, 33%), hsl(179, 85%, 33%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 2s infinite linear;
  animation: hue 2s infinite linear;
}

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

/* .btn-req-quote:hover {
  color: #ffffff;
} */

.postal-code-link {
  /* margin-right: 40px; */
  position: relative;
}

.nav-postal-code {
  display: inline-block;
  margin-top: -5px !important;
}

.nav-postal-code-location {
  color: var(--alternative-color);
  font-size: calc(var(--font-size) - 1px);
  /* text-align: left; */
  /* margin-left: 5px; */
}

.nav-postal-code-location-show {
  display: flex;
  font-size: calc(var(--font-size) - 2px);
  flex-direction: column;
}

.postal-code-head {
  padding-bottom: 10px;
}

.postal-code-msg {
  padding-bottom: 10px;
  max-width: 350px;
  font-size: calc(var(--font-size) - 2px);
}

.postal-code-link:hover .dropdown-menu {
  display: block;
}

.postal-code-input-box {
  border-radius: calc(var(--border-radius) - 5px) calc(var(--border-radius) - 5px) calc(var(--border-radius) + 5px) calc(var(--border-radius) + 5px);
  border: 1px solid var(--border-color);
  /* min-width: 390px;
  margin-left: -110px !important; */
  min-width: 446px;
  margin-left: -227px !important;
  position: fixed !important;
}

.postal-code-input-box .form-control {
  float: left;
  margin-right: 10px;
  width: auto;

}

.login-register .postal-code-msg a {
  text-decoration: none;
  color: var(--primary-color) !important;
}

.tab_button {
  border: None;
  border-radius: calc(var(--border-radius) + 5px) calc(var(--border-radius) + 5px) 0px 0px;
  padding: 10px 20px;
  font-size: 16px;
  margin: 0px 1px -2px 1px;
  background: transparent;
}

.active_tab {
  border-bottom: 2px solid var(--primary-color);
  opacity: 1 !important;
  margin-bottom: 0px;
  font-weight: 700;
  background-color: transparent;
}

.blog-hero-4 {
  padding-top: 4.5rem !important;
  padding-bottom: 7.5rem !important;
}

.blog-hero-5 {
  padding: 150px !important;
}

.banner-hero-5 {
  text-shadow: 2px 2px 2px #000 !important;
  color: #fff !important;
  font-size: 55px !important;
}

.blog-header {
  font-size: calc(var(--font-size) + 5px);
  font-weight: normal !important;
  Line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-title {
  font-size: calc(var(--font-size) + 2px);
}

.blog-sub-title {
  font-size: var(--font-size);
  color: var(--alternative-color);
  margin-bottom: 10px;
}

.blog-g-p {
  width: 60%;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 8px;
  line-height: 1.3;
  color: #374151;
  border: 1px solid var(--border-color);
}

.blog-post-right {
  border-radius: 0.375rem;
}

.blog.btn.btn-primary {
  width: 100%;
}

.blog-bg .card {
  background-color: inherit;
  border-color: var(--border-color);
  margin-bottom: 20px;
}

.blog-tag-area {
  /* padding-top: 0.75rem; */
  padding-bottom: 20px;
}

.blog-tag-btn {
  line-height: 1.5;
  padding: 2px 10px;
  font-size: calc(var(--font-size) - 2px);
  margin-right: 5px;
  margin-top: 2px;
  background: #fff;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.blog-tag-btn:hover {
  background: var(--primary-color);
  color: #FFFFFF !important;
  border: 1px solid var(--primary-color) !important;
}

.blog_author {
  font-size: calc(var(--font-size) - 2px);
}

.blog_date {
  font-size: calc(var(--font-size) - 2px);
}

.blog_badge {
  border-radius: 20px;
  padding: 3px 10px;
  font-size: calc(var(--font-size) - 3px);
}

.blog_badge_soft-orange {
  background: var(--primary-light-color);
  color: var(--primary-color);
}

.blogs {
  background-color: var(--third-color);
}

.blog-bg .secondary-card {
  background-color: #fff;
  height: 620px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 30px;
  background-color: #fff;
}

.blog-tag-btn.active {
  background-color: var(--primary-color);
  color: white !important;
}

.child-container {
  width: 33.33%
}

.clamped-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  /* Change to '2' if you want just 2 lines */
  overflow: hidden;
}

.clamped-text img {
  display: none;
}

.blog-bg .disabled-btn {
  background-color: #e9ecef;
  color: #212529bf !important;
  cursor: not-allowed;
}

.blog-bg .disabled-btn:hover {
  background-color: #e9ecef;
  color: #212529bf !important;
}

.blog-details-section img {
  display: inline !important;
}

.swiper-slide {
  margin-bottom: 20px;
}

.blog-banner-image {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.blog-full-image {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 260px;
}

.blog-full-image .blog-item img {
  width: 450px;
  /* max-height: 250px; */
  background: var(--background-color-2);
}

.blog-bg {
  position: relative;
  overflow: hidden;
}

.slide-next-enter-active,
.slide-next-leave-active {
  transition: transform 0.5s ease-in-out, opacity 0.5s;
}

.slide-next-enter {
  transform: translateX(100%);
  opacity: 0;
}

.slide-next-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.slide-next-leave {
  transform: translateX(0);
  opacity: 1;
}

.slide-next-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-prev-enter-active,
.slide-prev-leave-active {
  transition: transform 0.5s ease-in-out, opacity 0.5s;
}

.slide-prev-enter {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-prev-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.slide-prev-leave {
  transform: translateX(0);
  opacity: 1;
}

.slide-prev-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

@keyframes move-in-next {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(10px);
    opacity: 0;
  }

  41% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes move-out-next {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-10px);
    opacity: 0;
  }

  41% {
    transform: translateX(10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes move-in-prev {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-10px);
    opacity: 0;
  }

  41% {
    transform: translateX(10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes move-out-prev {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(10px);
    opacity: 0;
  }

  41% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.faq-header {
  font-size: calc(var(--font-size) + 5px);
  font-weight: bold;
}

.faq_accordion {
  .faq_accordion-item {
    border-bottom: 1px solid #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;

    button[aria-expanded="true"] {
      border-bottom: 1px solid var(--primary-color);
    }

  }

  button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 10px 0px;
    color: var(--secondary-color);
    font-weight: 400;
    border: none;
    background: none;
    outline: none;

    &:hover,
    &:focus {
      cursor: pointer;
      color: var(--primary-color);
      ;

      &::after {
        cursor: pointer;
        color: var(--primary-color);
        ;
        border: 1px solid var(--primary-color);
        ;
      }
    }

    .faq_accordion-title {
      padding: 10px 15px 10px 0px;
    }

    .icon {
      display: inline-block;
      position: absolute;
      top: 10px;
      right: 0;
      width: 20px;
      height: 20px;
      border: 1px solid;
      border-radius: 22px;
      color: #555;

      &::before {
        display: block;
        position: absolute;
        content: "";
        top: 8px;
        left: 4px;
        width: 10px;
        height: 2px;
        background: currentColor;
      }

      &::after {
        display: block;
        position: absolute;
        content: "";
        top: 4px;
        left: 8px;
        width: 2px;
        height: 10px;
        background: currentColor;
      }
    }
  }

  button[aria-expanded="true"] {
    color: var(--primary-color);
    ;

    .icon {
      &::after {
        width: 0;
      }
    }

    +.faq_accordion-content {
      opacity: 1;
      max-height: 9em;
      transition: all 200ms linear;
      will-change: opacity, max-height;
    }
  }

  .faq_accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 50ms linear, max-height 200ms linear;
    will-change: opacity, max-height;

    p {
      font-size: 1rem;
      font-weight: 300;
      margin: 10px;
    }
  }
}

/* Contact Us */
.hero-4 {
  padding-top: 4.5rem !important;
  padding-bottom: 7.5rem !important;
}

.contact-header {
  font-size: calc(var(--font-size) + 5px);
}

.contact-title {
  font-size: calc(var(--font-size) + 2px);
}

.contact-right {
  border-radius: 0.375rem;
}

.contact-bg .card {
  background-color: inherit;
  border-color: var(--border-color);
  margin-bottom: 20px;
}

.contact-tag-area {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* About Us */
.about-hero-4 {
  padding-top: 4.5rem !important;
  padding-bottom: 7.5rem !important;
}

.about-header {
  font-size: calc(var(--font-size) + 5px);
}

.about-title {
  font-size: calc(var(--font-size) + 2px);
}

.about-sub-title {
  font-size: var(--font-size);
  color: var(--alternative-color);
  margin-bottom: 10px;
}

.about-g-p {
  width: 60%;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 8px;
  line-height: 20px;
  color: #374151;
  border: 1px solid var(--border-color);
}

.about-post-right {
  border-radius: 0.375rem;
}

.about.btn.btn-primary {
  width: 100%;
}

.about-bg .card {
  background-color: inherit;
  border-color: var(--border-color);
  margin-bottom: 20px;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: calc(var(--border-radius) - 5px);
}

.about-tag-area {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.signin-btn {
  margin-left: inherit;
}

.guest-signin-btn {
  margin-left: 12px;
  background: #fff !important;
  color: var(--primary-color) !important;
  border: 1px solid !important;
  padding: 3px 7px !important;
  width: 170px !important;
}

@media (max-width: 1400px) {
  .evo_banner-box {
    max-width: 1140px;
  }
}

@media (max-width: 1200px) {
  .evo_banner-box {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .evo_banner-box {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .evo_banner-box {
    max-width: 540px;
  }
}

@media (max-width: 576px) {
  .evo_banner-box {
    max-width: 100%;
    padding: 0 15px;
  }
}

.ti {
  font-size: calc(var(--font-size) + 2px)
}

.evo-loader {
  display: inline-block;
  margin-left: 10px;
  position: relative;
}

.evo-loader div {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: evo-loader 1.2s infinite ease-in-out;
  margin-right: 5px;
}

.evo-loader div:nth-child(1) {
  animation-delay: -0.24s;
}

.evo-loader div:nth-child(2) {
  animation-delay: -0.12s;
}

.evo-loader div:nth-child(3) {
  animation-delay: 0;
}

@keyframes evo-loader {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown-language-button {
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0px;
  color: white;
  width: 108px;
}

.custom-dropdown-language-button img {
  margin-right: 10px;
}

.custom-dropdown-language-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /* min-width: 150px; */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 100%;
  width: 129px;
  left: 0px;
}

.custom-dropdown-language-content.show {
  display: block;
}

.custom-dropdown-language-content a {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-dropdown-language-content a img {
  margin-right: 10px;
}

.custom-dropdown-language-content a:hover {
  background-color: #f1f1f1;
}

.drp-dwn-icon {
  margin-left: 5px;
  height: 16px;
}

/* evo-analysis section */

.evo-analysis {
  background-color: var(--third-color);
}

.evo-analysis .badge {
  background-color: var(--primary-color) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.evo-analysis h1 {
  color: #1A1F2C;
  font-size: 2.5rem;
}

.evo-analysis .lead {
  font-size: calc(var(--font-size))
}

.evo-analysis .tab-item {
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.evo-analysis .tab-item:hover {
  background-color: rgba(219, 78, 57, 0.05);
}

.evo-analysis .tab-item.active {
  border-left: 4px solid var(--primary-color);
  background-color: rgba(219, 78, 57, 0.1);
}

.evo-analysis .tab-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.evo-analysis .tab-item.active .tab-title {
  color: var(--primary-color);
}

.evo-analysis .tab-description {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.evo-analysis .tab-content-container {
  height: 100%;
  position: relative;
  background-color: white;
}

.evo-analysis .tab-content {
  display: none;
  height: 100%;
  animation: fadeEffect 0.5s;
}

.evo-analysis .tab-content.active {
  display: block;
}

.evo-analysis .tab-image {
  /* width: 100%; */
  height: 100%;
  object-fit: contain;
  aspect-ratio: 16/9;
}

.evo-analysis .btn-analyze-dark {
  background-color: var(--secondary-color);
  border: none;
}

.evo-analysis .btn-analyze-dark:hover {
  background-color: var(--secondary-color) !important;
}

.evo-analysis .progress-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.evo-analysis .progress {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.05);
}

.evo-analysis .progress-bar {
  background-color: var(--primary-color);
  transition: width 0.1s linear;
}

.evo-analysis .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

@keyframes fadeEffect {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .evo-analysis h1 {
    font-size: 2rem;
  }

  .evo-analysis .lead {
    font-size: 1.1rem;
  }

  .evo-analysis .tab-content-container {
    margin-top: 2rem;
  }
}

/* evo-advantages section */
.evo-advantages {
  background-color: var(--third-color);
}

.evo-advantages h1 {
  color: #212529;
  font-size: 2.5rem;
}

.evo-advantages .lead {
  font-size: 1.1rem;
  line-height: 1.6;
}

.evo-advantages .card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evo-advantages .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.evo-advantages .card-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.evo-advantages .icon-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evo-advantages .icon-container i {
  color: white;
  font-size: 1.5rem;
}

.evo-advantages .feature-list {
  padding-left: 1.2rem;
  list-style-type: none;
}

.evo-advantages .feature-list li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.evo-advantages .feature-list li:before {
  content: "•";
  position: absolute;
  left: -15px;
  color: var(--primary-color);
}

.evo-advantages .back-primary {
  background-color: var(--primary-color) !important;
}

.evo-advantages .btn-partner {
  background-color: #374151 !important;
  border-color: #374151 !important;
}

.evo-advantages .btn-partner:hover {
  background-color: #374151;
  border-color: #374151;
}

.evo-advantages .btn-feature-dark {
  padding: 0.75rem 2rem;
  background-color: var(--secondary-color) !important;
}

.evo-advantages .view-all-btn {
  transition: transform 0.3s ease;
}

.evo-advantages .view-all-btn:hover {
  transform: translateX(5px);
}

.evo-advantages .main-cta {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evo-advantages .main-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap: 20px;  */
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  /* background: #fff; */
  /* padding: 10px 0px; */
  border-radius: 8px;
}

.feature-list .benefit-icon {
  width: 45px;
  height: 43px;
  /* border: 2px solid #f15a29; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: #f15a29; */
  font-size: 18px;
}

/* ✅ Make it responsive for smaller screens */
@media (max-width: 768px) {
  .feature-list {
    grid-template-columns: 1fr;
  }
}


/* Media queries for responsive design */
@media (max-width: 992px) {
  .evo-advantages .card {
    margin-bottom: 2rem;
  }

  .evo-advantages h1 {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .evo-advantages h1 {
    font-size: 1.75rem;
  }

  .evo-advantages .lead {
    font-size: 1rem;
  }

  .evo-advantages .feature-list li {
    font-size: 0.95rem;
  }
}

.evo_bottom-header .menu-item {
  display: flex;
  align-items: center;
  padding: 10px;
}

.evo_bottom-header .category-menu {
  padding: 10px 0 10px 0;
  cursor: pointer;
}

.evo_bottom-header .category-menu a:hover {
  background-color: #f9f9f9;
  border-radius: 10px;
}

.evo_bottom-header .icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.evo_bottom-header .icon-wrapper img {
  width: 20px;
}

.evo_bottom-header .box-color {
  background-color: var(--primary-light-color);
}

.evo_bottom-header .category-count {
  font-size: 12px;
  color: var(--alternative-color);
}

.evo-blog-read-more a {
  color: var(--primary-color);
  font-size: var(--font-size);
  line-height: 22px;
  font-weight: 500;
}

.evo-blog-read-more i {
  margin-left: 5px;
  font-size: calc(var(--font-size) - 4px);
  line-height: 15px;
}

.evo-blog-read-more {
  margin-top: 5px;
}

.evo-blog-read-more a:hover {
  color: var(--hero-header-footer-color);
  transition: color 0.3s ease;
}

.blog-bg .swiper-custom-next i,
.blog-bg .swiper-custom-prev i,
.evo-blog-read-more a i {
  display: inline-block;
  position: relative;
  transition: all 0.3s ease, color 0.3s ease;
  transform: translateX(0);
}

@keyframes move-in {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(10px);
    opacity: 0;
  }

  41% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-10px);
    opacity: 0;
  }

  41% {
    transform: translateX(10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.blog-full-img {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}

.blog-full-img .blog-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* border-radius: 4px; */
}

.blog-full-img .blog-item .plus-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-size) + 8px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.blog-full-img .blog-item:hover .plus-icon {
  opacity: 1;
}

.blog-full-img .blog-item:hover .plus-icon:hover {
  background-color: var(--primary-light-color);
  color: var(--primary-color);
}

.blog-full-img .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.blog-full-img .modal.active {
  display: flex;
}

.blog-full-img .modal img {
  max-width: 90%;
  max-height: 90%;
}

.modal .prev,
.modal .next,
.blog-full-img .modal .close {
  position: absolute;
  color: white;
  background: var(--primary-color);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: calc(var(--font-size) - 4px);
}

.blog-full-img .modal .close {
  top: 10px;
  right: 10px;
}


/* categories page */
.category-sidebar {
  border: 1px solid #ddd;
  padding: 10px 15px;
  background: #fff !important;
  border-radius: 8px;
}

.category-tree {
  font-size: 15px;
}

.tree-item {
  margin-bottom: 10px;
  cursor: pointer;
}

.tree-toggle {
  padding: 5px 0;
  font-weight: 500;
  border-radius: 4px;
  color: #222;
}

.tree-toggle:hover,
.arrow-icon:hover {
  color: var(--primary-color);
}

.sub-tree {
  margin-top: 5px;
  font-weight: normal;
  margin-left: 15px;
}

.arrow-icon {
  transition: transform 0.2s ease;
  font-size: 14px;
}

.tree-toggle.active .arrow-icon {
  transform: rotate(90deg);
}

.arrow-icon.rotated {
  transform: rotate(90deg);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  /* padding-top: 10px; */
}

.category-item {
  text-align: left;
  background: #fff;
  padding: 0;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  overflow: hidden;
  /* margin-bottom: 20px; */
  min-height: 285px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.category-item:hover {
  border: 1.5px solid var(--primary-color) !important;
  box-shadow: 0 6px 24px 0 rgba(219, 78, 57, 0.15);
  transform: translateY(-4px) scale(1.01);
}

.category-item img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 0;
  display: block;
  margin-top: 10px;
}

.category-item-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

.category-item-title {
  font-size: 16px;
  font-weight: 400;
  color: #222;
  transition: color 0.2s;
  margin-top: auto;
  margin-bottom: 0 !important;
  word-wrap: break-word;
}

.category-item:hover .category-item-title {
  color: var(--primary-color);
}

.category-item a {
  display: block;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 5px;
}

.category-count {
  font-size: 13px;
  color: #555;
}

.category-grid.tile-view {
  display: block;
}

.category-grid.tile-view .category-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background: #fff;
  min-height: 100%;
}

.category-grid.tile-view .category-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-right: 20px;
  margin-bottom: 0;
}

.category-grid.tile-view .category-item a {
  font-size: 18px;
  margin-bottom: 0;
}

.view-toggle .active {
  color: var(--primary-color);
}

.breadcrumb {
  font-size: calc(var(--font-size) - 3px);
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--border-color);
}

.breadcrumb li i {
  font-size: calc(var(--font-size) - 2px);
}

#tileViewIcon,
#gridViewIcon {
  font-size: 23px;
}

.main-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.category-image-wrapper {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  padding: 0px 15px;
}

.category-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  padding: 0px 15px;
}

.tree-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}


.list-unstyled-v2 {
  line-height: 1.5;
}

.arrow-icon {
  display: inline-block;
  /* margin-left: 6px; */
  padding: 4px;
  transform: rotate(1deg);
  transition: transform 0.2s;
  color: #222;
}

.category-header {
  padding: 7px 0px;
}

.expanded>.category-header .arrow-icon {
  transform: rotate(90deg);
}

.header-title-grid-box {
  display: flex;
  justify-content: space-between;
}

.category-name-ellipsis {
  display: inline-block;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: #222;
}

.tree-label {
  cursor: pointer;
  transition: color 0.3s;
}

.tree-label:hover .category-name {
  color: var(--primary-color);
}

.tree-label:hover .arrow-icon {
  color: var(--primary-color);
}

.toast-container {
  z-index: 1100;
}

.toast {
  min-width: 200px;
  font-size: 0.875rem;
}

.category-active {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

/* 1440x900 */
@media (max-width: 1440px) {
  .cate-aside-col {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .cate-content-col {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .category-name {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }

  .btn.btn-primary.buy-cart {
    font-size: calc(var(--font-size) - 0.18em) !important;
    padding: 0.2em 0.18em !important;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }

  .place-order.buy-cart {
    padding: 8px !important;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
  }

  .login-form form button,
  .sign-up-form form button {
    padding: 0.4em 0.5em;
    margin: 1.1em 0.5em 0.1em 0;
    font-size: 1.001em;
  }

  .place-order-btn .btn-primary {
    font-size: calc(var(--font-size) - 0.13em) !important;
    padding: 7px 15px !important;
    white-space: nowrap;
  }
}

/* 1024x768 */
@media (max-width: 1024px) {
  .evo-top-link {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .evo-top-btn {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .btn.btn-primary.buy-cart {
    font-size: calc(var(--font-size) - 0.18em) !important;
    padding: 0.2em 0.18em !important;
  }

  .login-form .signin-btn {
    flex: 0 0 auto;
    width: 120.333333%;
  }

  .login-form form button,
  .sign-up-form form button {
    padding: 0.5em 0.5em;
    margin: 1.1em 0.5em 0.1em 0;
    font-size: 0.8em;
  }

  .btn-link.buy-cart {
    display: flex;
    white-space: nowrap;
    margin-right: 0.5em;
  }

  .btn-req-quote-back {
    padding: 7px 3px 5px 3px;
  }

  .evo_bottom-header .navbar-expand-lg .navbar-nav .nav-link {
    margin-right: -21px;
  }

  .evo_bottom-header .navbar-expand-lg .navbar-nav .nav-link i {
    padding-right: 0px !important;
  }

  .postal-code-link {
    margin-right: 3px;
  }

  .evo_sign_up_btn {
    margin-left: 8px;
  }
}

/* new css for header and footer */

/* Top Bar */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-bar {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 0;
  font-size: calc(var(--font-size) - 2px);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.top-bar-content-separator {
  height: 20px !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.3);

}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;

}

.top-bar span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.top-bar i {
  font-size: 23px;
}

.user-actions-separator {
  background: var(--border-color);
  height: 15px !important;
  width: 1px !important;
  margin: -3px 5px;
  display: inline-block;
}

.currency-selector select,
.language-selector {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}

.currency-selector select {
  outline: none;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
}

/* Main Header */
.main-header {
  background-color: white;
  /* padding: 10px 0; */
  border-bottom: 1px solid var(--border-color);
}

.header-content {
  display: flex;
  min-height: 80px;
  gap: 35px;
  justify-content: space-around;
  align-items: center;
}


/* Logo Section */
.logo-section {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: space-around;
}

.logo-section img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* Search Sections */
.search-section {
  width: 80%;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 25px;
  padding: 8px 8px 8px 20px;
  border: 1px solid #ddd;
  height: 45px;
}


.upload-btn {
  background: #00bcd4;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.upload-btn:hover {
  background: #00acc1;
  transform: scale(1.05);
}

/* Search Bar Right */
.search-right {
  width: 80%;
  display: flex;
  justify-content: flex-end;
}

.search-bar-main {
  display: flex;
  background: #f5f5f5;
  border-radius: 25px;
  overflow: hidden;
  /* border: 1px solid #ddd; */
  height: 45px;
  width: 78%;
}

.ai-bar-main {
  width: 78%;
}

.search-bar-main input {
  flex: 1;
  padding: 12px 20px;
  border: 1px solid #ddd;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
  border-radius: 25px 0px 0px 25px;
}

.search-bar-main input::placeholder {
  color: #999;
}

.search-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 3px 20px 0px 17px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.3s;
}

.search-btn:hover {
  background: var(--primary-color);
}



.action-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* font-size: 13px; */
  color: #666;
  line-height: 1.5;
  white-space: nowrap;
}

.action-item span:first-child {
  font-weight: 500;
}

.cart-section {
  display: flex;
  gap: 10px;
}

.cart-icon,
.rfq-icon {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-icon i,
.rfq-icon i {
  color: var(--secondary-color);
  font-size: 25px;
}

.cart-count,
.rfq-count {
  position: absolute;
  bottom: 1px;
  right: 0px;
  background: var(--primary-color);
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation Bar */
.main-nav {
  background: white;
  border-top: 1px solid var(--border-color);
  padding: 0;
}

.nav-content {
  display: flex;
  justify-content: center;
  /* Pushes left & right items apart */
  align-items: center;
  /* Vertically centers */
}

.shop-by-department {
  /* width: 35%; */
  /* position: relative;
    display: flex;
    align-items: center;
    gap: 15px; */
  float: left;
  left: 0;
  position: absolute;
}

.header-nav-menu {
  /* flex: 1; takes available space */
  text-align: center;
  /* centers menu inside */
}

/* User Actions */
.user-actions {
  /* flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px; */
  display: flex;
  align-items: center;
  gap: 20px;
  position: absolute;
  right: 0;
  float: right;
}


.department-btn {
  color: var(--primary-color);
  border: none;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.department-btn:hover {
  color: var(--primary-color);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 35px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px 0;
  transition: color 0.3s;
}

.nav-menu a:hover {
  color: var(--primary-color);
}

.nav-menu i {
  font-size: 10px;
  color: #999;
}

/* Hero Section */
.hero-section {
  position: relative;
  /* min-height: 600px; */
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  /* filter: sepia(100%) saturate(200%) hue-rotate(352deg); */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #db4e3982 40%, #DB4E39 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 0;
}

.hero-content .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}

.hero-text {
  /* flex: 1; */
  color: white;
  width: 42%;
}

.hero-text h1 {
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-text p {
  line-height: 1.6;
  margin-bottom: 30px;
  color: #fbfbfb;
}

/* XLS Feature Box */
.xls-feature {
  display: flex;
  align-items: center;
  background: var(--background-color-3);
  border-radius: 10px;
  padding: 20px;
  max-width: 70%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 2px dashed var(--primary-color);
  cursor: pointer;
}

.xls-feature:hover {
  background: #fff;
  transition: 0.3s;
}

.xls-feature .xls-content,
.xls-feature .xls-content p {
  width: 100%;
}


.xls-icon {
  /* background: #4CAF50; */
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.xls-icon span {
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.xls-content {
  flex: 1;
}

.xls-content img {
  height: 30px;
  margin-bottom: 10px;
}

.xls-content p {
  color: #333;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

/* Hero Video */
.hero-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  gap: 3px;
  /* margin-right: 5%; */
}

.video-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 1.5rem;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}

#blogDetails .banner-text {
  font-size: 55px;
}

#blogDetails .banner-text .evo_sub_header {
  font-size: calc(var(--font-size) + 5px);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  border-radius: 1.5rem;
}

/* Show backdrop on hover */
.video-container:hover .video-overlay {
  opacity: 1;
}

/* .video-container img {
    width: 100%;
} */

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.video-container:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: white;
}

.play-btn i {
  font-size: 40px;
  color: var(--primary-color);
  margin-left: 5px;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 20px;
}

.video-title {
  color: white;
  font-size: 12px;
  /* font-weight: 600; */
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  /* width: 47%; */
}

/* Popup Video Overlay */
.video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
  display: none;
}

.video-popup.active {
  display: flex;
}

.video-popup-content {
  position: relative;
  width: 90%;
  max-width: 1280px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  animation: scaleUp 0.3s ease;
}

.video-popup video {
  width: 100%;
  /* height: 80vh; */
  object-fit: contain;
  background: #000;
}

.close-popup {
  position: absolute;
  top: -40px;
  right: -10px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.close-popup:hover {
  transform: scale(1.2);
}

@keyframes scaleUp {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Benefits Section */
.benefits-section {
  background-color: var(--third-color);
  position: relative;
}

.benefits-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  /* margin-bottom: 40px; */
}

.benefits-column {
  flex: 1;
  /* max-width: 520px; */
  text-align: center;
}

.benefits-title {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.benefit-item {
  display: flex;
  align-items: center;
  /* margin-bottom: 10px; */
  /* gap: 15px; */
  justify-content: center;
}

.benefit-icon {
  width: 50px;
  height: 50px;
  /* border: 2px solid #ffb74d; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon i {
  /* color: #ff8a50; */
  font-size: 20px;
}

.benefit-text {
  flex: 0 1 auto;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  text-align: left;
  /* margin-top: 11px; */
}

.benefit-text strong {
  font-weight: 600;
}

.cta-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 15px 35px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s;
}

.cta-button:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
}

/* Middle Benefits */
.middle-benefits {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: -20px;
}

.middle-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* How It Works Section */
/* .how-it-works {
     background: #f8f8f8;
     padding: 60px 0 80px;
} */

.section-title {
  text-align: center;
  color: var(--primary-color);
  font-size: calc(var(--font-size) + 4px);
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.steps-container {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  align-items: flex-start;
  position: relative;
}

/* Step connecting lines */
/* .steps-container::before,
.steps-container::after {
    content: '';
    position: absolute;
    top: 45px;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, #ffb74d 0%, #ff8a50 50%, #ffb74d 100%);
    z-index: 0;
}

.steps-container::before {
    left: calc(33.33% - 60px);
} */

.steps-container::after {
  right: calc(33.33% - 60px);
}

.step-item {
  position: relative;
  z-index: 1;
  background: #fff !important;
  width: 30%;
  padding: 30px;
  min-height: 300px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  box-shadow: 5px 5px 2px #f3f4f6;
  border-radius: 1.5rem;
  border-color: #f3f4f6;
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  margin: 0 auto 25px;
  position: relative;
  box-shadow: 0 5px 20px rgba(255, 87, 34, 0.3);
}

.step-content h3 {
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.step-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Best Sellers Section */
.bestsellers-section {
  background: var(--third-color) !important;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.bestsellers-section {
  /* font-size: 28px; */
  /* font-weight: 600; */
  color: #333;
  margin: 0;
}

.view-all-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
  float: right;
  display: flex;
  align-items: center;
}

.view-all-link:hover {
  color: var(--primary-color);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
}

.product-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  border-color: #f3f4f6 !important;
  box-shadow: 5px 5px 2px #f3f4f6;
}

.product-card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  z-index: 1;
}

.product-image {
  width: 87%;
  height: 165px;
  background: #f5f5f5;
  display: flex;
  margin: 20px 20px 20px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
}

.product-image img {
  /* width: 100%; */
  height: 60%;
  object-fit: cover;
}

.product-info {
  padding: 0px 20px 20px 20px;
}

.product-category {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  color: rgb(102, 102, 102);
  margin-bottom: 8px;
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  height: 35px;
}

.product-title {
  font-size: 14px;
  font-weight: bold;
  color: #0f172a;
  margin-bottom: 0px;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.stars {
  color: #ffa000;
  font-size: 14px;
}

.rating-count {
  font-size: 12px;
  color: #999;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.price-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.price-original {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-vendor {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
}

.product-vendor a {
  color: #2196F3;
  text-decoration: none;
}

.product-vendor a:hover {
  text-decoration: underline;
}

.product-stock {
  font-size: 11px;
  color: #6b7280;
}

.stock-bar {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}

.stock-fill {
  height: 100%;
  background: #ffa000;
  border-radius: 3px;
  transition: width 0.3s;
  width: var(--stock-width, 0%);
}

.stock-text {
  margin: 10px 10px 0px 0px;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 10px;
  line-height: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
}

.stock-sold {
  float: right;
  margin: 0px 0px 0px 0px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 10px;
  line-height: 1rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
}

/* Pagination dots */
.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: var(--primary-color);
}

.dot:hover {
  background: #ff8a50;
}

/* .blog-contents {
  padding: 20px;
} */

/* Responsive Design */
/* @media (min-width: 2700px) {
   .container {
    max-width: 1618px;}
} */
@media (min-width: 1700px) {
  .container {
    max-width: 1635px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .blog-full-image .blog-item img {
    width: 52vw;
  }
}

@media (max-width: 1200px) {
  .header-content {
    grid-template-columns: 130px 1fr auto;
    gap: 0px;
  }


  .hero-content .container {
    flex-direction: column;
  }

  .hero-video {
    flex: 0 0 auto;
    width: 100%;
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  /* .main-header {
        padding: 15px 0;
    } */

  .header-content {
    gap: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .logo-section img {
    height: 40px;
  }


  .user-actions {
    order: 2;
  }

  .action-item {
    display: none;
  }

  .top-bar-content {
    flex-direction: column;
    gap: 10px;
  }

  .top-bar-left,
  .top-bar-right {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-menu {
    display: none;
  }

  .hero-text h1 {
    font-size: 32px;
  }

  .benefits-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .benefits-column {
    text-align: center;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefit-item {
    justify-content: center;
    text-align: left;
  }

  .middle-benefits {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .steps-container {
    flex-direction: column;
    gap: 40px;
  }

  /* .steps-container::before,
    .steps-container::after {
        display: none;
    } */

  .step-item {
    flex: 1 1 auto;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card {
    font-size: 13px;
  }

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

  .price-current {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer Section */
.footer-section {
  background: #f8f8f8;
  margin-top: 60px;
}

/* Newsletter Section */
.newsletter-section {
  background: white;
  padding: 30px 0;
  border-bottom: 1px solid var(--border-color);
}

.newsletter-icon-custom {
  font-size: calc(var(--font-size) + 15px);
  color: var(--primary-color);
}

.newsletter-div {
  display: flex;
  background: #f5f5f5;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid #ddd;
}


.newsletter-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.newsletter-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.newsletter-icon {
  flex-shrink: 0;
}

.newsletter-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.newsletter-text p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.newsletter-form {
  display: flex;
  gap: 0;
  min-width: 400px;
  flex-direction: column;
}

.newsletter-form input {
  flex: 1;
  padding: 12px 20px;
  /* border: 1px solid #ddd; */
  border: none;
  font-size: 14px;
  outline: none;
}

.newsletter-form button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.newsletter-form button:hover {
  background: var(--primary-color);
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  width: 35px;
  height: 35px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s;
}

.social-links a:hover {
  background: var(--primary-color);
  color: white;
}

/* Footer Links */
.footer-links {
  padding: 50px 0;
  background: white;
  border-bottom: 1px solid var(--border-color);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

.footer-column h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: #666;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s;
}

.footer-column ul li a:hover {
  color: var(--primary-color);
}

/* Footer Bottom */
.footer-bottom {
  background: #f8f8f8;
  padding: 40px 0 20px;
}

.footer-bottom-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.contact-item i {
  font-size: 32px;
  color: var(--primary-color);
}

.contact-item p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.contact-item h3 {
  font-weight: 600;
  color: #333;
  margin: 5px 0 0;
  font-size: var(--font-size);
}

.address-info {
  font-size: 12px;
  color: #666;
  line-height: 1.8;
}

.address-info p {
  margin: 5px 0;
}

.app-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.app-item i {
  font-size: 32px;
  color: var(--primary-color);
}

.app-item p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.app-item h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 5px 0 0;
}

.app-buttons {
  display: flex;
  gap: 10px;
}

.app-btn img {
  height: 40px;
  width: auto;
}

.info-links h4,
.help-links h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.info-links ul,
.help-links ul {
  list-style: none;
}

.info-links ul li,
.help-links ul li {
  margin-bottom: 10px;
}

.info-links ul li a,
.help-links ul li a {
  color: #666;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s;
}

.info-links ul li a:hover,
.help-links ul li a:hover {
  color: var(--primary-color);
}

/* Footer Copyright */
.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.copyright-text p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.evo-footer-links a {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.evo-footer-links a:hover {
  color: var(--primary-color);
}

.evo-footer-links a:not(:last-of-type)::after {
  content: "|";
  display: inline-block;
  padding: 0 10px;
  color: #666;
}

.payment-methods {
  display: flex;
  align-items: center;
  gap: 10px;
  /* width: 20%; */
}



.payment-methods span {
  font-size: 13px;
  color: #666;
}

.payment-methods i {
  font-size: 21px;
  width: auto;
}

.header-icon-white {
  color: white;
}

.view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 5px !important;
}

.btn-upload-request,
.btn-become-supplier {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}

/* MOBILE RESPONSIVE -- START */
/* Hide mobile header/drawer by default */
.mobile-header,
.mobile-drawer,
.mobile-search-bar,
.divider-line,
#scrollToTopBtn {
  display: none;
}

/* Show only for mobile sizes (360×800, 390×844, 393×873) */
@media screen and (max-width: 430px) {
  .hero-background {
    width: max-content;
  }

  #scrollToTopBtn {
    display: block !important;
  }

  /* Scroll to top button styling */
  .scroll-to-top-arrow {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 13px 14px;
    border-radius: 50%;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
  }

  .scroll-to-top-arrow.show {
    opacity: 1;
    visibility: visible;
  }

  .scroll-to-top-arrow:hover {
    background: #555;
  }

  .main-header,
  .main-nav {
    display: none !important;
    /* hide desktop header/nav */
  }

  .mo-signin,
  .mo-signup,
  .mo-logout {
    width: 100% !important;
    display: flex;
    justify-content: center;
  }
  .account-sidebar {
    margin-left: 0 !important;
    border-radius: var(--border-radius) !important;
  }

  .account-content {
    padding: 0 10px !important;
    border-radius: var(--border-radius) !important;
    margin-top: 20px;
  }

  .icon-btn {
    position: relative;
    display: inline-block;
  }

  .cart-alert.show {
    opacity: 1;
    /* Fully visible */
    top: 50px;
    /* Move to the desired position */
    visibility: visible;
    right: 16%;
  }

  .icon-btn .cart-count,
  .icon-btn .rfq-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    border-radius: 50%;
    min-width: 14px;
    height: 14px;
    width: 14px;
    line-height: 16px;
    text-align: center;
  }

  .mobile-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 999;
    /* keep above content */
    position: relative;
  }

  .mobile-header-left {
    display: flex;
    align-items: center;
  }

  .hamburger-btn {
    background: none;
    border: none;
    font-size: 24px;
    margin-right: 10px;
  }

  .mobile-logo img {
    height: 25px;
  }

  .mobile-header-right a {
    margin-left: 10px;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  /* Drawer */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
  }

  .mobile-drawer.open {
    left: 0;
  }

  .drawer-header {
    display: flex;
    justify-content: space-between;
  }

  .drawer-header button {
    background: none;
    border: none;
    font-size: 24px;
  }

  .drawer-menu {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .drawer-menu li {
    margin-bottom: 15px;
  }

  .drawer-menu a {
    font-size: 18px;
    text-decoration: none;
    color: #333;
  }

  .drawer-auth {
    margin-top: 15px;
  }

  .drawer-auth a {
    display: block;
    margin: 8px 0;
    text-align: center;
  }

  .drawer-extra a {
    display: block;
    margin: 10px 0;
    display: flex;
    padding: 5px;
    font-size: calc(var(--font-size) - 1px);
  }

  .drawer-extra {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #dfdfdfdf;
    background-color: var(--background-color);
    border-radius: 5px;
  }

  #closeDrawer i {
    color: var(--alternative-color);
  }

  .btn-req-quote-back-mobile {
    margin-bottom: 15px;
    background-clip: text;
    animation: hue 5s infinite linear;
    -webkit-background-clip: text;
    -webkit-animation: hue 5s infinite linear;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 25px;
    padding: 8px 10px 8px 10px;
    border: 2px dashed #ddd;
    height: 40px;
    justify-content: center;
    white-space: pre-line;
  }

  .btn-req-quote-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    font-size: calc(var(--font-size) - 5px);
  }

  /* Adjust header layout */
  .mobile-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1000;
  }

  /* search bar hidden by default */
  .mobile-search-bar {
    position: fixed;
    top: 25px;
    right: 20%;
    width: 73%;
    height: 70px;
    transform: translateY(-50%) translateX(120%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    z-index: 1001;
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .mobile-header.search-open #mobileSearchToggle {
    display: none;
  }

  /* when open → slide into place */
  .mobile-search-bar.open {
    display: flex;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .mobile-search-bar .search-bar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: 25px;
    padding: 4px 10px;
    background: #fff;
  }

  .mobile-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #333;
  }

  .mobile-search-bar input::placeholder {
    color: #888;
  }

  .mobile-search-bar .close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--primary-color);
    cursor: pointer;
    margin-left: 6px;
  }

  /* Hide header icons/logo when search is open */
  .mobile-header.hide-icons #mobileHeaderLeft,
  .mobile-header.hide-icons #mobileHeaderRight {
    display: none;
  }

  .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* dark transparent background */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9998;
    /* Below the drawer, above the page */
  }

  /* When overlay is active */
  .drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .custom-dropdown {
    position: relative;
    display: inline-block;
    border: 1px solid var(--border-color);
    width: 100%;
    margin-top: 15px;
  }

  .custom-dropdown-language-button {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    padding: 4px 8px;
    width: 100%;
    justify-content: space-between;
  }

  .custom-dropdown-language-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    border-radius: 4px;
    min-width: 120px;
    z-index: 1000;
  }

  .custom-dropdown-language-content a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    text-decoration: none;
    color: #333;
  }

  .custom-dropdown-language-content a:hover {
    background: #f3f3f9;
  }

  .lang-label,
  .drp-dwn-icon {
    color: #000;
  }

  /* Footer css */
  .newsletter-div {
    width: fit-content !important;
  }

  .payment-methods {
    width: 100%;
  }

  .evo_footer_2 {
    display: flex;
    flex-direction: column;
  }

  .evo_footer a {
    display: flex;
    justify-content: center;
  }

  .evo_footer img {
    width: 100%;
    object-fit: contain;
  }

  .social-links {
    margin-top: 0px;
  }

  /* keep contact block full width */
  .footer-bottom .footer-contact {
    grid-column: 1 / -1;
    /* span full width */
    margin-bottom: 20px;
  }

  /* turn the remaining blocks into a grid */
  .footer-bottom .footer-bottom-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns */
    gap: 20px;
    text-align: left;
  }

  .footer-bottom .footer-bottom-content>div {
    margin: 0;
  }

  .footer-bottom .footer-bottom-content h4 {
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .footer-bottom .footer-bottom-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-bottom .footer-bottom-content ul li {
    margin-bottom: 6px;
  }

  .footer-bottom .footer-bottom-content ul li a {
    text-decoration: none;
    color: #333;
    font-size: 13px;
  }

  .footer-bottom .footer-bottom-content ul li a:hover {
    text-decoration: underline;
  }

  .evo_footer_2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .divider-line {
    display: block;
    border-bottom: 1px solid var(--border-color);
    padding: 5px;
  }

  .footer-bottom-content {
    margin-bottom: 15px;
  }

  .extra-div-mobile {
    display: none;
  }

  .browse-category {
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    text-align: center;
    padding: 10px;
  }

  .browse-category i {
    color: var(--primary-color);
  }

  .mobile-user-dropdown {
    position: relative;
    display: inline-block;
  }

  .mobile-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 2000;
  }

  .mobile-user-menu.open {
    display: block;
    animation: dropdownFade 0.2s ease-in-out;
  }

  .mobile-user-menu .user-info {
    padding: 12px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }

  .mobile-user-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-user-menu ul li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
  }

  .mobile-user-menu ul li a:hover {
    background: #f8f8f8;
  }

  .mobile-user-menu i {
    margin-right: 8px;
    font-size: 16px;
    color: #666;
  }



  @keyframes dropdownFade {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* MOBILE RESPONSIVE -- END */

/* Responsive Footer */
@media (max-width: 1200px) {
  .footer-columns {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-bottom-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .newsletter-content {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-left {
    flex-direction: column;
  }

  .newsletter-form {
    min-width: 100%;
    max-width: 400px;
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-copyright {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .contact-item,
  .app-item {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-links {
    justify-content: center;
    margin-top: 20px;
  }
}

.login-user-info {
  color: var(--secondary-color) !important
}

/* Under construction page CSS start here*/

.evo-construction {
  background-color: var(--third-color);
  line-height: 1.5 !important;
  text-align: center;
}

.evo-const-container {
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px R15px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 960px;
  /* Increased max-width for 3 columns */
  width: 90%;
  border-top: 5px solid var(--primary-color);
}

.evo-const-h1 {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.evo-const-p {
  line-height: 1.7;
  margin-bottom: 20px;
  color: var(--secondary-color);
}

.evo-const-coming-soon-text {
  font-weight: 600;
  color: var(--secondary-color);
  margin-top: 20px;
}

.evo-const-coming-soon-secondary {
  color: var(--alternative-color);
  margin-top: 20px;
}

/* --- Feature Box Styles --- */
.evo-const-feature-box {
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 30px;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.evo-const-feature-box:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.evo-const-drop-box {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 30px;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.3s ease;
}

.evo-const-drop-box:hover {
  border: 2px dashed var(--primary-color);
  transition: all 0.3s ease;
}

.evo-const-feature-box h3 {
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
  color: rgb(51, 51, 51);
  margin-bottom: 10px;
}

.evo-const-drop-box h3 {
  font-size: calc(var(--font-size) + 2px);
  font-weight: 600;
  color: rgb(51, 51, 51);
  margin-bottom: 10px;
}

.evo-const-feature-box p {
  font-size: calc(var(--font-size) - 2px);
  color: rgb(102, 102, 102);
  margin-bottom: 10px;
}

.evo-const-drop-box p {
  font-size: calc(var(--font-size) - 2px);
  color: rgb(102, 102, 102);
  margin-bottom: 10px;
}

.evo-const-feature-box.drop-zone {
  cursor: pointer;
  border: 1px dashed var(--primary-color)
}

.evo-const-feature-box.drop-zone:hover {
  border-color: var(--primary-color);
  background-color: #fff;
}

.evo-const-drop-zone-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.evo-const-contact-info {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.evo-const-contact-info p {
  margin-bottom: 8px;
}


#analyzeDropZone.drag-over {
  border-radius: 25px;
  border: 1px solid var(--primary-color);
}

.contact-section {
  /* font-size: 28px; */
  /* font-weight: 600; */
  background: var(--third-color) !important;
  color: #333;
  margin: 0;
}

.contactsection-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  /* margin-bottom: 40px; */
}

.contact-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  position: relative;
}

.contact-card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-image {
  width: 100%;
  /* height: 150px; */
  /* background: #f5f5f5; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.contact-image img {
  /* width: 50%; */
  /* height: 100%;
    object-fit: cover;
    border-radius: 58%; */
  width: 45%;
  height: 100%;
  object-fit: cover;
  background: #ededed;
  background-color: #ddd;
  border: solid 5px #000;
  border-bottom-color: #000;
  border-left-color: #000;
  border-radius: 7px;
  border-right-color: #000;
  border-top-color: #000;
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 25%) inset, 0 5px 10px 5px rgb(0 0 0 / 25%);
  box-sizing: border-box;
  display: inline-block;
  margin: 1vh 5vw;
  padding: 6px 3px;
  position: relative;
  text-align: center;
}

.contact-info {
  padding: 15px;
}

.p_top_25 {
  padding-top: 25px;
}

.p_top_10 {
  padding-top: 10px;
}

.p_top_5 {
  padding-top: 5px;
}

.card_about_us {
  height: -webkit-fill-available
}

/* Under construction page CSS Ends here*/


.btn-outline {
  border: 1px solid var(--primary-color) !important;
  background: white !important;
  color: var(--primary-color) !important;
  transition: all 0.2s ease;
}

/* .paid_field {
  color: #28a745;
  background: #fbfbfb;
  border-radius: 5px;
  font-size: 12px;
  border: 1px solid #ededed;
  font-weight: bold;
  width: 100%;
  display: flex;
  padding: 2px 10px 2px 10px;
  align-items: center;
  justify-content: center;
  gap: 3px;
} */

.paid_field {
  color: #155724;
  /* background: #d4edda; */
  background: transparent;
  border-radius: 25px;
  font-size: 10px;
  border: 1px solid #c3e6cb;
  font-weight: normal;
  width: 100%;
  display: flex;
  padding: 0px 7px 0px 5px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
}

.unpaid_field {
  color: #721c24;
  /* background: #f8d7da; */
  background: transparent;
  border-radius: 25px;
  font-size: 10px;
  border: 1px solid #f5c6cb;
  font-weight: normal;
  width: 100%;
  display: flex;
  padding: 0px 7px 0px 5px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
}

/* .track_order_paid_field {
  color: #28a745;
  margin: -4px 10px 0px 7px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  padding: 2px 10px 2px 10px;
  align-items: center;
  justify-content: center;
  gap: 3px;
} */

.track_order_paid_field {
  color: #155724;
  /* background: #d4edda; */
  background: transparent;
  border-radius: 25px;
  font-size: 10px;
  border: 1px solid #c3e6cb;
  font-weight: normal;
  display: flex;
  padding: 0px 7px 0px 5px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.track_order_unpaid_field {
  color: #721c24;
  /* background: #f8d7da; */
  background: transparent;
  border-radius: 25px;
  font-size: 10px;
  border: 1px solid #f5c6cb;
  font-weight: normal;
  /* width: 100%; */
  display: flex;
  padding: 0px 7px 0px 5px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}


/* Under construction page CSS Ends here*/

.discount-badge {
  margin-left: 6px;
  background-color: #f0fdf4;
  color: #16a34a !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.track-order-col {
  align-content: center;
  display: flex;
  /* gap: 16%; */
  justify-content: space-between;
  /* width: 14% !important; */
  align-items: center;
}

/* Modal footer buttons - responsive layout */
#globalConfirmationModal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  padding: 1rem;
}

#globalConfirmationModal .modal-footer button {
  white-space: nowrap;
  font-size: 13px;
  padding: 5px 10px;
}

/* Partners Section */
.partners-section {
  background-color: #fff;
}

.partners-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.partners-text {
  flex: 1;
  min-width: 300px;
}

.partners-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.partners-description {
  font-size: 16px;
  color: var(--alternative-color);
  line-height: 1.6;
  margin-bottom: 30px;
}

.cta-outline-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid var(--primary-color);
  /* Default teal color from image */
  color: var(--primary-color);
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  transition: all 0.3s ease;
}

.cta-outline-button:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.partners-logos {
  flex: 1;
  min-width: 300px;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.logo-box {
  background-color: var(--third-color);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* filter: grayscale(100%);
  opacity: 0.7;*/
  transition: all 0.3s ease;
}

/* .logo-box:hover {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.logo-box:hover img {
  filter: grayscale(0%);
  opacity: 1;
} */

@media (max-width: 991px) {
  .partners-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .partners-text {
    margin-bottom: 30px;
  }

  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .logo-grid {
    grid-template-columns: 1fr;
  }
}

/* Partners Section Marquee */
.partners-section {
  background-color: #fff;
  overflow: hidden;
}

.partners-marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll 40s linear infinite;
  gap: 20px;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.logo-box {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 200px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* filter: grayscale(100%); */
  /* opacity: 0.7; */
  transition: all 0.3s ease;
}

/* .logo-box:hover {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transform: translateY(-5px);
} */

/* .logo-box:hover img {
  filter: grayscale(0%);
  opacity: 1;
} */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 10px));
  }
}

@media (max-width: 768px) {
  .logo-box {
    width: 150px;
    height: 60px;
    padding: 10px;
  }

  .marquee-track {
    animation-duration: 30s;
  }
}