/*
File: main.css
SD Hybrids - all site styles in one file (converted from SCSS).
Loaded on the front end AND the login page. Login styles are at the bottom.
*/

/*
File: variables.css
Design tokens (converted from _variables.scss). Must load before every other stylesheet.
*/
:root {
  /* COLORS */
  --color-1: #0EC899;
  --color-2: #161D6F;
  --color-3: #FF7300;
  --color-4: #2196F3;
  --color-font-1: #020922;
  --color-font-2: #393536;
  --color-font-3: rgba(57, 53, 54, 0.6);
  --color-font-inverse: #fff;
  --color-ui-1: #fff;
  /* RGB channels, for rgba(var(--x-rgb), alpha) */
  --color-1-rgb: 14, 200, 153;
  --color-2-rgb: 22, 29, 111;
  --color-3-rgb: 255, 115, 0;
  --color-4-rgb: 33, 150, 243;
  --color-font-1-rgb: 2, 9, 34;
  --color-font-2-rgb: 57, 53, 54;
  --color-ui-1-rgb: 255, 255, 255;
  /* TYPOGRAPHY */
  --line-height: 1.5rem;
  --font-title: "Playfair Display", serif;
  --font-body: "Rubik", sans-serif;
  --font-interactive: "Inter", sans-serif;
  /* SIZING */
  --size-xxsmall: 0.1875rem;
  --size-xsmall: 0.375rem;
  --size-small: 0.75rem;
  --size-medium: 1.5rem;
  --size-large: 3rem;
  --size-xlarge: 6rem;
  --size-xxlarge: 12rem;
  /* ANIMATION */
  --transition-standard: all 0.25s ease;
  /* COMPONENT TOKENS */
  --icon-size: var(--size-medium);
  --button-color: var(--color-font-inverse);
  --button-background-color: var(--color-1);
}

/*
BREAKPOINTS (reference only - custom properties cannot be used inside @media queries,
so these are written as literal values in each file)
  tablet: 980px
  smartphone: 767px
  smartphone-portrait: 479px
*/

/*
File: base.css
This should contain site-wide styles that don't belong anywhere else
*/
/*
PSEUDO ELEMENT ICON
*/
.rf-contact-chip {
  font-weight: bold;
  margin-bottom: var(--size-medium);
  display: flex;
}
.rf-contact-chip::before {
  content: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: var(--size-medium);
  margin-right: var(--size-small);
}

.rf-contact-chip:last-child {
  margin-bottom: 0;
}

.rf-contact-chip.address::before {
  content: "\f54f";
}

.rf-contact-chip.phone::before {
  content: "\f879";
}

.rf-contact-chip.email::before {
  content: "\f0e0";
}

#rf-body .rf-testimonial {
  position: relative !important;
}
#rf-body .rf-testimonial::before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  position: absolute;
  font-size: var(--size-xlarge);
  color: var(--color-font-1);
  margin-left: -1.5rem;
  margin-top: -1.5rem;
}

/*
File: typography.css
This should contain sizing and font choices for typography
*/
#rf-body h1, #rf-body .h1,
#rf-body h2, #rf-body .h2,
#rf-body h3, #rf-body .h3,
#rf-body h4, #rf-body .h4,
#rf-body h5, #rf-body .h5,
#rf-body h6, #rf-body .h6 {
  font-family: var(--font-title);
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
  padding-bottom: 0;
}
#rf-body h1 + *, #rf-body .h1 + *,
#rf-body h2 + *, #rf-body .h2 + *,
#rf-body h3 + *, #rf-body .h3 + *,
#rf-body h4 + *, #rf-body .h4 + *,
#rf-body h5 + *, #rf-body .h5 + *,
#rf-body h6 + *, #rf-body .h6 + * {
  margin-top: var(--line-height);
}
#rf-body h1, #rf-body .h1 {
  font-size: 3.4332275391rem;
}
#rf-body h2, #rf-body .h2 {
  font-size: 2.7465820313rem;
}
#rf-body h3, #rf-body .h3 {
  font-size: 2.197265625rem;
}
#rf-body h4, #rf-body .h4 {
  font-size: 1.7578125rem;
}
#rf-body h5, #rf-body .h5 {
  font-size: 1.40625rem;
}
#rf-body h5 + *, #rf-body .h5 + * {
  margin-top: 0.75rem;
}
#rf-body h6, #rf-body .h6 {
  font-size: 1.125rem;
}
#rf-body h6 + *, #rf-body .h6 + * {
  margin-top: 0.75rem;
}
#rf-body ul {
  line-height: var(--line-height);
}

a {
  font-family: var(--font-interactive);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.66667;
}

/*
File: header.css
This should contain overrides for the main header
*/
/*
TOP HEADER
*/
/*
MAIN HEADER
*/
#main-header #logo {
  max-height: 100%;
  height: 95%;
}

/*
MAIN MENU
*/
#main-header #top-menu li a {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-2);
}
#main-header #top-menu > li:last-child > a {
  border: 1px solid var(--color-2);
  padding: var(--size-small);
}
#main-header #top-menu > li:last-child > a::after {
  display: none;
}
#main-header #top-menu > li:last-child .sub-menu {
  margin-top: 16%;
}
#main-header #top-menu li ul {
  width: auto;
}
#main-header #top-menu li:last-child ul {
  right: 0 !important;
}
#main-header #top-menu li li a {
  width: auto;
  white-space: nowrap;
}
@media (max-width: 980px) {
  #main-header #et_search_icon,
  #main-header .select_page {
    display: none;
  }
  #main-header .mobile_menu_bar::before {
    color: var(--color-font-3);
    font-size: 3rem;
  }
  #main-header .mobile_nav.opened .mobile_menu_bar::before {
    content: "\4d";
  }
}

/*
INTERIOR PAGE OVERRIDES 
*/

/*
File: footer.css
This should contain overrides for the footer
*/
/*
MAIN FOOTER AREA
*/
#main-footer {
  background-color: var(--color-2);
}
#main-footer .footer-widget .et_pb_widget {
  width: 100%;
}
#main-footer .footer-widget li {
  padding-left: 0;
}
#main-footer .footer-widget li::before {
  display: none;
}
#main-footer .footer-widget li a {
  text-transform: uppercase;
}
#main-footer .footer-widget li a:hover {
  color: var(--color-1) !important;
}
#main-footer .footer-widget li a.icon {
  background-color: var(--color-ui-1);
  color: var(--color-2);
  display: flex;
  width: 3rem;
  height: 3rem;
  border-radius: 999rem;
  justify-content: center;
  align-items: center;
}
#main-footer .footer-widget img {
  filter: invert(0) brightness(100);
}
#main-footer .footer-widget .title {
  color: var(--color-font-inverse);
}
#main-footer .rf-footer-buttons-wrapper .et_pb_button {
  background-color: transparent;
  border: 1px solid var(--color-1);
  color: var(--color-1);
}
#main-footer .rf-footer-buttons-wrapper .et_pb_button:hover {
  background-color: var(--color-1);
  color: var(--color-ui-1);
}
#main-footer .rf-footer-buttons-wrapper .et_pb_button {
  padding: var(--size-small) !important;
  width: 100%;
  font-size: 16px;
  text-align: center;
}
#main-footer .rf-footer-buttons-wrapper .et_pb_button:first-child {
  margin-bottom: var(--size-medium);
}
#main-footer .rf-footer-buttons-wrapper .et_pb_button + .et_pb_button {
  margin-left: 0;
}

/*
BOTTOM BAR
*/
#footer-bottom {
  padding: 0;
}
#footer-bottom .container {
  max-width: none;
  width: auto;
}

#footer-keywords a {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-font-1);
}

#footer-info {
  width: 100%;
  padding: 0;
  text-align: center;
  line-height: 3rem;
}

#footer-info,
#footer-info a {
  color: var(--color-font-inverse);
}

/*
File: forms.css
This should contain overrides for forms
*/
/*
GENERAL FORM OVERRIDES
*/
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_wrapper form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 980px) {
  #rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_wrapper form {
    flex-flow: column nowrap;
    align-items: stretch;
  }
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .ginput_container,
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gfield {
  margin-top: 0;
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gfield_description a {
  font-weight: bold;
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_body {
  width: 75%;
}
@media (max-width: 980px) {
  #rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_body {
    width: 100%;
  }
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_footer {
  margin: 0;
  padding: 0;
  width: 25%;
}
@media (max-width: 980px) {
  #rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_footer {
    margin-top: var(--size-small);
    width: 100%;
  }
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_button {
  background-color: transparent;
  border: 1px solid var(--color-1);
  color: var(--color-1);
}
#rf-body .rf-newsletter-signup-section .rf-horizontal-newsletter .gform_button:hover {
  background-color: var(--color-1);
  color: var(--color-ui-1);
}
#rf-body .rf-newsletter-signup-section p,
#rf-body .rf-newsletter-signup-section p a {
  text-align: center;
  color: var(--color-font-inverse);
}
#rf-body .gform-body label {
  display: none;
}
#rf-body input,
#rf-body textarea {
  border: none;
  border-bottom: 3px double var(--color-3);
}
#rf-body .ginput_container input,
#rf-body .gform_footer .gform_button {
  padding: var(--size-small) var(--size-medium);
  line-height: 1.5rem;
}

/*
GRAVITY FORMS
*/
/*
MAILCHIMP NEWSLETTER SIGNUP
*/

/*
File: buttons.css
This should contain overrides for buttons
*/
/*
INDIVIDUAL BUTTON STYLES
*/
#rf-body .et_pb_button,
#rf-body .gform_button,
#rf-body [type=submit] {
  display: inline-block;
  line-height: var(--line-height) !important;
  padding: var(--size-small) var(--size-medium) !important;
  border: 1px solid transparent;
  color: var(--button-color);
  background-color: var(--button-background-color);
  text-transform: uppercase;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
}
#rf-body .et_pb_button:hover,
#rf-body .gform_button:hover,
#rf-body [type=submit]:hover {
  background-color: var(--color-font-1);
}
#rf-body .rf-blue-button {
  background-color: var(--color-2);
}
#rf-body .rf-button-deemphasized {
  background-color: transparent;
  border: 1px solid var(--color-1);
  color: var(--color-1);
}
#rf-body .rf-button-deemphasized:hover {
  background-color: var(--color-1);
  color: var(--color-ui-1);
}

/* 
MULTI-BUTTON LAYOUTS
*/
#rf-body .et_pb_button + .et_pb_button {
  margin-left: var(--size-medium);
}

/*
File: social-icons.css
This file is just for the inline social icon styles from the [rf_social_media] shortcode
*/
.rf-social-icons-inline {
  display: inline-block;
}
.rf-social-icons-inline .ul-social-et {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.rf-social-icons-inline .ul-social-et .et-social-icon {
  margin: 0 1em 0 0;
}
.rf-social-icons-inline .ul-social-et .et-social-icon:last-child {
  margin: 0;
}
.rf-social-icons-inline .ul-social-et .et-social-icon a {
  font-size: var(--icon-size);
}

/*
File: underline.css
This should contain the double underline styling across site
*/

/*
File: home.css
This should contain styles for testimonials and the slider
*/
#rf-body #rf_testimonial_slider_wrapper .owl-stage-outer {
  height: 52vh;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item {
  border: 1px solid var(--color-4);
  height: fit-content;
  margin-right: 3rem;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item.firstActiveItem {
  margin-left: 0 !important;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item.active {
  visibility: visible;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container {
  margin-left: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
  pointer-events: none;
  background-color: var(--color-ui-1);
  padding: 8% 4% !important;
  display: grid;
  grid-template-areas: "stars logo" "testimonial testimonial" ". author";
  height: 500px;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__stars {
  grid-area: stars;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__stars i {
  color: var(--color-3);
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__platform {
  grid-area: logo;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__review {
  grid-area: testimonial;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__author {
  grid-area: author;
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__author p {
  color: var(--color-font-3);
}
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__platform,
#rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container .rf-testimonial-card__author {
  justify-self: right;
}
@media (max-width: 980px) {
  #rf-body #rf_testimonial_slider_wrapper .owl-item .sa_hover_container {
    height: initial;
  }
}
@media (max-width: 980px) {
  #rf-body #rf_testimonial_slider_wrapper .owl-item {
    margin-right: var(--size-small);
  }
}

/*
File: home.css
This should contain overrides for home page
*/
#rf-body .rf-hero-section {
  padding: 0;
  height: 70vh;
}
#rf-body .rf-hero-section .et_pb_row,
#rf-body .rf-hero-section .et_pb_text_inner {
  padding: 0;
  height: 70vh;
}
@media (max-width: 980px) {
  #rf-body .rf-hero-section .et_pb_row,
  #rf-body .rf-hero-section .et_pb_text_inner {
    height: 35vh;
  }
}
#rf-body .rf-hero-section .et_pb_row {
  max-width: 100%;
  width: 100%;
}
#rf-body .rf-hero-section .et_pb_column {
  width: 33.3333333333%;
  margin-right: 0;
}
@media (max-width: 980px) {
  #rf-body .rf-hero-section .et_pb_column {
    margin-bottom: 0;
  }
}
#rf-body .rf-hero-section .rf-hero-battery .et_pb_text_inner {
  background: rgba(var(--color-1-rgb), 0.75);
}
#rf-body .rf-hero-section .rf-hero-maintenance .et_pb_text_inner {
  background: rgba(var(--color-font-1-rgb), 0.75);
}
#rf-body .rf-hero-section .rf-hero-maintenance .et_pb_text_inner h1 {
  color: var(--color-font-inverse);
}
#rf-body .rf-hero-section .rf-hero-leasing .et_pb_text_inner {
  background: rgba(var(--color-4-rgb), 0.75);
}
#rf-body .rf-hero-section .et_pb_text_inner {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 25%;
  text-align: center;
  transition: var(--transition-standard);
}
#rf-body .rf-hero-section .et_pb_text_inner .rf-hero-link {
  visibility: hidden;
  text-transform: uppercase;
  color: var(--color-1);
}
#rf-body .rf-hero-section .et_pb_text_inner .rf-hero-link::after {
  content: url(https://www.formulamarketingsd.com/sdhybrids/wp-content/uploads/2021/05/Arrow.svg);
  position: absolute;
  margin-left: var(--size-small);
}
@media (max-width: 980px) {
  #rf-body .rf-hero-section .et_pb_text_inner .rf-hero-link {
    visibility: visible;
  }
}
#rf-body .rf-hero-section .et_pb_text_inner:hover {
  transition: var(--transition-standard);
  background: rgba(var(--color-font-1-rgb), 0.6);
}
#rf-body .rf-hero-section .et_pb_text_inner:hover h1 {
  color: var(--color-1);
}
#rf-body .rf-hero-section .et_pb_text_inner:hover h1::after {
  content: "";
  border-bottom: 5px double var(--color-3);
  display: flex;
  justify-content: center;
  position: relative;
  margin: 1.5rem auto;
}
#rf-body .rf-hero-section .et_pb_text_inner:hover .rf-hero-link {
  visibility: visible;
}
@media (max-width: 980px) {
  #rf-body .rf-hero-section .et_pb_text_inner {
    background: rgba(var(--color-font-1-rgb), 0.6) !important;
  }
  #rf-body .rf-hero-section .et_pb_text_inner h1 {
    color: var(--color-font-inverse);
  }
  #rf-body .rf-hero-section .et_pb_text_inner h1::after {
    content: "";
    border-bottom: 5px double var(--color-3);
    display: flex;
    justify-content: center;
    position: relative;
    margin: 1.5rem auto;
  }
}
@media (max-width: 980px) {
  #rf-body .rf-hero-section {
    height: 35vh;
  }
}
#rf-body .rf-about-1col-row {
  width: 66%;
}
#rf-body .rf-about-3col-row {
  max-width: 100%;
  width: 90%;
}
#rf-body .rf-home-image-divider-section {
  height: 50vh;
}
#rf-body .rf-home-testimonials-row {
  max-width: 100%;
  width: 90%;
}
#rf-body .rf-home-latest-news-section {
  background-color: rgba(var(--color-2-rgb), 0.5);
  background-blend-mode: overlay;
}
#rf-body .rf-home-latest-news-section .et_pb_row:last-child {
  max-width: 100%;
  width: 90%;
}
#rf-body .rf-2up-cta-row {
  width: 40%;
}

/*
File: interior.css
This should contain overrides for interior pages
*/
#rf-body .rf-accordion .et_pb_toggle {
  border-color: var(--color-1);
  background-color: transparent;
}
#rf-body .rf-accordion .et_pb_toggle_title,
#rf-body .rf-accordion .et_pb_toggle_title::before {
  color: var(--color-1);
}

/*
File: blog.css
This should contain overrides for the news/blog section
*/
#rf-body .rf-blog-grid .et_pb_ajax_pagination_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5rem;
}
@media (max-width: 980px) {
  #rf-body .rf-blog-grid .et_pb_ajax_pagination_container {
    display: block;
  }
}
#rf-body .rf-blog-grid .entry-title,
#rf-body .rf-blog-grid .entry-title a {
  line-height: 2.5rem;
}
#rf-body .rf-blog-grid .entry-title::after {
  content: "";
  border-bottom: 5px double var(--color-3);
  display: flex;
  justify-content: center;
  position: relative;
  margin: 1.5rem auto;
}
#rf-body .rf-blog-grid .entry-title a {
  font-family: inherit;
  font-weight: bold;
}
#rf-body .rf-blog-grid article {
  padding: 5%;
  background-color: var(--color-ui-1);
}
#rf-body .rf-blog-grid .et_pb_image_container {
  margin: 0;
}
#rf-body .rf-blog-grid .post-content-inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#rf-body .rf-blog-grid .more-link {
  width: 100%;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  margin-top: var(--size-medium);
  color: var(--color-2);
  font-weight: bold;
}

/*
File: shop.css
This should contain overrides for shop pages
*/

.et-cart-info {
  display: none !important;
}

#rf-body .et_pb_shop .woocommerce-result-count,
#rf-body .et_pb_shop .woocommerce-ordering {
  display: none !important;
}
#rf-body .et_pb_shop .product .woocommerce-loop-product__title {
  font-family: var(--font-title);
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
  padding-bottom: 0;
  font-size: 1.40625rem;
}
#rf-body .et_pb_shop .product .woocommerce-loop-product__title + * {
  margin-top: 0.75rem;
}
#rf-body .et_pb_shop .product .price {
  text-align: center;
  font-weight: bold;
  font-size: 1.125rem;
  color: var(--color-1) !important;
}

#rf-body.single-product .et_pb_wc_tabs {
  border: none;
}
#rf-body.single-product .et_pb_tabs_controls {
  display: none;
}
#rf-body.single-product .et_pb_tab {
  padding: 0;
}
#rf-body.single-product .et_section_specialty .et_pb_tab h2 {
  display: none;
}

/*
File: login.css
This only gets enqueued in the login pages
*/
body.login {
  background-color: var(--color-ui-1);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 100%), url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80);
  background-size: cover;
  color: var(--color-font-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--line-height);
  display: flex;
  justify-content: center;
}

#login {
  width: 100%;
  max-width: 48rem;
  padding: var(--size-large) 12rem;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: rgba(var(--color-ui-1-rgb), 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 767px) {
  #login {
    padding: var(--size-large) clamp(48px, 3rem + (1vw - 5.76px) * 75.3927, 192px);
  }
}
@media (max-width: 479px) {
  #login {
    padding: var(--size-large) var(--size-medium);
  }
}
#login label {
  color: var(--color-font-3);
  line-height: var(--line-height);
  margin-bottom: 0;
}
#login input {
  transition: all 0.25s ease;
}
#login input[type=text],
#login input[type=password] {
  font-size: 1rem;
  line-height: var(--line-height);
  padding: var(--size-small) var(--size-medium);
  background: transparent;
  border-color: rgba(57, 53, 54, 0.5);
  border-radius: 0;
}
#login input[type=text]:focus,
#login input[type=password]:focus {
  background: var(--color-ui-1);
  box-shadow: 0 0 0 1px var(--color-1);
}
#login input[type=checkbox] {
  border-color: rgba(57, 53, 54, 0.5);
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
#login button.wp-hide-pw {
  height: 3rem;
  width: 3rem;
  top: 1px;
  right: 1px;
  color: var(--color-1);
}
#login input[type=submit] {
  font-size: 1rem;
  line-height: var(--line-height);
  padding: var(--size-small) var(--size-medium);
  font-family: var(--font-interactive);
  background-color: var(--color-1);
  color: var(--color-font-inverse);
  border-radius: 0;
  border: none;
}
#login input[type=submit]:hover {
  background-color: var(--color-2);
}

#loginform {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

#login h1 a {
  height: 65px;
  width: 320px;
  background-size: 320px 65px;
  background-repeat: no-repeat;
  padding-bottom: 30px;
}

#login a {
  color: var(--color-1);
  transition: all 0.25s ease;
}

#login #backtoblog a,
#login #nav a {
  color: var(--color-font-3);
}
#login #backtoblog a:hover,
#login #nav a:hover {
  color: var(--color-1);
}