@import "./bootstrap.min.css";
@import "./owl.carousel.min.css";
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");
:root {
  --color-primary: #0f111e;
  --color-second: #282b3a;
  --color-third: #cfa987;
  --color-error: #e21a02;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  color: #0f111e;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: middle;
  background: transparent;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  overflow: auto;
  overflow-x: hidden;
  font-family: "Almarai", sans-serif;
  color: #333;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  font-weight: 500;
}

button {
  background: none;
  border: none;
}

img {
  max-width: 100%;
}

.flex {
  display: flex;
}

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

.justifyBetween {
  justify-content: space-between;
}

.alignEnd {
  align-items: flex-end;
}

.justifyEnd {
  justify-content: flex-end;
}

.alignCenter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hidden {
  display: none;
}

.layoutMain {
  display: flex;
}

header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 18px 32px;
  border-bottom: 1px solid #0f111e;
}
header .search form {
  height: 48px;
  width: 350px;
  background: #fff;
  border-radius: 55px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
}
header .search form input {
  height: 100%;
  all: unset;
}
header .actions .notifications {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .actions .userDropdown button {
  height: 48px;
  width: 200px;
  background: #fff;
  border-radius: 24px;
  padding: 5px;
  padding-inline-end: 20px;
  text-align: end;
}
header .actions .userDropdown button .img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}
header .actions .userDropdown button .name {
  color: #292d32;
}
header .actions .userDropdown button .role {
  font-size: 12px;
  color: rgba(41, 45, 50, 0.44);
}
@media (max-width: 991px) {
  header {
    gap: 16px;
  }
}

.sidebar {
  min-height: 100vh;
  width: 300px;
  background: var(--color-primary);
  transition: all 0.2s ease-out;
  border-radius: 12px 0px 0px 12px;
}
.sidebar .head {
  width: 100%;
  padding: 18px 0px;
  padding-inline-start: 60px;
  position: relative;
}
.sidebar .head button {
  height: 34px;
  width: 16px;
  background: #d3ae8e;
  border-radius: 0px 4px 4px 0px;
}
.sidebar .head::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(0deg, #be9d80 30.25%, #d3ae8e 106.64%);
  position: absolute;
  bottom: 0;
  left: 0;
}
.sidebar .listHead {
  max-width: 120px;
  margin: 10px 40px;
  color: rgba(241, 241, 241, 0.7);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(190, 157, 128, 0.5019607843);
}
.sidebar .accordion {
  padding: 20px 40px;
}
.sidebar .accordion .accordion-item {
  background: transparent;
}
.sidebar .accordion .accordion-item button {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: none;
  padding: 0;
  margin-bottom: 24px;
}
.sidebar .accordion .accordion-item button span {
  color: #eee2d8;
  font-size: 16px;
  font-weight: 700;
}
.sidebar .accordion .accordion-item ul {
  border-inline-start: 1px solid rgba(190, 157, 128, 0.5019607843);
  margin-inline-start: 20px;
  padding-inline-start: 10px;
}
.sidebar .accordion .accordion-item ul li {
  margin-bottom: 12px;
}
.sidebar .accordion .accordion-item ul li a {
  color: rgba(238, 226, 216, 0.8);
}
.sidebar .accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0791 1.99329C10.7524 1.66662 10.2257 1.66662 9.89906 1.99329L4.35906 7.53329C4.09906 7.79329 4.09906 8.21329 4.35906 8.47329L9.89906 14.0133C10.2257 14.34 10.7524 14.34 11.0791 14.0133C11.4057 13.6866 11.4057 13.16 11.0791 12.8333L6.2524 7.99996L11.0857 3.16662C11.4057 2.84662 11.4057 2.31329 11.0791 1.99329Z' fill='%23EEE2D8'/%3E%3C/svg%3E%0A");
  margin-left: 0;
  margin-right: auto;
}
.sidebar .accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(-360deg);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.99305 4.91996C1.66638 5.24663 1.66638 5.77329 1.99305 6.09996L7.53305 11.64C7.79305 11.9 8.21305 11.9 8.47305 11.64L14.013 6.09996C14.3397 5.77329 14.3397 5.24663 14.013 4.91996C13.6864 4.59329 13.1597 4.59329 12.833 4.91996L7.99971 9.74663L3.16638 4.9133C2.84638 4.5933 2.31305 4.59329 1.99305 4.91996Z' fill='%23D3AE8E'/%3E%3C/svg%3E%0A");
}
.sidebar .accordion .link {
  margin-bottom: 24px;
}
.sidebar .accordion .link .label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .accordion .link .label .text {
  color: #eee2d8;
  font-size: 16px;
  font-weight: 700;
}
.sidebar .accordion .link .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  background: #ba9b80;
}
.sidebar.collapsed {
  width: 100px;
}
.sidebar.collapsed .head {
  padding-inline-start: 20px;
}
.sidebar.collapsed .head button img {
  transform: rotate(180deg);
}
.sidebar.collapsed .listHead {
  margin: 10px;
}
.sidebar.collapsed .accordion {
  padding: 20px;
}
.sidebar.collapsed .accordion .accordion-item button {
  justify-content: center;
}
.sidebar.collapsed .accordion .accordion-item button::after {
  display: none;
}
.sidebar.collapsed .accordion .accordion-item button span:last-of-type {
  display: none;
}
.sidebar.collapsed .accordion a {
  justify-content: center;
}
.sidebar.collapsed .accordion a span:last-of-type {
  display: none;
}
.sidebar.collapsed .accordion a div:last-of-type {
  display: none;
}
.sidebar.collapsed .links {
  padding: 20px;
}
.sidebar.collapsed .links a {
  justify-content: center;
}
.sidebar.collapsed .links a span:last-of-type {
  display: none;
}
.sidebar .links {
  padding: 20px 40px;
}
.sidebar .links li {
  margin-bottom: 24px;
}
.sidebar .links li a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .links li a span {
  color: #eee2d8;
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 1360px) {
  .sidebar .logo {
    text-align: center;
  }
  .sidebar.open {
    width: 300px;
    padding: 40px;
  }
  .sidebar.open .logo {
    text-align: start;
  }
  .sidebar.open .logo img {
    content: url("../assets/images/logoS2.svg");
  }
  .sidebar.open ul li span {
    display: block;
  }
}
@media (max-width: 991px) {
  .sidebar {
    width: 300px !important;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
  }
  .sidebar .head button {
    margin-inline-end: -16px;
    border-radius: 4px 0px 0px 4px;
  }
  .sidebar.collapsed {
    right: -300px;
  }
}

.header_content {
  min-height: 100vh;
  flex: 1;
  background: #eee2d8;
  overflow-x: hidden;
}
.header_content .content {
  padding: 20px;
}
.header_content .content .pageHead {
  margin-bottom: 30px;
}
.header_content .content .pageHead h1 {
  font-size: 26px;
  font-weight: bold;
}
.header_content .content .pageHead .addBtn {
  background: #d3ae8e;
  padding: 6px;
  border-radius: 48px;
}
.header_content .content .pageHead .addBtn span {
  margin: 0px 10px;
  font-size: 16px;
  color: #fff;
}
.header_content .content .pageHead ul {
  padding-inline-end: 55px;
  gap: 60px;
}
.header_content .content .pageHead ul a {
  font-size: 16px;
  color: rgba(9, 10, 18, 0.4);
}
.header_content .content .pageHead ul a.active {
  color: #090a12;
  font-weight: bold;
  position: relative;
}
.header_content .content .pageHead ul a.active::after {
  content: "";
  background: #d3ae8e;
  position: absolute;
  right: 0;
  bottom: -16px;
  display: block;
  height: 2px;
  width: 100%;
}
@media (max-width: 430px) {
  .header_content .content .pageHead {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }
  .header_content .content .pageHead ul {
    padding-inline-end: 0px;
    gap: 30px;
  }
}
@media (max-width: 1200px) {
  .header_content header {
    padding: 18px;
  }
  .header_content header .actions {
    gap: 12px;
  }
  .header_content .content {
    padding: 20px;
  }
}
@media (max-width: 430px) {
  .header_content header {
    flex-direction: column-reverse;
  }
  .header_content header .actions {
    align-self: flex-end;
  }
}

.headerS2 {
  background: #f8f3ee;
  border-radius: 0px, 0px, 24px, 24px;
  border: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.0509803922);
  padding: 20px 60px;
}
@media (max-width: 767px) {
  .headerS2 {
    padding: 20px;
  }
  .headerS2 .search form {
    width: 300px;
  }
}
@media (max-width: 617px) {
  .headerS2 {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  .headerS2 .search {
    align-self: stretch;
  }
  .headerS2 .search form {
    width: 100%;
  }
}

.nav_content {
  min-height: calc(100vh - 88px);
  padding: 40px;
  display: flex;
  gap: 20px;
  background: #eee2d8;
}
.nav_content nav {
  background: #282b3a;
  border-radius: 220px;
  padding: 50px 20px;
  margin-top: 80px;
}
.nav_content nav .logo {
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
}
.nav_content nav ul li {
  margin-bottom: 48px;
  position: relative;
}
.nav_content nav ul li:not(:last-of-type)::after {
  content: "";
  display: block;
  height: 2px;
  width: 24px;
  position: absolute;
  right: 12px;
  bottom: -24px;
  background: #4a4e63;
}
.nav_content nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 0 auto;
}
.nav_content nav ul li a.active {
  background: #d3ae8e;
}
.nav_content main {
  flex: 1;
}
.nav_content main .pageHead {
  margin-bottom: 50px;
}
.nav_content main .pageHead h1 {
  font-size: 26px;
  font-weight: bold;
}
@media (max-width: 767px) {
  .nav_content {
    padding: 20px;
  }
}
@media (max-width: 430px) {
  .nav_content .pageHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}