@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

/* :root {
  --primary-background-color: #f76f15;
  --primary-title: #071516;
  --secondary-color: #fff;
}
 */

:root {
  --lighter-primary-background-color: #FB923C;
  --darker-second-primary-background-color: #F97316;

  --primary-background-color: #C2410C;
  --second-primary-background-color: #EA580C;

  --darker-primary-background-color: #9A3412;
  /* --darker-second-primary-background-color: #B45309; */

  --secondary-background-color: #FDBA74;
  --darker-secondary-background-color: #FB923C;

  --primary-shadow-color: rgba(194, 65, 12, 0.35);
  --darker-primary-shadow-color: rgba(154, 52, 18, 0.35);

  --primary-title: #431407;
  --primary-paragraph: #7C2D12;

  --secondary-color: #fff;
}

.direct_contact {
  position: fixed;
  top: 83%;
  left: 1.5%;
  z-index: 101;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.direct_contact a {
  width: 3.5rem;
  aspect-ratio: 1;
  border-radius: 50%;

  display: grid;
  place-items: center;

  position: relative;

  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;

  box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, .45);
  transition: .4s cubic-bezier(.175, .885, .32, 1.275);
}

.direct_contact a:first-child {
  background: #25D366;
}

.direct_contact a:last-child {
  background: #3b82f6;
}

.direct_contact a::after {
  position: absolute;
  top: 50%;
  left: 80%;

  transform: translate(10%, -50%);
  opacity: 0;

  padding: .5rem .8rem;
  border-radius: .4rem;

  background: #1a1a2e;
  color: var(--secondary-color);

  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;

  transition: .3s;
  z-index: -1;
}

.direct_contact a:first-child::after {
  content: "Chat Now";
}

.direct_contact a:last-child::after {
  content: "Call Us";
}

.direct_contact a:hover::after {
  left: 100%;
  opacity: 1;
}

.direct_contact a:hover {
  transform: scale(1.1);
}