:root {
  --brown: #800020;
  --main: black;
  --red: #ff0300;
  --orange: #ff5538;
  --orange2: #f39422;
  --blue: #010038;
  --violet: #800080;
}
.alarm-header {
  background-color: rgb(48, 45, 45);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  gap: 4rem;
}
.alarm-header-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: auto;
  gap: 1rem;
}
.alarm-header h1 {
  text-align: center;
  min-width: 400px;
  max-width: 1000px;
  font-size: 30px;
  color: var(--orange2);
  padding: 2rem;
}
.alarm-header p {
  color: white;
  min-width: 400px;
  max-width: 900px;
  text-indent: 1rem;
  padding: 2rem;
}
.alarm-header img {
  width: 100%;
  max-width: 1000px;
  border: black solid 2px;
}
.alarm-pros {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: auto;
  width: 100%;
}
.alarm-pros-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  gap: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.material-symbols-outlined {
  font-size: 80px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 0;
}
.alarm-pros-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  max-width: 500px;
  height: auto;
  gap: 1rem;
}
.alarm-pros-item h3 {
  text-align: center;
}
.alarm-pros-item p {
  font-size: 14px;
  padding: 2rem;
  text-align: center;
}
.diagram {
  height: auto;
  background-color: black;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}
.diagram-img {
  display: flex;
  justify-content: center;
}
.diagram-img img {
  width: 100%;
  padding: 2rem;
}
.diagram-text {
  padding: 2rem;
  flex: 1;
  min-width: 40%;
}
.diagram-text h1,
.diagram-text h2,
.diagram-text span {
  color: #f39422;
}
.diagram-text p {
  color: white;
  width: 80%;
}

@media only screen and (min-width: 900px) {
  .alarm-pros-container {
    flex-wrap: nowrap;
  }
}