:root {
  --main-color: #c6a15e;
  --second-color: #0c1427;
}
hr {
  color: #ddd;
}
.dark-btn {
  direction: rtl;
  /* position: absolute; */
  z-index: 100;
  background-color: #fff;
  width: 4rem;
  height: 2rem;
  top: 10%;
  left: 5%;
  border-radius: 5rem;
  box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1),
    inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dark-btn .btn-indecator {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.sidebar-folded .dark-btn .btn-indecator {
  transform: translateX(-2rem);
}

.dark-btn .btn-indecator .btn-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-btn .btn-indecator .btn-container .btn-icon {
  font-size: 0.9rem;
  color: #ffcc00;
}

.dark-btn .btn-indecator .btn-container .btn-icon.spin {
  animation: spin 0.5s;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.navbar-nav .login {
  background-color: var(--main-color);
}
.navbar-nav .login a {
  color: #fff;
  padding: 15px 20px;
}
.slider picture {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider picture img {
  border-radius: 10px;
  width: 80%;
}
.sidebar .sidebar-body .nav {
  padding-bottom: 0;
}
.navbar
  .navbar-content
  .navbar-nav
  .nav-item
  .nav-link
  .indicator
  .circle::before,
.navbar .navbar-content .navbar-nav .nav-item .nav-link .indicator .circle {
  background-color: var(--main-color);
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  font-size: 15px;
}
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  background-color: var(--main-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}
.swiper-pagination-bullet-active {
  background: var(--main-color);
}
/* Sidebar */
.sidebar .sidebar-body .nav .nav-item .nav-link .link-title,
.nav-item i,
.sidebar-dark
  .sidebar
  .sidebar-body
  .nav
  .nav-item:hover
  .nav-link
  .link-title {
  color: #fff;
}
.sidebar .sidebar-body .nav .nav-item .nav-link .link-title,
.sidebar .sidebar-body .nav .nav-item .nav-link:hover .link-title {
  margin-left: 10px;
  color: #fff;
}
.sidebar .sidebar-body .nav .nav-item .nav-link {
  padding-inline-start: 0.5rem;
  border-radius: 5px;
  color: #fff;
}
.sidebar .sidebar-body .nav .nav-item .nav-link.active,
.sidebar .sidebar-body .nav .nav-item .nav-link:hover {
  background: linear-gradient(
    90deg,
    rgba(197, 152, 79, 1) 30%,
    rgba(233, 218, 155, 1) 100%
  );
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);

  color: #fff;
  padding-inline-start: 0.5rem;
}
.sidebar .sidebar-body .nav .nav-item .nav-link.active svg,
.sidebar .sidebar-body .nav .nav-item .nav-link:hover svg {
  fill: #fff;
  stroke: #000;
}
.sidebar .sidebar-body,
.sidebar .sidebar-header {
  background-color: #eee;
}
.navbar .search-form .input-group .form-control {
  margin-top: 0;
}
.navbar .search-form .input-group .input-group-text {
  padding-inline-start: 0.5rem;
}

.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 10px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 10px)
  );
}
/* Products */
.products .box-products {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  height: 100%;
}
.products .box-products img {
  aspect-ratio: 1/1;
}
.products .box-products:hover {
  transform: translateY(-10px);
}
.products .custom-shape {
  height: 2rem;
  clip-path: polygon(
    0 48%,
    9% 48%,
    18% 65%,
    27% 49%,
    36% 72%,
    45% 58%,
    55% 70%,
    64% 58%,
    73% 86%,
    82% 48%,
    91% 63%,
    100% 70%,
    100% calc(100% + 1px),
    0 calc(100% + 1px)
  );
  background-color: var(--second-color);
  margin-top: -2rem;
}
.products .product-name {
  background-color: var(--second-color);
  color: #fff;
  font-weight: 600;
  height: 100%;
  padding-block: 1rem;
  font-size: 1rem;
}
.products .product-name,
.box-products-content {
  height: 100%;
}
.products .slick-track {
  display: flex;
  gap: 1rem;
}
.products .arrow-next {
  position: absolute;
  right: 1%;
  bottom: -20%;
}
.products .arrow-prev {
  position: absolute;
  right: 5%;
  bottom: -20%;
}
.products .arrow-next,
.products .arrow-prev {
  background-color: var(--second-color);
  border: 0;
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick-dots li.slick-active button:before {
  color: var(--second-color);
  opacity: 1;
}
.slick-dots li button:before {
  font-size: 10px;
}
.settings-sidebar .sidebar-body .settings-sidebar-toggler {
  display: none;
}
/* ===== */
.social-media .social i {
  font-size: 1.2rem;
}
.social-media .social {
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: 0.3s;
  color: #fff;
}
.social-media .social:hover {
  background-color: var(--main-color);
  border-radius: 50%;
  padding: 10px;
}
.sidebar .sidebar-header p {
  font-size: 18px;
  color: #fff !important;
}
/* ======= */
.marquee-container {
  position: relative;
  width: 80%;
  overflow: hidden;
  background: linear-gradient(90deg, #dfe9f3, #cfd9df);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  margin: auto;
  margin-top: 20px;
}
.dark-mode .marquee-container {
  background: linear-gradient(90deg, #0c1427, #0c1427);
}

.marquee {
  display: flex;
  animation: scroll 10s linear infinite;
}

.marquee span {
  font-size: 1.2rem;
  font-weight: bold;
  color: #4a4a4a;
  padding: 10px 20px;
  display: inline-block;
}

.marquee span:hover {
  color: #ffffff;
  background-color: #3f72af;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ======= */
.sidebar .sidebar-body .nav .nav-item .nav-link {
  transition: 0.3s;
}
.sidebar .sidebar-body .nav .nav-item .nav-link:hover {
  padding-inline-start: 1rem;
}
hr {
  margin: 0.5rem 0 !important;
  color: var(--main-color) !important;
}
/* ======= */
.nav-link i {
  color: #000; /* Default color */
}

.nav-link i.fa-house {
  color: #ff5733; /* Example color for the Home icon */
}

.nav-link i.fa-people-group {
  color: #33ff57; /* Example color for My Clients icon */
}

.nav-link i.fa-credit-card {
  color: #3357ff; /* Example color for Add Credit icon */
}

.nav-link i.fa-money-check-dollar {
  color: #ff33a1; /* Example color for My Payments icon */
}

.nav-link i.fa-wallet {
  color: #ffdb33; /* Example color for My Wallet icon */
}

.nav-link i.fa-cart-shopping {
  color: #33cfff; /* Example color for My Orders icon */
}

.nav-link i.fa-headset {
  color: #8a33ff; /* Example color for Our Agents icon */
}

.nav-link i.fa-shield-halved {
  color: #ff8c33; /* Example color for Security icon */
}

.nav-link i.fa-circle-info {
  color: #33ffbd; /* Example color for About Us icon */
}
/* General icon styling */
.nav-link i {
  color: #000; /* Default color */
}

.nav-link i.fa-house {
  color: #ff5733; /* Home icon color */
}

.nav-link i.fa-circle-info {
  color: #33ff57; /* About Us icon color */
}

.nav-link i.fa-user {
  color: #3357ff; /* Login icon color */
}

.nav-link i.fa-user-plus {
  color: #ff33a1; /* Register icon color */
}

/* Social Media icons */
.social i {
  color: #33cfff; /* Default social icon color */
}

.social i.fa-facebook-f {
  color: #3b5998; /* Facebook icon color */
}

.social i.fa-whatsapp {
  color: #25d366; /* WhatsApp icon color */
}

.social i.fa-telegram {
  color: #0088cc; /* Telegram icon color */
}

.social i.fa-youtube {
  color: #ff0000; /* YouTube icon color */
}

.dark-btn i {
  color: #ffdb33; /* Sun icon color */
}

/* Footer logo styling */
.logo-footer img {
  width: 55px;
}

.logo-footer p {
  color: #fff; /* White text in the footer */
}
/*  */
.sidebar-mob {
  display: none;
}

/* Media Queries */

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
  .sidebar-mob {
    display: block;
    position: fixed;
    z-index: 99;
    bottom: -5%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    z-index: 100;
    width: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .dark-mode .sidebar-mob,
  .dark-mode .modal-search-mob {
    background-color: #0c1427;
  }
  .sidebar-mob ul {
    list-style: none;
    padding: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .sidebar-mob ul a {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .sidebar-mob ul a i {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
  .logo-header {
    display: none;
  }
}
.dark-mode .table.dataTable td {
  color: #fff !important;
}
/*  */
@media (max-width: 768px) {
  .dataTables_length {
    margin-bottom: 1rem;
  }
}
/* ======= */
.dark-mode .dropdown-menu {
  background-color: #0c1427;
}
.dark-mode .dropdown-menu p {
  color: #fff;
}