/*!

Theme Name: Uncle Henry's 

Theme URI: https://unclehenrys.co.uk

Author: the Urban Feather team

Author URI: https://urbanfeather.com

Description: A fully editable theme for Uncle Henry's.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: unclehenrys.co.uk



This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

*/ /*!

 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com

 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

 */

@font-face {
  font-family: "Butcherandblock";

  src: url("../fonts/Butcherandblock/Butcherandblock.otf");
}

@font-face {
  font-family: "Butcherandblock Extras";

  src: url("../fonts/Butcherandblock/ButcherandblockExtras.otf");
}

/* default styles  */

/* Set the width and height of the scrollbar */

::-webkit-scrollbar {
  width: 12px;
}

/* Style the track (the background) of the scrollbar */

::-webkit-scrollbar-track {
  background-color: #f1f1f18f;
}

/* Style the thumb (the handle) of the scrollbar */

::-webkit-scrollbar-thumb {
  background-color: #332f217e;

  border-radius: 5px;
}

/* Style the corner where two scrollbars meet */

::-webkit-scrollbar-corner {
  background-color: #f1f1f18f;
}

/* Style the resizer (the drag handle that appears at the bottom-right corner of some scrollbars) */

::-webkit-resizer {
  background-color: #332f217e;
}

::selection {
  background-color: #332f217e;

  color: #fff;
}

.customize-support .announcement-wrapper {
  top: 2rem;
}

.customize-support .scroll-nav-svg {
  top: 2rem;
}

.customize-support .nav-scroll.nav-wrapper {
  top: calc(50% - 8px + 2rem);
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}

.section-starts {
  margin-top: 150px;
}

.inner-container {
  max-width: 1290px;

  margin: 0 auto;

  padding: 0 1rem;
}

@media (min-width: 1500px) {
  .inner-container {
    max-width: 1440px;

    margin: 0 auto;

    padding: 0 1rem;
  }
}

.heading {
  font-size: 1.875rem /* 30px */;

  line-height: 2.25rem /* 36px */;

  font-weight: 700;
}

.subheading {
  font-size: 1.5rem /* 24px */;

  line-height: 2rem /* 32px */;

  font-weight: 600;
}

.largeText {
  font-size: 1.225rem;

  line-height: 1.75rem /* 28px */;

  font-weight: 500;
}

.mediumText {
  font-size: 1.125rem /* 18px */;

  line-height: 1.75rem /* 28px */;

  font-weight: 500;
}

.baseText {
  font-size: 1rem /* 16px */;

  line-height: 1.5rem /* 24px */;

  font-weight: normal;
}

.smallText {
  font-size: 0.75rem /* 12px */;

  line-height: 1.25rem /* 36px */;

  font-weight: 400;
}

@media (min-width: 768px) {
  .heading {
    font-size: 2.25rem /* 36px */;

    line-height: 2.5rem /* 40px */;
  }

  .subheading {
    font-size: 1.875rem /* 30px */;

    line-height: 2.25rem /* 36px */;

    font-weight: 600;
  }

  .largeText {
    font-size: 1.5rem /* 24px */;

    line-height: 2rem /* 32px */;

    font-weight: 500;
  }

  .mediumText {
    font-size: 1.225rem /* 20px */;

    line-height: 2.25rem /* 36px */;

    font-weight: 500;
  }

  .baseText {
    font-size: 1.125rem /* 18px */;

    line-height: 1.75rem /* 28px */;

    font-weight: normal;
  }

  .smallText {
    font-size: 0.875rem /* 14px */;

    line-height: 1.25rem /* 20px */;

    font-weight: 400;
  }
}

@media (min-width: 1024px) {
  .heading {
    font-size: 3rem /* 48px */;

    line-height: 1;
  }

  .subheading {
    font-size: 1.875rem /* 30px */;

    line-height: 2.25rem /* 36px */;

    font-weight: 600;
  }

  .largeText {
    font-size: 1.5rem /* 24px */;

    line-height: 2rem /* 32px */;

    font-weight: 600;
  }

  .mediumText {
    font-size: 1.35rem;

    line-height: 2.25rem /* 36px */;

    font-weight: 500;
  }

  .baseText {
    font-size: 1.25rem /* 20px */;

    line-height: 2.25rem /* 28px */;

    font-weight: normal;
  }

  .smallText {
    font-size: 1rem /* 16px */;

    line-height: 1.5rem /* 24px */;

    font-weight: 400;
  }
}

.cursor {
  position: fixed;

  pointer-events: none;

  opacity: 0;
}

.cursor-one {
  top: -15px;

  left: -13px;

  z-index: 999999;
}

.cursor-three {
  top: -10px;

  left: 20px;

  z-index: 999999;
}

.cursor-phone,
.cursor-mail {
  top: -50px;

  left: -13px;

  z-index: 999999;
}

.cursor-two {
  top: -100px;

  left: -50px;

  padding: 20px;

  z-index: 9;
}

.cursor-two .findoutmoreBtn {
  width: 100px;

  height: 100px;

  border-radius: 50%;

  background-color: #00cadc;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: "Poppins Bold";

  color: #332f21;

  font-size: 14px;

  word-wrap: break-word;

  text-align: center;

  flex-wrap: wrap;

  padding: 10px;
}

.circle-cursor {
  width: 30px;

  height: 30px;

  background: #00cadc;

  border: 3px solid #00cadc;

  border-radius: 50%;

  transition: all 0.5s ease-in-out;

  position: relative;

  z-index: 10;
}

.cursor .icon {
  padding: 5px 10px;

  background: #332f21;

  border-radius: 100%;

  transition: all 0.5s ease-in-out;

  position: relative;

  z-index: 10;
}

/* text-reveal  */

.banner-text,
.banner-paragraph,
.reveal-item {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.banner-text .char,
.reveal-item .char,
.banner-paragraph .char {
  transform: translateY(215px);

  transition: transform 0.5s;

  opacity: 0;
}

.banner-cta {
  position: relative;

  opacity: 1;
}

.swipe-item {
  transform: translateY(100px);

  opacity: 0;

  visibility: hidden;
}

.announcement-wrapper {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 80px;

  z-index: 99999;
}

.announcement {
  position: absolute;

  top: 55%;

  padding: 10px;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  transition: font-family 0.3s ease-in-out;
}

.announcement-bg {
  height: 110px;

  top: -30px;

  position: relative;

  left: -2px;

  width: calc(100% + 2px);

  filter: drop-shadow(0px 1px 6px #0000005e);
}

.header-container {
  position: relative;

  padding-top: 100px;
}

.logo-container {
  position: relative;

  top: 0px;
}

.additional-header-links .additional-header-link {
  position: relative;
}

.additional-header-links .additional-header-link::after {
  content: "|";

  display: inline-block;

  padding-left: 10px;
}

.additional-header-links .additional-header-link:last-child:after {
  content: "|";

  display: none;

  padding-left: 2px;
}

.additional-header-links .additional-header-link a {
  transition: color 0.3s ease-in-out;
}

.additional-header-links .additional-header-link a:hover {
  color: #cfb023;

  transition: color 0.3s ease-in-out;
}

.search-bar-container {
  position: relative;
}

.search-form-container {
  position: relative;
}

.search-bar {
  padding-right: 44px;

  padding-left: 20px;

  background: url(../images/icons/search-field.svg) no-repeat;

  outline: none;

  background-size: cover;
}

.search-bar-icon {
  position: absolute;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  display: inline-block;

  -o-object-fit: cover;

  object-fit: cover;

  z-index: 1;

  width: 30px;

  background: url(../images/icons/search_icon.svg) no-repeat;

  background-size: contain;
}

.js-search-results {
  color: #332f21;

  width: 100%;

  text-align: left;

  z-index: 9;

  position: relative;

  display: flex;

  flex-direction: column;

  position: absolute;

  bottom: 0;

  transform: translateY(100%);
}

.js-search-results a {
  background-color: #f0f2f5;

  padding: 10px;

  border-bottom: #332f2143 1px solid;

  width: 100%;

  display: block;
}

.search-item {
  width: 100%;
}

@media (min-width: 768px) {
  .search-item {
    width: calc(100% / 3 - 40px);
  }
}

/* news and events template styles  */

#posts-container .news-events-item {
  width: 100%;

  overflow: hidden;
}

.news-events-item:hover h2 {
  color: #a0ab4d;
}

.news-events-item img {
  transition: all 0.3s ease-in-out;

  overflow: hidden;
}

.news-events-item:hover img {
  transform: scale(1.1);

  transition: all 0.3s ease-in-out;
}

@media (min-width: 768px) {
  #posts-container .news-events-item {
    width: calc(100% / 3 - 40px);

    overflow: hidden;
  }
}

.nav-links-container {
  position: relative;

  top: -20px;
}

.nav-background {
  position: relative;

  width: calc(100% + 5px);

  height: 100%;

  left: -5px;

  transition: all 0.5s ease-in-out;

  z-index: 4;
}

.nav-background-svg {
  width: 100%;

  height: 270px;
}

.mug-steam-container {
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.nav-links-wrapper {
  position: absolute;

  bottom: 12%;

  left: 50%;

  width: 100%;

  transform: translateX(-50%);
}

.nav-links {
  width: 100%;

  text-align: center;
}

@media (min-width: 1680px) {
  .nav-links {
    font-size: 2.25rem !important /* 30px */;

    line-height: 2.5rem !important /* 36px */;
  }
}

.scroll-nav-links-container {
  position: fixed;

  top: 40px;

  left: 0;

  width: 100%;

  z-index: 9999;

  transition: all 0.3s ease-in-out;

  filter: drop-shadow(0px 1px 6px #00000063);
}

@media (min-width: 1040px) {
  .scroll-nav-links-container {
    top: 35px;
  }
}

@media (min-width: 1680px) {
  .scroll-nav-links-container {
    top: 50px;
  }
}

.scroll-nav-bg {
  position: relative;

  left: -4px;

  width: calc(100% + 4px);
}

.nav-scroll.nav-wrapper {
  position: absolute;

  top: calc(50% - 15px);

  left: 50%;

  width: 100%;

  transform: translateX(-50%);
}

.nav-links-container .scroll-nav-links-container {
  transform: translateY(-100px);

  transition: transform 0.5s ease-in-out;
}

.nav-links-container.active .scroll-nav-links-container {
  transform: translateY(0px);

  transition: transform 0.5s ease-in-out;
}

.scroll-nav-svg {
  min-width: 100%;

  position: relative;

  top: -10px;

  height: 120px;
}

.header-nav-svg {
  width: 100%;

  position: relative;

  top: -15px;

  height: 120px;
}

/* nav-submenu  */

.nav-link {
  position: relative;

  height: 100%;

  height: 4rem;

  padding: 0rem 1rem;
}

.nav-scroll .nav-link {
  position: relative;

  height: 100%;

  height: 3.5rem;
}

.nav-link.current_page_item,
.nav-link:has(.sub-menu).current-menu-parent,
.nav-link:has(.sub-menu).current-menu-parent .current-menu-item {
  color: #cfb023;
}

.nav-link:has(.sub-menu)::after {
  content: "";

  display: inline-block;

  background: url(../images/icons/dropdown.svg);

  background-repeat: no-repeat;

  background-position: right;

  background-size: cover;

  width: 40px;

  height: 40px;

  position: absolute;

  transition: transform 0.3s ease-in-out;

  right: -25px;

  top: calc(50% + 2rem);

  transform: translateY(calc(-50% - 3rem));
}

.nav-link:hover:has(.sub-menu)::after {
  transition: transform 0.3s ease-in-out;

  transform: translateY(calc(-50% - 3rem)) rotate(180deg);

  transform-origin: center center;
}

.nav-link:hover {
  color: #ddcba4;
}

.nav-link:has(.sub-menu) .sub-menu {
  background-color: #f0f2f5;

  color: #332f21;

  position: absolute;

  top: 3rem;

  left: 0%;

  width: 300px;

  text-align: left;

  display: none;

  z-index: 1;
}

.nav-link:has(.sub-menu) .sub-menu::before {
  content: "";

  display: block;

  width: 0;

  height: 0;

  border-style: solid;

  position: relative;

  top: -10px;

  left: 10px;

  border-width: 0 15px 15px 15px;

  border-color: transparent transparent #f0f2f5 transparent;
}

.nav-link:hover:has(.sub-menu) .sub-menu {
  display: block;
}

.nav-link:has(.sub-menu) .sub-menu li {
  border-bottom: #332f2143 1px solid;

  padding: 2rem 1.5rem;

  font-size: 1.2rem;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  font-family: "adelle", serif;

  font-weight: 600;

  font-style: normal;

  line-height: 1.2em;
}

.nav-link:has(.sub-menu) .sub-menu li:hover {
  color: #cfb023;
}

@media (min-width: 768px) {
  .nav-link:has(.sub-menu) .sub-menu li {
    font-size: 1.3rem;
  }
}

@media (min-width: 1024px) {
  .nav-link:has(.sub-menu) .sub-menu li {
    font-size: 1.3rem;
  }
}

.nav-link:has(.sub-me nu) .sub-menu li:last-child {
  border-bottom: #332f2142 0px solid;
}

/* mobile nav styles */

.scroll-nav-links-container {
  position: fixed;

  top: 50px;

  left: 0;

  width: 100%;

  z-index: 9999;
}

.mobile-scroll-nav-links-container {
  position: fixed;

  top: 40px;

  left: -2px;

  width: calc(100% + 2px);

  z-index: 999;
}

.mobile-scroll-nav-links-container {
  transform: translateY(-100px);

  transition: transform 0.5s ease-in-out;
}

.mobile-scroll-nav-links-container.active {
  transform: translateY(0px);

  transition: transform 0.5s ease-in-out;
}

.mobile-scroll-nav-bg {
  position: relative;

  filter: drop-shadow(0px 1px 6px #00000060);
}

.mobile-scroll-nav-bg .mobile-scroll-nav-svg {
  height: 120px;

  width: 100%;
}

.mobile-humburger-container {
  position: absolute;

  top: 58%;

  left: 0;

  transform: translateY(-50%);

  width: 100%;

  z-index: 4;
}

.mobile-header-svg-wrapper {
  width: 110%;

  position: relative;

  left: -5%;

  bottom: -10px;
}

.mobile-nav-bottom-svg-wrapper {
  position: relative;

  left: -20px;
}

.mobile-nav-bottom-svg {
  min-width: 100%;

  height: 75px;

  width: calc((100% + 40px));
}

.humburger-static {
  position: absolute;

  top: 15%;

  left: calc(50% + 20px);

  justify-content: center;

  height: 60px;

  transform: translateX(-50%);

  transition: height 0.2s ease-in-out;

  width: 100%;

  background: #642f6c;
}

.humburger-static.active {
  position: fixed;

  background: #642f6c;

  top: 93%;

  width: 100%;

  left: 50%;

  height: 60px;

  justify-content: center;

  align-items: center;

  padding: 0.8rem;

  transition: height 0.2s ease-in-out;

  transform: translateX(-50%);

  z-index: 9999;
}

.humburger-btn {
  width: 36px;

  height: 27px;

  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: relative;

  top: -2px;
}

.humburger-btn .icon-left {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  height: 6px;

  width: 20px;

  top: 12px;

  background-color: #ffffff;

  left: 0px;
}

.humburger-btn .icon-left:before {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  width: 20px;

  height: 6px;

  background-color: #ffffff;

  content: "";

  top: -12px;
}

.humburger-btn .icon-left:after {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  width: 20px;

  height: 6px;

  background-color: #ffffff;

  content: "";

  top: 12px;
}

.humburger-btn .icon-left:hover {
  cursor: pointer;
}

.humburger-btn .icon-right {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  height: 6px;

  width: 20px;

  top: 12px;

  background-color: #ffffff;

  left: 15px;
}

.humburger-btn .icon-right:before {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  width: 20px;

  height: 6px;

  background-color: #ffffff;

  content: "";

  top: -12px;
}

.humburger-btn .icon-right:after {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  position: absolute;

  width: 20px;

  height: 6px;

  background-color: #ffffff;

  content: "";

  top: 12px;
}

.humburger-btn.open .icon-left {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  background: transparent;
}

.humburger-btn.open .icon-left:before {
  transform: rotateZ(45deg) scaleX(1.2) translate(3px, 3px);
}

.humburger-btn.open .icon-left:after {
  transform: rotateZ(-45deg) scaleX(1.2) translate(3px, -3px);
}

.humburger-btn.open .icon-right {
  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  background: transparent;
}

.humburger-btn.open .icon-right:before {
  transform: rotateZ(-45deg) scaleX(1.2) translate(-3px, 3px);
}

.humburger-btn.open .icon-right:after {
  transform: rotateZ(45deg) scaleX(1.2) translate(-3px, -3px);
}

.humburger-btn:hover {
  cursor: pointer;
}

.humburger-text {
  transition: all 0.3s ease-in-out;
}

.mobile-menu-container {
  background-color: #642f6c;

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

  opacity: 1;

  transform: translateY(500%);

  transition: transform 0.3s ease-in-out;
}

.mobile-menu-container.open {
  width: 100%;

  height: 100%;

  transform: translateY(0px);

  transition: transform 0.3s ease-in-out;
}

.customize-support #mobileFirstfold {
  margin-top: 65px;

  width: 100%;

  overflow: hidden;

  height: calc(100vh - 100px);

  position: relative;
}

.customize-support .mobile-scroll-nav-links-container.page-nav {
  position: fixed;

  top: 170px;

  left: -2px;

  width: calc(100% + 2px);

  z-index: 999;

  transform: translateY(-100px);

  transition: transform 0.5s ease-in-out;
}

.mobile-scroll-nav-links-container.page-nav {
  position: fixed;

  top: 140px;

  left: -2px;

  width: calc(100% + 2px);

  z-index: 999;

  transform: translateY(-100px);

  transition: transform 0.5s ease-in-out;
}

.mobile-menu-container .menu-header-menu-container {
  height: 100vh;

  overflow-y: scroll;

  overflow-x: hidden;
}

.mobile-nav-links {
  position: relative;

  top: 130px;

  padding: 1.5rem;

  padding-bottom: 4rem;
}

.mobile-nav-links.page {
  position: relative;

  top: 130px;

  padding: 1.5rem;

  padding-top: 4rem;

  padding-bottom: 1.5rem;
}

.mobile-nav-link {
  font-size: 1.5rem;

  padding: 1rem 0rem;

  border-bottom: 1px solid #332f21;

  position: relative;
}

.mobile-menu-container .mobile-nav-link:has(.sub-menu)::after {
  content: "";

  display: inline-block;

  background: url(../images/icons/dropdown.svg);

  background-repeat: no-repeat;

  background-position: right;

  background-size: cover;

  width: 40px;

  height: 40px;

  position: absolute;

  transition: transform 0.3s ease-in-out;

  right: 0px;

  top: 50%;

  transform: translateY(-50%) rotate(-90deg);
}

.mobile-menu-container .mobile-nav-link:has(.sub-menu):hover::after {
  top: 10%;

  transform: translateY(-50%) rotate(0deg);

  transition: transform 0.3s ease-in-out;
}

.mobile-menu-container .mobile-nav-link:has(.sub-menu):hover {
  padding: 1rem 0rem 0rem 0rem;
}

.mobile-menu-container .mobile-nav-link:has(.sub-menu) .sub-menu {
  display: none;
}

.mobile-menu-container .mobile-nav-link:has(.sub-menu):hover .sub-menu {
  display: block;

  padding-top: 1rem;
}

.mobile-menu-container
  .mobile-nav-link:has(.sub-menu)
  .sub-menu
  .mobile-nav-link {
  font-size: 1.1rem;

  padding: 0.8rem 1rem;

  border-bottom: 1px solid #332f21;
}

.mobile-menu-container
  .mobile-nav-link:has(.sub-menu)
  .sub-menu
  .mobile-nav-link:last-child {
  border-bottom: none;
}

.customize-support .mobile-scroll-nav-links-container.active {
  transform: translateY(0px);

  top: 65px;

  transition: transform 0.5s ease-in-out;
}

/* Bread Crumbs Styles */

.bread-crumbs {
  padding-top: 80px;
}

.bread-crumbs-links {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-direction: row;

  font-family: "adelle", serif;

  font-weight: 500;

  font-style: normal;

  color: #cfb023;

  font-size: 1.2rem;
}

.bread-crumbs-links .bread-crumbs-link {
  position: relative;
}

.bread-crumbs-links .bread-crumbs-link::after {
  content: ">";

  display: inline-block;

  padding: 0rem 1rem;

  color: #ffffff;
}

.bread-crumbs-links .bread-crumbs-link:last-child:after {
  content: ">";

  display: none;

  padding: 0rem 1rem;

  color: #ffffff;
}

/* first fold styles */

#mobileFirstfold {
  margin-top: 100px;

  width: 100%;

  overflow: hidden;

  height: calc(100vh - 100px);

  position: relative;
}

.mobile-menu-header {
  position: absolute;

  bottom: 0;

  left: 0;
}

.mobile-menu-header .mobile-menu-header-svg {
  width: 110%;

  height: 230px;

  margin-left: -5%;
}

.mobile-logo-container {
  margin-bottom: 250px;
}

/* Banner Styles */

.banner-container {
  position: relative;

  overflow: hidden;
}

.page-slider .banner-container {
  margin-top: 8rem;

  position: relative;

  overflow: hidden;
}

.banner-container::after {
  content: "";

  background: url(../images/header/banner-horizontal-bottom.png) no-repeat;

  position: absolute;

  bottom: -25px;

  background-size: cover;

  left: 0;

  min-width: 101%;

  height: 50px;

  z-index: 3;
}

.banner-description h1 {
  font-size: 1.8rem;

  line-height: 1.5em;

  font-weight: 600;

  margin-top: 1rem;
}

.banner-description h2 {
  font-size: 1.5rem;

  line-height: 1.5em;

  font-weight: 600;

  margin-top: 1rem;
}

.banner-description h3 {
  font-size: 1.3rem;

  line-height: 1.5em;

  font-weight: 600;

  margin-top: 1rem;
}

.banner-description .banner-description-wrapper {
  line-height: 1.5em;

  margin-top: 1rem;

  height: 300px;

  overflow-y: scroll;

  padding-right: 1rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.banner-description p {
  font-size: 1rem;

  line-height: 1.5em;
}

.banner-description ::-webkit-scrollbar {
  width: 5px;

  margin-left: 1rem;
}

/* Set the color of the scrollbar */

.banner-description ::-webkit-scrollbar-track {
  background-color: #00000000;
}

/* Set the color and style of the thumb */

.banner-description ::-webkit-scrollbar-thumb {
  background-color: #efeeee00;

  border-radius: 5px;

  width: 5px;
}

/* Change the appearance of the scrollbar on hover */

.banner-description:hover ::-webkit-scrollbar-thumb {
  background-color: #c9c9c982;

  width: 5px;
}

/* Firefox scrollbar */

.banner-description {
  scrollbar-width: thin;

  scrollbar-color: #efeeee00 #00000000;
}

.banner-description:hover {
  scrollbar-width: thin;

  scrollbar-color: #c9c9c982 #00000000;
}

.banner-description ::-moz-scrollbar-thumb {
  background-color: #efeeee00;

  border-radius: 5px;

  width: 5px;
}

.banner-description:hover ::-moz-scrollbar-thumb {
  background-color: #555;
}

.slide .banner-description .slide-content-vector {
  display: none;
}

.slide.homepage:first-child .banner-description .slide-content-vector {
  display: block;
}

@media (min-width: 768px) {
  .banner-container {
    margin-top: -50px;

    position: relative;

    overflow: hidden;
  }

  .banner-description h1 {
    font-size: 2.25rem /* 30px */;
  }

  .banner-description h2 {
    font-size: 2rem /* 30px */;
  }

  .banner-description h3 {
    font-size: 1.875rem /* 30px */;
  }

  .banner-description p {
    font-size: 1.3rem;

    line-height: 1.5em;
  }

  .banner-description .banner-description-wrapper {
    height: 350px;

    overflow-y: scroll;
  }
}

@media (min-width: 1680px) {
  .banner-container {
    margin-top: -70px;
  }

  .page-slider .banner-container {
    margin-top: 8rem;
  }
}

/* Slider container */

.slider {
  position: relative;

  height: 700px;
}

@media (min-width: 768px) {
  .slider {
    position: relative;

    height: 600px;
  }
}

@media (min-width: 1680px) {
  .slider {
    position: relative;

    height: 700px;
  }
}

/* Slides */

.slide {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.5s ease-in-out;
}

/* Show active slide */

.slide.active {
  opacity: 1;
}

/* Slide content */

.slide-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

  z-index: 3;
}

.slide-content-vMask {
  position: absolute;

  right: -228px;

  top: -34px;

  height: 734px;

  width: auto;

  z-index: 2;
}

/* Slide image */

.slide-image {
  position: relative;
}

/* Navigation arrows */

.prev-arrow,
.next-arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 3;

  cursor: pointer;
}

.prev-arrow {
  left: 10px;
}

.next-arrow {
  right: 10px;
}

.dots-container {
  position: absolute;

  bottom: 50px;

  z-index: 3;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;
}

.dots-container .dot {
  width: 15px;

  height: 15px;

  background: #999;

  border-radius: 50%;

  transition: all 0.2s ease-in-out;

  cursor: pointer;
}

.dots-container .dot:hover {
  background: #ffffffad;
}

.dots-container .dot.active {
  width: 20px;

  height: 20px;

  background: #fff;

  transition: all 0.2s ease-in-out;
}

.dots-container.hidden {
  display: none;
}

/* service box styles  */

.services-boxes {
  width: 100%;
}

.service-box {
  width: 100%;

  overflow: hidden;
}

@media (min-width: 768px) {
  .service-box {
    width: calc(100% / 3 - 40px);
  }
}

.service-box .service-box-title {
  transition: all 0.3s ease-in-out;

  position: relative;
}

.service-box:hover .service-box-title {
  background-color: #cfb023;

  transition: all 0.3s ease-in-out;
}

.service-box img {
  transition: all 0.3s ease-in-out;

  overflow: hidden;
}

.service-box:hover img {
  transform: scale(1.1);

  transition: all 0.3s ease-in-out;
}

/* News letter styles  */

.newsletter-container {
  position: relative;

  height: 100%;
}

.newsletter-bg {
  position: relative;

  width: 100%;

  height: auto;

  background-attachment: fixed;

  background: url(../images/newsletter-background.jpg);

  background-blend-mode: overlay;

  padding: 6rem 0rem;

  background-size: cover;

  background-repeat: no-repeat;
}

.newsletter-container {
  position: relative;
}

.newsletter-container .input-container input {
  padding: 1.2rem;

  font-size: 1.2rem;

  width: 100%;

  border-radius: 5px;

  background: url(../images/icons/newsletter-text-field.svg) no-repeat;

  outline: none;

  font-weight: normal;

  background-size: cover;
}

.newsletter-container .input-container input:active,
.newsletter-container .input-container input:hover,
.newsletter-container .input-container input:focus {
  background: url(../images/icons/newsletter-text-field-hover.svg) no-repeat;

  background-size: cover;
}

.newsletter-container .input-container-submit {
  display: flex;

  justify-content: center;

  align-items: flex-start;
}

.newsletter-container .submit-btn-bg {
  width: 100%;

  position: relative;

  cursor: pointer;
}

.newsletter-container .submit-btn-bg:hover .submit-btn {
  color: #cfb023;
}

.newsletter-container .submit-btn-bg img {
  width: 100%;
}

.newsletter-container .submit-btn {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  cursor: pointer;
}

/* Instagram Feed styles */

.instagram-feed-container {
  position: relative;
}

.inner-if-container {
  z-index: 2;

  position: relative;
}

.if-wrapper img {
  width: 100%;
}

.if-follow-btn a {
  transition: background-color 0.3s ease-in-out;
}

.if-follow-btn:hover a {
  transition: background-color 0.3s ease-in-out;

  background-color: #cfb023;
}

.if-gridboxes-container .gridbox h2 {
  font-family: "adelle", serif;

  font-weight: 700;

  font-style: normal;

  font-size: 2rem;

  line-height: 1em;

  color: #fff;
}

.if-gridboxes-container .gridbox h1 {
  font-family: "adelle", serif;

  font-weight: 700;

  font-style: normal;

  line-height: 1.2em;

  font-size: 4.5rem;

  color: #fff;
}

.if-gridboxes-container .gridbox i {
  font-family: "adelle", serif;

  font-style: normal;

  line-height: 1.5em;

  font-size: 1rem;

  color: #fff;

  margin-top: 0.8rem;
}

@media (min-width: 768px) {
  .if-wrapper img {
    width: calc(100% / 4 - 5px);
  }

  .if-gridboxes-container .gridbox h2 {
    font-family: "adelle", serif;

    font-weight: 700;

    font-style: normal;

    font-size: 2.5rem;

    line-height: 1em;

    color: #fff;
  }

  .if-gridboxes-container .gridbox h1 {
    font-family: "adelle", serif;

    font-weight: 700;

    font-style: normal;

    line-height: 1.2em;

    font-size: 9rem;

    color: #fff;
  }

  .if-gridboxes-container .gridbox i {
    font-family: "adelle", serif;

    font-style: normal;

    line-height: 1.5em;

    font-size: 1rem;

    color: #fff;

    margin-top: 1rem;
  }
}

/* footer container styles */

.footer-bg-container {
  position: relative;
}

.clouds-container {
  position: absolute;

  top: -236%;

  left: 0;

  width: 100%;

  overflow: hidden;

  z-index: -1;
}

.cloud-svg-container {
  width: 300%;

  z-index: 1;
}

.footer-columns-container h2 {
  font-family: "adelle", serif;

  font-size: 1.5rem;

  font-weight: 700;
}

.footer-columns-container h3 {
  font-family: "adelle", serif;

  font-size: 1.3rem;

  font-weight: 600;
}

@media (max-width: 767px) {
  .footer-columns-container .footer-column:first-child {
    width: 100%;
  }

  .footer-columns-container .footer-column {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .footer-columns-container .footer-column:first-child {
    width: calc(40% - 10px);
  }

  .footer-columns-container .footer-column {
    width: calc(30% -40px);
  }
}

@media (min-width: 1024px) {
  .footer-columns-container .footer-column:first-child {
    width: calc(40% - 10px);
  }

  .footer-columns-container .footer-column {
    width: calc(30% -40px);
  }
}

/* page styles */

.banner-page-container {
  height: 400px;
}

.banner-search-container {
  height: 400px;
}

.banner-search-container .banner-page-content {
  padding-top: 8rem;

  width: 100%;
}

.banner-page-bg {
  height: 100%;

  width: 100%;

  object-fit: cover;
}

.banner-contents-container {
  position: relative;

  width: 100%;

  height: 100%;
}

.banner-contents {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;
}

.banner-page-content {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 95%;
}

.banner-page-content a {
  color: #ab2328;

  font-weight: 600;
}

/* pyv page styles */

.pyv-color-svg-container {
  background: url(../images/large-content-box.png) no-repeat;

  height: 100%;

  width: 100%;

  background-size: cover;
}

.pyv-color-svg {
  width: 100%;

  height: 100%;
}

.list-items ul li {
  list-style-type: disc;
}

.page-template b {
  font-weight: 700;

  color: #ab2328;

  font-size: 1.3em;
}

.page-suggestion {
  transition: all 0.3s ease-in-out;

  overflow: hidden;

  cursor: pointer;
}

.page-suggestion img {
  transition: all 0.3s ease-in-out;
}

.page-suggestion h3 {
  position: relative;

  z-index: 1;

  overflow: hidden;
}

.page-suggestion:hover img {
  transform: scale(1.1) skew(-1deg);

  transition: all 0.3s ease-in-out;
}

.page-suggestion:hover h3 {
  color: #ddcba4;
}

/* faq template  */

.faq-item a {
  color: #cfb023;
}

@media (min-width: 768px) {
  .faq-items-container {
    display: grid;

    justify-content: center;

    align-items: start;

    gap: 2rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    height: 100%;
  }

  .faq-item-wrapper {
    height: 100%;

    border-radius: 50px;
  }

  .faq-item-wrapper:nth-child(n) {
    background: url(../images/icons/large-content-box-fennel.svg) no-repeat left
      top;

    background-size: cover;
  }

  .faq-item-wrapper:nth-child(2n) {
    background: url(../images/icons/large-content-box-damson.svg) no-repeat left
      top;

    background-size: cover;
  }

  .faq-item-wrapper:nth-child(3n) {
    width: 100%;

    grid-column: span 2 / span 2;

    padding-top: 40px;

    padding-left: 30px;

    background: url(../images/icons/large-content-box-charcoal.svg) no-repeat
      left top;

    background-size: cover;
  }
}

.mobile-faq-container {
  display: flex;

  flex-direction: column;
}

.mobile-faq-item-wrapper .mobile-faq-item {
  width: 100%;

  padding: 2rem;

  background: url(../images/icons/large-content-box-charcoal.svg) no-repeat left
    top;

  background-size: cover;
}

.mobile-faq-item-wrapper:nth-child(2n) .mobile-faq-item {
  width: 100%;

  padding: 2rem;

  background: url(../images/icons/large-content-box-damson.svg) no-repeat left
    top;

  background-size: cover;
}

.mobile-faq-item-wrapper:nth-child(3n) .mobile-faq-item {
  width: 100%;

  padding: 2rem;

  background: url(../images/icons/large-content-box-fennel.svg) no-repeat left
    top;

  background-size: cover;
}

/* contact us styles */

.cu-heading-info {
  background: url(../images/icons/large-content-box-damson.svg) no-repeat left
    top;

  background-size: cover;
}

.cu-form {
  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  column-gap: 3rem;

  row-gap: 4rem;

  justify-content: space-between;
}

.cu-form .input-container {
  width: calc(100% / 2 - 32px);

  position: relative;
}

.cu-form .input-container.input-container-textarea {
  width: 100%;

  position: relative;
}

.cu-form .input-container input {
  background: url(../images/icons/search-field.svg) no-repeat;

  outline: none;

  padding: 1.2rem;

  width: 100%;

  font-weight: normal;
}

.cu-form .input-container textarea {
  background: url(../images/icons/search-field.svg) no-repeat;

  outline: none;

  padding: 1.2rem;

  width: 100%;

  height: 150px;

  background-size: cover;
}

.cu-form .input-container input:active,
.cu-form .input-container input:hover,
.cu-form .input-container input:focus {
  background: url(../images/icons/search-field-hover.svg) no-repeat;
}

.cu-form .input-container-textarea textarea:hover,
.cu-form .input-container-textarea textarea:active,
.cu-form .input-container-textarea textarea:focus {
  background: url(../images/icons/search-field-hover.svg) no-repeat;

  background-size: cover;
}

.cu-form .input-container label {
  position: absolute;

  top: 45%;

  left: 16px;

  transform: translateY(-50%);

  opacity: 0.3;

  pointer-events: none;

  transition: all 0.3s ease-in-out;

  font-weight: normal;
}

.cu-form .input-container-textarea textarea label {
  font-weight: normal;

  position: absolute;

  top: 45%;

  left: 16px;

  transform: translateY(-50%);

  opacity: 0.3;

  pointer-events: none;

  transition: all 0.3s ease-in-out;
}

.cu-form .input-container label.active {
  top: calc(0% - 16px);

  transition: all 0.3s ease-in-out;

  opacity: 0.9;

  font-weight: 600;

  font-size: 1rem;

  left: 10px;
}

.cu-form .input-container-textarea ~ label.active {
  top: calc(0% - 16px);

  transition: all 0.3s ease-in-out;

  opacity: 0.9;

  font-weight: 600;

  font-size: 1rem;

  left: 10px;
}

/* Increase the size of the checkbox */

input[type="checkbox"] {
  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 20px;

  height: 20px;

  outline: none;

  cursor: pointer;

  background-color: #fff;
}

/* Style the custom checkbox */

input[type="checkbox"]:before {
  content: "";

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 1px solid #999;

  vertical-align: middle;

  background-color: #fff;

  position: relative;

  top: -2px;
}

/* Style the custom checkbox when checked */

input[type="checkbox"]:checked:before {
  content: "\2714";

  color: #222;

  text-align: center;

  font-size: 16px;

  line-height: 1.2em;
}

.check-box-container {
  margin-right: 10px; /* Add some margin to create space between checkbox and label */
}

.check-box-container + label {
  clear: both;

  text-align: initial;

  margin-left: 10px;

  font-weight: normal;
}

.input-container-submit {
  margin-top: 60px;

  text-align: center;
}

.input-container-submit .wpcf7-submit {
  background-color: #ab2328;

  padding: 0.75rem 1.5rem;

  color: white;

  position: relative;

  z-index: 2;

  border-radius: 0.5rem;

  cursor: pointer;
}

.input-container-submit .wpcf7-submit::before {
  content: "";

  background-color: #cfb023;

  width: 100%;

  height: 0%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 8px;

  transition: height 0.3s linear;

  z-index: -1;
}

.input-container-submit .wpcf7-submit:hover::before {
  content: "";

  background-color: #cfb023;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 8px;

  transition: height 0.3s linear;

  z-index: -1;
}

.wpcf7-not-valid-tip {
  color: #dc3232;

  font-size: 14px;

  font-weight: normal;

  position: absolute;

  left: 0;

  bottom: -56px;
}

.form-side-contents {
  /* width: calc(100%/2 - 2rem); */

  height: 100%;

  background: url(../images/icons/large-content-box-fennel.svg) no-repeat left
    top;

  background-size: cover;
}

.form-side-content p {
  margin-left: 32px;
}

.form-side-content h3 {
  margin-left: 32px;
}

@media (max-width: 767px) {
  .cu-form {
    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    -moz-column-gap: 3rem;

    column-gap: 3rem;

    row-gap: 4rem;

    width: 100%;

    justify-content: space-between;
  }

  .cu-form .input-container {
    width: 100%;

    position: relative;
  }

  .cu-form .input-container input {
    background-size: cover;

    font-weight: normal;
  }

  .cu-form .input-container input:active,
  .cu-form .input-container input:hover,
  .cu-form .input-container input:focus {
    background: url(../images/icons/search-field-hover.svg) no-repeat;

    background-size: cover;
  }
}

/* page default styles*/

.topLeft-page .top-content-container {
  flex-direction: col;
}

.topLeft-page .top-content-container .colourBox-content {
  font-size: 1.5rem;

  line-height: 3rem;

  font-weight: 500;
}

.topLeft-page .horizontal-colourBox-content {
  font-size: 1.5rem;

  line-height: 3rem;

  font-weight: 500;
}

@media (min-width: 768px) {
  .topLeft-page .top-content-container {
    flex-direction: row-reverse;
  }

  .topLeft-page .top-content-container .colourBox-content {
    font-size: 1.8rem;

    line-height: 3rem;

    font-weight: 500;
  }

  .topLeft-page .horizontal-colourBox-content {
    font-size: 1.8rem;

    line-height: 3rem;

    font-weight: 500;
  }
}

.page-content-container ul {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.page-content-container ul li {
  display: flex;

  flex-direction: row;

  gap: 1rem;
}

.page-content-container ul li b {
  color: #ab2328;

  font-weight: 600;
}

.page-content-container ul li b:nth-child(2) {
  color: #a0ab4d;

  font-weight: 600;
}

.page-content-container ul li b:nth-child(3) {
  color: #642f6c;

  font-weight: 600;
}

.tc-content {
  flex: 2;
}

.tc-content h1 {
  font-size: 1.875rem /* 30px */;

  line-height: 2.25rem /* 36px */;

  font-weight: 700;

  color: #642f6c;

  margin-top: 1rem;
}

.tc-content h2 {
  font-size: 1.5rem /* 48px */;

  line-height: 1.4em;

  font-weight: 600;

  margin-top: 1rem;

  color: #642f6c;
}

.tc-content h3 {
  font-size: 1.3rem /* 48px */;

  line-height: 1.4em;

  color: #642f6c;

  margin-top: 1rem;

  font-weight: 600;
}

.tc-content h4 {
  font-size: 1.2rem /* 48px */;

  line-height: 1.4em;

  color: #642f6c;

  font-weight: 500;

  margin-top: 1rem;
}

.tc-content a {
  color: #a0ab4d;

  font-weight: 600;
}

.tc-content span {
  color: #ab2328;
}

.tc-content b {
  font-weight: 600;
}

.top-content-description ul,
.faq-item-answer ul {
  display: flex;

  flex-direction: column;

  gap: 0.5rem;
}

.top-content-description ul li,
.faq-item-answer ul li {
  margin-left: 1.5rem;

  position: relative;
}

.top-content-description ul li:before,
.faq-item-answer ul li:before {
  content: "";

  background: url(../images/favIcon.png);

  display: inline-block;

  height: 20px;

  width: 20px;

  position: absolute;

  background-size: contain;

  top: 0;

  transform: translateY(8px);

  left: -1.5rem;
}

/* colour box styles */

.colourBox-container {
  position: relative;

  width: 90%;

  height: 100%;

  flex: 1;

  margin: 0 auto;
}

.imageBox-container {
  position: relative;

  width: 100%;

  height: 100%;

  flex: 1;
}

.color-box {
  position: relative;

  height: 100%;

  width: 100%;
}

.colourBox-bg {
  background: url(../images/header/colourBoxDamson.svg);

  background-size: cover;

  background-repeat: no-repeat;

  max-width: 350px;

  height: 100%;

  border-radius: 16px;
}

@media (min-width: 768px) {
  .colourBox-bg {
    background: url(../images/header/colourBoxDamson.svg);

    background-size: cover;

    background-repeat: no-repeat;

    max-width: 400px;

    height: 100%;
  }
}

.colourBox-container .color-box:nth-child(2) .colourBox-bg {
  background: url(../images/header/colourBoxFennel.svg);

  background-size: cover;

  background-repeat: no-repeat;

  width: 100%;

  height: 100%;
}

.colourBox-content {
  position: relative;

  height: 100%;

  width: 100%;

  padding: 2rem;

  overflow-wrap: anywhere;
}

.colourBox-content a {
  color: #ddcba4;
}

.colourBox-content img {
  width: 200px;

  object-fit: contain;

  height: 200px;

  padding-bottom: 1rem;

  margin: 0 auto;
}

.horizontal-color-box {
  position: relative;

  height: 100%;
}

.horizontal-colourBox-content {
  position: absolute;

  top: 0;

  padding: 2rem;

  left: 0;
}

.featuredBox-content-wrapper {
  position: relative;
}

.featuredBox-content-wrapper ul {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.featuredBox-content-wrapper::after {
  content: "";

  background: url(../images/icons/white-farm-buildings-vector.svg) no-repeat;

  width: 60%;

  height: 100px;

  background-size: contain;

  z-index: -1;

  opacity: 0.5;

  position: absolute;

  bottom: 50px;

  right: 3px;

  display: block;

  transform: translateY(50%);
}

/* download button styles */

.download-btns a {
  position: relative;

  z-index: 2;

  color: #fff;
}

.download-btns a::before {
  content: "";

  background-color: #cfb023;

  width: 100%;

  height: 0%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 8px;

  transition: height 0.3s linear;

  z-index: -1;
}

.download-btns a:hover::before {
  content: "";

  background-color: #cfb023;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 8px;

  transition: height 0.3s linear;

  z-index: -1;
}

.random-testimonial-container {
  background: url(../images/green-review-box.png) no-repeat;

  background-size: cover;

  background-position: center center;
}

.rt-heading h1 {
  font-size: 2.25rem /* 36px */;

  line-height: 2.5rem /* 40px */;

  font-weight: bold;
}

.rt-heading h2 {
  font-size: 1.8rem /* 48px */;

  line-height: 1.4em;

  font-weight: bold;
}

.rt-heading h3 {
  font-size: 1.5rem /* 48px */;

  line-height: 1.3em;

  font-weight: bold;
}

.rt-heading p {
  margin-top: 1rem;

  font-size: 1.1rem /* 48px */;

  line-height: 1.5em;
}

@media (min-width: 768px) {
  .tc-content h1 {
    font-size: 2.25rem /* 36px */;

    line-height: 2.5rem /* 40px */;
  }

  .tc-content h2 {
    font-size: 1.8rem /* 48px */;

    line-height: 1.3em;
  }

  .tc-content h3 {
    font-size: 1.5rem /* 48px */;

    line-height: 1.3em;
  }

  .tc-content h4 {
    font-size: 1.3rem /* 48px */;

    line-height: 1.3em;
  }
}

@media (min-width: 1024px) {
  .tc-content h1 {
    font-size: 3rem /* 48px */;

    line-height: 1.2em;
  }

  .tc-content h2 {
    font-size: 2.25rem /* 36px */;

    line-height: 2.5rem /* 40px */;
  }

  .tc-content h3 {
    font-size: 1.8rem /* 48px */;

    line-height: 1.3em;
  }

  .tc-content h4 {
    font-size: 1.5rem /* 48px */;

    line-height: 1.3em;
  }
}

/* news and events styles */

.news-grid-container {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  grid-auto-rows: 500px;

  gap: 40px;
}

.news-grid .ng-image-wrapper,
.ng-content-wrapper {
  overflow: hidden;
}

.news-grid .ng-image-wrapper img {
  transform: scale(1);

  transition: transform 0.3s ease-in-out;
}

.news-grid:hover .ng-image-wrapper img {
  transform: scale(1.1);

  transition: transform 0.3s ease-in-out;
}

.news-grid h2 {
  transition: transform 0.3s ease-in-out;
}

.news-grid:hover h2 {
  color: #a0ab4d;

  transition: transform 0.3s ease-in-out;
}

.categories-selection-form form {
  display: flex;

  align-items: center;

  gap: 16px;
}

.categories-selection-form select {
  padding: 0.5rem 1rem;

  background-color: #f0f2f5;

  filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.5));

  outline: none;
}

/* footer credits styles */

.credits-container {
  background: url(../images/header/footer-credits-bg2.svg) no-repeat;

  width: 100%;

  padding: 1rem;

  height: 100%;

  background-size: cover;
}