:root {
  --color-dark: #5C3D2E;
  --color-darker: #2d2424;
  --color-light: #ed8d67;
  --color-lighter: #e7e2dd;
  --color-off-white: #FAF9F6;

  --spacing-section: 120px;
  --spacing-x-lg: 60px;
  --spacing-lg: 40px;
  --spacing-md: 24px;
  --spacing-sm: 12px;
  --spacing-tiny: 4px;

  --card-shadow: 4px 4px 0 0 rgb(45, 36, 36, 0.5);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: clamp(2rem, 4vw, 4rem);
}

h2 {
  font-size: clamp(1.4rem, 2.4vw, 3rem);
}

h3 {
  font-size: clamp(1rem, 1.6vw, 2rem);
}

body {
  color: var(--color-darker);
  font-family: 'Montserrat';
  max-width: 1800px;
  font-size: clamp(1rem, 1.125rem, 1.125rem);;
}

footer {
  padding: 0 200px;
}

section {
  padding: var(--spacing-md);
}

@media screen and (min-width: 1248px) {

  section {
    padding: var(--spacing-section) 0;
  }

}

section>* {
  max-width: 1200px;
  margin: 0 auto;
}

img {
  display: block;
}

a,
a:visited {
  color: var(--color-dark);
  text-decoration: none;
}

li {
  list-style: none;
}

textarea:focus {
  outline: none;
}

button,
input[type="submit"],
input[type="button"] {
  padding: 12px 20px;
  font-size: 1.125rem;
  background-color: var(--color-light);
  color: var(--color-darker);
  cursor: pointer;
  border-radius: var(--spacing-sm);

  transition: 0.4s;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-darker);
  color: var(--color-light);
}


/** HOME CHAT WIDGET **/

.chat-wrapper {
  width: 440px;
  height: 500px;
  background-color: var(--color-off-white);
  border-color: var(--color-dark);
  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.4);
  position: fixed;
  z-index: 100;
  bottom: 60px;
  right: 60px;
  display: flex;
  flex-direction: column;

}

.conversation-parent {
  width: auto;
}

.chat-header {
  border-bottom: solid 1px rgb(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
}

.chat-header {
  height: 80px;
}

.chat-footer {
  height: 60px;
}

.chat-min {
  background-color: #FAF9F6;
  border-color: var(--color-dark);
  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.4);
  position: fixed;
  z-index: 100;
  bottom: 60px;
  right: 60px;
  display: flex;
  cursor: pointer;
  padding: 16px;
  border-radius: 12px;
}

.chat-min .chat-heading {
  margin-left: 4px;
}

.chat-min .status {
  bottom: 12px;
}

.hide {
  display: none;
}

.close-chat {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.profile-pic {
  position: relative;
  width: 64px;
  height: 64px;
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.online-status {
  width: 16px;
  height: 16px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.status {
  left: 20px;
  opacity: .4;
  position: absolute;
  padding: 0;
  margin: 0;
}

.online {
  background-color: #62e9ad;
}

.online .status {
  opacity: 1;
}

.chat-heading {
  font-size: 24px;
}

.user-chat {
  height: 120px;
}

.chat-wrapper>* {
  padding: 8px;
}

.conversation {
  flex-grow: 1;
}

.chat-wrapper textarea {
  width: 100%;
  height: 100px;
  font-size: 16px;
  resize: none;
  border: none;
}

#send-btn {
  height: 100%;
  width: 120px;
  border: none;
  padding: 0 12px;
  transition: 0.2s;
}

#send-btn:focus,
#send-btn:hover {
  outline: none;
  cursor: pointer;
  background-color: #f0bd70;
  color: #4d4d4d;
}

.conversation {
  padding: 12px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.conversation>li {
  padding: 12px;
  margin-top: 8px;
  border-radius: 8px;
}

.from-user {
  background-color: #eda435;
  margin-left: auto;
}

.from-admin {
  background-color: #000;
  color: #fff;
  margin-right: auto;
}

/* SCROLL ANIMATIONS */

.anim-up {
  animation: 1.2s cardFadeUp 1 forwards;
}

.fade-up {
  animation: 1.2s fadeUp 1 forwards;
}

.anim-left {
  animation: 1.2s slideLeft 1 forwards;
}

.text-left {
  animation: 1.2s textLeft 1 forwards;
}

.anim-right {
  animation: 1.2s slideRight 1 forwards;
}

@keyframes cardFadeUp {
  from {
    bottom: -300px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}