:root {
  --mainColor: #72211b;
  --mainColorLow: #72211bae;
  --secondaryColor: #f5d057;
  --secondaryColorLow: #f5d05798;
  --primary-blue: #4b6cb7;
  --primary-yellow: #eac23a;
  --primary-red: #db6274;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  background-color: #ece1e1;
}
/* ############################################### */
.heroCont {
    margin-left: 5%;
    margin-right: 5%;
}
.hero {
  height: 100vh;
}
/* ############################################### */
.btn-main {
  box-shadow: 0px 10px 14px -7px #f5d057;
  background-color: #72211b77;
  border-radius: 8px;
  border: none;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: #72211b !important;
  padding: 13px;
  text-decoration: none;
  transition: 0.5s;
  outline: none;
}
.btn-main:hover {
  transition: 0.5s;
  background-color: #f5d057;
  color: #72211b !important;
}
/* ############################################### */




/* @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
  box-sizing: border-box;
} */



body.dark {
  background-color: #292c35;
  color: white;
}
body.dark h1,
body.dark .support a {
  color: #fff;
}
.checkbox {
  opacity: 0;
  position: absolute;
}
.checkbox-label {
  background-color: #373b47;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fa-moon {
  color: var(--secondaryColor);
}
.fa-sun {
  color: var(--secondaryColor);
}
.checkbox-label .ball {
  background-color: #ece1e1;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}
.checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}