:root {
  --color-black: #161616;
  --color-darkGrey: #414141;
  --color-grey: #9a9da1;
  --color-lightGrey: #f3f3f3;
  --color-borderGrey: #dddad6;
  --color-mute: #fffcf0;
  --color-primary: #00684b;
  --color-gradient: linear-gradient(to right, #206332, #23441e);
  --color-emphasis: #bf9b30;
  --color-beige: #f6ebc8;
}

/* ==========================================================================
   Global
   ========================================================================== */

.spacer-100px {
  height: 100px;
}

.spacer-30px {
  height: 30px;
}

.uk-section-default {
  background-image: none;
}
.hero-video-bg {
  background-image: url(/images/hero-video-bg.jpg) !important;
  background-size: cover;
}

.mute-gradient-overlay {
  background-image: linear-gradient(rgb(255, 252, 240, 0), #fffcf0) !important;
  height: 150px !important;
  position: absolute;
  z-index: 0;
  width: calc(100vw + 40px);
  bottom: -20px;
  right: -40px;
}

.uk-button-primary {
  background-image: linear-gradient(to right, #eac864, #bf9b30) !important;
  color: #fff !important;
}

.uk-button-default .uk-icon {
  color: var(--color-emphasis);
}

/* responsive button */
.button--longtext a.uk-button,
.uk-button--longtext a {
  line-height: 48px;
}

.btn-arrow-right {
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0px 50%;
  padding-left: 16px;
  margin-left: 10px;
}

.btn-arrow-right--primary {
  background-image: url(/images/icon/arrow-sm.svg);
}

.btn-arrow-right--secondary {
  background-image: url(/images/arrow-right.svg);
}

.uk-overlay {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.testimonial-slider .uk-dotnav {
  margin-top: 60px;
}

.bg-landscape img {
  width: 100% !important;
}

.overlay-arrow-right {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 0px 50%;
  background-image: url("https://4thd.beyondyb.co.uk/images/icon/arrow.svg");
}

.image-column--expand-left {
  padding-left: 0;
  min-height: 400px;
}

.column-left-padding {
  padding-left: 100px;
}

.footer {
  background-color: var(--color-black);
}

/* footer subnav custom icon */
.footerlist li {
  /* background-image: url(/images/chev-right.svg);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 0px 50%;
    padding-left: 30px; */
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footerlist__contact-link {
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Navbar icon colour */
.uk-navbar-parent-icon,
.uk-nav-parent-icon {
  color: var(--color-emphasis) !important;
}

.cta-list {
  padding-top: 60px;
  padding-bottom: 60px;
}

.bg-gradient {
  background-image: linear-gradient(
    var(--color-mute),
    var(--color-beige)
  ) !important;
}

/* ==========================================================================
   Home Page
   ========================================================================== */
.row-hero-top-balls {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
}

/* HERO SECTION START */
.hero__column-text {
  transform: translateY(12%);
  padding-right: 130px;
}

.hero__column-text h1 {
  background-image: var(--color-gradient);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.tm-toolbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.uk-logo {
  margin-left: 100px;
}

.column-cta-1 {
  padding-top: 110px;
  padding-bottom: 240px;
  margin-left: auto;
}

.column-cta-1 .uk-container-expand-right {
  max-width: 760px;
}

.column-cta-2 {
  background-image: linear-gradient(to right, #eac864, #bf9b30) !important;
  padding-top: 110px;
  padding-bottom: 240px;
  padding-right: 70px;
}

.balls-left,
.balls-right {
  width: fit-content;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.form-submit .ba-form-submit-btn {
  background-image: linear-gradient(to right, #206332, #23441e);
  font-weight: 600;
  background-position-x: 100%;
  background-size: 200%;
  transition: all 0.3s;
}

.form-submit .ba-form-submit-btn:hover {
  background-image: linear-gradient(to right, #6eb878, #206332);
  background-position-x: 0;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .form-submit .ba-form-submit-btn::before,
  .form-submit .ba-form-submit-btn::after {
    transition: none;
  }
}

.form-submit .ba-form-submit-title {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  /* space before the arrow */
}

.form-submit .ba-form-submit-title::after {
  content: "";
  inline-size: 0.8em;
  /* scales with text size */
  block-size: 0.8em;
  background: url("/images/icon/arrow-sm.svg") no-repeat center;
  background-size: contain;
}

/*Adjust Responsive*/
/*xlarge desktop*/
@media all and (min-width: 1400px) and (max-width: 1599px) {
  .balls-left {
    left: -20px !important;
  }

  .balls-left img,
  .balls-right img {
    width: 160px !important;
  }

  .balls-right {
    right: -20px !important;
  }

  .hero__column-text {
    padding-right: 100px;
    transform: translateY(12%);
  }

  .column-cta-1 .uk-container-expand-right {
    max-width: calc(700px);
  }

  .column-cta-1 .uk-container-expand-right .uk-width-1-1 {
    padding-left: 0px;
    padding-right: 0;
  }
}

/*large desktop*/
@media all and (min-width: 1200px) and (max-width: 1399px) {
  .spacer-100px {
    height: 80px;
  }

  .uk-logo {
    margin-left: 70px;
  }

  .uk-logo img {
    max-width: 280px;
  }

  .uk-navbar-nav > li > a {
    font-size: 15px;
  }

  .balls-left {
    left: -20px !important;
  }

  .balls-left img,
  .balls-right img {
    width: 160px !important;
  }

  .balls-left-cta img,
  .balls-right-cta img {
    width: 200px !important;
  }

  .balls-right {
    right: -20px !important;
  }

  /* HERO SECTION START */
  .hero__column-text {
    margin-top: 8vh;
    padding-right: 4vw;
    transform: unset;
  }

  .hero__column-image {
    margin-top: 30px;
    min-height: 570px;
  }

  .column-left-padding {
    padding-left: 70px !important;
  }
}

/*small desktop*/
@media all and (min-width: 960px) and (max-width: 1199px) {
  .spacer-100px {
    height: 80px;
  }

  /* HERO SECTION START */

  .balls-left-cta img,
  .balls-right-cta img {
    width: 200px !important;
  }

  .hero__column-text {
    margin-top: 30px;
    padding-right: 5vw;
    transform: unset;
  }

  .hero__column-image {
    margin-top: 30px;
    min-height: 570px;
    width: 360px;
  }

  .hero__column-text h1 {
    margin-top: 20px !important;
    font-size: 50px;
  }

  .section-our-product .uk-container {
    padding-left: 0;
  }

  .column-left-padding {
    padding-left: 70px !important;
  }

  .uk-logo {
    margin-left: 0px;
  }

  .uk-navbar {
    height: 140px;
  }

  .bg-landscape {
    height: 150px;
    overflow: hidden;
  }

  .bg-landscape .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
  }

  .cta-list {
    padding: 40px 40px 40px 0;
  }

  .column-cta-1 {
    padding-bottom: 160px;
  }

  .column-cta-2 {
    padding-bottom: 160px;
    padding-right: 70px;
  }
  /* ==========================================================================
   Our Services
   ========================================================================== */
  .our-services-grid .uk-container-xsmall {
    max-width: 680px;
  }

  /* ==========================================================================
   Our Products
   ========================================================================== */

  .panel-slide-custom {
    margin-bottom: 30px !important;
  }

  .contact-detail .el-content {
    font-size: 0.9em;
  }
}

/*ipad*/
@media all and (min-width: 640px) and (max-width: 959px) {
  .button--longtext a.uk-button,
  .uk-button--longtext a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .hero__column-text {
    margin-top: 30px;
    padding-right: unset;
    transform: unset;
  }

  .hero__column-text h1 {
    margin-top: 20px !important;
  }

  .hero__column-image img {
    max-width: 70%;
  }

  .bg-landscape {
    height: 130px;
    overflow: hidden;
  }

  .bg-landscape .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
  }

  .balls-left {
    left: -20px !important;
  }

  .balls-left img,
  .balls-right img {
    width: 160px !important;
  }

  .balls-left-body img,
  .balls-right-body img {
    width: 160px !important;
  }

  .balls-left-cta img,
  .balls-right-cta img {
    width: 160px !important;
  }

  .balls-right {
    right: -20px !important;
  }

  .our-services-grid__garlands {
    max-width: 315px;
    margin: 0 auto;
  }
  .section-our-product {
    padding-bottom: 0;
  }

  .section-our-product {
    padding-bottom: 0;
  }

  .section-our-product .uk-container {
    padding-left: 0;
    padding-right: 0;
  }

  .column-left-padding {
    padding-left: 80px;
    padding-right: 40px;
  }

  .spacer-100px {
    height: 30px;
  }

  .uk-logo {
    margin-left: 0px;
  }

  .uk-navbar {
    height: 140px;
  }

  .column-cta-1 {
    padding-top: 60px;
    padding-bottom: 0px;
    margin-left: auto;
  }

  .column-cta-1 .uk-container-expand-right {
    margin-right: auto;
  }

  .column-cta-2 {
    padding-top: 0px;
    padding-bottom: 60px;
    padding-right: 0px;
  }

  /* ==========================================================================
   Our Products
   ========================================================================== */

  .panel-slide-custom {
    margin-bottom: 30px !important;
  }
}

/*mobile*/
@media (max-width: 639px) {
  .balls-left {
    left: -20px !important;
  }

  .balls-left img,
  .balls-right img {
    width: 160px !important;
  }

  .balls-left-body {
    left: -20px !important;
  }
  .balls-right-body {
    right: -20px !important;
  }

  .balls-left-body img,
  .balls-right-body img {
    width: 140px !important;
  }

  .balls-left-cta img,
  .balls-right-cta img {
    width: 160px !important;
  }

  .balls-right {
    right: -20px !important;
  }

  .button--longtext a.uk-button {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .hero__column-text {
    margin-top: 30px;
    padding-right: unset;
    transform: unset;
  }

  .hero__column-text h1 {
    margin-top: 10px !important;
  }

  .bg-landscape {
    height: 130px;
    overflow: hidden;
  }

  .bg-landscape .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
  }

  .section-our-product {
    padding-bottom: 0;
  }

  .section-our-product .uk-container {
    padding-left: 0;
    padding-right: 0;
  }

  .column-left-padding {
    padding-left: 60px;
    padding-right: 20px;
  }

  .spacer-100px {
    height: 30px;
  }

  .uk-logo {
    margin-left: 0px;
  }

  .uk-navbar {
    height: 140px;
  }

  .project-grid .uk-first-column {
    padding-left: 0;
  }

  .project-grid .uk-grid {
    width: 100%;
  }

  .project-grid .uk-grid img {
    width: 100%;
  }

  .column-cta-1 {
    padding-top: 80px;
    padding-bottom: 0px;
    margin-left: auto;
  }

  .column-cta-2 {
    padding-top: 0px;
    padding-bottom: 60px;
    padding-right: 0px;
  }

  .cta-list {
    padding: 60px 20px;
  }

  .footerlist__contact .uk-list .el-item:first-child {
    margin-bottom: 30px;
  }

  /* ==========================================================================
   Our Products
   ========================================================================== */

  .panel-slide-custom {
    margin-bottom: 20px !important;
  }
}

/* ==========================================================================
	Sitemap
   ========================================================================== */

.treeview a {
  color: var(--color-black);
}

.treeview a.selected {
  background-color: transparent;
  text-decoration: none;
  font-size: 16px;
}

.treeview .hover {
  color: var(--color-primary);
}

/* ==========================================================================
	Cookie Popup
   ========================================================================== */

.custom-subnav {
  font-size: 14px;
  color: var(--color-emphasis) !important;
}

.custom-subnav:hover {
  color: var(--color-beige) !important;
}

.cc-revoke,
.cc-window {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 24px;
}

.cc-btn {
  font-weight: normal;
  text-transform: uppercase;
  font-family: inherit !important;
  font-size: 14px;
  letter-spacing: 1px;
  transition: opacity 0.4s ease;
  text-decoration: none !important;
}

.cc-btn:hover,
.cc-btn:focus {
  opacity: 0.6;
}

.cc-color-override-1020424930 .cc-btn:hover,
.cc-color-override-1020424930 .cc-btn:focus {
  border-color: #f9a240;
}

div.cc-window.cc-floating {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.3);
}

div.cc-compliance > a.cc-btn {
  margin-right: 0px;
  margin-top: 0.2em;
}

.cc-allow {
  width: 100%;
  font-size: 17px;
}

.cc-deny {
  font-size: 14px !important;
  text-transform: none !important;
  opacity: 0.6;
  border: none !important;
  padding: 0px 0px !important;
  text-align: left !important;
  margin-top: 20px !important;
  letter-spacing: 0px !important;
  font-weight: 400 !important;
}

.cc-deny:hover {
  opacity: 0.3;
}