/*--------------------------------- Start-Banner ---------------------------------*/
body {
    background-color: #e4aa362b;
}
.h4-banner-area{
    min-height: auto;
}
.site_logo img {
    width: 170px;
    max-width: 170px;
}
.tj-primary-btn .btn-text {
    color: #000;
}
.banner-desc-area a:nth-child(even) span {
    color: #fff;
}
.h4-banner-section,section.tj-banner-section-2 {
    background-color: #000;
    /* background-color: #A16A28; */
}
.h4-banner-content .sub-title i {
    color: #efb33d;
    font-size: 22px;
}
.h4-banner-content .banner-title {
    color: #efb33d;
}
.sec-heading.style-4 .sub-title,.hamburger_menu .mean-nav > ul > li:first-child > a,.hamburger_menu .mean-nav ul li.dropdown-opened > a,.hamburger_menu .mean-nav ul li a:hover,.hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked,.contact-info .contact-item .subtitle{
    color: #000;
}
.h5-working-process .sec-heading.style-3 .sub-title,.tj-service-section .sec-heading.style-2 .sub-title,.sec-heading .sub-title i{
    color: #efb33d;
}
.hamburger_menu .mean-nav > ul > li:first-child > a{
    color: #000;
}
.sec-heading.style-4 .sub-title{
    border-color: transparent;
}
.tj-primary-btn .btn-icon{
    background-color: #000;
}
.tj-service-section{
    background-image: linear-gradient(180deg, #000000, #000000b0, #f2d29380);
    background-color: #000;
}
section.h5-working-process.section-gap.section-gap-x{
    background-color: #ffffff40;
}
section.h5-working-process.section-gap.section-gap-x h2#model-h,section.h5-working-process.section-gap.section-gap-x .sec-heading p{
    color: #000 !important;
}

.h4-banner-content .banner-desc-area {
    max-width: 100%;
    justify-content: normal;
}
.banner-desc-area a:nth-child(even) {
    border: 2px solid #efb33d;
    background: none;
}
.banner-desc-area a:nth-child(even) > .btn-icon {
    background-color: #523205;
    border: 2px solid #efb33d;
}
.hamburger_wrapper::before{
    background: #f7d564;
}
.tj-copyright-area-4 .copyright-content-area {
    padding: 16px 0;
}
.footer-main-area {
    position: relative;
    padding: 100px 0 30px 0;
}
/* Small phones AND large phones: let the buttons wrap onto their own row so
   the description text never squeezes into a sliver beside them */
@media only screen and (max-width: 767px) {
    .h4-banner-content .banner-desc-area {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 20px;
    }
    .hamburger_logo img{
        width: 160px;
        max-width: 160px;
    }
    .sec-heading.style-3 span.btn-icon,section.tj-cta-section.h7-cta.section-gap-x .tj-primary-btn-lg .btn-icon{
        height: 40px !important;
        width: 55px !important;
    }
    section.h5-strategy.section-gap h2.sec-title.text-anim{
        font-size: 24px;
        line-height: 1.5;
    }
    .cta-area .cta-content .title {
        font-size: 30px;
    }
    .tj-primary-btn-lg .btn-icon {
        font-size: 27px;
        width: 45px;
        height: 45px;
    }
}
.h4-banner-content {
    padding-top: 70px;
}
/* Leaf decorations behind the rating number are switched off (design choice) */
.h4-banner-section .banner-img-area .h4-rating-box .title::before,.h4-banner-section .banner-img-area .h4-rating-box .title::after{
    background: none;
}
/* Rating box placement per breakpoint:
   >=1200px  = floating card at bottom-right (original desktop design)
   <=1199px  = flows in normal document order below the hero content,
               so it never overlaps the heading / buttons on smaller screens */
@media only screen and (min-width: 1200px) {
    .h4-banner-section .banner-img-area {
        position: absolute;
        top: auto;
        bottom: 100px;
        right: 50px;
    }
    .h4-banner-section .banner-img-area .h4-rating-box{
        position: relative;
        max-width: 325px;
        padding: 20px;
    }
    .h4-banner-section .banner-img-area .h4-rating-box .title{
        font-size: 58px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .h4-banner-section .banner-img-area .h4-rating-box{
        position: relative;
        top: auto;
        inset-inline-start: auto;
        max-width: 300px;
        width: 100%;
        padding: 20px;
        margin-bottom: 60px;
    }
    .h4-banner-section .banner-img-area .h4-rating-box .title{
        font-size: 62px;
    }
}
@media only screen and (max-width: 767px) {
    .h4-banner-section .banner-img-area .h4-rating-box{
        position: relative;
        top: auto;
        inset-inline-start: auto;
        max-width: 300px;
        width: 100%;
        padding: 20px;
        margin-bottom: 60px;
    }
    .h4-banner-section .banner-img-area .h4-rating-box .title{
        font-size: 50px;
    }
}
.tj-service-section h2.sec-title {
    margin-bottom: 20px;
}
/* Keep the desktop heading size; below 768px the generic h2 scale
   (36px / 30px) from the template applies instead */
@media only screen and (min-width: 768px) {
    .tj-service-section h2.sec-title {
        font-size: 38px;
    }
}
.cta-content p {
    color: #fff;
}
.h4-banner-content::before {
    background: #efb33d;
}
.choose-box:hover {
    background-color: #000;
}
.tj-service-section .sec-heading.style-2 .sub-title{
    background-color: transparent;
}
.sec-heading.style-2 p,.h4-banner-content .banner-desc,.h5-working-process p,.h5-working-process .desc,.service-item.style-2 .desc,section.tj-banner-section-2,.h10-hero .banner-content-2 .banner-title,.h10-hero .banner-content-2 .banner-desc-area .banner-desc {
    color: #fff;
}
.service-item.style-2 {
    border: 1px dashed #efb33d70;
}
/* Desktop padding (original design). Tablet/mobile use the template's own
   responsive padding (40px 25px at 768-1199, 30px 15px below 768) */
@media only screen and (min-width: 1200px) {
    .service-item.style-2 {
        padding: 40px 40px;
    }
}
.service-item.style-2 .title {
    margin-top: 10px;
}
.service-item.style-2 div img {
    border-radius: 15px;
}
.service-item.style-2:hover {
    background-color: #efb33d;
    border-color: #efb33d;
}
.sec-heading.style-3 .sub-title {
    color: #0c1e21;
}
.h5-working-process-inner::after{
    border-bottom: 1px dashed #efb33d;
}
.h5-working-process-item .h5-working-process-indicator{
    padding: 9px 20px 11px;
    border: 1px dashed #313d3d00;
    background-color: #523205;
}
.h5-working-process-item .h5-working-process-indicator::before, .h5-working-process-item .h5-working-process-indicator::after{
    border-inline-end: 1px dashed #efb33d;
}
.h5-working-process-item .process-step {
    background-image: linear-gradient(180deg, #523205 0%, rgba(30, 138, 138, 0) 116.09%);
}
.tj-faq.style-2 .accordion-item.active,.h7-faq .sec-heading.style-7 .number .call-icon,.hamburger_bg {
    background-color: #efb33d;
}
.tj-faq.style-2 .accordion-item.active .faq-title{
    color: #000;
}
.tj-faq .accordion-item .faq-title::after{
    color: #A16A28;
    border: 1px solid #A16A28;
}
.h7-cta{
    background: url(../images/cta/cta1.png) no-repeat center;
    background-size: cover;
}
.tj-copyright-area-4 {
    background-color: #efb33d;
}
.tj-copyright-area-4 .copyright-text a,.tj-copyright-area-4 .copyright-menu ul li a {
    color: #000;
}
.tj-footer-section {
    background-color: #e4aa362b;
}
.mainmenu ul > li.current-menu-ancestor > a, .mainmenu ul > li.current-menu-item > a, .mainmenu ul > li:hover > a,.mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a, .mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a,.widget-nav-menu ul li a:hover,.widget-contact.style-2 .footer-contact-info .contact-item a:hover,.social-links.style-2 ul li a i {
    color: #583404;
}
.widget-nav-menu ul li a .badge,.menu_bar.mobile_menu_bar{
    background-color: #583404;
}
.choose-icon.icon i {
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.5px #efb33d;
}
.choose-icon i {
    color: #EFB33D;
}
.h5-working-process-item {
    background-color: rgb(239 179 61);
}
.h5-working-process .title, .h5-working-process .desc {
    color: #000;
}
.h5-working-process p{
    color: #fff;
}
/*---------------------------------- End-Banner ----------------------------------*/
/*--------------------------------- Button-color ---------------------------------*/
.tj-primary-btn {
    background-color: #EFB33D;
}
/*------------------------------- End-Button-color -------------------------------*/
/*--------------------------------- Start-contact --------------------------------*/
.h6-hero-history-title:after {
    background-color: #efb33d;
}
.h6-hero-history-title::before{
    background-color: #efb33d;
}
.h10-hero .banner-content-2 .banner-desc-area .banner-desc {
    max-width: 500px;
}
.h10-hero .banner-content-2 .banner-desc-area .banner-desc{
    font-size: 16px;
}
/*--------------------------------- End-contact ----------------------------------*/

/*------------------------- Start-Our Process (Pinned Scroll) -------------------------*/
/* Only affects the "How We Work" (h5-working-process) section on index.php */

@media only screen and (min-width: 768px) {
    /* Horizontal viewport mask: cards outside the visible row are clipped.
       The padding-top/negative margin trick keeps the "Step 0X" pills
       (which sit above the cards, on the dashed line) from being clipped. */
    .h5-working-process-inner > .container {
        overflow: hidden;
        padding-top: 60px;
        margin-top: -60px;
    }

    /* Zigzag layout: odd cards UP (60px), even cards DOWN (192px), alternating.
       Max offset is only 192px, so cards stay fully visible while pinned. */
    .h5-working-process .h5-working-process-item:nth-child(even) {
        margin-top: 192px;
    }
    .h5-working-process .h5-working-process-item:nth-child(odd) {
        margin-top: 60px;
    }

    /* Pills stay on the shared dashed line; connector length = card offset */
    .h5-working-process .h5-working-process-item:nth-child(even) .h5-working-process-indicator {
        top: -192px;
    }
    .h5-working-process .h5-working-process-item:nth-child(odd) .h5-working-process-indicator {
        top: -60px;
    }
    .h5-working-process .h5-working-process-item:nth-child(even) .h5-working-process-indicator::before,
    .h5-working-process .h5-working-process-item:nth-child(even) .h5-working-process-indicator::after {
        bottom: -192px;
    }
    .h5-working-process .h5-working-process-item:nth-child(even) .h5-working-process-indicator::before {
        height: 192px;
    }
    .h5-working-process .h5-working-process-item:nth-child(odd) .h5-working-process-indicator::before,
    .h5-working-process .h5-working-process-item:nth-child(odd) .h5-working-process-indicator::after {
        bottom: -60px;
    }
    .h5-working-process .h5-working-process-item:nth-child(odd) .h5-working-process-indicator::before {
        height: 60px;
    }

    /* Hover connector line matches each card's offset */
    .h5-working-process .h5-working-process-item:hover:nth-child(even) .h5-working-process-indicator::after {
        height: 192px;
    }
    .h5-working-process .h5-working-process-item:hover:nth-child(odd) .h5-working-process-indicator::after {
        height: 60px;
    }
}

/* Fixed card widths so cards overflow the row instead of shrinking:
   desktop = 3 visible (gap 30px), tablet = 2 visible (gap 20px) */
@media only screen and (min-width: 1200px) {
    .h5-working-process .h5-working-process-wrapper .process-item {
        flex: 0 0 calc((100% - 60px) / 3);
        width: auto;
        max-width: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .h5-working-process .h5-working-process-wrapper .process-item {
        flex: 0 0 calc((100% - 20px) / 2);
        width: auto;
        max-width: none;
    }
}
/*--------------------------- End-Our Process (Pinned Scroll) ---------------------------*/

/*--------------------------------- Scrollbar ---------------------------------*/
/* Page scrollbar thumb = brand brown (main.css used --tj-color-theme-primary,
   but that variable styles buttons/links too, so only the scrollbar is overridden) */
* {
    scrollbar-color: #523205 var(--tj-color-common-white);
}
::-webkit-scrollbar-thumb {
    background: #523205;
}

/*--------------------------------- Back to top ---------------------------------*/
/* Scoped override: the progress ring/button uses var(--tj-color-theme-primary)
   (both the .active CSS state and the JS inline conic-gradient resolve it on
   this element), so re-declaring it here recolors only #tj-back-to-top. */
#tj-back-to-top {
    --tj-color-theme-primary: #efb33d;
}

/*------------------- Data Security & Compliance (mobile button) -------------------*/
/* The primary button is nowrap (~360px incl. icon), which overflowed the
   column/card on phones. On mobile let its label wrap inside the column;
   the text-shadow slide-up hover effect is desktop-only anyway. */
@media only screen and (max-width: 767px) {
    .h5-strategy-heading .tj-primary-btn {
        white-space: normal;
        max-width: 100%;
    }
    .h5-strategy-heading .tj-primary-btn .btn-text span {
        text-shadow: none;
        line-height: 1.4;
    }
    .h5-strategy-heading .tj-primary-btn:hover .btn-text span {
        transform: none;
    }
}

/*-------- "Prefer to Reach Out Directly?" (contact.php) icon color --------*/
/* Icons match the gold (#efb33d) of index.php's related .choose-icon icons
   instead of the template's default teal. Hover state restated unchanged
   (the template's :hover rule has equal specificity, so it needs a scope). */
.contact-item.style-2 .contact-icon,.contact-item.style-2:hover .contact-icon{
    background:none;
}
.tj-contact-area .contact-item.style-2 .contact-icon i {
    color: #efb33d;
    font-size: 70px;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.5px #efb33d;
}
.footer-contact-info .contact-item span i,.footer-contact-info .contact-item i{
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.2px #000;
    color: #000;
    font-size: 20px;
}
.social-links.style-2 ul li a{
    opacity: 1;
}
.contact-item.style-2 p {
    max-width: 100%;
    text-align: start;
}
.contact-item.style-2 .contact-list {
    padding: 10px 0;
}
.contact-item.style-2 .contact-list li a,.contact-form p a{
    color: #523205;
}
.contact-item.style-2 .contact-list li a:hover,.contact-form p a:hover {
    color: #523205;
    text-decoration: 1px solid underline;
}
.tj-contact-area .contact-item.style-2:hover .contact-icon i {
    color: #ffffff;
}

/*-------- "Prefer to Reach Out Directly?" (contact.php) equal card height --------*/
/* Same mechanism as the "What Happens on a Discovery Call?" cards:
   .choose-box uses height:100% to fill the stretched Bootstrap column. */
.tj-contact-area .contact-item.style-2 {
    height: 100%;
}

/*-------- "We Serve" card height (contact.php form section) --------*/
/* Both cards fill their stretched Bootstrap columns, so the "We Serve"
   card matches the form card height (same mechanism as .choose-box). */
.tj-contact-section-2 .contact-form {
    height: 100%;
}

/*-------- Contact form select overlap (mobile) --------*/
/* The nice-select label (~335px nowrap) and its options (~399px) are wider
   than the card on phones (~305px at 375px), so the label spilled over the
   card edge and the open .list (overflow:hidden) clipped long options.
   white-space:normal lets both wrap; when the box is wide enough (>=~405px
   viewport) the text still fits on one line, so nothing changes there. */
@media only screen and (max-width: 767px) {
    .tj-contact-section-2 .nice-select {
        white-space: normal;
    }
}

/*-------- "Ready to Scale Your Finance Function?" CTA button (mobile) --------*/
/* The lg primary button is nowrap (~392px incl. the arrow icon) but the card
   column is only ~293px on a 375px phone, and .h7-cta has overflow:hidden, so
   ~75px of the button (icon + right edge) was chopped off. Below ~474px the
   button no longer fits, so there let its label wrap inside the column (same
   approach as the Data Security button); at >=480px it fits unchanged. */
@media only screen and (max-width: 479px) {
    .h7-cta-inner .tj-primary-btn {
        white-space: normal;
        max-width: 100%;
    }
    .h7-cta-inner .tj-primary-btn .btn-text span {
        text-shadow: none;
        line-height: 1.4;
    }
    .h7-cta-inner .tj-primary-btn:hover .btn-text span {
        transform: none;
    }
}