/* ===================================
    Crafto - Green energy 
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
/* variable */
:root {      
    --header-height: 230px; /* Logo bar + navbar - hero compensates for this */
    --alt-font: "Inter", sans-serif;
    --primary-font: "Inter", sans-serif;
    --base-color: #094a50; /* Primary dark blue (buttons) */
    --primary-light: #0b8880; /* Primary light blue (backgrounds) */
    --green: #016600; /* Green */
    --blue-accent: #094a50; /* Blue that matches with primary (rgb(0, 0, 153)) */
    --red-accent: #a50021; /* Red */
    --water-blue: #0b8880; /* Primary light blue */
    --orange: #094a50; /* override theme orange -> blue */
    --yellow: #094a50; /* override theme yellow -> blue */
    --dark-gray: #1f2220; /* Black text from logo */
    --medium-gray: #666666; /* Grey from map and hands */
    --very-light-gray: #0b8880; /* Primary light blue tint */
}

/* Override any branding-agency orange utility classes to match our palette */
.text-orange { color: var(--blue-accent) !important; }
.bg-orange { background-color: var(--blue-accent) !important; }
.border-color-orange { border-color: var(--blue-accent) !important; }
body {
    font-size: 16px;
    line-height: 28px;
}

/* Zero top padding for pages without hero (used on non-home, non-about pages) */
.pt-0 {
    padding-top: 0 !important;
}

/* Consistent reduced gap between nav bar and page content - same on every page */
body > header + section:not(.hero-banner-section) {
    padding-top: 25px !important;
}

/* Reduce gap between sections (components) to match nav-to-content spacing */
section {
    padding-top: 50px;
    padding-bottom: 50px;
}
section.half-section {
    padding-top: 40px;
    padding-bottom: 40px;
}
section.big-section {
    padding-top: 50px;
    padding-bottom: 50px;
}
section.extra-big-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Reduce gap between page intro (label + heading + description) and content below */
section .container > .row.page-intro-row {
    margin-bottom: 30px !important;
}
@media (max-width: 991px) {
    section .container > .row.page-intro-row {
        margin-bottom: 25px !important;
    }
}

/* Header - scrolls with page (not fixed); high z-index so dropdown stays above hero slider */
header {
    position: relative;
    z-index: 1100;
}
header .navbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}
/* Center menu - full width collapse */
header .left-nav .navbar-collapse {
    flex-grow: 1;
    justify-content: center;
}

/* header - background and menu colors */
header .navbar,
header .navbar.header-transparent,
header .navbar.bg-white {
    background-color: rgb(10, 126, 140) !important;
}
header .navbar .navbar-nav .nav-link,
header .navbar .navbar-nav .nav-link.dropdown-toggle,
header .navbar .navbar-nav .nav-link:hover,
header .navbar .navbar-nav .nav-link.dropdown-toggle:hover {
    color: #ffffff !important;
}
header .navbar .navbar-nav .nav-link.dropdown-toggle i.fa-angle-down {
    color: #ffffff !important;
}
/* Contact button on teal header - white border and text */
header .navbar .btn.btn-base-color {
    background-color: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
header .navbar .btn.btn-base-color:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
/* Sub menu background and hover */
/* Sub menu - simple solid style, no gradient or background image; high z-index above hero slider */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    width: 300px;
    background-color: rgb(0, 85, 100) !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1101 !important;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 16px;
    color: #ffffff !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
    border-bottom: none !important;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
    background-color: rgb(0, 42, 42) !important;
    background-image: none !important;
    color: #ffffff !important;
}
.navbar .navbar-nav .dropdown .dropdown-menu a i,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    display: none !important;
}
/* Dropdown hover functionality */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 {
    position: relative;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02:hover .dropdown-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    display: none;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Hide any separate dropdown-toggle icons (old structure) - override responsive.css */
.navbar .navbar-nav .nav-item.dropdown.dropdown-with-icon-style02 > .dropdown-toggle:not(.nav-link),
.navbar .navbar-nav .nav-item.dropdown.dropdown-with-icon-style02 > i.dropdown-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
}

/* Override the responsive.css rule that positions dropdown-toggle absolutely */
@media (max-width: 991px) {
    .navbar .navbar-nav .nav-item.dropdown.dropdown-with-icon-style02 > .dropdown-toggle:not(.nav-link),
    .navbar .navbar-nav .nav-item.dropdown.dropdown-with-icon-style02 > i.dropdown-toggle {
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Hide Bootstrap's default dropdown-toggle arrow (::after pseudo-element) and any other duplicates */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle::after,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle::before {
    display: none !important;
    content: none !important;
}

/* Hide any separate i.dropdown-toggle elements that might exist */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > i.dropdown-toggle,
.navbar .navbar-nav .nav-item.dropdown.dropdown-with-icon-style02 > i.dropdown-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Arrow visibility for dropdown items - always visible */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle i.fa-angle-down {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.3s ease;
    transform: rotate(0deg) !important;
    vertical-align: middle;
}

/* Rotate ONLY the arrow icon when dropdown is open/hovered - NOT the text */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02.show .nav-link.dropdown-toggle i.fa-angle-down,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02:hover .nav-link.dropdown-toggle i.fa-angle-down,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02[aria-expanded="true"] .nav-link.dropdown-toggle i.fa-angle-down {
    transform: rotate(180deg) !important;
}

/* Prevent the entire text/link from rotating */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle {
    pointer-events: auto;
    user-select: none;
    transform: none !important;
    display: inline-block;
}

/* Ensure the span text doesn't rotate */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle > *:not(i) {
    transform: none !important;
}

/* Mobile navigation fixes */
@media (max-width: 991px) {
    /* Hide any separate dropdown-toggle icons on mobile */
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > i.dropdown-toggle {
        display: none !important;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle {
        display: block !important;
        width: 100%;
        padding: 10px 15px !important;
        cursor: pointer;
        position: relative;
        text-align: left !important; /* Left align like other menu items */
        justify-content: flex-start !important;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle i.fa-angle-down {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg) !important;
        margin-left: 0;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02.show .nav-link.dropdown-toggle i.fa-angle-down,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02[aria-expanded="true"] .nav-link.dropdown-toggle i.fa-angle-down {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: #ffffff !important;
        background-image: none !important;
        border: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        color: #333333 !important;
        border-bottom: 1px solid #eee !important;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
        background-color: #f5f5f5 !important;
        background-image: none !important;
        color: #333333 !important;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02.show .dropdown-menu,
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02[aria-expanded="true"] .dropdown-menu {
        display: block !important;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li {
        padding-left: 0;
    }
    
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding: 10px 30px !important;
        display: block;
        width: 100%;
        text-align: left !important; /* Left align submenu items to match parent */
    }
    
    /* Ensure all nav items align left */
    .navbar .navbar-nav .nav-item .nav-link {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Ensure dropdown parent items align with regular nav items */
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 {
        text-align: left !important;
    }
    
    /* Ensure dropdown toggle works on mobile */
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .nav-link.dropdown-toggle[data-bs-toggle="dropdown"] {
        pointer-events: auto;
    }
}
/* Logo bar above nav - logo + tagline on left, LinkedIn on right */
.header-logo-bar {
    background-color: #ffffff;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-logo-bar .header-logo-row {
    padding-left: 45px;
    padding-right: 45px;
}
/* Hero overlay: logo bar over hero banner */
.hero-header-overlay .header-logo-bar {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}
.header-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.header-logo-row .navbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 !important;
    margin: 0 !important;
}
.header-logo-row .navbar-brand img {
    max-height: 95px;
    height: 95px;
    width: auto;
    object-fit: contain;
}
.header-tagline {
    color: rgb(10, 126, 140) !important;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.25;
    max-width: 380px;
}
.header-logo-row .header-linkedin {
    color: #0a66c2;
    font-size: 28px;
    text-decoration: none;
}
.header-logo-row .header-linkedin:hover {
    color: #004182;
}
/* Hide mobile menu (hamburger) on desktop/laptop - show only on mobile */
@media (min-width: 992px) {
    .header-mobile-toggler {
        display: none !important;
    }
    /* Also hide the nav's toggler on desktop - it's for mobile only */
    header .navbar .navbar-toggler {
        display: none !important;
    }
}
@media (max-width: 991px) {
    .header-logo-bar .header-logo-row {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Override responsive.css: keep logo visible on mobile (we don't use mobile-logo) */
    .header-logo-bar .header-logo-row .navbar-brand .default-logo,
    .header-logo-bar .header-logo-row .navbar-brand img.default-logo {
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
    }
    .header-logo-row .navbar-brand img {
        max-height: 80px;
        height: 80px;
    }
    .header-tagline {
        font-size: 1.1rem;
        max-width: 300px;
    }
    /* Hamburger next to LinkedIn in logo row */
    .header-logo-row .header-linkedin {
        margin-left: auto;
        margin-right: 8px;
    }
    .header-mobile-toggler {
        padding: 8px;
        border: none;
        background: transparent;
    }
    .header-mobile-toggler .navbar-toggler-line {
        background-color: rgb(10, 126, 140);
    }
    /* Hide navbar bar when menu is collapsed - no teal strip */
    header .navbar:has(.navbar-collapse:not(.show)) {
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden;
        background-color: transparent !important;
    }
    header .navbar .container-fluid:has(.navbar-collapse:not(.show)) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* When menu is open: teal background (navbar colour) */
    header .navbar .navbar-collapse.show {
        background-color: rgb(10, 126, 140) !important;
        padding: 15px 0;
    }
    /* Mobile dropdown menus: teal background, white text */
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        background-color: rgb(0, 85, 100) !important;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
        background-color: rgb(0, 42, 42) !important;
        color: #ffffff !important;
    }
}
@media (max-width: 767px) {
    /* Keep tagline beside logo on mobile */
    .header-logo-row .navbar-brand {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .header-tagline {
        font-size: 0.8rem;
        line-height: 1.2;
        max-width: 150px;
    }
    .header-logo-row .navbar-brand img {
        max-height: 70px;
        height: 70px;
    }
}

header .navbar-brand {
    padding: 10px 0 !important; /* Reduced top and bottom padding */
}

/* Reduce navbar vertical padding for tighter gap between logo bar and nav */
header .navbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

header .navbar-brand img {
    max-height: 95px;
    height: 95px;
}
.navbar .navbar-nav .nav-link {
    font-weight: 600;
    font-size: 18px;
}
/* button */
.btn {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0px;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 17px 38px;
    font-size: 17px; 
}
.btn.btn-switch-text.btn-large > span {
    padding: 13px 32px;
    font-size:15px;
}
.btn.btn-switch-text.btn-medium > span {
    padding: 12px 26px;
    font-size:14px;
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}
/* Text gradient color */
.text-gradient-light-green-white {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%,  #0b8880 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Background color */
.bg-light-green {
    background-color: #b8e0d2; /* Lighter green tint */
}
.bg-very-light-green {
    background-color: var(--primary-light); /* Primary light blue */
}
.bg-light-gray {
    background-color: #f5f5f5; /* Light grey background */
}
/* Transparent background color */
.bg-gradient-green-transparent {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%,  #0b8880 100%);
}
/* Leadership team card overlay - matches finance demo style */
.bg-gradient-base-color-transparent {
    background-image: linear-gradient(to right top, rgba(9, 74, 80, 0.5), rgba(11, 136, 128, 0.9));
}

.right-210px {
  right: 210px;
}

/* page title */
.page-title-large h1 {
    font-size: 4.2rem;
    line-height: 4rem;
}
.page-title-large h2 {
    font-size: 18px;
}

/* Border color */
.border-color-dark-green {
    border-color: var(--green);
}
/* Accent colors from logo */
.text-blue-accent {
    color: var(--blue-accent);
}
.text-red-accent {
    color: var(--red-accent);
}
.text-water-blue {
    color: var(--water-blue);
}
.bg-blue-accent {
    background-color: var(--blue-accent);
}
.bg-red-accent {
    background-color: var(--red-accent);
}
.bg-water-blue {
    background-color: var(--water-blue);
}
/* Subcribe style 02 */
.newsletter-style-02 .btn:hover {
    background-color: var(--green);
}
.newsletter-style-02 .btn {
    height: 85%;
    margin: 4px;
    padding: 5px 20px 5px;
}
.newsletter-style-02 input {
    padding-right: 75px !important;
}

/* Will change */
.animation-rotation {
    -webkit-animation: rotation 2.5s infinite linear;
}
/* footer */
footer .footer-logo img {
    max-height: 43px;
    width: auto;
}
footer a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 2px;
}
/* Footer with light green background - keep text colors white */
footer.bg-very-light-green {
    color: var(--white);
}
footer.bg-very-light-green p,
footer.bg-very-light-green span,
footer.bg-very-light-green .text-white,
footer.bg-very-light-green .fs-14,
footer.bg-very-light-green .fs-18 {
    color: var(--white) !important;
}
footer.bg-very-light-green a {
    color: var(--white);
}
footer.bg-very-light-green a:hover {
    color: var(--white);
    opacity: 0.8;
}
footer.bg-very-light-green .border-color-transparent-white-light {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
footer.bg-very-light-green ul li a {
    color: var(--white);
}
/* Footer tagline alongside logo, two lines, larger font */
.footer-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.footer-brand-row .footer-logo {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}
.footer-tagline {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    max-width: 360px;
}
@media (min-width: 576px) {
    .footer-tagline {
        font-size: 1.65rem !important;
    }
}
/* Connect + icons on same line */
.footer-connect-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.footer-connect-row .footer-connect-label {
    margin-bottom: 0;
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}
@media (max-width: 1600px) {
    /* Font size */
    .fs-80 {
        font-size: 4rem;
        line-height: 4rem;
    }
}
@media (max-width: 1199px){
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding: 10px 10px;
    }
}
@media (max-width: 991px){
    /* Background image */
    .md-background-position-top-center {
        background-position: top center !important;
    } 
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        padding-bottom: 15px;
    }
}
@media (max-width: 767px){
    /* Background image */
    .sm-background-position-top-center {
        background-position: top center !important;
    }
    
    /* Logo size for mobile */
    header .navbar-brand img {
        max-height: 70px !important;
    }
    
    header .navbar-brand {
        padding: 8px 0 !important;
    }
}

/* Font Awesome LinkedIn icon fix */
.fa-brands.fa-linkedin {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
}

/* Hero banner styles - fills remaining viewport below header/navbar */
.hero-banner-section {
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Transparent header overlay on hero banner */
.hero-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.header-transparent {
    background-color: rgb(10, 126, 140) !important;
    background: rgb(10, 126, 140) !important;
}

.header-transparent .navbar-nav .nav-link {
    color: #ffffff !important;
}

.header-transparent .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    opacity: 0.9;
}

.header-transparent .navbar-toggler-line {
    background-color: #ffffff !important;
}

.header-transparent .dropdown-menu {
    background-color: rgb(0, 85, 100) !important;
}

.header-transparent .dropdown-menu a {
    color: #ffffff !important;
}

.header-transparent .dropdown-menu a:hover {
    background-color: rgb(0, 42, 42) !important;
    color: #ffffff !important;
}

.hero-banner-swiper.full-screen {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.hero-banner-slide {
    height: 100% !important;
    max-height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #1f2220;
}

/* Hero slide caption - bottom overlay with light green background, rounded corners */
.hero-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dark-gray);
    z-index: 10;
}
.hero-slide-caption-green {
    background-color: rgba(184, 224, 210, 0.95); /* Light green */
    border-radius: 12px 12px 0 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 900px;
    margin-bottom: 20px;
}

/* Light gradient overlay at top of hero (desktop only) so dark nav + colored logo are visible */
@media (min-width: 992px) {
    .hero-banner-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 60%, transparent 100%);
        z-index: 100;
        pointer-events: none;
    }

    /* White nav text on teal header */
    .hero-header-overlay .header-transparent .navbar-nav .nav-link {
        color: #ffffff !important;
    }
    .hero-header-overlay .header-transparent .navbar-nav .nav-link:hover {
        color: #ffffff !important;
        opacity: 0.9;
    }
    .hero-header-overlay .header-transparent .navbar-toggler-line {
        background-color: #ffffff !important;
    }
    .hero-header-overlay .header-transparent .header-icon .icon > a,
    .hero-header-overlay .header-transparent .btn {
        color: #ffffff !important;
    }
    .hero-header-overlay .header-transparent .btn.btn-base-color {
        background-color: var(--base-color) !important;
        border-color: var(--base-color) !important;
        color: #fff !important;
    }
    .hero-header-overlay .header-transparent .btn.btn-base-color:hover {
        background-color: var(--primary-light) !important;
        border-color: var(--primary-light) !important;
        color: #fff !important;
    }
    /* Logo in colour – no filter */
    .hero-header-overlay .header-transparent .navbar-brand img {
        filter: none;
    }
    .hero-header-overlay .header-transparent .nav-link.dropdown-toggle i.fa-angle-down {
        color: var(--dark-gray) !important;
    }
}

@media (max-width: 991px) {
    .hero-banner-section {
        height: calc(100vh - 160px);
        min-height: calc(100vh - 160px);
        max-height: calc(100vh - 160px);
    }
    
    .hero-banner-swiper.full-screen {
        height: 100% !important;
        max-height: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Mobile: landscape view (16:9) instead of full screen */
    .hero-banner-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .hero-header-overlay {
        position: absolute; /* Keep absolute to overlay, not take space */
        top: 0;
        z-index: 1000;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove any spacing from navbar when collapsed */
    .hero-header-overlay .navbar-collapse {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .hero-banner-swiper.full-screen {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .hero-banner-swiper .swiper-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }
    
    .hero-banner-slide {
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        display: block !important;
    }
    
    .hero-banner-swiper .swiper-slide {
        height: 100% !important;
    }
    
    /* Remove any top margin/padding from hero section */
    .hero-banner-section .container-fluid,
    .hero-banner-section .swiper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure no gap between header and slider */
    .hero-banner-section > * {
        margin-top: 0 !important;
    }
    
    /* Hero caption - smaller on mobile */
    .hero-slide-caption {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    .hero-slide-caption-green {
        width: calc(100% - 24px);
        margin-bottom: 12px;
        border-radius: 10px 10px 0 0;
    }
}

/* Person cards - team-style-05 leadership template; click scrolls to detail section */
.person-card-link {
    cursor: pointer;
    text-decoration: none;
    display: block;
}
.person-card-link:hover .alt-font.fw-500 {
    color: var(--base-color) !important;
}
.person-cards-grid .team-style-05 .position-relative {
    overflow: hidden;
}
.person-cards-grid .team-style-05 .position-relative img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top center;
}
.person-cards-grid .team-style-05 .team-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.person-cards-grid .team-style-05 .team-content p {
    font-size: 14px;
}
.person-detail-section {
    scroll-margin-top: 120px;
}

/* Fellows page: ensure card grid and headings layout correctly */
.fellows-page-section #fellows-classified-container .col-12 {
    width: 100%;
}
.fellows-page-section #fellows-classified-container .col-12 h3 {
    margin-top: 0;
}
.fellows-page-section #fellows-classified-container .col-12:not(:first-child) h3 {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Fellows page: no gap between university name and Doctorate/Masters Fellows/Cohort labels; font size matches Training Professionals (19px) */
.fellows-page-section .col-12 > div h4,
.fellows-page-section .col-12 > div h5 {
    font-size: 19px !important;
}
/* University names: same font as Doctorate Fellows heading, bolder, bigger, wider letter spacing, green */
.fellows-page-section .col-12 > div h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    color: rgb(10, 126, 140) !important;
    margin-bottom: 0 !important;
}
.fellows-page-section .col-12 > div h4 {
    margin-top: 0 !important;
}
.fellows-page-section .col-12 > div h5 {
    margin-top: 0 !important;
}

/* Consortium partner logo cards - logo only, college name below, click opens detail */
.partner-logo-card .partner-logo-wrapper {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-logo-card .partner-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.partner-logo-card .partner-college-name {
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}
.partner-logo-link {
    cursor: pointer;
}
.partner-logo-link:hover .partner-college-name {
    color: var(--base-color) !important;
}

/* Partner detail modal popup - z-index above navbar (1100) */
#partnerDetailModal {
    z-index: 1200 !important;
}
body.partner-modal-open .modal-backdrop {
    z-index: 1199 !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#partnerDetailModal .partner-modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#partnerDetailModal .partner-modal-dialog {
    max-width: 800px;
}
#partnerDetailModal .partner-modal-close {
    position: absolute !important;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 10px;
    opacity: 1;
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414 1.707 15.707a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
#partnerDetailModal .partner-modal-close:hover {
    background-color: #fff;
}
/* Partner modal uses same detail-person design as team-detail - scale photo for modal */
#partnerDetailModal .detail-person-photo img {
    width: 180px !important;
    height: 180px !important;
    object-fit: cover;
    object-position: top center;
}
#partnerDetailModal .detail-person-photo {
    padding: 20px 16px 20px 24px;
}
#partnerDetailModal .detail-person-text {
    padding: 24px 50px 24px 12px;
}
@media (max-width: 767px) {
    #partnerDetailModal .detail-person-box {
        flex-direction: column;
        align-items: center;
    }
    #partnerDetailModal .detail-person-photo {
        padding: 24px 24px 0;
    }
    #partnerDetailModal .detail-person-photo img {
        width: 160px !important;
        height: 160px !important;
    }
    #partnerDetailModal .detail-person-text {
        padding: 16px 24px 24px;
        text-align: center;
    }
}

/* Fellow detail modal popup - z-index above navbar (1100) */
#fellowDetailModal {
    z-index: 1200 !important;
}
body.fellow-modal-open .modal-backdrop {
    z-index: 1199 !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#fellowDetailModal .fellow-modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#fellowDetailModal .fellow-modal-dialog {
    max-width: 800px;
}
#fellowDetailModal .fellow-modal-close {
    position: absolute !important;
    top: 15px;
    right: 15px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 10px;
    opacity: 1;
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414 1.707 15.707a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
#fellowDetailModal .fellow-modal-close:hover {
    background-color: #fff;
}
#fellowDetailModal .blockquote-img img {
    width: 140px !important;
    height: 140px !important;
    object-fit: cover;
    object-position: top center;
}
@media (max-width: 767px) {
    #fellowDetailModal .blockquote-img {
        margin-bottom: 1rem;
    }
}

/* Teams, Consultants, Mentors, Consortium & Fellows: fixed 180×180 photo size regardless of source image */
.teams-page-section .blockquote-style-04 .blockquote-img img.team-photo,
.consultants-page-section .blockquote-style-04 .blockquote-img img.team-photo,
.mentors-page-section .blockquote-style-04 .blockquote-img img.team-photo,
.consortium-page-section .blockquote-style-04 .blockquote-img img.team-photo,
.fellows-page-section .blockquote-style-04 .blockquote-img img.team-photo,
.detail-page-section .blockquote-style-04 .blockquote-img img.team-photo {
    width: 180px !important;
    height: 180px !important;
    object-fit: cover;
    object-position: top center;
}

/* Teams, Consultants, Mentors, Consortium & Fellows: fix mobile layout – prevent photo overlap and keep photo with its box */
@media (max-width: 991px) {
    .teams-page-section .blockquote-style-04 .blockquote-img img,
    .consultants-page-section .blockquote-style-04 .blockquote-img img,
    .mentors-page-section .blockquote-style-04 .blockquote-img img,
    .consortium-page-section .blockquote-style-04 .blockquote-img img,
    .fellows-page-section .blockquote-style-04 .blockquote-img img {
        margin-top: 0 !important;
    }
}
/* Scroll target for back link with hash (e.g. consultants.html#person-2) */
.teams-page-section [id^="person-"],
.consultants-page-section [id^="person-"],
.mentors-page-section [id^="person-"],
.fellows-page-section [id^="fellow-"] {
    scroll-margin-top: 120px;
}
/* Back link row - small gap between back button and detail content */
.detail-back-link-row {
    margin-bottom: 0.5rem !important;
    position: relative;
    z-index: 10;
}
/* Back link (e.g. "Back to Our Team") - ensure visible on mobile */
@media (max-width: 991px) {
    /* Add top padding so back link isn't hidden under header */
    section.detail-page-section {
        padding-top: 1rem !important;
    }
    .detail-back-link-row {
        display: flex !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem !important;
    }
    .detail-back-link-row .col-12 {
        display: block !important;
    }
    .detail-back-link-row a {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        color: var(--dark-gray) !important;
        padding: 0.5rem 0;
    }
}
@media (max-width: 767px) {
    section.detail-page-section {
        padding-top: 1.25rem !important;
    }
    /* Prevent back link overlapping with person detail card on mobile */
    section.detail-page-section .detail-back-link-row {
        margin-bottom: 1.25rem !important;
    }
    section.detail-page-section #person-detail .blockquote-style-04 {
        margin-top: 1rem !important;
    }
}
@media (max-width: 767px) {
    .teams-page-section .blockquote-style-04,
    .consultants-page-section .blockquote-style-04,
    .mentors-page-section .blockquote-style-04,
    .consortium-page-section .blockquote-style-04,
    .fellows-page-section .blockquote-style-04 {
        margin-bottom: 2.5rem !important;
    }
    .teams-page-section .blockquote-style-04 .blockquote-img,
    .consultants-page-section .blockquote-style-04 .blockquote-img,
    .consortium-page-section .blockquote-style-04 .blockquote-img,
    .fellows-page-section .blockquote-style-04 .blockquote-img {
        margin-bottom: 0.5rem;
    }
    .teams-page-section .blockquote-style-04 .blockquote-content,
    .consultants-page-section .blockquote-style-04 .blockquote-content,
    .consortium-page-section .blockquote-style-04 .blockquote-content,
    .fellows-page-section .blockquote-style-04 .blockquote-content {
        margin-top: 0;
    }
}

/* Detail pages (team-detail, consultant-detail, fellow-detail, mentor-detail): full-width box, bigger photo inside, reduced gap */
.detail-person-card {
    width: 100%;
}
.detail-person-box {
    display: flex;
    align-items: stretch;
    background-color: #f2f2f2;
    border-radius: 12px;
    overflow: hidden;
    gap: 0;
}
.detail-person-photo {
    flex-shrink: 0;
    padding: 20px 16px 20px 24px;
    display: flex;
    align-items: center;
}
.detail-person-photo img {
    width: 300px !important;
    height: 300px !important;
    object-fit: cover;
    object-position: top center;
}
.detail-person-text {
    flex: 1;
    padding: 24px 30px 24px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.detail-person-text p:last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 767px) {
    .detail-person-box {
        flex-direction: column;
        align-items: center;
    }
    .detail-person-photo {
        padding: 24px 24px 0;
    }
    .detail-person-photo img {
        width: 240px !important;
        height: 240px !important;
    }
    .detail-person-text {
        padding: 16px 24px 24px;
        text-align: center;
    }
}