/*!
Theme Name: Role Stack [A Search Stack Theme]
Theme URI: https://searchstack.co.uk/
Author: Search Stack
Author URI: https://searchstack.co.uk/
Description: The main theme for Search Stack websites
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rolestack-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

rolestack-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/`
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize
    - Box sizing
# Base
    - Typography
    - Elements
    - Links
    - Forms
## Layouts
# Components
    - Navigation
    - Posts and pages
    - Comments
    - Widgets
    - Media
    - Captions
    - Galleries
# plugins
    - Jetpack infinite scroll
# Utilities
    - Accessibility
    - Alignments

--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/


/* Normalize
--------------------------------------------- */


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* Document
     ========================================================================== */


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

     html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }

/* Sections
     ========================================================================== */


/**
 * Remove the margin in all browsers.
 */

     body {
        margin: 0;
    }


/**
 * Render the `main` element consistently in IE.
 */

    main {
        display: block;
    }


/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }


/* Grouping content
     ========================================================================== */


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

     hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    pre {
        font-family: monospace, monospace;
        font-size: 1em;
    }


/* Text-level semantics
     ========================================================================== */


/**
 * Remove the gray background on active links in IE 10.
 */

     a {
        background-color: transparent;
    }


/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

    b,
    strong {
        font-weight: bolder;
    }


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }


/**
 * Add the correct font size in all browsers.
 */

    small {
        font-size: 80%;
    }


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }


/* Embedded content
     ========================================================================== */


/**
 * Remove the border on images inside links in IE 10.
 */

     img {
        border-style: none;
    }


/* Forms
     ========================================================================== */


/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

     button,
     input,
     optgroup,
     select,
     textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

    button,
    input {
        overflow: visible;
    }


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

    button,
    select {
        text-transform: none;
    }


/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
    }


/**
 * Remove the inner border and padding in Firefox.
 */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }


/**
 * Restore the focus styles unset by the previous rule.
 */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }


/**
 * Correct the padding in Firefox.
 */

    fieldset {
        padding: 0.35em 0.75em 0.625em;
    }


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *      `fieldset` elements in all browsers.
 */

    legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
    }


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

    progress {
        vertical-align: baseline;
    }


/**
 * Remove the default vertical scrollbar in IE 10+.
 */

    textarea {
        overflow: auto;
    }


/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

    [type="checkbox"],
    [type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

    [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }


/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }


/* Interactive
     ========================================================================== */


/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

     details {
        display: block;
    }


/*
 * Add the correct display in all browsers.
 */

    summary {
        display: list-item;
    }


/* Misc
     ========================================================================== */


/**
 * Add the correct display in IE 10+.
 */

     template {
        display: none;
    }


/**
 * Add the correct display in IE 10.
 */

    [hidden] {
        display: none;
    }


/* Box sizing
--------------------------------------------- */


/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/


/* Typography
--------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}


/* Elements
--------------------------------------------- */

body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}


/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}


/* Links
--------------------------------------------- */

a {
    color: #822433;
}


a:hover,
a:focus,
a:active {
    color: #6b1d2a;
}

a:focus {
    outline: none;
}

a:hover,
a:active {
    outline: 0;
}


/* Forms
--------------------------------------------- */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/


/* Navigation
--------------------------------------------- */
header#masthead {
    position: fixed;
    width: 100%;
    display: flex;
    background: #1e1e1e;
    align-items: center;
    padding: 5px 5%;
    z-index: 99999;
    transition: all .4s ease;
    top: 0;
}
#primary-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#primary-menu li a {
    font-weight: 500;
    font-family: 'Gotham';
    color: #fff;
    text-decoration: none;
    padding: 0 13px;
    width: 100%;
    display: block;
    font-size: 14px;
}
#primary-menu .current-menu-item a {
    color: #822433;
}
#primary-menu li:last-child a {
    padding-right: 0;
}
#myNav::after {
    content: " ";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: absolute;
    right: -1.1%;
    top: -1px;
    z-index: -1 !important;
    width: 395px;
    height: 100%;
    right: -3%;
    top: 0px;
    z-index: 1;
    opacity: 0.05;
}
.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    left: auto;
    top: 0;
    background-color: #1A1A1A;
    overflow-x: hidden;
    transition: 0.5s;
    right: 0;
}
.overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 10rem;
    text-align: left;
}
.overlay-content #primary-menu {
    display: block;
}
.overlay-content #primary-menu li {
    padding: 8px 0;
}











.menu li.menu-item-has-children>a::after {
    color: #822433;
    content: '►';
    font-size: 10px;
    vertical-align: 1px;
    position: relative;
    left: 10px;
}

.menu li.menu-item-has-children:hover>a::after {
    content: '▼';
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu {
    display: none;
    padding-top: 5px;
    list-style: none;
    margin: 0;
    position: absolute;
    width: 230px;
    background: #333;
    padding-bottom: 10px;
    border-radius: 10px;
    padding-left: 0;
    padding-right: 0;
}
.menu li.menu-item-has-children:hover > a::after {
    content: '▼';
    font-size: 16px !important;
}
.sub-menu li a {
    font-size: 13px !important;
    padding: 0 !important;
}

.sub-menu li {
    padding: 0 1rem;
}
.site-branding {
    width: 15%;
}
.desktop_navigation {
    width: 70%;
}
.header-right-nav {
    width: 15%;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.language-switcher .wpml-ls {
    margin-bottom: 0 !important;
    padding: 0;
}
.language-switcher {
    border-left: 1px solid #CECECE;
    border-right: 1px solid #CECECE;
}
.header-right-nav div {
    line-height: 0;
}

.banner_right_block,.banner_left_block {    
    width: 48%;
}
.inner_main_banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: auto;
}
.banner_left_text h1 {
    font-size: 75px;
    line-height: 78px;
    width: 100%;
    max-width: 800px;
}

img.tn-hp-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tn-home-gradient {
    background: #242424;
    background: linear-gradient(113deg, #1e202ff7 44%, rgba(16, 16, 16, 0) 84%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.banner_left_text p {
    width: 65%;
    line-height: 32px;
    color: #dfdfdf;
}

.banner_left_text {
    font-family: gothambook;
    color: #fff;
    position: relative;
    z-index: 4;
    width: 800px;
}

.discover_banner_btn button {
    background: transparent;
    border: none;
    color: #F8F8F8;
    align-items: center;
    display: flex;
    font-family: gothambook;
    padding: 0;
}
.discover_banner_btn a{
    text-decoration: none;
}
.discover_banner_btn button img{
   margin-left: 10px;
}
.banner_right_block {
    text-align: right;
    display: none;
}
.our_services {
    background: #242424;
    padding: 5rem 0%;
}
.left-services-block {
    width: 45%;
    font-size: 45px;
    color: #fff;
    font-family: gothambook;
}
.inner_our_services {
    display: flex;
    justify-content: space-between;
}
.right_services-block {
    width: 45%;
}
.right_services-block h2 {
    font-family: gothambook;
    color: #fff;
    font-size: 45px;
    line-height: 53px;
}
.right_services-block p {
    font-family: gothambook;
    color: #C9C9C9;
    font-size: 14px;
    line-height: 28px;
}
.services_repater {
    padding-top: 5rem;
}
.inner_serices_repater {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #cbcbcb;
    padding: 3rem 0;
    font-family: gothambook;
    align-items: center;
}
.years {
    color: #822433;
    font-size: 45px;
    line-height: 45px;
    width: 20%;
    font-family: Gotham;
    font-weight: 500;
}
.repater_title {
    font-size: 25px;
    font-family: gothambook;
    color: #fff;
    line-height: 30px;
    width: 40%;
}
.desc_repeater {
	font-size: 16px;
	font-family: gothambook;
	color: #C9C9C9;
	line-height: 27px;
	width: 40%;
	font-weight: 400;
}
.inner_serices_repater:last-child {
    border-bottom: 1px solid #cbcbcb;
}
.our_mission {
    padding: 5rem 10%;
    background: #f5f5f5;
}
.inner_our_misison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: auto;
}
.left-mission-block {
    background-position: center;
    width: 40%;
    height: 730px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    left: 0;
    margin-bottom: -420px;
    background-size: cover;
    top: -550px;
}
.right-mission-block.fade-up.is-visible {
    position: relative;
    margin-bottom: 95px;
}
.right-mission-block {
    width: 55%;
}
.right-mission-block h2 {
    font-family: gothambook;
    color: #222222;
    font-size: 26px;
    line-height: 38px;
}
.right-mission-block p {
    font-family: gothambook;
    font-size: 14px;
    color: #404040;
}
.lity {
    z-index: 999999;
}
.our_mission button {
    color: #242424;
    font-family: Gotham;
}
.success_stories_top {
    padding: 5rem 0% 0;
    background: #242424;
    color: #fff;
}
.left-success_stories {
    width: 45%;
    font-size: 20px;
    color: #fff;
    font-family: gothambook;
}
.left-success_stories h4 {
    padding-bottom: 2rem;
    display: none;
}

.success_Stories_bottom {
    display: flex;
    align-items: center;
    padding: 5rem 0 5rem 0%;
    justify-content: space-between;
        max-width: 1400px;
        margin: auto;
}

.right_succesS_stories,.left_tetsimonia_block {
    width: 45%;
}
.right_succesS_stories h3 {
	font-family: gothambook;
	color: #fff;
	font-size: 40px;
	line-height: 45px;
	margin: 0;
	text-transform: capitalize;
}
.right_succesS_stories p {
    font-family: gothambook;
    padding-bottom: 1rem;
}
.right_case_study {
    display: flex;
    width: 51%;
    justify-content: space-between;
}
.casestudy_data {
    position: relative;
    width: 48%;
}
.read_post_case {
    display: flex;
    align-content: center;
    align-items: center;
    text-transform: uppercase;
}
.read_post_case img{
    padding-left: 15px;
}
.case_study_title {
    font-size: 25px;
    line-height: 23px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: gothambook;
}
.service_desc {
    font-family: gothambook;
}
.case_study_image img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}
.blog-o-link {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.tetsimonial_quote {
    font-family: gothambook;
    padding-bottom: 10px;
    font-style: italic;
}
.repater_name {
    color: #822433;
    font-family: Gotham;
}
.position_repeater {
    padding: 10px 0;
    font-family: gothambook;
}
.success_Stories_bottom .slick-prev.slick-arrow::before {
    content: url(/wp-content/uploads/2023/12/Group-96.svg);
}
.success_Stories_bottom .slick-next.slick-arrow::before {
    content: url(/wp-content/uploads/2023/12/Group-95.svg);
}
.success_Stories_bottom .slick-prev.slick-arrow,
.success_Stories_bottom .slick-next.slick-arrow {
    background-color: transparent;
    cursor: pointer;
    border: none;
    padding: 0;
    font-size: 0;
}
.success_Stories_bottom .slick-prev.slick-arrow {
    position: absolute;
    bottom: 0;
    z-index: 9;
}
.success_Stories_bottom .slick-next.slick-arrow {
    position: absolute;
    left: 6%;
    bottom: 0;
}
.testimonials_repeater.slick-current.slick-active {
    padding-bottom: 2rem;
}
button{
    cursor: pointer;
}
.gracity_form .gform_required_legend {  
    display: none;
}
.gracity_form  #gfield_upload_rules_1_4 {
    display: none;
}
.gracity_form input {
    background: transparent;
    border: 1px solid #242424;
    border-radius: 0;
    color: #fff !important;
}
#colophon {
    background: #1e1e1e;
    padding: 5rem 10% 2rem;
    font-family: gothambook;
}
.left_book_call {
	font-family: gothambook;
	color: #fff;
	font-size: 35px;
	line-height: 35px;
}
.left_book_call  a{
	color: #fff;
	text-decoration: none;
}
.left_book_call img {
	width: 30px;
	margin-left: 1rem;
}
.book_call {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4rem;
    border-bottom: 1px solid #CCCCCC;
}
.bottom-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 0rem;
}
.footer-social-media {
    padding: 2rem 0;
}
.footer-social-media img{
    margin-right: 2rem;
}
.navigation_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
}
.column-footer a {
    color: #D8D8D8;
    text-decoration: none;
}
.email_footer img, .mobile_footer img{
    padding-right: 10px;
}
.column-footer {
    width: 33%;
}
.navigation_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
    padding-bottom: 1rem;
}
.address_footer {
    color: #D8D8D8;
}
.email_footer {
    padding-bottom: 1rem;
}
.inner_link {
    padding: 5px 0;
}
.column-footer .gform_title {
    display: none;
}
.column-footer #gform_submit_button_1 {
    margin: 0;
    cursor: pointer;
    border: none;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
}
.column-footer #input_1_4 {
    border: none;
    color: #fff;
}
.column-footer .gfield_label.gform-field-label {
    color: #fff;
    font-family: gothambook;
    font-size: 13px !important;
}
.upload_cv_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
}
.about_banner {
    padding: 15rem 10% 10rem;
    background: #1e1e1e;
}
.page_title_about {
    color: #fff;
    font-size: 60px;
    font-family: gothambook;
}
.about_banner_desc {
    color: #fff;
    padding-bottom: 1rem;
}
.about_banner .discover_banner_btn button{
    text-align: center;
    margin: auto;
    display: block;
    display: flex;
}
.our_mission_about {
    padding: 5rem 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.right_mission_about,.left_mission_about {
  width: 45%;
}
.left_mission_about h2 {
    font-size: 45px;
    font-family: gothambook;
    line-height: 45px;
    color: #242424;
}
.left_mission_about p {
    color: #242424;
    font-family: gothambook;
}
.our_mission_about button {
    color: #242424;
}
#about_values .right_services-block {
    text-align: right;
    font-size: 45px;
    line-height: 45px;
    color: #fff;
    font-family: gothambook;
}
#about_values .years img {
    width: 82px;
    object-fit: cover;
}
.generation-talent {
    padding: 5rem 10%;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.right-generation-block,.left-generation-block {   
 width: 45%;
 position: relative;
 z-index: 9;
}
.our_talent_img {
    position: absolute;
    left: 0;
    bottom: 0;
}
.talent_repeater {
    display: flex;
}
.left-generation-block h2 {
    font-size: 45px;
    font-family: gothambook;
    line-height: 45px;
    color: #242424;
}
.left-generation-block p {
	font-family: gothambook;
	font-weight: 400;
}
.talent_repeater {
    display: flex;
    border: 1px solid #D9D9D9;
    padding: 1rem;
    margin-bottom: 1rem;
    font-family: gothambook;
    align-items: center;
}
.generation_img {
    width: 25%;
}
.titele_desc {
    font-family: gothambook;
    width: 100%;
}
.left-generation-block button,.left_marketing_tal button {
    color: #242424;
}
.generation_title {
    color: #454545;
    font-size: 25px;
    font-family: gothambook;
    font-weight: bold;
}
.left_team_title {
    font-size: 45px;
    color: #fff;
    font-family: gothambook;
    padding-bottom: 2rem;
}
.right_allteam {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.out_team {
    padding: 5rem 10% 2rem;
    background: #242424;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.member_position {
    color: #822433;
    font-family: gothambook;
    font-size: 16px;
}
.team_data {
    width: 31%;
    margin-bottom: 3rem;
}
.member_image img {
	width: 100%;
	height: 365px;
	object-fit: cover;
	object-position: top;
}
.right-generation-block img {
    width: 82px;
}
.team_title {
    font-size: 20px;
    color: #fff;
    font-family: gothambook;
}
.marketing_talent {
    padding: 5rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right_talemt_block, .left_marketing_tal {
    width: 45%;
}
.left_marketing_tal h2 {
    color: #242424;
    font-family: gothambook;
    font-size: 45px;
    line-height: 50px;
    text-transform: capitalize;
}
.left_marketing_tal p{
    font-family: gothambook;
}
.top_testimonial_img img {
    width: 100%;
    height: 142px;
    object-fit: cover;
}
.top_testimonial_img {
    padding-bottom: 3rem;
}
.testimonial_quote_text, .testimonial_quote,.tets-authorname,.tets-author {
    padding-left: 1rem;
}
.testimonial_quote_text p {
    color: #000;
    font-size: 22px;
    line-height: 32px;
    font-family: gothambook;
}
.tets-author {
    font-family: Gotham;
    font-size: 18px;
    color: #000;
}
.tets-authorname {
    color: #a1a1a1;
    font-family: gothambook;
}
.md-header h2 {
	font-family: gothambook;
	color: #fff;
	font-size: 45px;
	line-height: 50px;
}
.tablinks.active {
  color: #822433;
}
.left_btn button {
  background: transparent;
  color: #a1a1a1;
  border: none;
  font-size: 22px;
  padding: 0;
}
.left_btn {
    border-bottom: 1px solid #E9E9E9;
}
#code-box-2 {
    display: flex;
    justify-content: space-between;
}
.tab_content_right,.tab {
 width: 45%;
}
.makes-different-row {
    padding: 5rem 10%;
    position: relative;
    background: #1e1e1e;
}
.tab-content {
    color: #fff;
    font-family: gothambook;
}
.tab-content p > img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    margin-bottom: 0rem;
    position: relative;
    z-index: 9;
}
.content-tab-row.row {
    padding-top: 3rem;
}
.hexagon-img {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
}
.left_case_title {
	color: #01010E;
	font-size: 45px;
	font-family: Gotham;
	line-height: 45px;
	width: 48%;
	text-transform: capitalize;
}
.Case_Studies {
    padding: 5rem 10%;
}
.case_title_desc {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
}
.big_left_case_study {
    width: 48%;
}
.big_left_case_study .casestudy_data {
    width: 100%;
}
.big_left_case_study .case_study_image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.big_left_case_study .service_desc {
    color: #A1A1A1;
}
.right_case_studies {
    width: 50%;
    display: flex;
    justify-content: space-between;
}
.all_case_studies {
    display: flex;
    justify-content: space-between;
}
.right_case_studies .service_desc {
    color: #A1A1A1;
}
.Case_Studies .case_study_title {
    font-family: gothambook !important;
}
.Download_Our_Ebook {
    padding: 5rem 10% 15rem;
    background: #242424;
    color: #fff;
    font-family: gothambook;
    display: flex;
    align-items: end;
    position: relative;
}
.download_left_ebook h2 {
    color: #822433;
    font-size: 35px;
    margin: 0;
}
.download_left_ebook {
    width: 55%;
    background: #1e1e1e;
    padding: 3rem;
    position: relative;
    z-index: 9;
}
.right_download_ebbok {
    width: 40%;
    position: absolute;
    right: 15%;
    z-index: 0;
    top: 35%;
}
.case_studies_banner {
    padding: 10rem 10% 6rem;
    background: #1e1e1e;
    text-align: center;
    color: #fff;
}
.page_title_case {
    font-size: 60px;
    font-family: gothambook;
}
.all_case_page .service_desc {
    color: #A1A1A1;
}
.all_case_page {
    padding: 5rem 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.all_case_page .casestudy_data {
    margin-bottom: 4rem;
}
.all_case_page .case_study_image img {
    height: 400px;
    object-fit: cover;
}
.main_content_case {
    padding: 5rem 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pcr-main {
    width: 60%;
    font-family: gothambook;
    line-height: 30px;
}
.pcr-sidebar {
    width: 30%;
}
.latest-single-row .casestudy_data {
    position: relative;
    width: 100%;
}
.latest-single-row .case_study_image img {
    height: 250px;
    object-fit: cover;
}
.latest-single-row > h2 {
    color: #822433;
    font-family: Gotham;
    text-transform: uppercase;
}
#primary-menu li a:hover {
    color: #822433;
}
.jobs_page_row .job_listings {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.job_listings {
  border: none !important;
}
.jobs_page_row.job-page-search {
    padding: 5rem 10% 6rem;
}
.jobs_page_row .job_filters {
    width: 100%;
}
.jobs_page_row .job-widget-card {
    padding: 2rem;
    border: 1px solid #E8E8E8;
    width: 32%;
    background: #fff;
    border-radius: 0px;
    padding: 2rem;
    margin-top: 1.5rem;
    font-family: 'Gotham';
    font-weight: 400;
}
.job-search .job-type {
    display: none;
}
.job-card-title {
    font-size: 20px;
    color: #242424;
    font-weight: bold;
    font-family: 'Gotham';
}
.job-search .border-only-job, .job-search .job-card-salary {
    display: none !important;
}
.salary-location {
    display: flex;
    align-items: center;
    height: 52px;
}
.job-card-salary, .job-card-location {
    display: flex;
}
.job-search .job-card-location img {
  margin-right: 8px;
}
.salary-location img {
  width: 15px;
  height: 21px;
}
.job-card-location a, .job-card-salary {
    color: #242424;
    font-family: 'gothamlight';
    font-size: 16px;
    text-decoration: none;
}
.job-excerpt {
    line-height: 30px;
    color: #242424;
    font-size: 16px;
    font-family: 'gothamlight';
}
.job-card-type a {
    text-decoration: none;
}
.job-card-type .view_casestudy {
    color: #822433;
    font-family: 'Gotham';
}
.job-excerpt p {
    margin: 0;
}
.job-card-type .view_casestudy {
    color: #822433;
    font-family: 'Gotham';
    display: flex;
    align-items: center;
    padding-top: 1rem;
}
.job-card-type .view_casestudy img{
    padding-left: 1rem;
}
.job_types,.search_salary { 
    display: none;
}
.search_jobs {
    display: flex;
}
.search_jobs label{
    display:none;
}
.search_jobs div {
    width: 100%;
}
.search_jobs input {
    width: 100%;
}
.search_jobs input {
    font-family: gothambook;
    width: 95%;
    height: 45px;
    border: none;
    border-bottom: 1px solid #E8E8E8;
}
.search_jobs input:focus-visible {
    outline: none;
}
.search_submit input {
    background: #822433;
    color: #fff;
    cursor: pointer;
}
.load_more_jobs strong {
  background: #822433;
  color: #fff;
  padding: 14px 20px;
  font-family: gothambook;
}
.load_more_jobs {
  width: 100%;
  text-align: center;
  padding-top: 3rem;
  text-decoration: none;
}
.load_more_jobs:focus {
  outline: none;
}
.single-job_listing .job-listing-meta.meta { 
 display: none; 
}
.post-content-row {
    display: flex;
    padding: 5rem 10%;
    justify-content: space-between;
}
.job-card-salary {
    display: none;
}
.pcr-sidebar.jobs_page_row .job-widget-card {
    width: 100%;
}
.border-only-job {
    display: none;
}
.Ourlatest_roles-row h3 {
    font-size: 22px;
    font-family: gothambook;
    margin: 0;
    color: #000;
}
.apply_today {
    font-size: 22px;
    font-family: gothambook;
    margin: 0;
    color: #000;
    padding: 2rem 0;
}
.application_button.button {
    width: 100%;
    margin: 0;
    cursor: pointer;
    border: none;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
    margin-bottom: 3rem;
}
.button.wp_job_manager_send_application_button {
    width: 100%;
    margin: 0;
    margin-bottom: 0px;
    cursor: pointer;
    border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
    margin-bottom: 3rem;
}
#candidate_email, #candidate_name {
    height: 50px;
    padding-left: 10px;
}
#application_message {
    padding-left: 10px;
}
.about_social_media {
    display: flex;
    padding-top: 10px;
}
.about_social_media img {
    width: 20px;
    margin-right: 10px;
}
.team_link button {
    background: #822433;
    color: #fff;
    border: none;
    margin-top: 1rem;
    padding: 10px 1rem;
}
.inner_about_banner {
    width: 50%;
}
.no_job_listings_found {
    width: 100%;
}
.left-services-block img, .left-success_stories img {
    height: 494px;
    width: 100%;
    object-fit: cover;
}
.rght_book_call img {
    width: 40px !important;
}
.banner_main {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page_title {
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    font-size: 55px;
    font-family: 'gothambold';
    line-height: 60px;
    z-index: 999;
    position: relative;
}
.bg-shadow {
    background: #0000004f;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.talk_tothem {
    padding: 5rem 10%;
    background: #151515 !important;
}
.inner_talk_tothem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.caal_email {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 50%;
}
.tal_title_contact {
    font-size: 45px;
    font-family: 'Gotham';
    color: #fff;
    text-transform: capitalize;
    line-height: 50px;
    width: 100%;
}
.main_call_title {
    display: flex;
    align-items: center;
    padding: 2rem 0;
    width: 100%;
}
.main_call_title .col-md-1 {
    margin-right: 1rem;
}
.team_call_ttiel {
	font-size: 20px;
	font-family: 'Gotham';
	color: #822433;
	text-transform: capitalize;
	width: 100%;
}
.team_email {
    width: 100%;
    display: block;
}
.team_email a {
    color: #fff;
    font-size: 20px;
    font-family: 'Gotham';
    text-transform: capitalize;
    width: 100%;
    text-decoration: none;
}
.form_contact {
    background: #f5f5f5;
    border-radius: 5px;
    padding: 2rem;
    width: 50%;
}
.form_top_title {
    font-size: 25px;
    font-family: 'Gotham';
    color: #151515;
    text-transform: capitalize;
    line-height: 30px;
    padding-bottom: 1rem;
}
.form_top_subtitle {
    color: #151515;
    font-size: 16px;
    font-family: 'Gotham';
    padding-bottom: 0rem;
}
.form_contact .gform_required_legend {
    display: none;
}
.form_contact .gfield--type-textarea .textarea {
    border-radius: 6px;
    height: 120px !important;
    background: transparent;
    border: 1px solid #151515;
    color: #151515;
    padding: 20px !important;
    font-family: 'Gotham';
}
.form_contact input {
    border-radius: 6px;
    height: 50px;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 20px !important;
    font-family: 'Gotham';
}
.form_contact legend, .form_contact label, .form_contact .gfield_description {
    font-family: 'Gotham' !important;
    color: #151515;
}
.form_contact #gform_submit_button_2 {
	background: #822433;
	border-radius: 0;
	font-family: 'gothambold' !important;
	color: #000;
	cursor: pointer;
	padding: 0 2rem !important;
}
#headCV,#headCVptbr {
  height: 100%;
  max-height: 100% !important;
}
#headCV,#headCVptbr {
  padding: 2rem 10%;
  width: 650px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}
#headCV .gform_required_legend,
#headCVptbr .gform_required_legend {
	display: none;
}
#headCV .gform_title,
#headCVptbr .gform_title {
	color: #000;
}
#input_3_12 {
	height: 100px;
}
#gform_submit_button_3 {
	background: #822433;
    cursor: pointer;
	border-radius: 0 !important;
	color: #000000 !important;
	font-size: 17px;
	font-family: 'Gotham';
	font-weight: 500;
	border: none;
	padding: 13px 35px;
}
.gform-field-label a {
	color: #000000 !important;
}
.lity.lity-opened.lity-inline {
	z-index: 99999;
}
.privacy-policy article, article#post-525 {
    padding: 7rem 10% 4rem;
}
p.gform_description {
    display: none;
}
textarea#input_6_12 {
    height: 100px;
}
input#gform_submit_button_6 {
    background: #822433;
    cursor: pointer;
    border-radius: 0 !important;
    color: #000000 !important;
    font-size: 17px;
    font-family: 'Gotham';
    font-weight: 500;
    border: none;
    padding: 13px 35px;
}

/* ==========================================================================
   Job Filter Template Styles
   Matches the Role Stack / Search Stack design system
   - Dark backgrounds: #1e1e1e, #242424
   - Accent colour: #822433
   - Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero Section ----- */

.jobs-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
}

.jobs-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.jobs-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-hero-subtitle {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.jobs-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 96, 18, 0.4);
    padding: 10px 25px;
    border-radius: 50px;
}

.jobs-stat-number {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #822433;
    font-weight: 700;
}

.jobs-stat-label {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ----- Main Section Layout ----- */

.jobs-section {
    background: #242424;
    padding: 4rem 10% 6rem;
    background: #e8e8e8;
    background: linear-gradient(149deg, rgba(232, 232, 232, 1) 0%, rgba(245, 245, 245, 1) 100%) !important;
}

.jobs-section-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}


/* ----- Sidebar ----- */

.jobs-sidebar-inner {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
}

img.job-hero-banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ----- Search Block ----- */

.jobs-search-block {
    display: flex;
    align-items: center;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease;
}

.jobs-search-block:focus-within {
    border-color: #822433;
}

.jobs-search-input {
    flex: 1;
    background: transparent;
    border: none !important;
    color: #fff !important;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    padding: 12px 14px !important;
    outline: none;
}

.jobs-search-input::placeholder {
    color: #777;
}

.jobs-search-btn {
    background: #822433;
    border: none;
    color: #fff;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.jobs-search-btn:hover {
    background: #e55510;
}


/* ----- Filter Heading ----- */

.jobs-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.jobs-filter-heading h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.jobs-clear-filters {
    background: none;
    border: none;
    color: #822433;
    font-family: gothambook, sans-serif;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.jobs-clear-filters:hover {
    color: #e55510;
}


/* ----- Filter Groups ----- */

.jobs-filter-group {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.jobs-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jobs-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}

.jobs-filter-toggle h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-filter-arrow {
    display: flex;
    align-items: center;
    color: #999;
    transition: transform 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-arrow {
    transform: rotate(-90deg);
}

.jobs-filter-options {
    padding-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
}

/* Custom scrollbar for filter lists */
.jobs-filter-options::-webkit-scrollbar {
    width: 4px;
}

.jobs-filter-options::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.jobs-filter-options::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}


/* ----- Custom Checkboxes ----- */

.jobs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.jobs-checkbox-label:hover {
    opacity: 0.85;
}

.jobs-checkbox-label input[type="checkbox"] {
    display: none;
}

.jobs-checkbox-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #555;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom {
    background: #822433;
    border-color: #822433;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.jobs-checkbox-text {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #ccc;
}


/* ----- Can't Find Role CTA ----- */

.jobs-cant-find {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.jobs-cant-find h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 23px;
    color: #ffffff;
    margin: 0 0 18px;
    line-height: 30px;
    padding-bottom: 20px;
    border-bottom: solid 1px #eeeeee30;
}

.jobs-cant-find p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.jobs-cant-find-form .gform_wrapper {
    margin: 0;
}

.jobs-cant-find-form input {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-family: gothambook, sans-serif !important;
    border-radius: 4px !important;
}

.jobs-cant-find-form input[type="submit"] {
    background: #822433 !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    cursor: pointer;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    width: 100%;
}


/* ----- Job Results ----- */

.jobs-results {
    flex: 1;
    min-width: 0;
}

.jobs-results-header {
    margin-bottom: 1.5rem;
}

.jobs-results-count {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #999;
    margin: 0;
}

.jobs-results-count strong {
    color: #822433;
    font-family: 'Gotham', sans-serif;
}


/* ----- Job Cards Grid ----- */

.jobs-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    transition: opacity 0.3s ease;
}

.jobs-listings-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.jobs-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.jobs-card:hover {
    border-color: #822433;
    transform: translateY(-2px);
}

.jobs-card-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobs-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.jobs-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #aaa;
}

.jobs-card-meta-item svg {
    flex-shrink: 0;
}

.jobs-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #999;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jobs-card-excerpt p {
    margin: 0;
}

.jobs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.jobs-card-link:hover {
    gap: 12px;
}

.jobs-card-link:visited {
    color: #822433;
}


/* ----- No Results ----- */

.jobs-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.jobs-no-results p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}

.left-services-block h4 {
    margin-top: 29px;
    margin-bottom: 13px;
}

/* ==========================================================================
   Job Filter Template Styles
   Primary colour: #6b1d2a
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero Section ----- */

.jobs-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
}

.jobs-hero-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.jobs-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1rem;
}

.job-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #242424;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

img.custom-logo {
    width: 160px;
}

.jobs-hero-subtitle {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.jobs-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(107, 29, 42, 0.5);
    padding: 10px 25px;
    border-radius: 50px;
    display: none;
}

.jobs-stat-number {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #6b1d2a;
    font-weight: 700;
}

.jobs-stat-label {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ----- Main Section Layout ----- */

.jobs-section {
    background: #242424;
    padding: 4rem 10% 6rem;
}

.jobs-section-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}


/* ----- Sidebar ----- */

.jobs-sidebar {
    width: 400px;
    min-width: 300px;
    position: sticky;
    top: 100px;
}

.jobs-sidebar-inner {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
}


/* ----- Search Block ----- */

.jobs-search-block {
    display: flex;
    align-items: center;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease;
}

.jobs-search-block:focus-within {
    border-color: #6b1d2a;
}

.jobs-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
}

.jobs-search-input::placeholder {
    color: #777;
}

.jobs-search-btn {
    background: #6b1d2a;
    border: none;
    color: #fff;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.jobs-search-btn:hover {
    background: #2f3b82;
}


/* ----- Filter Heading ----- */

.jobs-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.jobs-filter-heading h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.jobs-clear-filters {
    background: none;
    border: none;
    color: #6b1d2a;
    font-family: gothambook, sans-serif;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.jobs-clear-filters:hover {
    color: #5b6abf;
}


/* ----- Filter Groups ----- */

.jobs-filter-group {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.jobs-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jobs-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}

.jobs-filter-toggle h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-filter-arrow {
    display: flex;
    align-items: center;
    color: #999;
    transition: transform 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-arrow {
    transform: rotate(-90deg);
}

.jobs-filter-options {
    padding-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
}

/* Custom scrollbar for filter lists */
.jobs-filter-options::-webkit-scrollbar {
    width: 4px;
}

.jobs-filter-options::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.jobs-filter-options::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}


/* ----- Custom Checkboxes ----- */

.jobs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.jobs-checkbox-label:hover {
    opacity: 0.85;
}

.jobs-checkbox-label input[type="checkbox"] {
    display: none;
}

.jobs-checkbox-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #555;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom {
    background: #6b1d2a;
    border-color: #6b1d2a;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.jobs-checkbox-text {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #ccc;
}


/* ----- Can't Find Role CTA ----- */

.jobs-cant-find {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.jobs-cant-find h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #6b1d2a;
    margin: 0 0 0.5rem;
}

.jobs-cant-find p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.jobs-cant-find-form .gform_wrapper {
    margin: 0;
}

.jobs-cant-find-form input {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-family: gothambook, sans-serif !important;
    border-radius: 4px !important;
}

.jobs-cant-find-form input[type="submit"] {
    background: #6b1d2a !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    cursor: pointer;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    width: 100%;
}

.jobs-cant-find-form input[type="submit"]:hover {
    background: #2f3b82 !important;
}


/* ----- Job Results ----- */

.jobs-results {
    flex: 1;
    min-width: 0;
}

.jobs-results-header {
    margin-bottom: 1.5rem;
}

.jobs-results-count {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #999;
    margin: 0;
}



/* ----- Job Cards Grid ----- */

.jobs-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    transition: opacity 0.3s ease;
}

.jobs-listings-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.jobs-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.jobs-card:hover {
    border-color: #6b1d2a;
    transform: translateY(-2px);
}

.jobs-card-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobs-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.jobs-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #aaa;
}

.jobs-card-meta-item svg {
    flex-shrink: 0;
}

.jobs-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #999;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jobs-card-excerpt p {
    margin: 0;
}


/* ----- Consultant Block on Card ----- */

.jobs-card-consultant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    margin-bottom: 1rem;
    border-top: 1px solid #2a2a2a;
}

.jobs-consultant-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.jobs-consultant-photo--placeholder {
    background: #6b1d2a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-consultant-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.jobs-consultant-name {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobs-consultant-role {
    font-family: gothambook, sans-serif;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ----- Card Link ----- */

.jobs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.jobs-card-link:hover {
    gap: 12px;
}

.jobs-card-link:visited {
    color: #6b1d2a;
}


/* ----- No Results ----- */

.jobs-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.jobs-no-results p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .jobs-hero {
        padding: 10rem 5% 4rem;
    }

    .jobs-section {
        padding: 3rem 5% 5rem;
    }

    .jobs-sidebar {
        width: 260px;
        min-width: 260px;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .jobs-hero {
        padding: 8rem 5% 3rem;
    }

    .jobs-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .jobs-hero-subtitle {
        font-size: 16px;
    }

    .jobs-section {
        padding: 2rem 5% 4rem;
    }

    .jobs-section-inner {
        display: block;
    }

    .jobs-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-bottom: 2rem;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .jobs-card-meta {
        flex-direction: column;
        gap: 6px;
    }

    .jobs-card-title {
        font-size: 16px;
    }
}

/* ====================================================
   TN Recruits - New Homepage Sections
   Add this to the end of style.css
   ==================================================== */


/* ------ Specialist Divisions / Sector Lead-Throughs ------ */

.specialist_divisions {
    padding: 5rem 10%;
    background: #1e1e1e;
}

.specialist_divisions_header {
    color: #fff;
    font-family: gothambook;
    padding-bottom: 3rem;
}

.specialist_divisions_header h2 {
    font-size: 40px;
    line-height: 45px;
    font-family: gothambook;
    color: #fff;
}

.specialist_divisions_header p {
    color: #C9C9C9;
    font-size: 16px;
}

.divisions_grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.division_card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 2.5rem 2rem;
    width: calc(25% - 1.5rem);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.division_card:hover {
    border-color: #822433;
    transform: translateY(-4px);
    background: #1f1f1f;
}

.division_icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.division_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.division_name {
    color: #fff;
    font-family: Gotham;
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.division_description {
    color: #C9C9C9;
    font-family: gothambook;
    font-size: 14px;
    line-height: 22px;
    flex-grow: 1;
    margin: 0;
}

.division_arrow {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    color: #f0f0f0;
    font-size: 14px;
}

.division_arrow img {
    width: 24px;
    transition: transform 0.3s ease;
}

.division_card:hover .division_arrow img {
    transform: translateX(5px);
}

.division_arrow img {
    margin-left: 10px;
}

/*!
Theme Name: Role Stack [A Search Stack Theme]
Theme URI: https://searchstack.co.uk/
Author: Search Stack
Author URI: https://searchstack.co.uk/
Description: The main theme for Search Stack websites
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rolestack-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

rolestack-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/`
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize
    - Box sizing
# Base
    - Typography
    - Elements
    - Links
    - Forms
## Layouts
# Components
    - Navigation
    - Posts and pages
    - Comments
    - Widgets
    - Media
    - Captions
    - Galleries
# plugins
    - Jetpack infinite scroll
# Utilities
    - Accessibility
    - Alignments

--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/


/* Normalize
--------------------------------------------- */


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* Document
     ========================================================================== */


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

     html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }

/* Sections
     ========================================================================== */


/**
 * Remove the margin in all browsers.
 */

     body {
        margin: 0;
    }


/**
 * Render the `main` element consistently in IE.
 */

    main {
        display: block;
    }


/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }


/* Grouping content
     ========================================================================== */


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

     hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    pre {
        font-family: monospace, monospace;
        font-size: 1em;
    }


/* Text-level semantics
     ========================================================================== */


/**
 * Remove the gray background on active links in IE 10.
 */

     a {
        background-color: transparent;
    }


/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

    b,
    strong {
        font-weight: bolder;
    }


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }


/**
 * Add the correct font size in all browsers.
 */

    small {
        font-size: 80%;
    }


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }


/* Embedded content
     ========================================================================== */


/**
 * Remove the border on images inside links in IE 10.
 */

     img {
        border-style: none;
    }


/* Forms
     ========================================================================== */


/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

     button,
     input,
     optgroup,
     select,
     textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
    }


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

    button,
    input {
        overflow: visible;
    }


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

    button,
    select {
        text-transform: none;
    }


/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
    }


/**
 * Remove the inner border and padding in Firefox.
 */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }


/**
 * Restore the focus styles unset by the previous rule.
 */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }


/**
 * Correct the padding in Firefox.
 */

    fieldset {
        padding: 0.35em 0.75em 0.625em;
    }


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *      `fieldset` elements in all browsers.
 */

    legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
    }


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

    progress {
        vertical-align: baseline;
    }


/**
 * Remove the default vertical scrollbar in IE 10+.
 */

    textarea {
        overflow: auto;
    }


/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

    [type="checkbox"],
    [type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

    [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }


/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }


/* Interactive
     ========================================================================== */


/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

     details {
        display: block;
    }


/*
 * Add the correct display in all browsers.
 */

    summary {
        display: list-item;
    }


/* Misc
     ========================================================================== */


/**
 * Add the correct display in IE 10+.
 */

     template {
        display: none;
    }


/**
 * Add the correct display in IE 10.
 */

    [hidden] {
        display: none;
    }


/* Box sizing
--------------------------------------------- */


/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/


/* Typography
--------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}


/* Elements
--------------------------------------------- */

body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}


/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}


/* Links
--------------------------------------------- */

a {
    color: #822433;
}


a:hover,
a:focus,
a:active {
    color: #6b1d2a;
}

a:focus {
    outline: none;
}

a:hover,
a:active {
    outline: 0;
}


/* Forms
--------------------------------------------- */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/


/* Navigation
--------------------------------------------- */
header#masthead {
    position: fixed;
    width: 100%;
    display: flex;
    background: #1e1e1e;
    align-items: center;
    padding: 5px 5%;
    z-index: 99999;
    transition: all .4s ease;
    top: 0;
}
#primary-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#primary-menu li a {
    font-weight: 500;
    font-family: 'Gotham';
    color: #fff;
    text-decoration: none;
    padding: 0 13px;
    width: 100%;
    display: block;
    font-size: 14px;
}
#primary-menu .current-menu-item a {
    color: #822433;
}
#primary-menu li:last-child a {
    padding-right: 0;
}
#myNav::after {
    content: " ";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: absolute;
    right: -1.1%;
    top: -1px;
    z-index: -1 !important;
    width: 395px;
    height: 100%;
    right: -3%;
    top: 0px;
    z-index: 1;
    opacity: 0.05;
}
.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    left: auto;
    top: 0;
    background-color: #1A1A1A;
    overflow-x: hidden;
    transition: 0.5s;
    right: 0;
}
.overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 10rem;
    text-align: left;
}
.overlay-content #primary-menu {
    display: block;
}
.overlay-content #primary-menu li {
    padding: 8px 0;
}











.menu li.menu-item-has-children>a::after {
    color: #822433;
    content: '►';
    font-size: 10px;
    vertical-align: 1px;
    position: relative;
    left: 10px;
}

.menu li.menu-item-has-children:hover>a::after {
    content: '▼';
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu {
    display: none;
    padding-top: 5px;
    list-style: none;
    margin: 0;
    position: absolute;
    width: 230px;
    background: #333;
    padding-bottom: 10px;
    border-radius: 10px;
    padding-left: 0;
    padding-right: 0;
}
.menu li.menu-item-has-children:hover > a::after {
    content: '▼';
    font-size: 16px !important;
}
.sub-menu li a {
    font-size: 13px !important;
    padding: 0 !important;
}

.sub-menu li {
    padding: 0 1rem;
}
.site-branding {
    width: 15%;
}
.desktop_navigation {
    width: 70%;
}
.header-right-nav {
    width: 15%;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.language-switcher .wpml-ls {
    margin-bottom: 0 !important;
    padding: 0;
}
.language-switcher {
    border-left: 1px solid #CECECE;
    border-right: 1px solid #CECECE;
}
.header-right-nav div {
    line-height: 0;
}
.main-banner {
    background: #1e1e1e;
    padding: 13rem 0 161px 0%;
    overflow: hidden;
    position: relative;
}


/* ==========================================================================
   Scroll Fade-Up Animations - TN Recruits Homepage
   ========================================================================== */

/* Base state - elements start invisible and slightly shifted down */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When the element enters the viewport */
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for child elements within grids/repeaters */
.fade-up-stagger > *:nth-child(1) { transition-delay: 0s; }
.fade-up-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.fade-up-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.fade-up-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.fade-up-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.fade-up-stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Banner - animates on page load rather than scroll */
.banner-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: bannerFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.banner-fade-up:nth-child(2) {
    animation-delay: 0.45s;
}

@keyframes bannerFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-fade-up {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ----- Intro row alternating layout ----- */
/* Even rows (0, 2, 4...): image left, content right - default order  */
/* Odd rows  (1, 3, 5...): image right, content left - reversed order */

.sector-intro--image-right .sector-intro-inner {
    flex-direction: row-reverse;
}

/* Alternate the background so stacked rows don't look the same */
.sector-intro--image-left  { background: #f5f5f5; }
.sector-intro--image-right { background: #fff !important; }

/* On mobile the flex-direction is always column so no reversal is needed,
   but we keep a consistent top-image, bottom-text order on all rows */
@media screen and (max-width: 768px) {
    .sector-intro--image-right .sector-intro-inner {
        flex-direction: column;
    }
}

.banner_right_block,.banner_left_block {    
    width: 100%;
}
.inner_main_banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner_left_text h1 {
    font-size: 75px;
    line-height: 78px;
}

img.tn-hp-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tn-home-gradient {
    background: #242424;
    background: linear-gradient(113deg, #1e202f 20%, rgba(16, 16, 16, 0) 84%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.banner_left_text p {
    width: 65%;
    line-height: 32px;
    color: #dfdfdf;
}

.banner_left_text {
    font-family: gothambook;
    color: #fff;
    position: relative;
    z-index: 4;
}
.discover_banner_btn button {
    background: transparent;
    border: none;
    color: #F8F8F8;
    align-items: center;
    display: flex;
    font-family: gothambook;
    padding: 0;
}
.discover_banner_btn a{
    text-decoration: none;
}
.discover_banner_btn button img{
   margin-left: 10px;
}
.banner_right_block {
    text-align: right;
}
.our_services {
    background: #242424;
    padding: 5rem 10%;
}
.left-services-block {
    width: 45%;
    font-size: 45px;
    color: #fff;
    font-family: gothambook;
}
.inner_our_services {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: auto;
}
.right_services-block {
    width: 45%;
}
.right_services-block h2 {
    font-family: gothambook;
    color: #fff;
    font-size: 45px;
    line-height: 53px;
}
.right_services-block p {
    font-family: gothambook;
    color: #C9C9C9;
    font-size: 14px;
    line-height: 28px;
}
.services_repater {
    padding-top: 5rem;
    max-width: 1400px;
    margin: auto;
}

.inner_specialist_divisions {
    max-width: 1400px;
    margin: auto;
}
.inner_serices_repater {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #cbcbcb;
    padding: 3rem 0;
    font-family: gothambook;
    align-items: center;
}
.years {
    color: #822433;
    font-size: 45px;
    line-height: 45px;
    width: 20%;
    font-family: Gotham;
    font-weight: 500;
}
.repater_title {
    font-size: 25px;
    font-family: gothambook;
    color: #fff;
    line-height: 30px;
    width: 40%;
}
.desc_repeater {
	font-size: 16px;
	font-family: gothambook;
	color: #C9C9C9;
	line-height: 27px;
	width: 40%;
	font-weight: 400;
}
.inner_serices_repater:last-child {
    border-bottom: 1px solid #cbcbcb;
}
.our_mission {
    padding: 1rem 10%;
    background: #f5f5f5;
}
.inner_our_misison {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tn-shortcode-container {
    max-width: 1400px;
    margin: auto;
    padding: 0;
    padding-bottom: 0rem;
    padding-top: 5rem;
}
.grw-row.grw-row-xl {
    flex-direction: column;
}
.inner_latest_vacancies {
    max-width: 1400px;
    margin: auto;
}
.right-mission-block {
    width: 55%;
}
.right-mission-block p {
    font-family: gothambook;
}
.lity {
    z-index: 999999;
}
.our_mission button {
    color: #242424;
    font-family: Gotham;
}
.success_stories_top {
    padding: 5rem 0% 0;
    background: #242424;
    color: #fff;
}
.left-success_stories {
    width: 45%;
    font-size: 20px;
    color: #fff;
    font-family: gothambook;
}
.left-success_stories h4 {
    padding-bottom: 2rem;
}
.inner_success_stories {
    display: flex;
    justify-content: space-between;
    padding: 0;
    max-width: 1400px;
    margin: auto;
}
.success_Stories_bottom {
    display: flex;
    align-items: center;
    padding: 5rem 0 5rem 0%;
    justify-content: space-between;
}
.right_succesS_stories,.left_tetsimonia_block {
    width: 45%;
}
.right_succesS_stories h3 {
	font-family: gothambook;
	color: #fff;
	font-size: 40px;
	line-height: 45px;
	margin: 0;
	text-transform: capitalize;
}

/* ==========================================================================
   Google Reviews Widget - Dark Theme Override
   ========================================================================== */

/* -- Container -- */

.tn-shortcode-container .grw-row {
    padding-bottom: 0 !important;
}

/* -- Header: logo, name, rating, review count -- */

.tn-shortcode-container .grw-header {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.tn-shortcode-container .grw-header .wp-google-name a {
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

.tn-shortcode-container .grw-header .wp-google-based {
    color: #888 !important;
    font-family: gothambook, sans-serif !important;
    font-size: 13px !important;
}

.tn-shortcode-container .grw-header .wp-google-powered {
    color: #666 !important;
    font-family: gothamlight, sans-serif !important;
    font-size: 12px !important;
}

.tn-shortcode-container .grw-header .wp-google-wr a {
    background: #6b1d2a !important;
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.3s ease !important;
}

.tn-shortcode-container .grw-header .wp-google-wr a:hover {
    background: #2f3b82 !important;
}

/* -- Review Cards -- */

.tn-shortcode-container .grw-review-inner {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 1.5rem !important;
    transition: border-color 0.3s ease !important;
}

.tn-shortcode-container .grw-review-inner:hover {
    border-color: #6b1d2a !important;
}

.tn-shortcode-container .grw-review .wp-google-name {
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.tn-shortcode-container .grw-review .wp-google-time {
    color: #888 !important;
    font-family: gothamlight, sans-serif !important;
    font-size: 12px !important;
}

.tn-shortcode-container .grw-review .wp-google-text {
    color: #b0b0b0 !important;
    font-family: gothambook, sans-serif !important;
    font-size: 13px !important;
    line-height: 21px !important;
}

.tn-shortcode-container .grw-review .wp-google-feedback {
    scrollbar-width: thin !important;
    scrollbar-color: #3a3a3a #1a1a1a !important;
}

/* -- Stars -- */

.tn-shortcode-container .rpi-stars {
    color: #f5a623 !important;
}

/* -- Profile images -- */

.tn-shortcode-container .grw-review .grw-img {
    border-radius: 50% !important;
    border: 2px solid #2a2a2a !important;
}

/* -- Navigation Arrows -- */

.tn-shortcode-container .rpi-ltgt {
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
}

.tn-shortcode-container .rpi-ltgt:hover {
    background: #6b1d2a !important;
    border-color: #6b1d2a !important;
}

/* -- Dots -- */

.tn-shortcode-container .rpi-dot {
    background: #3a3a3a !important;
    border: none !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.tn-shortcode-container .rpi-dot.active {
    background: #6b1d2a !important;
    transform: scale(1.2) !important;
}

/* -- Google icon in cards -- */

.tn-shortcode-container .grw-review-inner > svg {
    opacity: 0.4 !important;
}

.wp-gr:not(.wp-dark) .grw-review-inner.grw-backgnd {
    background: #1a1a1a !important;
}

.rpi-stars {
    --star-color: #d1d8ff !important;
}

.right_succesS_stories p {
    font-family: gothambook;
    padding-bottom: 1rem;
}
.right_case_study {
    display: flex;
    width: 51%;
    justify-content: space-between;
}
.casestudy_data {
    position: relative;
    width: 48%;
}
.read_post_case {
    display: flex;
    align-content: center;
    align-items: center;
    text-transform: uppercase;
}
.read_post_case img{
    padding-left: 15px;
}
.wp-gr.rpi a.wp-google-name {
    margin: 0!important;
    color: #ffffff !important;
    text-decoration: none!important;
    white-space: nowrap!important;
    text-overflow: ellipsis!important;
    font-weight: 400 !important;
}
.case_study_title {
    font-size: 25px;
    line-height: 23px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: gothambook;
}
.service_desc {
    font-family: gothambook;
}
.case_study_image img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}
.blog-o-link {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.tetsimonial_quote {
    font-family: gothambook;
    padding-bottom: 10px;
    font-style: italic;
}
.repater_name {
    color: #822433;
    font-family: Gotham;
}
.position_repeater {
    padding: 10px 0;
    font-family: gothambook;
}
.success_Stories_bottom .slick-prev.slick-arrow::before {
    content: url(/wp-content/uploads/2023/12/Group-96.svg);
}
.success_Stories_bottom .slick-next.slick-arrow::before {
    content: url(/wp-content/uploads/2023/12/Group-95.svg);
}
.success_Stories_bottom .slick-prev.slick-arrow,
.success_Stories_bottom .slick-next.slick-arrow {
    background-color: transparent;
    cursor: pointer;
    border: none;
    padding: 0;
    font-size: 0;
}
.success_Stories_bottom .slick-prev.slick-arrow {
    position: absolute;
    bottom: 0;
    z-index: 9;
}
.success_Stories_bottom .slick-next.slick-arrow {
    position: absolute;
    left: 6%;
    bottom: 0;
}
.testimonials_repeater.slick-current.slick-active {
    padding-bottom: 2rem;
}
button{
    cursor: pointer;
}
.gracity_form .gform_required_legend {  
    display: none;
}
.gracity_form  #gfield_upload_rules_1_4 {
    display: none;
}
.gracity_form input {
    background: transparent;
    border: 1px solid #242424;
    border-radius: 0;
    color: #fff !important;
}
#colophon {
    background: #1e1e1e;
    padding: 5rem 10% 2rem;
    font-family: gothambook;
}
.left_book_call {
	font-family: gothambook;
	color: #fff;
	font-size: 35px;
	line-height: 35px;
}
.left_book_call  a{
	color: #fff;
	text-decoration: none;
}
.left_book_call img {
	width: 30px;
	margin-left: 1rem;
}
.book_call {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4rem;
    border-bottom: 1px solid #CCCCCC;
}
.bottom-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 5rem;
}
.footer-social-media {
    padding: 2rem 0;
}
.footer-social-media img{
    margin-right: 2rem;
}
.navigation_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
}
.column-footer a {
    color: #D8D8D8;
    text-decoration: none;
}
.email_footer img, .mobile_footer img{
    padding-right: 10px;
}
.column-footer {
    width: 25%;
}
.navigation_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
    padding-bottom: 1rem;
}
.address_footer {
    color: #D8D8D8;
}
.email_footer {
    padding-bottom: 1rem;
}
.inner_link {
    padding: 5px 0;
}
.column-footer .gform_title {
    display: none;
}
.column-footer #gform_submit_button_1 {
    margin: 0;
    cursor: pointer;
    border: none;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
}
.column-footer #input_1_4 {
    border: none;
    color: #fff;
}
.column-footer .gfield_label.gform-field-label {
    color: #fff;
    font-family: gothambook;
    font-size: 13px !important;
}
.upload_cv_title {
    font-size: 20px;
    color: #fff;
    font-family: Gotham;
}
.about_banner {
    padding: 15rem 10% 10rem;
    background: #1e1e1e;
}
.page_title_about {
    color: #fff;
    font-size: 60px;
    font-family: gothambook;
}
.about_banner_desc {
    color: #fff;
    padding-bottom: 1rem;
}
.about_banner .discover_banner_btn button{
    text-align: center;
    margin: auto;
    display: block;
    display: flex;
}
.our_mission_about {
    padding: 5rem 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.right_mission_about,.left_mission_about {
  width: 45%;
}
.left_mission_about h2 {
    font-size: 45px;
    font-family: gothambook;
    line-height: 45px;
    color: #242424;
}
.left_mission_about p {
    color: #242424;
    font-family: gothambook;
}
.our_mission_about button {
    color: #242424;
}
#about_values .right_services-block {
    text-align: right;
    font-size: 45px;
    line-height: 45px;
    color: #fff;
    font-family: gothambook;
}
#about_values .years img {
    width: 82px;
    object-fit: cover;
}
.generation-talent {
    padding: 5rem 10%;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.right-generation-block,.left-generation-block {   
 width: 45%;
 position: relative;
 z-index: 9;
}
.our_talent_img {
    position: absolute;
    left: 0;
    bottom: 0;
}
.talent_repeater {
    display: flex;
}
.left-generation-block h2 {
    font-size: 45px;
    font-family: gothambook;
    line-height: 45px;
    color: #242424;
}
.left-generation-block p {
	font-family: gothambook;
	font-weight: 400;
}
.talent_repeater {
    display: flex;
    border: 1px solid #D9D9D9;
    padding: 1rem;
    margin-bottom: 1rem;
    font-family: gothambook;
    align-items: center;
}
.generation_img {
    width: 25%;
}
.titele_desc {
    font-family: gothambook;
    width: 100%;
}
.left-generation-block button,.left_marketing_tal button {
    color: #242424;
}
.generation_title {
    color: #454545;
    font-size: 25px;
    font-family: gothambook;
    font-weight: bold;
}
.left_team_title {
    font-size: 45px;
    color: #fff;
    font-family: gothambook;
    padding-bottom: 2rem;
}
.right_allteam {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.out_team {
    padding: 5rem 10% 2rem;
    background: #242424;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.member_position {
    color: #822433;
    font-family: gothambook;
    font-size: 16px;
}
.team_data {
    width: 31%;
    margin-bottom: 3rem;
}
.member_image img {
	width: 100%;
	height: 365px;
	object-fit: cover;
	object-position: top;
}
.right-generation-block img {
    width: 82px;
}
.team_title {
    font-size: 20px;
    color: #fff;
    font-family: gothambook;
}
.marketing_talent {
    padding: 5rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right_talemt_block, .left_marketing_tal {
    width: 45%;
}
.left_marketing_tal h2 {
    color: #242424;
    font-family: gothambook;
    font-size: 45px;
    line-height: 50px;
    text-transform: capitalize;
}
.left_marketing_tal p{
    font-family: gothambook;
}
.top_testimonial_img img {
    width: 100%;
    height: 142px;
    object-fit: cover;
}
.top_testimonial_img {
    padding-bottom: 3rem;
}
.testimonial_quote_text, .testimonial_quote,.tets-authorname,.tets-author {
    padding-left: 1rem;
}
.testimonial_quote_text p {
    color: #000;
    font-size: 22px;
    line-height: 32px;
    font-family: gothambook;
}
.tets-author {
    font-family: Gotham;
    font-size: 18px;
    color: #000;
}
.tets-authorname {
    color: #a1a1a1;
    font-family: gothambook;
}
.md-header h2 {
	font-family: gothambook;
	color: #fff;
	font-size: 45px;
	line-height: 50px;
}
.tablinks.active {
  color: #822433;
}
.left_btn button {
  background: transparent;
  color: #a1a1a1;
  border: none;
  font-size: 22px;
  padding: 0;
}
.left_btn {
    border-bottom: 1px solid #E9E9E9;
}
#code-box-2 {
    display: flex;
    justify-content: space-between;
}
.tab_content_right,.tab {
 width: 45%;
}
.makes-different-row {
    padding: 5rem 10%;
    position: relative;
    background: #1e1e1e;
}
.tab-content {
    color: #fff;
    font-family: gothambook;
}
.tab-content p > img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    margin-bottom: 0rem;
    position: relative;
    z-index: 9;
}
.content-tab-row.row {
    padding-top: 3rem;
}
.hexagon-img {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
}
.left_case_title {
	color: #01010E;
	font-size: 45px;
	font-family: Gotham;
	line-height: 45px;
	width: 48%;
	text-transform: capitalize;
}
.Case_Studies {
    padding: 5rem 10%;
}
.case_title_desc {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
}
.big_left_case_study {
    width: 48%;
}
.big_left_case_study .casestudy_data {
    width: 100%;
}
.big_left_case_study .case_study_image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.big_left_case_study .service_desc {
    color: #A1A1A1;
}
.right_case_studies {
    width: 50%;
    display: flex;
    justify-content: space-between;
}
.all_case_studies {
    display: flex;
    justify-content: space-between;
}
.right_case_studies .service_desc {
    color: #A1A1A1;
}
.Case_Studies .case_study_title {
    font-family: gothambook !important;
}
.Download_Our_Ebook {
    padding: 5rem 10% 15rem;
    background: #242424;
    color: #fff;
    font-family: gothambook;
    display: flex;
    align-items: end;
    position: relative;
}
.download_left_ebook h2 {
    color: #822433;
    font-size: 35px;
    margin: 0;
}
.download_left_ebook {
    width: 55%;
    background: #1e1e1e;
    padding: 3rem;
    position: relative;
    z-index: 9;
}
.right_download_ebbok {
    width: 40%;
    position: absolute;
    right: 15%;
    z-index: 0;
    top: 35%;
}
.case_studies_banner {
    padding: 10rem 10% 6rem;
    background: #1e1e1e;
    text-align: center;
    color: #fff;
}
.page_title_case {
    font-size: 60px;
    font-family: gothambook;
}
.all_case_page .service_desc {
    color: #A1A1A1;
}
.all_case_page {
    padding: 5rem 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.all_case_page .casestudy_data {
    margin-bottom: 4rem;
}
.all_case_page .case_study_image img {
    height: 400px;
    object-fit: cover;
}
.main_content_case {
    padding: 5rem 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pcr-main {
    width: 60%;
    font-family: gothambook;
    line-height: 30px;
}
.pcr-sidebar {
    width: 30%;
}
.latest-single-row .casestudy_data {
    position: relative;
    width: 100%;
}
.latest-single-row .case_study_image img {
    height: 250px;
    object-fit: cover;
}
.latest-single-row > h2 {
    color: #822433;
    font-family: Gotham;
    text-transform: uppercase;
}
#primary-menu li a:hover {
    color: #822433;
}
.jobs_page_row .job_listings {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.job_listings {
  border: none !important;
}
.jobs_page_row.job-page-search {
    padding: 5rem 10% 6rem;
}
.jobs_page_row .job_filters {
    width: 100%;
}
.jobs_page_row .job-widget-card {
    padding: 2rem;
    border: 1px solid #E8E8E8;
    width: 32%;
    background: #fff;
    border-radius: 0px;
    padding: 2rem;
    margin-top: 1.5rem;
    font-family: 'Gotham';
    font-weight: 400;
}
.job-search .job-type {
    display: none;
}
.job-card-title {
    font-size: 20px;
    color: #242424;
    font-weight: bold;
    font-family: 'Gotham';
}
.job-search .border-only-job, .job-search .job-card-salary {
    display: none !important;
}
.salary-location {
    display: flex;
    align-items: center;
    height: 52px;
}
.job-card-salary, .job-card-location {
    display: flex;
}
.job-search .job-card-location img {
  margin-right: 8px;
}
.salary-location img {
  width: 15px;
  height: 21px;
}
.job-card-location a, .job-card-salary {
    color: #242424;
    font-family: 'gothamlight';
    font-size: 16px;
    text-decoration: none;
}
.job-excerpt {
    line-height: 30px;
    color: #242424;
    font-size: 16px;
    font-family: 'gothamlight';
}
.job-card-type a {
    text-decoration: none;
}
.job-card-type .view_casestudy {
    color: #822433;
    font-family: 'Gotham';
}
.job-excerpt p {
    margin: 0;
}
.job-card-type .view_casestudy {
    color: #822433;
    font-family: 'Gotham';
    display: flex;
    align-items: center;
    padding-top: 1rem;
}
.job-card-type .view_casestudy img{
    padding-left: 1rem;
}
.job_types,.search_salary { 
    display: none;
}
.search_jobs {
    display: flex;
}
.search_jobs label{
    display:none;
}
.search_jobs div {
    width: 100%;
}
.search_jobs input {
    width: 100%;
}
.search_jobs input {
    font-family: gothambook;
    width: 95%;
    height: 45px;
    border: none;
    border-bottom: 1px solid #E8E8E8;
}
.search_jobs input:focus-visible {
    outline: none;
}
.search_submit input {
    background: #822433;
    color: #fff;
    cursor: pointer;
}
.load_more_jobs strong {
  background: #822433;
  color: #fff;
  padding: 14px 20px;
  font-family: gothambook;
}
.load_more_jobs {
  width: 100%;
  text-align: center;
  padding-top: 3rem;
  text-decoration: none;
}
.load_more_jobs:focus {
  outline: none;
}
.single-job_listing .job-listing-meta.meta { 
 display: none; 
}
.post-content-row {
    display: flex;
    padding: 5rem 10%;
    justify-content: space-between;
}
.job-card-salary {
    display: none;
}
.pcr-sidebar.jobs_page_row .job-widget-card {
    width: 100%;
}
.border-only-job {
    display: none;
}
.Ourlatest_roles-row h3 {
    font-size: 22px;
    font-family: gothambook;
    margin: 0;
    color: #000;
}
.apply_today {
    font-size: 22px;
    font-family: gothambook;
    margin: 0;
    color: #000;
    padding: 2rem 0;
}
.application_button.button {
    width: 100%;
    margin: 0;
    cursor: pointer;
    border: none;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
    margin-bottom: 3rem;
}
.button.wp_job_manager_send_application_button {
    width: 100%;
    margin: 0;
    margin-bottom: 0px;
    cursor: pointer;
    border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    background: #822433;
    color: #fff;
    padding: 13px 25px !important;
    font-family: Gotham;
    border-radius: 4px;
    margin-bottom: 3rem;
}
#candidate_email, #candidate_name {
    height: 50px;
    padding-left: 10px;
}
#application_message {
    padding-left: 10px;
}
.about_social_media {
    display: flex;
    padding-top: 10px;
}
.about_social_media img {
    width: 20px;
    margin-right: 10px;
}
.team_link button {
    background: #822433;
    color: #fff;
    border: none;
    margin-top: 1rem;
    padding: 10px 1rem;
}
.inner_about_banner {
    width: 50%;
}
.no_job_listings_found {
    width: 100%;
}
.left-services-block img,
.left-success_stories img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}
.rght_book_call img {
    width: 40px !important;
}
.banner_main {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page_title {
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    font-size: 55px;
    font-family: 'gothambold';
    line-height: 60px;
    z-index: 999;
    position: relative;
}
.bg-shadow {
    background: #0000004f;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.talk_tothem {
    padding: 5rem 10%;
    background: #151515 !important;
}
.inner_talk_tothem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.caal_email {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 50%;
}
.tal_title_contact {
    font-size: 45px;
    font-family: 'Gotham';
    color: #fff;
    text-transform: capitalize;
    line-height: 50px;
    width: 100%;
}
.main_call_title {
    display: flex;
    align-items: center;
    padding: 2rem 0;
    width: 100%;
}
.main_call_title .col-md-1 {
    margin-right: 1rem;
}
.team_call_ttiel {
	font-size: 20px;
	font-family: 'Gotham';
	color: #822433;
	text-transform: capitalize;
	width: 100%;
}
.team_email {
    width: 100%;
    display: block;
}
.team_email a {
    color: #fff;
    font-size: 20px;
    font-family: 'Gotham';
    text-transform: capitalize;
    width: 100%;
    text-decoration: none;
}
.form_contact {
    background: #f5f5f5;
    border-radius: 5px;
    padding: 2rem;
    width: 50%;
}
.form_top_title {
    font-size: 25px;
    font-family: 'Gotham';
    color: #151515;
    text-transform: capitalize;
    line-height: 30px;
    padding-bottom: 1rem;
}
.form_top_subtitle {
    color: #151515;
    font-size: 16px;
    font-family: 'Gotham';
    padding-bottom: 0rem;
}
.form_contact .gform_required_legend {
    display: none;
}
.form_contact .gfield--type-textarea .textarea {
    border-radius: 6px;
    height: 120px !important;
    background: transparent;
    border: 1px solid #151515;
    color: #151515;
    padding: 20px !important;
    font-family: 'Gotham';
}
.form_contact input {
    border-radius: 6px;
    height: 50px;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 20px !important;
    font-family: 'Gotham';
}
.form_contact legend, .form_contact label, .form_contact .gfield_description {
    font-family: 'Gotham' !important;
    color: #151515;
}
.form_contact #gform_submit_button_2 {
	background: #822433;
	border-radius: 0;
	font-family: 'gothambold' !important;
	color: #000;
	cursor: pointer;
	padding: 0 2rem !important;
}
#headCV,#headCVptbr {
  height: 100%;
  max-height: 100% !important;
}
#headCV,#headCVptbr {
  padding: 2rem 10%;
  width: 650px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}
#headCV .gform_required_legend,
#headCVptbr .gform_required_legend {
	display: none;
}
#headCV .gform_title,
#headCVptbr .gform_title {
	color: #000;
}
#input_3_12 {
	height: 100px;
}
#gform_submit_button_3 {
	background: #822433;
    cursor: pointer;
	border-radius: 0 !important;
	color: #000000 !important;
	font-size: 17px;
	font-family: 'Gotham';
	font-weight: 500;
	border: none;
	padding: 13px 35px;
}
.gform-field-label a {
	color: #000000 !important;
}
.lity.lity-opened.lity-inline {
	z-index: 99999;
}
.privacy-policy article, article#post-525 {
    padding: 7rem 10% 4rem;
}
p.gform_description {
    display: none;
}
textarea#input_6_12 {
    height: 100px;
}
input#gform_submit_button_6 {
    background: #822433;
    cursor: pointer;
    border-radius: 0 !important;
    color: #000000 !important;
    font-size: 17px;
    font-family: 'Gotham';
    font-weight: 500;
    border: none;
    padding: 13px 35px;
}

/* ==========================================================================
   Job Filter Template Styles
   Matches the Role Stack / Search Stack design system
   - Dark backgrounds: #1e1e1e, #242424
   - Accent colour: #822433
   - Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero Section ----- */

.jobs-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
}

.jobs-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.jobs-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-hero-subtitle {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.jobs-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 96, 18, 0.4);
    padding: 10px 25px;
    border-radius: 50px;
}

.jobs-stat-number {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #822433;
    font-weight: 700;
}

.jobs-stat-label {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ----- Main Section Layout ----- */

.jobs-section {
    background: #e5e5e5;
    padding: 4rem 10% 6rem;
}

.jobs-section-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}


/* ----- Sidebar ----- */

.jobs-sidebar-inner {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
}

img.job-hero-banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ----- Search Block ----- */

.jobs-search-block {
    display: flex;
    align-items: center;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease;
}

.jobs-search-block:focus-within {
    border-color: #822433;
}

.jobs-search-input {
    flex: 1;
    background: transparent;
    border: none !important;
    color: #fff !important;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    padding: 12px 14px !important;
    outline: none;
}

.jobs-search-input::placeholder {
    color: #777;
}

.jobs-search-btn {
    background: #822433;
    border: none;
    color: #fff;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.jobs-search-btn:hover {
    background: #e55510;
}


/* ----- Filter Heading ----- */

.jobs-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.jobs-filter-heading h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.jobs-clear-filters {
    background: none;
    border: none;
    color: #822433;
    font-family: gothambook, sans-serif;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.jobs-clear-filters:hover {
    color: #e55510;
}


/* ----- Filter Groups ----- */

.jobs-filter-group {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.jobs-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jobs-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}

.jobs-filter-toggle h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-filter-arrow {
    display: flex;
    align-items: center;
    color: #999;
    transition: transform 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-arrow {
    transform: rotate(-90deg);
}

.jobs-filter-options {
    padding-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
}

/* Custom scrollbar for filter lists */
.jobs-filter-options::-webkit-scrollbar {
    width: 4px;
}

.jobs-filter-options::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.jobs-filter-options::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}


/* ----- Custom Checkboxes ----- */

.jobs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.jobs-checkbox-label:hover {
    opacity: 0.85;
}

.jobs-checkbox-label input[type="checkbox"] {
    display: none;
}

.jobs-checkbox-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #555;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom {
    background: #822433;
    border-color: #822433;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.jobs-checkbox-text {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #ccc;
}


/* ----- Can't Find Role CTA ----- */

.jobs-cant-find {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.jobs-cant-find h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 23px;
    color: #ffffff;
    margin: 0 0 18px;
    line-height: 30px;
    padding-bottom: 20px;
    border-bottom: solid 1px #eeeeee30;
}

.jobs-cant-find p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.jobs-cant-find-form .gform_wrapper {
    margin: 0;
}

.jobs-cant-find-form input {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-family: gothambook, sans-serif !important;
    border-radius: 4px !important;
}

.jobs-cant-find-form input[type="submit"] {
    background: #822433 !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    cursor: pointer;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    width: 100%;
}


/* ----- Job Results ----- */

.jobs-results {
    flex: 1;
    min-width: 0;
}

.jobs-results-header {
    margin-bottom: 1.5rem;
}

.jobs-results-count {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #999;
    margin: 0;
}


/* ----- Job Cards Grid ----- */

.jobs-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    transition: opacity 0.3s ease;
}

.jobs-listings-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.jobs-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.jobs-card:hover {
    border-color: #822433;
    transform: translateY(-2px);
}

.jobs-card-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobs-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.jobs-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #aaa;
}

.jobs-card-meta-item svg {
    flex-shrink: 0;
}

.jobs-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #999;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jobs-card-excerpt p {
    margin: 0;
}

.jobs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.jobs-card-link:hover {
    gap: 12px;
}

.jobs-card-link:visited {
    color: #822433;
}


/* ----- No Results ----- */

.jobs-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.jobs-no-results p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}

.left-services-block h4 {
    margin-top: 29px;
}

/* ==========================================================================
   Job Filter Template Styles
   Primary colour: #6b1d2a
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero Section ----- */

.jobs-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
}

.jobs-hero-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.jobs-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1rem;
}

.job-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #242424;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

img.custom-logo {
    width: 160px;
}

.jobs-hero-subtitle {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.jobs-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(107, 29, 42, 0.5);
    padding: 10px 25px;
    border-radius: 50px;
    display: none;
}

.jobs-stat-number {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #6b1d2a;
    font-weight: 700;
}

.jobs-stat-label {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ----- Main Section Layout ----- */

.jobs-section {
    background: #242424;
    padding: 4rem 10% 6rem;
}

.jobs-section-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}


/* ----- Sidebar ----- */

.jobs-sidebar {
    width: 400px;
    min-width: 300px;
    position: sticky;
    top: 100px;
}

.jobs-sidebar-inner {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
}


/* ----- Search Block ----- */

.jobs-search-block {
    display: flex;
    align-items: center;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s ease;
}

.jobs-search-block:focus-within {
    border-color: #6b1d2a;
}

.jobs-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
}

.jobs-search-input::placeholder {
    color: #777;
}

.jobs-search-btn {
    background: #6b1d2a;
    border: none;
    color: #fff;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.jobs-search-btn:hover {
    background: #2f3b82;
}


/* ----- Filter Heading ----- */

.jobs-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.jobs-filter-heading h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.jobs-clear-filters {
    background: none;
    border: none;
    color: #6b1d2a;
    font-family: gothambook, sans-serif;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.jobs-clear-filters:hover {
    color: #5b6abf;
}


/* ----- Filter Groups ----- */

.jobs-filter-group {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.jobs-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jobs-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}

.jobs-filter-toggle h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-filter-arrow {
    display: flex;
    align-items: center;
    color: #999;
    transition: transform 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-arrow {
    transform: rotate(-90deg);
}

.jobs-filter-options {
    padding-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.jobs-filter-group.is-closed .jobs-filter-options {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
}

/* Custom scrollbar for filter lists */
.jobs-filter-options::-webkit-scrollbar {
    width: 4px;
}

.jobs-filter-options::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.jobs-filter-options::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}


/* ----- Custom Checkboxes ----- */

.jobs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.jobs-checkbox-label:hover {
    opacity: 0.85;
}

.jobs-checkbox-label input[type="checkbox"] {
    display: none;
}

.jobs-checkbox-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #555;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s ease;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom {
    background: #6b1d2a;
    border-color: #6b1d2a;
}

.jobs-checkbox-label input:checked + .jobs-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.jobs-checkbox-text {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #ccc;
}


/* ----- Can't Find Role CTA ----- */

.jobs-cant-find {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.jobs-cant-find h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #6b1d2a;
    margin: 0 0 0.5rem;
}

.jobs-cant-find p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.jobs-cant-find-form .gform_wrapper {
    margin: 0;
}

.jobs-cant-find-form input {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-family: gothambook, sans-serif !important;
    border-radius: 4px !important;
}

.jobs-cant-find-form input[type="submit"] {
    background: #6b1d2a !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Gotham', sans-serif !important;
    cursor: pointer;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    width: 100%;
}

.jobs-cant-find-form input[type="submit"]:hover {
    background: #2f3b82 !important;
}


/* ----- Job Results ----- */

.jobs-results {
    flex: 1;
    min-width: 0;
}

.jobs-results-header {
    margin-bottom: 1.5rem;
}

.jobs-results-count {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #999;
    margin: 0;
}


/* ----- Job Cards Grid ----- */

.jobs-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    transition: opacity 0.3s ease;
}

.jobs-listings-grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.jobs-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.jobs-card:hover {
    border-color: #6b1d2a;
    transform: translateY(-2px);
}

.jobs-card-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jobs-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 1rem;
}

.jobs-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.jobs-card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #aaa;
}

.jobs-card-meta-item svg {
    flex-shrink: 0;
}

.jobs-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #999;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jobs-card-excerpt p {
    margin: 0;
}


/* ----- Consultant Block on Card ----- */

.jobs-card-consultant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    margin-bottom: 1rem;
    border-top: 1px solid #2a2a2a;
}

.jobs-consultant-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.jobs-consultant-photo--placeholder {
    background: #6b1d2a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-consultant-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.jobs-consultant-name {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jobs-consultant-role {
    font-family: gothambook, sans-serif;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ----- Card Link ----- */

.jobs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.jobs-card-link:hover {
    gap: 12px;
}

.jobs-card-link:visited {
    color: #6b1d2a;
}


/* ----- No Results ----- */

.jobs-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.jobs-no-results p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .jobs-hero {
        padding: 10rem 5% 4rem;
    }

    .jobs-section {
        padding: 3rem 5% 5rem;
    }

    .jobs-sidebar {
        width: 260px;
        min-width: 260px;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .jobs-hero {
        padding: 8rem 5% 3rem;
    }

    .jobs-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .jobs-hero-subtitle {
        font-size: 16px;
    }

    .jobs-section {
        padding: 2rem 5% 4rem;
    }

    .jobs-section-inner {
        display: block;
    }

    .jobs-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-bottom: 2rem;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .jobs-card-meta {
        flex-direction: column;
        gap: 6px;
    }

    .jobs-card-title {
        font-size: 16px;
    }
}

/* ====================================================
   TN Recruits - New Homepage Sections
   Add this to the end of style.css
   ==================================================== */


/* ------ Specialist Divisions / Sector Lead-Throughs ------ */

.specialist_divisions {
    padding: 5rem 10%;
    background: #1e1e1e;
}

.specialist_divisions_header {
    color: #fff;
    font-family: gothambook;
    padding-bottom: 3rem;
}

.specialist_divisions_header h2 {
    font-size: 40px;
    line-height: 45px;
    font-family: gothambook;
    color: #fff;
}

.specialist_divisions_header p {
    color: #C9C9C9;
    font-size: 16px;
}

.divisions_grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.division_card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 2.5rem 2rem;
    width: calc(25% - 1.5rem);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.division_card:hover {
    border-color: #822433;
    transform: translateY(-4px);
    background: #1f1f1f;
}

.division_icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.division_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.division_name {
    color: #fff;
    font-family: Gotham;
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.division_description {
    color: #C9C9C9;
    font-family: gothambook;
    font-size: 14px;
    line-height: 22px;
    flex-grow: 1;
    margin: 0;
}

.division_arrow {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    color: #f0f0f0;
    font-size: 14px;
}

.division_arrow img {
    width: 24px;
    transition: transform 0.3s ease;
}

.division_card:hover .division_arrow img {
    transform: translateX(5px);
}

.division_arrow img {
    margin-left: 10px;
}

/* ------ Why Choose Us ------ */

.why_choose_us {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.inner_why_choose_us {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: auto;
}

.why_choose_left {
    width: 40%;
}

.why_choose_left h2 {
    font-family: gothambook;
    font-size: 40px;
    margin-top: -1px;
    line-height: 45px;
    color: #222222;
}

.why_choose_left p {
    font-family: gothambook;
    color: #404040;
    font-size: 16px;
    line-height: 26px;
}

.why_choose_right {
    width: 55%;
}

.usp_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    flex-direction: column;
}

.usp_item {
    width: calc(100% - 1rem);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.usp_icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.usp_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.usp_text h4 {
    font-family: Gotham;
    font-size: 18px;
    color: #242424;
    margin: 0;
    font-weight: 500;
}

.usp_text p {
    font-family: gothambook;
    font-size: 14px;
    line-height: 22px;
    color: #404040;
    margin: 0;
}


/* ------ CTA Banner ------ */

.cta_banner {
    background: #822433;
    padding: 4rem 10%;
    text-align: center;
}

.inner_cta_banner h3 {
    color: #fff;
    font-family: gothambook;
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 1rem 0;
}

.inner_cta_banner p {
    color: rgba(255, 255, 255, 0.9);
    font-family: gothambook;
    font-size: 16px;
    margin: 0 0 2rem 0;
}

.cta_button {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: Gotham;
    font-size: 16px;
    padding: 14px 40px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.cta_button:hover {
    background: #242424;
    color: #fff;
}


/* ------ Latest Vacancies ------ */

.latest_vacancies {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.section_header_with_icon {
    padding-bottom: 2rem;
}

.section_header_with_icon h2 {
    font-family: gothambook;
    font-size: 35px;
    line-height: 40px;
    color: #242424;
}

.vacancies_grid {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.vacancy_card {
    background: #fff;
    border: 1px solid #E8E8E8;
    padding: 2rem;
    width: calc(33.333% - 1.33rem);
    font-family: gothambook;
    transition: all 0.3s ease;
}

.inner_latest_news {
    max-width: 1400px;
    margin: auto;
}

.vacancy_card:hover {
    border-color: #822433;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.vacancy_title {
    font-size: 20px;
    color: #242424;
    font-family: Gotham;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
    line-height: 26px;
}

.vacancy_location {
    color: #822433;
    font-size: 14px;
    font-family: Gotham;
    margin-bottom: 1rem;
}

.vacancy_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 22px;
    margin-bottom: 1.5rem;
}

.vacancy_salary {
    font-size: 16px;
    color: #242424;
    font-family: Gotham;
    font-weight: 500;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 1.5rem;
}

.vacancy_read_more {
    display: inline-block;
    background: #822433;
    color: #fff;
    font-family: Gotham;
    font-size: 14px;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.vacancy_read_more:hover {
    background: #242424;
}


/* ------ Latest News ------ */

.latest_news {
    padding: 5rem 10%;
    background: #fff;
}

.news_grid {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.news_card {
    width: calc(25% - 1.5rem);
    font-family: gothambook;
}

.news_image {
    margin-bottom: 1rem;
    overflow: hidden;
}

.news_image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news_card:hover .news_image img {
    transform: scale(1.05);
}

.news_title {
    font-size: 18px;
    font-family: Gotham;
    color: #242424;
    line-height: 24px;
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.news_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 22px;
    margin-bottom: 1rem;
}

.news_read_more {
    display: inline-block;
    border: 1px solid #242424;
    color: #242424;
    font-family: Gotham;
    font-size: 13px;
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.news_read_more:hover {
    background: #242424;
    color: #fff;
}


/* ------ Responsive: New Sections ------ */

@media screen and (max-width: 767px) {

    .specialist_divisions {
        padding: 3rem 5% !important;
    }

    .divisions_grid {
        display: block;
    }

    .division_card {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .why_choose_us {
        padding: 3rem 5% !important;
    }

    .inner_why_choose_us {
        display: block !important;
    }

    .why_choose_left,
    .why_choose_right {
        width: 100% !important;
    }

    .why_choose_left {
        padding-bottom: 2rem;
    }

    .usp_item {
        width: 100% !important;
    }

    .cta_banner {
        padding: 3rem 5% !important;
    }

    .inner_cta_banner h3 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .latest_vacancies {
        padding: 3rem 5% !important;
    }

    .vacancies_grid {
        display: block;
    }

    .vacancy_card {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .latest_news {
        padding: 3rem 5% !important;
    }

    .news_grid {
        display: block;
    }

    .news_card {
        width: 100% !important;
        margin-bottom: 2rem;
    }

    .why_choose_left h2,
    .specialist_divisions_header h2,
    .section_header_with_icon h2 {
        font-size: 35px !important;
        line-height: 40px !important;
    }
}

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

    .specialist_divisions,
    .why_choose_us,
    .latest_vacancies,
    .latest_news {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .cta_banner {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .division_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }

    .vacancy_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }

    .news_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   Single Job Listing Styles
   Primary colour: #6b1d2a
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero ----- */

.sjl-hero {
    background: #1e1e1e;
    padding: 12rem 10% 4rem;
    position: relative;
}

.sjl-hero-inner {
    max-width: 900px;
}

.sjl-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.sjl-hero-tag {
    display: inline-block;
    background: rgba(107, 29, 42, 0.15);
    border: 1px solid rgba(107, 29, 42, 0.4);
    color: #6b1d2a;
    font-family: 'Gotham', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.sjl-hero-tag:hover,
.sjl-hero-tag:visited {
    background: rgba(107, 29, 42, 0.25);
    color: #6b1d2a;
}

.sjl-hero-title {
    font-family: 'Gotham', sans-serif;
    font-size: 42px;
    line-height: 48px;
    color: #fff;
    margin: 0 0 1.5rem;
}

.sjl-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 1.5rem;
}

.sjl-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
}

.sjl-hero-meta-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Breadcrumb */
.sjl-breadcrumb {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #888;
}

.sjl-breadcrumb a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sjl-breadcrumb a:hover {
    color: #6b1d2a;
}

.sjl-breadcrumb-sep {
    margin: 0 6px;
    color: #555;
}

.sjl-breadcrumb span:last-child {
    color: #ccc;
}


/* ----- Content Layout ----- */

.sjl-content {
    background: #f5f5f5;
    padding: 4rem 10%;
}

.sjl-content-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.sjl-main {
    flex: 1;
    min-width: 0;
}

.sjl-sidebar {
    width: 320px;
    min-width: 320px;
    position: sticky;
    top: 100px;
}


/* ----- Meta Bar ----- */

.sjl-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.sjl-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 8px 16px;
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #333;
}

.sjl-meta-pill svg {
    flex-shrink: 0;
}


/* ----- Job Description ----- */

.sjl-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #333;
    margin-bottom: 2rem;
}

.sjl-description h2,
.sjl-description h3,
.sjl-description h4 {
    font-family: 'Gotham', sans-serif;
    color: #242424;
    margin-top: 2rem;
}

.sjl-description h2 {
    font-size: 24px;
    line-height: 30px;
}

.sjl-description h3 {
    font-size: 20px;
    line-height: 26px;
}

.sjl-description ul,
.sjl-description ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.sjl-description li {
    margin-bottom: 0.5rem;
    line-height: 26px;
}

.sjl-description a {
    color: #6b1d2a;
    text-decoration: underline;
}

.sjl-description a:hover {
    color: #2f3b82;
}


/* ----- Expired Notice ----- */

.sjl-expired-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #856404;
    margin-bottom: 2rem;
}


/* ----- Apply Section ----- */

.sjl-apply-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 2rem;
    margin-top: 2rem;
}

.sjl-apply-section .application_button.button,
.sjl-apply-section .button.wp_job_manager_send_application_button {
    background: #6b1d2a !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Gotham', sans-serif !important;
    padding: 14px 30px !important;
    border-radius: 4px !important;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    transition: background 0.3s ease;
}

.sjl-apply-section .application_button.button:hover,
.sjl-apply-section .button.wp_job_manager_send_application_button:hover {
    background: #2f3b82 !important;
}


/* ----- Sidebar: Video Block ----- */

.sjl-video-block {
    margin-bottom: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
}

.sjl-video-thumb {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sjl-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
}

.sjl-video-title {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0 0 1rem;
}

.sjl-play-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.sjl-play-btn:hover {
    transform: scale(1.1);
}

.sjl-play-btn svg {
    background: rgba(107, 29, 42, 0.8);
    border-radius: 50%;
    padding: 10px;
    width: 50px;
    height: 50px;
}

.sjl-video-caption {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #fff;
}


/* ----- Sidebar: Consultant Block ----- */

.sjl-consultant-block {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sjl-consultant-heading {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b1d2a;
    margin: 0 0 1rem;
}

.sjl-consultant-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sjl-consultant-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sjl-consultant-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sjl-consultant-name {
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    color: #242424;
}

.sjl-consultant-role {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #888;
}

.sjl-consultant-socials {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.sjl-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.sjl-social-link:hover {
    background: #6b1d2a;
    color: #fff;
}

.sjl-social-link:hover svg {
    fill: #fff;
    stroke: #fff;
}

.sjl-consultant-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.sjl-consultant-profile-link:hover {
    gap: 10px;
}

.sjl-consultant-profile-link:visited {
    color: #6b1d2a;
}


/* ----- Sidebar: Quick Apply CTA ----- */

.sjl-sidebar-apply {
    background: #1e1e1e;
    border-radius: 6px;
    padding: 1.5rem;
}

.sjl-sidebar-apply h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0 0 0.5rem;
}

.sjl-sidebar-apply p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.sjl-apply-btn {
    display: block;
    text-align: center;
    background: #6b1d2a;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.sjl-apply-btn:hover {
    background: #2f3b82;
}

.sjl-apply-btn:visited {
    color: #fff;
}


/* ----- Related Jobs ----- */

.sjl-related {
    background: #242424;
    padding: 4rem 10% 5rem;
}

.sjl-related-heading {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #fff;
    margin: 0 0 2rem;
}

.sjl-related-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep scroll functionality */
.sjl-related-scroll::-webkit-scrollbar {
    height: 6px;
}

.sjl-related-scroll::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.sjl-related-scroll::-webkit-scrollbar-thumb {
    background: #6b1d2a;
    border-radius: 3px;
}

.sjl-related-card {
    min-width: 320px;
    max-width: 360px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
}

.sjl-related-card:hover {
    border-color: #6b1d2a;
}

.sjl-related-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 17px;
    line-height: 22px;
    color: #fff;
    margin: 0 0 0.75rem;
}

.sjl-related-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.sjl-related-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: gothamlight, sans-serif;
    font-size: 12px;
    color: #aaa;
}

.sjl-related-card-meta span svg {
    flex-shrink: 0;
}

.sjl-related-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #999;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sjl-related-card-excerpt p {
    margin: 0;
}

.sjl-related-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.sjl-related-card-link:hover {
    gap: 12px;
}

.sjl-related-card-link:visited {
    color: #6b1d2a;
}

/* ====================================
   ABOUT PAGE STYLES
   ==================================== */

/* About Banner Section */
.about-banner .banner_left_text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

/* About Intro Section */
.about_intro {
    padding: 5rem 10%;
    background: #f8f9fa;
}

.inner_about_intro {
    max-width: 1400px;
    margin: 0 auto;
}

.about_intro_content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #333333;
}

.about_intro_content h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.about_intro_content p {
    margin-bottom: 1.5rem;
}

/* How We Help Section */
.how_we_help {
    padding: 5rem 10%;
    background: #ffffff;
}

.inner_how_we_help {
    max-width: 1400px;
    margin: 0 auto;
}

.how_we_help_header {
    text-align: center;
    margin-bottom: 4rem;
}

.how_we_help_header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.how_we_help_header p {
    font-size: 1.125rem;
    color: #666666;
    max-width: 800px;
    margin: 0 auto;
}

.help_points_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.help_point_item {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.help_point_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.help_point_icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.help_point_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.help_point_item h3 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.help_point_item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #666666;
}

.help_closing_text {
    text-align: center;
    font-size: 1.125rem;
    color: #333333;
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 12px;
}

/* Our Values Section */
.our_values {
    padding: 5rem 10%;
    background: linear-gradient(135deg, #6b1d2a 0%, #551724 100%);
    color: #ffffff;
}

.inner_our_values {
    max-width: 1400px;
    margin: 0 auto;
}

.values_header {
    text-align: center;
    margin-bottom: 4rem;
}

.values_header h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.values_header p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto;
}

.values_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.value_card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, background 0.3s ease;
}

.value_card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.value_icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
}

.value_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.value_name {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.value_description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* Team Section */
.team_section {
    padding: 5rem 10%;
    background: #ffffff;
}

.inner_team_section {
    max-width: 1400px;
    margin: 0 auto;
}

.team_header {
    text-align: center;
    margin-bottom: 4rem;
}

.team_header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.team_header p {
    font-size: 1.125rem;
    color: #666666;
    max-width: 800px;
    margin: 0 auto;
}

.team_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.team_member_card {
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team_member_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.team_member_image {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: #6b1d2a;
}

.team_member_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.team_member_card:hover .team_member_image img {
    transform: scale(1.05);
}

.team_member_info {
    padding: 2rem;
}

.member_name {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.member_role {
    font-size: 1rem;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 1rem;
}

.member_bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666666;
    margin-bottom: 1rem;
}

.member_linkedin {
    display: inline-block;
    transition: transform 0.3s ease;
}

.member_linkedin img {
    width: 30px;
    height: 30px;
}

.member_linkedin:hover {
    transform: translateY(-2px);
}

.team_cta {
    text-align: center;
    margin-top: 3rem;
}

/* Stats Section */
.stats_section {
    padding: 5rem 10%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: none;
}

.inner_stats_section {
    max-width: 1400px;
    margin: 0 auto;
}

.stats_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
}

.stat_item {
    text-align: center;
}

.stat_number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat_label {
    font-size: 1.125rem;
    color: #666666;
    font-weight: 500;
}

/* Testimonials About Section */
.testimonials_about {
    padding: 5rem 10%;
    background: #ffffff;
}

.inner_testimonials_about {
    max-width: 1400px;
    margin: 0 auto;
}

.testimonials_header {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials_header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
}

.testimonials_slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.testimonial_slide {
    background: #f8f9fa;
    padding: 3rem;
    border-radius: 12px;
    border-left: 4px solid #6366f1;
}

.quote_icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
    opacity: 0.3;
}

.quote_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.testimonial_text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 2rem;
    font-style: italic;
}

.author_name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.author_position {
    font-size: 0.95rem;
    color: #666666;
}

/* Accreditations Section */
.accreditations_section {
    padding: 5rem 10%;
    background: #f8f9fa;
}

.inner_accreditations {
    max-width: 1400px;
    margin: 0 auto;
}

.accreditations_header {
    text-align: center;
    margin-bottom: 3rem;
}

.accreditations_header h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.accreditations_header p {
    font-size: 1.125rem;
    color: #666666;
}

.accreditations_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    align-items: center;
}

.accreditation_item {
    text-align: center;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accreditation_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.accreditation_item img {
    max-width: 120px;
    max-height: 80px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.accreditation_item:hover img {
    filter: grayscale(0%);
}

/* CTA Buttons Group */
.cta_buttons_group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta_button.secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.cta_button.secondary:hover {
    background: #ffffff;
    color: #6366f1;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .about-banner .banner_left_text h1 {
        font-size: 2.5rem;
    }
    
    .about_intro,
    .how_we_help,
    .our_values,
    .team_section,
    .stats_section,
    .testimonials_about,
    .accreditations_section {
        padding: 3rem 5%;
    }
    
    .how_we_help_header h2,
    .values_header h2,
    .team_header h2,
    .testimonials_header h2,
    .accreditations_header h2,
    .about_intro_content h2 {
        font-size: 2rem;
    }
    
    .help_points_grid,
    .values_grid,
    .team_grid,
    .testimonials_slider {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .stats_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .stat_number {
        font-size: 2.5rem;
    }
    
    .team_member_image {
        height: 300px;
    }
    
    .cta_buttons_group {
        flex-direction: column;
    }
    
    .cta_button {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .about-banner .banner_left_text h1 {
        font-size: 2rem;
    }
    
    .stats_grid {
        grid-template-columns: 1fr;
    }
    
    .accreditations_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ==========================================================================
   Blog Page Template Styles
   Matches TN Recruits design system
   Primary colour: #6b1d2a
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Blog Hero Section ----- */

.blog-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.blog-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1rem;
}

.blog-hero p {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    color: #C9C9C9;
    margin: 0;
}

.blog-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.blog-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #242424;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}


/* ----- Main Blog Section ----- */

.blog-section {
    background: #f5f5f5;
    padding: 4rem 10% 6rem;
}

.blog-section-inner {
    max-width: 1400px;
    margin: 0 auto;
}


/* ----- Filters Bar ----- */

.blog-filters {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.blog-filter-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.blog-search-block {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    min-width: 300px;
    transition: border-color 0.3s ease;
}

.blog-search-block:focus-within {
    border-color: #6b1d2a;
}

.blog-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #333;
    font-family: gothambook, sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    outline: none;
}

.blog-search-input::placeholder {
    color: #999;
}

.blog-search-btn {
    background: #6b1d2a;
    border: none;
    color: #fff;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.blog-search-btn:hover {
    background: #2f3b82;
}

.blog-category-filter {
    min-width: 200px;
}

.blog-category-select {
    width: 100%;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333;
    font-family: gothambook, sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease;
}

.blog-category-select:focus {
    border-color: #6b1d2a;
}

.blog-clear-filters {
    background: none;
    border: none;
    color: #6b1d2a;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.blog-clear-filters:hover {
    color: #2f3b82;
}


/* ----- Results Header ----- */

.blog-results-header {
    margin-bottom: 2rem;
}

.blog-results-count {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #666;
    margin: 0;
}

.blog-results-count strong {
    color: #242424;
    font-family: 'Gotham', sans-serif;
}


/* ----- Blog Grid ----- */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.blog-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    border-color: #6b1d2a;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.blog-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-image {
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
}

.blog-card-image a {
    display: block;
    line-height: 0;
}

.blog-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-categories {
    margin-bottom: 0.75rem;
}

.blog-card-category {
    display: inline-block;
    background: rgba(107, 29, 42, 0.1);
    color: #6b1d2a;
    font-family: 'Gotham', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 3px;
}

.blog-card-title {
    margin: 0 0 0.75rem 0;
}

.blog-card-title a {
    font-family: 'Gotham', sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #242424;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.blog-card-title a:hover {
    color: #6b1d2a;
}

.blog-card-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.blog-card-date,
.blog-card-reading-time {
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #888;
}

.blog-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    margin-bottom: 1.5rem;
    flex: 1;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.blog-card-link:hover {
    gap: 10px;
}

.blog-card-link:visited {
    color: #6b1d2a;
}


/* ----- No Results ----- */

.blog-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.blog-no-results p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #666;
    margin: 0;
}


/* ----- Pagination ----- */

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
}

.blog-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0 12px;
}

.blog-pagination .page-numbers:hover {
    border-color: #6b1d2a;
    color: #6b1d2a;
}

.blog-pagination .page-numbers.current {
    background: #6b1d2a;
    border-color: #6b1d2a;
    color: #fff;
}

.blog-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

.blog-pagination .page-numbers.dots:hover {
    border: none;
    color: #333;
}

.blog-pagination .prev,
.blog-pagination .next {
    padding: 0;
}

.blog-pagination .prev svg,
.blog-pagination .next svg {
    display: block;
}

/* ==========================================================================
   TN Recruits - Sector Page Template Styles
   Add this to the end of style.css
   Primary colour: #822433
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Sector Hero Section ----- */

.sector-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sector-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.sector-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.sector-hero-subtitle {
    font-family: 'Gotham', sans-serif;
    font-size: 22px;
    line-height: 30px;
    color: #822433;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.sector-hero-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.sector-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sector-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

.sector-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


/* ----- About This Sector Section ----- */

.sector-about {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.sector-about-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.sector-about-left {
    width: 55%;
}

.sector-about-left h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #242424;
    margin: 0 0 1.5rem;
}

.sector-about-left p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #404040;
    margin-bottom: 1.5rem;
}

.sector-about-right {
    width: 40%;
}

.sector-about-right img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}


/* ----- Why Choose Section ----- */

.sector-why-choose {
    padding: 5rem 0;
    background: #242424;
}

.sector-why-choose-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sector-why-choose-header {
    text-align: center;
    margin-bottom: 3rem;
}

.sector-why-choose-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0 0 1rem;
}

.sector-why-choose-header p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.sector-why-choose-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.sector-why-choose-item {
    width: calc(50% - 1rem);
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    padding: 2rem;
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

.sector-why-choose-item:hover {
    border-color: #822433;
}

.sector-why-choose-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.sector-why-choose-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sector-why-choose-text h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    color: #fff;
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.sector-why-choose-text p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #C9C9C9;
    margin: 0;
}


/* ----- Services/Specialisms Section ----- */

.sector-services {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.sector-services-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sector-services-header {
    margin-bottom: 3rem;
}

.sector-services-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #242424;
    margin: 0 0 1rem;
}

.sector-services-header p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #404040;
    margin: 0;
}

.sector-services-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sector-service-item {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    border-top: 1px solid #D9D9D9;
    padding: 2.5rem 0;
    transition: all 0.3s ease;
}

.sector-service-item:last-child {
    border-bottom: 1px solid #D9D9D9;
}

.sector-service-item:hover {
    background: #fff;
    margin: 0 -2rem;
    padding: 2.5rem 2rem;
    border-radius: 6px;
}

.sector-service-number {
    font-family: 'Gotham', sans-serif;
    font-size: 40px;
    line-height: 40px;
    color: #822433;
    font-weight: 500;
    width: 80px;
    flex-shrink: 0;
}

.sector-service-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 24px;
    line-height: 30px;
    color: #242424;
    margin: 0 0 0.75rem;
}

.sector-service-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #404040;
    margin: 0;
}


/* ----- Latest Jobs Section ----- */

.sector-jobs {
    padding: 5rem 10%;
    background: #fff;
}

.sector-jobs-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sector-jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.sector-jobs-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #242424;
    margin: 0;
}

.sector-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.sector-view-all:hover {
    gap: 12px;
}

.sector-view-all:visited {
    color: #822433;
}

.sector-view-all img {
    width: 20px;
    height: 20px;
}

.sector-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sector-job-card {
    background: #f5f5f5;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sector-job-card:hover {
    border-color: #822433;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.sector-job-title {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #242424;
    margin: 0 0 1rem;
    font-weight: 500;
}

.sector-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

.sector-job-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #666;
}

.sector-job-meta-item img {
    width: 14px;
    height: 14px;
}

.sector-job-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    margin-bottom: 1.5rem;
    flex: 1;
}

.sector-job-salary {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #242424;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E8E8E8;
    font-weight: 500;
}

.sector-job-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.sector-job-link:hover {
    gap: 12px;
}

.sector-job-link:visited {
    color: #822433;
}

.sector-job-link img {
    width: 20px;
    height: 20px;
}

.sector-no-jobs {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem;
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #666;
}

.sector-no-jobs a {
    color: #822433;
    text-decoration: underline;
}


/* ----- Case Studies Section ----- */

.sector-case-studies {
    padding: 5rem 10%;
    background: #242424;
}

.sector-case-studies-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sector-case-studies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.sector-case-studies-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0;
}

.sector-case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sector-case-study-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sector-case-study-card:hover {
    border-color: #822433;
    transform: translateY(-2px);
}

.sector-case-study-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.sector-case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sector-case-study-card:hover .sector-case-study-image img {
    transform: scale(1.05);
}

.sector-case-study-content {
    padding: 1.5rem;
}

.sector-case-study-content h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin: 0 0 1rem;
    font-weight: 500;
}

.sector-case-study-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #C9C9C9;
    margin-bottom: 1.5rem;
}

.sector-case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.sector-case-study-link:hover {
    gap: 12px;
}

.sector-case-study-link:visited {
    color: #822433;
}

.sector-case-study-link img {
    width: 20px;
    height: 20px;
}

.sector-no-case-studies {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem;
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #C9C9C9;
}


/* ----- Latest Articles Section ----- */

.sector-articles {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.sector-articles-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.sector-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.sector-articles-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #242424;
    margin: 0;
}

.sector-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.sector-article-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sector-article-card:hover {
    border-color: #822433;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.sector-article-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.sector-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sector-article-card:hover .sector-article-image img {
    transform: scale(1.05);
}

.sector-article-content {
    padding: 1.5rem;
}

.sector-article-content h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #242424;
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.sector-article-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    margin-bottom: 1rem;
}

.sector-article-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.sector-article-link:hover {
    gap: 12px;
}

.sector-article-link:visited {
    color: #822433;
}

.sector-article-link img {
    width: 18px;
    height: 18px;
}

.sector-no-articles {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem;
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #666;
}


/* ----- CTA Section ----- */

.sector-cta {
    padding: 5rem 10%;
    background: #822433;
    text-align: center;
}

.sector-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.sector-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.sector-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
}

.sector-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sector-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sector-cta-btn-primary:hover {
    background: #242424;
    color: #fff;
}

.sector-cta-btn-primary:visited {
    color: #822433;
}

.sector-cta-btn-primary:hover:visited {
    color: #fff;
}

.left_tetsimonia_block {
    display: none;
}

.sector-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sector-cta-btn-secondary:hover {
    background: #fff;
    color: #822433;
}

.sector-cta-btn-secondary:visited {
    color: #fff;
}

.sector-cta-btn-secondary:hover:visited {
    color: #822433;
}

/* ====================================================
   TN Recruits Client Page - Additional Styles
   Add this to the end of style.css
   ==================================================== */

/* Consultant Cards Styling */
.consultant-card {
    text-align: center;
}

.consultant-card .consultant_photo {
    margin-bottom: 1.5rem;
}

.consultant-card .consultant_photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.consultant-card .consultant_role {
    color: #822433;
    font-family: 'Gotham';
    font-size: 14px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.consultant-card .division_name {
    margin-bottom: 0.5rem;
}

.consultant-card .consultant_contact {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2a2a;
}

/* Temps Key Points Styling */
.temps_key_points_list {
    margin-top: 2rem;
}

.temps_point_item {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.temps_point_item h4 {
    font-family: 'Gotham';
    font-size: 18px;
    color: #242424;
    margin: 0 0 0.5rem 0;
}

.temps_point_item p {
    font-family: 'gothambook';
    font-size: 14px;
    line-height: 22px;
    color: #404040;
    margin: 0;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .consultant-card .consultant_photo img {
        width: 100px;
        height: 100px;
    }
    
    .temps_point_item {
        padding: 1rem;
    }
}


/* ==========================================================================
   Responsive - Sector Page
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .sector-hero {
        padding: 10rem 5% 4rem;
    }

    .sector-about,
    .sector-why-choose,
    .sector-services,
    .sector-jobs,
    .sector-case-studies,
    .sector-articles,
    .sector-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .sector-jobs-grid,
    .sector-case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sector-articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sector-why-choose-item {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .sector-hero {
        padding: 8rem 5% 3rem;
    }

    .sector-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .sector-hero-subtitle {
        font-size: 18px;
        line-height: 24px;
    }

    .sector-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    .sector-about,
    .sector-why-choose,
    .sector-services,
    .sector-jobs,
    .sector-case-studies,
    .sector-articles,
    .sector-cta {
        padding: 3rem 5%;
    }

    .sector-about-inner {
        display: block;
        gap: 2rem;
    }

    .sector-about-left,
    .sector-about-right {
        width: 100%;
    }

    .sector-about-left h2,
    .sector-why-choose-header h2,
    .sector-services-header h2,
    .sector-jobs-header h2,
    .sector-case-studies-header h2,
    .sector-articles-header h2,
    .sector-cta-content h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .sector-about-right {
        margin-top: 2rem;
    }

    .sector-why-choose-grid {
        display: block;
    }

    .sector-why-choose-item {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .sector-service-item {
        display: block;
    }

    .sector-service-number {
        width: 100%;
        margin-bottom: 1rem;
    }

    .sector-jobs-header,
    .sector-case-studies-header,
    .sector-articles-header {
        display: block;
    }

    .sector-view-all {
        display: inline-flex;
        margin-top: 1rem;
    }

    .sector-jobs-grid,
    .sector-case-studies-grid,
    .sector-articles-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sector-cta-buttons {
        flex-direction: column;
    }

    .sector-cta-btn-primary,
    .sector-cta-btn-secondary {
        width: 100%;
    }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .blog-hero {
        padding: 10rem 5% 4rem;
    }

    .blog-section {
        padding: 3rem 5% 5rem;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .blog-hero {
        padding: 8rem 5% 3rem;
    }

    .blog-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .blog-hero p {
        font-size: 16px;
    }

    .blog-section {
        padding: 2rem 5% 4rem;
    }

    .blog-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search-block {
        min-width: unset;
        width: 100%;
    }

    .blog-category-filter {
        width: 100%;
    }

    .blog-clear-filters {
        text-align: center;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-card-image img {
        height: 200px;
    }

    .blog-card-title a {
        font-size: 18px;
        line-height: 24px;
    }

    .blog-pagination {
        flex-wrap: wrap;
    }

    .blog-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .sjl-hero {
        padding: 10rem 5% 3rem;
    }

    .sjl-content {
        padding: 3rem 5%;
    }

    .sjl-sidebar {
        width: 280px;
        min-width: 280px;
    }

    .sjl-related {
        padding: 3rem 5% 4rem;
    }
}

@media screen and (max-width: 768px) {
    .sjl-hero {
        padding: 8rem 5% 3rem;
    }

    .sjl-hero-title {
        font-size: 28px;
        line-height: 34px;
    }

    .sjl-hero-meta {
        flex-direction: column;
        gap: 8px;
    }

    .sjl-content {
        padding: 2rem 5%;
    }

    .sjl-content-inner {
        display: block;
    }

    .sjl-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-top: 2rem;
    }

    .sjl-meta-bar {
        flex-direction: column;
        gap: 6px;
    }

    .sjl-related {
        padding: 3rem 5% 3rem;
    }

    .sjl-related-heading {
        font-size: 22px;
    }

    .sjl-related-card {
        min-width: 280px;
    }

    .sjl-consultant-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sjl-consultant-socials {
        justify-content: center;
    }

    .sjl-consultant-profile-link {
        justify-content: center;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .jobs-hero {
        padding: 10rem 5% 4rem;
    }

    .jobs-section {
        padding: 3rem 5% 5rem;
    }

    .jobs-sidebar {
        width: 260px;
        min-width: 260px;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .jobs-hero {
        padding: 8rem 5% 3rem;
    }

    .jobs-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .jobs-hero-subtitle {
        font-size: 16px;
    }

    .jobs-section {
        padding: 2rem 5% 4rem;
    }

    .jobs-section-inner {
        display: block;
    }

    .jobs-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-bottom: 2rem;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .jobs-card-meta {
        flex-direction: column;
        gap: 6px;
    }

    .jobs-card-title {
        font-size: 16px;
    }
}







@media screen and (max-width:992px){
    .privacy-policy article, article#post-525 {
    padding: 4rem 5% 3rem !important;
}
  .sub-menu {
    position: relative !important;
}
.menu li.menu-item-has-children>a::after {
    left: auto !important;
    width: auto !important;
    display: block !important;
    text-align: right !important;
    position: absolute !important;
    top: 10px !important;
    right: 30px !important;
    cursor: none !important;
    font-size: 16px;
    padding-left: 100% !important;
    z-index: -1;
}
.sub-menu {
    padding-left: 20px;
}
.sub-menu li {
    padding: 0 !important;
}
}

@media screen and (max-width: 768px){
	.talk_tothem {
	padding: 3rem 5% !important;
}
	.inner_talk_tothem {
	display: block !important;
}
	.form_contact,.caal_email{
		width: 100% !important;
	}
	.main_call_title {
		display: block !important;
	width: 100% !important;
}
	.team_email a {
	font-size: 19px !important;
}
	.form_contact {
	padding: 1rem !important;
}
	.application_button.button {
	margin-bottom: 2rem !important;
}
	.jobs_page_row .job-widget-card {
	padding: 1rem !important;
}
	.case_studies_banner {
	padding:10rem 5% 3rem;
	background: #1e1e1e;
	text-align: center;
	color: #fff;
}
.single-job_listing .page_title_case {
	font-size: 35px !important;
	line-height: 40px;
}
	.custom-logo {
	position: relative;
	z-index: 9;
}
	.book_call {
	padding-bottom: 3rem !important;
}
	.bottom-footer {
	padding-top: 3rem !important;
}
	.left-services-block h4,.left-success_stories h4 {
	margin-top: 0;
}
    .search_jobs {
    display: block !important;
}
.left_book_call {
    font-size: 30px !important;
}
    .hexagon-img {
    display: none;
}
.tab-content p > img {
    height: auto !important;
    padding: 2rem 0;
}
	.left-services-block img, .left-success_stories img {
	height: auto !important;
}
	.left-success_stories {
	width: 100% !important;
}
	#headCV,
    #headCVptbr {
	padding: 2rem 5% !important;
	width: auto !important;
}
    .button.wp_job_manager_send_application_button {
        margin-bottom: 0 !important;
    }
    .post-content-row {
	display: block !important;
	padding: 1rem 5% !important;
}
    .jobs_page_row .job-widget-card {
        width: 100% !important;
    }
    .jobs_page_row .job_listings {
        display: block !important;
    }
    .jobs_page_row.job-page-search {
        padding: 3rem 5% 3rem !important;
    }
    .right_mission_about, .left_mission_about {
        width: 100% !important;
    }
    .page_title_about {
        font-size: 50px !important;
        line-height: 50px;
    }
    .pcr-sidebar, .pcr-main {
        width: 100% !important;
    }
    .main_content_case {
	padding: 2rem 5% 0 !important;
	display: block !important;
}
    .our_mission_about {
        padding: 1rem 5% 3rem!important;
        display: block !important;
    }
    .about_banner {
        padding: 7rem 5% 3rem !important;
    }
    .about_banner_desc{
        width: 100% !important;
    }
    .column-footer {
        width: 100% !important;
        padding-bottom: 2rem;
    }
    .bottom-footer {
        display: block !important;
    }
    .book_call {
        align-items: center;
    }
    #colophon {
        padding: 3rem 5% 0rem !important;
    }
    .casestudy_data {
        width: 100% !important;
        padding-bottom: 3rem;
    }
    .right_case_study {
        display: block !important;
        padding-top: 3rem;
        width: 100% !important;
    }
    .success_Stories_bottom .slick-next.slick-arrow {
        left: 15% !important;
    }
    .right_succesS_stories, .left_tetsimonia_block {
        width: 100% !important;
    }
    .inner_success_stories {
        padding: 0 5% !important;
        display: block !important;
    }
    .success_Stories_bottom {
        display: block;
        align-items: center;
        padding: 3rem 5% 0rem 5% !important;
        justify-content: space-between;
    }
    .success_stories_top {
        padding: 3rem 0% 0 !important;
    }
    .our_mission {
        padding: 3rem 5% !important;
    }
    .inner_our_misison {
        display: block !important;
    }
    .banner_right_block {
        text-align: center !important;
    }
    .desc_repeater,.repater_title,.years{
        padding-bottom: 1rem;
        width: 100% !important;
    }
    .our_services {
        padding: 3rem 5% !important;
    }
    .inner_serices_repater {
        display: block !important;
    }
    .right_services-block, .left-services-block,
    .right-mission-block,.left-mission-block {
        width: 100% !important;
    }
    .services_repater {
        padding-top: 3rem !important;
    }
    .inner_our_services {
        display: block !important;
    }
    .right_mission_about {
        padding-top: 2rem;
    }
    .banner_left_text h1,
    .right_services-block h2,
    .right-mission-block h2,
    .left_mission_about h2 {
        font-size: 35px !important;
        line-height: 40px !important;
    }
    .right_talemt_block, .left_marketing_tal {
        width: 100% !important;
    }
    .left_marketing_tal {
        padding-bottom: 2rem;
    }
    .testimonial_quote_text p {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .makes-different-row {
        padding: 3rem 5% !important;
    }
    .content-tab-row.row {
        padding-top: 0 !important;
    }
    .left_btn button {
        font-size: 16px;
        text-align: left;
    }
    .top_testimonial_img img {
        height: auto !important;
    }
    .top_testimonial_img {
        padding-bottom: 2rem !important;
    }
    .testimonial_quote_text, .testimonial_quote, .tets-authorname, .tets-author {
        padding-left: 0 !important;
    }
    .left_marketing_tal h2 {
        font-size: 35px !important;
        line-height: 40px !important;
        margin-top: 0;
    }
    .marketing_talent {
        padding: 3rem 5% !important;
        display: block !important;
    }
    .titele_desc {
        padding-left: 1rem;
    }
    .member_image {
        padding-bottom: 1rem;
    }
    .member_image img {
        height: auto !important;
    }
    .left_team_title {
        padding-bottom: 2rem;
    }
    .team_data {
        width: 100% !important;
    }
    .out_team {
        padding: 3rem 5% 1px !important;
        display: block !important;
    }
    .right_allteam,.left_team_title{
        width: 100% !important;
        display: block !important;
    }
    .generation_title {
        font-size: 20px !important;
    }
    .left-generation-block h2 {
        font-size: 35px !important;
        line-height: 40px !important;
        margin: 0;
    }
    .right-generation-block {
        padding-top: 2rem;
    }
    .generation-talent {
        padding: 3rem 5% !important;
        display: block !important;
    }
    .right-generation-block, .left-generation-block{
        width: 100% !important;
    }
    #about_values .right_services-block {
        text-align: left !important;
        font-size: 35px !important;
        line-height: 40px !important;
        padding-top: 1rem;
    }
    .inner_main_banner {
        display: block !important;
    }
    .banner_right_block, .banner_left_block {
        width: 100% !important;
    }
 .main-banner {
	padding: 8rem 5% 0 5% !important;
}
    header#masthead {
        display: block !important;
    }
    .header-right-nav , .site-branding{
        width: auto !important;
    }
    .desktop_navigation {
        display: none;
    }
    .mobile-menu .hamburger {
        padding: 5px;
    }
    .mobile-menu {
        display: block !important;
        text-align: right;
        width: 100%;
        position: absolute;
        top: 22%;
        right: 5%;
    }
    .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
        background-color: #fff !important;
    }
    .tab-content h3, .tab-content > p {
        font-size: 13px;
        margin: 0;
    }
    .Case_Studies {
        padding: 3rem 5% 0 !important;
    }
    .case_title_desc {
        display: block;
        padding-bottom: 3rem !important;
    }
    .left_case_title,.left_case_title{
        width: 100% !important;
    }
    .right_case_studies, .big_left_case_study {
        width: 100% !important;
        display: block !important;
    }
    .all_case_studies {
        display: block !important;
    }
    .tab {
        width: 25% !important;
    }
    .tab_content_right {
        width: 60% !important;
    }
    .Download_Our_Ebook {
        padding: 3rem 5% 3rem !important;
        display: block !important;
    }
    .right_download_ebbok, .download_left_ebook {
        width: 100% !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }
    .download_left_ebook {
        padding: 1rem !important;
    }
    .download_left_ebook h2 {
        font-size: 30px !important;
        line-height: 35px !important;
    }
    .page_title_case {
        font-size: 45px !important;
        line-height: 50px;
    }
    .all_case_page .case_study_image img {
        height: auto !important;
    }
    .case_study_image img {
        height: auto !important;
    }
    .all_case_page .casestudy_data {
        margin-bottom: 0rem !important;
    }
    .all_case_page {
        padding: 3rem 5% 0 !important;
        display: block !important;
    }
}

@media screen and (min-width:768px) and (max-width:1300px){
    .right_allteam {
        width: 80% !important;
    }
    .main-banner {
        padding: 5rem 0 0 5 !important;
    }
    .Download_Our_Ebook{
    padding-bottom: 5rem !important;
}
    .our_mission,.our_services,
    .generation-talent,
    .our_services,
    .our_mission_about,
    .Download_Our_Ebook,
    .Case_Studies,
    .makes-different-row,
    .marketing_talent,
    .all_case_page,
    .jobs_page_row.job-page-search,
    .post-content-row{
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    #colophon {
        padding: 5rem 5% 2rem !important;
    }
    .success_Stories_bottom {
        padding: 5rem 1% 5rem 10% !important;
    }
    .desktop_navigation {
        width: 65% !important;
    }
    .header-right-nav {
        width: 30% !important;
    }
    #primary-menu li a {
        padding: 0 .5rem !important;
    }
} 

/* Animated Circle in Hero */
.animated-circle {
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 700px;
    height: 700px;
    border: 3px solid rgb(255 255 255 / 20%);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spinCircle 3s linear infinite;
    z-index: 2;
}

.tn-home-gradient-02 {
    background: #242424;
    background: linear-gradient(313deg, #2f3668 -2%, rgba(16, 16, 16, 0) 40%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.footer-social-media img {
    width: 50px;
}



@keyframes spinCircle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Banner CTA Buttons */
.banner_cta_buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    position: relative;
    z-index: 5;
}

.banner_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 230px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.banner_btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.banner_btn:hover img {
    transform: translateX(3px) translateY(-3px);
}

.banner_btn.primary {
    background: #1e1e1e3b;
    color: #ffffff;
    border: solid 1px #822433;
}

.banner_btn.primary:hover {
    background: #1e1e1e;
        transform: rotate(-25deg);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.banner_btn.secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #6366f1;
    background: #1e1e1e3b;
}

.banner_btn.secondary:hover {
    background: #1e1e1e;
        transform: rotate(-25deg);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .animated-circle {
        width: 100px;
        height: 100px;
        bottom: 40px;
        right: 40px;
        border-width: 2px;
    }
    
    .banner_cta_buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .banner_btn {
        padding: 0.875rem 1.5rem;
        font-size: 15px;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .animated-circle {
        width: 80px;
        height: 80px;
        bottom: 30px;
        right: 30px;
    }
}

/* ------ Why Choose Us ------ */

.inner_why_choose_us {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.why_choose_left {
    width: 40%;
}

.why_choose_left h2 {
    font-family: gothambook;
    color: #242424;
    font-size: 40px;
    line-height: 45px;
}

.why_choose_left p {
    font-family: gothambook;
    color: #404040;
    font-size: 16px;
    line-height: 26px;
}

.why_choose_right {
    width: 55%;
}

.usp_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}


.usp_icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.usp_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.usp_text h4 {
    font-family: Gotham;
    font-size: 18px;
    color: #242424;
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

.usp_text p {
    font-family: gothambook;
    font-size: 14px;
    line-height: 22px;
    color: #404040;
    margin: 0;
}


/* ------ CTA Banner ------ */

.cta_banner {
    background: #822433;
    padding: 4rem 10%;
    text-align: center;
}

.inner_cta_banner h3 {
    color: #fff;
    font-family: gothambook;
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 1rem 0;
}

.inner_cta_banner p {
    color: rgba(255, 255, 255, 0.9);
    font-family: gothambook;
    font-size: 16px;
    margin: 0 0 2rem 0;
}

.cta_button {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: Gotham;
    font-size: 16px;
    padding: 14px 40px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.cta_button:hover {
    background: #242424;
    color: #fff;
}


/* ------ Latest Vacancies ------ */

.latest_vacancies {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.section_header_with_icon {
    padding-bottom: 2rem;
}

.section_header_with_icon h2 {
    font-family: gothambook;
    font-size: 35px;
    line-height: 40px;
    color: #242424;
}

.vacancy_card {
    background: #fff;
    border: 1px solid #E8E8E8;
    padding: 2rem;
    width: calc(33.333% - 1.33rem);
    font-family: gothambook;
    transition: all 0.3s ease;
}

.vacancy_card:hover {
    border-color: #822433;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.vacancy_title {
    font-size: 20px;
    color: #242424;
    font-family: Gotham;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
    line-height: 26px;
}

.vacancy_location {
    color: #822433;
    font-size: 14px;
    font-family: Gotham;
    margin-bottom: 1rem;
}

.vacancy_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 22px;
    margin-bottom: 1.5rem;
}

.vacancy_salary {
    font-size: 16px;
    color: #242424;
    font-family: Gotham;
    font-weight: 500;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 1.5rem;
}

.vacancy_read_more {
    display: inline-block;
    background: #822433;
    color: #fff;
    font-family: Gotham;
    font-size: 14px;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.vacancy_read_more:hover {
    background: #242424;
}


/* ------ Latest News ------ */

.latest_news {
    padding: 5rem 10%;
    background: #fff;
}


.news_card {
    width: calc(31% - 1.5rem);
    font-family: gothambook;
}

.news_image {
    margin-bottom: 1rem;
    overflow: hidden;
}

.news_image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news_card:hover .news_image img {
    transform: scale(1.05);
}

.news_title {
    font-size: 18px;
    font-family: Gotham;
    color: #242424;
    line-height: 24px;
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.news_excerpt {
    font-size: 14px;
    color: #666;
    line-height: 22px;
    margin-bottom: 1rem;
}

.news_read_more {
    display: inline-block;
    border: 1px solid #242424;
    color: #242424;
    font-family: Gotham;
    font-size: 13px;
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.news_read_more:hover {
    background: #242424;
    color: #fff;
}


/* ------ Responsive: New Sections ------ */

@media screen and (max-width: 767px) {

    .specialist_divisions {
        padding: 3rem 5% !important;
    }

    .divisions_grid {
        display: block;
    }

    .division_card {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .why_choose_us {
        padding: 3rem 5% !important;
    }

    .inner_why_choose_us {
        display: block !important;
    }

    .why_choose_left,
    .why_choose_right {
        width: 100% !important;
    }

    .why_choose_left {
        padding-bottom: 2rem;
    }

    .usp_item {
        width: 100% !important;
    }

    .cta_banner {
        padding: 3rem 5% !important;
    }

    .inner_cta_banner h3 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .latest_vacancies {
        padding: 3rem 5% !important;
    }

    .vacancies_grid {
        display: block;
    }

    .vacancy_card {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }

    .latest_news {
        padding: 3rem 5% !important;
    }

    .news_grid {
        display: block;
    }

    .news_card {
        width: 100% !important;
        margin-bottom: 2rem;
    }

    .why_choose_left h2,
    .specialist_divisions_header h2,
    .section_header_with_icon h2 {
        font-size: 35px !important;
        line-height: 40px !important;
    }
}

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

    .specialist_divisions,
    .why_choose_us,
    .latest_vacancies,
    .latest_news {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .cta_banner {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .division_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }

    .vacancy_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }

    .news_card {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   Single Job Listing Styles
   Primary colour: #6b1d2a
   Fonts: Gotham, gothambook, gothamlight
   ========================================================================== */


/* ----- Hero ----- */

.sjl-hero {
    background: #1e1e1e;
    padding: 12rem 10% 4rem;
    position: relative;
}

.sjl-hero-inner {
    max-width: 900px;
}

.sjl-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.sjl-hero-tag {
    display: inline-block;
    background: rgba(107, 29, 42, 0.15);
    border: 1px solid rgba(107, 29, 42, 0.4);
    color: #6b1d2a;
    font-family: 'Gotham', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.sjl-hero-tag:hover,
.sjl-hero-tag:visited {
    background: rgba(107, 29, 42, 0.25);
    color: #6b1d2a;
}

.sjl-hero-title {
    font-family: 'Gotham', sans-serif;
    font-size: 42px;
    line-height: 48px;
    color: #fff;
    margin: 0 0 1.5rem;
}

.sjl-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 1.5rem;
}

.sjl-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
}

.sjl-hero-meta-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Breadcrumb */
.sjl-breadcrumb {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #888;
}

.sjl-breadcrumb a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sjl-breadcrumb a:hover {
    color: #6b1d2a;
}

.sjl-breadcrumb-sep {
    margin: 0 6px;
    color: #555;
}

.sjl-breadcrumb span:last-child {
    color: #ccc;
}


/* ----- Content Layout ----- */

.sjl-content {
    background: #f5f5f5;
    padding: 4rem 10%;
}

.sjl-content-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.sjl-main {
    flex: 1;
    min-width: 0;
}

.sjl-sidebar {
    width: 320px;
    min-width: 320px;
    position: sticky;
    top: 100px;
}


/* ----- Meta Bar ----- */

.sjl-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.sjl-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 8px 16px;
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #333;
}

.sjl-meta-pill svg {
    flex-shrink: 0;
}


/* ----- Job Description ----- */

.sjl-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #333;
    margin-bottom: 2rem;
}

.sjl-description h2,
.sjl-description h3,
.sjl-description h4 {
    font-family: 'Gotham', sans-serif;
    color: #242424;
    margin-top: 2rem;
}

.sjl-description h2 {
    font-size: 24px;
    line-height: 30px;
}

.sjl-description h3 {
    font-size: 20px;
    line-height: 26px;
}

.sjl-description ul,
.sjl-description ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.sjl-description li {
    margin-bottom: 0.5rem;
    line-height: 26px;
}

.sjl-description a {
    color: #6b1d2a;
    text-decoration: underline;
}

.sjl-description a:hover {
    color: #2f3b82;
}


/* ----- Expired Notice ----- */

.sjl-expired-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #856404;
    margin-bottom: 2rem;
}


/* ----- Apply Section ----- */

.sjl-apply-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 2rem;
    margin-top: 2rem;
}

.sjl-apply-section .application_button.button,
.sjl-apply-section .button.wp_job_manager_send_application_button {
    background: #6b1d2a !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Gotham', sans-serif !important;
    padding: 14px 30px !important;
    border-radius: 4px !important;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    transition: background 0.3s ease;
}

.sjl-apply-section .application_button.button:hover,
.sjl-apply-section .button.wp_job_manager_send_application_button:hover {
    background: #2f3b82 !important;
}


/* ----- Sidebar: Video Block ----- */

.sjl-video-block {
    margin-bottom: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
}

.sjl-video-thumb {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sjl-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
}

.sjl-video-title {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0 0 1rem;
}

.sjl-play-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.sjl-play-btn:hover {
    transform: scale(1.1);
}

.sjl-play-btn svg {
    background: rgba(107, 29, 42, 0.8);
    border-radius: 50%;
    padding: 10px;
    width: 50px;
    height: 50px;
}

.sjl-video-caption {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #fff;
}


/* ----- Sidebar: Consultant Block ----- */

.sjl-consultant-block {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sjl-consultant-heading {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b1d2a;
    margin: 0 0 1rem;
}

.sjl-consultant-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sjl-consultant-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sjl-consultant-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sjl-consultant-name {
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    color: #242424;
}

.sjl-consultant-role {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #888;
}

.sjl-consultant-socials {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.sjl-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.sjl-social-link:hover {
    background: #6b1d2a;
    color: #fff;
}

.sjl-social-link:hover svg {
    fill: #fff;
    stroke: #fff;
}

.sjl-consultant-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.sjl-consultant-profile-link:hover {
    gap: 10px;
}

.sjl-consultant-profile-link:visited {
    color: #6b1d2a;
}


/* ----- Sidebar: Quick Apply CTA ----- */

.sjl-sidebar-apply {
    background: #1e1e1e;
    border-radius: 6px;
    padding: 1.5rem;
}

.sjl-sidebar-apply h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0 0 0.5rem;
}

.sjl-sidebar-apply p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    line-height: 22px;
    margin: 0 0 1rem;
}

.sjl-apply-btn {
    display: block;
    text-align: center;
    background: #6b1d2a;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.sjl-apply-btn:hover {
    background: #2f3b82;
}

.sjl-apply-btn:visited {
    color: #fff;
}


/* ----- Related Jobs ----- */

.sjl-related {
    background: #242424;
    padding: 4rem 10% 5rem;
}

.sjl-related-heading {
    font-family: 'Gotham', sans-serif;
    font-size: 28px;
    color: #fff;
    margin: 0 0 2rem;
}

.sjl-related-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep scroll functionality */
.sjl-related-scroll::-webkit-scrollbar {
    height: 6px;
}

.sjl-related-scroll::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.sjl-related-scroll::-webkit-scrollbar-thumb {
    background: #6b1d2a;
    border-radius: 3px;
}

.sjl-related-card {
    min-width: 320px;
    max-width: 360px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 1.5rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
}

.sjl-related-card:hover {
    border-color: #6b1d2a;
}

.sjl-related-card-title {
    font-family: 'Gotham', sans-serif;
    font-size: 17px;
    line-height: 22px;
    color: #fff;
    margin: 0 0 0.75rem;
}

.sjl-related-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0.75rem;
}

.sjl-related-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: gothamlight, sans-serif;
    font-size: 12px;
    color: #aaa;
}

.sjl-related-card-meta span svg {
    flex-shrink: 0;
}

.sjl-related-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #999;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sjl-related-card-excerpt p {
    margin: 0;
}

.sjl-related-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #6b1d2a;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.sjl-related-card-link:hover {
    gap: 12px;
}

.sjl-related-card-link:visited {
    color: #6b1d2a;
}

/* ==========================================================================
   TN Recruits - Sector Page CSS ADDITIONS
   Add these to the end of your existing sector CSS in style.css
   These replace/extend the old .sector-about rules and add new sections.
   ========================================================================== */


/* ----- Fix: add max-width wrapper to about/intro section ----- */
/* (The old .sector-about-inner had no max-width - this ensures content
   stays within a comfortable reading width on wide screens) */

.sector-about-inner,
.sector-services-inner {
    max-width: 1400px;
    margin: 0 auto;
}


/* ==========================================================================
   Intro Row (replaces old .sector-about)
   Two-column: stacked images left, content right
   ========================================================================== */

.sector-intro {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.sector-intro-inner {
    display: flex;
    align-items: center;
    gap: 5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Left column - images */
.sector-intro-left {
    width: 42%;
    flex-shrink: 0;
}

.sector-intro-image-wrap {
    position: relative;
}

.sector-intro-image-wrap > img {
    width: 100%;
    height: 450px;
    border-radius: 6px;
    display: block;
    object-fit: cover;
}

.sector-intro-content h3 {
    font-size: 28px;
    line-height: 36px;
}

/* The secondary image sits bottom-right, overlapping the primary */
.sector-intro-image-secondary {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 48%;
    border-radius: 6px;
    overflow: hidden;
    border: 4px solid #f5f5f5;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.sector-intro-image-secondary img {
    width: 100%;
    height: auto;
    display: block;
}

/* Right column - content */
.sector-intro-right {
    flex: 1;
    /* Add bottom padding to clear the overlapping secondary image */
    padding-bottom: 2rem;
}

.sector-intro-label {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #822433;
    margin: 0 0 1rem;
    font-weight: 500;
}

.sector-intro-content h2 {
    font-family: gothambook, sans-serif;
    font-size: 38px;
    line-height: 44px;
    color: #242424;
    margin: 0 0 1.5rem;
}

.sector-intro-content p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #404040;
    margin: 0 0 1.2rem;
}

.sector-intro-content ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.sector-intro-content ul li {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
}

.sector-intro-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #822433;
}

.sector-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    margin-top: 1.5rem;
    transition: gap 0.3s ease;
}

.sector-intro-cta:hover {
    gap: 12px;
}

.sector-intro-cta:visited {
    color: #822433;
}

.sector-intro-cta img {
    width: 20px;
    height: 20px;
}


/* ==========================================================================
   Testimonials Slider
   ========================================================================== */

.sector-testimonials {
    padding: 5rem 10%;
    background: #fff;
}

.sector-testimonials-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.sector-testimonials-heading {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #242424;
    margin: 0 0 3rem;
}

/* Slider track */
.sector-testimonials-slider {
    position: relative;
    overflow: hidden;
}

.sector-testimonial-slide {
    display: none;
    animation: testimonialFadeIn 0.4s ease;
}

.sector-testimonial-slide.is-active {
    display: block;
}

@keyframes testimonialFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card */
.sector-testimonial-card {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 3rem;
    text-align: left;
    position: relative;
}

.sector-testimonial-quote {
    margin-bottom: 1.5rem;
}

.sector-testimonial-text {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #242424;
    margin: 0 0 2rem;
    font-style: italic;
}

.sector-testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sector-testimonial-author-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.sector-testimonial-author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sector-testimonial-author-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sector-testimonial-author-details strong {
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    color: #242424;
    font-weight: 500;
}

.sector-testimonial-author-details span {
    font-family: gothamlight, sans-serif;
    font-size: 13px;
    color: #666;
}

/* Nav row: prev | dots | next */
.sector-testimonials-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.sector-testimonials-prev,
.sector-testimonials-next {
    background: none;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #242424;
    transition: all 0.3s ease;
    padding: 0;
    flex-shrink: 0;
}

.sector-testimonials-prev:hover,
.sector-testimonials-next:hover {
    border-color: #822433;
    color: #822433;
}

.sector-testimonials-dots {
    display: flex;
    gap: 8px;
}

.sector-testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9D9D9;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.sector-testimonials-dot.is-active {
    background: #822433;
    transform: scale(1.3);
}

/* ==========================================================================
   Single Team Member Template Styles
   Matches the TN Recruits / Role Stack design system
   - Dark backgrounds: #1e1e1e, #242424
   - Accent colour: #822433 / #6b1d2a
   - Light section bg: #f5f5f5
   - Fonts: Gotham (bold/headings), gothambook (body), gothamlight (light text)
   ========================================================================== */


/* ----- Profile Hero Section ----- */

.tm-hero {
    background: #1e1e1e;
    padding: 10rem 0 5rem;
}

.tm-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    max-width: 1400px;
    margin: auto;
}


/* -- Left Column: Photo + Action Buttons -- */

.tm-hero-left {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 8rem;
}

.tm-photo-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #2a2a2a;
}

.tm-photo-container img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: opacity 0.4s ease;
}

.tm-photo-main {
    position: relative;
    z-index: 2;
}

.tm-photo-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
}

.tm-photo-container:hover .tm-photo-main {
    opacity: 0;
}

.tm-photo-container:hover .tm-photo-hover {
    z-index: 3;
}

/* Action Buttons Row */
.tm-action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.tm-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tm-action-btn:hover {
    background: #822433;
    border-color: #822433;
}

.tm-action-btn img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.tm-action-btn span {
    font-family: gothambook, sans-serif;
    font-size: 11px;
    color: #C9C9C9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.tm-action-btn:hover span {
    color: #fff;
}


/* -- Right Column: Info & Details -- */

.tm-hero-right {
    flex: 1;
    min-width: 0;
}

.tm-name {
    font-family: 'Gotham', sans-serif;
    font-size: 48px;
    line-height: 52px;
    color: #fff;
    margin: 0 0 0.5rem;
}

.tm-job-title {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    color: #822433;
    line-height: 26px;
    margin-bottom: 1.5rem;
}

/* Contact Details Row */
.tm-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #333;
}

.tm-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-contact-item img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(0.55);
}

.tm-contact-item a {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tm-contact-item a:hover {
    color: #822433;
}

/* Bio Block */
.tm-bio-block {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #333;
}

.tm-bio-block p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 28px;
    color: #b0b0b0;
    margin: 0 0 1rem;
}

.tm-bio-block p:last-child {
    margin-bottom: 0;
}

/* Quick Facts / Details Grid */
.tm-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.tm-detail-item {
    padding: 1.5rem 1.5rem 1.5rem 0;
    border-top: 1px solid #333;
}

.tm-detail-label {
    font-family: 'Gotham', sans-serif;
    font-size: 11px;
    color: #822433;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.tm-detail-value {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #C9C9C9;
    line-height: 24px;
}


/* ----- Testimonials Section ----- */

.tm-testimonials {
    background: #f5f5f5;
    padding: 5rem 0;
}

.tm-testimonials-inner h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #242424;
    margin: 0 0 3rem;
}

.tm-testimonials-inner {
    max-width: 1400px;
    margin: auto;
}

.tm-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.tm-testimonial-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 6px;
    border-left: 4px solid #822433;
}

.tm-quote-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.tm-testimonial-quote p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #454545;
    font-style: italic;
    margin: 0 0 1.5rem;
}

.tm-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-testimonial-author-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.tm-testimonial-name {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #242424;
    font-weight: 500;
}

.tm-testimonial-role {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #888;
}

.tm-testimonial-company {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    color: #822433;
}


/* ----- Current Jobs Section ----- */

.tm-jobs {
    background: #242424;
    padding: 5rem 10%;
}

.tm-jobs-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0 0 0.5rem;
}

.tm-jobs-header p {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    color: #C9C9C9;
    margin: 0 0 3rem;
}

.tm-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.tm-job-card {
    background: #fff;
    border-radius: 0;
    padding: 2rem;
    border: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
}

.tm-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tm-job-meta-item {
    font-family: gothamlight, sans-serif;
    font-size: 14px;
    color: #242424;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tm-job-meta-item img {
    width: 15px;
    height: 21px;
}

.tm-job-excerpt {
    font-family: gothamlight, sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #242424;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.tm-job-salary {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    margin-bottom: 1rem;
}

.tm-job-link {
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    color: #822433;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 1rem;
    transition: opacity 0.3s ease;
}

.tm-job-link:hover {
    opacity: 0.7;
}

.tm-job-link img {
    width: 18px;
    height: 18px;
}


/* ----- CTA Section ----- */

.tm-cta {
    background: #1e1e1e;
    padding: 5rem 10%;
}

.tm-cta-inner {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.tm-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.tm-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 28px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.tm-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tm-cta-btn-primary {
    background: #822433;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.tm-cta-btn-primary:hover {
    background: #6b1d2a;
}

.tm-cta-btn-secondary {
    background: transparent;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding: 14px 30px;
    border: 1px solid #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.tm-cta-btn-secondary:hover {
    background: #fff;
    color: #242424;
}

/* ====================================================
   TN Recruits - Contact Page Styles
   Add this to the end of style.css
   ==================================================== */


/* ------ Contact Hero ------ */

.contact-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.contact-hero-label {
    display: inline-block;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #822433;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.contact-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.contact-hero-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.contact-hero-description p {
    margin: 0;
}

.contact-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

.contact-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


/* ------ Map Section ------ */

.contact-map {
    background: #242424;
}

.contact-map-inner {
    width: 100%;
    line-height: 0;
}

.contact-map-inner iframe {
    width: 100%;
    height: 450px;
    border: 0;
}


/* ------ Visit Us Section ------ */

.contact-visit {
    padding: 4rem 10%;
    background: #f5f5f5;
    text-align: center;
}

.contact-visit-inner {
    max-width: 700px;
    margin: 0 auto;
}

.contact-visit-icon {
    margin-bottom: 1.5rem;
}

.contact-visit-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.contact-visit h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #242424;
    margin: 0 0 1rem;
}

.contact-address {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #404040;
    margin: 0;
}


/* ------ Who Do You Need to Contact Section ------ */

.contact-who {
    padding: 5rem 10%;
    background: #fff;
}

.contact-who-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-who-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-who-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #242424;
    margin: 0;
}

.contact-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contact-who-card {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease;
}

.contact-who-card:hover {
    border-color: #822433;
}

.contact-who-card-icon {
    margin-bottom: 1.5rem;
}

.contact-who-card-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.contact-who-card h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 22px;
    line-height: 28px;
    color: #242424;
    margin: 0 0 1rem;
    font-weight: 500;
}

.contact-who-card p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    margin: 0 0 1.5rem;
}

.contact-who-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-who-card-btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.contact-who-card-btn:hover {
    color: #6b1d2a;
}

.contact-who-card-btn:hover img {
    transform: translate(2px, -2px);
}


/* ------ Contact Details Section ------ */

.contact-details {
    padding: 5rem 10%;
    background: #242424;
}

.contact-details-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.contact-detail-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

.contact-detail-item:hover {
    border-color: #822433;
}

.contact-detail-icon {
    margin-bottom: 1.25rem;
}

.contact-detail-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.contact-detail-item h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 18px;
    color: #fff;
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.contact-detail-value {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-detail-value:hover {
    color: #8a93d1;
}

.contact-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-detail-btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.contact-detail-btn:hover {
    color: #8a93d1;
}

.contact-detail-btn:hover img {
    transform: translate(2px, -2px);
}

.contact-detail-hours {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #C9C9C9;
}

.contact-detail-hours p {
    margin: 0;
}

/* ====================================================
   TN Recruits - Contact Page Styles
   Add this to the end of style.css
   ==================================================== */


/* ------ Contact Hero ------ */

.contact-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.contact-hero-label {
    display: inline-block;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #822433;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.contact-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.contact-hero-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.contact-hero-description p {
    margin: 0 0 0.5rem;
}

.contact-hero-description p:last-child {
    margin-bottom: 0;
}

.contact-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

.contact-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


/* ------ Main Contact Section - Two Column Layout ------ */

.contact-main {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.contact-main-inner {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}


/* -- Left Column - Contact Info -- */

.contact-left {
    width: 42%;
    flex-shrink: 0;
}

.contact-block {
    margin-bottom: 2.5rem;
}

.contact-block:last-child {
    margin-bottom: 0;
}

.contact-block-icon {
    margin-bottom: 1rem;
}

.contact-block-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.contact-block-visit h2 {
    font-family: gothambook, sans-serif;
    font-size: 28px;
    line-height: 34px;
    color: #242424;
    margin: 0 0 0.75rem;
}

.contact-address {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    margin: 0;
}


/* -- Contact Info Rows -- */

.contact-block-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #ddd;
}

.contact-info-row:first-child {
    border-top: 1px solid #ddd;
}

.contact-info-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.contact-info-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.contact-info-content h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #242424;
    margin: 0 0 0.25rem;
}

.contact-info-content a {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-content a:hover {
    color: #6b1d2a;
}

.contact-info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-info-link img {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.contact-info-link:hover img {
    transform: translate(2px, -2px);
}

.contact-info-hours {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #404040;
}

.contact-info-hours p {
    margin: 0;
}


/* -- Right Column - Map -- */

.contact-right {
    flex: 1;
    min-height: 450px;
}

.contact-map-wrap {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.contact-map-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
    display: block;
}


/* ------ Who Do You Need to Contact Section ------ */

.contact-who {
    padding: 5rem 10%;
    background: #242424;
}

.contact-who-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-who-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-who-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0;
}

.contact-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contact-who-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease;
}

.contact-who-card:hover {
    border-color: #822433;
}

.contact-who-card-icon {
    margin-bottom: 1.5rem;
}

.contact-who-card-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.contact-who-card h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 22px;
    line-height: 28px;
    color: #fff;
    margin: 0 0 1rem;
    font-weight: 500;
}

.contact-who-card p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #C9C9C9;
    margin: 0 0 1.5rem;
}

.contact-who-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-who-card-btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.contact-who-card-btn:hover {
    color: #8a93d1;
}

.contact-who-card-btn:hover img {
    transform: translate(2px, -2px);
}


/* ------ Contact CTA Section ------ */

.contact-cta {
    padding: 5rem 10%;
    background: #822433;
    text-align: center;
}

.contact-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.contact-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.contact-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
}

.contact-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-primary:hover {
    background: #242424;
    color: #fff;
}

.contact-cta-btn-primary:visited {
    color: #822433;
}

.contact-cta-btn-primary:hover:visited {
    color: #fff;
}

.contact-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-secondary:hover {
    background: #fff;
    color: #822433;
}

.contact-cta-btn-secondary:visited {
    color: #fff;
}

.contact-cta-btn-secondary:hover:visited {
    color: #822433;
}


/* ==========================================================================
   Responsive - Contact Page - Tablet
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .contact-hero {
        padding: 10rem 5% 4rem;
    }

    .contact-main,
    .contact-who,
    .contact-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .contact-main-inner {
        gap: 2rem;
    }

    .contact-left {
        width: 45%;
    }

    .contact-who-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}


/* ==========================================================================
   Responsive - Contact Page - Mobile
   ========================================================================== */

@media screen and (max-width: 768px) {
    .contact-hero {
        padding: 8rem 5% 3rem;
    }

    .contact-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .contact-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    .contact-main,
    .contact-who,
    .contact-cta {
        padding: 3rem 5%;
    }

    .contact-main-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-left {
        width: 100%;
    }

    .contact-right {
        min-height: 300px;
    }

    .contact-map-wrap iframe {
        min-height: 300px;
    }

    .contact-block-visit h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .contact-who-header h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-who-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-cta-content h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-cta-buttons {
        flex-direction: column;
    }

    .contact-cta-btn-primary,
    .contact-cta-btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ====================================================
   TN Recruits - Contact Page Styles
   Add this to the end of style.css
   ==================================================== */


/* ------ Contact Hero ------ */

.contact-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.contact-hero-label {
    display: inline-block;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #822433;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.contact-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.contact-hero-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.contact-hero-description p {
    margin: 0 0 0.5rem;
}

.contact-hero-description p:last-child {
    margin-bottom: 0;
}

.contact-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

.contact-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


/* ------ Main Contact Section - Two Column Layout ------ */

.contact-main {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.contact-main-inner {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}


/* -- Left Column - Contact Info -- */

.contact-left {
    width: 42%;
    flex-shrink: 0;
}

.contact-block {
    margin-bottom: 2.5rem;
}

.contact-block:last-child {
    margin-bottom: 0;
}

.contact-block-icon {
    margin-bottom: 1rem;
}

.contact-block-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.contact-block-visit h2 {
    font-family: gothambook, sans-serif;
    font-size: 28px;
    line-height: 34px;
    color: #242424;
    margin: 0 0 0.75rem;
}

.contact-address {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    margin: 0;
}


/* -- Contact Info Rows -- */

.contact-block-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #ddd;
}

.contact-info-row:first-child {
    border-top: 1px solid #ddd;
}

.contact-info-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.contact-info-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.contact-info-content h4 {
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #242424;
    margin: 0 0 0.25rem;
}

.contact-info-content a {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-content a:hover {
    color: #6b1d2a;
}

.contact-info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-info-link img {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.contact-info-link:hover img {
    transform: translate(2px, -2px);
}

.contact-info-hours {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #404040;
}

.contact-info-hours p {
    margin: 0;
}


/* -- Right Column - Map -- */

.contact-right {
    flex: 1;
    min-height: 450px;
}

.contact-map-wrap {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.contact-map-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
    display: block;
}


/* ------ Who Do You Need to Contact Section ------ */

.contact-who {
    padding: 5rem 10%;
    background: #242424;
}

.contact-who-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-who-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-who-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0;
}

.contact-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contact-who-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease;
}

.contact-who-card:hover {
    border-color: #822433;
}

.contact-who-card-icon {
    margin-bottom: 1.5rem;
}

.contact-who-card-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.contact-who-card h3 {
    font-family: 'Gotham', sans-serif;
    font-size: 22px;
    line-height: 28px;
    color: #fff;
    margin: 0 0 1rem;
    font-weight: 500;
}

.contact-who-card p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #C9C9C9;
    margin: 0 0 1.5rem;
}

.contact-who-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Gotham', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #822433;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-who-card-btn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.contact-who-card-btn:hover {
    color: #8a93d1;
}

.contact-who-card-btn:hover img {
    transform: translate(2px, -2px);
}


/* ------ Contact CTA Section ------ */

.contact-cta {
    padding: 5rem 10%;
    background: #822433;
    text-align: center;
}

.contact-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.contact-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.contact-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
}

.contact-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-primary:hover {
    background: #242424;
    color: #fff;
}

.contact-cta-btn-primary:visited {
    color: #822433;
}

.contact-cta-btn-primary:hover:visited {
    color: #fff;
}

.contact-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-secondary:hover {
    background: #fff;
    color: #822433;
}

.contact-cta-btn-secondary:visited {
    color: #fff;
}

.contact-cta-btn-secondary:hover:visited {
    color: #822433;
}

img.footer-con-icon {
    width: 30px;
}

.office_hours p {
    color: #822433;
}

.office_hours {
    padding-top: 3rem;
}

.col-form {
    background: #242424;
    padding: 2rem;
    border: solid 1px #822433;
    border-radius: 10px;
    color: white;
}

.footer_bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: solid 1px #413e3e;
    margin-top: 2rem;
    padding: 1.2rem 10%;
}

.footer_copyright p {
    color: #ffffff8a;
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
}

.footer_policies {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
}

.footer_policies a {
    color: #ffffff8a;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer_policies a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.policy-divider {
    color: #ffffff3d;
    margin: 0 0.5rem;
    font-size: 13px;
}

@media (max-width: 900px) {
    .footer_bottom-bar {
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
        padding: 1.2rem 5%;
    }

    .footer_policies {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer_policies {
        flex-direction: column;
        gap: 0.4rem;
    }

    .policy-divider {
        display: none;
    }
}

.gracity_form input {
    background: #82243326;
    border: 1px solid #727272;
    border-radius: 0;
    color: #fff !important;
    width: 100%;
}

.upload_cv_title {
    font-size: 30px;
    color: #fff;
    font-family: Gotham;
}

/* ==========================================================================
   TN Recruits - Refer a Friend Page Styles
   ========================================================================== */


/* ----- Hero Section ----- */

.referral-hero-inner,
.referral-intro-inner,
.referral-how-to-inner,
.referral-details-inner,
.referral-action-inner,
.referral-terms-inner,
.referral-cta-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.referral-hero {
    background: #1e1e1e;
    padding: 12rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.referral-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.referral-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 50px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.referral-hero-subtitle {
    font-family: 'Gotham', sans-serif;
    font-size: 22px;
    line-height: 30px;
    color: #822433;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.referral-hero-description {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.referral-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.referral-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 100%);
    bottom: 0;
    left: 0;
    z-index: 2;
}

.referral-hero-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ==========================================================================
   TN Recruits - 404 Page Styles
   ========================================================================== */


/* ----- Hero Section ----- */

.tn-404-hero {
    background: #1e1e1e;
    padding: 14rem 10% 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tn-404-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.tn-404-number {
    font-family: 'Gotham', sans-serif;
    font-size: 140px;
    line-height: 140px;
    color: #822433;
    font-weight: 500;
    margin: 0 0 1rem;
    letter-spacing: -4px;
}

.tn-404-hero h1 {
    font-family: 'Gotham', sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.tn-404-subtitle {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.tn-404-hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.tn-404-hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom, rgba(130, 36, 51, 0.15) 0%, rgba(30, 30, 30, 0) 60%);
    bottom: 0;
    left: 0;
    z-index: 1;
}


/* ----- Content Section ----- */

.tn-404-content {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.tn-404-content-inner {
    max-width: 1200px;
    margin: 0 auto;
}


/* ----- Search ----- */

.tn-404-search {
    margin-bottom: 4rem;
}

.tn-404-search h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #242424;
    margin: 0 0 1.5rem;
}

.tn-404-search-form {
    display: flex;
    gap: 0;
    max-width: 600px;
}

.tn-404-search-input {
    flex: 1;
    font-family: gothambook, sans-serif;
    font-size: 16px;
    padding: 14px 20px;
    border: 1px solid #E8E8E8;
    border-right: none;
    background: #fff;
    color: #242424;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
}

.tn-404-search-input::placeholder {
    color: #999;
}

.tn-404-search-input:focus {
    border-color: #822433;
}

.tn-404-search-btn {
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 30px;
    background: #822433;
    color: #fff;
    border: 1px solid #822433;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
}

.tn-404-search-btn:hover {
    background: #4a5499;
    border-color: #4a5499;
}


/* ----- Quick Links ----- */

.tn-404-links h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #242424;
    margin: 0 0 1.5rem;
}

.tn-404-links-grid {
    display: flex;
    gap: 2rem;
}

.tn-404-link-card {
    flex: 1;
    background: #fff;
    border: 1px solid #E8E8E8;
    padding: 2.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tn-404-link-card:hover {
    border-color: #822433;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.tn-404-link-card h3 {
    font-family: gothambook, sans-serif;
    font-size: 22px;
    line-height: 28px;
    color: #242424;
    margin: 0 0 0.75rem;
}

.tn-404-link-card p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    margin: 0 0 1.5rem;
    flex: 1;
}

.tn-404-link-arrow {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #822433;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.3s ease;
}

.tn-404-link-card:hover .tn-404-link-arrow {
    gap: 0.7rem;
}

.tn-404-link-arrow img {
    width: 18px;
    height: 18px;
}


/* ----- Latest Jobs Section ----- */

.tn-404-jobs {
    padding: 5rem 10%;
    background: #242424;
}

.tn-404-jobs-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.tn-404-jobs h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    margin: 0 0 2rem;
}

.tn-404-jobs-grid {
    display: flex;
    gap: 2rem;
}

.tn-404-job-card {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    transition: all 0.3s ease;
}

.tn-404-job-card:hover {
    border-color: rgba(130, 36, 51, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

.tn-404-job-card h3 {
    font-family: gothambook, sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #fff;
    margin: 0 0 0.75rem;
}

.tn-404-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tn-404-job-location,
.tn-404-job-salary {
    font-family: gothambook, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #822433;
}

.tn-404-job-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #C9C9C9;
    margin-bottom: 1.5rem;
}

.tn-404-job-link {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    color: #822433;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.3s ease;
}

.tn-404-job-link:hover {
    gap: 0.7rem;
}

.tn-404-job-link img {
    width: 18px;
    height: 18px;
}


/* ==========================================================================
   Responsive - 404 Page
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .tn-404-hero {
        padding: 11rem 5% 4rem;
    }

    .tn-404-content,
    .tn-404-jobs {
        padding-left: 5%;
        padding-right: 5%;
    }

    .tn-404-number {
        font-size: 110px;
        line-height: 110px;
    }
}

@media screen and (max-width: 768px) {
    .tn-404-hero {
        padding: 9rem 5% 3rem;
    }

    .tn-404-number {
        font-size: 80px;
        line-height: 80px;
        letter-spacing: -2px;
    }

    .tn-404-hero h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .tn-404-subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .tn-404-content,
    .tn-404-jobs {
        padding: 3rem 5%;
    }

    .tn-404-search h2,
    .tn-404-links h2,
    .tn-404-jobs h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .tn-404-search-form {
        flex-direction: column;
        max-width: 100%;
    }

    .tn-404-search-input {
        border-right: 1px solid #E8E8E8;
        border-bottom: none;
    }

    .tn-404-search-input:focus {
        border-color: #822433;
    }

    .tn-404-links-grid {
        flex-direction: column;
        gap: 1rem;
    }

    .tn-404-link-card {
        padding: 2rem;
    }

    .tn-404-jobs-grid {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ----- Reward Intro Section ----- */

.referral-intro {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.referral-intro-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.referral-intro-left {
    width: 60%;
}

.referral-intro-left h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 40px;
    color: #242424;
    margin: 0;
}

.referral-intro-right {
    width: 35%;
    display: flex;
    justify-content: center;
}

.referral-reward-badge {
    background: #242424;
    padding: 3rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.referral-reward-amount {
    font-family: 'Gotham', sans-serif;
    font-size: 60px;
    line-height: 60px;
    color: #822433;
    font-weight: 500;
}

.referral-reward-label {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-top: 0.5rem;
}

.referral-reward-note {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #999;
    margin-top: 0.25rem;
}


/* ----- How To Claim Section ----- */

.referral-how-to {
    padding: 5rem 10%;
    background: #242424;
}

.referral-how-to-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.referral-how-to-header {
    margin-bottom: 1.5rem;
}

.referral-how-to-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin: 0;
}

.referral-how-to-content {
    margin-bottom: 3rem;
}

.referral-how-to-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}

.referral-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.referral-step-item {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 0;
    transition: all 0.3s ease;
}

.referral-step-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.referral-step-item:hover {
    background: rgba(255, 255, 255, 0.03);
    margin: 0 -2rem;
    padding: 2.5rem 2rem;
}

.referral-step-number {
    font-family: 'Gotham', sans-serif;
    font-size: 40px;
    line-height: 40px;
    color: #822433;
    font-weight: 500;
    width: 80px;
    flex-shrink: 0;
}

.referral-step-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    margin: 0 0 0.75rem;
}

.referral-step-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}


/* ----- Your Referral Details Section ----- */

.referral-details {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.referral-details-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.referral-details-left {
    width: 55%;
}

.referral-details-left h2 {
    font-family: gothambook, sans-serif;
    font-size: 40px;
    line-height: 45px;
    color: #242424;
    margin: 0 0 1.5rem;
}

.referral-details-text p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #404040;
    margin: 0 0 1.5rem;
}

.referral-details-text p:last-child {
    margin-bottom: 0;
}

.referral-details-right {
    width: 40%;
}

.referral-highlight-card {
    background: #242424;
    padding: 2.5rem;
}

.referral-highlight-icon {
    margin-bottom: 1.5rem;
}

.referral-highlight-icon img,
.referral-highlight-icon svg {
    width: 48px;
    height: 48px;
}

.referral-highlight-card h3 {
    font-family: gothambook, sans-serif;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    margin: 0 0 1rem;
}

.referral-highlight-card p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0;
}


/* ----- What Do You Have To Do Section ----- */

.referral-action {
    padding: 5rem 10%;
    background: #822433;
    text-align: center;
}

.referral-action-inner {
    max-width: 800px;
    margin: 0 auto;
}

.referral-action-content h2 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.referral-action-intro {
    font-family: gothambook, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.5rem;
}

.referral-action-details {
    margin-bottom: 2rem;
}

.referral-action-details p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.referral-action-details a {
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
}

.referral-action-details a:hover {
    text-decoration: none;
}

.referral-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.referral-action-btn:hover {
    background: #242424;
    color: #fff;
}

.referral-action-btn:visited {
    color: #822433;
}

.referral-action-btn:hover:visited {
    color: #fff;
}

.referral-action-btn img {
    width: 20px;
    height: 20px;
    filter: none;
    transition: filter 0.3s ease;
}

.referral-action-btn:hover img {
    filter: brightness(0) invert(1);
}


/* ----- Terms and Conditions Section ----- */

.referral-terms {
    padding: 5rem 10%;
    background: #f5f5f5;
}

.referral-terms-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.referral-terms-header {
    margin-bottom: 2rem;
}

.referral-terms-header h2 {
    font-family: gothambook, sans-serif;
    font-size: 30px;
    line-height: 36px;
    color: #242424;
    margin: 0;
}

.referral-terms-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.referral-term-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #E8E8E8;
}

.referral-term-item:first-child {
    border-top: 1px solid #E8E8E8;
}

.referral-term-bullet {
    width: 8px;
    height: 8px;
    background: #822433;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}

.referral-term-item p {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
    margin: 0;
}

.referral-terms-text {
    font-family: gothambook, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #404040;
}

.referral-terms-text p {
    margin: 0 0 1rem;
}


/* ----- CTA Section ----- */

.referral-cta {
    padding: 5rem 10%;
    background: #242424;
    text-align: center;
}

.referral-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.referral-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.referral-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #C9C9C9;
    margin: 0 0 2rem;
}

.referral-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.referral-cta-btn-primary {
    display: inline-block;
    background: #822433;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.referral-cta-btn-primary:hover {
    background: #4a5499;
}

.referral-cta-btn-primary:visited {
    color: #fff;
}

.referral-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.referral-cta-btn-secondary:hover {
    background: #fff;
    color: #242424;
}

.referral-cta-btn-secondary:visited {
    color: #fff;
}

.referral-cta-btn-secondary:hover:visited {
    color: #242424;
}


/* ==========================================================================
   Responsive - Refer a Friend
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .referral-hero {
        padding: 10rem 5% 4rem;
    }

    .referral-intro,
    .referral-how-to,
    .referral-details,
    .referral-action,
    .referral-terms,
    .referral-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .referral-reward-amount {
        font-size: 50px;
        line-height: 50px;
    }
}

@media screen and (max-width: 768px) {
    .referral-hero {
        padding: 8rem 5% 3rem;
    }

    .referral-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .referral-hero-subtitle {
        font-size: 18px;
        line-height: 24px;
    }

    .referral-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    .referral-intro,
    .referral-how-to,
    .referral-details,
    .referral-action,
    .referral-terms,
    .referral-cta {
        padding: 3rem 5%;
    }

    .referral-intro-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .referral-intro-left,
    .referral-intro-right {
        width: 100%;
    }

    .referral-intro-left h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .referral-reward-amount {
        font-size: 45px;
        line-height: 45px;
    }

    .referral-how-to-header h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .referral-step-item {
        flex-direction: column;
        gap: 1rem;
    }

    .referral-step-number {
        font-size: 30px;
        line-height: 30px;
    }

    .referral-step-item:hover {
        margin: 0;
        padding: 2.5rem 0;
        background: transparent;
    }

    .referral-details-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .referral-details-left,
    .referral-details-right {
        width: 100%;
    }

    .referral-details-left h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .referral-action-content h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .referral-terms-header h2 {
        font-size: 22px;
        line-height: 28px;
    }

    .referral-cta-content h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .referral-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .referral-cta-btn-primary,
    .referral-cta-btn-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

/* ==========================================================================
   Responsive - Contact Page - Tablet
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .contact-hero {
        padding: 10rem 5% 4rem;
    }

    .contact-main,
    .contact-who,
    .contact-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .contact-main-inner {
        gap: 2rem;
    }

    .contact-left {
        width: 45%;
    }

    .contact-who-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}


/* ==========================================================================
   Responsive - Contact Page - Mobile
   ========================================================================== */

@media screen and (max-width: 768px) {
    .contact-hero {
        padding: 8rem 5% 3rem;
    }

    .contact-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .contact-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    .contact-main,
    .contact-who,
    .contact-cta {
        padding: 3rem 5%;
    }

    .contact-main-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-left {
        width: 100%;
    }

    .contact-right {
        min-height: 300px;
    }

    .contact-map-wrap iframe {
        min-height: 300px;
    }

    .contact-block-visit h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .contact-who-header h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-who-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-cta-content h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-cta-buttons {
        flex-direction: column;
    }

    .contact-cta-btn-primary,
    .contact-cta-btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ------ Contact CTA Section ------ */

.contact-cta {
    padding: 5rem 10%;
    background: #822433;
    text-align: center;
}

.contact-cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.contact-cta-content h3 {
    font-family: gothambook, sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 1rem;
}

.contact-cta-content p {
    font-family: gothambook, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
}

.contact-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 14px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-primary:hover {
    background: #242424;
    color: #fff;
}

.contact-cta-btn-primary:visited {
    color: #822433;
}

.contact-cta-btn-primary:hover:visited {
    color: #fff;
}

.contact-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.contact-cta-btn-secondary:hover {
    background: #fff;
    color: #822433;
}

.contact-cta-btn-secondary:visited {
    color: #fff;
}

.contact-cta-btn-secondary:hover:visited {
    color: #822433;
}

/* ============================================================
   ABOUT PAGE - NEW SECTION STYLES
   Add these styles to the end of your style.css file
   ============================================================ */


/* ------ Meet the Team Section ------ */

.about_team_section {
    padding: 5rem 10%;
    background: #ffffff;
}

.inner_about_team {
    max-width: 1400px;
    margin: 0 auto;
}

.about_team_header {
    text-align: center;
    margin-bottom: 4rem;
}

.about_team_header h2 {
    font-size: 40px;
    line-height: 45px;
    font-family: gothambook;
    color: #242424;
    margin-bottom: 1rem;
}

.about_team_header p {
    font-size: 16px;
    color: #666;
    font-family: gothambook;
    max-width: 800px;
    margin: 0 auto;
}

.about_team_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.about_team_card {
    background: #f8f9fa;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #E8E8E8;
}

.about_team_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    border-color: #822433;
}

.about_team_card_image {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #6b1d2a;
}

.about_team_card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.about_team_card:hover .about_team_card_image img {
    transform: scale(1.05);
}

.about_team_card_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(107, 29, 42, 0.95) 0%, rgba(107, 29, 42, 0.85) 60%, transparent 100%);
    padding: 2rem 1.5rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.about_team_card:hover .about_team_card_overlay {
    transform: translateY(0);
}

.about_team_card_bio {
    color: #fff;
    font-family: gothambook;
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.about_team_card_actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.about_team_action_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: gothambook;
    font-size: 12px;
    padding: 6px 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.about_team_action_btn:hover {
    background: #fff;
    color: #6b1d2a;
    border-color: #fff;
}

.about_team_action_btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.about_team_card_info {
    padding: 1.5rem;
}

.about_team_card_info h3 {
    font-family: Gotham;
    font-size: 18px;
    color: #242424;
    margin: 0 0 0.3rem 0;
    font-weight: 500;
}

.about_team_card_role {
    font-family: Gotham;
    font-size: 14px;
    color: #822433;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about_team_cta {
    text-align: center;
    margin-top: 3rem;
}


/* ------ In The Community Section ------ */

.about_community {
    padding: 5rem 10%;
    background: #f8f9fa;
}

.inner_about_community {
    max-width: 1400px;
    margin: 0 auto;
}

.about_community_header {
    text-align: center;
    margin-bottom: 4rem;
}

.about_community_tag {
    display: inline-block;
    background: rgba(130, 36, 51, 0.1);
    color: #822433;
    font-family: Gotham;
    font-size: 13px;
    padding: 6px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.about_community_header h2 {
    font-size: 40px;
    line-height: 45px;
    font-family: gothambook;
    color: #242424;
    margin: 0 0 1rem 0;
}

.about_community_header p {
    font-size: 16px;
    color: #666;
    font-family: gothambook;
    max-width: 800px;
    margin: 0 auto;
    line-height: 26px;
    margin: auto;
}

.about_community_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.about_community_block {
    background: #fff;
    padding: 2.5rem 2rem;
    border: 1px solid #E8E8E8;
    transition: all 0.3s ease;
}

.about_community_block:hover {
    border-color: #822433;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.about_community_block_icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
}

.about_community_block_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about_community_block h3 {
    font-family: Gotham;
    font-size: 20px;
    color: #242424;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.about_community_block_content {
    font-family: gothambook;
    font-size: 14px;
    line-height: 24px;
    color: #666;
}

.about_community_block_content p {
    margin: 0 0 0.75rem 0;
}

.about_community_block_content ul {
    margin: 0.5rem 0;
    padding-left: 1.2rem;
}

.about_community_block_content li {
    margin-bottom: 0.5rem;
    line-height: 22px;
}


/* ------ Our Charity Section ------ */

.about_charity {
    padding: 5rem 10%;
    background: #242424;
}

.inner_about_charity {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
}

.about_charity_left {
    width: 40%;
    flex-shrink: 0;
}

.about_charity_left img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.about_charity_right {
    flex: 1;
}

.about_charity_tag {
    display: inline-block;
    background: rgba(130, 36, 51, 0.2);
    color: #822433;
    font-family: Gotham;
    font-size: 13px;
    padding: 6px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.about_charity_right h2 {
    font-size: 35px;
    line-height: 40px;
    font-family: gothambook;
    color: #fff;
    margin: 0 0 1.5rem 0;
}

.about_charity_content {
    font-family: gothambook;
    font-size: 15px;
    line-height: 26px;
    color: #C9C9C9;
}

.about_charity_content p {
    margin: 0 0 1rem 0;
}

.about_charity_content ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.2rem;
}

.about_charity_content li {
    margin-bottom: 0.5rem;
    line-height: 24px;
    color: #C9C9C9;
}

.about_charity_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #822433;
    color: #fff;
    font-family: Gotham;
    font-size: 14px;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.about_charity_btn:hover {
    background: #fff;
    color: #822433;
}

.about_charity_btn img {
    width: 20px;
    transition: transform 0.3s ease;
}

.about_charity_btn:hover img {
    transform: translateX(3px);
}


/* ------ News Section Date Meta ------ */

.news_card_meta {
    margin-bottom: 0.5rem;
}

.news_card_date {
    font-family: gothambook;
    font-size: 12px;
    color: #822433;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wp-gr.rpi .wp-google-name a {
    color: #ffffff !important;
    font-size: 18px!important;
    text-decoration: none!important;
}

.sector-intro-content h3 {
    font-size: 25px;
    line-height: 36px;
    color: #1e1e1e;
    font-weight: 600;
    font-family: gothambook;
}

/* ====== HP Case Study Cards (global) ====== */

.hp-cs-scroll {
    display: flex;
    gap: 1.5rem;
    max-width: 1400px;
    margin: auto;
}

/* When inside the success/testimonials row, fill remaining space */
.success_Stories_bottom .hp-cs-scroll {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.hp-cs-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
    min-width: 0;
}

.hp-cs-card:hover {
    border-color: #822433;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hp-cs-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hp-cs-card-image {
    width: 100%;
    overflow: hidden;
    background: #2a2a2a;
}

.hp-cs-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hp-cs-card:hover .hp-cs-card-image img {
    transform: scale(1.05);
}

.hp-cs-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hp-cs-card-label {
    display: inline-block;
    background: rgba(107, 29, 42, 0.15);
    border: 1px solid rgba(107, 29, 42, 0.4);
    color: #822433;
    font-family: 'Gotham', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.hp-cs-card-title {
    margin: 0 0 0.5rem;
}

.hp-cs-card-title a {
    font-family: 'Gotham', sans-serif;
    font-size: 17px;
    line-height: 23px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.hp-cs-card-title a:hover {
    color: #822433;
}

.hp-cs-card-meta {
    display: flex;
    gap: 12px;
    font-family: gothamlight, sans-serif;
    font-size: 12px;
    color: #888;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #2a2a2a;
}

.hp-cs-card-excerpt {
    font-family: gothambook, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    margin-bottom: 1.25rem;
    flex: 1;
}

.hp-cs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    color: #822433;
    text-decoration: none;
    transition: gap 0.3s ease;
    margin-top: auto;
}

.hp-cs-card-link:hover {
    gap: 10px;
}

.hp-cs-card-link:visited {
    color: #822433;
}

.hp-drag-scroll {
    cursor: grab;
}

.hp-drag-scroll.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
}

.hp-drag-scroll.is-dragging a,
.hp-drag-scroll.is-dragging button {
    pointer-events: none !important;
}

@media screen and (max-width: 768px) {
    .hp-cs-scroll {
        flex-direction: column;
    }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .hp-cs-card-image img {
        height: 160px;
    }

    .hp-cs-card-title a {
        font-size: 15px;
        line-height: 21px;
    }
}

/* ==========================================================================
   Header Restructure - Logo Left / Nav Centre / CTA Right
   Add these styles to your stylesheet (they override existing header rules)
   ========================================================================== */


/* -- Header layout -- */

header#masthead {
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e1e1e;
    padding: 5px 5%;
    z-index: 99999;
    transition: all .4s ease;
    top: 0;
}

.site-branding {
    width: auto;
    flex-shrink: 0;
    z-index: 2;
}

.desktop_navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 1;
}

#primary-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
}

#primary-menu li a {
    font-weight: 500;
    font-family: 'Gotham';
    color: #fff;
    text-decoration: none;
    padding: 0 13px;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

#primary-menu li a:hover {
    color: #822433;
}

#primary-menu .current-menu-item a {
    color: #822433;
}


/* -- Right-hand actions (CTA + mobile hamburger) -- */

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    z-index: 2;
}

.header-cta-btn {
    display: inline-block;
    background: #822433;
    color: #fff !important;
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.header-cta-btn:hover {
    background: #4a548a;
}

.header-cta-btn:visited {
    color: #fff !important;
}


/* -- Mobile menu hidden on desktop -- */

.mobile-menu {
    display: none;
}

/* =============================================
   MOBILE MENU - Overlay & Navigation
   ============================================= */

/* Header right actions */
.header-right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.header-cta-btn {
    font-family: 'Gotham';
    font-size: 14px;
    color: #fff;
    background: #822433;
    padding: 10px 24px;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    white-space: nowrap;
}

.header-cta-btn:hover {
    background: #6b1d2a;
}

.mobile-menu {
    display: none;
}

.mobile-menu .hamburger {
    padding: 5px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

/* Overlay fullscreen */
.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    background-color: #1e1e1e;
    overflow-x: hidden;
    overflow-y: auto;
    transition: height 0.4s ease;
    display: flex;
    flex-direction: column;
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5%;
    flex-shrink: 0;
}

.overlay-header .custom-logo-link img {
    max-height: 50px;
    width: auto;
}

.overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.overlay-close:hover {
    opacity: 0.7;
}

/* Overlay nav links */
.overlay .overlay-content {
    padding: 2rem 5% 0;
    flex-grow: 1;
    margin-top: 0;
}

.overlay .overlay-content #mobile-primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.overlay .overlay-content #mobile-primary-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.overlay .overlay-content #mobile-primary-menu li a {
    font-family: 'Gotham';
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 16px 0;
    transition: color 0.3s ease;
}

.overlay .overlay-content #mobile-primary-menu li a:hover,
.overlay .overlay-content #mobile-primary-menu li.current-menu-item > a {
    color: #822433;
}

/* Sub-menus in overlay */
.overlay .overlay-content #mobile-primary-menu .sub-menu {
    display: none;
    position: static;
    width: 100%;
    background: transparent;
    padding: 0 0 0 20px;
    border-radius: 0;
}

.overlay .overlay-content #mobile-primary-menu .sub-menu-open > .sub-menu {
    display: block;
}

.overlay .overlay-content #mobile-primary-menu .sub-menu li {
    padding: 0;
    border-bottom: none;
}

.overlay .overlay-content #mobile-primary-menu .sub-menu li a {
    font-family: 'gothambook';
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 0;
}

.overlay .overlay-content #mobile-primary-menu .sub-menu li a:hover {
    color: #822433;
}

/* Dropdown arrow for parent items */
.overlay .overlay-content #mobile-primary-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overlay .overlay-content #mobile-primary-menu .menu-item-has-children > a::after {
    content: '+';
    font-size: 20px;
    color: #822433;
    transition: transform 0.3s ease;
    position: static;
    left: auto;
}

.overlay .overlay-content #mobile-primary-menu .sub-menu-open > a::after {
    content: '-';
}

/* Overlay footer */
.overlay-footer {
    padding: 2rem 5% 3rem;
    flex-shrink: 0;
}

.overlay-cta-btn {
    font-family: 'Gotham';
    font-size: 16px;
    color: #fff;
    background: #822433;
    padding: 14px 32px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease;
    margin-bottom: 24px;
}

.overlay-cta-btn:hover {
    background: #6b1d2a;
}

.overlay-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overlay-contact-link {
    font-family: 'gothambook';
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

.overlay-contact-link:hover {
    color: #fff;
}

.overlay-contact-link svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* =============================================
   MOBILE BREAKPOINT - max 768px
   ============================================= */
@media screen and (max-width: 768px) {
    .mobile-menu {
        display: block !important;
    }

    .header-cta-btn {
        display: none;
    }

    header#masthead {
        display: flex !important;
        justify-content: space-between;
    }

    .site-branding {
        width: auto !important;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        background-color: #fff !important;
    }
}

/* =============================================
   TABLET BREAKPOINT - 768px to 1300px
   ============================================= */
@media screen and (min-width: 769px) and (max-width: 1300px) {
    .mobile-menu {
        display: block !important;
    }

    .desktop_navigation {
        display: none;
    }

    header#masthead {
        display: flex !important;
        justify-content: space-between;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        background-color: #fff !important;
    }
}


/* ==========================================================================
   Mobile Header
   ========================================================================== */

@media screen and (max-width: 768px) {
    header#masthead {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 5% !important;
    }

    .site-branding {
        width: auto !important;
    }

    .desktop_navigation {
        display: none !important;
    }

    .header-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .header-cta-btn {
        font-size: 11px !important;
        padding: 8px 14px !important;
    }

    .mobile-menu {
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        text-align: right;
    }

    .mobile-menu .hamburger {
        padding: 5px;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        background-color: #fff !important;
    }
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1300px) {
    .desktop_navigation {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        flex: 1 !important;
    }

    #primary-menu li a {
        padding: 0 8px !important;
        font-size: 12px !important;
    }

    .header-cta-btn {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
}

/* ------ Responsive: About Page New Sections ------ */

@media screen and (max-width: 1400px) {
    .about_team_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .about_team_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about_community_grid {
        grid-template-columns: 1fr;
    }
    
    .inner_about_charity {
        flex-direction: column;
    }
    
    .about_charity_left {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .about_team_section,
    .about_community,
    .about_charity {
        padding: 3rem 5%;
    }
    
    .about_team_grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about_team_card_image {
        height: 280px;
    }
    
    .about_team_header h2,
    .about_community_header h2 {
        font-size: 30px;
        line-height: 35px;
    }
    
    .about_charity_right h2 {
        font-size: 28px;
        line-height: 33px;
    }
    
    .inner_about_charity {
        gap: 2rem;
    }
    
    .about_community_grid {
        gap: 1.5rem;
    }
    
    /* Show overlay by default on mobile since no hover */
    .about_team_card_overlay {
        transform: translateY(0);
        background: linear-gradient(0deg, rgba(107, 29, 42, 0.95) 0%, rgba(107, 29, 42, 0.8) 40%, transparent 100%);
    }
}


/* ==========================================================================
   Responsive - Contact Page - Tablet
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .contact-hero {
        padding: 10rem 5% 4rem;
    }

    .contact-visit,
    .contact-who,
    .contact-details,
    .contact-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .contact-who-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Responsive - Contact Page - Mobile
   ========================================================================== */

@media screen and (max-width: 768px) {
    .contact-hero {
        padding: 8rem 5% 3rem;
    }

    .contact-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .contact-hero-description {
        font-size: 14px;
        line-height: 22px;
    }

    .contact-map-inner iframe {
        height: 300px;
    }

    .contact-visit,
    .contact-who,
    .contact-details,
    .contact-cta {
        padding: 3rem 5%;
    }

    .contact-visit h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .contact-who-header h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-who-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-cta-content h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .contact-cta-buttons {
        flex-direction: column;
    }

    .contact-cta-btn-primary,
    .contact-cta-btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Responsive - Tablet (768px - 1300px)
   ========================================================================== */

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

    .tm-hero {
        padding: 9rem 5% 4rem;
    }

    .tm-hero-inner {
        gap: 2.5rem;
    }

    .tm-hero-left {
        width: 260px;
        position: relative;
        top: auto;
    }

    .tm-photo-container img {
        height: 320px;
    }

    .tm-name {
        font-size: 36px;
        line-height: 40px;
    }

    .tm-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tm-testimonials,
    .tm-jobs,
    .tm-cta {
        padding-left: 5%;
        padding-right: 5%;
    }

    .tm-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tm-jobs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Responsive - Mobile (below 768px)
   ========================================================================== */

@media screen and (max-width: 767px) {

    .tm-hero {
        padding: 7rem 5% 3rem;
    }

    .tm-hero-inner {
        display: block;
    }

    .tm-hero-left {
        width: 100%;
        position: relative;
        top: auto;
        margin-bottom: 2rem;
    }

    .tm-photo-container img {
        height: 300px;
    }

    .tm-action-buttons {
        gap: 6px;
    }

    .tm-action-btn {
        padding: 12px 8px;
    }

    .tm-name {
        font-size: 32px;
        line-height: 36px;
    }

    .tm-job-title {
        font-size: 15px;
        line-height: 22px;
    }

    .tm-contact-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .tm-details-grid {
        grid-template-columns: 1fr;
    }

    .tm-detail-item {
        padding: 1.25rem 0;
    }

    .tm-testimonials {
        padding: 3rem 5%;
    }

    .tm-testimonials-inner h2 {
        font-size: 30px;
        line-height: 35px;
    }

    .tm-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .tm-testimonial-card {
        padding: 1.5rem;
    }

    .tm-jobs {
        padding: 3rem 5%;
    }

    .tm-jobs-header h2 {
        font-size: 30px;
        line-height: 35px;
    }

    .tm-jobs-grid {
        grid-template-columns: 1fr;
    }

    .tm-cta {
        padding: 3rem 5%;
    }

    .tm-cta-content h3 {
        font-size: 28px;
        line-height: 33px;
    }

    .tm-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .tm-cta-btn-primary,
    .tm-cta-btn-secondary {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   Responsive additions - append inside or after existing sector breakpoints
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .sector-intro {
        padding-left: 5%;
        padding-right: 5%;
    }

    .sector-testimonials {
        padding-left: 5%;
        padding-right: 5%;
    }

    .sector-intro-inner {
        gap: 3rem;
    }

    .sector-intro-left {
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    .sector-intro {
        padding: 3rem 5%;
    }

    .sector-testimonials {
        padding: 3rem 5%;
    }

    .sector-intro-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .sector-intro-left {
        width: 100%;
    }

    /* On mobile the secondary image sits below rather than overlapping */
    .sector-intro-image-secondary {
        position: relative;
        bottom: auto;
        right: auto;
        width: 60%;
        margin: 1rem auto 0;
        border: none;
    }

    .sector-intro-right {
        padding-bottom: 0;
    }

    .sector-intro-content h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .sector-testimonials-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .sector-testimonial-card {
        padding: 2rem 1.5rem;
    }

    .sector-testimonial-text {
        font-size: 16px;
        line-height: 26px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .sjl-hero {
        padding: 10rem 5% 3rem;
    }

    .sjl-content {
        padding: 3rem 5%;
    }

    .sjl-sidebar {
        width: 280px;
        min-width: 280px;
    }

    .sjl-related {
        padding: 3rem 5% 4rem;
    }
}

@media screen and (max-width: 768px) {
    .sjl-hero {
        padding: 8rem 5% 3rem;
    }

    .sjl-hero-title {
        font-size: 28px;
        line-height: 34px;
    }

    .sjl-hero-meta {
        flex-direction: column;
        gap: 8px;
    }

    .sjl-content {
        padding: 2rem 5%;
    }

    .sjl-content-inner {
        display: block;
    }

    .sjl-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-top: 2rem;
    }

    .sjl-meta-bar {
        flex-direction: column;
        gap: 6px;
    }

    .sjl-related {
        padding: 3rem 5% 3rem;
    }

    .sjl-related-heading {
        font-size: 22px;
    }

    .sjl-related-card {
        min-width: 280px;
    }

    .sjl-consultant-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sjl-consultant-socials {
        justify-content: center;
    }

    .sjl-consultant-profile-link {
        justify-content: center;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1300px) {
    .jobs-hero {
        padding: 10rem 5% 4rem;
    }

    .jobs-section {
        padding: 3rem 5% 5rem;
    }

    .jobs-sidebar {
        width: 260px;
        min-width: 260px;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .jobs-hero {
        padding: 8rem 5% 3rem;
    }

    .jobs-hero h1 {
        font-size: 35px;
        line-height: 40px;
    }

    .jobs-hero-subtitle {
        font-size: 16px;
    }

    .jobs-section {
        padding: 2rem 5% 4rem;
    }

    .jobs-section-inner {
        display: block;
    }

    .jobs-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        margin-bottom: 2rem;
    }

    .jobs-listings-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .jobs-card-meta {
        flex-direction: column;
        gap: 6px;
    }

    .jobs-card-title {
        font-size: 16px;
    }
}







@media screen and (max-width:992px){
    .privacy-policy article, article#post-525 {
    padding: 4rem 5% 3rem !important;
}
  .sub-menu {
    position: relative !important;
}
.menu li.menu-item-has-children>a::after {
    left: auto !important;
    width: auto !important;
    display: block !important;
    text-align: right !important;
    position: absolute !important;
    top: 10px !important;
    right: 30px !important;
    cursor: none !important;
    font-size: 16px;
    padding-left: 100% !important;
    z-index: -1;
}
.sub-menu {
    padding-left: 20px;
}
.sub-menu li {
    padding: 0 !important;
}
}

@media screen and (max-width: 768px){
	.talk_tothem {
	padding: 3rem 5% !important;
}
	.inner_talk_tothem {
	display: block !important;
}
	.form_contact,.caal_email{
		width: 100% !important;
	}
	.main_call_title {
		display: block !important;
	width: 100% !important;
}
	.team_email a {
	font-size: 19px !important;
}
	.form_contact {
	padding: 1rem !important;
}
	.application_button.button {
	margin-bottom: 2rem !important;
}
	.jobs_page_row .job-widget-card {
	padding: 1rem !important;
}
	.case_studies_banner {
	padding:10rem 5% 3rem;
	background: #1e1e1e;
	text-align: center;
	color: #fff;
}
.single-job_listing .page_title_case {
	font-size: 35px !important;
	line-height: 40px;
}
	.custom-logo {
	position: relative;
	z-index: 9;
}
	.book_call {
	padding-bottom: 3rem !important;
}
	.bottom-footer {
	padding-top: 3rem !important;
}
	.left-services-block h4,.left-success_stories h4 {
	margin-top: 0;
}
    .search_jobs {
    display: block !important;
}
.left_book_call {
    font-size: 30px !important;
}
    .hexagon-img {
    display: none;
}
.tab-content p > img {
    height: auto !important;
    padding: 2rem 0;
}
	.left-services-block img, .left-success_stories img {
	height: auto !important;
}
	.left-success_stories {
	width: 100% !important;
}
	#headCV,
    #headCVptbr {
	padding: 2rem 5% !important;
	width: auto !important;
}
    .button.wp_job_manager_send_application_button {
        margin-bottom: 0 !important;
    }
    .post-content-row {
	display: block !important;
	padding: 1rem 5% !important;
}
    .jobs_page_row .job-widget-card {
        width: 100% !important;
    }
    .jobs_page_row .job_listings {
        display: block !important;
    }
    .jobs_page_row.job-page-search {
        padding: 3rem 5% 3rem !important;
    }
    .right_mission_about, .left_mission_about {
        width: 100% !important;
    }
    .page_title_about {
        font-size: 50px !important;
        line-height: 50px;
    }
    .pcr-sidebar, .pcr-main {
        width: 100% !important;
    }
    .main_content_case {
	padding: 2rem 5% 0 !important;
	display: block !important;
}
    .our_mission_about {
        padding: 1rem 5% 3rem!important;
        display: block !important;
    }
    .about_banner {
        padding: 7rem 5% 3rem !important;
    }
    .about_banner_desc{
        width: 100% !important;
    }
    .column-footer {
        width: 100% !important;
        padding-bottom: 2rem;
    }
    .bottom-footer {
        display: block !important;
    }
    .book_call {
        align-items: center;
    }
    #colophon {
        padding: 3rem 5% 0rem !important;
    }
    .casestudy_data {
        width: 100% !important;
        padding-bottom: 3rem;
    }
    .right_case_study {
        display: block !important;
        padding-top: 3rem;
        width: 100% !important;
    }
    .success_Stories_bottom .slick-next.slick-arrow {
        left: 15% !important;
    }
    .right_succesS_stories, .left_tetsimonia_block {
        width: 100% !important;
    }
    .inner_success_stories {
        padding: 0 5% !important;
        display: block !important;
    }
    .success_Stories_bottom {
        display: block;
        align-items: center;
        padding: 3rem 5% 0rem 5% !important;
        justify-content: space-between;
    }
    .success_stories_top {
        padding: 3rem 0% 0 !important;
    }
    .our_mission {
        padding: 3rem 5% !important;
    }
    .inner_our_misison {
        display: block !important;
    }
    .banner_right_block {
        text-align: center !important;
    }
    .desc_repeater,.repater_title,.years{
        padding-bottom: 1rem;
        width: 100% !important;
    }
    .our_services {
        padding: 3rem 5% !important;
    }
    .inner_serices_repater {
        display: block !important;
    }
    .right_services-block, .left-services-block,
    .right-mission-block,.left-mission-block {
        width: 100% !important;
    }
    .services_repater {
        padding-top: 3rem !important;
    }
    .inner_our_services {
        display: block !important;
    }
    .right_mission_about {
        padding-top: 2rem;
    }
    .banner_left_text h1,
    .right_services-block h2,
    .right-mission-block h2,
    .left_mission_about h2 {
        font-size: 35px !important;
        line-height: 40px !important;
    }
    .right_talemt_block, .left_marketing_tal {
        width: 100% !important;
    }
    .left_marketing_tal {
        padding-bottom: 2rem;
    }
    .testimonial_quote_text p {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .makes-different-row {
        padding: 3rem 5% !important;
    }
    .content-tab-row.row {
        padding-top: 0 !important;
    }
    .left_btn button {
        font-size: 16px;
        text-align: left;
    }
    .top_testimonial_img img {
        height: auto !important;
    }
    .top_testimonial_img {
        padding-bottom: 2rem !important;
    }
    .testimonial_quote_text, .testimonial_quote, .tets-authorname, .tets-author {
        padding-left: 0 !important;
    }
    .left_marketing_tal h2 {
        font-size: 35px !important;
        line-height: 40px !important;
        margin-top: 0;
    }
    .marketing_talent {
        padding: 3rem 5% !important;
        display: block !important;
    }
    .titele_desc {
        padding-left: 1rem;
    }
    .member_image {
        padding-bottom: 1rem;
    }
    .member_image img {
        height: auto !important;
    }
    .left_team_title {
        padding-bottom: 2rem;
    }
    .team_data {
        width: 100% !important;
    }
    .out_team {
        padding: 3rem 5% 1px !important;
        display: block !important;
    }
    .right_allteam,.left_team_title{
        width: 100% !important;
        display: block !important;
    }
    .generation_title {
        font-size: 20px !important;
    }
    .left-generation-block h2 {
        font-size: 35px !important;
        line-height: 40px !important;
        margin: 0;
    }
    .right-generation-block {
        padding-top: 2rem;
    }
    .generation-talent {
        padding: 3rem 5% !important;
        display: block !important;
    }
    .right-generation-block, .left-generation-block{
        width: 100% !important;
    }
    #about_values .right_services-block {
        text-align: left !important;
        font-size: 35px !important;
        line-height: 40px !important;
        padding-top: 1rem;
    }
    .inner_main_banner {
        display: block !important;
    }
    .banner_right_block, .banner_left_block {
        width: 100% !important;
    }
 .main-banner {
	padding: 8rem 5% 0 5% !important;
}
    .header-right-nav , .site-branding{
        width: auto !important;
    }
    .desktop_navigation {
        display: none;
    }
    .mobile-menu .hamburger {
        padding: 5px;
    }
    .mobile-menu {
        display: block !important;
        text-align: right;
        width: 100%;
        position: absolute;
        top: 22%;
        right: 5%;
    }
    .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
        background-color: #fff !important;
    }
    .tab-content h3, .tab-content > p {
        font-size: 13px;
        margin: 0;
    }
    .Case_Studies {
        padding: 3rem 5% 0 !important;
    }
    .case_title_desc {
        display: block;
        padding-bottom: 3rem !important;
    }
    .left_case_title,.left_case_title{
        width: 100% !important;
    }
    .right_case_studies, .big_left_case_study {
        width: 100% !important;
        display: block !important;
    }
    .all_case_studies {
        display: block !important;
    }
    .tab {
        width: 25% !important;
    }
    .tab_content_right {
        width: 60% !important;
    }
    .Download_Our_Ebook {
        padding: 3rem 5% 3rem !important;
        display: block !important;
    }
    .right_download_ebbok, .download_left_ebook {
        width: 100% !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }
    .download_left_ebook {
        padding: 1rem !important;
    }
    .download_left_ebook h2 {
        font-size: 30px !important;
        line-height: 35px !important;
    }
    .page_title_case {
        font-size: 45px !important;
        line-height: 50px;
    }
    .all_case_page .case_study_image img {
        height: auto !important;
    }
    .case_study_image img {
        height: auto !important;
    }
    .all_case_page .casestudy_data {
        margin-bottom: 0rem !important;
    }
    .all_case_page {
        padding: 3rem 5% 0 !important;
        display: block !important;
    }
}

@media screen and (min-width:768px) and (max-width:1300px){
    .right_allteam {
        width: 80% !important;
    }
    .main-banner {
        padding: 5rem 0 0 5 !important;
    }
    .Download_Our_Ebook{
    padding-bottom: 5rem !important;
}
    .our_mission,.our_services,
    .generation-talent,
    .our_services,
    .our_mission_about,
    .Download_Our_Ebook,
    .Case_Studies,
    .makes-different-row,
    .marketing_talent,
    .all_case_page,
    .jobs_page_row.job-page-search,
    .post-content-row{
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    #colophon {
        padding: 5rem 5% 2rem !important;
    }
    .success_Stories_bottom {
        padding: 5rem 1% 5rem 10% !important;
    }
    .desktop_navigation {
        width: 65% !important;
    }
    .header-right-nav {
        width: 30% !important;
    }
    #primary-menu li a {
        padding: 0 .5rem !important;
    }
}