/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: #444444;
  overflow-x: hidden;
}

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

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

p {
  font-size: 15px;
  margin: 0;
}

li {
  list-style-type: none;
}

a:hover {
  text-decoration: none;
}

ul {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  margin-bottom: 0;
}

hr {
  margin: 0;
}

section {
  padding: 1rem 0;
}

@font-face {
  font-family: titillium-regular;
  src: url(../Fonts/Titillium-Regular.otf);
}

@font-face {
  font-family: titillium-bold;
  src: url(../Fonts/Titillium-Bold.otf);
}

@font-face {
  font-family: poppins-regular;
  src: url(../Fonts/Poppins-Regular.otf);
}

@font-face {
  font-family: roboto;
  src: url(../Fonts/Roboto-Medium.ttf);
}

@font-face {
  font-family: bodoni;
  src: url(../Fonts/BOD_B.TTF);
}

@font-face {
  font-family: popins;
  src: url(../Fonts/tt0308m_.ttf);
}

@font-face {
  font-family: black-throne;
  src: url(../Fonts/Black-throne-r.ttf);
}

/*--------------------------------------------------------------
# Color root
--------------------------------------------------------------*/

:root {
  --primary-color: #2b1e75;
  --secondary-color: #c72828;
  --white-color: #fff;
  --black-color: #000;
  --silver-color: #7e7e7e;
  ---border-silver: #dedede;
  --table-border: #e9e9e9;
  --category-border: #b7b7b7;
}

.heading {
  font-size: var(--heading-font);
  color: var(--primary-color);
  text-transform: uppercase;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/
:root {
  --heading-font: 24px;
  --text-font: 15px;
}

/*--------------------------------------------------------------
# button
--------------------------------------------------------------*/
.white-btn {
  background-color: var(--white-color);
  padding: 6px 6px;
  border: 1px solid var(--secondary-color);
  color: var(--primary-color);
  font-size: var(--text-font);
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: 500;
  justify-content: center;
}

.white-btn:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.yellow-btn {
  background-color: var(--secondary-color);
  padding: 10px 20px;
  color: var(--white-color);
  display: inline-block;
  font-size: var(--text-font);
  text-align: center;
  font-weight: 500;

}

.yellow-btn:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.blue-btn {
  background-color: var(--primary-color);
  padding: 10px 20px;
  color: var(--secondary-color);
  display: inline-block;
  font-size: var(--text-font);
  text-align: center;
  font-weight: 500;
}

.blue-btn:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.view-btn {
  background-color: var(--primary-color);
  padding: 6px 20px;
  color: var(--secondary-color);
  display: inline-block;
  font-size: var(--text-font);
  text-align: center;
  border-radius: 0;
}

.view-btn:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

hr.divider {
  height: 0.2rem;
  max-width: 5rem;
  background-color: var(--secondary-color);
  opacity: 1;
}

.divider {
  height: 0.2rem;
  max-width: 5rem;
  background-color: var(--secondary-color);
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--white-color);
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #106eea;
  border-top-color: #e2eefd;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--primary-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: var(--secondary-color);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--secondary-color);
}

.back-to-top i:hover {
  color: var(--primary-color);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/

@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/

#topbar {
  background: var(--black-color);
  height: 30px;
  font-size: 12px;
  transition: all 0.5s;
  color: var(--white-color);
  padding: 0;
}

#topbar .tobar_contact img {
  margin-right: 8px;
  margin-left: 12px;
}

#topbar .tobar_contact a {
  color: var(--white-color);
}

#topbar .tobar_contact a:hover {
  color: var(--secondary-color);
}

#topbar .social-links i {
  background-color: var(--secondary-color);
  padding: 3px 6px;
  font-size: 10px;
}

#topbar .social-links i:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
}

#topbar .social-links a {
  color: rgba(255, 255, 255, 0.7);
  line-height: 0;
  transition: 0.3s;
  margin-left: 8px;
  color: var(--primary-color);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
  background: var(--primary-color);
  transition: all 0.5s;
  z-index: 997;
  height: 138px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#header .fixed-top {
  height: 138px;
}

#header .navbar__auth img {
  margin-right: 5px;
}

#header .navbar__auth a:hover {
  color: var(--secondary-color);
}

.header_container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#header .left_navbar {
  width: 20%;
}

#header .left_navbar img {
  width: 70%;
}

.center_navbar {
  width: 65%;
}

.right_navbar {
  width: 15%;
}

/*--------------------------------------------------------------
# Middle Navigation Menu
--------------------------------------------------------------*/

.middle__nav .search_box {
  max-width: 810px;
  background: var(--white-color);
  height: 45px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.middle__nav .form-select {
  width: 25%;
  padding: 10px 20px;
  border: none;
}

#header select {
  color: var(--primary-color);
}

.middle__nav .form-select:focus {
  box-shadow: none;
}

.input-group .form-control {
  border-radius: 0;
  font-size: var(--text-font);
  border: none;
  color: var(--primary-color);
  border-left: 1px solid silver;
}

.middle__nav .form-control::placeholder {
  color: var(--primary-color);
}

.middle__nav .dropdown img {
  object-fit: contain;
  margin-right: 5px;
  width: 14px;
  height: 18px;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 32px;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.middle__nav .dropdown .btn {
  font-size: var(--text-font);
  font-weight: 500;
  color: var(--primary-color);
}

#header .input-group-text {
  background-color: var(--secondary-color);
  border: none;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 700;
  color: #FFF;
}

#header .app-download img {
  margin-right: 12px;
}

#header .app-download a {
  color: var(--white-color);
  font-weight: 500;
}

#header .app-download a:hover {
  color: var(--secondary-color);
}

.app-download-modal .modal-content {
  padding: 0 1rem;
}

.app-download-modal .form-control {
  font-size: 14px;
}

.app-download-modal .modal-title {
  color: var(--primary-color);
}

.app-download-modal .modal-body p {
  font-size: 14px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/**
* Desktop Navigation 
*/

.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  gap: 2rem;
}

.navbar li {
  position: relative;
}

.navbar>ul>li {
  white-space: nowrap;
  padding: 10px 0 10px 0px;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--white-color);
  white-space: nowrap;
  transition: 0.3s;
  position: relative;
  font-weight: 500;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar>ul>li>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -13px;
  left: 0;
  background-color: var(--secondary-color);
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
  visibility: visible;
  width: 100%;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: var(--secondary-color);
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-weight: 400;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar__auth i {
  font-size: 20px;
  color: var(--secondary-color);
}

.navbar__auth a {
  color: #000;
  font-weight: 500;
}

.vl {
  border-left: 3px solid var(--white-color);
  height: 17px;
  margin: 0 0.7rem;
}

/**
* Mobile Navigation 
*/

.mobile-nav-toggle {
  color: #222222;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: var(--white-color);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(9, 9, 9, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: var(--white-color);
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #222222;
}

.navbar-mobile>ul>li {
  padding: 0;
}

.navbar-mobile a:hover:before,
.navbar-mobile li:hover>a:before,
.navbar-mobile .active:before {
  visibility: hidden;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #106eea;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: var(--white-color);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #106eea;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
 breadcrumbs
--------------------------------------------------------------*/

#breadcrumbs {
  background-color: #f5f5f5;
  padding: 5px 0;
}

.breadcrumb {
  margin-bottom: 0;
}

#breadcrumbs li {
  font-size: 14px;
  padding-top: 12px;
}

#breadcrumbs li a {
  color: var(--silver-color);
  font-weight: 600;
}

#breadcrumbs .active {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

#hero {
  background-color: #f5f5f5;
}

.hero_container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero_left {
  width: 20%;
}

.hero_center {
  width: 55%;
}

.hero_right {
  width: 25%;
}

#hero .category span {
  float: right;
}

#hero .hero_left i {
  color: var(--primary-color);
}

#hero .prev-arrow:hover {
  background-color: var(--primary-color);
}

#hero .prev-arrow:hover>i {
  color: var(--white-color);
}

#hero .next-arrow:hover {
  background-color: var(--primary-color);
}

#hero .next-arrow:hover>i {
  color: var(--white-color);
}


#hero h2 {
  padding: 1rem;
  margin-bottom: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  background-color: var(--secondary-color);
  color: #FFF;
}

.category_list {
  background-color: var(--white-color);
}

.category_list a {
  font-size: var(--text-font);
  color: var(--black-color);
  font-weight: 500;
  padding: 9px 1rem;
  display: block;
}

#hero .category_list ul {
  height: 373px;
}

.category_list li a:hover {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
  border-right: 4px solid var(--primary-color);
}

.category_list li .active {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
  border-right: 4px solid var(--primary-color);
}

#hero .category_list li {
  border-bottom: 1px solid silver;
}

#hero .category_list .sports {
  border-bottom: 0;
}

.category__heading {
  font-size: 18px;
  font-weight: 800;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

#hero .prev-arrow {
  position: absolute;
  left: 70%;
  top: -10%;
  border-radius: 50%;
  border: none;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero .prev-arrow img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

#hero .next-arrow {
  position: absolute;
  left: 84%;
  top: -10%;
  border-radius: 50%;
  border: none;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero .next-arrow img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* -----Hero Center Image ------ */

#hero .banner {
  background-image: url(../img/homepage/banner/banner.png);
  height: 431px;
  background-repeat: no-repeat;
  background-size: cover;
}

#hero .banner_text {
  padding: 8rem 0rem 0rem 3rem;
}

#hero .banner_text p {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 600;
}

#hero .banner_text h3 {
  font-size: 26px;
  color: var(--primary-color);
  line-height: 1.8rem;
  font-weight: 800;
}

.banner_btn {
  margin-top: 2rem;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 6px 16px;
  font-size: 18px;
}

.banner_btn:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

/* ---Hero Form ---------- */

.hero__form-bg {
  background-color: var(--white-color);
  height: 431px;
}

#hero .hero__form {
  padding: 1rem;
  border-radius: 4px;
}

#hero .hero__form .bi-search {
  position: absolute;
  left: 1rem;
  top: 20%;
  color: var(--silver-color);
}

#hero .hero__form p {
  color: var(--primary-color);
  font-size: 1.4rem;
  text-align: center;
}

.hide {
  display: none;
}

#hero .hero__form h1 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

#hero .form-control,
#download-app-modal .form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: var(--text-font);
  font-weight: 400;
  outline: none;
  line-height: 1.5;
  color: var(--silver-color);
  background-color: #eaeaea;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#hero .input-group-text,
#download-app-modal .input-group-text {
  border-radius: 0;
  background-color: #eaeaea;
  font-size: 15px;

  color: var(--silver-color);
}

.form-control:focus {
  border-color: silver;
  box-shadow: none;
}

.hero__form-button {
  text-align: center;
}

.btn-hero {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 30px;
}

.btn-hero:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.btn-hero:focus {
  box-shadow: none;
}

#hero .hero_quotes img {
  height: 2rem;
}

#hero .hero_quotes_text {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

#hero .hero_quotes span {
  color: var(--secondary-color);
  font-weight: 900;
}

#hero .hero_quotes p {
  font-size: 11px;
  line-height: 10px;
  margin-top: 0;
  text-align: center;
  margin-left: 2px;
  color: #7e7e7e;
  font-weight: 500;
}

#hero .form_success p {
  font-size: 1rem;
  padding: 1rem 0;
}

/*-------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/

/* --------Suppliers------- */

#supliers {
  background-color: #f5f5f5;
}

.supliers_bg {
  background-color: var(--white-color);
  padding: 2rem 0;
}

#supliers h1 {
  padding-left: 2rem;
}

#supliers .divider {
  margin-left: 2rem;
}

#supliers .cities {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  width: 95%;
  margin: 0 auto;
  align-items: center;
}

#supliers .city_image {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f3f6cb;
}

#supliers .city_items {
  padding: 1rem 0;
}

#supliers .city_items img {
  width: 90px;
  height: 75px;
  object-fit: fill;
  padding: 5px;
}

#supliers .city_items:hover {
  color: var(--primary-color);
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari 3-8 */
  transform: scale(1.2);
}

#supliers .city_name p {
  text-align: center;
  padding-top: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-font);
}

/* -------Slick Slider----- */

#supliers .slick-slide {
  text-align: -webkit-center;
  text-align: -moz-center;
}

#supliers .slick-prev {
  width: 70px;
  height: 70px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 24px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

#supliers .slide-arrow i {
  color: var(--primary-color);
}

#supliers .slide-arrow:hover {
  background-color: var(--primary-color);
}

#supliers .slide-arrow:hover>i {
  color: var(--white-color);
}

#supliers .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 67px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 13px 18px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

#supliers .bi-arrow-left {
  font-size: 28px;
}

#supliers .bi-arrow-right {
  font-size: 28px;
}

/* -----------------featured------------- */
#features {
  background-color: #f5f5f5;
}

.top_bar {
  border-top: 5px solid var(--primary-color);
  background-color: var(--white-color);
  padding-right: 2rem;
}

#features .left_box {
  background-color: #f3f6cb;
  padding: 3rem 2rem 9rem 2rem;
  position: relative;
}

#features .left_box .verify {
  height: 3rem;
  position: absolute;
  left: 32px;
  top: 48px;
}

#features .left_box img {
  height: 9rem;
}

#features .rating {
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#features .rating i {
  color: var(--secondary-color);
  margin-right: 3px;
}

#features .image_box {
  padding: 2rem 0;
  text-align: center;
  background-color: var(--white-color);
  border: 1px solid var(--black-color);
}

#features .buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1.5rem 1rem;
}

#features .buttons i {
  font-size: 22px;
  padding-right: 5px;
  color: var(--secondary-color);
}

#features h1 {
  padding-top: 1.5rem;
}

#features h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--black-color);
  padding-top: 1rem;
  text-transform: uppercase;
}

#features .features_product h3 {
  padding: 0;
}

.features_address {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 8px 0;
}

.features_address .red {
  color: red;
}

.features_address img {
  margin-right: 8px;
}

.features_address p {
  font-size: var(--text-font);
  color: var(--black-color);
  gap: 1rem;
}

.features_text p {
  font-size: var(--text-font);
  line-height: 20px;
  padding-bottom: 1rem;
  color: var(--silver-color);
}

#features .features_product h3 {
  font-size: 18px;
  color: var(--black-color);
  text-transform: capitalize;
  font-weight: 500;
  margin-right: 16px;
}

.viewall {
  color: var(--primary-color);
  font-size: 14px;
  text-decoration: underline;
  text-underline-position: under;
  /* margin-left: 18px; */
}

.viewall:hover {
  color: var(--secondary-color);
  text-underline-position: under;
  text-decoration: underline;
}

.item_image {
  margin-bottom: 10px;
  border: 1px solid var(---border-silver);
  overflow: hidden;
}

#features .item img {
  width: auto;
  height: 12rem;
  padding: 1rem 0 1rem 0;
}

#features .item img:hover {
  -ms-transform: scale(1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari 3-8 */
  transform: scale(1.1);
  transition-duration: 1s;
}

#features .items .item_body {
  text-align: center;
}

#features .items .item-title {
  font-size: var(--text-font);
  padding-bottom: 5px;
  color: var(--black-color);
}

#features .items .item-title:hover {
  color: var(--primary-color);
  font-weight: 600;
}

.item-btn {
  border: 1px solid var(--primary-color);
  border-radius: 0px;
  color: var(--primary-color);
}

.item-btn:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.features-content {
  padding: 2rem 2rem 0rem 1rem;
}

/* -----------Service----------- */

#service {
  background-color: #f5f5f5;
}

#service .service_bg {
  background-color: var(--white-color);
  border-top: 5px solid var(--primary-color);
  padding: 0 2rem 2rem 2rem;
}

#service .service_heading img {
  background-color: var(--secondary-color);
  margin-right: 20px;
  width: 120px;
  height: 120px;
  padding: 1rem;
  margin-bottom: 1rem;
  object-fit: contain;
}

#service .service_text p {
  font-size: var(--text-font);
  color: var(--silver-color);
}

#service .service_category {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#service .service_category p {
  color: var(--black-color);
}

#service .service_category span {
  color: var(--primary-color);
  font-weight: 700;
}

#service .cards {
  display: flex;
  padding: 2rem 2rem 1rem 0rem;
  box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 15%);
}

.card_image img {
  width: 110px;
  height: 110px;
  border: 1px solid silver;
  padding: 1.5rem;
  margin-right: 24px;
  margin-left: 1rem;
  margin-bottom: 3rem;
  object-fit: contain;
}

#service .card_image p {
  margin-top: 5rem;
  padding-bottom: 10px;
  background-color: var(--secondary-color);
  padding-left: 2rem;
  padding-top: 10px;
}

#service .card_image span {
  font-weight: 700;
  color: var(--primary-color);
}

#service .cards h5 {
  font-size: 16px;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
  font-weight: 600;
  padding-bottom: 5px;
}

#service .cards h5:hover {
  text-decoration-color: var(--secondary-color);
}

#service .card_text li a {
  font-size: var(--text-font);
  color: var(--black-color);
}

#service .card_text li a:hover {
  font-weight: 600;
  color: var(--primary-color);
}

/* -----------Product----------- */

.product {
  background-color: #f5f5f5;
}

.product_bg {
  background-color: var(--white-color);
  border-top: 5px solid var(--primary-color);
  padding: 0 2rem 2rem 2rem;
}

.product .product_heading img {

  margin-right: 20px;
  width: 144px;
  height: 144px;

  margin-bottom: 1rem;

}

.product .product_text p {
  font-size: var(--text-font);
  color: var(--silver-color);
}

.product .product_category {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.product .cards {
  display: flex;
  padding: 2rem 2rem 0rem 0rem;
  box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 15%);
}

.product .cards h2 {
  font-size: 16px;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
  font-weight: 600;
  padding-bottom: 5px;
}

.product .cards h2:hover {
  text-decoration-color: var(--secondary-color);
}

.product .card_text li a {
  font-size: var(--text-font);
  color: var(--black-color);
}

.product .card_text li a:hover {
  font-weight: 600;
  color: var(--primary-color);
}

.product .product_category span {
  color: var(--primary-color);
  font-weight: 700;
}

.product .card_image p {
  padding-bottom: 10px;
  background-color: var(--secondary-color);
  padding-left: 2rem;
  padding-top: 10px;
  font-weight: 500;
  position: relative;
}

.product .card_image a p:hover {
  font-weight: 700;
  color: var(--primary-color);
}

.product .card_image p::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 79%;
  border-top: 43px solid white;
  border-left: 57px solid var(--secondary-color);
}

/* -----------Footer--------- */

#footer {
  background-image: url(../img/homepage/footer/bg.jpg);
  background-repeat: no-repeat;
  padding-bottom: 0;
}

#footer .footer_dropdown p {
  color: var(--secondary-color);
  font-size: var(--text-font);
  font-weight: 500;
  margin-right: 12px;
}

#footer .form-select {
  width: 33%;
  border-radius: 10px;
  color: var(--primary-color);
  border: none;
}

#footer .form-select:focus {
  box-shadow: none;
}

.footer_desc {
  font-size: var(--text-font);
  color: var(--white-color);
  margin-top: 1rem;
}

.footer_social {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  color: red;
}

.footer_social span:hover {
  color: var(--secondary-color);
}

.footer_social img {
  margin-right: 4px;
}

.footer_follow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.8rem 0;
}

#footer .footer_follow i {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 5px 7px;
}

#footer .footer_follow i:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
}

.app-store-links {
  display: flex;
  gap: 2rem;
}

.app-store-links img {
  height: 3rem;
}

.terms {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

#footer .terms a :hover {
  color: var(--secondary-color);
}

#footer h5 {
  color: var(--secondary-color);
  margin-top: 16px;
  font-size: 18px;
  text-decoration: underline;
  text-underline-position: under;
  margin-bottom: 10px;
}

#footer p {
  color: var(--white-color);
}

#footer a {
  color: var(--white-color);
}

#footer a:hover {
  color: var(--secondary-color);
}


#footer .footer_bottom {
  background-color:var(--black-color);
  padding: 1rem 0;
  height: 50px;
  margin-top: 2rem;
  color: var(--white-color);
}

#footer .footer_bottom p {
  color: var(--white-color);
  font-weight: 700;
}

/* --------------------------------Categories----------------------- */

/* -------Top Seller-------- */

/* -----------------featured------------- */

.categories_banner {
  background-image: url(../img/Categories/image.png);
  height: 431px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#hero .categories_banner .banner_text {
  padding: 4rem 0rem 0rem 3rem;
}

#hero .categories_banner .banner_text p {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 600;
}

#hero .categories_banner .banner_text h2 {
  font-size: 26px;
  color: var(--primary-color);
  line-height: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

#top_seller {
  background-color: #f5f5f5;
}

#top_seller .top_bar {
  border-top: 5px solid var(--primary-color);
  background-color: var(--white-color);
  padding-bottom: 3rem;
}

#top_seller .left_box {
  background-color: #f3f6cb;
  padding: 3rem 2rem 5.3rem 2rem;
  position: relative;
  margin-bottom: 4rem;
}

#top_seller .left_box .verify {
  height: 3rem;
  position: absolute;
  left: 32px;
  top: 48px;
}

#top_seller .left_box img {
  height: 12rem;
}

#top_seller .rating {
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#top_seller .rating i {
  color: var(--secondary-color);
  margin-right: 3px;
}

#top_seller .image_box {
  /* padding: 2rem 0; */
  text-align: center;
  background-color: var(--white-color);
  border: 1px solid var(--black-color);
}

#top_seller .buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1.5rem 1rem;
}

#top_seller .buttons i {
  font-size: 22px;
  padding-right: 5px;
  color: var(--secondary-color);
}

#top_seller h1 {
  padding-top: 1.5rem;
  padding-left: 2rem;
}

#top_seller .top_sellers_card h1 {
  padding: 0;
}

.top_seller-divider {
  margin-left: 2rem;
}

#top_seller .line {
  height: 2px;
  margin: 8px 0;
}

.Seller_divider-top {
  margin: 0;
}

#top_seller h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--black-color);
  padding-top: 1rem;
  text-transform: uppercase;
}

.top_seller_address {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 8px 0;
}

.top_seller_address img {
  margin-right: 8px;
}

.top_seller_address p {
  font-size: var(--text-font);
  color: var(--black-color);
  gap: 1rem;
}

.top_seller_text p {
  font-size: var(--text-font);
  line-height: 20px;
  padding-bottom: 1rem;
  color: var(--silver-color);
}

#top_seller .top_seller_product h3 {
  font-size: 18px;
  color: var(--black-color);
  text-transform: capitalize;
  font-weight: 500;
  padding: 0;
  margin-right: 10px;
}

#top_seller .top_seller_product .items {
  gap: 10px;
}

#top_seller .item_image {
  border: 1px solid var(--silver-color);
  padding: 0 2rem;
  overflow: hidden;
}

#top_seller .item img {
  width: 140px;
  height: 160px;
  object-fit: contain;
  padding: 1rem 0 1rem 0;
}

#top_seller .item img:hover {
  -ms-transform: scale(1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari 3-8 */
  transform: scale(1.1);
}

#top_seller .items .item_body {
  text-align: center;
  margin-top: 12px;
}

#top_seller .items .item-title {
  font-size: var(--text-font);
  padding-bottom: 10px;
  color: var(--black-color);
}

#top_seller .items .item-title:hover {
  color: var(--primary-color);
  font-weight: 600;
}

.top_seller-content {
  padding: 2rem 2rem 0 0;
}

.top_seller-content p .red {
  color: red;
}

#top_seller .seller_left_box {
  margin-bottom: 0rem;
}

.view_all {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
  font-size: 14px;
}

.view_all:hover {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
}

/* ===================================== Explore Product =============================== */

/* ---------------banner----------- */

#explore_product_banner {
  background-color: #f5f5f5;
}

#explore_product_banner img {
  width: 100%;
}

/* --------------Search Cities-------------- */

#search_city {
  background-color: #f5f5f5;
}

.search_city_container {
  background-color: var(--white-color);
  padding: 15px 10px 15px 20px;
}

#search_city .enter_city {
  width: 22%;
}

#search_city .neraby_cities {
  width: 78%;
  padding-right: 25px;
}

#search_city .vl {
  border-left: 1px solid #ced4da;
  height: 36px;
  margin: 0 0.7rem;
}

.enter_city .input-group {
  width: 90%;
  position: relative;
}

.enter_city .input-group i {
  position: absolute;
  left: 6%;
  z-index: 11;
  top: 18%;
  color: #eaeaea;
}

.neraby_cities .cities-left {
  width: 20%;
  padding-right: 30px;
}

.neraby_cities .cities-right {
  width: 80%;
}

.neraby_cities .slick-prev:before,
.slick-next:before {
  color: var(--primary-color);
  opacity: 1;
}

.neraby_cities .slick-prev {
  top: 15px;
}

.neraby_cities .slick-next {
  top: 17px;
}



#search_city .enter_city .form-control {
  border: 2px solid #eaeaea;
  border-radius: 12px;
  padding-left: 2.5rem;
}

#search_city .neraby_cities ul {
  display: flex;
  align-items: center;
  text-align: center;
  /* justify-content: space-around; */
}

#search_city .neraby_cities li .active {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
}

#search_city .neraby_cities a {
  color: var(--black-color);
}

#search_city .neraby_cities a:hover {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
}

/* =------------------Suppiler Location----- */

.supplier_location {
  background-color: var(--white-color);
  padding: 8px 12px;
}

.supplier_location label {
  color: var(--black-color);
  font-weight: 600;
}

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

.form-check-input:focus {
  box-shadow: none;
}

input[type="radio"]:checked+label {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
}

/* -------------Area------------ */

#explore_product .filter_checkboxs .area {
  height: 165px;
  overflow: auto;

}

#explore_product .filter_checkboxs .area::-webkit-scrollbar {
  width: 5px;
}

#explore_product .filter_checkboxs .area::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

#explore_product .filter_checkboxs .area::-moz-scrollbar {
  width: 5px;
}

#explore_product .filter_checkboxs .area::-moz-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* -------------------Brand------------ */

.filter_brand {
  height: 140px;
  overflow: auto;
}

.filter_brand::-webkit-scrollbar {
  width: 5px;
}

.filter_brand::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.filter_brand ::-moz-scrollbar {
  width: 5px;
}

.filter_brand::-moz-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}


/* ---------------Explore Products---------- */

#explore_product {
  background-color: #f5f5f5;
}

#explore_product .explore_product_heading p {
  margin-left: 10px;
  color: var(--silver-color);
  text-transform: lowercase;
  margin-bottom: 8px;
}

.explore_product_dropdown {
  float: right;
}

.explore_product_dropdown .form-select:focus {
  box-shadow: none;
  border: 1px solid #ced4da;
}

.explore_product_dropdown select {
  color: var(--primary-color);
}

#explore_product .explore_product_dropdown .form-select {
  border-radius: 12px;

}

.explore_product_category {
  background-color: var(--white-color);
}

.product_filter_title {
  background-color: var(--primary-color);
  padding: 8px 16px;
  color: var(--white-color);
  font-size: 18px;
}


/* ------------Category----------*/
.cbxTree {
  color: var(--black-color);
  font-weight: 600;
  padding: 8px 21px 8px 12px;
}

.cbxTree>.cbxTree-node {
  padding-left: 0;
}

.cbxTree-txt {
  margin-left: 4px;
}

.cbxTree input[type="checkbox"]:checked+span {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
}

input[type="checkbox"]:checked {
  background-color: var(--white-color);
}

.form-check-input:checked[type=checkbox] {
  background-image: url(../img/explore_service_slicing/tick.png) !important;
}

.cbxTree-node {
  padding-left: 19px;
}

.cbxTree-swicth {
  float: right;
  width: 10px;
  height: 18px;
  font-size: 22px;
  color: var(--primary-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: -8px;

}

.cbxTree-swicth:hover {
  color: var(--primary-color);
}

.cbxTree-swicth:before {
  content: "+";
}

.cbxTree-swicth.open:before {
  content: "-";
}

.cbxTree-swicth~.cbxTree-node {
  display: none;
}

.cbxTree-swicth.open~.cbxTree-node {
  display: block;
}

.form-check-input[type="checkbox"] {
  border-radius: 0;
  border: 2px solid var(---border-silver);
}

.filter_checkboxs .checkbox {
  background-color: var(--white-color);
  padding: 8px 12px;
}

.checkbox label {
  font-weight: 600;
  color: var(--black-color);
}

input[type="checkbox"]:checked+label {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
}

/* ---------------------------Product & Company Details--------------------- */

.product_container {
  padding: 1.5rem 1.5rem;
  background-color: var(--white-color);
}

.product_card {
  box-shadow: 2px 2px 5px 1px #aaa;
}

.product_desc {
  display: flex;
  gap: 10px;
}

.product_image {
  width: 20%;
}

.product_details {
  width: 40%;
  padding: 0 10px;
}

.seller_details {
  width: 40%;
}

.seller_content {
  display: flex;
}

.product_image img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  border: 1px solid var(---border-silver);
  margin-bottom: 8px;
}

.product_image_desc {
  margin-left: 1rem;
}

.product_desc .product_image p {
  color: var(--black-color);
  font-size: var(--text-font);
}

.product_desc .product_image span {
  color: var(--silver-color);
}

.product_title {
  color: var(--primary-color) !important;
  font-size: 18px;
  font-weight: 600;
  margin-top: 1.5rem;
}

.product_details .btn-viewall {
  margin-left: 0;
}

.brochure {
  margin-left: 20px;
}

.product_container li {
  font-size: var(--text-font);
  color: var(--black-color);
}

.product_container li span {
  color: var(--silver-color);
}

.seller_details {
  padding: 0rem 1rem 0 1rem;
  background-color: #f5f5f5;
}

.seller_verfied {
  text-align: center;
}

.seller_verfied img {
  margin-top: 18px;
  width: 34px;
  height: 39px;
  object-fit: contain;
  margin-right: 12px;
}

.product_seller .seller_verfied img {
  margin-top: 0px;
  width: 34px;
  height: 39px;
  object-fit: contain;
  margin-right: 12px;
}

.product_seller .company_name {
  margin-top: 0px;
}

.company_name {
  color: var(--black-color);
  font-weight: 600;
  font-size: 16px;
  margin: 1.1rem 0 0 0rem;
}

.product_card .rating {
  color: var(--secondary-color);
  font-weight: 600;
  gap: 3px;
  display: flex;
  align-items: center;
}

#explore_product .product_card .rating p {
  color: var(--black-color);
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
}

#explore_product .seller_content-left {
  margin-left: 9px;
}

.company_details_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-left: 8px;
}

.company_details_list li .red {
  color: red;
}

.company_details_list span {
  color: var(--silver-color);
}

.company_details img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 21px;
}

.suggestion_product {
  padding: 2rem;
  display: flex;
  margin-top: 5px;
  gap: 1rem;
  box-shadow: 1px -1px 7px -1px #aaa;
}

.suggestion_product_items {
  display: flex;
  gap: 1rem;
}

.suggestion_product_items img {
  height: 4.5rem;
  border: 1px solid var(---border-silver);
}

.suggestion_product_details a {
  font-size: 13px;
  margin-left: 0;
}

.suggestion_product_details p {
  color: var(--black-color);
  font-size: 14px;
}

.suggestion_product_details span {
  font-size: 13px;
  display: block;
  font-weight: 500;
  color: var(--silver-color);
}

/* ----------------=================Pagination===========----------------- */

.explore_pagination {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

.explore_pagination .pagination a {
  color: var(--silver-color);
}

.page-item.active .page-link {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: #dee2e6;
}

.explore_pagination .pagination .page-link:focus {
  box-shadow: none;
}

/* ============================= Explore Dealer============================ */

.top_seller_bg {
  background-color: var(--white-color);
}

#top_seller .explore_product_dealer .left_box {
  padding: 3rem 2rem 6.5rem 2rem;
}

.top_sellers_cards {
  padding: 3rem 3rem;
}

.top_sellers_card {
  box-shadow: 2px 2px 5px 1px #aaa;
}

.top_sellers_cards .seller_details {
  width: 60%;
  background-color: var(--white-color);
}

.top_sellers_cards .deals_in_bg {
  background-color: #f5f5f5;
  padding: 1rem 1rem;
  width: 40%;
}

#top_seller .top_sellers_card .rating {
  padding-top: 0;
  justify-content: unset;
}

.top_sellers_cards .deals_in h6 {
  font-size: var(--text-font);
  text-transform: uppercase;
  color: var(--primary-color);
  font-weight: 500;
}

.top_sellers_cards span {
  color: var(--silver-color);
}

.top_sellers_cards ul {
  margin-left: 10px;
}

.top_sellers_cards .company_details_list {
  margin-left: 15px;
}

.top_sellers_cards .yellow-btn {
  margin-left: 15px;
}

.top_sellers_cards li {
  color: var(--black-color);
}

.top_sellers_cards .viewall {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
  margin-left: 0px;
  text-transform: capitalize;
}

#top_seller .explore_product_dealer .explore_pagination {
  padding: 3rem 0;
  margin: 0;
}

/* ---------- Explore Services--------- */

.photography .product_details {
  width: 38%;
}

.photography .product_image {
  width: 22%;
}

.photography .product_image p {
  font-size: 16px;
  text-align: center;
}

.photography .product_image .product_image_desc {
  margin: 16px 0px 10px 0;
}

.photography .product_image span {
  font-weight: 500;
  color: var(--black-color);
  font-size: 18px;
}

.photography .product_image .viewall {
  margin-left: 8px;
}

.photography .qutoes {
  margin-top: 6rem;
}

.photography .product_image img {
  width: 200px;
  height: 200px;

}

.photography .product_title {
  font-size: 18px;
  margin-bottom: 6px;
}

/* -------------Product Description-------------- */

.product_details h2 {
  font-size: 14px;
}

.product_description {
  background-color: #f5f5f5;
}

.product_description .product_seller_desc_container {
  border: 2px solid var(---border-silver);
  background-color: var(--white-color);
  display: flex;
  width: 100%;
}

.product_description .product_desc_image {
  width: 30%;
  padding: 2rem 0rem 2rem 2rem;
}

.product_smimage a .active {
  border: 2px solid var(--secondary-color) !important;
}

.product_description .product_details {
  width: 40%;
  padding: 2rem;
}

.product_description .product_seller {
  width: 30%;
  border-left: 2px solid var(---border-silver);
}

.product_description .product_main_image {
  text-align: center;

}

.product_description .product_main_image img {
  width: 100%;
  height: 355px;
  border: 1px solid var(---border-silver);
  object-fit: contain;
}


.product_similar_images .product_smimage img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border: 1px solid var(---border-silver);
}

.product_smimage_more a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
  padding: 16px;


}

.product_smimage_more {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product_description .product_title {
  margin-top: 0px;
}

.product_details h1 {
  color: var(--black-color);
  font-size: 18px;
}

.product_details span {
  color: var(--silver-color);
}

.product_description .product_details table td {
  color: var(--black-color);
  font-size: var(--text-font);
  padding: 5px 12px;
}

.product_description .product_details table th {
  color: var(--silver-color);
  font-weight: 400;
  font-size: var(--text-font);
  /* padding: 10px 0; */
}

.Product_image_details {
  display: flex;
  gap: 2rem;
  margin-top: 76px;
}

.brochure img {
  margin-right: 10px;
}

.Product_image_details .brochure .viewall {
  font-size: 14px;
  margin: 0;
}

.product_main_image-btn .Quote_btn {
  padding: 8px 52px;
  display: inline-block;
  margin-top: 1rem;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.product_main_image-btn img {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.Product_image_details .brochure {
  margin-left: 5px;
  margin-top: 1.5rem;
}

.product_description .seller_details {
  width: 100%;
  padding: 2rem 2rem 6rem 2rem;
}

.Quote_btn--change {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.Quote_btn--change:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
}

.product_description .seller_details .company_details p {
  text-align: left;
}

.company_details table th {
  color: var(--silver-color);
  font-weight: 400;
}

.company_details table td {
  color: var(--black-color);
  padding: 5px 5px;
}

.product_description .rating {
  display: flex;
  align-items: center;
  gap: 3px;
}

.product_description .rating p {
  margin-left: 5px;
  font-size: 13px;
}

.product_description .rating i {
  color: var(--secondary-color);
}

.product_description .seller_details .company_details li {
  color: var(--black-color);
}

.product_description .seller_details .viewall {
  font-size: 14px;
  font-weight: 500;
  margin-left: 0;
}

.similar_product {
  background-color: #f5f5f5;
}

.similar_product_bg {
  background-color: var(--white-color);
  padding: 2rem 0;
}

.similar_product h1 {
  padding-left: 2rem;
}

.similar_product .divider {
  margin-left: 2rem;
}

.similar_product .similar_products_cards {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 2.5rem 3rem;
  align-items: center;
  background-color: var(--white-color);
}

.similar_product .similar_item_card {
  /* padding:2rem 1rem; */
  box-shadow: 2px 2px 5px 1px #aaa;
}

.similar_product .similar_products_details {
  text-align: center;
  /* padding-bottom: 2rem; */
}

.similar_product .similar_products_details h3 {
  color: var(--primary-color);
  font-size: var(--text-font);
  font-weight: 600;
}

.similar_products_card_image {
  text-align: -webkit-center;
  text-align: -moz-center;
  padding: 1rem
}

.similar_product .similar_products_details p {
  font-size: var(--text-font);
  color: var(--black-color);
  font-weight: 500;
}

.similar_products_card_image img {
  width: 232px;
  height: 186px;
  object-fit: contain;
}

.similar_item_card {
  margin: 1rem;
}

.similar_product .similar_products_details span {
  font-size: 14px;
  display: block;
  color: var(--silver-color);
}

.similar_product .similar_products_details .viewall {
  margin-left: 0;
}

.similar_product .similar_products_details .item-btn {
  margin-top: 7px;
}

.sproduct_company_detail .sproduct_company_name {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sproduct_company_detail .sproduct_company_name img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 10px;
}

.sproduct_company_detail {
  background-color: #f5f5f5;
  padding: 1.5rem 0;
  margin-top: 1rem;
}

.sproduct_company_detail .sproduct_company_address {
  display: flex;
  margin-top: 7px;
  justify-content: center;
  align-items: center;
}

.sproduct_company_detail .sproduct_company_address img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  margin-right: 6px;
}

.sproduct_company_detail .sproduct_company_address p {
  color: var(--silver-color);
  font-weight: 500;
}

/* ==================-------------- Model ----------============= */

.modal {
  overflow-y: hidden;
}

.modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

.modal-header .heading {
  font-size: 18px;
}

.modal-body {
  padding: 1rem 1rem 3rem 1rem;
}

.modal-content {
  padding: 0 2rem;
  border-radius: 0;
}

/*USE CSS for Modal Slider*/

#modal_slider .vehicle-detail-banner .car-slider-desc {
  max-width: 180px;
  margin: 0 auto;
}

.banner-slider .slider.slider-for {
  max-width: 84%;
  padding-right: 35px;
}

.banner-slider .slider.slider-nav {
  max-width: 16%;
}

#modal_slider .banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
  width: 100%;
  float: left;
}

#modal_slider .slider-banner-image {
  height: 610px;
}

#modal_slider .slider-nav .slick-slide.thumbnail-image .thumbImg {
  max-width: 178px;
  height: 116px;
  margin: 0 auto;
  border: 2px solid #EBEBEB;
}

#modal_slider .slick-vertical .slick-slide:active,
.slick-vertical .slick-slide:focus,
.slick-arrow:hover,
.slick-arrow:focus {
  border: 0;
  outline: 0;
}

#modal_slider .slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg {
  border: 2px solid var(--secondary-color);
}

#modal_slider .slider-nav .slick-slide.slick-current span {
  color: #196DB6;
}

.slider-nav .slick-slide {
  text-align: center;
}

#modal_slider .slider-nav .slick-slide span {
  font-size: 14px;
  display: block;
  padding: 5px 0 15px;
}

#modal_slider .slick-arrow {
  width: 100%;
  background-color: transparent;
  border: 0;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  height: 18px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 99;
}

#modal_slider .slick-prev {
  top: 0;
}

#modal_slider .slick-next {
  bottom: 0;
  background-color: #fff;
}

#modal_slider .slick-prev.slick-arrow {
  background-image: url(../images/black-up-arrow.png);
}

#modal_slider .slick-next.slick-arrow {
  background-image: url(../images/black-down-arrow.png);
}

/*End USE CSS for Modal Slider*/

.slider-for {
  width: 75%;
  width: 500px;
  height: 500px;
  object-fit: contain;
  border: 1px solid var(---border-silver);
}

.slider-banner-image img {
  width: 100% !important;
  height: 500px;
  padding: 2rem;
  object-fit: contain;
}

.slider-nav {
  width: 20%;
}

.banner-slider {
  display: flex;
  gap: 10px;
}

.thumbnail-image {
  margin-bottom: 10px;
}

#modal_slider .banner-slider .slider-nav .slick-list {
  /* overflow-y: scroll; */
  height: 500px;
  scrollbar-width: normal;
  scrollbar-color: red green;
}

#modal_slider .banner-slider .slider-nav .slick-list {
  height: 100px;
}

#modal_slider .slider-nav .slick-list::-webkit-scrollbar-thumb {
  background-color: green;
  height: 200px;
}

#modal_slider .slider-nav .slick-list::-webkit-scrollbar-track {
  background-color: red;
}

.thumbImg img {
  width: 100%;
  height: 110px;
  object-fit: contain;
}

/* -------Product Page Slick Slider----- */

.similar_product .slick-slide {
  text-align: -webkit-center;
  text-align: -moz-center;
}

.similar_product .prev-arrow {
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 13px 18px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
  position: absolute;
  left: 2%;
  z-index: 1;
}

.similar_product .pslider i {
  color: var(--primary-color);
}

.similar_product .slick-arrow:hover {
  background-color: var(--primary-color);
}

.similar_product .slick-arrow:hover>i {
  color: var(--white-color);
}

.similar_product .next-arrow {
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 13px 18px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
  position: absolute;
  left: 93%;
}

.similar_product .bi-arrow-left {
  font-size: 28px;
}

.similar_product .bi-arrow-right {
  font-size: 28px;
}

/* ---------------Product & Company Profile----------- */

.product_company_details {
  background-color: #f5f5f5;
}

.product_company_details .nav-link {
  font-size: 18px;
  color: var(--silver-color);
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 600;
  padding: 20px 35px 20px 20px;
  font-weight: 700;
}

.product_company_details .nav-link.active {
  border-top: 3px solid var(--primary-color);
  color: var(--primary-color);
}

.product_full_details {
  background-color: var(--white-color);
}

.product_company_details .tab-content {
  background-color: var(--white-color);
}

.product_full_details {
  padding: 2rem 3rem 0 3rem;
}

.product_full_details h2 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--black-color);
}

.product_spec {
  padding: 2rem 1rem 1rem 1rem;
}

.product_full_details span {
  color: var(--primary-color);
  font-weight: 500;
  font-size: var(--text-font);
}

.product_full_details p {
  color: var(--black-color);
  font-weight: 500;
  font-size: var(--text-font);
}

.Product_spec_line {
  margin: 2rem 0 1rem 0;
}

.tab-content {
  padding-bottom: 2rem;
}

/* =========================Company Profile====================== */

.company_profile {
  padding: 3rem;
}

.profile_left_box {
  width: 23%;
}

.profile_right_box {
  width: 77%;
}

.company_profile .brochure {
  float: right;
  margin-top: 1rem;
  gap: 2rem;
}

.company_profile .company_logo img {
  width: 248px;
  height: 248px;
  object-fit: contain;
}

.profile_verify_logo {
  width: 6%;
}

.cprofile_details {
  width: 94%;
}

.company_profile .rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.company_profile .company_name {
  margin-top: 1rem;
  color: var(--primary-color);
  font-size: 18px;
}

.company_profile .cprofile_details i {
  color: var(--secondary-color);
}

.company_profile .cprofile_details p {
  margin-left: 5px;
  color: var(--black-color);
}

.company_location .location {
  display: flex;
  align-items: center;
  margin: 12px 0;
}

.company_location img {
  margin-right: 6px;
  width: 12px;
  height: 16px;
  object-fit: contain;
}

.company_location p {
  color: var(--black-color);
  font-size: var(--text-font);
}

.cprofile_category {
  padding: 3rem 0;
}

.cprofile_category .cprofile_category_desc p a {
  text-decoration: underline;
  text-underline-position: under;
  color: var(--primary-color);
}

.cprofile_category_image {
  background-color: #f3f6cb;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  margin-right: 16px;
}

.cprofile_category_image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.cprofile_center {
  display: flex;
  align-items: center;
}

.cprofile_category .cprofile_center span {
  color: var(--silver-color);
  font-weight: 500;
}

.cprofile_category .cprofile_center .red {
  color: #FF0000;
}

.company_details table td .red {
  color: #FF0000;
}

.cprofile_category .cprofile_center p {
  color: var(--primary-color);
  font-weight: 500;
}

.cprofile_slider {
  /* display: flex; */
  gap: 10px;
  align-items: center;
  margin: 1rem 3rem 0 3rem;
}

.cprofile_slider_image img {
  width: 265px;
  height: 265px;
  border-radius: 12px;
}

.cprofile_slider_video iframe {
  width: 265px;
  height: 265px;
  border-radius: 12px;
}

/* -------Company profile Page Slick Slider----- */

.cprofile_slider .slick-slide {
  text-align: -webkit-center;
  text-align: -moz-center;
}

.cprofile_slider .prev-arrow {
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 13px 18px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
  position: absolute;
  left: -6%;
  top: 100px;
  z-index: 1;
}

.cprofile_slider .next-arrow {
  background-color: #fff;
  border-radius: 50%;
  border: none;
  padding: 13px 18px !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
  position: absolute;
  left: 100%;
  top: 100px;
}

.cprofile_slider .bi-arrow-left {
  font-size: 28px;
}

.company_profile .cprofile_slider i {
  color: var(--primary-color);
}

.company_profile .cprofile_slider .slick-arrow:hover {
  background-color: var(--primary-color);
}

.company_profile .cprofile_slider .slick-arrow:hover>i {
  color: var(--white-color);
}

.cprofile_slider .bi-arrow-right {
  font-size: 28px;
}

/* -------------------Service Description------------ */

.photography_desc .seller_details {
  padding: 2rem 2rem 4rem 2rem;
}

.nav-link .active .product_details span {
  margin-left: 0px;
}

.product_details label {
  font-weight: 500;
}

.photography_desc .Quote_btn {
  margin-top: 9.6rem;
  display: block;
}

.photography_desc .brochure {
  margin-top: 17rem;
}

.price_chart {
  background-color: #f5f5f5;
}

.price_chart_desc {
  background-color: var(--white-color);
  padding: 2rem 3rem 4rem 3rem;
}

.price_chart_desc span {
  color: var(--black-color);
  font-weight: 500;
  font-size: var(--text-font);
}

.price_chart_desc p {
  color: var(--primary-color);
  font-weight: 500;
  font-size: var(--text-font);
}

.service_notes ul {
  padding: 2rem 1rem 4rem 1rem;
}

.service_notes li i {
  font-size: 12px;
  color: var(--secondary-color);
  margin-right: 1rem;
}

.service_notes li {
  margin-top: 1rem;
  display: flex;
}

.service_notes li p {
  font-weight: 400;
}

.service_slider .similar_products_card_image {
  padding: 0;
  padding-bottom: 1rem;
}

.service_slider .similar_products_card_image img {
  width: 268px;
  height: 186px;
  object-fit: contain;
}

/* ------------================== Microsite================----------------- */
.microsite_company {
  background-color: #f5f5f5;
}

.microsite_bg {
  padding: 1rem;
  background-color: var(--white-color);
}

.microsite_company_logo {
  border: 1px solid var(---border-silver);
}

.microsite_company_logo img {
  width: 189px;
  height: 189px;
  padding: 10px;
  object-fit: contain;
}

.microsite_company_banner img {
  width: 100%;
  height: 12rem;
}

.microsite__cdetails {
  margin-top: 3rem;
  padding: 0 12px;
  display: flex;
  /* justify-content: space-between; */
}

.microsite_cdetails_verify img {
  margin-right: 21px;
  height: 5rem;
}

.microsite__cdetails_right {
  border: 2px solid var(---border-silver);
  background-color: #f5f5f5;
}

.microsite_info_left {
  margin-top: 6px;
}

.microsite_info_left h1 {
  color: var(--primary-color);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 10px;
}

.microsite-head-btn a {
  float: right;
  width: 60%;
  margin-top: 1rem;
  padding: 12px 20px;
}

.microsite__cdetails ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 12px;
}

.microsite__cdetails li span {
  color: var(--silver-color);
}

.microsite__cdetails li img {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.microsite__cdetails .rating i {
  color: var(--secondary-color);
}

.microsite__cdetails .rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.microsite__cdetails .rating p {
  margin-left: 8px;
}

.microsite__cdetails li {
  color: var(--black-color);
}

.explore_product_dropdown .form-select {
  border-radius: 10px;
  width: 250px;
}

.microsite_product #ProductJSTree {
  border: 3px solid var(--category-border);
  border-top: none;
}

.microsite_product .similar_products_cards_left {
  flex-direction: column;
  padding: 0;
}

.microsite_items {
  padding: 2rem 3rem 2rem 3rem;
}

.microsite_items .similar_product .similar_products_cards {
  padding: 0;
  margin-top: 1.5rem;
}

.microsite_product .similar_products_card_image {
  padding: 1rem 0;
}

.microsite_product .similar_products_card_image img {
  width: 268px;
  height: 186px;
}

.microsite_items h1 {
  margin-right: 8px;
}

.microsite_cprofile_contact {
  margin-top: 5rem;
}

.microsite_contact_details {
  margin-top: 3rem;
  box-shadow: 2px 2px 5px 1px #aaa;
  padding: 2rem;
}

.microsite_cprofile_contact h2 {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 600;
}

.cprofile_contact_icon img {
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.microsite_cprofile_details {
  font-size: var(--text-font);
  color: var(--black-color);
}

.microsite_cprofile_details img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.microsite_social_links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.microsite_social_links i {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 4px 6px;
  font-size: 14px;

}

.microsite__cprofile {
  padding: 3rem 3rem 10rem 3rem;
}

.microsite-yellow-btn {
  padding: 10px 48px;
  margin-top: 2rem;
}

.microsite-blue-btn {
  padding: 10px 48px;
  margin-top: 2rem;
}

.eye_view_btn {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 8px;
}

.eye_btn {
  padding: 8px 16px;
  border: 2px solid var(--secondary-color);
  border-radius: 8px;
  font-size: var(--text-font);
  text-align: center;
  font-weight: 500;
  color: var(--primary-color);
  width: 100%;
}

.eye_btn i {
  color: var(--secondary-color);
  margin-right: 4px;
}

.share_btn {
  padding: 4px 16px;
  border: 2px solid var(--secondary-color);
  border-radius: 8px;
  font-size: var(--text-font);
  text-align: center;
  font-weight: 500;
  color: var(--primary-color);
}

.share_btn i {
  color: var(--secondary-color);
  margin-right: 10px;
}

.microsite_brochure {
  margin-top: 16px;
  text-align: center;
}

.microsite_brochure img {
  width: 90px;
  object-fit: contain;
  height: 90px;
  border: 1px solid var(--table-border);
  padding: 1rem 1rem;
  background-color: var(--white-color);
}

.microsite_cprofile_details .viewall {
  margin-left: 0;
}

.microsite__cdetails_right .brochure {
  margin: 0;
  margin: 1rem 0;
}

.microsite__cdetails_right .viewall {
  color: var(--primary-color);
  font-size: 16px;
  text-decoration: underline;
  text-underline-position: under;
}

/* -------------- Reviews-------------- */

/* ------------------ Review ----------------- */
.review-left-box {
  background-color: var(--secondary-color);
  padding: 18px;
  border-radius: 46px;
  margin-right: 10px;
}

.review-rate {
  padding: 1rem 3rem !important;
}

.review .review-left-box h3 {
  font-size: 2rem !important;
  color: var(--primary-color) !important;
}

.review .review-left-box i {
  font-size: 1.5rem !important;
  color: var(--primary-color);
  margin-left: 10px;
}

.review-rate p {
  font-size: 21px;
}

.review-rate .progress-bar {
  background-color: var(--secondary-color);
}

.review-vertical .vl {
  border-left: 1px solid var(--silver-color);
  height: 150px;
}

.review {
  margin-bottom: 6rem;
  padding: 4rem 3rem;
}

.micro-heading {
  font-size: 24px;
  color: var(--primary-color);
}

.review form {
  margin-top: 2rem;
}

hr.divider {
  margin-top: 4px;
}

.review .container-box {
  box-shadow: 2px 2px 5px 1px #aaa;
}

.popover-m {
  width: 450px !important;
  max-width: 320px !important;
}

.popover {
  width: 450px;
  max-width: 320px;
}

.popover-review {
  cursor: pointer;
}

.review .form-select,
.review .form-select:focus {
  border-radius: 6px;
  background-color: #f5f5f5;
  border: none;
  color: var(--black-color);
  padding: 1rem;
  box-shadow: none;
}

.review .form-control {
  border-radius: 6px;
  background-color: #f5f5f5;
  border: none;
  color: var(--black-color);
  padding: 1rem;
}

.review-top p {
  font-size: 1rem;
}

.review .form-control::placeholder {
  color: var(--black-color);
}

.m-rating {
  background-color: #f5f5f5;
  padding: 10px 16px;
  margin-bottom: 7px;
}

.popover-review {
  cursor: pointer;
}

.m-rating ul li {
  font-size: 1rem;
  color: var(--black-color);
  list-style: none;
}

.m-rating .pull-right {
  float: right;
}

.m-rating ul .star-icon {
  cursor: pointer;
  color: rgb(165, 165, 165);
}

.rating-bg-yellow {
  background-color: var(--secondary-color);
  padding: 5px 10px;
  border-radius: 20px;
  margin: 0 1rem;
  color: var(--primary-color);
  font-weight: 600;
}

.review .yellow-btn {
  border-radius: 6px;
  width: 140px;
}

.review .container-box {
  padding: 3rem 4rem;
}

.review .container-box h2 {
  font-style: italic;
  margin-top: 1rem;
  font-size: 21px;
}

.review .container-box h3 span {
  color: #2495c2;

}

.review .container-box h3 {
  color: var(--black-color);
  font-size: 14px;
}

.user-rating {
  display: flex;
  gap: 5px;
}

.user-rating li {
  font-size: 1rem;
}

.user-rating li i {
  color: var(--secondary-color);
}

.user-name {
  margin-left: 10px;
}

.user-name p {
  font-weight: 600;
}

.user-name a {
  color: #2495c2;
}

.user-name a:hover {
  text-decoration: underline;
  text-underline-position: under;
  margin-right: 5px;
}

.review-image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.like-dislike {
  gap: 10px;
}

.like-dislike span i {
  color: var(--primary-color);
  margin-right: 10px;
  font-size: 21px;
}

.change-icon>.bi+.bi,
.change-icon:hover>.bi {
  display: none;
}

.change-icon:hover>.bi+.bi {
  display: inherit;
}

/* -------------------Microsite Services-------------- */
.microsite__cprofile .profile_left_box {
  width: 23%;
}

.microsite__cprofile .profile_right_box {
  width: 77%;
}

.microsite__cprofile .company_logo img {
  width: 257px;
  height: 223px;
  object-fit: contain;
}

.similar_products_cards_left .similar_products_card_image {
  padding: 0 0 1rem 0;
}

.microsite_service .similar_products_card_image img {
  width: 274px !important;
  height: 190px !important;
}

.micro_service_cards .similar_products_card_image {
  padding: 0 0 1rem 0;
}

.microsite_cprofile_contact .microsite_contact_details h2 {
  margin-bottom: 10px;
}

.microsite_cprofile_contact .explore_product_dropdown .form-select {
  border: 1px solid var(--primary-color);
  border-radius: 6px;
}

.microsite_map iframe {
  width: 350px;
  height: 300px;
}

/* ------------------Login------------------ */
.login-page {
  padding: 0;
  display: flex;
  position: relative;
}

.login_left {
  width: 50%;
  background-color: var(--primary-color);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right_side {
  width: 50%;
}

.gotohome {
  position: absolute;
  right: 2%;
  color: var(--primary-color);
}

.gotohome i {
  color: var(--primary-color);
  margin-right: 10px;
}

.gotohome a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-position: under;
}

.login_left img {
  width: 80%;
  height: 100vh;
}

.login_right {
  width: 100%;
  padding: 5rem 8rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner_center {
  width: 100%;
}

.gotohome {
  margin-top: 12px;
}

.login_right h3 {
  font-size: 1.9rem;
  color: var(--primary-color);
  font-weight: 600;
}

.login_right span {
  color: #9fb108;
}

.login_right p {
  font-size: 22px;
  color: var(--black-color);
}

.login_right .form-control {
  color: var(--black-color);
  padding: 12px 18px;
  border-radius: 10px;
  border: 2px solid var(---border-silver);

}

.login_right .form-control::placeholder {
  color: var(--black-color);
}

.login_form {
  margin-top: 2.7rem;
}

.login_forgot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2.5rem 0 1.5rem 0;
}

.login_right .login_input {
  margin-top: 2rem;
}

.login_right .login_input h6 {
  margin-bottom: 1rem;
  font-size: 18px;
  color: var(--black-color);
}

.login_right .yellow-btn {
  border: none;
  padding: 10px 64px;
  border-radius: 12px;
  font-size: 18px;
}

.login_forgot a {
  color: var(--black-color);
  text-decoration: underline;
  text-underline-position: under;
  font-size: 18px;
}

.login_buttons {
  display: flex;
  align-items: center;
}

.login_buttons span {
  margin-left: 2rem;
  color: var(--silver-color);
}


/* -------------------Login Otp-------------------- */

.login_right .otp_input input {
  width: 15%;
  border: none;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: 200;
  border: 2px solid var(---border-silver);
  margin: 0 2px;
  border-radius: 10px;
}

.login_right .otp_input {
  margin-top: 2rem;
}

.login_right .login-otp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login_right .otp_input input:focus {
  outline: none;
  border: 2px solid var(--primary-color);
}

.login_forgot span {
  color: #3988c5;
  font-size: 18px;
  margin-left: 1rem;
}

.login_otp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login_otp h6 {
  font-size: 18px;
  color: var(--black-color);
}

.login_otp a {
  color: #3988c5;
  text-decoration: underline;
  text-underline-position: under;
}

.login_form .login_input {
  margin-top: 21px;
}

/* -----------------Forgot Password--------- */

.login_form .login_forgot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0 1.5rem 0;
}

.forget_password .login_buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

.forget_password .login_right {
  padding: 15rem 8rem;
}

.forget_password .login_register_btn {
  display: flex;
  align-items: center;
}

.forget_password .login_register_btn a {
  color: #3988c5;
  text-decoration: underline;
  text-underline-position: under;
}

.forget_password .register_btn {
  text-decoration: underline;
  text-underline-position: under;
}

.forget_password .login_register_btn span {
  margin: 0 0.5rem;
  color: #3988c5;
}

/* ---------------Register------------- */

.register_btn {
  color: #3988c5;
}

.register .login_right {
  padding: 4.5rem 8rem;
}

.register .form-check a {
  color: #3988c5;
}

.register .login_form {
  margin-top: 2rem;
}

.register .form-check-input[type="checkbox"] {
  padding: 9px;
  border-color: var(---border-silver);
  margin-right: 10px;
}

.register .form-check-input {
  border: 2px solid var(---border-silver);
}

.register input[type="checkbox"]:checked+label {
  text-decoration: none;
}

/* ----------------------Select Categories-------------- */

.select_categories {
  background-color: #f5f5f5;
  padding: 1.5rem 0;
}

.select_categories .category_card {
  background-color: #fafafa;
  padding: 32px 16px;
  margin: 10px;
}

.select_categories .category_card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.select_categories .category_card h2 {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  margin: 1rem 0;
}

.select_categories .category_card p {
  font-size: var(--text-font);
  margin-bottom: 1rem;
}

.select_categories .category_card p {
  color: var(--black-color);
  display: -webkit-box;
  /* max-width: 200px; */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.select_categories .active {
  background-color: var(--white-color);
  border: 2px solid var(--primary-color);
}

.select_categories .category_card:hover {
  border: 2px solid var(--primary-color);
  padding: 30px 14px;
  background-color: var(--white-color);
  cursor: pointer;
}

/* ---------- Get Quote modal ----------- */
.get-qoute-modal .modal-header h1 {
  font-size: 24px;
  color: var(--primary-color);
}

.get-qoute-modal .modal-body {
  padding: 1rem 1rem 1rem 1rem;
}

.get-qoute-modal .modal-body p {
  font-size: 16px;
}

.get-qoute-modal .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.get-qoute-modal .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #e9ecef;
  color: var(--silver-color);
}

.get-qoute-modal .modal-footer .btn-wrapper {
  float: right;
  gap: 1rem;
}

.get-qoute-modal .modal-footer .btn-grey {
  background-color: #e9ecef;
  color: var(--primary-color);
  border: none;
}

.get-qoute-modal .modal-footer .view-btn {
  border: none;
}

.get-qoute-modal .modal-header img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 10px;
}

.get-qoute-modal .modal-body #disabledTextInput {
  cursor: not-allowed;
}

/* ---------- Seller Contact Modal ---------- */
.seller-btn {
  border: none
}

/* ---------- About------ */


.about-breadcrumbs .breadcrumb {
  margin-bottom: 10px;
}

.about {
  padding: 0;
  position: relative;
}

.about-nav .nav {
  justify-content: center;
  background-color: #E2F1F8;
  padding: 1rem 0;
}

.about-nav .nav-tabs {
  border: none;
}

.about-nav .nav-tabs .nav-link {
  margin-right: 5rem;
  color: #004B83;
  font-weight: 500;
  position: relative;
}

.about-nav .nav-tabs .nav-link::before {
  content: '';
  position: absolute;
  background-image: url(../img/about-us/arrow.png);
  background-repeat: no-repeat;
  height: 10px;
  width: 100px;
  left: 0;
  margin-left: -12px;
  top: 50%;
  margin-top: -6px;
}

.about-nav .nav-tabs .nav-link.active {
  border: solid 3px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(180deg, #FB9C7A, #D150C1);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset;
  color: #004B83;
  border-radius: 12px;
}

.about-nav .nav-tabs .nav-link.active::before {
  background-image: none;
}

/* ---------- Leadership Tab------------ */

.leadership {
  background-image: url(../img/about-us/leadership.jpg);
  background-repeat: no-repeat;
  padding: 13rem 0;
  background-size: cover;
}

.leadership_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
}

.leadership_content h1 {
  font-size: 50px;
  font-family: titillium-regular;
  color: black;
}

.leadership_content h1 span {
  color: #2893C6;
  font-weight: 600;
}

.leadership_content p {
  font-size: 18px;
  color: var(--black-color);
}

.about-nav .tab-content {
  margin: 0;
}

.founders-content {
  padding: 6rem 0;
}

.founders-content .items {
  gap: 5rem;
}

.founders-content img {
  margin-bottom: 3rem;
  width: 450px;
  height: 450px;
  object-fit: contain;
}

.founders_details {
  padding-left: 2rem;
}

.founders_details h2 {
  font-size: 36px;
  color: #2893C6;
  font-family: titillium-bold;
}

.founders_details h3 {
  font-size: 24px;
  margin-bottom: 24px;
  color: var(--black-color);
  font-family: titillium-regular;
  font-weight: 600;
}

.founders_details p {
  font-size: 18px;
  color: var(--black-color);
  font-family: titillium-regular;
  text-align: justify;
}

/* --------------- Philoshophy ---------- */

.philosophy-item {
  background-image: url(../img/about-us/Concept.jpg);
  background-repeat: no-repeat;
  background-color: #F5F5F5;
  padding: 21rem 0 11rem 0;
  background-size: cover;
}

.philosophy-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.philosophy-text h1 {
  font-size: 48px;
  margin-bottom: 24px;
  font-family: titillium-regular;
  color: black;
}

.philosophy-text h1 span {
  color: #AE412E;
  font-weight: 700;
}

.philosophy-text p {
  font-size: 18px;
  font-family: poppins-regular;
  color: black;
}

.innovate {
  background-image: url(../img/about-us/Innovate.jpg);
  background-color: var(--white-color);
}

.innovate .philosophy-text h1 span {
  color: #7967AC;
}

.sustenance {
  background-image: url(../img/about-us/sustence.jpg);
}

.sustenance .philosophy-text h1 span {
  color: #EE4F3B;
}

.expansion {
  background-image: url(../img/about-us/expension.jpg);
  background-color: var(--white-color);
}

.expansion .philosophy-text h1 span {
  color: #2893C6;
}

.integrate {
  background-image: url(../img/about-us/Integrate.jpg);
}

.integrate .philosophy-text h1 span {
  color: #7663AD;
}

/* --------- Vanture ------------ */

.venture-bg {
  background-image: url(../img/about-us/skoodos-school.png);
  padding: 10rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #F5F5F5;
}

.venture-content hr {
  width: 80%;
  height: 2px;
  color: var(--secondary-color);
  opacity: 1;
  margin: 2rem 0;
}

.venture-content img {
  width: 50%;
}

.venture-content h2 {
  font-size: 36px;
  color: var(--white-color);
  font-family: roboto;
}

.venture-content h3 {
  font-size: 50px;
  color: var(--secondary-color);
  margin-bottom: 24px;
  font-family: roboto;
}

.venture-content p {
  font-size: 18px;
  color: var(--white-color);
  font-family: poppins-regular;
}

.venture-bg .btn {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  margin: 2rem 0;
  padding: 8px 0;
  width: 160px;
  font-size: 18px;
  border-radius: 8px;
  display: inline-block;
}

.venture-bg .btn:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
}

.selin-bg {
  background-image: url(../img/about-us/selin.jpg);
  padding: 24rem 0 13rem 0;
}

.venture-bg .btn-visit-selin {
  background-color: #C8A244;
  color: var(--white-color);
}

.selin-bg .venture-content{
  margin-top: 8rem;
}

.venture-bg .btn-visit-selin:hover {
  color: #C8A244;
}

.selin-bg p {
  width: 40%;
  margin: auto;
  padding: 2rem 0;
  font-family: poppins-regular;
}

.bridge {
  background-image: url(../img/about-us/bridge-bg.png);
  padding: 15rem 0;
}

.bridge h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-family: popins;
  font-weight: 500;
}

.bridge h2 span {
  font-weight: 700;
}

.bridge p {
  color: var(--primary-color);
  font-family: poppins-regular;
}

.bridge .btn-bridge {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.bridge .btn-bridge:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.venture-bg-silver {
  background-color: #F5F5F5;
}

/* ------------ Careers ------------- */

.careers-hero {
  background-image: url(../img/about-us/career-growth.jpg);
  padding: 22rem 0 13rem 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #F5F5F5;
}

.careers-content h2 {
  font-size: 50px;
  font-family: titillium-regular;
  color: black;
}

.careers-content h2 span {
  color: #2893C6;
  font-weight: 600;
}

.careers-content p {
  font-size: 18px;
  font-family: poppins-regular;
  color: black;
}

.career-features {
  padding: 6rem 0;
}

.career-features-img img {
  width: 320px;
  height: 295px;
  object-fit: contain;
  padding: 0 1rem;
  margin-bottom: 1rem;
}

.career-features-content h2 {
  font-size: 24px;
  margin-bottom: 1rem;
  color: #2893C6;
  font-family: titillium-regular;
  font-weight: 600;
}

.career-features-content p {
  font-size: 18px;
  font-family: poppins-regular;
  color: var(--black-color);
}

.career-slider {
  background-color: #F5F5F5;
  padding: 5rem 0;
}

.career-slider h2 {
  font-size: 50px;
  text-align: center;
  margin-bottom: 2rem;
  font-family: titillium-regular;
}

.career-slider h2 span {
  color: #2893C6;
  font-weight: 700;
}

.career-slider .item img {
  width: 100%;
}

.career-slider .item {
  margin: 1rem;
}

.career-slider .slick-dots li button {
  border: 1px solid #218FDA;
  background-color: transparent;
  border-radius: 50%;
}

.career-slider .slick-dots li.slick-active button {
  background: linear-gradient(0deg, rgba(209, 80, 193, 1) 23%, rgba(232, 87, 145, 1) 50%, rgba(251, 156, 122, 1) 75%);
  border: none;
}

.career-slider .slick-dots li button:before {
  font-size: 0px;
}

.career-slider .next-arrow {
  position: absolute;
  right: 0;
  border: 1px solid #218FDA;
  top: 50%;
  margin-top: -35px;
}

.career-slider .prev-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  border: 1px solid #218FDA;
  margin-top: -35px;
}

.career-slider .slick-arrow {
  padding: 16px 8px;
  border: 1px solid #218FDA;
  border-radius: 6px;
}

.career-slider .slick-arrow:hover {
  padding: 16px 8px;
  border-radius: 6px;
}

.career-slider .bi-arrow-right::before {
  color: #218FDA;
}

.career-slider .bi-arrow-left::before {
  color: #218FDA;
}

.slick-next:before {}

.career-roles {
  padding: 5rem 0;
}

.career-roles h2 {
  font-size: 32px;
  margin-bottom: 24px;
  font-family: titillium-regular;
  color: var(--black-color);
}

.career-roles h2 span {
  color: #218FDA;
  font-family: titillium-regular;
  font-weight: 600;
}

.latest-featured h3 {
  font-size: 20px;
  color: var(--black-color);
  font-family: titillium-regular;
  font-weight: 600;
}

.latest-featured p {
  font-size: 16px;
  color: var(--black-color);
  font-family: titillium-regular;
}

.latest-featured {
  width: 100%;
  height: 210px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  padding-left: 1rem;
  border: 1px solid #218FDA;
  margin-bottom: 2rem;
}

.latest-featured span {
  position: absolute;
  top: 10px;
  right: 20px;
  background: linear-gradient(0deg, rgba(209, 80, 193, 1) 23%, rgba(232, 87, 145, 1) 50%, rgba(251, 156, 122, 1) 75%);
  border-radius: 8px;
  padding: 4px 6px;
  color: var(--white-color);
}

.latest-featured.active {
  background-color: #E9F8FF;
}

.latest-featured:hover {
  background-color: #E9F8FF;
}

.slide {
  margin: 1rem;
}

.career-roles .slick-dots li button {
  border: 1px solid #218FDA;
  background-color: transparent;
  border-radius: 50%;
}

.career-roles .slick-dots li.slick-active button {
  background: linear-gradient(0deg, rgba(209, 80, 193, 1) 23%, rgba(232, 87, 145, 1) 50%, rgba(251, 156, 122, 1) 75%);
  border: none;
}

.career-roles .slick-dots li button:before {
  font-size: 0px;
}

.job-application {
  position: relative;
}

.about-hide {
  overflow-x: hidden;
}

.job-bg {
  padding: 4rem 1rem 6rem 5rem;
}

.job-application::before {
  content: '';
  position: absolute;
  background-color: #D5ECF6;
  width: 1000px;
  height: 100%;

  z-index: -1;
  border-top: 16px solid #2893C6;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.job-application h2 {
  font-size: 50px;
  font-family: titillium-regular;
}

.job-application p {
  font-size: 18px;
  margin: 1rem 0 2rem 0;
  font-family: titillium-regular;
  color: var(--black-color);
}

.job-application .form-control {
  border: none;
  padding: 14px 16px;
}

.job-application .form-control::placeholder {
  color: var(--black-color);
}

.job-application .form-select {
  width: 100%;
  background-color: var(--white-color);
  color: var(--black-color);
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
}

.job-application .form-select:focus {
  box-shadow: none;
}

.custom-file-button input[type="file"]::file-selector-button {
  display: none;
}

.custom-file-button input[type="file"] {
  margin-left: -2px !important;
}

.custom-file-button input[type="file"]::-webkit-file-upload-button {
  display: none;
}

.job-application .input-group-text {
  background-color: #2893C6;
  color: var(--white-color);
}

.job-application .input-group-text {
  position: relative;
}

.job-application .input-group-text::before {
  content: '';
  background-image: url(../img/about-us/upload-arrow.png);
  background-repeat: no-repeat;
  width: 12px;
  object-fit: contain;
  height: 15px;
  position: absolute;
  left: 10px;
}

.job-application .input-group-text {
  padding: 14px 14px 14px 32px;
  border: none;
}


/* ------- Contact Us --------- */
.contact {
  background-color: #F5F5F5;
  padding: 5rem 0 8rem 0;
}

.contact .contact-loc iframe {
  border: 16px solid var(--white-color);
  width: 100%;
  border-radius: 12px;
  height: 430px;
}

.contact-hero {
  padding: 0;
}

.contact h2 {
  color: var(--primary-color);
  font-size: 36px;
  font-weight: 700;
}

.contact hr {
  opacity: 1;
  margin: 10px 0 32px 0;
  height: 1px;
  color: var(--primary-color);
}

.contact-links a {
  display: block;
  color: var(--black-color);
}

.contact h3 {
  margin: 10px 0;
  color: var(--primary-color);
  font-size: 24px;
}

.contact p {
  font-size: 18px;
  color: var(--black-color);
}

.contact-links a i {
  margin-right: 10px;
  color: var(--secondary-color);
}

.contact .dropdown {
  width: 100%;
}

.contact .form-select {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ACACAC;
  border: 1px solid #ACACAC;
  background-color: #F9F9F9;
  border-radius: 12px;
  padding: 14px 16px;
}

.contact .form-select:focus {
  box-shadow: none;
}

.contact .form-control {
  background-color: #F9F9F9;
  border: 1px solid #ACACAC;
  border-radius: 12px;
  padding: 14px 16px;
}

.contact .form-control::placeholder {
  color: #ACACAC;
  opacity: 1;
}

.contact .btn-check:focus+.btn,
.btn:focus {
  box-shadow: none;
}

.contact .yellow-btn {
  width: 130px;
}

/* -------- Faq---------- */
.faq-bg{
  background-image: url(../img/faq/faq-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 11rem 0 16rem 0;
}

.faq-bg h1{
  font-size: 50px;
  color: var(--primary-color);
  font-weight: 400;
}
.faq-bg h1 span{
  color: var(--primary-color);
  font-weight: 700;
}

.faq h2 {
  font-size: 36px;
  margin-bottom: 24px;
  color: var(--primary-color);
}

.faq .accordian-btn-bg {
  background-color: #e2e2e2;
  padding: 4rem 1em;
  border-radius: 12px;
}

.faq {
  background-color: #F5F5F5;
  padding: 4rem 0;
}

.faq .accordion {
  margin-bottom: 4rem;
}

.faq .accordion-item {
  margin-bottom: 25px;
  border-radius: 16px;
  border: none;
}

.faq .accordion-button:focus,
.accordion-button:active,
.accordion-button.active,
.accordion-button:focus:active {
  box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
  color: #000;
  background-color: var(--white-color);
  box-shadow: none;
}

.faq .accordion-button::after {
  order: 1;
  margin-left: auto;
  margin-right: 0.5em;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-color: white;
  width: 12px;
  height: 12px;
  background-size: 12px;
}

.faq .accordion-button:not(.collapsed)::after {
  order: 1;
  margin-left: auto;
  margin-right: 0.5em;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-color: white;
}

.accordion-button {
  padding: 1.5rem 1.25rem !important;
  border-radius: 12px !important;
}

/* -------- Profile Modal ------- */

.profile-content label {
  display: block;
}

#get-profile-modal h3 {
  font-size: 18px;
  padding: 32px 0 10px 0;
  color: var(--primary-color);
}

/* ============================= List Your Business============================ */

.list_business_hero {
  background-color: #004b84;
  position: relative;
  height: 506px;

}

.list_business_hero .bg-hero {
  text-align: center;
  color: #004b84;
  justify-content: center;

}

.list_business_hero .bg-hero h1 {
  letter-spacing: 1px;
  margin-top: 4rem;
  font-size: 36px;
}

.list_business_hero .bg-hero span {
  font-weight: 800;
  color: #004b84;
}

.list-business-form p {
  font-size: 18px;
}

.list-business-form .yellow-btn:hover {
  background-color: var(--white-color);
  color: var(--primary-color);

}

.list_business_hero .background {
  background: url(../img/list-your-business/list-business-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  width: 57%;
  top: 0;
  height: 506px;
}

.list-business-form {
  padding: 38px 0px 20px 65px;
  color: var(--white-color);

}

.listing-bg {
  background-image: url(../img/list-your-business/img.png);
  background-repeat: no-repeat;
  padding: 20rem 0 20rem 10rem;
  background-size: cover;
  background-color: #E4E4E4;
}

.listing-highlight-one {
  background-image: url(../img/list-your-business/instance-access.png);
  background-size: cover;
}

.listing-highlight-two {
  background-image: url(../img/list-your-business/categories.png);
  padding: 19rem 10rem 19rem 0rem;
}

.listing-highlight-three {
  background-image: url(../img/list-your-business/img.png);
  padding: 17rem 0 17rem 10rem;
}

.listing-highlight-four {
  background-image: url(../img/list-your-business/img-2.png);
  padding: 18rem 10rem 19rem 0rem;
}

.listing-highlight-five {
  background-image: url(../img/list-your-business/img-3.png);
  padding: 18rem 0 19rem 10rem;
}

.listing-bg-content h2 {
  font-size: 42px;
  color: var(--primary-color);
}

.listing-bg-content p {
  font-size: 18px;
  color: var(--black-color);
}

/* ========================= List Your Business End===================== */