/* Custom CSS Variables */
:root {
    --primary-color: #7898C9;
    --secondary-color: #8C979F;
    --dark-blue: #03203B;
    --light-gray: #EEF2F3;
    --white: #FFFFFF;
    --black: #000000;
    --dark-text: #070B13;
    --warm-beige: #F3EFE9;
    --accent-1: #7898C9;
    --accent-2: #8C979F;
    --accent-3: #03203B;
    --accent-4: #EEF2F3;
    --accent-6: #070B13;
    --accent-7: rgba(0, 0, 0, 0.2);
    --accent-8: rgba(0, 0, 0, 0.6);
    --accent-9: rgba(255, 255, 255, 0.3);
    --accent-10: rgba(16, 22, 23, 0.8);
    --accent-11: #46628C;
    --accent-12: #E9EEF5;
    --accent-13: rgba(255, 255, 255, 0.8);
    --accent-14: #EBF0F6;
    --font-inter: 'Inter', sans-serif;
    --font-playfair: 'Playfair Display', serif;
}

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

body {
    font-family: var(--font-inter);
    line-height: 1.6;
    color: var(--dark-text);
    overflow-x: hidden;
}

/* Common Typography Classes */
.text-inter-300 {
    font-family: var(--font-inter);
    font-weight: 300;
}

.text-inter-400 {
    font-family: var(--font-inter);
    font-weight: 400;
}

.text-inter-500 {
    font-family: var(--font-inter);
    font-weight: 500;
}

.text-inter-600 {
    font-family: var(--font-inter);
    font-weight: 600;
}

.text-playfair-400 {
    font-family: var(--font-playfair);
}

.text-accent-1 {
    color: var(--accent-1);
}

.text-accent-3 {
    color: var(--accent-3);
}

.text-accent-4 {
    color: var(--accent-4);
}

.text-accent-5 {
    color: #FFFFFF;
}

.text-accent-6 {
    color: var(--accent-6);
}

.text-accent-8 {
    color: var(--accent-8);
}

.text-accent-9 {
    color: var(--accent-9);
}

.text-accent-10 {
    color: var(--accent-10);
}

.text-accent-11 {
    color: var(--accent-11);
}

.text-accent-12 {
    color: var(--accent-12);
}

.text-accent-13 {
    color: var(--accent-13);
}

.padding-top-100 {
    padding-top: 100px !important;
}

.padding-bottom-100 {
    padding-bottom: 100px !important;
}

.margin-bottom-100 {
    margin-bottom: 100px !important;
}

.margin-top-100 {
    margin-top: 100px !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
}

.section-title {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-bottom: 35px;
    margin-top: 10px;
}

.section-subtitle {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar {
    min-height: 70px;
    padding: 0;
}

.navbar .container {
    display: flex;
    align-items: center;
    min-height: 70px;
    border-bottom: 0.5px solid var(--accent-7);
}

/* Remove navbar border on index page only */
body.index .navbar .container {
    border-bottom: none;
}

/* Group Sites button active state on index page */
body.index .group-sites-btn[aria-expanded="true"],
body.index .group-sites-btn.show {
    color: var(--accent-3) !important;
    text-decoration: underline;
    text-decoration-color: var(--accent-3);
    text-underline-offset: 4px;
}

body.index .group-sites-btn[aria-expanded="true"] img,
body.index .group-sites-btn.show img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(2000%) hue-rotate(200deg) brightness(0.1) contrast(1.2);
}

/* External link icons in dropdown items */
.navbar-right .dropdown-item img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(2000%) hue-rotate(200deg) brightness(0.1) contrast(1.2);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.navbar-right .dropdown-item:hover img {
    opacity: 1;
}

/* Dropdown li active/clicked state */
.navbar-right .dropdown-menu li:active,
.navbar-right .dropdown-menu li.active {
    background-color: var(--accent-12) !important;
}

.navbar-right .dropdown-menu li:active .dropdown-item,
.navbar-right .dropdown-menu li.active .dropdown-item {
    color: var(--accent-3) !important;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 6px;
    text-decoration-thickness: 1px;
}

.navbar-brand {
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding-bottom: 27px;
}

.brand-logo {
    height: 38px;
    width: auto;
}

.navbar-nav {
    align-items: center;
}

.navbar-right {
    align-items: center;
}

/* Desktop navbar-collapse */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

.navbar-nav .nav-link {
    font: 500 16px/100% var(--font-inter);
    letter-spacing: 0.23px;
    color: var(--accent-3) !important;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

main {
    margin-top: 70px;
}

.group-sites-btn {
    font: 400 13px/18px var(--font-inter);
    vertical-align: middle;
    color: var(--accent-8);
    text-decoration: none;
    border: none;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.group-sites-btn:hover {
    color: var(--accent-3) !important;
}

.group-sites-btn img {
    width: 12px;
    height: 12px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.6) contrast(1);
}

.group-sites-btn::after {
    display: none;
}

.navbar-right .dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.navbar-right .dropdown-item {
    color: var(--accent-3);
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.navbar-right .dropdown-item:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

.navbar-divider {
    width: 1px;
    height: 40px;
    background-color: var(--accent-7);
    margin: 0 1rem;
    opacity: 1;
    border-width: 0.5px;
}

.language-btn {
    font: 400 13px/18px var(--font-inter);
    vertical-align: middle;
    color: var(--accent-8) !important;
    text-decoration: none;
    border: none;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.language-btn:hover {
    color: var(--accent-3) !important;
}

.language-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(5%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.05) contrast(1);
}

.language-btn::after {
    display: none;
}

/* The language menu is two short codes, so the bootstrap default - 10rem wide,
   16px items, its own blue for the active row - looked nothing like the rest
   of the header. Sized to its content and using the site palette instead. */
.language-dropdown .dropdown-menu {
    min-width: 0;
    padding: 4px;
    margin-top: 8px;
}

.language-dropdown .dropdown-item {
    font: 500 13px/18px var(--font-inter);
    color: var(--accent-8);
    padding: 8px 14px;
    border-radius: 4px;
    text-align: center;
}

.language-dropdown .dropdown-item:hover {
    background-color: var(--accent-12);
    color: var(--accent-3);
}

.language-dropdown .dropdown-menu li.active .dropdown-item {
    background-color: var(--accent-12);
    color: var(--accent-3);
    text-decoration: none;
}

/* Hero Section */
.hero-section {
    height: 820px;
    display: flex;
    align-items: center;
    background: #EEF2F3;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.hero-section .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.hero-image {
    height: 820px;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    padding: 4rem 3rem;
    height: 820px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 695px;
    width: 100%;
}

.hero-subtitle {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    color: var(--accent-3);
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 55px;
    line-height: 100%;
    letter-spacing: 0.64px;
    color: var(--accent-3);
    margin-bottom: 2rem;
}

.hero-btn {
    background: var(--primary-color);
    border: none;
    padding: 19px 2rem;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.4px;
    color: var(--accent-3);
    border-radius: 0;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.hero-btn img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(2000%) hue-rotate(200deg) brightness(0.1) contrast(1.2);
}

.learn-more-btn {
    border: none;
    padding: 19px 20px;
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.4px;
    color: var(--accent-3);
    border-radius: 0;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.learn-more-btn img {
    width: 16px;
    height: 12px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(2000%) hue-rotate(200deg) brightness(0.1) contrast(1.2);
    margin-left: 2rem;
}

.hero-btn:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(120, 152, 201, 0.3);
}

/* Metrics Section */
.metrics-section {
    background: var(--dark-blue);
    padding: 0;
    color: var(--white);
}

.metric-item {
    border-left: 0.5px solid rgba(255, 255, 255, 0.3);
    text-align: left;
}

.metrics-section .col-lg-3 {
    margin-bottom: 0;
}

.metric-number {
    font: 600 50px/48px var(--font-inter);
    letter-spacing: 0.63px;
    vertical-align: middle;
    color: var(--accent-4);
    margin-bottom: 1rem;
    padding: 102px 0 0 32px;
}

.metric-text {
    font: 400 15px/24px var(--font-inter);
    vertical-align: middle;
    color: var(--accent-4);
    padding: 6px 0 49px 32px;
    margin-bottom: 0;
}

/* About Section */
.about-section, .about-us-section {
    padding: 6rem 0;
    background: var(--white);
}

.about-content {
    padding-right: 3rem;
}

.about-us-content h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
}

.about-us-content p {
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
}

.about-text {
    font: 400 17px/30px var(--font-inter);
    vertical-align: middle;
    color: var(--accent-8);
    margin-bottom: 1.5rem;
}

.about-divider {
    height: 1px;
    background-color: var(--accent-7);
    margin: 52px 0 52px;
}

.services-title {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.23px;
    color: var(--accent-3);
    margin-bottom: 21px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    margin-bottom: 2rem;
}

.services-list {
    list-style: disc;
    padding: 0;
    margin-bottom: 28px;
    padding-left: 1.5rem;
}

.services-list li {
    padding: 0.5rem 0 0.5px 10px;
    color: var(--accent-8);
    font: 400 15px/36px var(--font-inter);
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

.about-image img {
    border-radius: 0;
}

/* Values Section */
.values-section, .horizontal-values-section {
    padding: 0 0 100px 0;
    background: var(--white);
}

.horizontal-values-section {
    padding: 0;
}

.values-section h2 {
    font-size: 40px;
    line-height: 55px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.values-section .value-card, .horizontal-values-section .value-card {
    padding: 0;
    background: transparent;
    border-radius: 0;
    height: 100%;
    transition: transform 0.3s ease;
    border-left: 0.5px solid var(--accent-7);
    padding: 0 31px;
}

.horizontal-values-section .value-card {
    border-bottom: 0.5px solid var(--accent-7);
    border-left: 0;
    padding: 0;
}

.horizontal-values-section .value-card p {
    border-left: 0.5px solid var(--accent-7);
    padding: 0 31px;
    margin-bottom: 20px;
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-8);
}

.value-card .value-logo {
    width: 100%;
    min-height: 70px;
    margin-bottom: 25px;
}

.value-subtitle {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--accent-3);
    margin-bottom: 1rem;
}

.value-title {
    font: 500 20px/30px var(--font-inter);
    letter-spacing: 0.5px;
    color: var(--accent-6);
    margin-bottom: 1rem;
}

.value-text {
    font: 400 15px/24px var(--font-inter);
    color: var(--accent-8);
    margin-bottom: 0;
}

/* Horizontal Values Section */
.horizontal-values-section h5 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 10px;
}

.horizontal-values-section p {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--black);
    margin-bottom: 40px;
}

/* Contact us section */

.contact-us-section {
    padding: 0 0 100px 0;
}

.contact-us-section .form-section {
    background: var(--accent-14);
    padding: 50px;
}

.contact-us-section .form-section h3 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 10px;
}

.contact-us-section .form-section p.form-instruction {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-3);
    margin-bottom: 40px;
}

.contact-us-section .form-section p.privacy-text {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--black);
    margin-bottom: 20px;
}

.contact-us-section .form-section .form-group {
    margin-bottom: 15px;
}

.contact-us-section .form-section .form-group label {
    margin-bottom: 5px;
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-3);
}

.contact-us-section .form-section .form-group input,
.contact-us-section .form-section .form-group textarea,
.contact-us-section .form-section .form-group select {
    border: 0.5px solid var(--accent-7);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-3);
    background: var(--white);
}

.contact-us-section .form-section .form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../images/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 15px;
    padding-right: 35px;
}

.contact-us-section .form-section .form-group select:focus {
    outline: none;
    border-color: var(--accent-1);
}

.contact-us-section .office-info img {
    margin-bottom: 20px;
}

.contact-us-section .office-detail {
    padding: 30px 0;
    border-bottom: 0.5px solid var(--accent-7);
}

.contact-us-section .office-detail h5 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    color: var(--black);
    margin-bottom: 10px;
}

.contact-us-section .office-detail p {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-6);
    margin-bottom: 0;
}

/* Timeline section */
.timeline-section {
    padding: 100px 0;
}


/* Vertical timeline line */
.timeline-line {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: -100px;
    width: 2px;
    background: var(--accent-1);
    z-index: 1;
}

/* Timeline start marker */
.timeline-start {
    position: absolute;
    left: 31px;
    top: -22px;
    width: 23px;
    height: 23px;
    background: var(--white);
    border-radius: 50%;
    z-index: 4;
    transform: translateX(-50%);
    border: 0.5px solid var(--accent-1);
}

.timeline-start::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    background: var(--accent-1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Timeline item */
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    z-index: 2;
}

/* Timeline dot */
.timeline-dot {
    position: absolute;
    left: 55px;
    top: 63px;
    width: 7px;
    height: 7px;
    background: var(--accent-1);
    border-radius: 50%;
    z-index: 3;
    transform: translateX(-50%) scale(0);
    transition: transform 0.6s ease-in-out;
}

/* Timeline branch (horizontal line) */
.timeline-branch {
    position: absolute;
    left: 55px;
    top: 65px;
    width: 0;
    height: 2px;
    background: var(--accent-1);
    z-index: 2;
    transition: width 0.8s ease-in-out;
}

/* Animated states */
.timeline-item.animate .timeline-dot {
    transform: translateX(-50%) scale(1);
}

.timeline-item.animate .timeline-branch {
    width: 80px;
}

/* Timeline content */
.timeline-content {
    margin-left: 175px;
    flex: 1;
}

.timeline-year {
    font-family: var(--font-playfair);
    font-weight: 400;
    font-size: 48px;
    line-height: 60px;
    color: var(--accent-3);
    margin-bottom: 15px;
}

.timeline-title {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 10px;
}

.timeline-description {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-8);
    margin-bottom: 0;
}

.timeline-description ul {
    margin: 8px 0;
    padding-left: 20px;
}

.timeline-description li {
    margin-bottom: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-line {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
    }

    .timeline-branch {
        left: 20px;
        width: 20px;
    }

    .timeline-content {
        margin-left: 40px;
    }

    .timeline-year {
        font-size: 28px;
    }

    .timeline-title {
        font-size: 18px;
    }
}

/* Services Section */
.services-section {
    padding: 6rem 0;
    background: var(--white);
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon {
    width: 80px;
    height: 80px;
}

/* PNG вариант със сияние: платното е по-голямо от кръга, затова е 273px */
.play-icon-glow {
    width: 273px;
    height: 273px;
}

.service-card {
    background: linear-gradient(152.79deg, var(--accent-12) 0%, #F9FEFF 81.22%);
    padding: 2.5rem 2rem;
    border-radius: 0;
    height: 347px;
    transition: transform 0.3s ease;
    border: 0.5px solid var(--accent-7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-card:hover,
.service-card:hover + .service-footer {
    transform: translateY(-5px);
}

.service-title {
    font: 500 50px/60px var(--font-inter);
    letter-spacing: 0.63px;
    vertical-align: middle;
    color: var(--accent-3);
    margin-bottom: 1rem;
}

.service-text {
    font: 500 16px/24px var(--font-inter);
    letter-spacing: 0.5px;
    vertical-align: middle;
    color: var(--accent-3);
    margin: auto 0 0 0;
}

.service-footer {
    background: var(--accent-3);
    padding: 0;
    display: flex;
    align-items: center;
    border: 0.5px solid var(--accent-7);
    border-top: none;
}

.service-label {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: var(--accent-4);
    flex: 1;
    padding: 26px 21.95px;
    margin: 0px 0px 0px 12px;
}

.service-button {
    width: 73px;
    border-left: 0.5px solid var(--accent-9);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 26px 21.95px
}

.service-button:hover {
    background: var(--accent-9);
}

.arrow-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(200%) hue-rotate(200deg) brightness(0.95) contrast(1);
}

.btn-primary {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), var(--accent-1) !important;
    border: none;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(120, 152, 201, 0.3);
}

/* Sustainability Section */
.sustainability-section {
    padding: 6rem 0;
    background: linear-gradient(to bottom, var(--accent-3) 362px, #FFFFFF 362px);
    color: var(--white);
}

.sustainability-image img {
    border-radius: 15px;
}

.sustainability-content {
    padding-left: 3rem;
}

.sustainability-section .section-subtitle {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: var(--accent-4);
}

.sustainability-section .section-title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    color: #FFFFFF;
}


.sustainability-card {
    background: var(--white);
    padding: 30px 30px 18px;
    border-radius: 0;
    color: var(--dark-blue);
}

.sustainability-image-container {
    position: relative;
    width: 100%;
}

.sustainability-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sustainability-button {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 73px;
    height: 73px;
    background: var(--accent-3);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sustainability-button:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
}

.sustainability-button .arrow-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.section-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    margin: 0;
}

/* Insights Section */
.news-section .section-subtitle {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-3);
    text-align: left;
}

.news-section .section-title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    text-align: left;
}

.news-section .btn-outline-primary {
    height: 55px;
    border: 0.5px solid var(--accent-3);
    color: var(--accent-3);
    background: transparent;
    padding: 0 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
}

.news-section .btn-outline-primary:hover {
    background: var(--accent-3);
    color: white;
}

.news-section .btn-outline-primary img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(2000%) hue-rotate(200deg) brightness(0.8) contrast(1);
}

/* News Cards */
.news-card {
    height: 541px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 0;
    overflow: hidden;
    border: 0.5px solid var(--accent-7);
}

.news-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-content a {
    text-decoration: none;
    color: var(--accent-3);
}

.news-content h5 {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0.5px;
}

.news-image-container {
    position: relative;
    height: 260px;
    width: 100%;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-button {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 73px;
    height: 73px;
    background: var(--accent-3);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-button:hover {
    background: var(--dark-blue);
    transform: translateY(-2px);
}

.news-button .arrow-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.sustainability-title {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 1rem;
}

.sustainability-title + hr {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    margin: 1rem 0;
}

.sustainability-text {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: var(--accent-8);
    margin-bottom: 0;
}

.btn-outline-light {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* News Section */
.news-section {
    padding: 6rem 0;
    background: var(--white);
}

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

.news-image {
    height: 260px;
    overflow: hidden;
}

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

.news-content {
    padding: 2rem 2rem 0 2rem;
    position: relative;
}

.news-title {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0.5px;

}

.news-date {
    font: 400 13px/18px var(--font-inter);
    vertical-align: middle;
    color: var(--accent-8);
    margin-bottom: 1rem;
}

.news-arrow {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    color: var(--primary-color);
    font-size: 1.25rem;
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--accent-12) 0.57%, #FFFFFF 97.27%);
}

.contact-section .section-title {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    text-align: center;
    vertical-align: middle;
    color: var(--accent-3);
}

.contact-text {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: var(--accent-8);
    margin-bottom: 2rem;
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.contact-section .btn-outline-primary {
    height: 55px;
    border: 0.5px solid var(--accent-3);
    color: var(--accent-3);
    background: transparent;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-section .btn-outline-primary:hover {
    background: var(--accent-3);
    color: white;
}

.contact-section .btn-outline-primary img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(2000%) hue-rotate(200deg) brightness(0.8) contrast(1);
}


/* Footer */
.footer {
    background-image: url('../images/footer-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
}

.footer-logo {
    height: 60px;
    margin-top: 163px;
    margin-bottom: 0.5rem;
}

.footer-company {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    color: var(--accent-4);
    background: var(--accent-3);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px;
    margin-top: 143px;
    margin-bottom: 0;
}

footer .group-sites-dropdown {
    position: relative;
    display: block;
    width: 100%;
}

footer .group-sites-btn {
    background: rgba(227, 227, 227, 0.0792996);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 0;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: var(--accent-4);
    padding: 15px;
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

footer .group-sites-btn img {
    width: 10px;
    height: 5px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(2000%) hue-rotate(200deg) brightness(0.8) contrast(1);
}

footer .group-sites-btn:hover {
    background: rgba(227, 227, 227, 0.15);
    color: var(--accent-4);
}

footer .dropdown-menu {
    background: rgba(227, 227, 227, 0.0792996);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

footer .dropdown-item {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--accent-4);
    padding: 0.5rem 1rem;
}

footer .dropdown-item:hover {
    background: rgba(227, 227, 227, 0.15);
    color: var(--accent-4);
}

.footer-title {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 2rem
}

.social-link {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0px;
    color: var(--accent-4);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.social-link:hover {
    color: var(--accent-4);
}

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

.footer-nav li {
    margin-bottom: 0.5rem;
    display: inline-block;
    margin-right: 1rem;
}

.footer-nav li:last-child {
    margin-right: 0;
}

.footer-nav a {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.23px;
    color: var(--accent-4);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--accent-4);
}

.footer-divider {
    border-color: var(--secondary-color);
    margin: 3rem 0 0;
}

.copyright {
    font: 400 13px/18px var(--font-inter);
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 31px 0;
}

.legal-links {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    padding: 31px 0;
}

.legal-link {
    font: 500 14px/100% var(--font-inter);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-link:hover {
    color: var(--white);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-content {
        padding: 2rem 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .about-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }

    .sustainability-content {
        padding-left: 0;
        margin-top: 3rem;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .metric-number {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .legal-links {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    /* Mobile navbar layout - 2 rows */
    .navbar-collapse {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem 0;
    }

    /* Show navbar-collapse when collapsed */
    .navbar-collapse.show {
        display: flex !important;
    }

    .navbar-nav {
        justify-content: center !important;
        margin-bottom: 1rem;
        width: 100%;
    }

    .navbar-nav .nav-item {
        text-align: center;
    }

    .navbar-right {
        justify-content: center !important;
        width: 100%;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .navbar-divider {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-content {
        padding: 1.5rem 1rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .value-card,
    .service-card,
    .sustainability-card {
        padding: 1.5rem;
    }

    .news-content {
        padding: 1.5rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}


/* Intro Section */
.intro-section {
    padding-top: 55px;
}

.intro-section img {
    max-width: 1800px;
    width: 100%;
}

.intro-section h1 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    line-height: 73px;
    letter-spacing: 0.642857px;
    color: var(--accent-3);
    margin-bottom: 34.5px;
}

.intro-section .nav {
    border-bottom: 0.5px solid var(--accent-7);
}

.intro-section:has(+ .stats-section) .nav {
    border-bottom: 0;
}

.intro-section .nav .nav-link {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.23px;
    color: var(--accent-2) !important;
    background: none;
    border: none;
    padding: 12px 0;
    margin-right: 32px;
}

.intro-section .nav .nav-link.active {
    color: var(--accent-3) !important;
    background: none;
    border: none;
}

.intro-section .nav .nav-link:hover {
    color: var(--accent-3) !important;
    border: none;
}

.funds-section {
    padding: 100px 0;
}

.international-section {
    padding: 100px 0;
}

.international-section h2 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.alternative-section {
    padding: 100px 0;
}

.alternative-section h2 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 20px;
}

.alternative-section .alternative-card {
    background: #FFFFFF;
    border: 0.5px solid #e9ecef;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
}

.alternative-section .alternative-card .card-content {
    padding: 39px 30px;
}

.alternative-section .alternative-card h4 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 20px;
}

.alternative-section .alternative-card p {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;

    color: var(--accent-8);
}

/* Alternative cards gap */
@media (min-width: 992px) {
    .alternative-section .row {
        gap: 80px;
    }

    .alternative-section .row > [class*="col-"] {
        flex: 1;
        max-width: none;
    }
}

/* Funds section */
.funds-section .quote-box {
    background: var(--accent-3);
    padding: 30px 25px;
}

.funds-section .quote-box .quote-icon {
    margin-bottom: 40px;
    margin-left: 5px;
}

.funds-section .quote-box p {
    font-family: var(--font-playfair);
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0px;
    color: var(--accent-13);
    margin-bottom: 0px;
}

.funds-section .quote-box p:not(:first-of-type) {
    padding-right: 150px;
}

/* Чертата спира преди снимката, вместо да опира в човека. Рисува се с
   псевдоелемент, за да може да е по-къса от текстовия блок под нея. */
.funds-section .quote-content {
    position: relative;
    margin-top: 25px;
    padding-top: 25px;
}

.funds-section .quote-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    border-top: 0.5px solid var(--accent-9);
}

/* Снимката е чист изрез само на човека. Светлината зад него се рисува тук,
   а не в самия файл, за да важи и за снимки, качени по-късно от админа.
   overflow:hidden я държи в кутията, когато цитатът е къс и снимката стърчи. */
.funds-section .quote-box {
    overflow: hidden;
}

.funds-section .quote-box::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -60px;
    width: 480px;
    height: 440px;
    background: radial-gradient(closest-side ellipse at 58% 46%,
                rgba(125, 175, 230, 0.32) 0%,
                rgba(125, 175, 230, 0.16) 45%,
                rgba(125, 175, 230, 0) 78%);
    z-index: 1;
    pointer-events: none;
}

.funds-section .quote-content h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0px;
    margin-bottom: 0;
}

.funds-section .quote-content span {
    font-size: 13px;
    line-height: 18px;
}

.funds-section .quote-box .person-photo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 390px;
    height: auto;
    object-fit: cover;
    object-position: center top;
    z-index: 2;
}

.asset-management .introduction-section {
    padding-bottom: 0 !important;
}

/* Stats section */

.stats-section {
    background: linear-gradient(0deg, var(--accent-12), var(--accent-12)), linear-gradient(0deg, var(--accent-1), var(--accent-1)), linear-gradient(0deg, var(--accent-12), var(--accent-12)), var(--accent-1);
    padding: 50px 0;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
}

.stats-section .stat-item {
    padding: 20px 30px;
    border-right: 0.5px solid var(--accent-7);
}

.stats-section .stat-item:last-child {
    border-right: 0;
}

.stats-section .stat-item span {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
}

.stats-section .stat-item h2 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
}

.stats-section .stat-item p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
}

/* Focus section */

.focus-section {
    padding: 100px 0;
}

.focus-section .focus-column, .business-section .focus-column {
    position: relative;
    padding: 0px 33px;
}

.focus-section .focus-column h5, .business-section .focus-column h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
}

.focus-section .focus-column h5:before, .business-section .focus-column h5:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 1px;
    background-color: var(--accent-1);
}

.focus-section .focus-column p, .business-section .focus-column p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    padding: 0;
    margin: 0 auto;
}

/* Business section */
.business-section {
    padding: 100px 0;
}

.business-section h3 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
}

.business-section .focus-column {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-right: 2%;
}

.business-section .focus-column:nth-child(even) {
    margin-right: 0;
}

.business-section h5 {
    font-size: 12px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    margin-bottom: 0;
    padding: 0;
}

.business-section hr {
    margin: 20px auto;
    border: 0.5px solid var(--accent-7);
}

.business-section .ceo-card {
    padding: 37px;
    /* The markup and the CMS copy are both written for a dark card
       (text-accent-13 is white), so without this the text sits white on
       white and is effectively invisible. */
    background: var(--accent-3);
}

.business-section .ceo-card h4 {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.business-section .ceo-card h4 p:first-of-type {
    font-size: 15px;
    line-height: 24px;
}

.business-section .ceo-card .quote-icon {
    margin: 24px 0;
}

.business-section .ceo-card p:not(:first-of-type) {
    font-size: 24px;
    line-height: 40px;
    display: flex;
    align-items: flex-end;
}

/* Partnerships section */
.partnerships-section {
    background: #E9EEF5;
    padding: 90px 0 90px 0;
}

.partnerships-section h2 {
    font-style: Semi Bold;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;

}

.partner-item p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;

}

/* Custom Checkbox Styles */
.diamond-wrap {
    height: 1510px;
}

.diamond-wrap .form-group {
    position: relative;
    margin-bottom: 47px;
    display: flex;
    align-items: flex-start;
}

.diamond-wrap .form-group label {
    font-family: var(--font-inter);
    font-weight: 500;
    color: var(--accent-3);
    margin-bottom: 0;
    padding-left: 80px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.diamond-wrap .form-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.diamond-wrap .form-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    background: #E9EEF5;
    border: none;
    border-radius: 0;
}

.diamond-wrap .form-group input[type="checkbox"]:checked + label::before {
    background: #E9EEF5;
}

.diamond-wrap .form-group input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    width: 29px;
    height: 25px;
    background-image: url('../images/checkmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.key-achievements h2 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
}

.key-achievements p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
}

/* Executive team */
.executive-team {
    padding: 100px 0;
    background: var(--accent-12);
}

.executive-team h2 {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
}

.executive-team p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;

}

.executive-team .team-card {
    border-radius: 0;
    border: 0;
    /* The columns already stretch to the tallest in the row; make the card
       fill its column so the white background reaches the bottom even when a
       neighbour has a longer description. */
    height: 100%;
}

.executive-team .team-card-body {
    padding: 20px 30px;
}

.executive-team .team-card-body .card-body {
    padding: 0;
    margin: 0;
    text-align: left;
}

.executive-team .team-card-body .card-body h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.executive-team .team-card-body .card-body .position {
    font-size: 13px;
    line-height: 18px;
    min-height: 36px;
}

.executive-team .team-card-body .card-footer {
    border-top: 0.5px solid var(--accent-7);
    padding: 20px 0 0;
    margin: 20px auto 0;
    background: var(--white);

    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--accent-3);
    /* Reserve two lines of text plus the 20px top padding, so a one-line
       description does not leave the card shorter than the rest of the row,
       the same way .position above reserves its two lines. */
    min-height: 57px;
}

/* Team Modal Styles */
.team-modal-content {
    border-radius: 0;
    border: none;
    background: transparent;
    max-height: 700px;
}

.team-modal-content .row {
    min-height: 700px;
}

/* Поп-ъп за екипа по дизайн: 1276x700, лява колона 406.67px */
#teamModal .modal-dialog {
    max-width: 1276px;
}

@media (min-width: 992px) {
    .team-modal-content .col-lg-5 { width: 31.87%; }
    .team-modal-content .col-lg-7 { width: 68.13%; }
}

.team-modal-content .col-lg-5 {
    background-color: var(--accent-4);
    display: flex;
    flex-direction: column;
}

/* Снимката се ресайзва до 406x350 от LiipImagine (filter: employee_cover),
   тук само я разпъваме до ширината на колоната. */
.team-modal-left img {
    display: block;
    width: 100%;
    height: auto;
}

/* Лявата колона стои 30px по-високо от дясната (описанието).
   .modal-dialog-scrollable слага overflow:hidden на .modal-content,
   затова го разрешаваме, иначе горните 30px на снимката се отрязват.
   Отстъпът в диалога пази изнесената част да не излиза от екрана. */
@media (min-width: 992px) {
    .team-modal-content .col-lg-5 {
        margin-top: -30px;
    }

    #teamModal .modal-dialog-scrollable .modal-content.team-modal-content {
        overflow: visible;
    }

    #teamModal .modal-dialog-scrollable .modal-body {
        overflow: visible;
    }

    #teamModal .modal-dialog-scrollable {
        padding-top: 30px;
    }
}

@media (max-width: 991.98px) {
    .team-modal-content .col-lg-7 {
        padding-top: 0;
    }
}

.team-modal-left {
    border-right: 0.5px solid var(--accent-7);
    background-color: var(--accent-4);
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-modal-content .team-modal-position {
    background: var(--accent-4);
    padding: 51px;
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-modal-content .team-modal-position h3 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.team-modal-content .team-modal-position .position {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
    padding: 0;
    margin: 0;
}

.team-modal-content .team-modal-position .team-modal-footer {
    border-top: 0.5px solid var(--accent-7);
    padding: 20px 0 0;
    margin: 20px auto 0;

    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-3);
}

.team-modal-right {
    background: var(--white);
    overflow-y: auto;
    height: 100%;
    position: relative;
    padding: 70px 60px;
}

.team-modal-right {
    position: relative;
    padding: 88px 56px 56px;
}

@media (max-width: 991.98px) {
    .team-modal-right { padding: 32px 24px 24px; }
}

.team-modal-content .btn-close {
    position: absolute;
    top: 36px;
    right: 36px;
    width: 22px;
    height: 22px;
    background: url('../images/cross.svg') no-repeat center center;
    background-size: contain;
    opacity: 1;
    z-index: 10;
}

.team-modal-right p, .team-modal-right li {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;
    color: var(--black);
}

.team-modal-right a {
    color: var(--accent-11);
}

.team-modal-right ul {
    padding-left: 20px;
}

.team-modal-right ul li {
    margin-bottom: 8px;
}

/* Testimonial section */
.testimonial-section {
    position: relative;
}

/* Бялата кутия застъпва долния край на снимката с постоянна стойност,
   независимо от ширината на екрана. */
.testimonial-section .container {
    position: relative;
    z-index: 2;
    margin-top: -130px;
}

.testimonial-section .quote-box {
    background: var(--white);
    padding: 40px;
}

.testimonial-section .quote-box h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.testimonial-section .quote-box h2 {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
    color: var(--accent-3);
    margin-bottom: 0;
}

.testimonial-section .quote-box span {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
}

.testimonial-section .quote-box p {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0px;
}

.testimonial-section .quote-box.quote-box-style-2 p {
    font-family: var(--font-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--accent-3);
}

.testimonial-section .quote-icon {
    width: 49px;
    height: 41px;
    margin-bottom: 0;
    margin-right: 15px;
    padding: 8px;
}

.testimonial-section .position {
    font-size: 14px;
    color: rgba(70, 98, 140, 1);
    margin-bottom: 0;
}

.testimonial-section .quote-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.testimonial-section .quote-header.quote-box-style-2 {
    margin-bottom: 20px;
}

/* Alternative cards */

.alternative-card {
    border-radius: 0;
}

.alternative-card p {
    min-height: 223px;
}

/* Partners grid */

.partner-block {
    padding: 20px 60px 20px 20px;
    background: linear-gradient(0deg, var(--accent-12), var(--accent-12)), linear-gradient(0deg, var(--accent-12), var(--accent-12)), linear-gradient(180deg, var(--accent-12) 0.57%, #FFFFFF 97.27%), linear-gradient(180deg, var(--accent-12) 0%, #FFFBF3 97.27%), linear-gradient(180deg, #EEF2F3 0%, #FFFBF3 97.27%);
    min-height: 630px;
}

.partner-block .image-container {
    min-height: 200px;
    display: flex;
    align-items: center;
}

.partner-block p {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--accent-10);
}

/* Introduction section */
.introduction-section {
    padding: 90px 0;
}

.introduction-section h2 {
    margin-bottom: 25px;
    font-family: var(--font-inter);
    font-weight: 600;
}

.introduction-section p {
    color: var(--accent-10);
    font-family: var(--font-inter);
    font-weight: 400;
}

/* Insights section */

.news-section .filter-links {
    border-top: 0.5px solid var(--accent-7);
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.news-section .filter-links a {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--accent-2);
    text-decoration: none;
}

.news-section .filter-links a.active, .news-section .filter-links a:hover {
    color: var(--accent-3);
}

/* Anchor targets for in-page links. Each CMS section carries its own id, so
   the offset goes on the sections themselves: it keeps the jump clear of the
   70px fixed navbar instead of landing the heading underneath it. */
section[id],
.container[id] {
    scroll-margin-top: 90px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    /* body already carries overflow-x: hidden, but with it only on body the
       propagation to the viewport is unreliable and full-bleed sections could
       still push a horizontal scrollbar. */
    overflow-x: hidden;
}


/* Background Image Section */
.background-image-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.background-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.what-hero {
    width: 100%;
    max-width: 1500px;
    height: 520px;
    margin: 0 auto 24px;
    position: relative;
    overflow: hidden;
}

.what-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 992px) {
    .what-hero {
        height: 420px;
    }
}

@media (max-width: 576px) {
    .what-hero {
        height: 300px;
    }
}

/* Services section */
.services-main {
    padding: 60px 0;
    background: #FFFFFF;
}

.service-item {
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 0;
}

.service-item:last-child {
    margin-bottom: 80px;
}

/* Text positioning - starts aligned with middle of image */
.service-item .row {
    position: relative;
    align-items: flex-start;
}

.service-content h2 {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.5px;
}

.service-content .intro-text {
    font-size: 17px;
    line-height: 30px;
}

.service-section h2 {
    color: var(--accent-3);
    font-size: 40px;
    margin-bottom: 12px;
    font-style: Semi Bold;
    line-height: 55px;
    letter-spacing: 0.5px;
    vertical-align: middle;

}

.service-section .subtitle {
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 30px;
    letter-spacing: 0.5px;
}

.service-section p {
    margin-bottom: 24px;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    color: var(--accent-8);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.service-features li {
    display: flex;
    align-items: flex-start;
    padding: 20px 0 20px 20px;
    border-bottom: 0.5px solid var(--accent-7);
    position: relative;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0px;
    color: var(--accent-8);
}

.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    width: 1px;
    background: rgba(120, 152, 201, 1);
}

.service-btn {
    background: rgba(120, 152, 201, 1);
    color: rgba(3, 32, 59, 1);
    border: none;
    width: 219px;
    height: 55px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.service-btn:hover {
    background: rgba(3, 32, 59, 1);
    color: #fff;
    transform: translateY(-2px);
}

.service-btn img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(25%) saturate(2000%) hue-rotate(200deg) brightness(0.8) contrast(1.2);
}

/* Laptop screens adjustments */
@media (min-width: 1024px) and (max-width: 1440px) {
    .sustainability-title {
        font-size: 24px;
        line-height: 32px;
    }

    .sustainability-text {
        font-size: 13px;
        line-height: 30px;
    }

    .service-label {
        font-size: 13px;
    }

    .funds-section .quote-box p {
        font-size: 18px;
    }

    .testimonial-section .quote-box p {
        font-size: 18px;
    }

    .stats-section .stat-item h2 {
        font-size: 32px;
    }
}

/* ==========================================================================
   Home page, phones and small tablets.

   Everything below is inside a max-width query so the desktop layout is
   untouched. The hero, the video poster and the news carousel are the parts
   that were laid out for two columns and had nowhere to go once bootstrap
   stacked them at col-lg.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* The section and both of its halves were pinned to height: 820px each.
       Stacked, that is 1640px of content in an 820px box, so the image spilled
       340px above the section and the title and button fell out below it. */
    .hero-section {
        height: auto;
        display: block;
    }

    .hero-image {
        height: 300px;
    }

    .hero-content {
        height: auto;
        padding: 40px 16px 48px;
        max-width: none;
    }

    .hero-title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 1.5rem;
    }

    .hero-btn {
        width: 100%;
        text-align: center;
    }

    /* 273px of play button on a 390px screen covered most of the poster. */
    .play-icon-glow {
        width: 120px;
        height: 120px;
    }

    /* The 102px/49px padding centres each figure in the desktop bar. Stacked
       one per row it just leaves ~150px of empty navy between them. The left
       border belongs to a row of four columns, so it becomes a rule between
       the stacked items instead. */
    .metric-number {
        font-size: 36px;
        line-height: 44px;
        padding: 32px 0 0 24px;
        margin-bottom: 0.5rem;
    }

    .metric-text {
        padding: 0 24px 32px;
    }

    .metric-item {
        border-left: 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.3);
    }

    .metrics-section [class*="col-"]:first-child .metric-item {
        border-top: 0;
    }

    /* Section headings. A generic .section-title { font-size: 1.75rem } already
       exists in the 768px block, but these four carry section-scoped rules at
       40px/55px that outrank it, so they stayed desktop-sized. Matching the
       specificity brings them into line, and the 55px leading is far too open
       once the text wraps to three or four lines. */
    .values-section .section-title,
    .sustainability-section .section-title,
    .news-section .section-title,
    .contact-section .section-title {
        font-size: 28px;
        line-height: 38px;
    }

    .section-title {
        line-height: 38px;
    }

    /* 50px/60px is a desktop display size; on a phone it wrapped to most of
       the card. */
    .service-title {
        font-size: 28px;
        line-height: 36px;
    }

    .sustainability-title {
        font-size: 22px;
        line-height: 30px;
    }

    .news-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* height: 100% resolves against the grid row, so stacked one per row the
       copy ran ~20px past the bottom of every card. */
    .values-section .value-card,
    .horizontal-values-section .value-card {
        height: auto;
        border-left: 0;
        padding: 0;
    }

    /* Both cards are pinned to a desktop height and the content only just
       fits at 390px - a longer headline or an extra line of copy would be
       clipped outright. */
    .service-card {
        height: auto;
        min-height: 0;
    }

    .news-card {
        height: auto;
    }

    /* 96px/100px of vertical padding on a phone is most of a screen of
       whitespace before anything is read. */
    .about-section,
    .services-section,
    .sustainability-section,
    .news-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .contact-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .values-section,
    .horizontal-values-section {
        padding-bottom: 56px;
    }

    /* Key Achievements.

       The section is a fixed 1510px with the text absolutely positioned
       against its bottom edge, so that the copy sits under the corporate
       diagram on a desktop. On a phone the diagram scales down to ~240px and
       the fixed height leaves roughly 1000px of empty white between the two.
       Height goes to the content and the text block returns to normal flow.

       The three columns are plain .col-4, with no breakpoint suffix, so they
       stay three-up at every width: at 390px that is 130px per column, and
       with the label's 80px of padding reserved for the tick there were about
       50px left for the text, which broke to one or two words per line and
       overlapped the neighbouring column. They stack instead, and the arrow
       graphic that fills the first of them is not worth a row of its own. */
    .diamond-wrap {
        height: auto;
        padding-bottom: 56px;
    }

    .diamond-wrap .container.position-absolute {
        position: static !important;
        transform: none !important;
        left: auto !important;
    }

    .diamond-wrap .row.my-5 > .col-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .diamond-wrap .row.my-5 > .col-4:first-child {
        display: none;
    }

    .diamond-wrap .form-group {
        margin-bottom: 24px;
    }

    .diamond-wrap .form-group label {
        padding-left: 56px;
        min-height: 40px;
        font-size: 15px;
        line-height: 22px;
    }

    /* two-columns-with-left-image (Asset Management, Insurance and Pensions on
       /what-we-do).

       Its columns are col-6 col-lg-6 col-xxl-5 - the base col-6 has no
       breakpoint, so unlike the sibling two-columns-with-image partial, which
       uses a plain col-lg-6, this one never stops being two 50% columns. At
       390px that is 195px a side, leaving 171px for the copy: the 40px/55px
       heading took three lines for two words and the feature list ran over
       450px tall. Stacking the columns is the whole fix; the rest is the
       heading coming down to a phone size. */
    .about-us-section .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .about-us-section .service-image {
        margin-bottom: 32px;
    }

    .service-section h2 {
        font-size: 28px;
        line-height: 38px;
    }

    .service-section .subtitle {
        font-size: 18px;
        line-height: 26px;
    }

    /* two-columns-with-quote (karoll_knowledge on /sustainability).

       .person-photo is absolutely positioned bottom right with z-index: 2, so
       on a phone - where it is as wide as the whole box - it sat in front of
       the tail of the quote and the author's name. It stays where it is and
       keeps its overlap with the text; it just goes behind it instead of in
       front, and comes down in size so it reads as a backdrop rather than
       covering the column. */
    .funds-section .quote-box .person-photo {
        z-index: 0;
        width: 62%;
        max-width: 260px;
        opacity: 0.85;
    }

    .funds-section .quote-box p,
    .funds-section .quote-content {
        position: relative;
        z-index: 1;
    }

    .funds-section .quote-box p {
        font-size: 19px;
        line-height: 32px;
    }

    /* The row is align-items: flex-end so the two columns line up along their
       bottom edge on a desktop. Stacked, that just butts the blue quote box
       straight against the "Learn more" button that ends the column above it -
       measured 0px between them. */
    .funds-section .row > [class*="col-"] + [class*="col-"] {
        margin-top: 40px;
    }

    /* image-with-white-quote.

       The white box is pulled up over the bottom of the photo by a flat
       -130px. The photo is fluid, so that overlap is a fixed slice of an image
       that keeps shrinking: 17% of it at 1440 but 64% at 390 and 79% at 320,
       which left a 34px sliver of photo showing. Scaled to the width instead,
       so the same proportion of the photo stays visible at every size. */
    .testimonial-section .container {
        margin-top: -12vw;
    }

    /* Footer. The right-hand column is aligned right for the desktop layout,
       where it sits beside the brand block; stacked on a phone it reads better
       centred. The legal links are centred too - there is an existing 768px
       rule pulling them left, which this overrides. The background is a wide
       photo, so cover + centre crops both edges away on a narrow screen;
       anchoring it left keeps the left of the image visible. */
    .footer {
        background-position: left center;
    }

    .footer-links,
    .footer-title,
    .footer-nav {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-nav li {
        margin-right: 0.75rem;
        margin-left: 0.75rem;
    }

    .footer-nav li:last-child {
        margin-right: 0.75rem;
    }

    .legal-links {
        justify-content: center;
    }

    .copyright {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .hero-image {
        height: 240px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 36px;
    }

    .play-icon-glow {
        width: 96px;
        height: 96px;
    }

    .values-section .section-title,
    .sustainability-section .section-title,
    .news-section .section-title,
    .contact-section .section-title,
    .section-title {
        font-size: 26px;
        line-height: 34px;
    }

    .service-title {
        font-size: 24px;
        line-height: 32px;
    }
}