:root {
    /* Define brand color as a CSS variable */
    --brand-primary: #B42B6f;  
    --brand-hover: #1BA97F;    /* hover */
    --bs-primary: #B42B6f;
    --bs-primary-rgb: 180, 43, 111;  /* RGB values for opacity/alpha */
    --bs-link-color: #B42B6f;
    --bs-link-hover-color: #1BA97F;
}

/* Primary buttons and CTAs */
.btn-primary,
.contact-us-button {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Outlined primary buttons */
.btn.btn-outline-primary {
    display: inline-block !important;
    color: #B42B6f !important;
    background-color: transparent !important;
    border: 1px solid #B42B6f !important;
    padding: 0.25rem 0.5rem !important;
    font-size: .875rem !important;
    border-radius: 0.25rem !important;
    text-decoration: none !important;
}

.btn.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #B42B6f !important;
    border-color: #B42B6f !important;
    text-decoration: none !important;
}

.btn-primary:hover,
.contact-us-button:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* Text highlights and links */
.text-primary,
.highlight,
a.highlight {
    color: var(--brand-primary) !important;
}

/* Background highlights */
.bg-primary,
.highlight-bg {
    background-color: var(--brand-primary) !important;
}

/* For any SVG icons that should match the brand color */
.icon-primary path,
.icon-primary svg {
    fill: var(--brand-primary);
}

/* For border accents */
.border-primary {
    border-color: var(--brand-primary) !important;
}

/* Add this to your existing CSS */
.text-brown {
    color: #5B2D07;
}

/* Make all display-4 headings brown */
.display-4 {
    color: #5B2D07;
}

/* Navigation links */
.nav-link {
    color: #5B2D07;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--brand-primary);
}

/* Custom background colors */
.bg-gray-110 {
    background-color: #f3f3f3;  /* Slightly darker than bg-gray-100 */
}

/* Or if you want to use Bootstrap's color system with an overlay */
.bg-light-darker {
    background-color: #f1f1f1;
}

/* Or if you want to use Bootstrap's color system with an overlay */
.bg-light-green {
    background-color: #e4edea;
}

/* Custom padding utility */
.py-extra {
    padding-top: 5rem !important;    /* 80px */
    padding-bottom: 5rem !important; /* 80px */
}

@media (min-width: 768px) {
    .py-extra {
        padding-top: 7rem !important;    /* 112px */
        padding-bottom: 7rem !important; /* 112px */
    }
}

/* Custom section padding */
.section-padding-extra {
    padding: 6rem 0 !important;  /* 96px top/bottom */
}

@media (min-width: 768px) {
    .section-padding-extra {
        padding: 8rem 0 !important;  /* 128px top/bottom */
    }
}

/* Content column padding */
.content-column {
    padding: 25px 12px !important;
}

@media (min-width: 768px) {
    .content-column {
        padding: 35px 12px !important;
    }
}

/* Container content padding */
.container-content {
    padding-top: 25px;
    padding-bottom: 25px;
}

@media (min-width: 768px) {
    .container-content {
        padding-top: 35px;
        padding-bottom: 35px;
    }
}

/* Navbar brand container */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Logo image alignment */
.navbar-brand img {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-2px);  /* Adjust this value as needed */
}

/* Brand text styling */
.navbar-brand-text {
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    color: var(--brand-primary);
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

/* Footer brand styling */
footer .navbar-brand-text {
    font-size: 2.5rem;  /* Slightly smaller in footer */
}

footer .d-flex img {
    transform: translateY(-2px);
    margin-left: 0.5rem;  /* Add specific spacing for footer logo */
}

/* Footer brand container */
footer .d-flex {
    gap: 0.75rem;  /* Slightly more space between items in footer */
}

/* Hero section styling */
.hero-section {
    min-height: 60vh;
    max-height: 800px; /* Add max-height to prevent excessive height on tall screens */
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.1;
}

.hero-logo {
    width: 100%;  /* Full width on mobile */
    height: auto;
    transform: translateX(15%);
}

.z-1 {
    z-index: 1;
}

/* Small devices (landscape phones) */
@media (min-width: 576px) {
    .hero-logo {
        width: 90%;
        transform: translateX(10%);
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
    .hero-logo {
        width: 80%;
        transform: translateX(15%);
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    .hero-logo {
        width: 60%;
        max-width: 800px;
        transform: translateX(20%);
    }
    
    /* Add responsive max-height for larger screens */
    .hero-section {
        max-height: 700px;
    }
}

/* Extra large devices */
@media (min-width: 1200px) {
    .hero-section {
        max-height: 800px;
    }
}

/* For extra tall screens */
@media (min-height: 1000px) {
    .hero-section {
        min-height: 50vh;
        max-height: 900px;
    }
}

/* Partners section styling */
.partners-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-scroll {
    display: flex;
    animation: scroll 30s linear infinite;  /* Faster scroll */
    width: max-content;
    /* Pause on hover */
    &:hover {
        animation-play-state: paused;
    }
}

.partner-logo {
    height: 4rem;  /* Increased from 3rem */
    width: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 1rem;  /* More padding for bigger logos */
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin: 0.5rem;
}

.partner-logo:hover {
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Adjust based on total width of logos */
        transform: translateX(-50%);
    }
}

/* Spacing utilities */
.py-8 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .py-8 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    .partner-logo {
        height: 5.5rem;  /* Increased from 4rem */
    }
}

/* BRIC Branding Section */
.bric-branding {
    background-color: #5b2d07;
    padding: 6rem 0;
}

.bric-letters {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem;  /* Add space below text on mobile */
}

.letter-row {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.letter {
    font-family: 'Teko', sans-serif;
    font-size: 4rem;
    font-weight: 600;
    color: var(--brand-primary);
    line-height: 1;
    width: 80px;
    text-align: center;
}

.word {
    font-family: 'Teko', sans-serif;
    font-size: 3rem;
    color: #5b2d07;
    line-height: 1;
}

.bric-logo {
    width: 100%;
    max-width: 600px;  /* Increased from 400px */
    height: auto;
    margin-top: -2rem;  /* Optionally adjust vertical position */
    margin-bottom: -2rem;
}

@media (min-width: 768px) {
    .letter {
        font-size: 5rem;
    }
    
    .word {
        font-size: 3.5rem;
    }
    
    .bric-logo {
        max-width: 800px;  /* Even larger on desktop */
    }
    
    .bric-letters {
        margin-bottom: 0;  /* Remove extra space on desktop */
    }
}

/* Values cards styling */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-primary-soft {
    background-color: rgba(180, 43, 111, 0.1);
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
}

/* Section spacing */
.mb-6 {
    margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .mb-6 {
        margin-bottom: 4rem !important;
    }
}

/* Contact section with background image */
.contact-section {
    position: relative;
    padding: 2rem 0;
    background-color: rgba(255, 255, 255, 0.85);  /* background transparency */
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Make contact form more prominent */
.contact-form {
    background: white;
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.2);
    max-width: 2000px;  /* Much wider form */
    margin: 0 auto;
}

/* Adjust section padding */
.py-8 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (min-width: 768px) {
    .py-8 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* News list styling */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-item {
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
}

.news-item:last-child {
    border-bottom: none;
}

.news-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.news-link:hover .news-title {
    color: var(--brand-primary);
}

.news-image {
    flex: 0 0 120px;
    margin-right: 2rem;
    position: relative;
    width: 120px;
    height: 120px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.news-content {
    flex: 1;
}

.news-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.news-summary {
    color: #6c757d;
    margin-bottom: 1rem;
}

.news-meta {
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .news-image {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
        margin-right: 1rem;
    }
    
    .news-content {
        padding-right: 0;
    }
}

.avatar {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-title {
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.badge {
    padding: 0.5em 1em;
    font-weight: 500;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

.fade-in.visible {
    opacity: 1;
}

/* Employee page styling */
.employee-bio {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #495057;
}

.employee-bio a {
    color: var(--brand-primary);
    text-decoration: none;
}

.employee-bio a:hover {
    text-decoration: underline;
}

/* Publications list styling */
.publications-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.publication-item {
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
}

.publication-item:hover {
    transform: translateY(-2px);
}

.publication-image {
    flex: 0 0 120px;
    margin-right: 2rem;
}

.publication-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.publication-content {
    flex: 1;
}

.publication-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.publication-title a {
    color: inherit;
}

.publication-title a:hover {
    color: var(--brand-primary);
}

.publication-summary {
    color: #6c757d;
    margin-bottom: 0;
}

/* Footer BRIC branding */
footer .bric-rows {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;  /* Ensure full width for proper alignment */
}

footer .bric-row {
    display: flex;
    align-items: center;
    gap: 1rem;  /* Increase space between letter and word */
}

footer .bric-letter {
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
    color: var(--brand-primary);
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.02em;
    width: 2rem;  /* Fixed width for letters */
    text-align: center;  /* Center the letters */
}

footer .bric-word {
    font-size: 1.2rem;
    line-height: 1;
    color: #5B2D07;
    font-weight: 500;
    font-family: 'Teko', sans-serif;
    opacity: 0;  /* Start invisible for fade-in */
    animation: fadeIn 0.8s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

footer .address-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
}

/* Consulting page image styling */
.consulting-image {
    width: 100%;
    height: 500px;  /* Taller height for vertical orientation */
    object-fit: cover;  /* Crop and scale image to fill container */
    object-position: center;  /* Center the cropping */
}

/* Team member image sizing */
.team-member-image {
    height: 200px;
    width: 200px;
    align-self: center;
    object-fit: contain;
    object-position: center;
    padding-top: 1.5rem;
}

/* Project image sizing */
.project-hero-image {
    max-height: 300px;
    width: auto;
    object-fit: contain;
}

/* Content spacing */
.project-content p,
.employee-bio p {
    margin-bottom: 1.5rem;  /* Add space after each paragraph */
}

/* Remove extra margin from last paragraph to avoid unwanted spacing */
.project-content p:last-child,
.employee-bio p:last-child {
    margin-bottom: 0;
}

/* Add the link-underline class after other link styles */
.link-underline {
    text-decoration: underline !important; /* Use !important to override inline styles */
    color: inherit !important; /* Inherit color from parent */
}

/* Override the global a style from base.html */
a.link-underline {
    text-decoration: underline !important;
}

.link-underline:hover {
    text-decoration: underline !important;
    color: var(--brand-primary) !important;
}

/* Target all links in the privacy policy page */
main section .text-gray-800 a {
    color: #6c757d !important; /* Explicitly set the gray color */
    text-decoration: underline;
}

/* Target specific links with the link-underline class */
.text-gray-800 a.link-underline {
    color: #6c757d !important;
    text-decoration: underline;
}