:root {
  --color-1: #5f1825;
  /* Dark Maroon */
  --color-2: #f09f3f;
  /* Warm Orange */
  --color-3: #e03e13;
  /* Bright Red */
  --color-4: #b2735d;
  /* Dusty Pink */
  --color-5: #1d1d1b;
  /* Almost Black */
  --color-6: #9b552c;
  /* Earthy Brown */
}


/* Text Color Classes */

.text-color-1 {
  color: var(--color-1);
}

.text-color-2 {
  color: var(--color-2);
}

.text-color-3 {
  color: var(--color-3);
}

.text-color-4 {
  color: var(--color-4);
}

.text-color-5 {
  color: var(--color-5);
}

.text-color-6 {
  color: var(--color-6);
}


/* Background Color Classes */

.bg-color-1 {
  background-color: var(--color-1);
}

.bg-color-2 {
  background-color: var(--color-2);
}

.bg-color-3 {
  background-color: var(--color-3);
}

.bg-color-4 {
  background-color: var(--color-4);
}

.bg-color-5 {
  background-color: var(--color-5);
}

.bg-color-6 {
  background-color: var(--color-6);
}

.container,
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0px 50px !important;
}


/* .temple-header .shx {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  margin: 0px !important;
  padding: 0px !important;
} */

a,
a:hover {
  text-decoration: none !important;
}

.w-txt {
  color: #fff;
}

@media only screen and (max-width: 767px) {

  .container,
  .container-fluid {
    padding: 0px 15px !important;
  }

  h1 {
    font-size: 22px !important;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 20px !important;
  }

  strong {
    font-size: 18px !important;
  }

  div,
  a,
  p {
    font-size: 16px !important;
  }

  span {
    font-size: 12px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  .container,
  .container-fluid {
    padding: 0px 25px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  .container,
  .container-fluid {
    padding: 0px 50px !important;
  }
}