@charset "UTF-8";
/*

Theme Name: V채lim채ki Ranch

*/
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");
* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  scroll-behavior: smooth;
}

:root {
  --orange: #EC5630;
  --darkorange: #cf461c;
  --forestgreen: #364F3B;
  --darkgreen: #253929;
  --lightgreen: #E5F3E8;
  --white: #FFFFFF;
  --darkgray: #232323;
  --lightgray: #6A6A6A;
  --beige: #EDE9DA;
  --darkbeige: #DDD1A0;
  --h1: 3rem "Alfa Slab One", serif;
  --h3: 2rem "Alfa Slab One", serif;
  --h4: 1.5rem "Alfa Slab One", serif;
  --button-font: 700 1.5rem system-ui, sans-serif;
  --default: 400 1rem system-ui, sans-serif;
}

html {
  margin-top: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--darkgray);
}

.ns {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

h1 {
  font: var(--h1);
}

h2 {
  font: var(--h1);
  color: var(--forestgreen);
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: auto;
}

h3 {
  font: var(--h3);
  color: var(--forestgreen);
  margin-bottom: 1rem;
}

h4 {
  font: var(--h4);
  color: var(--forestgreen);
}

p {
  max-width: 70ch;
  margin-bottom: 1em;
}

body {
  font: var(--default);
  color: var(--darkgray);
  background-color: var(--beige);
  line-height: 1.5;
  min-height: 100vh;
}

#nav-main {
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 4;
  padding: 0.3em 1em;
  transform: translateY(0);
  transition: 0.3s ease-out;
  visibility: visible;
}

#nav-main.is-hidden {
  transform: translateY(-100%);
  visibility: hidden;
}

body.menu-open #nav-main.is-hidden {
  /* Prevents nav bar from disappearing on viewport resize */
  transform: translateY(0);
  visibility: visible;
}

#nav-main-logo {
  height: 45px;
}

#nav-main-logo img {
  height: 100%;
}

nav ul,
.hero-nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  height: 100%;
  flex-grow: 1;
  margin-left: 1em;
}

nav ul li,
.hero-nav ul li {
  margin: 0 1em;
  height: 100%;
  align-content: center;
  width: max-content;
}

nav ul li a,
.hero-nav ul li a {
  font-weight: 600;
  text-decoration: none;
  color: var(--forestgreen);
  padding: 0.5em 0.2em;
}

nav ul li a:hover,
.hero-nav ul li a:hover {
  color: var(--orange);
}

nav .call-to-action {
  margin: 0;
  font-size: 1.25rem;
}

button.menu-toggle {
  background: none;
  border: none;
  padding: 0 7px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: none;
}

button.menu-toggle:hover.menu-toggle .line {
  background-color: var(--orange);
}

button.menu-toggle .line {
  display: block;
  background-color: var(--forestgreen);
  height: 3px;
  width: 100%;
  margin: 5px 0;
  border-radius: 5px;
}

.drawer-menu {
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  z-index: 2;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(-120%);
  transition: transform 0.4s ease-out;
}

body.menu-open .drawer-menu {
  transform: translateY(0);
}

body.menu-open .menu-toggle .line-1 {
  transform: translateY(8px) rotate(45deg);
}

body.menu-open .menu-toggle .line-2 {
  opacity: 0;
}

body.menu-open .menu-toggle .line-3 {
  transform: translateY(-8px) rotate(-45deg);
}

.drawer-menu ul,
.drawer-cta {
  flex-direction: column;
  width: 100%;
  position: relative;
  top: 0;
}

.drawer-menu ul li,
.drawer-cta {
  height: fit-content;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #4A6B51;
}

.drawer-menu ul li a,
.drawer-cta {
  display: inline-block;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  background-color: var(--forestgreen);
  text-decoration: none;
  padding: 1em 0;
  padding-left: 2em;
  width: 100%;
}

.drawer-cta {
  background-color: var(--orange);
  display: none;
}

.drawer-cta svg {
  height: 1rem;
  margin-right: 0.7rem;
}

.drawer-cta:hover {
  text-decoration: underline;
  background-color: var(--darkorange);
}

.drawer-menu ul li:last-child {
  border-bottom: none;
}

.drawer-menu ul li a:hover {
  background-color: var(--darkgreen);
  text-decoration: underline;
}

.drawer-background {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 1;
  display: none;
  opacity: 0;
  overflow: hidden;
}

body.menu-open .drawer-background {
  display: block;
}

.hero-wrapper {
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(237, 233, 218) 100%);
}

.hero {
  min-height: 700px;
  width: 100%;
  max-width: 1920px;
  margin: auto;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  /* background-color: #cc8069; */
  background-position: top;
}

.hero-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 2vw 0;
  /* width: 100%; */
}

#hero-logo {
  height: 70px;
  margin-left: 3em;
  margin-right: 2em;
}

.hero-nav ul {
  flex-grow: 0;
  margin-right: 3em;
}

.hero-content {
  max-width: 700px;
  flex-grow: 1;
  margin-left: 8%;
  margin-right: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3em;
  padding: 5em 0;
}

.hero h1 {
  color: var(--white);
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3);
  line-height: 100%;
}

.hero h2 {
  font: 400 1.5rem system-ui, sans-serif;
  color: var(--white);
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3);
  line-height: 100%;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

button {
  padding: 0.5rem 1.5rem;
}

button:hover {
  cursor: pointer;
}

.call-to-action {
  background-color: var(--orange);
  font: var(--button-font);
  font-size: 1.25rem;
  border: none;
  width: max-content;
  position: relative;
  margin: 1em 1em 1em 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.call-to-action svg {
  margin-right: 1rem;
  transition: 0.1s ease-out;
}

.call-to-action a {
  text-decoration: none;
  color: var(--white);
  padding: 0.5rem 1.5rem 0.5rem 1.3rem;
  transition: 0.1s ease-out;
}

.call-to-action a:hover {
  background-color: var(--darkorange);
  padding-right: 1.3rem;
}

.call-to-action:hover.call-to-action a svg {
  margin-right: 1.2rem;
}

.secondary-button {
  background: none;
  border: 2px solid var(--white);
  font: var(--button-font);
  font-size: 1.25rem;
  color: var(--white);
  padding: calc(0.5rem - 2px) 1.3rem calc(0.5rem - 2px) 1.3rem;
  transition: padding 0.1s ease-out;
}

.secondary-button:hover {
  border: 2px solid var(--orange);
  padding-left: 1.5rem;
  padding-right: 1.1rem;
}

.services-preview {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0 auto;
  padding: 0 1em;
  max-width: 1920px;
}

.section-heading {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: min-content;
  margin-bottom: 1rem;
}

.heading-decoration-line {
  flex-grow: 1;
  border-bottom: 2px solid var(--forestgreen);
  align-self: center;
}

.section-heading h3,
.section-heading h2 {
  color: var(--forestgreen);
  margin: 0 1rem;
}

.service-card {
  background-color: var(--white);
  margin-bottom: 1em;
  width: min(376px, 100vw);
  text-align: center;
  margin: -3em 1.5em 3em 1.5em;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0.2s ease-out;
  display: flex;
  flex-direction: column;
  scale: 1;
}

.service-card a {
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services-preview .section-heading {
  margin: 2em 0;
}

.service-card:hover {
  cursor: pointer;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
  scale: 1.02;
  /*   margin-top: -3.5em;
    margin-bottom: 3.5em; */
}

.service-card:hover.service-card h4 {
  color: var(--darkgreen);
}

.service-img-wrapper {
  width: 100%;
  overflow: hidden;
  height: 250px;
}

.service-card img {
  object-fit: cover;
  transition: 0.1s ease-out;
}

.service-card-content {
  flex-grow: 1;
}

.service-card h4 {
  color: var(--forestgreen);
  transition: 0.2s ease-out;
  margin-top: 0.7em;
}

.service-card p {
  text-align: left;
  padding: 0 8px;
  margin-top: 0.5em;
}

button.read-more {
  background-color: var(--forestgreen);
  color: var(--white);
  font-weight: 700;
  border: none;
  width: 100%;
  padding: 1em 0;
  margin-top: 1em;
  transition: 0.2s ease-out;
}

.service-card:hover button.read-more {
  background-color: var(--darkgreen);
  text-decoration: underline;
}

.social-proof {
  background-color: var(--orange);
  color: var(--white);
  text-align: center;
  padding: 3rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.social-proof-content {
  width: max(35%, 500px);
  margin: 1.5em;
  margin-bottom: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin: auto; */
}

.social-proof-content:first-child {
  width: 100%;
}

.social-proof svg {
  margin-bottom: 1em;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

.social-proof .quote {
  font: var(--h3);
  line-height: 100%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  max-width: 25ch;
  margin-bottom: 0;
}

.social-proof .quote-name {
  margin-top: 1em;
  font-size: 1.25rem;
  text-align: right;
  margin-right: 2em;
  width: 100%;
}

.info-section {
  padding: 1em 0;
  background-color: var(--white);
}

.info-unit {
  background-color: var(--white);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  padding: 1em 0;
}

.info-unit img {
  object-fit: cover;
}

.info-content {
  padding: 0 2em;
  padding-top: 0.5em;
}

.wp-block-button a {
  background-color: var(--forestgreen);
  border-radius: 0;
  margin: 1em auto;
  padding: 0.5em 1.2em;
}

.wp-block-button a:hover {
  background-color: var(--darkgreen);
  text-decoration: underline;
}

.info-unit:nth-child(even) {
  background-color: var(--lightgreen);
  flex-direction: row;
}

.info-img-wrapper {
  width: 500px;
  height: 500px;
}

.info-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#yhteystiedot {
  scroll-margin-top: 3rem;
}

.contact {
  background-color: var(--beige);
  padding: 2em 1em;
}

.contact-cards-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.contact-card {
  display: flex;
  flex-direction: row;
  background-color: var(--white);
  padding: 8px;
  width: 530px;
  margin: 1em;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
}

.contact-img-wrapper {
  width: 250px;
}

.contact-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 0 1em;
}

.contact-info-primary {
  border-bottom: 2px solid var(--darkgray);
}

.contact-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.contact-role {
  color: var(--lightgray);
}

.location-info {
  background-color: var(--forestgreen);
  max-width: 1200px;
  padding: 1em;
  margin: auto;
  display: flex;
  flex-direction: row;
  scroll-margin-top: 5rem;
}

.location-info iframe {
  width: 100%;
  max-width: 640px;
  height: 330px;
  border: 3px solid var(--white);
}

.location-info h5 {
  margin-top: 1em;
}

.location-info p {
  color: var(--white);
  margin-bottom: 1em;
}

.additional-location-info {
  padding: 0 1em;
}

.instagram-feed {
  margin-top: 3em;
  padding-bottom: 5em;
  background: linear-gradient(180deg, var(--beige) 0%, var(--white) 70%);
}

.ig-feed-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1em;
  text-align: center;
}

.ig-feed-header .ig-logo {
  color: var(--orange);
}

.ig-feed-header .ig-logo svg {
  height: 50px;
  width: 50px;
}

.ig-feed-header .ig-logo:hover {
  color: var(--darkorange);
}

.ig-feed-header svg {
  height: 40px;
}

.ig-feed-header p {
  font-size: 1.25rem;
}

.ig-feed-header a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.ig-feed-header a:hover {
  text-decoration: underline;
  color: var(--darkorange);
}

#sbi_images {
  display: flex !important;
  justify-content: center;
}

#sb_instagram { /* Purkkapakettiratkaisu, lisätty 7.4. piilottamaan rikkinäinen IG-feed. En poistanut koko plugaria, kun logot yms. tuli sitä kautta. -Teppo */
    display: none;
}

.sbi_item {
  max-width: 190px !important;
  max-height: 190px !important;
}

.sbi_photo_wrap {
  margin: 0;
  padding: 0;
}

footer {
  --cutout-size: 50px;
  /* Easily change the size of round cutouts in footer corners */
  background-color: var(--forestgreen);
  position: relative;
}

.cta-hide-on-large {
  display: none;
}

footer::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: calc(0px - var(--cutout-size));
  right: 0;
  height: var(--cutout-size);
  width: var(--cutout-size);
  border-bottom-left-radius: var(--cutout-size);
  box-shadow: 0 var(--cutout-size) 0 0 var(--white);
}

footer::after {
  content: "";
  position: absolute;
  background-color: transparent;
  top: calc(0px - var(--cutout-size));
  left: 0;
  height: var(--cutout-size);
  width: var(--cutout-size);
  border-bottom-right-radius: var(--cutout-size);
  box-shadow: 0 var(--cutout-size) 0 0 var(--white);
}

.footer-upper {
  padding: calc(1.5 * var(--cutout-size)) calc(2 * var(--cutout-size)) var(--cutout-size) calc(2 * var(--cutout-size));
  display: flex;
  flex-direction: row;
  padding-right: 10%;
}

.footer-column {
  display: flex;
  flex-direction: column;
  margin-right: 5em;
  margin-bottom: 1em;
}

.footer-column:last-child {
  margin-right: 0;
}

.footer-flex-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.footer-column-fill {
  justify-content: space-between;
}

.footer-column-section {
  margin-bottom: 1em;
}

h5 {
  font: var(--h4);
  font-size: 1.125rem;
  margin-bottom: 1em;
  color: var(--beige);
}

.footer-column p {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 1rem;
}

footer ul {
  flex-direction: column;
  flex-grow: 0;
  margin: 0;
  width: max-content;
}

footer ul li {
  height: auto;
  margin: 0;
  margin-bottom: 1em;
  list-style: none;
}

footer ul li a {
  color: var(--white);
  padding: 0.2em 0;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

footer ul li a:hover {
  color: var(--darkbeige);
  border-bottom: none;
  text-decoration: underline;
}

.footer-lower {
  background-color: var(--darkgreen);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1.5em 1em;
  row-gap: 1em;
}

.some-wrapper {
  display: inline-flex;
}

.some-icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  background-color: var(--white);
}

.some-icon:hover {
  background-color: var(--darkbeige);
}

.footer-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-menu li {
  margin: auto;
}

.footer-lower a {
  font-weight: 600;
  font-size: 1rem;
  margin-right: 24px;
}

.footer-lower a:hover {
  color: var(--darkbeige);
  text-decoration: underline;
}

.footer-lower .divider {
  height: 1em;
  border-left: 1px solid var(--white);
  margin-right: 24px;
}

.footer-lower span {
  margin: auto 0;
  color: var(--white);
}

.footer-lower span a {
  color: var(--white);
  font-weight: 600;
}

.service-description {
  scroll-margin-top: 5em;
}

h5.pricing {
  background-color: var(--forestgreen);
  font: var(--default);
  font-weight: 700;
  padding: 0.5rem;
  padding-left: 1em;
  margin-left: -1em;
  width: 50%;
  margin-top: 2em;
}

.content {
  margin: 2em 1em 5em 1em;
}

.content-centered {
  margin: auto;
  margin-top: 2em;
  background-color: white;
  padding: 2em;
  width: fit-content;
  max-width: 70ch;
}

.blog-posts-container {
  max-width: 1000px;
  margin: 2em auto 5em auto;
  padding: 0 1em;
}

.blog-posts-container a {
  text-decoration: none;
  color: var(--darkgray);
  width: 100%;
}

.blog-post-card {
  display: flex;
  flex-direction: row;
  background-color: var(--white);
  max-width: 1000px;
  padding: 1em;
  margin-bottom: 2em;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.2s ease-out;
}

.blog-post-card img {
  width: 40%;
  height: 190px;
  object-fit: cover;
  margin-right: 1em;
}

.post-date {
  color: var(--lightgray);
  margin-bottom: 1em;
}

.blog-post-card .read-more {
  color: var(--forestgreen);
  font-weight: 700;
  margin-bottom: 0;
}

.blog-post-card:hover h4 {
  color: var(--darkgreen);
}

.blog-post-card:hover .read-more {
  color: var(--darkgreen);
  text-decoration: underline;
}

.blog-post-card:hover {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}

.blog-wrapper {
  background-color: var(--white);
  margin: 2em 0;
  padding: 1em;
  width: 100vw;
  max-width: fit-content;
}

.blog-wrapper img {
  width: 100%;
  object-fit: cover;
  max-height: 400px;
  margin-bottom: 1em;
}

.blog-content {
  margin: 0 1em;
}

.blog-content p {
  width: 100%;
  max-width: 75ch;
}

.blog-content .wp-block-image {
  width: auto;
  margin-bottom: 1em;
}

figure {
  margin: 1em 0;
  z-index: 1;
}

figcaption {
  color: var(--lightgray);
  font-size: 0.75rem;
}

.blog-button-wrapper {
  width: max-content;
  margin: auto;
}

.no-border-button {
  margin-bottom: 2em;
  border: none;
  background: none;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forestgreen);
}

.no-border-button:hover {
  color: var(--darkgreen);
  text-decoration: underline;
}

#booking-button {
  margin: auto;
}

p a {
  text-decoration: underline;
  color: var(--orange);
}

p a:hover {
  color: var(--darkorange);
}

@media (max-width: 1600px) {
  .services-preview .section-heading {
    display: none;
  }
  .services-preview {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 3em;
  }
}
@media (max-width: 1200px) {
  .contact-card {
    flex-direction: column;
    width: min-content;
  }
  .contact-info-primary,
  .contact-info-secondary {
    padding: 1em 0;
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .hero-nav {
    padding: 1em;
  }
  #hero-logo {
    margin-left: 0.2em;
    margin-right: 0;
    height: 52px;
  }
  .hero-nav ul {
    margin-right: 2em;
  }
  .hero-nav ul li {
    margin-right: 0.3em;
  }
}
@media (max-width: 1030px) {
  nav ul li {
    display: none;
  }
  nav .call-to-action {
    margin-right: 1em;
  }
  .drawer-menu {
    display: block;
  }
  button.menu-toggle {
    display: block;
  }
  .info-unit,
  .info-unit:nth-child(even) {
    flex-direction: column;
  }
  .info-content,
  .info-img-wrapper {
    margin: auto;
  }
  .info-img-wrapper {
    margin-bottom: 2em;
    width: unset;
    height: unset;
  }
  .location-info {
    flex-direction: column;
    width: fit-content;
    margin: auto;
  }
  .footer-upper {
    flex-direction: column;
  }
  .cta-hide-on-large {
    display: block;
  }
  .cta-hide-on-small {
    display: none;
  }
  .footer-column {
    margin-right: 3em;
  }
  .footer-column-fill {
    flex-direction: row;
    margin-bottom: 3em;
    margin-right: 0;
  }
  #footer-nav {
    margin-bottom: 2em;
  }
}
@media (max-width: 768px) {
  #nav-main.is-hidden {
    transform: translateY(0);
    visibility: visible;
  }
  #drawer-menu.is-hidden {
    visibility: visible;
  }
  .hero-nav {
    display: none;
  }
  .hero-content {
    margin: max(5vw, 8px);
  }
  #yhteystiedot {
    padding-left: 0;
    padding-right: 0;
  }
  .contact .section-heading {
    padding: 0 1em;
    margin: 0;
    width: auto;
  }
  .additional-location-info {
    padding: 0;
  }
  .blog-post-card {
    flex-direction: column;
  }
  .blog-post-card img {
    width: 100%;
    margin-bottom: 1em;
  }
  .blog-post-card p {
    max-width: 100%;
  }
  .blog-wrapper {
    padding: 0;
    padding-bottom: 3em;
    margin-top: 0;
    max-width: 100%;
  }
  .blog-content {
    margin-right: 2em;
  }
  .no-border-button {
    margin-left: 1em;
  }
  .section-heading {
    padding: 0 1em;
    width: auto;
  }
  .content {
    margin-left: auto;
    margin-right: auto;
  }
  .content-centered {
    padding: 1em;
  }
}
@media (max-width: 550px) {
  nav .call-to-action {
    display: none;
  }
  .drawer-cta {
    display: inline-block;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero h2 {
    font-size: 1.25rem;
  }
  .info-content {
    padding: 0 1em;
  }
  .footer-upper {
    padding-left: 2em;
  }
  .footer-flex-wrapper {
    flex-direction: column;
  }
}
::selection {
  background-color: var(--orange);
  color: var(--white);
}

.social-proof ::selection {
  background-color: var(--darkorange);
}