:root {
  
  --bgClr: #F8FAFC;
  --bgClr2: rgba(240, 236, 228, 0.8);
  --bgClr3: rgba(240, 236, 228, 0.6);
  --bgClr4: #dfd7c9;
  --mainClr: #9b745b;
  --text: #2E211C;
  --text2: rgba(46, 33, 28,0.6);
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;

  --box-bg: rgba(240, 236, 228, 0.6);
  --box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.1);
  --textarea-border: #9b745b;
  --textarea-shadow: 0px 0px 2px 0px #9b745b;
  --placeholder-color: #2e211c80;
  --text-muted: #2e211c99;
  --btn-bg: #dfd7c9;
  --btn-border: #e4a985;
  --btn-shadow: 0 0px 10px #e4a985;
  --btn-active-shadow: 0 2px 5px #c89b78 inset;
  --copy-icon: #c0a898;
  --copy-icon-hover: #d99160;
  --copy-icon-active: #b07050;

  --btn-transition: background-color 0.8s, transform 0.1s, box-shadow 0.1s;
  --icon-transition: transform 0.1s ease, color 0.2s ease;
  --universal-transition: all 0.3s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

body {
  background-color: var(--bgClr) !important;
}

.secBg {
  background-color: var(--bgClr2);
}

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

.dfCcc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.text {
  color: var(--text);
}

.text2 {
  color: var(--text2);
}

.transition {
  transition: var(--universal-transition);
}

.pointer {
  cursor: pointer;
}

.ourShadow {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.308),
    0px 0px 16px 0px rgba(173, 171, 171, 0.3);
}

.showMore > div > h5 {
  gap: 5px !important;
}

.showMore:hover > div > h5 {
  gap: 15px !important;
}

img {
  user-select: none !important;
}