:root {
    --NR-Careers-Grey:#403C3D;
    --NR-Careers-Black: #000;
    --NR-Careers-Dark-Blue:#005172;
    --NR-Careers-Darker-Blue:#00334A;
    --NR-Careers-Light-Grey:#D9D9D9;
    --NR-Careers-Off-White:#F6F6F6;
    --NR-Careers-Orange:#E35100;
    --NR-Careers-Purple:#951B81;
    --NR-Careers-Light-Purple:#EEE4EC;
    --NR-Careers-Dark-Purple:#5E1151;
    --NR-Careers-Red:#BB1637;
    --NR-Careers-Dark-Red:#7A0E24;
    --NR-Mid-Grey:#9D9D9C;
    --White:#FFFFFF;
    --NR-Careers-Light-Blue:#E8F8FF;
    --NR-Careers-Pastel-Orange: #FFEEE5;
    --NR-Careers-Pastel-Blue: #BEE3F5;
    --u-color-1: #E8F8FF;
--u-color-2: var(--rw-palette-orange-90);
--u-color-3: var(--rw-palette-orange-100);
    

}
@font-face {
    font-family: 'Network Rail Sans';
    src: url('fonts/NetworkRailSans.woff2') format('woff2'),
        url('fonts/NetworkRailSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Network Rail Sans';
    src: url('fonts/NetworkRailSans-BoldItalic.woff2') format('woff2'),
        url('fonts/NetworkRailSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Network Rail Sans';
    src: url('fonts/NetworkRailSans-Italic.woff2') format('woff2'),
        url('fonts/NetworkRailSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Network Rail Sans';
    src: url('fonts/NetworkRailSans-Bold.woff2') format('woff2'),
        url('fonts/NetworkRailSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Network Rail Sans';
    src: url('fonts/NetworkRailSans-Bold.woff2') format('woff2'),
        url('fonts/NetworkRailSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* latin-ext */

@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-italic-ext-400.woff") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/Noto_Sans/noto-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.job-details p {
    line-height:150%;
}

li {
    font-size:inherit;
    line-height:150%;
}

.text-white {
    color: var(--Color-White, #FFF);
}

.text-black {
    color: var(--Color-Black, #000);
}

.text-r-sb {
    /* Text/Regular/Semi Bold */
    font-family: "Network Rail Sans", "Noto Sans";
    font-size: var(--Text-Sizes-Text-Regular, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: 0.32px;
}

.text-h5-regular {


    /* Heading/Regular/H5 */
    font-family: "Network Rail Sans", "Noto Sans";
    font-size: var(--Text-Sizes-Heading-5, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 33.6px */
}

.text-h5-bold,
.dashboard-item .t-ContentRow-title {
 

/* Heading/Bold/H5 bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-5, 24px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
}

.text-h4-bold, .vacancy .t-ContentRow-title,  .t-HeroRegion-title {
    /* Heading/Bold/H4 Bold */
    font-family: "Network Rail Sans", "Noto Sans";
    font-size: var(--Text-Sizes-Heading-4, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
}

.text-h3-bold  {
    /* Heading/Bold/H3 Bold */
    font-family: "Network Rail Sans";
    font-size: var(--Text-Sizes-Heading-3, 40px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
}

.text-h2-bold, .heading-large .t-Region-title{
    /* Heading/Bold/H2 Bold */
     font-family: "Network Rail Sans", "Noto Sans";
    font-size: var(--Text-Sizes-Heading-2, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 57.6px */
}

.text-h1-bold, h1 {
  

/* Heading/Bold/H1 Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-1, 56px);
font-style: normal;
font-weight: 700;
line-height: 120%; /* 67.2px */
}

.text-large-bold {
 

/* Text/Large/Bold */
 font-family: "Network Rail Sans", "Noto Sans";
font-size: var(--Text-Sizes-Text-Large, 20px);
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
}



.text-large-semibold {
    /* Text/Large/Semi Bold */
     font-family: "Network Rail Sans", "Noto Sans";
    font-size: var(--Text-Sizes-Text-Large, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 22px */
}

.text-small-semibold {
    /* Text/Small/Semi Bold */
font-family: "Network Rail Sans", "Noto Sans";;
font-size: var(--Text-Sizes-Text-Small, 14px);
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
}

.text-regular-normal, .job-description {
    color: var(--NR-Careers-Grey, #403C3D);

/* Text/Regular/Normal */
font-family: "Network Rail Sans", "Noto Sans";
font-size: var(--Text-Sizes-Text-Regular, 16px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.text-medium-normal, ul.text-medium-normal li, ol.text-medium-normal li {
   /*color: var(--NR-Careers-Grey, #403C3D);*/

/* Text/Medium/Normal */
font-family: "Network Rail Sans", "Noto Sans";
font-size: var(--Text-Sizes-Text-Medium, 18px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 27px */
letter-spacing: 0.36px;
}

   .text-medium-semibold {
/* Text/Medium/Semi Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Text-Medium, 18px);
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
letter-spacing: 0.28px;
    }

.candidate .t-Region-titleButton {
    color: var(--NR-Careers-Grey, #403C3D);

/* Heading/Bold/H5 bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-5, 24px);
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
}

.bg-orange {  
    background: var(--NR-Careers-Orange, #E35100);     
}

.bg-light-orange,
.bg-light-orange .container {
    background: var(--NR-Careers-Pastel-Orange, #FFEEE5);
}

.bg-dark-blue {

    background: var(--NR-Careers-Dark-Blue, #005172);   
}

.bg-light-blue {

    background: var(--NR-Careers-Light-Blue, #E8F8FF);
}

.candidate .t-Region-header, .candidate .t-Region {
    border-color:var(--NR-Careers-Light-Blue, #E8F8FF);
}

.candidate .t-Region {
    border: 2px solid var(--NR-Careers-Pastel-Blue, #BEE3F5);

}

.candidate .t-Region .t-Region {
    border:0;
}
.candidate .t-Region--stacked>.t-Region-header {
    --ut-region-header-border-width: 0px;
    border-radius: 0;
}


.candidate .t-Region-header {
    background-color: var(--NR-Careers-Pastel-Blue, #BEE3F5);
}

.candidate .t-Region--hideShow.is-collapsed>.t-Region-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bg-purple {
    background: var(--NR-Careers-Purple, #951B81);
}

.bg-light-purple {
    background: #EEE4EC;
}

 .job-details-container, .job-details-container .container{
      background: var(--White, #FFF);
}

.bg-grey, .bg-grey .container, .bg-light-grey, .bg-light-grey .container, #key-info .container {
    background: var(--NR-Careers-Off-White, #F6F6F6);
}

.bg-white, .bg-white .container, .job-details-container{
      background: var(--White, #FFF);
}
 .img-responsive {
    max-width: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
        font-family: "Network Rail Sans", "Noto Sans";
    color: var(--NR-Careers-Grey, #403C3D);
    background-color: #333;
}

.t-Region-title {
    color: var(--NR-Careers-Grey, #403C3D);
}

.t-Body-mainContent, .t-Body-main {
    background-color: #fff;
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .header-container {
   /* max-width: 1440px;*/
    background-color:#fff;
}

.job-roles .container,
.person-img  .container,
.bg-light-blue .container,
.bg-light-purple .container  {
    background-color: transparent;
}

/* Header Styles */
.header {
    background-color: #fff;
            position: relative;
    z-index: 1000;
}

.header-container {
 
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    gap: 40px;
    max-width: 1440px;
}

    /* Logo */
.logo {
    width: 95px;
    height: 42px;
    display: flex;
    align-items: center;
}

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

/* Desktop Navigation */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
    justify-content: flex-end;         
}

.nav-desktop a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 3px;
    padding-left: 0;
    padding-right:0;
    border-bottom: 1px solid transparent;
    border-radius: 0;

}

.t-Header-navBar--start .t-Button {
        margin-left:32px;
        font-size: 16px;
}

.nav-desktop .t-Button {
    font-weight: 400;;
}


.nav-desktop .t-Button:hover {
    background-color: transparent;
     border-bottom-color: #333;   
}

.nav-desktop .is-active  a {
    border-bottom-color: #333;   
}

/* Action Buttons */
.nav-actions {
    display: flex;
    gap: 15px;
}

.nav-actions a {
    margin-left: 0;;
}

.btn, .navbtn .t-Button, .navbtn .mobile-nav-parent {
    display: inline-flex;       
    background: var(--NR-Careers-Dark-Blue, #005172);
    color: white;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    cursor: pointer;
    transform: skewX(-11.745deg);
    transition: background-color 0.3s ease;
    height: 40px;     
    font-family: "Noto Sans";         
    justify-content: center;
    align-items: center;
    gap: 10px;
    line-height: 24px;
    border-radius: 0;
}

.btn:hover, .navbtn:hover .t-Button:hover {
     background: var(--NR-Careers-Darker-Blue, #00334A);
    
}

.navbtn .mobile-nav-parent {
    width:100%;
}

.btn-purple {
   /* border: 2px solid var(--NR-Careers-Purple, #951B81);*/
background: var(--NR-Careers-Purple, #951B81);
}

.btn-purple:hover {
    background: var(--NR-Careers-Dark-Purple, #5E1151);

}

.btn-white {

background: var(--White, #FFF);
color: var(--NR-Careers-Grey, #403C3D);
}

.btn-white:hover {
    color:#fff;
}

.navbtn .t-Button .t-Icon, .nav-desktop .t-Button .t-Icon {
    display: none;
}

.btn span, .navbtn span {
    display: inline-block;
    transform: skewX(11.745deg);
}

.btn-register .t-Button, .btn-border {
    background-color: #fff;
    color: #333;
    border: 2px solid #005172;
}

.btn-register:hover .t-Button:hover {
   background: var(--NR-Careers-Dark-Blue, #005172);
    color: #fff;
    border: 2px solid #005172;
}

.btn-border {
    border: 2px solid rgba(0, 81, 114, 0.25);
    color: var(--NR-Careers-Dark-Blue, #005172);
    
}
.btn-border:hover {
    
    background: var(--NR-Careers-Dark-Blue, #005172);
    color:white;
    
}


.btn-purple-border {
    border: 2px solid rgba(149, 27, 129, 0.25);

color: var(--NR-Careers-Purple, #951B81);

}

.btn-purple-border:hover  {
    border: 2px solid var(--NR-Careers-Purple, #951B81);

background: var(--NR-Careers-Purple, #951B81);
color:#fff;

}

.btn-white.hover-purple:hover {
    background: var(--NR-Careers-Light-Purple, #EEE4EC);
    color:var(--NR-Careers-Purple, #951B81);

}

.btn-register:hover .t-Button{
    background-color: #f5f5f5;
}

.btn-login:hover .t-Button{
    background-color: #005580;
}

.t-Header-navBar--center .t-NavigationBar {
    column-gap:1rem;
}

.t-Header-controls {display: none;}

/* Mobile Menu Toggle */
.mobile-toggle {
    display: none;         
    background: var(--NR-Careers-Dark-Blue, #005172);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}

.mobile-toggle:hover {
    background-color: #005580;
}

/* Mobile Navigation */
.nav-mobile {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: #fff;
    overflow-y: auto;
    padding: 20px;
}

.nav-mobile.active {
    display: block;
}

.nav-mobile a {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    font-size: 15px;
 
}


/* Mobile action buttons */
.mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.mobile-actions .btn {
    width: 100%;
    padding: 15px;
    text-align: center;
}


       

.t-Body-contentInner:empty {
    display: none;
}

.ms-footer {
    padding:0;
    border:0;
    background: #fff;
    grid-area: content-footer;
    grid-template-areas: "footer-body" "footer-top";
    grid-template-columns:1fr;
        border-top: 1px solid var(--NR-Careers-Grey, #403C3D);
}

.ms-footer .container{

    padding:80px 0px;
    max-width:1440px;
}

.ms-footer .t-Button {
    padding-inline-start: 0;
    padding-inline-end: 24px;
    color: var(--NR-Careers-Grey, #403C3D);
    font-size: var(--Text-Sizes-Text-Small, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.ms-footer .t-Button:hover {
    background-color: #fff;
    text-decoration: none;
}

.ms-footer .t-Button .t-Icon {
    display: none;
}

.social-links a {
    margin-left:12px;
}

.credits {
    border-top:1px solid #D9D9D9;
    padding-top:32px;
    margin-top:32px;
}

.footer-title {
    color: var(--NR-Careers-Grey, #403C3D);
    font-size: var(--Text-Sizes-Text-Regular, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: 0.32px;
    display: inline-block;
    padding-block-start: 32px;;
    padding-block-end:16px ;
}

.copy-text {
    color: var(--NR-Mid-Grey, #9D9D9C);
    font-size: var(--Text-Sizes-Text-Small, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}

.policy-links  .t-Button {
    padding-inline-start: 24px;
    padding-inline-end: 0;

}





.nav-mobile .t-NavigationBar {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    background-color: transparent;
}

.nav-mobile .t-NavigationBar-item {
    width: 100%;
    margin:5px 0;
    padding: 0;
}

/* Style the navigation links */
/*.nav-mobile .t-NavigationBar-item .t-Button {
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    padding: 15px 0;
    margin: 0;
    color: #403C3D;
    font-size: 15px;
    font-weight: normal;
    justify-content: flex-start;
    transition: color 0.3s;
    box-shadow: none;
}*/

/* Remove APEX button hover effects */
.nav-mobile .t-NavigationBar-item .t-Button:hover,
.nav-mobile .t-NavigationBar-item .t-Button:focus,
.nav-mobile .t-NavigationBar-item .t-Button:active {
    background-color: transparent;
    color: #0066a1;
    box-shadow: none;
    outline: none;
}

/* Hide icons if you don't need them */
/*.nav-mobile .t-NavigationBar-item .t-Icon {
    display: none;
}
*/
/* Style button labels */
/*.nav-mobile .t-NavigationBar-item .t-Button-label {
    font-size: 15px;
    color: #403C3D;
    font-weight: normal;
}*/

/* Hide badges 
.nav-mobile .t-NavigationBar-item .t-Button-badge {
    display: none;
}*/

/* Style the dropdown arrow for "Find a Job" */
.nav-mobile .t-NavigationBar-item .icon-down-arrow,
.nav-mobile .t-NavigationBar-item .a-Icon.icon-down-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 10px;
}

/* Active/Current page styling */
.nav-mobile .t-NavigationBar-item .is-active,
.nav-mobile .t-NavigationBar-item .t-Button[aria-current="page"] {
    color: #0066a1;
    font-weight: 500;
}

/* Dropdown menu styling (if you have submenus) */
.nav-mobile .apex-rds {
    background-color: #f9f9f9;
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding-left: 20px;
    position: static;
    width: 100%;
}

.nav-mobile .apex-rds .a-Menu-item {
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.nav-mobile .apex-rds .a-Menu-label {
    color: #333;
    font-weight: normal;
}

.nav-mobile .apex-rds .a-Menu-item:hover .a-Menu-label {
    color: #0066a1;
}



/* Remove any APEX default visual indicators */
.nav-mobile .t-NavigationBar-item .t-Button::before,
.nav-mobile .t-NavigationBar-item .t-Button::after {
    display: none;
}

.nav-mobile .t-NavigationBar-item .t-Button.is-active::before,
.nav-mobile .t-NavigationBar-item .t-Button[aria-current="page"]::before {
    display: none;
}

/* Ensure proper spacing and alignment */
.nav-mobile .t-NavigationBar-item .t-Button {
    display: flex;
    align-items: center;
    height: auto;
    min-height: auto;
}

/* Remove any APEX button animations */
.nav-mobile .t-NavigationBar-item .t-Button {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

/* Override any theme-specific button styles */
.nav-mobile .t-Button--navBar {
    text-transform: none;
    letter-spacing: normal;
}



/*homepage */

.content-wrapper {
    max-width:1440px;
    margin:0 auto;
}

.our-roles {
    display: flex;
    padding:  80px 0 40px 0;
    align-items: center;

}

.our-roles-intro {
    color: var(--NR-Careers-Grey, #403C3D);
    text-align: center;
    font-size: var(--Text-Sizes-Heading-5, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
    max-width: 634px;
    margin:0 auto;
    padding: 0;
}

.homepage-card {
    border: 2px solid var(--NR-Careers-Red, #BB1637);
    background: var(--White, #FFF);
    margin-bottom: 24px;
}

.homepage-card.maintenance {
    border: 2px solid var(--NR-Careers-Purple, #951B81);

}

.homepage-card.corporate {
    border: 2px solid var(--NR-Careers-Dark-Blue, #005172);
}

.homepage-card .title-tab {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    background: var(--NR-Careers-Red, #BB1637);
    color: var(--White, #FFF);
    /* Heading/Bold/H4 Bold */

     font-size: clamp(20px, 1vw, 30px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 41.6px */
}

.homepage-card.maintenance .title-tab {
    background: var(--NR-Careers-Purple, #951B81);
}

.homepage-card.corporate .title-tab {
    background: var(--NR-Careers-Dark-Blue, #005172);
}
.card-header {
    display: flex;
    height: 250px;
    padding: 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background: url(images/home_corporate.jpg) lightgray top left no-repeat;
    background-size: cover;
}

.homepage-card.maintenance .card-header {
    background: url(images/maintenance-full.jpg) lightgray 50% / cover no-repeat;
}

.homepage-card.operations .card-header {

    background: url(images/home_operations.jpg) lightgray 50% / cover no-repeat;
}


.card-body {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    line-height: 150%;
}

.card-actions {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    align-self: stretch;
}

.btn-find-out{
    display: flex;
    height: 40px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border: 2px solid rgba(187, 22, 55, 0.25);
    background: var(--White, #FFF);
    color: var(--NR-Careers-Red, #BB1637);
    font-size: var(--Text-Sizes-Text-Regular, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    width:100%;
}

.btn-find-out:hover {
    background:var(--NR-Careers-Red, #BB1637);
    color:var(--White, #FFF);
}

.btn svg{
    width: 16px;
    height: 16px;

}

.btn-find-job {
    display: flex;
    height: 40px;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border: 2px solid var(--NR-Careers-Red, #BB1637);
    background: var(--NR-Careers-Red, #BB1637);
    font-size: var(--Text-Sizes-Text-Regular, 14px);
    color: var(--White, #FFF);
    width:100%;
  
}

.btn-find-job:hover {
      border: 2px solid var(--NR-Careers-Dark-Red, #7A0E24);
    background: var(--NR-Careers-Dark-Red, #7A0E24);
}

.homepage-card .btn .fa {
    font-size:14px;
}

.homepage-card.corporate .btn-find-out{
    border: 2px solid rgba(0, 81, 114, 0.25);
    background: var(--White, #FFF);
    color: var(--NR-Careers-Dark-Blue, #005172);
}

.homepage-card.corporate .btn-find-out:hover{
    
    color: var(--White, #FFF);
    background: var(--NR-Careers-Dark-Blue, #005172);
}


.homepage-card.corporate .btn-find-job {
    border: 2px solid var(--NR-Careers-Dark-Blue, #005172);
    background: var(--NR-Careers-Dark-Blue, #005172);

}

.homepage-card.corporate .btn-find-job:hover {
    border: 2px solid var(--NR-Careers-Darker-Blue, #00334A);
    background: var(--NR-Careers-Darker-Blue, #00334A);
}

.homepage-card.maintenance .btn-find-out{
    border: 2px solid rgba(149, 27, 129, 0.25);
    background: var(--White, #FFF);
    color: var(--NR-Careers-Purple, #951B81);
}

.homepage-card.maintenance .btn-find-out:hover {
       color: var(--White, #FFF);
    background: var(--NR-Careers-Purple, #951B81);

}

.homepage-card.maintenance .btn-find-job {
    border: 2px solid var(--NR-Careers-Purple, #951B81);
    background: var(--NR-Careers-Purple, #951B81);
}

.homepage-card.maintenance .btn-find-job:hover {
    border: 2px solid var(--NR-Careers-Dark-Purple, #5E1151);
    background: var(--NR-Careers-Dark-Purple, #5E1151);
}



.quick-links  {
    display: flex;
    padding: var(--Section-Padding-padding-section-small, 48px) var(--Page-Padding-padding-global, 64px) var(--Page-Padding-padding-global, 64px) var(--Page-Padding-padding-global, 64px);
    flex-direction: column;
    align-items: center;
    gap: 28px;
    background: var(--NR-Careers-Orange, #E35100);
}

.early-careers {
    background: var(--NR-Careers-Off-White, #F6F6F6);
    display: flex;   
    padding: var(--Page-Padding-padding-global, 64px) 64px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.ql-container {
    display: flex;
    width: 860px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
     color: var(--White, #FFF);
}

.benefits-container {
    display: flex;
align-items: flex-start;
gap: 120px;
color:#000;
}

.benefits {
    display: flex;
align-items: flex-start;
gap: 40px;
}

.benefit {
    display: flex;
width: 200px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}

.quick-links h3, .early-careers h3 {
    color: var(--NR-Careers-Black, #000);
    text-align: center;
    /* Heading/Bold/H3 Bold */
    font-size: var(--Text-Sizes-Heading-3, 40px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
    align-self: stretch;
}



 .early-careers h3 {
    text-align: left;
    color: var(--NR-Careers-Black, #000);
 }

.early-careers p {
    line-height: 150%;
}

.quick-links .links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.link-armed-forces, .link-contact a{
    display: flex;
    width: 200px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.quick-links .links  span {
    color:var(--NR-Careers-Black, #000);
    text-align: center;
    font-size: var(--Text-Sizes-Text-Large, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 22px */
    display: inline-block;
}

.btn-findout {
    border: 2px solid var(--NR-Careers-Orange, #E35100);
    background: var(--NR-Careers-Orange, #E35100);
    color:#000;
}

.btn-findout:hover {
    color:#FFF;
    background: #000;
    border-color:#000;
}


.hero-content {
    width:100%;
    position: relative;
  
}

.hero-content .text-content {
    position: absolute;
    top:25%;
    left:5%;
    width:44%;
      max-width:680px;
}

.m2m {
    color: var(--White, #FFF);
    font-family:"Network Rail Sans", 'Noto Sans';
    font-size: clamp(36px, 5.56vw, 80px);
    font-style: italic;
    font-weight: 700;
    line-height: 120%; 
}

.mobile-header {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    padding:20px 20px 56px 20px;
    margin-top:-6px;
}

 .vacancy-header-mobile {
    margin-top:0;
 }


/*content*/

 .content-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-container {
    display: flex;
    min-height: 400px;
    position: relative;
    
}

.hero-container-title {
    min-height:67px;
}

.hero-container-title {
    padding:64px 0 0 0;
}

.working-for-us .hero-container {
    min-height: 500px;
}

.image-section {
    flex: 1;
    background: url('images/home_corporate.jpg') #005172 center/cover;   

    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    position: relative;
    z-index: 1;
}

.image-section.corporate {
         background: url('images/content_corporate.jpg')  center/cover;   
}

.image-section.maintenance {
     background: url('images/maintenance-full.jpg')  center/cover;   
}

.image-section.about-us {
     background: url('images/about_us.jpg')  center/cover;   
}

.image-section.contact-us {
     background: url('images/contact-us.jpg')  center/cover;   
}

.image-section.recruitment-process {
    background: url('images/recruitment_process.jpg')  center/cover;   
}

.image-section.working-for-us {
     background: url('images/working_for_us.jpg')  center/cover;   
}

.text-section {
    flex: 1;          
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 48px 60px 48px;
    color: black;
    position: relative;
    z-index: 2;
}

.text-section.content-wrapper {
    padding-left: 0;
}
 
.content-section {           
    padding: 42px;
    clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
    margin-top: -80px;
    margin-right:-1px;
    margin-bottom:-1px;
    position: relative;
    z-index: 3;
}

.mobile-content-section {
    padding: 20px 0;
    clip-path: polygon(0 85%, 100% 0, 100% 100%, 0 100%);
    margin-top: -80px;
    position: relative;
    z-index: 3;

}

/*vacancies*/

.vacancy {
    margin-top:40px;
}

.vacancy .t-ContentRow-wrap  { 
    border: var(--Stroke-Border-Width, 1px) solid var(--NR-Careers-Grey, #403C3D);
    background: var(--White, #FFF);
    padding: 32px 40px 32px 32px;
    justify-content: space-between;
    align-items: center;
}

.vacancy .t-ContentRow-item {
    margin-bottom: 24px;
}

.vacancy .t-ContentRow-title  a{
    color: var(--NR-Careers-Grey, #403C3D);
}

.vacancy .t-ContentRow-content, .vacancy .t-ContentRow-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-right:40px;
}

.vacancy-search-actions  {
    width:220px;
    margin:10px 0 0 auto;
}

.vacancy .job-fields {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.vacancy .job-fields div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vacancy .t-ContentRow-title {
    display: flex;
    align-items: center;
    gap: 32px;
}

.vacancy .department {
    display: flex;
    padding: 4px 8px;
    align-items: flex-start;
    color: var(--NR-Careers-Grey, #403C3D);

}

.vacancy .t-ContentRow-actions {
    display: flex;
    padding-top: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.login-banner {
    display: flex;
    max-width: 1440px;
    padding: 60px 0;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.login-banner .left-angle {
    position: relative;
    left: 39px;
    top: 0px;
}

.login-banner .right-angle {
    position: relative;
right: 38px;
bottom: -1.5px;
}

.register-container, .login-container {
    display: flex;
    width: 600px;
    max-width:50%;
    padding: 32px 0 32px 20px;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
    border-radius: var(--Radius-Medium, 0);

}

 .login-container {
    padding: 32px 20px 32px 0;
 }



.register-content {
    display: flex;
width: 300px;
align-items: center;
gap: 16px;
flex-shrink: 0;
}

.register-content p {
    display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
}

.register-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}


.job-roles {
    padding:48px 0;
}

.job-card {
 padding: 20px 20px 24px 20px;
 margin:10px;
  
}

.job-card-content {
    display: flex;
   min-height: 110px; 
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    
}

.job-card .section-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;    
}

.job-card .section-title .title-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.job-card .frame {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.job-card .btn {
    width:100%;
}

.job-card .fa {
    margin-top:10px;
}



.job-roles.maintenance .fa {
    color:var(--NR-Careers-Purple);
}


.job-roles .section-title .fa {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.job-roles .section-title .fa:hover {
    transform: scale(1.1);
}

.job-roles .section-content {
    transition: all 0.3s ease;
}

.section-content {
    max-height: 1000px; /* Adjust based on your content height */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    padding-bottom:20px;
    line-height: 150%;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.section-title .fa {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.section-title .fa:hover {
    transform: scale(1.1);
}

.benefits-row .col {

    padding-inline-end: var(--ut-grid-gutter-width,1.4rem);
    padding-inline-start: var(--ut-grid-gutter-width,1.4rem);



}


.benefits-heading {
    padding-inline-start: var(--ut-grid-gutter-width,1.4rem);

}

.offer-grid {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 40px 44px;
    align-self: stretch;
    flex-wrap: wrap;
    margin:44px 0;
}

.offering {
    display: flex;
   /* max-width: 295px;*/
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom:1.4rem;
}

.employee-stories {
    display: flex;

    padding: var(--Page-Padding-padding-global, 64px);
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    
}

.stories {
    display: flex;
    align-items: flex-start;
    gap: 44px;
    align-self: stretch;margin-top: 48px;
}

.story {
    display: flex;
    width: 408px;
    height: 440px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.story-content {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 65.38%, rgba(0, 0, 0, 0.80) 100%);
    padding:24px;
}

.story-content .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    height: 100%;

}

.story-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.our-vision {
    display: flex;
    padding: 48px var(--Page-Padding-padding-global, 64px) var(--Page-Padding-padding-global, 64px) var(--Page-Padding-padding-global, 64px);
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.vision-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.visions {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    margin-top:48px;
    text-align: left;
}

.vision-card {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    flex: 1 0 0;
    align-self: stretch;
    background: linear-gradient(75deg, #F3701E 58.38%, #F9AC15 100%);
    color:#000;
    text-align: left;
}

.padded-content {
    display: flex;
    padding: var(--Page-Padding-padding-global, 64px);
    flex-direction: column;
    align-items: center;
    gap: 80px;

}

.padded-content-no-gap {
    gap:20px;
    align-items: start;
}

.job-finder-text {
    display: flex;
    gap:0;
    text-align: left;
}
.job-finder-text  a {
    color:#403C3D;
    text-decoration: underline;
}

.content-container {
    display: flex;
    align-items: center;
    gap: 80px;
    align-self: stretch;
}

.everyone-belongs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
}
.our-awards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
    align-self: stretch;
}
.awards {
    display: flex;
    width:100%;


align-items: center;
align-content: center;

}

.awards div {
text-align: center;
}

.awards img {
    max-width:100%;
   
width: 143px;
padding: 10px;

}

.awards-recruit img {
    width:250px
}



.t-Login-region {
    background-color: #fff;
    border-radius: 0;
    border:0;
    box-shadow: none;
   /* width:40%;*/
   /* margin:50px auto;*/
}

.t-Login-title {
    color: var(--NR-Careers-Grey, #403C3D);
text-align: center;

/* Heading/Bold/H2 Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-2, 48px);
font-style: normal;
font-weight: 700;
line-height: 120%; /* 57.6px */
}

.login-bg {
    display: flex;
padding: 64px 0;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
height:70vh;
min-height: 800px;
}

.candidate-bg {
    padding: 32px 0;
    min-height:70vh;
}

.login-bg  .btn {
    width:100%;
    transform: none;
}

.login-bg  .btn span, .btn-straight, .btn-straight span {
    transform: none;
}

.login-bg  .t-Form-labelContainer {
    padding-block-start: 0;
}

.job-advert-content section {
    margin-bottom:64px;
}

.vacancy-info {
    padding:20px;
}

.job_details_table .row {
    border-bottom: 0.5px solid #000;
}




.person-img {
text-align:center;
background: var(--NR-Careers-Dark-Blue, #005172);
padding:24px;
color:#fff;}

.person-img .t-Avatar {
    margin-bottom:10px;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
text-align:left;
}

 .nav-pills {
    margin: 15px 0;
}

.nav>li {
    position: relative;
    display: block;
}



 .nav-pills>li a {
    color: #000;
    background: #eee;
   padding: 8px 4px 8px 12px;
    margin-bottom: 7px;

}

.nav>li>a {
    background: var(--NR-Careers-Mid-Blue, #4F99BB);

    display: block;
    color: var(--NR-Careers-Off-White, #F6F6F6);

/* Text/Regular/Normal */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Text-Regular, 16px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}

.pull-right {
    float: right !important;
}

.bg-success {
    background-color: #5cb85c !important;
}

.nav-pills>li>a>.badge {
    margin-left: 3px;
    margin-right:5px;
    margin-top:3px;
}

.application-wizard .t-Wizard-header {
border-bottom: 2px solid var(--NR-Careers-Grey, #403C3D);
background:#e1e1e165;

}

.t-Wizard .t-Wizard-body {

    padding-inline-end: 0;
    padding-inline-start: 0;
 
}


 .timeline {
            max-width: 800px;
            margin: 0 auto;
         
            border-radius: 8px;
            padding: 30px;
   
        }

        .timeline-item {
            display: flex;
            gap: 20px;
            position: relative;
            padding-bottom: 40px;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: 27px;
            top: 54px;
            width: 2px;
            height: calc(100% - 54px);
            background-color: #e0e0e0;
        }

        .timeline-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background-color: #5a8f6a;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .timeline-icon.status-success {
            background-color: #5a8f6a;
        }

        .timeline-icon.status-unsuccessful {
            background-color: #999999;
        }

        .timeline-icon .fa {
            color: white;
            font-size: 24px;
        }

        .timeline-content {
            flex: 1;
        
        }

        .timeline-date {
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }

        .timeline-title {
            font-size: 22px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .timeline-description {
            font-size: 15px;
            color: #4a4a4a;
            line-height: 1.5;
        }

/*job listing*/

.app-job-fields .fa {
    color:#437c94;
    line-height: 24px;
    margin-right: 5px;

}

.app-job-fields {
        display: flex;
        width:80%
}

.app-job-fields-home {
    width:100%
}

.app-job-fields-home .fa {
    margin-right:1px;
} 

.application-fields .fa-hashtag {
    margin-right: 0;
}

.app-job-fields div {
    flex:1 1 auto;
    font-size:14px;
    line-height:24px;
    margin-bottom:12px;
}

.job-description {
    font-size:16px;
}

.home-jobs .job-description {
    font-size:14px;
}

.home-jobs .t-ContentRow-title {
    font-size:20px;
    margin-bottom:5px;
    margin-top:3px;
}
.home-jobs .t-ContentRow-overline {
    font-size:12px;
}

.t-BreadcrumbRegion:not(.breadcrumb-padding) {
    padding: 0 0 1rem 0;
}

.dashboard-item .t-ContentRow-overline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
}

.app-status {
    display: flex;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 4px;
}

.status-success {
    background: var(--NR-Careers-Green, #8DC055);
}

.status-red {
    background:rgb(224, 49, 30);
    color:#fff;
}

.application-header {
    padding:6px 24px 12px 24px;
}

.application-header-items {
    display: flex;
align-items: center;
gap: 32px;
align-self: stretch;
}

.application-header-items .application-status {
    display: flex;
padding: 4px 8px;
align-items: flex-start;
gap: 4px;

}

.app-tabs .t-Tabs--pill {
  
    border:0;
    box-shadow: none;
    margin-block-end:0;
}

.app-tabs .t-Tabs {
    background-color: #fff;
   
    border-radius: 0;
   
    border-width: 0;
    box-shadow: none;

}

.app-tabs .t-Tabs--pill .t-Tabs-item {
    border:0;
}

.app-tabs  .is-active   .t-Tabs-link:before {
    background-color: var(--NR-Careers-Grey, #403C3D);
    block-size: var(--ut-tabs-item-hint-highlight-width,.125rem);
    content: "";
    display: block;
    inset-block-end: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    position: absolute;


}

.app-tabs .t-Tabs-link {
    color: var(--NR-Careers-Grey, #403C3D);
text-align: center;

/* Text/Large/Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Text-Large, 20px);
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
}

.app-tabs .is-active .t-Tabs-link {
   
background: var(--NR-Careers-Off-White, #F6F6F6);
}

.app-tabs .t-Tabs--pill .t-Tabs-item:first-child .t-Tabs-link {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

 @media (max-width: 1440px) {
.ms-footer .container{

    padding:80px 64px;

}

.text-section.content-wrapper {

    padding: 0px 48px 60px 48px;

}
   
 }

/*lg-down */

 @media (max-width: 1199px) {


 
.login-banner {
    display: flex;
    max-width: 100%;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
}

    .register-container, .login-container {
 
  display: flex;
    padding: 24px 20px;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    width:auto;
    max-width:100%;

}



 }



 /* Responsive Breakpoint */
        @media (max-width: 1099px) {




            .nav-desktop,
            .nav-actions {
                display: none;
            }

            .mobile-toggle {
                display: flex;
            }


  
  /* Make submenus inline instead of absolutely positioned */
  .nav-mobile ~ .t-NavigationBar-menu,
  #mobileNav ~ .t-NavigationBar-menu {
    position: static !important;
    display: none;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide the callout arrow on mobile */
  .nav-mobile ~ .t-NavigationBar-menu .u-callout,
  #mobileNav ~ .t-NavigationBar-menu .u-callout {
    display: none !important;
  }
  
  /* Show submenu when active */
  .nav-mobile ~ .t-NavigationBar-menu.is-active,
  #mobileNav ~ .t-NavigationBar-menu.is-active {
    display: block !important;
  }
  
  /* Indent submenu items */
  .nav-mobile ~ .t-NavigationBar-menu .a-Menu-item,
  #mobileNav ~ .t-NavigationBar-menu .a-Menu-item {
    padding-left: 20px;
  }
  
  /* Style submenu links */
  .nav-mobile ~ .t-NavigationBar-menu .a-Menu-label,
  #mobileNav ~ .t-NavigationBar-menu .a-Menu-label {
    padding: 10px 15px;
    display: block;
  }

        }

        @media (min-width: 1100px) {
            .nav-mobile {
                display: none !important;
            }
        }

@media (max-width: 479px) {
    .t-Button--navBar .t-Button-label {
         display: block; 
    }   
}

@media (min-width: 768px) {
    .px-5 .colp {

    padding-inline-end: 1.5rem;
    padding-inline-start: 1.5rem;

    }

    .ec-container {
        display: flex;
        max-width: 860px;
      /*  height: 205px;*/
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .regions-routes {
         max-width: 1240px;
    }

    .regions-routes h3 {
        margin-top:100px;
        margin-bottom:24px;
    }

    .regions-routes li {
        margin-left:0;
    }

    .regions-routes ol {
        margin-bottom:24px;
    }

    .m2m {
        line-height: 100%;
    }

    .policy-links {
    float:right;
}

.policy-links .t-NavigationBar-item {
    margin-left:auto;
}

.px-5 {
    padding-right: 3rem!important;
    padding-left: 3rem!important;
}

.px-5.px-4 {
     padding-right: 1.6rem!important;
    padding-left: 1.6rem!important;

}





  
}

/*md-down*/

@media (max-width: 991px) {

   

    .hero-content .text-content {
  
    top:20%;
 
}

.t-Region--scrollBody>.t-Region-bodyWrap>.t-Region-body, .t-Region--shadowScroll>.t-Region-bodyWrap>.t-Region-body {
    overflow: visible;
 
}

    .policy-links {
    float:none;
}

.policy-links .t-NavigationBar-item {
    margin-left: 0;
}

.policy-links .t-Button {
    padding-inline-end: 24px;
    padding-inline-start: 0;
}

   .col.u-order-md-0 {
        padding-inline-start: 0;
        padding-left:0;
    }

    .policy-links  {
        margin-bottom:30px;
    }

    .px-5 {
    padding-right: 24px;
    padding-left: 24px;
}



.text-r-sb {  
    font-size: var(--Text-Sizes-Text-Regular, 14px);
    letter-spacing: 0.28px;
}


.text-h1-bold, h1 {
  


font-size: var(--Text-Sizes-Heading-1, 32px);

line-height: 120%; /* 67.2px */
}


.text-h4-bold {
 
    font-size: var(--Text-Sizes-Heading-4, 20px);
   line-height: 130%; /* 26px */
}

.quick-links h3, .early-careers h3 {

/* Heading/Bold/H3 Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-3, 24px);
font-style: normal;
font-weight: 700;
line-height: 120%; /* 28.8px */
}

.ec-container {
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}



}

/*sm-down*/
@media (max-width: 767px) {

    .row .col-sm-12.col-end {
    padding-inline-end: var(--ut-grid-gutter-width,8px);
}

.row .col-sm-12.col-start {
    padding-inline-start: var(--ut-grid-gutter-width,8px);
}

.vacancy-search-actions  {
    width:220px;
    margin:10px auto;
}

.vacancy .t-ContentRow-wrap {


   
    padding: 16px var(--Page-Padding-padding-global, 20px) 24px var(--Page-Padding-padding-global, 20px);
    justify-content: space-between;
    align-items: center;
}

.vacancy .t-ContentRow-content, .vacancy .t-ContentRow-description {

    padding-right: 0;
}

.vacancy .t-ContentRow-actions {

    flex-direction:row;

  
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    margin-top: 16px;
}

.text-h4-bold, .vacancy  .t-ContentRow-title {
    font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Heading-4, 20px);
font-style: normal;
font-weight: 700;
line-height: 130%; /* 26px */
}


    .text-h2-bold {
        font-size: var(--Text-Sizes-Heading-2, 30px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 36px */
    }

    .text-h3-bold, .heading-large .t-Region-title {
        /* Heading/Bold/H3 Bold */
        font-family: "Network Rail Sans";
        font-size: var(--Text-Sizes-Heading-3, 24px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 28.8px */
    }

    .text-regular-semibold {
        /* Text/Regular/Semi Bold */
        font-family: "Network Rail Sans", "Noto Sans";
        font-size: var(--Text-Sizes-Text-Regular, 14px);
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 21px */
        letter-spacing: 0.28px;
    }

    .text-medium-semibold {
/* Text/Medium/Semi Bold */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Text-Medium, 14px);
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.28px;
    }

    .text-large-bold,     .ec-container p.text-large-bold {     

        /* Text/Large/Bold */
        font-family: "Network Rail Sans", "Noto Sans";
        font-size: var(--Text-Sizes-Text-Large, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }

    .text-medium-normal ul.text-medium-normal li, ol.text-medium-normal li {
  

/* Text/Medium/Normal */
font-family: "Network Rail Sans";
font-size: var(--Text-Sizes-Text-Medium, 14px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: 0.28px;
    }

    .ms-footer .container{
    
        padding:48px 20px;
    }

     .policy-links .t-NavigationBar-item,   .policy-links .t-NavigationBar {
        width: 100%;
        display: block;
        margin-left:0;
        padding-left: 0;
    }

   .ms-footer .t-Button:hover {
 
   background-color:transparent !important;
 
}

    .policy-links  .t-Button {
        padding-inline-start: 0px;

    }  

    .col.u-order-sm-0 {
        padding-inline-start: 0;
     /*   padding-left:0;*/
    }

    .our-roles {

    padding:  24px;
    align-items:flex-start;

}

.our-roles-intro {
    text-align: left;
    font-size:16px;
}

    

    .early-careers {
        padding: var(--Section-Padding-padding-section-small, 32px) 24px;  
    }

    .ec-container p {
  /*  color: var(--Color-Scheme-1-Text, #403C3D);*/

/* Text/Medium/Normal */
font-family: "Network Rail Sans", "Noto Sans";
font-size: var(--Text-Sizes-Text-Medium, 14px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: 0.28px;
}

.login-banner {
    display: flex;
    max-width: 100%;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
}

.register-container, .login-container {
 
  display: flex;
    padding: 24px 20px;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    width:auto;
    max-width:100%;

}

.register-frame {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
}

.register-content {
    display: flex;
    width: 150px;
    flex-direction: column;
    align-items: flex-start;
}

.register-content p {
    display: flex;
    width: 150px;
    flex-direction: column;
    align-items: flex-start;
}

.register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.our-vision, .visions, .vision-container {
    display: flex;
padding: 24px 20px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
align-self: stretch;
}

 .visions, .vision-container {
    padding:0;
 }

.vision-card {
    display: flex;
padding: 20px;
flex-direction: column;
justify-content: center;
gap: 16px;
align-self: stretch;
text-align: left;
align-items: flex-start;
}

.content-container {
    display: flex;
max-width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 48px;
align-self: stretch;
}

.awards {
    display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
row-gap: 24px;
align-self: stretch;
flex-wrap: wrap;
}

.awards img {
   
width: 143px;


}

.employee-stories {
    width:100%;
padding: var(--Section-Padding-padding-section-medium, 48px) var(--Page-Padding-padding-global, 20px);
}

.stories {
    display: flex;

flex-direction: column;
align-items: flex-start;
gap: 32px;
}

.offer-grid {
    display: flex;
max-width: var(--Container-container-large, 1280px);
align-items: flex-start;
align-content: flex-start;
gap: 20px 12px;
align-self: stretch;
flex-wrap: wrap;
}

.offering {
    display: flex;
/*max-width: 161.5px;*/
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.benefits-row .col {

    padding-inline-end: var(--ut-grid-gutter-width,.5rem);
    padding-inline-start: var(--ut-grid-gutter-width,.5rem);




}

.benefits-heading {
    padding-inline-start: 0;

}

.benefits-container {
    display: flex;
max-width: var(--Container-container-large, 1280px);
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;




}

.benefits {
    display: flex;
padding: 8px 0;
align-items: flex-start;
align-content: flex-start;
gap: 20px;
align-self: stretch;
flex-wrap: wrap;
}

.benefit {
    display: flex;
width: 155px;
flex-direction: column;
align-items: center;
gap: 12px;
}

.quick-links-benefits {
    display: flex;

padding: 24px var(--Page-Padding-padding-global, 20px);
justify-content: center;
align-items: flex-start;
gap: 48px;
}

.candidate-bg {
    padding-top:24px;
}

 .application-header-items {
    gap:5px;
 }

 .job-fields.application-fields,
 .application-header-items {
        flex-direction: column;
    }
    
    .job-fields.application-fields div,
    .application-header-items span {
        flex: 1 1 100%;
        width: 100%;
    }

    .application-header {
        padding:0 
    }

    .application-header .t-Region-body {
        padding-top:0
    }

      .application-header .t-ContentRow-actions  {
        width: 100%;
      }

    .application-header .t-ContentRow-actions .btn {
        width:100%;
        margin-top:20px;
    }

    .app-tabs .t-Tabs-link {
        font-size:16px;
    }

    .app-tabs {
        margin-top:24px;
    }

     .app-tabs li {
        width:100%;
     }

     .app-tabs .t-Tabs-link {
        background-color: var(--NR-Careers-Pastel-Blue, #BEE3F5);
     }

     .app-tabs .is-active .t-Tabs-link {
    background: var(--NR-Careers-Mid-Blue, #4F99BB);
    color: var(--NR-Careers-Off-White, #F6F6F6);
}

.app-key-info 
    {
        margin:0 24px;
    }

    .timeline-icon {
        width:36px;
        height:36px;}
        
         .timeline-icon .fa {
            font-size:16px;
         }

    .timeline-item:not(:last-child)::before {

    left: 17px;
    top: 36px;
    height: calc(100% - 36px);
  
}


}

/*xs-down*/
@media (max-width: 639px) {
    .t-Footer {
         text-align: left; 
    }

    

    .policy-links .t-NavigationBar-item,   .policy-links .t-NavigationBar, .ms-footer .t-NavigationBar-item, .ms-footer .t-NavigationBar {
        width: 100%;
        display: block;
        margin-left:0;
        padding-left: 0;
    }

    .policy-links  .t-Button {
        padding-inline-start: 0px;

    }   
    .social-links {
        text-align: left;
        margin-top:20px;
    }

    .social-links a {
        margin-left: 0;
        margin-right: 12px;
    }

    .padded-content {
        display: flex;
        padding: var(--Section-Padding-padding-section-small, 32px) var(--Page-Padding-padding-global, 20px);
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;

    }



    .regions-routes .row, .job_details_table .row  {
    margin-inline-end: 0;
     margin-inline-start: 0; 
}

.story {
    width:auto;
    height:auto;
}

.ql-container {
    width:100%
}

.vacancy .job-fields {
     display: block; 
   /* align-items: flex-start;
    gap: 40px;*/
}

.vacancy .t-ContentRow-title {
   flex-direction: column;
   gap:1rem;
   align-items: flex-start
}
     
}




@media (max-width: 479px) {
    .u-order-xxs-0 {
        order:0!important
    }
}

@media (min-width: 480px) and (max-width:639px) {
    .u-order-xs-0 {
        order:0!important
    }
}

@media (min-width: 640px) and (max-width:767px) {
    .u-order-sm-0 {
        order:0!important
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .u-order-md-0 {
        order:0!important
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .u-order-lg-0 {
        order:0!important
    }
}

@media (min-width: 1200px) and (max-width:1399px) {
    .u-order-xl-0 {
        order:0!important
    }
}

@media (min-width: 1400px) {
    .u-order-xxl-0 {
        order:0!important
    }
}

.u-order-1 {
    order: 1!important
}

@media (max-width: 479px) {
    .u-order-xxs-1 {
        order:1!important
    }
}

@media (min-width: 480px) and (max-width:639px) {
    .u-order-xs-1 {
        order:1!important
    }
}

@media (min-width: 640px) and (max-width:767px) {
    .u-order-sm-1 {
        order:1!important
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .u-order-md-1 {
        order:1!important
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .u-order-lg-1 {
        order:1!important
    }
}

@media (min-width: 1200px) and (max-width:1399px) {
    .u-order-xl-1 {
        order:1!important
    }
}

@media (min-width: 1400px) {
    .u-order-xxl-1 {
        order:1!important
    }
}
/* Mobile Navigation Styles */
/* Mobile Navigation Styles */
@media (max-width: 768px) {
  .nav-mobile {
    display: none;
    background: #fff;
  }
  
  .nav-mobile.is-open {
    display: block;
  }
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-item {
 
}

.mobile-nav-link,
.mobile-nav-parent {
  display: block;
  padding: 16px 0;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  position: relative;
  font-size: 16px;
}

.mobile-nav-link:hover,
.mobile-nav-parent:hover {

}

.mobile-nav-link.is-active {
  
  font-weight: 600;
}

/* Arrow/Chevron for parent items */
.mobile-nav-parent::after {
  content: '\203A';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.3s ease;
  color: #666;
}

.navbtn .mobile-nav-parent::after {
    color:#fff;
}

/* Rotate arrow when expanded */
.has-submenu.is-expanded .mobile-nav-parent::after {
  transform: translateY(-50%) rotate(-90deg);
}

.mobile-submenu {
  display: none;
  
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
}

.mobile-submenu.is-open {
  display: block;
}

.mobile-nav-subitem {
 padding: 0px 20px;
}

.mobile-nav-subitem:last-child {
  border-bottom: none;
}

.mobile-nav-sublink {
  display: block;
  padding: 14px 20px 14px 40px;
  color: #555;
  text-decoration: none;
  font-size: 15px;

  position: relative;
}

.mobile-nav-sublink:hover {
  background: #f0f0f0;
}

.mobile-nav-sublink.is-active {

  font-weight: 600;
}

/* External link icon */
.mobile-nav-sublink .fa-external-link {
  margin-left: 6px;
  font-size: 12px;
  color: #999;
  margin-top:4px;
}


.a-Menu-label:hover, .a-Menu-item.is-focused .a-Menu-label {
    text-decoration: underline
}

.a-Menu-item.is-focused {
    background-color: transparent;
 
}