/* fontss */
.uLight {
    font-family: "usual", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.uLightItalic {

    font-family: "usual", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.uRegular {

    font-family: "usual", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.uItalic {

    font-family: "usual", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.uMedium {

    font-family: "usual", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.uMediumItalic {
    font-family: "usual", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.uBold {

    font-family: "usual", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.uBoldItalic {
    font-family: "usual", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.uExtraBold {
    font-family: "usual", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.uExtraBoldItalic {
    font-family: "usual", sans-serif;
    font-weight: 800;
    font-style: italic;
}


/***** header styles ******/
.pad-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

header ul {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0 !important;
    margin-top: -4px !important;
}

header ul:not(.multilanguage) li {
    margin-right: 60px;
}

header ul li a {
    font-family: "usual", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.3px;
    color: #ffffff;
}

header:not(.showSecondHead) ul li a:hover {
    color: #fff;
}

header ul li.current_page_item a {
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.lang-zh-hant header ul li.current_page_item a {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-weight: 800 !important;
}


.navigationLeft ul li:last-child,
.navigationRight ul li:last-child {
    margin-right: 0px;
}

ul.multilanguage li,
div.multilanguage ul li {
    position: relative;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

ul.multilanguage li:first-child:before,
div.multilanguage ul li:first-child:before {
    content: '';
    width: 1px;
    height: 11px;
    background: #333333;
    position: absolute;
    right: -1px;
    top: 24px;

}

div.multilanguage ul li a {
    display: inline;
    padding: 0px;
    line-height: inherit;
}

ul.multilanguage li.active a,
div.multilanguage li.wpml-ls-current-language a {
    color: #000;
    font-family: "usual", sans-serif;
    font-weight: 600;

}

.contactUsOverlay {
    background: #000000d9;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 999999;
    padding-top: 80px;
    padding-bottom: 60px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 600ms, opacity 600ms;

}

.contactUsOverlay.result_hover {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 600ms;
}

.contactUsOverlay .padding-defaul64 {
    position: relative;
}

.shapePattern {
    position: absolute;
    right: 63px;
    top: 0;
}

.contactUsOverlay.result_hover {
    /* display: block; */
    /* visibility: visible;
    opacity: 1;    
    animation: fade-in 1s;     */
}

.contactUsOverlay p,
.contactUsOverlay h3,
.contactUsOverlay a {
    color: #fff;
    font-family: "usual", sans-serif;
    font-weight: 300;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.26px;

}

.contactUsOverlay h3 {
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.contactUsOverlay p {
    margin-bottom: 0.844rem;
}

.contactUsOverlay p:last-child {
    margin-bottom: 0;
    ;
}

.pageSpacer {
    height: 210px;
}

.headingCaptionMbt {
    font-size: 14px;
    color: #333333;
    /*font-weight: 500;*/
    /*letter-spacing: -0.88px;*/
    letter-spacing: 0.1px;
    line-height: 17px;

    font-family: "usual", sans-serif;
    font-weight: 400;
    text-align: center;
    margin-top: 17px;

}

.spacerTop175 {
    margin-top: 172px;
}

.aboutPageDescriptionBottomText {
    margin-top: 63px;
}

.aboutPageDescription p,
.aboutPageDescriptionBottomText p {
    color: #333333;
    font-family: "usual", sans-serif;
    font-weight: 300;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
}

.carasoulHeading {
    font-family: "usual", sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 13px;
    letter-spacing: -0.04px;
    text-align: center;
    margin-bottom: 12px;
}

.homePageSliderSlick .slideRowRepeater .imageBoxSec {
    display: flex;
}

.slickSlideHome .slideDescripText {
    margin-top: 25px;
}

.slideDescripText .disCity {
    font-family: "usual", sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    margin: 0;
}

.slideDescripText .disCity strong {
    font-family: "usual", sans-serif;
    font-weight: 700;
}

.slideDescripText .slideDecrParagraph {
    font-family: "usual", sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    letter-spacing: -0.35px;
}

.slideRowRepeater a:hover,
.slideRowRepeater a {
    text-decoration: none;
    display: block;
}

.imageOneLeft {
    padding-right: 5px;
}

.imageTwoRight {
    padding-left: 5px;
}




/* the slides */
.slick-slide {
    margin: 0 5px;
}

/* the parent */
.slick-list {
    margin: 0 -5px;
}


.slick-next,
.slick-prev {
    /* margin-top: -72px; */
    top: 36%;
    transform: translateY(-36%);
}

.slick-prev,
.slick-next {
    width: 18px;
    height: 34px;
    z-index: 1234;
}

.slick-prev,
.slick-prev:focus,
.slick-prev:hover {
    background: url(assets/images/Arrow_left.svg);
}

.slick-next,
.slick-next:focus,
.slick-next:hover {
    background: url(assets/images/Arrow_right.svg);
}

.slick-prev:before {
    visibility: hidden;
    opacity: 0;
}

.slick-next:before {
    visibility: hidden;
    opacity: 0;
}

.slick-prev {
    left: -38px;
}

.slick-next {
    right: -38px;
}



.descriptionSLide {
    margin-top: 13px;
    text-align: center;
}

.descriptionSLide h4 {
    font-family: "usual", sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    margin-bottom: 2px;
}

.descriptionSLide p {
    font-family: "usual", sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
}

.slideItem a {
    display: block;
}

.slideItem a:hover {
    text-decoration: none;
}

.slickSlide .slick-dots,
.slick-dots {
    position: static;
    margin-top: 18px;
}

.slick-dots li {
    margin: 0 0px;
    width: 11px;
    height: 11px;
    padding: 0;
}

.slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    display: block;
    background: #f0f0f0;
    border-radius: 100px;
    border: 1px solid #90908f;
}

.slick-dots li button:before {
    font-size: 10px;
    width: 15px;
    height: 15px;
}

.slick-dots li button:before {
    content: none;
}

.slick-dots li.slick-active button {
    background: #333333;
    border: 1px solid #333333;
}

.homePageSliderSlick .slick-list {
    margin: 0 -43px;
}

.homePageSliderSlick .slick-slide {
    margin: 0 43px;
}

.pageSpacer230 {
    margin-top: 218px;
}


.bespokePageContainer .nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    flex: 1 1 auto;
    padding: 10px 20px;
    /* margin-top: 40px; */
}

.bespokePageContainer .nav-item {
    position: relative;
    /* padding: 0 5px; */
    margin: 0 10px;
    text-decoration: none;
    line-height: 1.5;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 17px;
    color: #333333;
    font-family: "usual", sans-serif;
    font-weight: 300;
}

.bespokePageContainer .nav-item:hover,
.bespokePageContainer .nav-item:hover {
    text-decoration: underline;
}

.bespokePageContainer .nav-item:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    height: 0px;
    background: #595959;
    transition: all 500ms;
}

.bespokePageContainer .nav-item.active {
    color: black;
    transition: all 350ms;
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.bespokePageContainer .nav-item.active:before {
    width: 100%;
}

.bespokePageContainer .portfolio {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-left: -5px;
    margin-right: -5px;
}

.bespokePageContainer .project {
    position: relative;
    /* flex: 1 0 calc(100% - 20px);
    margin: 5px; */
    width: 33.333%;
    padding: 5px;


}

.bespokePageContainer .project a:hover {
    text-decoration: none;
}

.bespokePageContainer .project:hover .project-info {
    /* background: rgba(89, 89, 89, 0.7); */
}

main#mainPage {
    margin-top: 168px;
}

a.nav-item.disableLink {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

header ul li a,
a,
.pageWrapperParentMbt .project .project-info-title,
span.hoverState,
.hoverState,
.hoverStateActive .hoverState {
    position: relative;
}

header ul li a:hover,
.bespokePageContainer .nav-item:hover,
.bespokePageContainer .nav-item:hover,
a:hover {
    text-decoration: none;
}

header ul li a::after,
.bespokePageContainer .nav-item:after,
.bespokePageContainer .nav-item:after,
a:not(.navbar-brand, .footer-logo a, .portfolio a):after,
.pageWrapperParentMbt .project a .project-info-title .hoverState:after,
.hoverStateActive .hoverState:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333333;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}

.page-template-template-partshome-template-php header:not(.showSecondHead) ul li a::after,
.single header:not(.showSecondHead).wihte-header ul li a::after,
.contactUsOverlay a::after {

    background-color: #fff !important;
}

header ul li a:hover::after,
header ul li a:focus::after
/* ,.bespokePageContainer .nav-item:hover::after, .bespokePageContainer .nav-item:hover::after,a:not(.navbar-brand, .footer-logo a,.portfolio a):hover::after
,.pageWrapperParentMbt .G a:hover .project-info-title .hoverState::after,.hoverStateActive  a:hover .hoverState::after */

    {
    opacity: 1;
    transform: translate3d(0, 1px, 0);
}

.slickSlideHome a:after {
    content: none !important;
}

li#menu-item-5466 {
    display: none;
}

.home p.disCity {
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.hoverStateActive a:hover:after {
    display: none;
}


.wpml-ls-legacy-list-horizontal {
    padding: 0px !important;
    margin-top: -6px;
    border: 0;
}






body.lang-zh-hant header ul li:not(.wpml-ls-item) a,
body.lang-zh-hant body.lang-zh-hant .aboutPageDescription p,
body.lang-zh-hant .aboutPageDescriptionBottomText p,
body.lang-zh-hant .contactUsOverlay p,
body.lang-zh-hant .contactUsOverlay h3,
body.lang-zh-hant .contactUsOverlay a,
body.lang-zh-hant .slideDescripText .slideDecrParagraph,
body.lang-zh-hant .bespokePageContainer .project-info-title,
body.lang-zh-hant .contentDescription p,
body.lang-zh-hant:not(.page-template-temp-about) .carasoulHeading,
body.lang-zh-hant .bespokePageContainer .nav-item,
body.lang-zh-hant .aboutPageDescription p,
body.lang-zh-hant .aboutPageDescriptionBottomText p,
body.lang-zh-hant .slideDescripText .disCity,
body.lang-zh-hant .headingCaptionMbt,
body.lang-zh-hant .left-right-fields .left p,
body.lang-zh-hant .left-right-fields .right p,
body.lang-zh-hant .left-right-fields .left a,
body.lang-zh-hant .left-right-fields .right a {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
}

body.lang-zh-hant .bespokePageContainer .nav-item.active,
body.lang-zh-hant p.disCity.project-info-title,
body.lang-zh-hant strong {
    font-weight: 500;
}

body.lang-zh-hant .multilanguage ul li:last-child a {
    position: relative;
    top: 1px;
}

a#nav-icon4:after {
    content: none;
}

.home p.slideDecrParagraph {
    /* display: none; */
}

.edit-button-class {
    position: absolute;
    left: 8px;
    bottom: 0px;
    z-index: 458789;
    z-index: 9999;
}

.btn.btn-primary.btn-edit-post-link {
    color: #fff;
    background-color: #666;
    border-color: #666;
}


/* //new animation plus minus */
.plusminus {
    position: relative;
    width: 10px;
    height: 10px;
    cursor: pointer;
    line-height: 1;
    top: -1px;
    margin-right: 2px;
}

.plusminus.active:before {
    transform: translatey(-50%) rotate(-90deg);
    opacity: 0;
}

.plusminus.active:after {
    transform: translatey(-50%) rotate(0);
}

.plusminus:before,
.plusminus:after {
    content: "";
    display: block;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 0;
    transition: 0.35s;
    width: 100%;
    height: 2px;
}

.plusminus:before {
    transform: translatey(-50%);
}

.plusminus:after {
    transform: translatey(-50%) rotate(90deg);
}

html body .pageNotfound span {
    font-family: "usual", sans-serif;
    font-weight: 700;
    margin-bottom: 0;
}

.gobackHome,
.gobackHome a {
    color: #333333;
    font-family: "usual", sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0;
}

header ul li {}

.contact-btn a {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #FFF;
    margin-top: 6px;
}

footer {
    position: relative;
    background-color: #ECECEC;
    padding-top: 55px;
    padding-bottom: 30px;
    overflow: hidden;
}

.footer-logo {
    margin-bottom: 55px;
}

.footer-logo img {
    max-width: 274px;
}



footer ul {
    padding-left: 0;
}

footer ul li {
    display: block;
    line-height: 21px;
}

.footer-up ul li a {
    font-family: "usual", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 15.6px */
    letter-spacing: 0.5px;
    color: #333333;
    padding: 4px;
    display: flex;
    padding-left: 0;
    padding-right: 0;
}

.footer-up ul li a:hover {
    text-decoration: none;
}

.footer-up h6 {
    font-family: "usual", sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 13px;
    font-style: normal;
    line-height: 16px;
    padding: 4px;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.font-14 {
    font-size: 14px;
}

.contact-list li {
    margin-top: 6px;
}



.mailing-list a {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
    padding: 8px 16px;
}

/* Celia Birtwell 2026 side margin: 80px on desktop, 60px from 991px down (tablet); phones use 30px
   (set per section at 767px and below, and in jws-mobile.css for .container-fluid) */
:root {
    --cb-side: 80px;
}

@media screen and (max-width: 991px) {
    :root {
        --cb-side: 60px;
    }
}

/* Celia Birtwell 2026 grid: side margins from --cb-side on tablet & desktop (mobile override in jws-mobile.css) */
.container-fluid {
    padding-left: var(--cb-side);
    padding-right: var(--cb-side);
}

footer ul li.instagram-nav a,
footer ul li.twitter-nav a,
footer ul li.linkedIn-nav a {
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 27px;
}

footer ul li.instagram-nav a {
    background-image: url("assets/images/ipta/instagram-icon.svg");
}

footer ul li.twitter-nav a {
    background-image: url("assets/images/ipta/twitter-icon.svg");
}

footer ul li.linkedIn-nav a {
    background-image: url("assets/images/ipta/linkedIn-icon.svg");
}

footer img.map-pointer{
    padding-right: 10px;
}

.site-by-tamassy {
    color: #333333;
    font-size: 12px;
    font-style: normal;
    font-weight: 325;
    line-height: 150%;
    position: relative;
    top: -2px;
}

.site-by-tamassy a {
    color: inherit;
}

.row.footer-links {
    padding-bottom: 30px;
}

footer .scroll-to-up {
    position: absolute;
    left: 0;
    right: 0;
    width: 46px;
    bottom: 30px;
    height: 46px;
    z-index: 999;
    margin-left: auto;
    margin-right: auto;
    margin-right: auto;
}

footer .riba-logo {
    width:114px;
}
}

.gap-13 {
    gap: 13px;
}

.radius-25 {
    border-radius: 25px;
}

.navigationRight.topNavigation ul li a {

    position: relative;
    line-height: normal;
}

.custom-menu-right>ul>li>a:after
{
    content: '';
    height: 1px;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    background: #DBE539;
    visibility: hidden;
    transition: 0.35s linear;
    transform: scaleX(0);
}

.darkHeaderr .custom-menu-right>ul>li>a:after,
.page-template-ecospace_contact #header ul li a:after {
    background: #000;
}

.custom-menu-right>ul>li:hover>a:after
,.custom-menu-right>ul>li.current-page-ancestor a:after
,.custom-menu-right>ul>li.current-menu-item a:after
{
    visibility: visible;
    transform: scaleX(1);
}
.custom-menu-right>ul>li.current-page-ancestor a:after
,.custom-menu-right>ul>li.current-menu-item a:after
{
    opacity: 1;
}


.darkHeaderr .custom-menu-right>ul>li.contact-btn>a:after,
.page-template-ecospace_contact #header ul li.contact-btn a:after,
#header ul li.contact-btn a:after {
    background: transparent;
}

.bg-gradient-option-one {
    background: #DBE539;
    padding: 80px 10px;
}

.btn-primary {
    background: #494732;
    border-radius: 5px;
    color: #fff;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #494732;
}

.btn-secoundary {
    border: 1px solid #494732;
    color: #494732;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Upper Footer Hidden for IPTA  */
.contact-inquiery-section {
    display: none;
}

.contact-inquiery-section .mailing-list a {
    margin-left: 5px;
    margin-right: 5px;
}

.footer-upper-info {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mb-0 {
    margin-bottom: 0;
}

.info-content h6 {
    font-family: "usual", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 38.4px;
}

.btn-primary:hover {
    background-color: #000000;
    border-color: #1c1c1c;
}

.border-1px-white {
    border: 1px solid #fff;
}
.border-1px-black {
    border: 1px solid #333;
}

.padding-top80-bottom50 {
    padding: 80px 0 50px 0;
}

.hidden {
    display: none !important;
}

.max-1080 {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.navigation-wrapper {
    background: #F8F8F5;
    padding: 15px 0 15px 0;
}

ul#menu-configurator-submenu {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    margin: 0;
    justify-content: center;
    padding: 0;
}

ul#menu-configurator-submenu li {
    display: flex;
    flex-wrap: wrap;
}

ul#menu-configurator-submenu li a,
ul#menu-configurator-submenu .navigation-wrapper a {
    font-family: "usual", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px;
    /* 120% */
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    border: 1px solid var(--secondary-700, #BDBC2B);
    color: var(--secondary-700, #BDBC2B);
}

ul#menu-configurator-submenu .selected-nav a,
ul#menu-configurator-submenu .current-menu-item a {
    border: 1px solid var(--secondary-600, #CFD333);
    background: var(--secondary-600, #CFD333);
    color: #fff;

}

.spacer-block-wrapper {
    height: 120px;
}
.video-mp4:hover .custom-controlbar{
    display: none !important;
}

@media (min-width: 520px) {
    .bespokePageContainer .project {
        /* flex: 0 0 calc((100% / 2) - 20px); */
    }
}

@media (min-width: 860px) {
    .bespokePageContainer .project {
        /* flex: 0 0 calc((100% / 3) - 20px); */
    }
}

.bespokePageContainer .project-image img {
    display: block;
    width: 100%;
    height: auto;
}

.bespokePageContainer .project-info {
    /* position: absolute; */
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #f6f6f6;
    background: rgba(89, 89, 89, 0.8); */
    /* opacity: 0; */
    transition: all 350ms ease-in;
}

.bespokePageContainer .project-info:hover {
    opacity: 1;
}

.circle-plus .circle {
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background-size: cover;
}

.circle-plus.closed .circle {
    background-image: url(assets/images/plus.svg);
}

.circle-plus.opened .circle {
    background-image: url(assets/images/minus.svg);
}

.circle-plus .circle .horizontal,
.circle-plus .circle .vertical {
    display: none;
}


@media (max-width: 520px) {
    .project-info {
        opacity: 0.8;
    }
}


@media (min-width: 1024px) {

    ul.multilanguage,
    div.multilanguage ul {
        margin-left: 54px !important;
    }
}

.bespokePageContainer .project-info-title {
    /* margin: 0 0 0.5em;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase; */
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.bespokePageContainer .project-info-button {
    padding: 0.5em 1em;
    color: inherit;
    text-decoration: none;
    border: 1px solid #f6f6f6;
    border-radius: 3px;
    transition: all 350ms;
}

.bespokePageContainer .project-info-button:hover {
    /* color: #595959;
    background: #f6f6f6;
    border-color: #f6f6f6; */
}


.parentMenuParent {
    /* max-width: 486px; */
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom: 70px;*/
    display: none;
}

.filterTExt {
    font-size: 13px;
    letter-spacing: 0;
    line-height: 17px;
    text-align: center;
    font-family: "usual", sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

.bespokePageContainer main#mainPage {
    margin-top: 193px;
}

.bespokePageContainer .portfolio {
    min-height: 384px;
    margin-top: 70px;
}

nav.nav.category-tab {
    padding-bottom: 0;
}

.bespokePageContainer .slideDescripText {
    margin-top: 15px;
    margin-bottom: 45px;
}

.bespokePageContainer .slideDescripText .slideDecrParagraph {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 17px;
}

.bespokePageWrapper .slideDescripText {
    margin-top: 10px;
}

.bespokePageWrapper .slideDescripText .slideDecrParagraph strong {
    font-family: "usual", sans-serif;
    font-weight: 600;
    display: block;
    font-size: 14px;
    letter-spacing: 0;

}

.bespokePageWrapper .project-info-title {
    margin-bottom: 20px;
}

.bespokePageWrapper .slideDescripText {
    margin-bottom: 105px;
}

.max1080 {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
    ;
}

.posStatic {
    position: static;
}

.alignToTopCustomMbt {
    position: absolute;
    top: 0;
    max-width: 33.3333%;
}

.posRelative {
    position: relative;
}

.posStatic {
    position: static;
}

.designMixedLayout.layouThree .imageTwo img {
    /* position: absolute;
    top: 0;
    max-width: 33.33%; */
}

.captionBlock span {
    font-family: "usual", sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 13px;
    margin: 0;
    list-style: none;
    margin-bottom: 15px;
    display: block;
    line-height: 15px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-175 {
    margin-bottom: 175px;
}

.minusTop10 {
    margin-top: -10%;
}

.emptyHeight {
    float: left;
    width: 100%;
}

.emptyHeight::after {
    content: "";
    clear: both;
    display: table;
}

.designMixedLayout.layoutFour .imageTwo {
    /* position: relative;
    top: 0;
    max-width: 33.33%;
    right: 0; */

}

.designMixedLayout.layoutFour .imageThree {
    /* position: relative;
    top: 433px;
    right: 0;     */
}

.designMixedLayout.layoutFour .imageFour {}

.designMixedLayout.layoutFour .imageFive {}

.colRight .imageThree img {
    width: 100%;
}

.row.captionBlock {
    margin-bottom: 160px;
}

#header:not(.wihte-header) .logoWhite {
    display: none;
}



.single header:not(.showSecondHead).wihte-header .logoWhite {
    display: inline-block;
}

.single header:not(.showSecondHead).wihte-header .logoBlack {
    display: none;
}

.page-template-template-partshome-template-php header:not(.showSecondHead) .logoWhite {
    display: inline-block;
}

header.wihte-header:not(.showSecondHead) .logoBlack {
    display: none;
}

.page-template-ecospace_contact #header:not(.showSecondHead) .logoBlack {
    display: inline-flex;
}

.page-template-ecospace_contact #header:not(.showSecondHead) .logoWhite {
    display: none;
}

.page-template-template-partshome-template-php header:not(.showSecondHead) ul li a,
.single header:not(.showSecondHead).wihte-header ul li a {
    color: #ffffff;
}

.page-template-template-partshome-template-php header:not(.showSecondHead) ul.multilanguage li:first-child:before,
.single header:not(.showSecondHead).wihte-header ul.multilanguage li:first-child:before,
.home header:not(.showSecondHead) ul.multilanguage li:first-child:before,
.home header:not(.showSecondHead) div.multilanguage ul li:first-child:before,
.single header:not(.showSecondHead).wihte-header ul.multilanguage li:first-child:before,
.single header:not(.showSecondHead).wihte-header div.multilanguage ul li:first-child:before {
    background: #fff;
}

body.page-template-ecospace_contact header:not(.showSecondHead) .logoWhite {
    display: none;
}


header.black-header:not(.showSecondHead) .logoBlack {
    display: inline-block;
}

header.black-header:not(.showSecondHead) ul li a {
    color: #494732;
}

header.black-header:not(.showSecondHead) .custom-menu-right>ul>li>a:after {
    background: #494732;
}

header.black-header:not(.showSecondHead) .contact-btn a {
    border: 1px solid #494732;
}


header.white-header:not(.showSecondHead) .logoWhite {
    display: inline-block;
}

.designMixedLayout .space_above_175 {
    margin-bottom: 15px;
}

.space_above_175 {
    margin-top: 175px;
}

.contentDescription p {
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.24px;
    line-height: 20px;
    color: #333333;
}

.contentDescription a {
    font-family: "usual", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.24px;
    line-height: 17px;
    color: #333333;
}

.textBlock.contentDescription {
    margin-bottom: 165px;
}

.slider-section .project-info.slideDescripText {
    margin-top: 25px;

    margin-bottom: 154px
}

.slider-section .slideDescripText .disCity {
    font-family: "usual", sans-serif;
    font-weight: 600;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.24px;
    text-align: center;
}

.home .slideDescripText {
    text-align: center;
}

.slider-section .slideDescripText p {
    font-family: "usual", sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    letter-spacing: -0.35px;
}

.relatedProjects .slideDescripText {
    margin-top: 15px;
    margin-bottom: 45px;
}

.relatedProjects .slideDescripText {
    margin-top: 15px;
    margin-bottom: 45px;
}

.relatedProjects .project-info-title {
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.relatedProjects .disCity {
    font-family: "usual", sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    margin: 0;
    font-family: "usual", sans-serif;
    font-weight: 600;
}

.relatedProjects .slideDecrParagraph {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 17px;
}

.relatedProjects a:hover {
    text-decoration: none;
}

.relatedProjects .relatedProjectHeading {
    color: #000000;
    font-family: "usual", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 17px;
    text-align: center;
    margin-bottom: 30px;
}

.darkHeaderr {

    background: #fff;
    opacity: 0;

}


.showSecondHead {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;



}

.closed .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
}

.closed .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
    opacity: 1;
}

.opened {
    opacity: 1;
}

.opened .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
}

.opened .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
    opacity: 0;
}

.circle-plus .circle {
    position: relative;
}

.circle-plus .circle .horizontal {
    position: absolute;
    background-color: #1a1919;
    width: 10px;
    height: 2px;
    left: 50%;
    margin-left: -12px;
    top: 50%;
    margin-top: -2.5px;
}

.circle-plus .circle .vertical {
    position: absolute;
    background-color: #1a1919;
    width: 2px;
    height: 10px;
    left: 50%;
    margin-left: -8.5px;
    top: 50%;
    margin-top: -7px;
}

/*zeeshan css*/
a.sound-onn.sounds-buttons {
    display: none;
}

.custom-controlbar .buttons {
    width: 5%;
}

.custom-controlbar .custom-seekbar {
    width: 95%;
}

span.hoverState {
    font-size: 14px;
}

.slider-section .slideDescripText .disCity {
    font-size: 14px;
}


.darkHeaderr ul li a {
    color: #494732;
}

.darkHeaderr .contact-btn a {
    border-color: #494732;
}

.page-template-ecospace_contact .contact-btn a {
    border-color: #494732;
}


#map-canvas {
    height: 450px;
}

.page-template-ecospace_contact #header {
    background: #fff;

}

.page-template-ecospace_contact #header ul li a {
    color: #494732;
}



.page-template-ecospace_contact .container-fluid h2 {
    font-family: "usual", sans-serif;
    font-weight: 700;
    ont-size: 32px;
    font-style: normal;
    line-height: 38.4px;
    /* 120% */
    margin-bottom: 26px;
    padding-top: 80px;
    color: #494732;
}

.page-template-ecospace_contact .gravity-form .gform_wrapper .top_label .gfield_label,
.gravity-form .gform_wrapper legend.gfield_label {
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
}

body.page-template .gform_legacy_markup_wrapper .top_label div.ginput_container {
    margin-top: 2px;
}

.page-template-ecospace_contact .gform-body.gform_body input,
.page-template-ecospace_contact .content__data.gravity-form select,
.page-template-ecospace_contact .content__data.gravity-form textarea {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 4px !important;
    border: 1px solid #CED4DA !important;
    background: #FFF !important;
}

.page-template-ecospace_contact .gravity-form .gform_wrapper .gform-body.gform_body .gfield {
    margin-top: 10px;
}

.page-template-ecospace_contact .gform-body.gform_body input,
.page-template-ecospace_contact .content__data.gravity-form select,
.page-template-ecospace_contact .content__data.gravity-form textarea {
    width: calc(100% - 0px) !important;
    min-height: 40px;
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 4px !important;
    border: 1px solid #CED4DA !important;
    background: #FFF !important;
}

.page-template-ecospace_contact .gform_footer .gform_button.button {
    font-family: "usual", sans-serif;
    margin-top: 30px;
    border: 0;
    border-radius: 25px;
    background: #CFD333 !important;
    display: flex;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
    color: #FFF;


}

.page-template-ecospace_contact .ginput_container.ginput_container_textarea textarea {
    height: 90px;
}

.background-position-center-image .imageOne div {
    background-position: center;
}

.layoutdesign-one .imageOne {
    position: relative;
}

.titleInner {
    font-family: "usual", sans-serif;
    color: #fff;
    font-size: 56px;
    line-height: 48px !important;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.6px;    
}
.section_header_block .titleInner {
    margin-bottom: 0;
}

.layoutdesign-one .titleInner {
    /* position: absolute;
    left: 60px;
    bottom: 60px; */
}

.optionOne .row .col-6.order-1 .image-box,.optionOne .row .order-1-de .image-box {
    padding-right: 56px;
}

.content-box ul{ padding-left: 16px;}
.optionOne .col-6.order-2 .content-box,.optionOne .order-2-de .content-box {
    padding-left: 56px;
    padding-right: 112px;
}

.optionOne .row .col-6.order-2 .image-box,.optionOne .row .order-2-de .image-box {
    padding-left: 56px;

}

.optionOne .col-6.order-1 .content-box,.optionOne .order-1-de .content-box {
    padding-left: 107px;
    padding-right: 56px;
}

.block-padding-default {
    padding-top: 80px;
    padding-bottom: 80px;
}

.block-padding-top-bottom-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.block-padding-top-bottom-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.content-box h2,
.caption-wrappe-iner h2,

.default-heading {
    font-family: "usual", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 38.4px;
    margin-bottom: 18px;
}

.caption-wrappe-iner h2 {
    color: #fff;
    margin-bottom: 27px;
}

.content-box .description-title p,
.description-title p,.description-title ul li {
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
    color: #6B7280;
}
.description-title p a{
    text-decoration: underline;
    color: inherit;}
    .description-title p a:hover{
        /* color: #DBE539 ; */
        text-decoration-color: #DBE539;
    }
.caption-wrappe-iner p {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 15.6px */
    letter-spacing: 0.5px;
}

.content-box .description-title p:last-child {
    margin-bottom: 0;
}

.button-group-wrapper {
    margin-top: 18px;
    display: none !important;
}

.button a {
    display: flex;
    padding: 6px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;


}

.Style1 a,
.onee-1 button a {
    color: #FFF;
    background: #CFD333;

}

.onee-1 button a {
    color: #FFF;
    background: #CFD333;
    display: inline-flex;

}

.Style2 a {
    border: 1px solid #BDBC2B;
    color: #BDBC2B;
}

.gap-10 {
    column-gap: 10px;
}

.White {
    background: #fff;
}

.Colour-one {
    /*background: #F8F8F5;*/
    background: #F5F5F5; 
}

.optionTwo .col-6.order-1 .content-box {
    padding-left: 107px;
}

.optionTwo .col-6.order-2 .description-title {
    padding-right: 112px;
}

section.slider-section.padding-defaul64.sectionBanner_4.threeeeee {
    padding-left: 0px;
    padding-right: 0px;
}

.pos-relative {
    position: relative;
}

.block-caption.overlay-caption {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    text-align: center;
}

html {
    overflow-x: hidden;
}

.optionThree .default-heading,
.client-logo-block .default-heading {
    margin-bottom: 60px;
}

.logo-anchor {
    display: block;
    margin-bottom: 30px;
}

.optionFour .row .col-sm-4:last-child .logo-anchor {
    margin-bottom: 0px;
}

.quote-body {
    font-size: 17px;
    /*font-style: italic;*/
    font-weight: 400;
    line-height: 140%;
    /* 23.8px */
    color: #333;
    text-align: center;
    /*margin-bottom: 20px;*/
}

.quote-name {
    color: #494732;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    /*font-weight: 600;*/
    line-height: 150%;
    padding-bottom: 60px;
    /* 24px */
}

.margin-top-80 {
    margin-top: 80px;
}
.margin-top-60 {
    margin-top: 60px;
}
.margin-top-30{
    margin-top: 30px;
}

.teaser-title {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.teaser-excerpt p,
.teaser-excerpt {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
}

.td-thumb-css.caption-content {
    position: relative;
}

.image-caption-title {
    position: absolute;
    left: 60px;
    bottom: 60px;
    width: 100%;
}

.content-description {
    color: #FFF;
    font-family: "usual", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.5px;
}

.slider-section .slick-dots {
    margin-top: 0px;
}

.slick-dots li.slick-active button {
    background: #7D7B64;
    border: 1px solid #7D7B64;
}

.slick-dots li button {
    background: #ffffff;
    border: 1px solid #7D7B64;
}

.slider-section .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

section.slider-section.ACF-layout-2 {
    padding-bottom: 0px;
}

.gap-42 {
    column-gap: 42px;
}

.awards-lgoes-section-wrapper {
    padding-bottom: 80px;
}

.teaser-block-home .button a {
    color: #FFF;
    background: #CFD333;
    display: inline-flex;
}

/* Hide Teaser Block on home for IPTA */
.teaser-block-home {
    display: none;
}

.iframe-container {
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}

.iframe-container iframe {
    margin-top: -61px;
    width: 100%;
    max-width: 1076px;
    height: 500px;
    border: 0;
    /* You can adjust the height as needed */
}

.yellow-bg {
    background: #DBE539;
}

.grows-across-europe-wrapper p {
    color: #333;
    font-family: "usual", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px;
    margin-bottom: 0;
    padding-bottom: 30px;
}

.padding-defaul195 {
    padding: 0 195px 0 195px;
}

.home_slideshow.slider-section {
    padding-top: 40px;
    display: none;
}

.top-description .default-heading,
.top-description p {
    margin-bottom: 10px;
}

.default-heading-small,
.default-heading-small h4 {
    color: #000;
    font-size: 24px;
    font-family: "usual", sans-serif;
    font-weight: 600;
    line-height: 28.8px;
    /* 120% */
}

.roof-form h3 {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 17px;
    /* 121.429% */
    margin-top: 10px;
    margin-bottom: 0;
}

.roof-form p {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
    margin-top: 5px;
    margin-bottom: 0;
}

section.roof-form,
.floor-plan {
    margin-top: 80px;
}

.insign-multiheading {
    margin-bottom: 30px;
}

.table-content-listing .insign-multiheading {
    margin-bottom: 20px;
}

.table-content-listing table th {}

html body.single .table-content-listing table td,
html body.single .table-content-listing table th {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
    padding: 0;
    border: 0;
    background: none;
}

html body.single .table-content-listing table td:hover,
html body.single .table-content-listing table th:hover,
html body.single .table-content-listing table tr:hover td,
html body.single .table-content-listing table tr:hover th {
    background: none !important;
}

.bottom-gallery .slick-slider {
    margin-bottom: 0px;
}

.bottom-gallery .slick-next,
.bottom-gallery .slick-prev {
    top: 50%;
    transform: translateY(-50%);
}

.bottom-gallery .slick-next {
    right: -48px;
}

.bottom-gallery .slick-prev {
    left: -48px;
}

.slick-dots li button {
    background: #ffffff;
    border: 1px solid #A7A7A7;
}

.slick-dots li.slick-active button {
    background: #AAA;
    border: 1px solid #AAA;
}

.slick-dots li {
    margin-right: 6px;
}

.img-block {
    position: relative;
}

.content-wrap {
    color: #000;
    font-family: "usual", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 15.6px */
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.category-name {
    border-radius: 2px;
    background: var(--secondary-700, #BDBC2B);
    display: flex;
    padding: 3px 4px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    color: #fff;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.body-content-highlighter {
    color: var(--text-01-body, #333);
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
}

.body-content-highlighter strong {
    color: var(--text-01-body, #333);
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 21px */
    letter-spacing: 0.3px;
}

.body-content-highlighter i {
    color: var(--text-01-body, #333);
    /* Body/Paragraph + Italic */
    font-family: "usual", sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 350;
    line-height: 24px;
}

.modal-highlighter .modal-dialog {
    max-width: 680px;
}

.spacer-between {
    height: 250px;
}

.block-wrapper {
    margin-bottom: 30px;
}

.default-padding-top-30{padding-top: 30px;} 
.default-padding-bottom-30{padding-bottom: 30px;}
.default-padding-0{
    padding-top: 0px;
}
.padding-top{
    padding-top: 80px !important;
}
.padding-bottom{
    padding-bottom: 80px !important;
}
section.slider-section.overflow-initial{ overflow: initial;}
section.slider-section.overflow-initial .slickSlide .slick-dots,section.slider-section.overflow-initial .slick-dots{
    position: absolute;
}
.highlights-section-wrapper .modal{
    z-index: 99999;
    padding-right: 0px !important;background: #fff;
}
.highlights-section-wrapper .modal-dialog {
    width: 100%;
    max-width: 100%;
    margin: 0rem auto;
    /* height: 100vh; */
}
.modal-wrapper-bx {
    max-width: 678px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 124px;
}
.highlights-section-wrapper .modal-header .modal-title{
    margin-bottom: 30px;
}
.highlights-section-wrapper .modal .category-name{ 
    margin-bottom: 30px;
    position: static;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.popup-description{
    color: var(--text-01-body, #333);
    /* Body/Paragraph */
    font-family: "usual", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.3px;    
}
.popup-description p a{
    font-family: "usual", sans-serif;
    font-weight: 400;
    color: #333;
    font-size: 14px;
    font-style: normal;
    line-height: 150%;
    letter-spacing: 0.3px;
    text-decoration: underline;
}
.popup-description p a:hover{
    text-decoration: none;
}
.highlights-section-wrapper .modal-content{
    height: 100%;border: 0;
}

.highlights-section-wrapper .modal-wrapper-bx img.size-full {
    display: none;
}
.highlight-pop .modal-footer.button.btn-default{
    padding: 0;
    border: 0;    margin-top: 30px;
}
.highlight-pop  .modal-body {
    padding: 0;
    border: 0;
}
.highlight-pop  .modal-header {
    padding: 0;
    text-align: center;
    justify-content: center;border: 0;
}
.highlight-pop  button.close {
    position: absolute;
    font-size: 40px;
    color: #000;
    opacity: 1;
    top: 40px;
    right: 40px;
}
.highlight-pop  button.close:focus{
    outline: none;
}
body.home {
    padding-right: 0 !important;
}
span.bx {
    display: inline-flex;
    padding: 3px;
    background: #343A40;
    border-radius: 4px;
    color: #fff;
    padding: 3px 4px;
    line-height: 1.2;
}

.page-template  .accordion-faqs-by-js{ padding-top: 80px; padding-bottom: 80px; background: #fff;}
.page-template  .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a{
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.8px; 
}
.page-template .sp-easy-accordion>.sp-ea-single{
    border: 0px !important;
}
.page-template .sp-easy-accordion>.sp-ea-single {
    background:none !important;
}
.page-template  .sp-easy-accordion .ea-body p {
    color: #6B7280;
}
.page-template .sp-easy-accordion>.sp-ea-single>.sp-collapse>.ea-body {
    background: none !important;
    padding-top: 5px;
    padding-left: 72px;
}

.page-template .sp-easy-accordion .sp-ea-single .ea-header a .ea-expand-icon{
    margin-right: 20px;
}
.page-template  .sp-easy-accordion>.sp-ea-single>.ea-header a .ea-expand-icon.fa {
    color: #000;
    font-size: 22px;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accordion-faqs-by-js .max-1080 > .d-flex > div{ width: 100%;}

@media screen and (min-width:992px) and (max-width:1480px) {

    .contactUsOverlay .col-md-2.col-sm-3 {
        -webkit-flex: 0 0 24.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 24.66667%;
        flex: 0 0 24.66667%;
        max-width: 24.66667%;
    }

}


@media screen and (min-width:768px) and (max-width:991px) {

    .contactUsOverlay .col-md-2.col-sm-3 {
        -webkit-flex: 0 0 31.66667%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 31.66667%;
        flex: 0 0 31.66667%;
        max-width: 31.66667%;
    }

}

@media screen and (min-width:992px) {
    .fullWidthDropdown a {
        pointer-events: none !important;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {
    .pageSpacer {
        height: 103px;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .filterTExt {
        padding-top: 90px;
    }

    #header .align-self-center {
        /* margin-top: -20px; */
    }
}

@media screen and (max-width:767px) {
    .gform-theme--foundation .gform_fields {
        --gform-theme-form-row-gap: 12px;
    }    
    .pageSpacer {
        height: 0px !important;
    }
    .single-configurator .navigation-wrapper{
        padding: 30px 30px 20px 30px;
        margin-bottom: 0;
    }
    .single-configurator section.roof-form,   .single-configurator .floor-plan {
        margin-top: 60px;
    }
}



/***** 20-01-2023 tasks done by asif==== */

.home-page-hero-icon {
    position: absolute;
    bottom: 180px;
    width: 40px;
    z-index: 99;
    height: 40px;
}

.home-page-hero-icon a:after {
    display: none;
}

.mobileHeroVideo {
    position: relative;
}
.page-template-ecospace_contact #page a{    color: #333;}
.page-template-ecospace_contact .gform-theme--foundation .gform_fields {
    row-gap: 15px;
}
.page-template-ecospace_contact  .gform-theme--foundation .gfield textarea.large {
    min-block-size: 6rem;
}a.underline {
    text-decoration: underline;
}

/* ==========================================================================
   Celia Birtwell 2026 typography (Figma text styles)
   Fonts: Adobe Fonts kit lrk5jgj (loaded in header.php)
   ========================================================================== */

body,
p {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
}

/* All paragraphs use the Celia Birtwell body font, overriding legacy IPTA class-specific
   font-family rules (Chinese pages keep Noto Sans TC) */
body:not(.lang-zh-hant) p {
    font-family: "aktiv-grotesk", sans-serif !important;
}

h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
}

h1, .h1 {
    font-size: 73px;
    line-height: 70px;
    letter-spacing: 1.5px;
}

h2, .h2 {
    font-size: 41px;
    line-height: 44.4px;
    letter-spacing: 0.5px;
}

h3, .h3 {
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
}

h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: "aktiv-grotesk", sans-serif;
    font-style: normal;
}

h4, .h4 {
    font-weight: 500;
    font-size: 20px;
    line-height: 28.8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h5, .h5 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h6, .h6 {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    text-transform: none;
}

.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
}

.display-1 {
    font-size: 56px;
    line-height: normal;
}

.display-2 {
    font-size: 50px;
    line-height: 135%;
}

.display-3 {
    font-size: 45px;
    line-height: normal;
    letter-spacing: 0.5px;
}

.display-4 {
    font-size: 40px;
    line-height: normal;
}


/* ==========================================================================
   Celia Birtwell 2026 header + burger overlay menu (Figma: Header / D_Menu_Overlay)
   Markup: header.php, behaviour: js/cb-menu-overlay.js
   ========================================================================== */

/* Header bar (shared by the page header and the overlay's top bar).
   #navbar.cb-header__bar beats the legacy IPTA "#navbar { height: 100px }" rule. */
.cb-header__bar,
#navbar.cb-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    padding: 0 var(--cb-side);
}

.cb-header__logo-type img,
.cb-header__logo-face img {
    display: block;
}

.cb-header__logo-type img {
    width: 150px;
    height: 22px;
}

.cb-header__logo-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cb-header__logo-face img {
    width: 50px;
    height: 67px;
}

.cb-header__logo-type::after,
.cb-header__logo-face::after {
    content: none !important;
}

.cb-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Menu items, e.g. ABOUT / WORKS / RESOURCES / CONTACT, and the overlay's SEARCH */
#header ul.cb-header__menu {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

#header ul.cb-header__menu li {
    margin: 0;
}

#header ul.cb-header__menu li a,
.cb-header__text {
    display: block;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
}

#header ul.cb-header__menu li a::after,
.cb-overlay__menu li a::after {
    background-color: currentColor !important;
}

/* Selected state (Figma: 1px underline inside the text box). Covers the current page and
   its section (page ancestors), e.g. Resources while on Timeline. Hover uses the same line. */
#header ul.cb-header__menu li.current-menu-item > a::after,
#header ul.cb-header__menu li.current-menu-ancestor > a::after,
#header ul.cb-header__menu li.current-page-ancestor > a::after,
#header ul.cb-header__menu li > a:hover::after,
#header ul.cb-header__menu li > a:focus::after {
    opacity: 1;
    transform: none;
}

.cb-header__icon-btn {
    display: block;
    width: 28px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

.cb-header__icon-btn svg {
    display: block;
}

/* Transparent header only for now: cancel the legacy white background on scroll */
#header.cb-header,
#header.cb-header.darkHeaderr {
    background: transparent;
}

/* Overlay: full-viewport layer (transparent backdrop closes it on click) with the panel at the top */
.cb-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    will-change: opacity; /* fade runs on the GPU from the first frame */
}

.cb-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.cb-overlay__panel {
    outline: none;
    max-height: 100%;
    overflow-y: auto;
    background: #222222;
    color: #fff;
}

.cb-overlay__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    padding: 40px var(--cb-side);
}

.cb-overlay__col {
    padding: 20px 0;
    border-top: 1px solid #656464;
}

.cb-overlay__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-overlay__menu li a {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.84);
}

.cb-overlay__menu li.overlay_menu_heading {
    margin-bottom: 14px;
}

.cb-overlay__menu li.overlay_menu_heading a {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
    color: #fff;
}

body.cb-menu-is-open {
    overflow: hidden;
}

/* Tablet: burger only in the header, 2-column overlay */
@media screen and (max-width: 991px) {
    #header ul.cb-header__menu {
        display: none;
    }

    .cb-overlay__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: first pass, overlay columns stacked vertically, full height (to be reviewed) */
@media screen and (max-width: 767px) {
    .cb-header__bar,
    #navbar.cb-header__bar {
        height: 80px;
        padding: 0 30px;
    }

    .cb-header__logo-face {
        display: none;
    }

    .cb-overlay__panel {
        height: 100%;
    }

    .cb-overlay__grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 8px 30px 40px;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 footer (Figma: Desktop Footer, Colour=Red)
   Markup: footer.php, menus printed by cb_footer_menu() in functions.php
   ========================================================================== */

#footer.cb-footer {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    background-color: #ea263c;
    color: #fff;
}

.cb-footer__inner {
    position: relative;
    z-index: 1;
    padding: 0 var(--cb-side);
}

/* Flowers: left one is fixed against the menu columns, right one against the right edge */
.cb-footer__flowers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.cb-footer__flower {
    position: absolute;
    display: block;
    height: auto;
}

.cb-footer__flower--left {
    left: 324px;
    bottom: 33px;
    width: 155px;
}

.cb-footer__flower--right {
    right: 40px;
    bottom: 39px;
    width: 213px;
}

.cb-footer__logo {
    display: flex;
    padding: 80px 0;
}

.cb-footer__logo a {
    display: block;
}

.cb-footer__logo a::after {
    content: none !important;
}

.cb-footer__logo img {
    display: block;
    width: 282px;
    height: 42px;
}

.cb-footer__links {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 150px;
}

.cb-footer__menus {
    display: flex;
    gap: 30px;
}

.cb-footer__col {
    flex: none;
    width: 188px; /* Figma: 187-189px columns */
}

#footer .cb-footer__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .cb-footer__menu li {
    display: block;
    line-height: normal;
}

/* Menu items and contact text: Aktiv Grotesk 14px, 4px padding as in Figma */
#footer .cb-footer__menu li > a,
#footer .cb-footer__menu li > span,
.cb-footer__email > *,
.cb-footer__bottom .site-by-tamassy {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #fff;
}

#footer .cb-footer__menu li > a,
#footer .cb-footer__menu li > span {
    display: inline-block;
    padding: 4px;
}

#footer .cb-footer__menu li.footer_menu_heading > a,
#footer .cb-footer__menu li.footer_menu_heading > span {
    padding: 4px 4px 8px;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
}

/* Social icons: current IPTA icon files, shown white on red until replaced */
#footer .cb-footer__menu li.instagram-nav > a,
#footer .cb-footer__menu li.linkedIn-nav > a {
    padding-left: 28px;
    background-position: 0 center;
    background-size: 20px 20px;
}

#footer .cb-footer__menu li.instagram-nav > a,
#footer .cb-footer__menu li.linkedIn-nav > a,
#footer.cb-footer .scroll-to-up img {
    filter: brightness(0) invert(1);
}

#footer.cb-footer a::after {
    background-color: currentColor !important;
}

.cb-footer__contact {
    width: 308px;
}

.cb-footer__company {
    margin: 0;
    padding: 4px 4px 8px;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 1px;
    color: #fff;
}

.cb-footer__email {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.cb-footer__email > * {
    padding: 4px;
}

#footer .cb-footer__button {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 12px;
    border: 1px solid #fff;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #fff;
}

#footer .cb-footer__button::after {
    content: none !important;
}

.cb-footer__bottom {
    position: relative;
    min-height: 156px;
    padding: 80px 0 30px;
}

.cb-footer__bottom .site-by-tamassy {
    top: 0;
}

.cb-footer__bottom .site-by-tamassy a {
    color: inherit;
}

/* Narrower desktop: contact block drops below the menu columns */
@media screen and (max-width: 1099px) {
    .cb-footer__links {
        flex-wrap: wrap;
    }

    .cb-footer__contact {
        width: 100%;
        margin-top: 30px;
    }
}

/* Tablet & mobile: stacked layout, flowers in a row at the bottom */
@media screen and (max-width: 991px) {
    #footer.cb-footer {
        display: flex;
        flex-direction: column;
    }

    .cb-footer__flowers {
        position: static;
        order: 2;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 var(--cb-side);
    }

    .cb-footer__flower {
        position: static;
    }

    .cb-footer__logo {
        padding: 60px 0 40px;
    }

    .cb-footer__links {
        display: block;
        min-height: 0;
    }

    .cb-footer__col {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .cb-footer__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 0;
        padding: 40px 0 30px;
    }

    #footer.cb-footer .scroll-to-up {
        position: static;
        margin: 0;
    }
}

@media screen and (max-width: 767px) {
    .cb-footer__inner {
        padding: 0 30px;
    }

    .cb-footer__menus {
        flex-direction: column;
        gap: 24px;
    }

    .cb-footer__col {
        flex: none;
        width: auto;
    }

    .cb-footer__flowers {
        padding: 0 30px;
    }

    .cb-footer__logo img {
        width: 200px;
        height: auto;
    }

    .cb-footer__flower--left {
        width: 110px;
    }

    .cb-footer__flower--right {
        width: 150px;
    }

    .cb-footer__bottom .site-by-tamassy {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 block background colours (ACF block_background_colour)
   ========================================================================== */

.cb-bg-colour1 { background-color: #FDF6E2; } /* Cream */
.cb-bg-colour2 { background-color: #E7BBC8; } /* Pink */
.cb-bg-colour3 { background-color: #8CABCF; } /* Blue */
.cb-bg-colour4 { background-color: #82B280; } /* Green */
.cb-bg-colour5 { background-color: #EA263C; } /* Red */
.cb-bg-colour6 { background-color: #FFFFFF; } /* White */
.cb-bg-colour7 { background-color: #E5E5E5; } /* Grey */


/* ==========================================================================
   Celia Birtwell 2026 "Text Block Body" (ACF text_block_body, e.g. Privacy Policy)
   The legacy IPTA ".contentDescription p / a" rules make this text 14px light grey
   and links 13px bold; bring paragraphs, lists and links back to the body text style.
   ========================================================================== */

.textBlock.contentDescription p,
.textBlock.contentDescription li {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #333333;
}

.textBlock.contentDescription p {
    margin: 0 0 1em;
}

.textBlock.contentDescription ul,
.textBlock.contentDescription ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.textBlock.contentDescription li {
    margin-bottom: 0.5em;
    padding-left: 0.25em;
}

.textBlock.contentDescription li:last-child {
    margin-bottom: 0;
}

.textBlock.contentDescription p a,
.textBlock.contentDescription li a {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}


/* ==========================================================================
   Celia Birtwell 2026 "Title + Description Block" (Figma: Block Heading & Copy Horizontal)
   Markup: template-parts/cb-block-title-description.php
   ========================================================================== */

.cb-td {
    padding: 80px var(--cb-side);
}

/* 12-column grid (30px gutter): heading in columns 1-5, description in columns 7-11 */
.cb-td__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 30px;
    align-items: start;
}

.cb-td__header {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cb-td__description {
    grid-column: 7 / span 5;
}

.cb-td__small,
.cb-td__heading {
    margin: 0;
    color: #000;
}

.cb-td .cb-td__buttons {
    margin-top: 22px; /* 40px from the heading with the 18px gap */
}

.cb-td__description,
.cb-td__description p,
.cb-td__description li {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #333333;
}

.cb-td__description p {
    margin: 0 0 1.5em; /* one empty line between paragraphs, as Figma */
}

.cb-td__description p:last-child {
    margin-bottom: 0;
}

.cb-td__description strong,
.cb-td__description b {
    font-weight: 600;
}

.cb-td__description a {
    color: inherit;
}

/* Tablet / mobile: stacked */
@media screen and (max-width: 991px) {
    .cb-td__header,
    .cb-td__description {
        grid-column: 1 / -1;
    }

    .cb-td__description {
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    .cb-td {
        padding: 60px 30px;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 Gravity Forms (Figma: Contact Form), e.g. the Contact page form
   placed in a Title + Description Block. Overrides the Gravity Forms "Orbital" theme,
   scoped to our blocks (#page raises specificity above the plugin's rules).
   ========================================================================== */

#page .cb-td .gform_wrapper {
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
}

#page .cb-td .gform_wrapper .gform_fields {
    row-gap: 20px;
}

/* Labels: Aktiv 18 semibold, 8px above the input */
#page .cb-td .gform_wrapper .gfield_label {
    margin: 0 0 8px;
    padding: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #494732;
}

/* "(Required)" as Gravity Forms prints it, in the body font */
#page .cb-td .gform_wrapper .gfield_required,
#page .cb-td .gform_wrapper .gfield_required_text {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #6c6a5b;
}

/* Inputs: white, 1px #ced4da, 4px corners */
#page .cb-td .gform_wrapper input[type="text"],
#page .cb-td .gform_wrapper input[type="email"],
#page .cb-td .gform_wrapper input[type="tel"],
#page .cb-td .gform_wrapper input[type="url"],
#page .cb-td .gform_wrapper input[type="number"],
#page .cb-td .gform_wrapper select,
#page .cb-td .gform_wrapper textarea {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 7px 12px; /* Figma 8px 12px with the 1px border inside */
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #222222;
}

#page .cb-td .gform_wrapper input[type="text"],
#page .cb-td .gform_wrapper input[type="email"],
#page .cb-td .gform_wrapper input[type="tel"],
#page .cb-td .gform_wrapper input[type="url"],
#page .cb-td .gform_wrapper input[type="number"],
#page .cb-td .gform_wrapper select {
    height: 37px;
    padding-top: 0;
    padding-bottom: 0;
}

#page .cb-td .gform_wrapper textarea {
    height: 95px;
    min-height: 95px;
    resize: vertical;
}

#page .cb-td .gform_wrapper input:focus,
#page .cb-td .gform_wrapper select:focus,
#page .cb-td .gform_wrapper textarea:focus {
    border-color: #494732;
    outline: none;
    box-shadow: none;
}

/* Submit: 30px below the last field, filled dark button (as CTA Style1) */
#page .cb-td .gform_wrapper .gform_footer {
    margin: 30px 0 0;
    padding: 0;
}

#page .cb-td .gform_wrapper .gform_footer .gform_button {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 17px; /* Figma 10px 18px with the 1px border inside */
    border: 1px solid #333333;
    border-radius: 0;
    background-color: #333333;
    box-shadow: none;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #fff;
    cursor: pointer;
}

#page .cb-td .gform_wrapper .gform_footer .gform_button:hover,
#page .cb-td .gform_wrapper .gform_footer .gform_button:focus {
    background-color: #000;
    border-color: #000;
    outline: none;
}

/* Errors: red kept, in the site fonts */
#page .cb-td .gform_wrapper .gform_validation_errors {
    margin: 0 0 30px;
    padding: 12px 16px;
    border: 1px solid #c02b0a;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
}

#page .cb-td .gform_wrapper .gform_validation_errors .gform_submission_error {
    margin: 0;
    padding: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #c02b0a;
}

#page .cb-td .gform_wrapper .gfield_error input,
#page .cb-td .gform_wrapper .gfield_error textarea {
    border-color: #c02b0a;
}

#page .cb-td .gform_wrapper .gfield_validation_message,
#page .cb-td .gform_wrapper .validation_message {
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #c02b0a;
}

/* Thank-you message after sending */
#page .cb-td .gform_confirmation_message {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #222222;
}


/* ==========================================================================
   Celia Birtwell 2026 "Timeline Block" (Figma: Timeline_Block, D_Resources_Timeline)
   Markup: template-parts/cb-block-timeline.php
   ========================================================================== */

.cb-tl {
    position: relative;
    padding: 80px var(--cb-side);
    border-bottom: 1px solid #dddddd;
    background-repeat: no-repeat;
}

/* Background image: top aligned, full block height, pinned left or right (as the Image + Title + Description Block) */
.cb-tl--bg-left {
    background-position: left top;
    background-size: auto 100%;
}

.cb-tl--bg-right {
    background-position: right top;
    background-size: auto 100%;
}

/* 12-column grid (30px gutter): year 1-2, heading + description 3-9, image 10-12, vertically centred */
.cb-tl__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 30px;
    align-items: center;
}

.cb-tl__year {
    grid-column: 1 / span 2;
}

.cb-tl__body {
    grid-column: 3 / span 7;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cb-tl__media {
    grid-column: 10 / span 3;
}

.cb-tl__year,
.cb-tl__heading {
    margin: 0;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-size: 41px;
    line-height: 44.4px;
    letter-spacing: 0.5px;
    color: #000;
}

/* the year is a <p>: keep the Garamond over the global paragraph font rule */
body:not(.lang-zh-hant) p.cb-tl__year {
    font-family: "adobe-garamond-pro", serif !important;
}

.cb-tl__description,
.cb-tl__description p {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #333333;
}

.cb-tl__description p {
    margin: 0 0 1em;
}

.cb-tl__description p:last-child {
    margin-bottom: 0;
}

/* Image: original proportions, full column width */
.cb-tl__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet / mobile: year in a narrow left column; heading, description and image stacked on the right */
@media screen and (max-width: 991px) {
    .cb-tl {
        padding: 60px var(--cb-side);
    }

    .cb-tl__inner {
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 30px;
        row-gap: 24px;
        align-items: start;
    }

    .cb-tl__year {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .cb-tl__body {
        grid-column: 2;
        grid-row: 1;
        gap: 12px;
    }

    .cb-tl__media {
        grid-column: 2;
        grid-row: 2;
        max-width: 420px;
    }

    .cb-tl__year,
    .cb-tl__heading {
        font-size: 32px;
        line-height: 36px;
    }
}

@media screen and (max-width: 767px) {
    .cb-tl {
        padding: 40px 30px;
    }

    .cb-tl__inner {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 20px;
    }

    .cb-tl__year,
    .cb-tl__heading {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: 0.3px;
    }

    .cb-tl__body {
        gap: 10px;
    }

    .cb-tl__description,
    .cb-tl__description p {
        font-size: 16px;
    }

    /* As the Image + Title + Description Block: the pattern would sit behind the text when stacked */
    .cb-tl--bg-left,
    .cb-tl--bg-right {
        background-image: none !important;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 "Image + Title + Description Block"
   (Figma: D_About_Longer / Upcoming Exhibition)
   Markup: template-parts/cb-block-image-title-description.php
   ========================================================================== */

.cb-itd {
    position: relative;
    padding: 80px var(--cb-side);
    background-repeat: no-repeat;
}

/* Background image: top aligned, full block height, pinned left or right */
.cb-itd--bg-left {
    background-position: left top;
    background-size: auto 100%;
}

.cb-itd--bg-right {
    background-position: right top;
    background-size: auto 100%;
}

.cb-itd__inner {
    display: flex;
    align-items: center;
    gap: 140px;
}

.cb-itd--image-right .cb-itd__inner {
    flex-direction: row-reverse;
}

.cb-itd__media {
    flex: 0 0 48.83%; /* 625px of 1280px */
    min-width: 0;
}

.cb-itd__media img {
    display: block;
    width: 100%;
    aspect-ratio: 625 / 483;
    object-fit: cover;
}

.cb-itd__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cb-itd__small,
.cb-itd__heading {
    margin: 0;
}

.cb-itd__small {
    color: #222222;
}

.cb-itd__heading {
    color: #000000;
}

.cb-itd__description,
.cb-itd__description p {
    color: #333333;
}

.cb-itd__description p {
    margin: 0 0 1em;
}

.cb-itd__description p:last-child {
    margin-bottom: 0;
}

/* Tablet: no empty column between image and text; 6 columns each with the 30px gutter */
@media screen and (max-width: 991px) {
    .cb-itd__inner {
        gap: 30px;
    }

    .cb-itd__media {
        flex-basis: calc(50% - 15px);
    }

    /* The pattern would sit right behind the text (iPad mini and smaller), so hide it */
    .cb-itd--bg-left,
    .cb-itd--bg-right {
        background-image: none !important;
    }
}

/* Mobile: first pass, stacked */
@media screen and (max-width: 767px) {
    .cb-itd {
        padding: 60px 30px;
    }

    .cb-itd__inner,
    .cb-itd--image-right .cb-itd__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .cb-itd__media {
        flex-basis: auto;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 "Section Header Block" text (Figma: D_About_Longer hero)
   Markup: template-parts/cb-section-header-text.php
   ========================================================================== */

/* Image/video: the block keeps the Tall/Short ratio as a minimum height and grows
   if the text needs more room; the media layer fills the whole block. */
.cb-shb .imageOne {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-shb--tall .imageOne {
    aspect-ratio: 1 / 0.5626;
}

.cb-shb--short .imageOne {
    aspect-ratio: 1 / 0.4167; /* 600px at 1440 */
}

.cb-shb .imageOne > div:first-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto !important; /* overrides the legacy JS pixel height */
    background-position: center;
}

.cb-shb .imageOne > div:first-child iframe,
.cb-shb .imageOne > div:first-child video {
    width: 100%;
    height: 100%;
}

/* Slideshow: text fixed on top while slides change */
.cb-shb--slideshow {
    position: relative;
}

.cb-shb--slideshow .cb-shb__text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
}

.cb-shb--slideshow .cb-shb__text > * {
    pointer-events: auto;
}

/* Text: side margin from the left (--cb-side), up to 700px wide, vertically centred (100px extra top clears the header) */
.cb-shb__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-sizing: content-box;
    max-width: 700px;
    padding: 160px var(--cb-side) 60px;
}

.cb-shb__small,
.cb-shb__heading {
    margin: 0;
}

.cb-shb__small {
    color: rgba(255, 255, 255, 0.82);
}

.cb-shb__heading {
    color: #fff;
}

.cb-shb__body,
.cb-shb__body p {
    color: rgba(255, 255, 255, 0.82);
}

.cb-shb__body p {
    margin: 0 0 1em;
}

.cb-shb__body p:last-child {
    margin-bottom: 0;
}

.cb-shb__buttons a {
    color: #fff;
}

/* Mobile: first pass */
@media screen and (max-width: 767px) {
    .cb-shb__text {
        max-width: none;
        width: auto;
        padding: 120px 30px 40px;
        gap: 18px;
    }

    .cb-shb__heading {
        font-size: 44px;
        line-height: 46px;
    }

    /* Home slideshow: about square (min height = screen width), growing if the text needs more room;
       the slides fill the block behind it, cropped to cover */
    .cb-shb--slideshow {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vw;
        overflow: hidden;
    }

    .cb-shb--slideshow .cb-shb__text {
        position: relative;
        top: auto;
        bottom: auto;
    }

    .cb-shb--slideshow .home-slider {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
    }

    .cb-shb--slideshow .home-slider .slick-list,
    .cb-shb--slideshow .home-slider .slick-track,
    .cb-shb--slideshow .home-slider .slick-slide,
    .cb-shb--slideshow .home-slider .slick-slide > div,
    .cb-shb--slideshow .slick-slider-item,
    .cb-shb--slideshow .td-thumb-css,
    .cb-shb--slideshow .image-slider {
        height: 100%;
    }

    .cb-shb--slideshow .image-slider img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 CTA buttons (Figma: Buttons, Size=Default, Style=Primary)
   ACF cta_button_style: Style1 = Filled, Style2 = Outline
   Scoped to the new blocks; the legacy IPTA rule ".button-group-wrapper
   { display: none !important }" still hides buttons in old IPTA layouts.
   ========================================================================== */

.cb-itd .button-group-wrapper,
.cb-td .button-group-wrapper,
.cb-shb .button-group-wrapper,
.cb-featured .button-group-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.cb-itd .button a,
.cb-td .button a,
.cb-shb .button a,
.cb-featured .button a {
    display: inline-block;
    padding: 9px 17px; /* Figma 10px 18px with the 1px border drawn inside */
    border: 1px solid transparent;
    border-radius: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.cb-itd .button a::after,
.cb-td .button a::after,
.cb-shb .button a::after,
.cb-featured .button a::after {
    content: none !important;
}

/* Style1: Filled */
.cb-itd .button.Style1 a,
.cb-td .button.Style1 a,
.cb-featured .button.Style1 a {
    background-color: #333333;
    border-color: #333333;
    color: #fff;
}

/* Style2: Outline */
.cb-itd .button.Style2 a,
.cb-td .button.Style2 a,
.cb-featured .button.Style2 a {
    background-color: transparent;
    border-color: #2b2723;
    color: #2b2723;
}

/* Section Header Block sits on a dark image: white versions (not in Figma yet) */
.cb-shb .button.Style1 a {
    background-color: #fff;
    border-color: #fff;
    color: #333333;
}

.cb-shb .button.Style2 a {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}


/* ==========================================================================
   Celia Birtwell 2026 header: solid (black on white) version + dark content on scroll-up
   (Figma: Header / Status=Solid). Solid is set by cb_header_is_solid() in functions.php:
   single Work / Collaboration, or ACF header_colour = black.
   ========================================================================== */

/* Both logo colours are in the markup; show one */
.cb-header .cb-logo-black {
    display: none;
}

/* Dark content: solid header, and the transparent header's scroll-up mini-header */
.cb-header--solid .cb-logo-black,
#header.cb-header.darkHeaderr .cb-logo-black {
    display: block;
}

.cb-header--solid .cb-logo-white,
#header.cb-header.darkHeaderr .cb-logo-white {
    display: none;
}

#header.cb-header--solid ul.cb-header__menu li a,
#header.cb-header.darkHeaderr ul.cb-header__menu li a,
#header.cb-header--solid .cb-header__icon-btn,
#header.cb-header.darkHeaderr .cb-header__icon-btn {
    color: #222222;
}

/* Solid: white background and 1px bottom line, also on its scroll-up mini-header */
#header.cb-header--solid,
#header.cb-header--solid.darkHeaderr {
    background: #fff;
    box-shadow: inset 0 -1px 0 #dddddd; /* 1px bottom line inside the 120px, as in Figma */
}

/* The solid header is fixed and not transparent: push the page content below it */
body.cb-has-solid-header #page {
    padding-top: 120px;
}

@media screen and (max-width: 767px) {
    body.cb-has-solid-header #page {
        padding-top: 80px;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 single pages (Work; Collaboration next)
   Markup: single-work.php + template-parts/cb-single/
   ========================================================================== */

.wrapper.cb-single {
    padding-top: 0;
    padding-bottom: 0;
}

/* Breadcrumb strap (Figma: Breadcrumb) */
.cb-breadcrumb {
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 0 var(--cb-side);
    background-color: #94b983;
}

.cb-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-breadcrumb__item,
.cb-breadcrumb__item a {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #242424;
}

.cb-breadcrumb__item + .cb-breadcrumb__item::before {
    content: "/";
    padding: 0 0.6em;
}

.cb-breadcrumb__item a::after {
    background-color: currentColor !important;
}

/* Intro (Figma: About / Biography on D_Work_Single); layout from .cb-itd */
.cb-single-intro {
    background-color: #fff;
    border-bottom: 1px solid #dddddd;
}

.cb-single-intro .cb-itd__media img {
    border: 1px solid #dddddd;
}

.cb-single-intro .cb-itd__small {
    color: #000;
}

.cb-single-intro .cb-itd__heading {
    color: #242424;
}

.cb-single-intro .cb-itd__description,
.cb-single-intro .cb-itd__description p {
    color: #222222;
}

.cb-single-intro__details {
    padding: 18px 0;
    border-top: 1px solid #dddddd;
}

.cb-single-intro__details p {
    margin: 0;
    color: #222222;
}

.cb-single-intro__details strong {
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    .cb-breadcrumb {
        min-height: 0;
        padding: 16px 30px;
    }
}


/* Related posts block + teaser cards (Figma: Featured Post Block / Featured Project preview card)
   Markup: template-parts/cb-single/related-grid.php */
.cb-related {
    padding: 80px var(--cb-side);
}

.cb-related__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 625px;
    padding-bottom: 40px;
}

.cb-related__label,
.cb-related__title {
    margin: 0;
    color: #000;
}

/* Related Collaborations / Related Works: heading across the full 12 columns
   (the Featured Post Block keeps the 625px text column for its description) */
.cb-related:not(.cb-featured) .cb-related__header {
    max-width: none;
}

.cb-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.cb-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    text-decoration: none;
}

.cb-card::after {
    content: none !important;
}

.cb-card:hover {
    text-decoration: none;
}

.cb-card__image {
    aspect-ratio: 405 / 303;
    overflow: hidden;
    background-color: #e5e5e5;
}

/* "Explore all" button under the cards: shown only when there are more items than cards */
.cb-related__more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.cb-related__more-btn,
.cb-loadmore__btn {
    display: inline-block;
    padding: 9px 17px; /* Figma 10px 18px with the 1px border inside */
    border: 1px solid #2b2723;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #2b2723;
    text-decoration: none;
}

.cb-related__more-btn::after,
.cb-loadmore__btn::after {
    content: none !important;
}

.cb-related__more-btn:hover {
    color: #2b2723;
    text-decoration: none;
}

.cb-card__image img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #dddddd;
}

.cb-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
}

.cb-card__title {
    margin: 0;
    font-family: "adobe-garamond-pro", serif;
    font-weight: 600;
    font-size: 25px;
    line-height: 120%;
    letter-spacing: 0;
    color: #000;
}

.cb-card__meta,
.cb-card__link {
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
}

.cb-card__meta {
    color: #333333;
}

.cb-card__link {
    color: #e63247;
}

@media screen and (max-width: 991px) {
    .cb-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .cb-related {
        padding: 60px 30px;
    }

    .cb-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Featured Post Block (Figma: Featured Post Block): the related block above + description, CTA buttons,
   optional background image. Markup: template-parts/cb-block-featured-posts.php */
.cb-featured {
    background-repeat: no-repeat;
}

.cb-featured--bg-left {
    background-position: left top;
    background-size: auto 100%;
}

.cb-featured--bg-right {
    background-position: right top;
    background-size: auto 100%;
}

.cb-featured__description,
.cb-featured__description p {
    color: #333333;
}

.cb-featured__description p {
    margin: 0 0 1em;
}

.cb-featured__description p:last-child {
    margin-bottom: 0;
}

/* Buttons centred under the cards, 30px gap (Figma) */
.cb-featured .cb-featured__buttons {
    justify-content: center;
    margin-top: 30px;
}

.cb-featured .cb-related__header + .cb-featured__buttons {
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    /* As the Image + Title + Description Block: the pattern would sit behind the text when stacked */
    .cb-featured--bg-left,
    .cb-featured--bg-right {
        background-image: none !important;
    }
}


/* ==========================================================================
   Celia Birtwell 2026 Work gallery (Figma: Gallery) + PhotoSwipe 5 overlay
   (Figma: Fullscreen Gallery Overlay). Markup: template-parts/cb-single/gallery.php,
   behaviour: js/cb-gallery.js, library: js/vendor/photoswipe/
   ========================================================================== */

.cb-gallery {
    padding: 80px var(--cb-side);
    background-color: #f5f5f5;
}

.cb-gallery__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 625px;
    margin-bottom: 80px;
}

.cb-gallery__label,
.cb-gallery__title,
.cb-gallery__intro {
    margin: 0;
}

.cb-gallery__label,
.cb-gallery__intro {
    color: #000;
}

.cb-gallery__title {
    color: #242424;
}

/* Grid: Bootstrap row/cols (30px gutter); each row starts below the tallest item of the previous one */
.cb-gallery__col {
    margin-bottom: 30px;
}

/* Large monitors (wider than the 1440px design): 4 per row instead of 3 */
@media screen and (min-width: 1441px) {
    .cb-gallery__col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.cb-gallery__item {
    display: block;
    container-type: inline-size; /* lets the image use the column width as its max height */
    text-decoration: none;
}

.cb-gallery__item::after {
    content: none !important;
}

.cb-gallery__item:hover {
    text-decoration: none;
}

.cb-gallery__item:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 4px;
}

/* Original aspect ratio, no crop: max width and max height = column width, top-left aligned */
.cb-gallery__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100cqw;
    border: 1px solid #dddddd;
}

/* Caption directly under the actual image */
.cb-gallery__caption {
    display: block;
    padding: 20px 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #222222;
}

@media screen and (max-width: 767px) {
    .cb-gallery {
        padding: 60px 30px;
    }

    .cb-gallery__header {
        margin-bottom: 40px;
    }
}

/* PhotoSwipe overlay */
.pswp {
    --pswp-bg: #090909;
    --pswp-icon-color: #fff;
    z-index: 2147483001; /* above the site header and burger overlay */
}

.pswp__top-bar {
    top: 16px;
    height: 48px;
    padding-right: 16px;
    gap: 8px;
}

.pswp__counter {
    margin: 0 0 0 32px;
    height: auto;
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #fff;
    opacity: 0.92;
}

.pswp__top-bar .pswp__button,
.pswp__button--arrow {
    width: 48px;
    height: 48px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.32);
    opacity: 1;
}

.pswp__button .pswp__icn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* PhotoSwipe's built-in icons, scaled to sit inside the 48px buttons */
.pswp__top-bar .pswp__button .pswp__icn {
    width: 28px;
    height: 28px;
}

.pswp__button--arrow .pswp__icn {
    width: 44px;
    height: 44px;
    margin-top: 0; /* PhotoSwipe default offsets the 60px arrow icon */
}

.pswp__button--arrow {
    top: 50%;
    margin-top: -24px;
}

.pswp__button--arrow--prev {
    left: 32px;
}

.pswp__button--arrow--next {
    right: 32px;
}

.pswp__button--arrow--next .pswp__icn {
    transform: translate(-50%, -50%) scale(-1, 1);
}

.pswp__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Bottom caption area (grows with its content; image padding follows it in cb-gallery.js) */
.pswp__cb-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    min-height: 112px;
    padding: 28px 32px;
    background-color: rgba(0, 0, 0, 0.48);
}

.pswp__cb-caption[hidden] {
    display: none;
}

.pswp__cb-caption .cb-pswp-caption__text {
    display: block;
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #fff;
}

.pswp__cb-caption .cb-pswp-caption__meta {
    display: block;
    margin-top: 1px;
    font-family: "aktiv-grotesk", sans-serif;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #b8b8b8;
}

@media screen and (max-width: 767px) {
    .pswp__button--arrow--prev {
        left: 8px;
    }

    .pswp__button--arrow--next {
        right: 8px;
    }

    .pswp__cb-caption {
        min-height: 0;
        padding: 16px 20px;
    }
}



/* ==========================================================================
   Celia Birtwell 2026 Works list (Figma: D_Work_Index)
   Markup: template-parts/cb-work-list.php, load more: js/cb-work-list.js
   Hero = Section Header Block styles (.cb-shb); cards = .cb-card / .cb-related__grid
   ========================================================================== */

.wrapper.cb-work-list {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sub menu strap (Figma: Sub Menu/Works) */
.cb-submenu {
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 0 var(--cb-side);
    background-color: #94b983;
}

.cb-submenu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-submenu__list a {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #242424;
}

.cb-submenu__list a::after {
    background-color: currentColor !important;
}

/* Catalogue */
.cb-catalogue {
    padding: 80px var(--cb-side) 40px;
    background-color: #f5f5f5;
}

.cb-catalogue__label {
    margin: 0 0 40px;
    color: #000;
}

.cb-work-card.is-hidden {
    display: none;
}

/* Load more (Figma: Load more navigation / Works) */
.cb-loadmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 var(--cb-side) 80px;
    background-color: #f5f5f5;
}

.cb-loadmore__label {
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000;
}

.cb-loadmore__progress {
    width: 240px;
    height: 2px;
    background-color: #d1d1cc;
}

.cb-loadmore__bar {
    display: block;
    height: 100%;
    background-color: #2b2723;
    transition: width 0.3s ease-out;
}

.cb-loadmore__btn {
    background: transparent;
    cursor: pointer;
}

.cb-loadmore__btn:focus-visible {
    outline: 2px solid #2b2723;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cb-loadmore__bar {
        transition: none;
    }
}

@media screen and (max-width: 767px) {
    .cb-submenu {
        min-height: 0;
        padding: 16px 30px;
    }

    .cb-catalogue {
        padding: 60px 30px 30px;
    }

    .cb-loadmore {
        padding: 0 30px 60px;
    }
}


/* Works filter (Figma: Work/Filter, State=On / Off); open/close animation in js/cb-work-list.js */
.cb-filter {
    padding: 30px var(--cb-side);
    background-color: #f5f5f5;
    border-bottom: 1px solid #d8d8d2;
}

.cb-filter__toggle {
    display: flex; /* block-level: no extra line-box height above/below (Figma strip is 79px closed) */
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #222222;
    cursor: pointer;
}

/* No focus ring after a mouse click (Bootstrap adds a blue one on :focus); keyboard users keep a subtle dark ring */
.cb-filter__toggle:focus:not(:focus-visible) {
    outline: none;
}

.cb-filter__toggle:focus-visible {
    outline: 1px solid #222222;
    outline-offset: 4px;
}

/* +/- icon (as joycewangstudio.com): the vertical bar rotates flat and fades when open */
.cb-filter__icon {
    position: relative;
    width: 10px;
    height: 10px;
}

.cb-filter__icon::before,
.cb-filter__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.2px;
    background-color: #000;
    transition: transform 0.35s, opacity 0.35s;
}

.cb-filter__icon::before {
    transform: translateY(-50%);
}

.cb-filter__icon::after {
    transform: translateY(-50%) rotate(90deg);
}

.cb-filter__toggle.is-open .cb-filter__icon::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.cb-filter__panel {
    padding-top: 24px;
}

.cb-filter__field label {
    display: block;
    margin-bottom: 8px;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #222222;
}

.cb-filter__field select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #d8d8d2;
    border-radius: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23242424' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
    -webkit-appearance: none;
    appearance: none;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #242424;
    cursor: pointer;
}

.cb-filter__field select:focus-visible {
    outline: 2px solid #242424;
    outline-offset: 1px;
}

.cb-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.cb-filter__apply,
.cb-filter__clear {
    display: inline-block;
    padding: 9px 17px; /* Figma 10px 18px with the 1px border inside */
    border: 1px solid #343a40;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
}

.cb-filter__apply {
    background-color: #343a40;
    color: #fff;
}

.cb-filter__clear,
.cb-filter__clear:hover {
    background-color: transparent;
    color: #343a40;
    text-decoration: none;
}

.cb-filter__clear::after {
    content: none !important;
}

.cb-catalogue__empty {
    margin: 0;
}

.cb-catalogue__empty a {
    color: #e63247;
}

/* Submenu selected state (Figma: Sub Menu Item, Selected=On): 1px #222 line under the item */
.cb-submenu__list .current-menu-item > a::after {
    opacity: 1;
    transform: none;
    background-color: #222222 !important;
}

@media screen and (max-width: 991px) {
    .cb-filter__field + .cb-filter__field {
        margin-top: 0;
    }

    .cb-filter__field {
        margin-bottom: 24px;
    }

    .cb-filter__actions {
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .cb-filter {
        padding: 24px 30px;
    }
}


/* Header burger / overlay close: no Bootstrap focus ring after a mouse click;
   keyboard users keep a subtle ring in the button's own colour */
.cb-header__icon-btn:focus:not(:focus-visible) {
    outline: none;
}

.cb-header__icon-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cb-overlay,
    .cb-overlay.is-open {
        transition: none;
    }
}