:root {
  --primary-color: #fc5b01;
  --secondary-color: #a6a6a6;
  --tertiary-color: #6c6c6c;
  --quaternary-color: #ffc26d;
  --gradient-color: linear-gradient(90deg,
      rgba(252, 91, 1, 1) 0%,
      #ffc26d 100%);
  --text-color: black;
  --layout-h-p: 10em;
  --light-panel: white;
}

body {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 60px;
}

button {
  background: var(--gradient-color);
  border-radius: 30px;
  border: none;
  outline: none;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 0.6em 2em;
  color: white;
  font-weight: 600;
  transition: background 0.8s ease;

  .material-symbols-outlined {
    background-color: var(--light-panel);
    padding: 0.1em;
    border-radius: 50%;
    color: var(--primary-color);
    transition: color 0.8s ease;
  }

  &:hover {
    cursor: pointer;
    background: black;

    .material-symbols-outlined {
      color: black;
    }
  }
}

.list-check {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  .feature {
    list-style: inside;
    flex: 1;
    min-width: 200px;
    justify-self: baseline;
    text-align: left;
    padding-left: 0 !important;
    &::marker {
      color: var(--primary-color);
    }
  }
}