: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;
}

/* 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;
    }

    /* ==========================================================================
   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: .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;
}