/*!
Theme Name: Headmap
Theme URI: https://them.es/starter
Author: Bishwas Thapa
Author URI: https://bishwas.me
Description: A wordpress theme for Headmap
Version: 3.5.34
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: headmap 
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */

/* From http://codex.wordpress.org/CSS */


@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1380px
    }
}

@media (min-width: 1600px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1500px
    }
}



.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.gallery-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
    display: inline-block;
    max-width: 100%;
}

.gallery-item a img {
    display: block;
    -webkit-transition: -webkit-filter 0.2s ease-in;
    transition: -webkit-filter 0.2s ease-in;
    transition: filter 0.2s ease-in;
    transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
    -webkit-filter: opacity(60%);
    filter: opacity(60%);
}

.gallery-caption {
    display: block;
    text-align: left;
    padding: 0 10px 0 0;
    margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
    max-width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}

.bypostauthor {
    font-weight: bold;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* from custom css */
:root {
    --secondary: #55253B;
    --accent: #1281FF;
    --accent-secondary: #F7EACF;
    --white: #fff;
    --white-dim: #ffffff2b;
    --black: #000;
}

body {
    font-family: "Poppins", serif;
}

.w-80 {
    width: 85%;
}

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

.btn-primary,
.btn-secondary, .btn-primary-disabled {
    padding: 0.75rem 1.25rem;
}

.btn-secondary {
    background: var(--accent-secondary);
    color: var(--secondary);
}

.large-button {
    margin-bottom: 0.75rem;
}

.large-white-btn {
    text-decoration: none;
    margin-top: 0.5rem;

    .btn {
        font-weight: 600;
        border-radius: 0;
        border-left: 7px solid var(--accent);
        background: var(--white);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 1.25rem 1.58rem;
        color: var(--secondary);
        transition: all 0.3s ease-in;

        &:hover {
            color: var(--white);
            border-color: var(--white);
            background: linear-gradient(266deg, #3EB8EB 0%, #1658A5 98%);

            svg path {
                color: var(--white) !important;
            }
        }
    }
}

.consultation-button {
    margin-top: 2rem;
}

.consultation-button a {
    display: block;

}

.transparent-blue-button {
    border: 2px solid var(--accent);
    width: 100%;
    padding: 1.25rem 2.25rem;
    color: var(--accent);

    &:hover {
        border-color: var(--accent-secondary);
        background: var(--accent);
        color: var(--white);
    }

}

.small-buttons {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;

    a {
        padding: 0.01rem 0.05rem;
        margin-right: 1rem;
        background: var(--secondary);
        transition: 0.5s ease-in-out background;

        .btn {
            color: var(--white);
            font-weight: 600;
        }

        &.pink {
            background: #FFC8E6;

            .btn {
                color: var(--secondary);
            }
        }

        &.greenish {
            background: #E0FFC8;

            .btn {
                color: #255542;
            }
        }

        &.yellowish {
            background: #FFF2C8;

            .btn {
                color: var(--secondary);
            }
        }

        &.blueish {
            background: #C8F9FF;

            .btn {
                color: #253E55;
            }
        }

        &:hover {
            background: var(--secondary);

            .btn {
                color: var(--white) !important;
            }
        }
    }
}

.large-buttons {
    display: flex;

    a {
        border: 2px solid var(--secondary);
        margin-right: 1rem;
        transition: 0.5s ease-in-out background;

        &:hover,
        &.active {
            background: var(--secondary);
            color: var(--white) !important;

            &:hover {
                background: var(--black);
            }
        }

        &.active .btn {
            color: var(--white);
        }
    }
}

.small-header {
    color: var(--secondary);
    font-size: 1rem;
}

.large-buttons .btn {
    border-radius: 0;
    padding: 0.5rem 1.5rem;
    font-weight: 600;

    svg {
        margin-right: 0.75rem;
    }
}

.title-and-icon {
    align-items: center;
    padding-bottom: 1.5rem;

    h3 {
        font-size: 2.25rem;
        font-weight: 600;
        margin-left: 1rem;
        color: var(--accent-secondary);
    }
}

.section-title {
    padding-bottom: 2.5rem;

    .left {
        flex-basis: 70%;
    }

    .right {
        flex-basis: 30%;
    }

    h3 {
        font-size: 2.25rem;
        font-weight: 600;
        margin-left: 1rem;
        color: var(--accent-secondary);
        margin: 0;
    }

    p {
        color: #ffffffb8;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.section-title.purple {
    h3 {
        color: var(--secondary);
    }

    p {
        color: #00000075;
    }
}

.section-padding {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
}

.section-title-1 {
    text-align: center;

    h2 {
        color: #55253B;
        font-size: 3.625rem;
        font-weight: 600;
        position: relative;
    }

    h6 {
        opacity: 0.6;
        font-size: 1rem;
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
        color: var(--black);
    }

}

.section-title-1.with-vector {
    h2::after {
        position: absolute;
        bottom: 1.5rem;
        content: "";
        height: 4.5rem;
        width: 4.5rem;
        background: url('./assets/img/Vector.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.image-with-border {
    border: 12px solid var(--accent-secondary);
    transition: border 0.5s ease;

    &:hover {
        border-color: var(--accent);
    }
}

figure.image-with-arrow {
    margin: 0;
    border: 20px solid var(--accent-secondary);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        height: 68px;
        width: 68px;
        right: 8%;
        top: 8%;
        background: url('./assets/img/Vector.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    img {
        width: 100%;
    }
}

/* .left now only holds the logo + mobile toggle; nav (below) grows to fill
   the remaining width so it can push .right (search/contact/language - moved
   inside nav so it shows/hides together with the mobile dropdown) to the
   far right, matching the original outer-flex space-between look. */
header .left {
    width: 100%;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

header {
    background: var(--secondary);
    color: var(--white);

    figure {
        margin-bottom: 0;

        img {
            max-width: 200px;
        }
    }

    nav {
        ul {
            height: 100%;
            display: flex;
            align-items: center;
            list-style: none;
            margin-bottom: 0;

            a {
                height: 100%;
                line-height: 100%;
                display: flex;
                align-items: center;
                color: var(--white);
                text-decoration: none;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
				padding-bottom: 0.25rem;
                border-bottom: unset;
                transition: color 0.15s ease;

                &:hover {
                    color:#F7EACF;
                }

                li {
                    line-height: 100%;
                }
            }
        }

    }

    .right {
        position: relative;

        .search-box {
            &:hover {
                cursor: pointer;
            }

            .search-form {
                display: none;
                position: absolute;
                top: 10%;
                right: 110%;

                input {
                    padding: 0.5rem;
                }

            }

            .search-form.active {
                display: block;
            }
        }

        .contact-button {
            button {
                padding: 0.75rem 1.25rem;
                background: transparent;
                color: var(--white);
                border: 2px solid #F7EACF;
                margin-left: 2.5rem;
                margin-right: 2.5rem;
                transition: 0.5s;

                &:hover {
                    color: var(--secondary);
                    background: var(--accent-secondary);
                }
            }
        }
    }
}

.hero {
    background: var(--secondary);
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: var(--white);

    .container{
        padding-top: 5rem;
    }

    h2 {
        font-size: 3rem;
        font-weight: 600;
        position: relative;
        text-align: center;
    }

    .hero-eap-label {
        text-align: center;
        color: var(--accent-secondary);
        font-weight: 600;
        margin-top: 1rem;
        margin-bottom: 0;
    }


    h3 {
        text-align:center;
        font-size: 1rem;
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;

    }

    .btn-group {
        a:first-child {
            margin-right: 1rem;
        }
    }


    .nested-images-container {
        justify-content: space-between;

        .first-col,
        .mid-col,
        .third-col {
            flex-basis: calc(33.333% - 0.7rem);
            gap: 1rem;
        }

        .mid-col {
            padding-top: 3rem;
        }

        .mid-col .team-member:nth-child(2),
        .third-col .team-member:nth-child(2) {
            margin-top: 1rem;
        }

        .team-member {
            background: #D8D5EA;
            position: relative;

            img {
                width: 100%;
            }

            .overlay {
                background: linear-gradient(197deg, rgba(85, 37, 59, 0.00) 56.43%, #55253B 84.53%);
                mix-blend-mode: hard-light;
                height: 100%;
                top: 0;
                left: 0;
                width: 100%;
                padding: 1.25rem 1rem;
                position: absolute;
                color: var(--white);
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                img {
                    width: 33%;
                }
            }
        }
    }
}

/* in your existing CSS file */
.team-carousel {
    overflow: hidden;
}

.team-track {
    display: flex;
    gap: 12px;
}

.team-track img {
    flex: 0 0 calc(100% / 7 - 12px);
    width: calc(100% / 7 - 12px);
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

.articles {
    .blogs-container {
        margin-top: 4rem;
    }

    .article-inner {
        margin-bottom: 3rem;

        &:hover {
            .left {
                border-color: var(--accent);
            }

            .right .article-title a {
                color: var(--accent) !important;
            }
        }

        .left {
            border: 12px solid var(--accent-secondary);
            transition: 0.5s;

            figure {
                margin: 0;

                img {
                    min-width: 11rem;
                    width: 11rem;
                    height: 11rem;
                    object-fit: cover;
                }
            }
        }

        .right {
            .category {
                i {
                    padding: 0.5rem;
                    margin-right: 0.2rem;
                    border: 3px solid var(--secondary);
                }

                .cat a {
                    font-size: 0.8rem;
                }

                a {
                    color: var(--secondary);
                    text-decoration: unset;
                    font-weight: 600;
                }

                margin-bottom: 0.5rem;
            }

            .article-title {
                margin-bottom: 1rem;
                margin-top: 1rem;
                font-size: 1.2rem;

                a {
                    color: var(--black);
                    text-decoration: none;
                    font-weight: 600;
                    transition: color 0.5s ease-in-out;

                    &:hover {
                        color: var(--accent);
                    }
                }
            }

            .article-meta {
                color: rgba(0, 0, 0, 0.60);
                margin-bottom: 0.8rem;
                flex-wrap: wrap;

                span {
                    margin-left: 0.5rem;
                }

                .author-image {
                    border-radius: 50%;
                    border: 1px solid var(--accent-secondary);
                }
            }

            .read-btn {
                a {
                    color: var(--secondary);
                    font-weight: 600;
                    text-decoration: none;

                    svg {
                        margin-left: 0.4rem;

                        &:hover {
                            color: var(--accent);
                        }
                    }

                    &:hover {
                        color: var(--accent);
                    }
                }
            }


        }
    }

    /* Flat rule (not nested above) so it isn't at risk of this file's known
       nesting quirk where plain declarations mixed with nested rules in the
       same block can silently fail to apply - this one matters: without it,
       the default flex align-items:stretch makes .left match .right's
       height, which varies with how many lines the title wraps to. That
       stretched .left taller than its own (fixed-size) image on some cards,
       leaving blank space below the image - fixed here by keeping .left at
       its own natural (image-driven) height instead of stretching. */
    .article-inner > .d-flex {
        align-items: flex-start;
    }

    .supporter-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
        margin-top: 4.5rem;
    }
}

.for-individual {
    background: var(--secondary);
    color: var(--white);

    .description p {
        opacity: 0.8;
        font-size: 1rem;
    }

}

.for-companies {
    .title-and-icon {
        align-items: center;
        padding-bottom: 1.5rem;

        h3 {
            font-size: 3.625rem;
            font-weight: 600;
            margin-left: 1rem;
            color: var(--secondary);
        }
    }

    .btn {
        background: #f7eacf33;
    }

    .large-white-btn .btn:hover {
        border-color: var(--black);
    }

}

.testimonial {
    background: var(--accent-secondary);
    padding-bottom: 5rem;

    .container {
        position: relative;
        padding-top: 4.5rem;
    }

    .section-corner-tag {
        position: absolute;
        top: -1.05rem;
        left: 0;
        background: #1281FF;
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 0.3rem;
        padding: 0.3rem 0.65rem;
        font-size: 0.8rem;
        font-weight: 500;

        i {
            font-size: 0.7rem;
        }
    }

    .title-and-arrows {
        padding-top: 1rem;
        padding-bottom: 2.5rem;

        h2 {
            color: var(--secondary);
            font-size: 3.625rem;
            font-weight: 600;
            margin-bottom: 0;
        }
    }

    .carousel-container {
        position: relative;
        overflow: hidden;
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .carousel-track {
        display: flex;
        gap: 1.3rem;
        transition: transform 0.5s ease-in-out;
        width: 100%;
        will-change: transform;
    }

    .carousel-slide {
        flex: 0 0 calc(50% - 0.65rem);
        min-width: calc(50% - 0.65rem);
    }

    #testi_carousel.owl-carousel .carousel-slide {
        flex: none;
        min-width: 0;
    }

    .testimonial-card {
        background: #fff;
        border-radius: 8px;
        padding: 40px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .company-logo {
        height: 40px;
        margin-bottom: 30px;
        width: unset!important;
    }

    .testimonial-text {
        color: #333;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 30px;
    }

    .testimonial-author {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .author-avatar {
        width: 48px!important;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    .author-info {
        flex: 1;
    }

    .author-name {
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .author-title {
        color: #666;
        font-size: 14px;
    }

    .carousel-button {
        width: 3.5rem;
        height: 3.5rem;
        border: none;
        background: #1281FF;
        border-radius: 0;
        transition: background 0.25s ease;

        i {
            color: #fff;
        }

        &:hover {
            background: #0d6ad1;
        }

        &:nth-child(1) {
            margin-right: 0.75rem;
        }
    }
	
	.testimonial-content{
		
		.testimonial-right h3{
			background: var(--Gradient-font, linear-gradient(248deg, #3EB8EB 11.32%, #1658A5 86.05%));
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size:3rem;
		}
	}

}

.testimonial-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1rem;
}

.testimonial-text {
    flex-basis: 60%;
}

.testimonial-right {
    flex-basis: 34%;
}

.right-content {
    border-left: solid 1px #CACACA;
    padding-left: 2rem;
}

@media (max-width: 768px) {
    .testimonial-text,
    .testimonial-right {
        flex-basis: 100%;
    }

    .right-content {
        border-left: none;
        border-top: solid 1px #CACACA;
        padding-left: 0;
        padding-top: 1rem;
        margin-top: 1rem;
    }
}
.team-member-item {
    position: relative;
    overflow: hidden;
    width: fit-content; /* Adjust based on your layout */
    line-height: 0;     /* Removes small gap under images */
    cursor: pointer;
}

.team-member-item img {
    display: block;
    width: 100%;
    height: auto;
}

.hover-show {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Your requested gradient */
    background: linear-gradient(197deg, rgba(85, 37, 59, 0.00) 56.43%, #55253B 84.53%);
    
    /* Text Styling to match your image */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #F3E5AB; /* Light cream/gold color from your image */
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.4;
    
    /* Animation */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows hover to maintain even if mouse is over text */
}

/* Show the overlay when the parent is hovered */
.team-member-item:hover .hover-show {
    opacity: 1;
}

/* Magazine Page */
.hero-section {
    background: var(--secondary);
    color: #ffffffbf;

    h2 {
        color: var(--accent-secondary);

        font-size: 5.375rem;
        font-weight: 600;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: 1.5rem;
            height: 4.5rem;
            width: 4.5rem;
            background: url('./assets/img/Vector.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
    }
}

.big-article {
    .category {
        i {
            padding: 0.5rem;
            margin-right: 0.2rem;
            border: 3px solid var(--secondary);
        }

        a {
            color: var(--secondary);
            text-decoration: unset;
            font-weight: 600;
        }

        margin-bottom: 0.5rem;
    }

    .article-title {
        margin-bottom: 1rem;
        margin-top: 1rem;

        a {
            color: var(--black);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.5s ease-in-out;

            &:hover {
                color: var(--accent);
            }
        }
    }

    .content-summary{
        p{
            font-size: 0.85rem;
        }
    }

    .article-meta {
        color: rgba(0, 0, 0, 0.60);
        margin-bottom: 0.8rem;

        span {
            margin-left: 0.5rem;
            font-size: 0.75rem;
        }
    }

    .read-btn {
        a {
            color: var(--secondary);
            font-weight: 600;
            text-decoration: none;

            svg {
                margin-left: 0.4rem;

                &:hover {
                    color: var(--accent);
                }
            }

            &:hover {
                color: var(--accent);
            }
        }
    }
}

.articles {
    padding-bottom: 5rem;

    .title-and-filters {
        h2 {
            color: var(--secondary);
            font-size: 2rem;
            font-weight: 600;
        }

        .desc {
            color: #0000007d;
        }
    }

    .magazine-search {
        display: flex;
        align-items: center;
        background: #F6F6F6;
        min-width: 18rem;

        input {
            border: none;
            background: transparent;
            padding: 1.0625rem 1.25rem;
            width: 100%;
            outline: none;
        }

        button {
            border: none;
            background: transparent;
            color: var(--black);
            padding: 0 1rem;
        }
    }

    .filter-buttons {
        margin-top: 2.5rem;



    }

    .article-container {
        margin-top: 3rem;

        .article-item {
            &:nth-child(3n) .article-inner {
                margin-right: 0;
            }
        }

        .article-item:hover {
            .image-with-border {
                border-color: var(--accent);
            }
        }

        .article-inner {
            margin-bottom: 3rem;
            margin-right: 1rem;

        }

        .category {
            i {
                padding: 0.5rem;
                margin-right: 0.2rem;
                border: 3px solid var(--secondary);
            }

            a {
                color: var(--secondary);
                text-decoration: unset;
                font-weight: 600;
            }

            margin-top: 3rem;
            margin-bottom: 0.5rem;
        }

        .article-title {
            margin-bottom: 1rem;
            margin-top: 1rem;

            a {
                color: var(--black);
                text-decoration: none;
                font-weight: 600;
                transition: color 0.5s ease-in-out;

                &:hover {
                    color: var(--accent);
                }
            }
        }

        .article-meta {
            color: rgba(0, 0, 0, 0.60);
            margin-bottom: 0.8rem;
            justify-content: space-between;
            font-size: 0.8rem;
            flex-wrap: wrap;

            .author {
                max-width: 50%;
            }

            span {
                margin-left: 0.25rem;
            }
        }

        .small-buttons a {
            padding: 0.5rem;

            .btn {
                font-size: 0.8rem;
            }
        }

        .read-btn {
            a {
                color: var(--secondary);
                font-weight: 600;
                text-decoration: none;

                svg {
                    margin-left: 0.4rem;

                    &:hover {
                        color: var(--accent);
                    }
                }

                &:hover {
                    color: var(--accent);
                }
            }
        }
    }

}

/* Our Team */
.our-team-hero {
    .large-buttons {
        margin-top: 3rem;

        a {
            border-color: var(--white);

            .btn {
                color: var(--white);
            }

            &.active {
                background: var(--accent-secondary);

                .btn {
                    color: var(--secondary);
                }

                &:hover {
                    background-color: var(--white);
                }
            }

            &:hover {
                background: var(--accent-secondary);

                .btn {
                    color: var(--secondary);
                }
            }
        }

    }

}

/* Kept as a separate, flat (non-nested) rule rather than folded into the
   nested .team-members .member-item block below - mixing plain declarations
   with nested child rules in the same block was observed to silently fail
   to apply (the rule parses into the CSSOM correctly, but its own
   declarations don't take effect), so declarations and nesting are kept
   in separate rules here. */
.team-members .member-item {
    background: #F7EACF;
    padding: 1.5rem;
    border-radius: 12px;
    margin-right: 1.5rem;
    transition: 0.3s ease;
}

.team-members {

    .member-wrapper {
        margin-bottom: 3rem;
    }

    .member-item {

        figure {
            position: relative;
            background: #D8D5EA;
            height: 380px;
            overflow: hidden;
            border-radius: 8px;

            img {
                object-fit: cover;
                width: 100%;
                position: relative;
                z-index: 1;
                height: 100%;
            }

            .figure-overlay {
                z-index: 2;
                position: absolute;
                width: 100%;
                padding: 2.5rem;
                bottom: 0;

                img {
                    width: 60%;
                }
            }
        }

        h3 {
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
            font-size: 1.3rem;
            line-height: 1.2;
            /* Reserve space for 3 lines (the longest current name wraps to 3)
               so shorter names don't push the Dostupný/Obsadený badge below
               to a different height than cards with longer, wrapped names. */
            min-height: 3.6em;
        }

        h6 {
            color: rgba(0, 0, 0, 0.555);
        }

        &:not(.active):hover {
            cursor: pointer;
            /* Was transform: translateY(-8px) - any ancestor with an active
               transform creates a new containing block for its position:fixed
               descendants, and .overlay (the modal) is nested inside this
               element. That trapped the fixed modal inside this card's box
               instead of the full viewport whenever the card was hovered.
               margin-top gives the same lift effect without that side effect. */
            margin-top: -8px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        &:focus-visible {
            outline: 2px solid var(--secondary);
            outline-offset: 2px;
        }
    }

    .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: #00000073;
        z-index: 9999;
        padding: 3rem 1.5rem;
        overflow-y: auto;
        align-items: flex-start;
        justify-content: center;

        .overlay-inner {
            position: relative;
            width: 100%;
            max-width: 900px;
            margin: auto;
            padding: 3rem;
            background: var(--white);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

            .row {
                align-items: center;
            }
        }

        &.active {
            display: flex;
        }

        .close-btn {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            background: #fff;
            border: none;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 1.25rem;
            color: inherit;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 9;
            transition: 0.3s;

            &:hover {
                background: var(--secondary);
                color: #fff;
            }
        }

        figure {
            height: 350px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;

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

        .category {
            a {
                color: var(--secondary);
                text-decoration: none;
                font-weight: 600;
            }
        }

        h3 {
            font-size: 2.25rem;
            font-weight: 600;
        }

        .desc {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            color: #0000005e;
        }

        .btn {
            padding: 1.254rem 4.5rem;
        }

        .load-older-wrap {
            margin-top: 1rem;
        }

        .articles-empty {
            color: rgba(0, 0, 0, 0.65);
            font-weight: 500;
            padding: 1rem 0;
        }
    }
}

/* MindCafe event photos are 16:9 landscape shots, not portrait headshots
   like the team member cards this component was built for - the inherited
   fixed height + object-fit:cover cropped them down into a square. Scoped
   to .mindcafe-figure only so the "Nas tim" team page's own photos (which
   still want the fixed square crop) are untouched. Kept as flat rules with
   higher selector specificity than the nested .team-members block above,
   rather than nested inside it, per this file's documented nesting quirk. */
.team-members .member-item figure.mindcafe-figure {
    height: auto;
    background: transparent;
}

.team-members .member-item figure.mindcafe-figure img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
}

.team-members .overlay figure.mindcafe-figure {
    height: auto;
}

.team-members .overlay figure.mindcafe-figure img {
    height: auto;
    object-fit: initial;
}

/* Events with no photo yet still get a placeholder box (matching this
   component's original fallback) instead of collapsing to 0 height - only
   applies while the figure has no img child, so it steps aside the moment
   a real photo is set. */
.team-members .member-item figure.mindcafe-figure:empty {
    aspect-ratio: 16 / 9;
    background: #D8D5EA;
}

.team-members .overlay figure.mindcafe-figure:empty {
    aspect-ratio: 16 / 9;
    background: #D8D5EA;
}

/* Consult.html */
.consult-hero {
    background-color: var(--secondary);
    color: #ffffff99;

    .small-buttons {
        a {
            display: inline-block;
            margin-bottom: 0.4rem;

            &:hover {
                background: var(--accent);
            }
        }
    }
}

.our-experts .member-wrapper:hover {
    transform: translateY(-10px);
}

/* Wraps the figure+name of each "related psychologists" card in a link to
   that psychologist's own profile - plain color/underline reset so it reads
   the same as when this content wasn't a link at all. */
.related-psychologist-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.our-experts .member-wrapper {
    margin-bottom: 2rem;
    transition: 0.5s ease;
   
	.inner{
		background: #F7EACF;
		padding:1.5rem;
		height:100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
    figure {
        position: relative;
        background: #D8D5EA;
        height: 380px;
        overflow: hidden;

        img {
            object-fit: cover;
            width: 100%;
            position: relative;
            z-index: 1;
            height: 100%;
        }

        .figure-overlay {
            z-index: 2;
            position: absolute;
            width: auto;
            padding: 0.375rem 1.5rem;;
			margin:1rem;
            top: 0;
			background:#FFC8C8;
			color: #55253B;
			&.available{
				background: #E0FFC8;
				color: #255542;
			}
            img {
                width: 60%;
            }
			p{
				margin-bottom:0!important
			}
        }
    }

    h3 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        font-size: 1.3rem;
    }

    h6 {
        color: rgba(0, 0, 0, 0.555);
    }

    &:not(.active):hover {
        /* transform: translateY(-0.5rem); */
    }
}

.price-packages {
    background: var(--secondary);

    .package-item {
        transition: 0.5s;

        .inner {
            background: var(--white);
            padding: 2.5rem 1.5rem;
			height:100%;

            .purple-badge {
                background: var(--secondary);
                display: inline-block;
                padding: 0.5rem 1rem;
                color: #F7EACF;
                margin-bottom: 1.5rem;
            }

            h3 {

                font-size: 1.125rem;
                font-weight: 600;
            }

            .desc {
                color: #00000051;
                padding-top: 1.5rem;
                padding-bottom: 2.5rem;
            }

            .pricing {
                color: #000;
                font-size: 2.25rem;
                font-weight: 600;

                span {
                    font-size: 1.125rem;
                    color: #00000051;
                }
            }

            .cta {
                .btn {
                    width: 100%;
                    border-radius: 0;
                }
            }
        }

        &:hover {
            transform: translateY(-10PX);
        }
    }
}

.latest-articles {
    .article-inner {
        margin-bottom: 3rem;

        &:hover {
            .left {
                border-color: var(--accent);
            }
        }

        .left {
            border: 12px solid var(--accent-secondary);
            transition: 0.5s;

            figure {
                margin: 0;

                img {
                    width: 260px;
                    height: 220px;
                    object-fit: cover;
                }
            }
        }

        .right {
            .category {
                i {
                    padding: 0.5rem;
                    margin-right: 0.2rem;
                    border: 3px solid var(--secondary);
                }

                a {
                    color: var(--secondary);
                    text-decoration: unset;
                    font-weight: 600;
                }

                margin-bottom: 0.5rem;
            }

            .article-title {
                margin-bottom: 1rem;
                margin-top: 1rem;

                a {
                    color: var(--black);
                    text-decoration: none;
                    font-weight: 600;
                    transition: color 0.5s ease-in-out;

                    &:hover {
                        color: var(--accent);
                    }
                }
            }

            .article-meta {
                color: rgba(0, 0, 0, 0.60);
                margin-bottom: 0.8rem;

                span {
                    margin-left: 0.5rem;
                }
            }

            .read-btn {
                a {
                    color: var(--secondary);
                    font-weight: 600;
                    text-decoration: none;

                    svg {
                        margin-left: 0.4rem;

                        &:hover {
                            color: var(--accent);
                        }
                    }

                    &:hover {
                        color: var(--accent);
                    }
                }
            }
        }
    }
}

.discover {
    padding-top: 0;

    .areas-container {
        .area-inner {
            position: relative;

            .inner-content {
                transition: all 0.5s ease-in-out;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border: 12px solid var(--accent-secondary);
                padding: 1.2rem;
                height: 425px;
                color: var(--secondary);
                background-color: #FFFEFD;
                position: relative;
                z-index: 2;

                &::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background: #fefefebf;
                    z-index: -1;
                }

                &:hover {
                    border-color: var(--accent);
                    color: var(--white);

                    &::after {
                        background: linear-gradient(265deg, rgba(85, 37, 59, 0.00) 36.57%, #55253B 68.94%);
                        mix-blend-mode: hard-light;
                    }
                }
            }

            .title-and-icon-small {
                width: 50%;

                svg {
                    height: 50px;
                    width: 50px;
                    margin-right: 0.6rem;
                }

                h3 {
                    font-size: 1rem;
                    margin-bottom: 0 !important;
                    line-height: 1rem;
                }
            }

            .title {
                padding-bottom: 1.5rem;

                h3 {
                    font-size: 1.125rem;
                    font-weight: 600;
                }
            }

            .btn {
                width: 100%;
            }


        }

    }
}

/* blog-details.html */
.blog-details-hero {
    background: var(--secondary);
    color: var(--white);
    padding-bottom: 25rem;
    position: relative;

    .container-for-absolute {
        position: relative;
    }

    .blog-featured-image {
        position: absolute;
        width: 100%;
        top: 4rem;

        img {
            width: 100%;
            object-fit: cover;
            height: 40rem;
        }
    }

    a {
        color: var(--white);
        text-decoration: none;
    }

    .cat-and-tags {
        gap: 1rem;

        .cat a {
            border: 2px solid var(--accent-secondary);
            padding: 0.4rem 0.6rem;
            transition: 0.5s;

            &:hover {
                background: var(--accent-secondary);
                color: var(--black);
            }
        }

        .small-buttons a {
            border: 2px solid transparent;
            transition: 0.5s;

            &:hover {
                border: 2px solid var(--accent-secondary);
            }
        }
    }

    .blog-title {
        width: 75%;
        padding-top: 1rem;
        padding-bottom: 1rem;

        h1 {
            font-size: 3.625rem;
            font-weight: 600;
            position: relative;
            color: var(--accent-secondary);

            &::after {
                position: absolute;
                bottom: 0;
                content: "";
                height: 4.5rem;
                width: 4.5rem;
                background: url('./assets/img/Vector.png');
                background-size: contain;
                background-repeat: no-repeat;
            }
        }
    }

}


.blog-content {
    padding-top: 25rem;
    padding-bottom: 5rem;
    line-height: 1.75rem;
    color: #00000099;

    .inner-blog-container {
        width: 60%;
        margin: 0 auto;

        p {
            padding-bottom: 2rem;
        }

        h2 {
            color: #1C1B1B;
            font-size: 1.5rem;
            font-weight: 600;
            padding-bottom: 2rem;
        }

        b {
            color: #1C1B1B;
        }

        ol {
            b {
                display: block;
            }

            padding-bottom: 2rem;

            li::marker {
                color: #000;
                font-weight: 600;
            }
        }

        ul {
            b {
                display: block;
            }

            padding-bottom: 2rem;

            li::marker {
                font-weight: 600;
                color: #000;
            }
        }

        blockquote {
            background: #f7eacf47;
            color: #000;
            padding: 2.5rem 10rem;
            margin-bottom: 2rem;
            width: 120%;
            position: relative;
            left: -10%;
            font-style: italic;

            &::before {
                content: "";
                position: absolute;
                width: 0.35rem;
                height: 50%;
                top: 25%;
                left: 5%;
                background: var(--secondary);
            }
        }

        img {
            width: 100% !important;
        }
    }

    .footer-share-buttons {
        border-top: 1px solid #0000006d;
        margin-top: 5rem;

        .inner-blog-container {
            align-items: center;
        }

        .article-meta {
            img {
                width: 40px !important;
            }

            a {
                text-decoration: none;
                color: #000;
                font-weight: 600;
                transition: 0.5s;

                &:hover {
                    transform: translateY(-10px);
                    color: var(--accent);
                }
            }
        }

        .img-container {

            padding: 0.35rem;
            margin-right: 0.5rem;
            display: inline-block;
            background-color: var(--accent-secondary);
            border-radius: 50%;
        }
    }
}

.more-articles {
    background-color: #f7eacf33;
}

/* Footer */
footer {
    background: var(--secondary);
    /* Was #ffffff53 (~33% opacity white on the dark --secondary background)
       - roughly 1.6:1 contrast, well below WCAG AA's 4.5:1 minimum for text.
       ~70% opacity brings this to ~6.8:1. */
    color: #ffffffb3;

    .top-footer {

        a.bold-color,
        h3 {
            color: var(--white);
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1.25rem;
        }

        ul {
            list-style: none;
            padding: 0;

            li {
                margin-bottom: 1.25rem;
            }
        }

        .social-icons {
            margin-top: 1.5rem;
            display: flex;
            gap: 1.15rem;

            li {
                a {
                    color: #fff;
                    font-size: 1.5rem;
                }
            }
        }

        a {
            color: #ffffffb3;
            text-decoration: none;
            transition: 0.5s;

            &:hover {
                color: var(--white);
            }

        }

        .right-links .link-section {
            margin-right: 2.5rem;

            &:last-child {
                margin-right: 0;
            }
        }

        .title-and-newsletter {
            .title {

                h3 {
                    color: #F7EACF;
                    font-size: 1.125rem;
                    font-weight: 600;
                }
            }

            .newsletter {
                flex-basis: 65%;
            }
        }
    }

    .footer-anchor-paragraph {
        a {
            text-decoration: underline !important;
        }
    }

    .footer-bottom {
        padding-top: 2rem;
        padding-bottom: 2rem;
        border-top: 1px solid #ffffff2b;

        ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;

            li {
                margin-right: 1.5rem;

                a {
                    text-decoration: none;
                    color: var(--white);
                    transition: 0.5s;

                    &:hover {
                        color: var(--accent);
                    }
                }
            }
        }

        figure img {
            width: 75%;
        }


    }
}

/* breakpoint before laptop */
@media only screen and (max-width: 1400px) {
    header {
        .left {
            figure img {
                width: 100px;
            }
        }
    }
}

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

    header {
        .container {
            padding: 0;
            position: relative;
            border-bottom: 1px solid #ffffff2b;
        }

        nav#main-menu {
            display: none;
        }

        .mobile-menu {
            color: #000;
            background: #fff;
            border: none;
            padding: 10px;
            border-radius: 50%;
            height: 44px;
            width: 44px;
            display: grid !important;
            place-content: center;
            padding-right: 10px!important;
        }

        nav#main-menu.active {
            display: block;
            /* Was position:absolute, anchored to the header's own flow
               position - since the page behind it could still scroll (no
               scroll lock existed), scrolling even slightly carried the
               "open" menu off-screen with it. Fixed + pinned via JS-measured
               --header-height keeps it locked to the viewport regardless of
               scroll, and its own overflow-y lets long menus scroll inside
               themselves instead of overflowing past the screen. */
            position: fixed;
            z-index: 9999;
            top: var(--header-height, 70px);
            left: 0;

            background: var(--secondary);
            border-bottom: 1px solid #ffffff2b;
            width: 100%;
            max-height: calc(100vh - var(--header-height, 70px));
            overflow-y: auto;
        }

        .left {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            flex-wrap: wrap;

            img {
                width: 100px;
            }

            i {
                font-size: 2.5rem;
            }
        }

    }
}

/* Flat (non-nested) rules for the open drawer's padding and top-level list -
   pulled out of the nested nav#main-menu.active block above after its mixed
   plain-declarations-plus-nested-ul form turned out to be exactly this
   file's known nesting quirk (see the .right/.sub-menu comments below):
   the padding silently failed to apply. */
@media only screen and (max-width: 1200px) {
    header nav#main-menu.active {
        /* Was 0 - the <a>'s own horizontal padding is zeroed out below for a
           cleaner left edge, but nothing replaced it, so every row's text
           (and .right's children) sat flush against the screen edge. One
           consistent padding here covers everything inside the drawer
           instead of patching each child separately. */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    header nav#main-menu.active ul {
        /* Was inheriting align-items:center from the desktop (row-direction)
           rule elsewhere - harmless there, but once flipped to a column it
           centered every item horizontally instead of the usual
           left-aligned mobile list look. */
        padding: 0;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* No li padding reset here anymore - it was overriding (higher
       specificity than) the actual top-level/sub-menu li padding rules
       below with 0, which is exactly why the drawer still looked cramped
       vertically after they were added. Each li's real padding is set
       precisely where it's needed instead: header #menu-main > li for
       top-level rows, header #menu-main .sub-menu li for nested ones. */
}

/* .right now lives inside nav#main-menu (see header.php) so it shows and
   hides together with the mobile dropdown instead of wrapping into its own
   extra row(s) below the logo/hamburger. nav#main-menu.active is
   display:block, so its children (ul, then .right) simply stack in normal
   block flow - no flex needed on nav itself for this. */

/* Flat (non-nested) rules for the relocated .right inside the open mobile
   drawer - kept outside the nested block above to avoid this file's known
   nesting quirk where plain declarations mixed with nested rules in the same
   block can silently fail to apply. */
@media only screen and (max-width: 1200px) {
    header nav#main-menu.active .right {
        /* .right also carries Bootstrap's align-items-center/justify-content-between
           utility classes, which set their properties with !important - these
           two need !important too, just to win against those utilities. */
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100%;
        padding-top: 16px;
        margin-top: 16px;
        gap: 16px;
        border-top: 1px solid #ffffff2b;
    }

    header nav#main-menu.active .right > * {
        width: 100%;
    }

    /* Was icon-only (fine on desktop, next to the always-visible nav) -
       inside the drawer it read as a stray floating icon with no context,
       so a visible label is added (see header.php) and the row gets the
       same padding/separator treatment as the top-level nav items above it. */
    header nav#main-menu.active .right .search-box {
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    header nav#main-menu.active .right .search-box #search {
        display: flex;
        align-items: center;
    }

    header nav#main-menu.active .right .search-box .search-btn-label {
        display: inline;
        margin-left: 0.75rem;
        font-size: 1rem;
    }

    header nav#main-menu.active .right .contact-button button {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    header nav#main-menu.active .right .search-box .search-form {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
    }

    header nav#main-menu.active .right .search-box .search-form input {
        width: 100%;
    }
}

/* Mobile menu backdrop - dims the page behind the open drawer and doubles as
   a tap-outside-to-close target. Hidden entirely outside the mobile
   breakpoint since the drawer itself never opens there. */
.mobile-menu-backdrop {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    .mobile-menu-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

/* Mobile drawer top-level rows: consistent left-aligned padding with a
   subtle separator between items, instead of the old asymmetric
   padding-top/bottom with no visual grouping. */
@media only screen and (max-width: 1200px) {
    header #menu-main > li {
        /* px, not rem: this breakpoint range also shrinks the root font-size
           (down to ~12px), which shrank this same padding down to ~11px
           in practice - far tighter than the 0.9rem looked like on paper. */
        width: 100%;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    header #menu-main > li:last-child {
        border-bottom: none;
    }

    header #menu-main > li > a {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Dropdown parents ("Spoločnosti", "headmap") on mobile: hover has no touch
   equivalent, so these need an explicit tap-to-expand toggle (see index.js)
   rather than relying only on :hover/:focus-within, which stay in place here
   as a keyboard-accessible fallback. The parent row becomes a flex row so
   the chevron sits at the row's end via normal layout, replacing the old
   position:absolute chevron that was positioned assuming the item's own
   width matched a desktop-style horizontal nav item (on the mobile
   full-width column layout it ended up floating away from its own text). */
@media only screen and (max-width: 1200px) {
    header #menu-main .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Flex order: link, then chevron, then submenu wrapping onto its own
       row - generated ::after content otherwise renders after the submenu
       (a real DOM child) in source order, putting the chevron in the wrong
       spot once this is a flex row instead of the desktop's absolute
       positioning. */
    header #menu-main .menu-item-has-children > a {
        order: 1;
    }

    header #menu-main .menu-item-has-children::after {
        order: 2;
        position: static;
        margin-left: 0.5rem;
        transition: transform 0.2s ease;
    }

    header #menu-main .menu-item-has-children.submenu-open::after {
        transform: rotate(180deg);
    }

    header #menu-main .sub-menu {
        position: static;
        display: none;
        order: 3;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        margin-top: 0.75rem;
        padding: 0;
        border-left: 2px solid rgba(255, 255, 255, 0.15);
    }

    header #menu-main .menu-item-has-children.submenu-open > .sub-menu,
    header #menu-main .menu-item-has-children:focus-within > .sub-menu {
        display: block;
        /* A separate (desktop-oriented, unscoped) rule elsewhere only sets
           visibility/opacity to visible/1 on :hover or :focus-within - never
           on .submenu-open alone. So tapping a second dropdown moved focus
           away from the first one, and even though its .submenu-open class
           (and this display:block) stuck around, its submenu still had
           visibility:hidden/opacity:0 from that other rule's closed state,
           making it fully invisible while still taking up layout space -
           exactly the "gap" and "same as background" symptoms. */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Sub-menu links: was color:#000 (fine on the desktop dropdown's cream
       background), but this drawer's sub-menu is transparent over the dark
       header background, so black text was nearly invisible. */
    header #menu-main .sub-menu a {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
        padding-left: 1rem;
    }

    /* The desktop hover/focus rule (elsewhere in this file) sets these links
       to #55253B for contrast against the desktop dropdown's cream
       background - same problem as the language switcher: on this dark,
       transparent-background drawer that color matches the header's own
       background almost exactly, making the link disappear on hover/focus. */
    header #menu-main .menu-item-has-children:hover .sub-menu a:hover,
    header #menu-main .menu-item-has-children:focus-within .sub-menu a:focus {
        color: #F7EACF;
    }

    header #menu-main .sub-menu li {
        padding-top: 13px;
    }

    header #menu-main .sub-menu li:first-child {
        padding-top: 4px;
    }
}

/* Laptop Screen */
@media only screen and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

}

@media only screen and (max-width: 768px) {
    html {
        font-size: 13px;
    }

    .hero .nested-images-container {
        padding-top: 2rem;

        h6 {
            font-size: 0.6rem;
        }
    }

    .testimonial {
        .container {
            padding-top: 3.75rem;
        }

        .section-corner-tag {
            left: 0.75rem;
        }

        .carousel-container {
            width: calc(100% + 1.5rem);
            margin-left: -0.75rem;
            margin-right: -0.75rem;
        }

        .carousel-track {
            gap: 1rem;
        }

        .carousel-slide {
            flex: 0 0 82%;
            min-width: 82%;
        }

        #testi_carousel.owl-carousel .carousel-slide {
            flex: none;
            min-width: 0;
        }
    }

    .title-and-filters {

        .large-buttons,
        .small-buttons {
            gap: 1rem;
            flex-wrap: wrap;
        }
    }

    .blog-details-hero {
        .blog-title {
            width: 95%;
        }
    }



}

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

    .packages-container>.row,
    .discover .row {
        gap: 1rem;
    }

    .section-title {
        .left {
            flex-basis: 100%;
        }
    }
}

/* Mobile Screen */
@media only screen and (max-width: 600px) {
    html {
        font-size: 12px;
    }

    .section-title-1.with-vector {
        h2::after {
            height: 3.5rem;
            width: 2.5rem;
            right: 1rem;
        }
    }

    .hero .left h2::after {
        height: 2.5rem;
        width: 2.5rem;
    }

    header>.container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .title-and-icon {
        svg {
            width: 60px;
            height: 60px;
        }

        h3 {
            margin-left: 0;
        }
    }

    .large-white-btn a .btn {
        text-align: left;
    }

    .d-flex {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    footer .left ul {
        padding-bottom: 1rem;
    }

    footer .left ul,
    footer .right ul {
        justify-content: center;
    }

    header>.container>.d-flex,
    footer .container>.d-flex {
        flex-direction: column;
    }

    header .mobile-menu {
        padding-right: 0%;
    }

    header {}

    .our-team-hero .large-buttons {
        flex-wrap: wrap;
        gap: 1rem;

        a {
            display: flex;
        }
    }


    .team-members .overlay-inner {
        figure {
            height: 220px;
            width: 100%;
        }

        .close-btn {
            right: 3rem;
            top: 3rem;
            background: #fff;
            padding: 1rem;
        }
    }

    .blog-content {
        .inner-blog-container {
            width: 80%;

            blockquote {
                padding: 2.5rem 4rem !important;
            }
        }
    }

    h2::after {
        width: 2.5rem !important;
        right: 0;
    }
}

@media only screen and (max-width: 350px) {
    html {
        font-size: 10px;
    }
}
/* Single - Psychologists */
 /* ── Consultant CTA card ────────────────────────────────── */
  .hm-cta-card {
    background: #f7eacf; 
	padding: 1.25rem;
	width: 60%; 
	margin: 0 auto; 
	display: flex; 
	gap: 20px;
	justify-self:center;
  }
  .hm-cta-photo {
    width: 250px; height: 250px; flex-shrink: 0;
    background: #d8d5ea; overflow: hidden; position: relative;
  }

  .hm-cta-body {
    flex: 1; display: flex; flex-direction: column;
    justify-content: space-between; min-width: 0;
  }

  @media only screen and (max-width: 767px) {
    .hm-cta-card {
      /* Was width:60% with a fixed 250px photo - on narrow screens the
         photo alone exceeded the card's own width, crushing/overflowing
         the layout. Stack full-width instead. */
      width: 100%;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .hm-cta-photo {
      width: 100%;
      max-width: 250px;
      height: auto;
      aspect-ratio: 1 / 1;
    }
    .hm-cta-icon-row {
      justify-content: center;
      flex-wrap: wrap;
    }
  }
  .hm-cta-name { font-size: 18px; font-weight: 600; line-height: 28px; color: #000; margin-bottom: 8px; }
  .hm-cta-icon-row { display: flex; gap: 24px; margin-bottom: 16px; }
  .hm-cta-icon-item { display: flex; align-items: center; gap: 8px; overflow: hidden; }
  .hm-cta-icon-item img { width: 20px; height: 20px; flex-shrink: 0; }
.hm-cta-icon-text {
    font-size: 14px; font-weight: 400; line-height: 24px;
    color:  #55253b; white-space: nowrap;
}
.hm-badge-available{
		background:#E0FFC8;
		color: #255542;
}
.hm-cta-skills {
    font-size: 14px; font-weight: 400; line-height: 24px;
    padding-left: 0px; margin-bottom: 16px; color: #000;
}
.hm-cta-skills ul{
	list-style-type:disc;
}
.hm-badge-container{
	position:absolute;
	left:8px;
	top:12px;
}
.hm-badge{
	padding: 0.375rem 1.5rem;
}
.hm-badge.hm-badge-occupied{
	background: #FFC8C8;
    color: #55253B;
}
.btn-primary-disabled{
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), #1281FF;
	color:#fff;
}

.hm-inner-card-container{
	border-top:1px solid #00000024;
	padding-top:2rem;
}

/* Legal / contact pages: override the global h2 cream color (set in Customizer
   Additional CSS for dark hero sections) so headings stay readable on white. */
.legal-page h1,
.contact-page h1 {
	color: var(--secondary);
	font-weight: 600;
}
.legal-page h2,
.contact-page h2 {
	color: var(--secondary);
	font-size: 1.75rem;
	font-weight: 600;
	margin-top: 2.5rem;
}
.legal-page h3,
.contact-page h3 {
	color: var(--secondary);
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 1.5rem;
}

/* The "Kontaktujte nás" form heading sits alongside the page's own h1 in a
   two-column row - without this it'd inherit the 2.5rem top margin from
   .contact-page h2 above and sit noticeably lower than the h1 next to it. */
.contact-page .col-lg-6 h2 {
	margin-top: 0;
}

/* WPForms theming via its own documented CSS custom properties (supported
   by the "modern" form style) rather than overriding its BEM classes
   directly - keeps this resilient to WPForms markup/version changes.
   Values match the site's existing button (Bootstrap primary blue) and
   card/border language used elsewhere. */
.contact-page .wpforms-container {
	--wpforms-field-border-color: #ddd;
	--wpforms-field-border-radius: 6px;
	--wpforms-field-background-color: #fff;
	--wpforms-field-text-color: var(--black);
	--wpforms-field-size-font-size: 1rem;
	--wpforms-field-size-padding-h: 0.9rem;
	--wpforms-field-size-padding-v: 0.7rem;
	--wpforms-label-color: var(--secondary);
	--wpforms-label-size-font-size: 1rem;
	--wpforms-label-sublabel-color: rgba(0, 0, 0, 0.6);
	--wpforms-button-background-color: var(--bs-primary, #0d6efd);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 0.375rem;
	--wpforms-button-size-font-size: 1rem;
	--wpforms-button-size-padding-h: 1.25rem;
	--wpforms-button-size-padding-v: 0.75rem;
}

.contact-page .wpforms-container .wpforms-field {
	padding-bottom: 1.25rem;
}

/* Add "short-textarea" in the field's CSS Classes box (WPForms builder ->
   field -> Advanced tab) to shrink its textarea closer to the height of the
   other single-line fields. */
.contact-page .wpforms-container .short-textarea textarea {
	height: 100px;
}
.legal-page ul {
	padding-left: 1.5rem;
}

/* "Info o konzultantovi" link on the consultant cards (Nas tim odbornikov,
   konzultacia-so-psychologom) - reuses the .read-btn (article "read more")
   markup, but that class's actual color/weight styling is nested inside
   ".articles" elsewhere in this file (i.e. scoped to "Citat clanok" on the
   news/articles pages), so it never reached this card context and rendered
   as a plain unstyled link. Re-declared here, matching that rule exactly. */
.our-experts .info-o-konzultantovi {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.our-experts .info-o-konzultantovi a {
	color: var(--secondary);
	font-weight: 600;
	text-decoration: none;
}

.our-experts .info-o-konzultantovi a:hover {
	color: var(--accent);
}

.our-experts .info-o-konzultantovi svg {
	margin-left: 0.4rem;
}

/* Consultant filter: trigger button + summary text, and the modal's own
   content (reuses the existing .overlay/.overlay-inner/.close-btn modal
   pattern already built for the team/mindcafe detail popups, just with a
   narrower max-width suited to a stacked checkbox form instead of a wide
   profile layout). */
.filter-trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.filter-trigger .fa-filter {
	margin-right: 0.5rem;
}

.filter-summary {
	color: var(--secondary);
	font-weight: 600;
}

.filter-overlay-inner {
	max-width: 500px !important;
	text-align: center;
}

.filter-group {
	/* The modal's title and action buttons are centered (see
	   .filter-overlay-inner), but a centered checkbox list reads worse than
	   a left-aligned one, so this opts back out. */
	text-align: left;
	margin-bottom: 1.5rem;
}

.filter-group h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.75rem;
}

.filter-group label {
	display: block;
	margin-bottom: 0.5rem;
	cursor: pointer;
}

.filter-group input {
	margin-right: 0.5rem;
}

.filter-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

/* ================================================================
   Migrated from WordPress Customizer -> Additional CSS (was database-
   stored, not in version control). A few real bugs were fixed while
   migrating - see inline notes below for what changed and why.
   ================================================================ */

#menu-main li {
	position: relative;
}

/* Note: the original had an unscoped `h2{color:#F7EACF;}` here, which made
   every h2 on the entire site cream-on-white (unreadable outside dark hero
   sections - this is what broke the new legal/contact page headings).
   Dropped it: the one legitimate use case (headings on dark hero
   backgrounds) is already correctly handled by the scoped `.hero-section h2`
   rule earlier in this file, so nothing relies on the global version. */

#menu-main .sub-menu {
	position: absolute;
	/* Was width:250% (relative to the trigger link's own width), which made
	   dropdowns wildly inconsistent and often far too wide. A fixed
	   min-width sized for the actual content is used instead. */
	width: auto;
	min-width: 16rem;
	top: calc(100% + 5px);
	left: 0;
	visibility: hidden;
	opacity: 0;
	display: block;
	/* Was followed by a second `transition: 1.5s;` declaration in the same
	   rule, which silently replaced this one - the dropdown was actually
	   fading in/out over a sluggish 1.5s instead of the intended 0.2s. */
	transition: opacity 0.2s ease, visibility 0.2s ease;
	transition-delay: 0.15s;
	background: #F7EACF;
	height: unset;
	padding: 1rem;
	/* Was z-index:-1, which put the dropdown behind other page content even
	   though opacity/visibility already hide it while closed. */
	z-index: 1;
	padding-left: 2rem;
	padding-right: 2rem;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
#menu-main .sub-menu a {
	color: #000;
}
#menu-main .menu-item-has-children::after {
	content: "\f107";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: calc(100% - 1rem);
	bottom: 0px;
}
#menu-main .menu-item-has-children:hover .sub-menu,
#menu-main .menu-item-has-children:focus-within .sub-menu {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
	pointer-events: auto;
	z-index: 100;
}
#menu-main .menu-item-has-children:hover .sub-menu a:hover,
#menu-main .menu-item-has-children:focus-within .sub-menu a:focus {
	color: #55253B;
	font-weight: 600;
	transition: 0.4s ease all;
}
#menu-main .sub-menu li {
	padding-top: 1rem;
}
#menu-main .sub-menu li:first-child {
	padding-top: 0rem;
}

.language-selector .trp-language-switcher > div {
	background: none;
	border: none;
}
.language-selector .trp-language-switcher > div > a {
	color: #fff;
	padding: 0.2rem 0.5rem !important;
}
.trp-language-switcher > div > a:nth-child(2):hover {
	/* Was #55253B - identical to the header's own --secondary background
	   color it sits on, making the link invisible on hover. */
	color: #F7EACF;
}
.language-selector .trp-ls-shortcode-language {
	width: unset !important;
}
.language-selector .trp-language-switcher {
	width: unset;
}
.language-selector .trp-ls-shortcode-current-language {
	position: relative;
	width: unset !important;
}
.language-selector .trp-ls-shortcode-language a {
	padding: 0.2rem 0.5rem !important;
}
.language-selector .trp-ls-shortcode-current-language::after {
	content: "\f107";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: calc(100% - 0.6rem);
	bottom: 0.5rem;
	visibility: visible;
}

.newsletter-form-container .wpforms-field-container {
	width: 100% !important;
}
.newsletter-form-container .wpforms-field {
	width: 100% !important;
}
.newsletter-form-container input[type="email"] {
	padding: 2rem 1rem !important;
}
.newsletter-form-container form {
	position: relative !important;
}
.newsletter-form-container .wpforms-submit-container {
	position: absolute !important;
	right: 0.5rem;
	bottom: 10%;
}
.newsletter-form-container button[type="submit"] {
	height: 80%;
	background: #55253B !important;
}
.newsletter-form-container .wpforms-container {
	margin: 0 0 !important;
}

.author-image {
	border-radius: 50%;
	border: 3px solid #F7EACF;
}
.author-image:hover {
	border-color: #1281FF !important;
	transition: 0.25s;
}
a.author-link:hover {
	transition: 0.25s;
	color: #1281FF;
}
.author-link {
	text-decoration: none;
}

.article-item .image-with-border img,
.big-article .image-with-border img {
	width: 100%;
	height: 22rem;
	object-fit: cover;
	max-height: 400px;
}
.articles .filter-buttons .cat a {
	border: 2px solid #55253B;
	padding: 1rem 2rem;
	color: #55253B;
	font-weight: 600;
	line-height: 1.75rem;
	transition: 0.5s ease;
	text-decoration: none;
	margin-right: 10px;
}
.articles .filter-buttons .cat a:hover {
	background: #55253B;
	color: #fff;
}
.filter-buttons .cat a.active {
	background: #55253B;
	color: #fff;
}
.filter-buttons .cat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.team-member {
	border-radius: 0.4rem;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.team-member:hover {
	transform: rotateY(180deg);
}
.team-member:hover .overlay {
	background: #5f4450a3 !important;
	transform: rotateY(180deg);
}

.top-thumbnail-section .small-buttons {
	position: absolute;
	top: 1.1rem;
	left: 1rem;
	margin-top: 0;
}
.top-thumbnail-section .small-buttons a,
.top-thumbnail-section .small-buttons a button {
	padding: 0 0.5rem !important;
}

p.footer-anchor-paragraph,
p.footer-anchor-paragraph a {
	font-size: 10px;
	color: #fff;
	padding-left: 8px;
}
footer .top-footer .right-links {
	min-width: 60%;
}

section.related-psychologists {
	background: #F7EACF;
	padding-top: 5rem;
	padding-bottom: 3rem;
}

/* Target Mobile Devices */
@media only screen and (max-width: 600px) {
	section.articles .article-item .d-flex {
		flex-wrap: nowrap !important;
	}
	section.articles .supporter-section {
		padding-bottom: 0;
	}
	section.articles .logo-slider {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	section.articles .logo-slider .d-flex {
		justify-content: center !important;
	}
	.hero {
		background-size: 80% !important;
	}
	.hero .container {
		width: 100% !important;
		padding-top: 1rem;
	}
	.hero h2 {
		font-size: 2rem;
	}
	.hero h3 {
		font-weight: 400;
	}
	.section-title-1 h2 {
		font-size: 2rem;
	}
	.for-individual .row,
	.for-companies .row {
		flex-direction: column-reverse;
	}
	.for-individual .row .col-md-5,
	.for-companies .row .col-md-5 {
		padding-bottom: 3rem;
	}
	.for-individual .w-80,
	.for-companies .w-80 {
		width: 100%;
	}
	.for-individual .w-80 .title-and-icon svg,
	.for-companies .w-80 .title-and-icon svg {
		height: 40px;
		width: 40px;
	}
	.for-individual .w-80 .title-and-icon h3,
	.for-companies .w-80 .title-and-icon h3 {
		font-size: 2rem;
	}
	.for-individual .w-80 .description,
	.for-companies .w-80 .description {
		padding-bottom: 2rem;
	}
	.large-white-btn .btn {
		border-left-width: 3px;
	}
	.section-padding {
		padding-bottom: 4rem;
		padding-top: 4rem;
	}
	section.testimonial .container {
		padding-top: 2rem;
	}
	section.testimonial .title-and-arrows h2 {
		font-size: 2rem;
	}
	section.testimonial .testimonial-text p {
		font-size: 1.3rem;
	}
	footer .top-footer .d-flex,
	footer .top-footer .social-icons {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	.newsletter-form-container {
		flex-basis: 100% !important;
	}
	.newsletter-form-container input::placeholder {
		/* Typo fix: source had "::placholder" (missing 'e'), an invalid
		   selector that silently never matched anything. */
		font-size: 10px !important;
	}
	.newsletter-form-container .wpforms-submit {
		background: #fff !important;
	}
	.newsletter-form-container .wpforms-submit-container {
		bottom: 0 !important;
		/* Source had `padding:px;` here, which is invalid CSS (no value)
		   and was silently ignored by the browser - dropped it. */
	}
	.newsletter-form-container .wpforms-submit-container button[type="submit"] {
		background: #1281FF !important;
	}
	.footer-bottom .d-flex {
		flex-direction: column-reverse !important;
		gap: 3rem;
		justify-content: center !important;
		align-items: center !important;
	}
	.footer-bottom .d-flex figure {
		text-align: center !important;
	}
}

.mindcafe-subscribe-bar-section {
	padding: 1.5rem 0;
}
.mindcafe-subscribe-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #f7eacf66;
	border-radius: 8px;
	padding: 0.85rem 1.5rem;
}
.mindcafe-subscribe-bar-text {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--secondary);
}
.mindcafe-subscribe-bar-text i {
	font-size: 1.1rem;
}
.mindcafe-subscribe-bar-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}
.mindcafe-subscribe-bar-form .ml-form-formContent,
.mindcafe-subscribe-bar-form .ml-form-fieldRow,
.mindcafe-subscribe-bar-form .ml-field-group {
	margin: 0;
}
.mindcafe-subscribe-bar-form input[type="email"] {
	padding: 0.5rem 0.85rem;
	min-width: 220px;
}
.mindcafe-subscribe-bar-form .ml-form-embedSubmit .btn {
	padding: 0.5rem 1.25rem;
}

.mindcafe-card-actions {
	align-items: center;
}
.mindcafe-card-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.25rem;
}

/* Reset default browser <button> chrome for icon-only buttons that were
   previously bare <i>/<div> elements with a click handler - converted to
   real buttons for keyboard/screen-reader accessibility, this makes them
   look the same as before instead of picking up default button styling. */
.icon-btn {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: 1;
	cursor: pointer;
}

.search-btn-label {
	display: none;
}

/* ================================================================
   Homepage V2 (page-homepage-v2.php) - alternate homepage for a
   related/sister site. Reuses this file's existing colors, buttons and
   figure/card patterns; these rules are just the sections that don't
   already have an equivalent (Hero V2, Services & Booking, Services for
   Companies). News & Media / Testimonials reuse existing classes almost
   as-is, with a couple of "-v2" additions noted below.
   ================================================================ */

/* Generic placeholder for images not supplied yet - dashed box instead of
   an empty/broken <img>, so it's obvious at a glance what still needs a
   real photo. Remove this class once a real <img> replaces it. */
.media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: repeating-linear-gradient(
		45deg,
		#00000008,
		#00000008 10px,
		#00000014 10px,
		#00000014 20px
	);
	border: 2px dashed #00000040;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-placeholder::after {
	content: "Image placeholder";
	color: #00000060;
	font-weight: 600;
	font-size: 0.9rem;
}

/* Hero V2: two-column (text + featured consultant photo) instead of the
   main Homepage hero's single centered column + team carousel. */
.hero-v2 h2 {
	text-align: left;
	font-size: 2.5rem;
}

.hero-v2-name {
	color: var(--accent-secondary);
	font-weight: 600;
	font-size: 1.125rem;
	margin-top: 1.5rem;
	margin-bottom: 0.25rem;
}

.hero-v2-title {
	color: #ffffffb3;
	margin-bottom: 0;
}

.hero-v2-photo-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.hero-v2-photo-card .available-badge {
	position: absolute;
	z-index: 2;
	top: 1rem;
	left: 1rem;
	padding: 0.375rem 1.5rem;
	border-radius: 4px;
	background: #E0FFC8;
	color: #255542;
	font-weight: 600;
}

.hero-v2-photo-card .available-badge p {
	margin-bottom: 0 !important;
}

.hero-v2-photo-card .media-placeholder {
	border-radius: 0;
	border: none;
}

/* Services & Booking */
.services-booking .title-and-icon {
	align-items: center;
	margin-bottom: 2rem;

	h3 {
		font-size: 2rem;
		font-weight: 600;
		color: var(--secondary);
		margin-left: 1rem;
	}
}

.services-booking-list {
	display: flex;
	flex-direction: column;
}

.services-booking-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-left: 3px solid var(--secondary);
	background: #F7EACF33;
	padding: 1rem 1.25rem;
	margin-bottom: 0.5rem;
}

.services-booking-name {
	font-weight: 600;
	color: var(--black);
}

.services-booking-sessions {
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	margin-left: 0.5rem;
}

.services-booking-price {
	font-weight: 600;
	color: var(--secondary);
	white-space: nowrap;
}

.services-booking-icon {
	color: var(--secondary);
	flex-shrink: 0;
}

/* Services for Companies - dark band matching the main homepage's
   for-companies/for-individual sections. */
.services-companies {
	background: var(--secondary);
	color: var(--white);

	.title-and-icon h3 {
		color: var(--accent-secondary);
		font-size: 2rem;
		font-weight: 600;
		margin-left: 1rem;
	}

	.description p {
		color: #ffffffb3;
		margin: 1rem 0 1.5rem;
	}
}

.services-companies-btn .btn {
	background: var(--white);
	color: var(--secondary);
	border-radius: 8px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	font-weight: 600;
}

/* Testimonials V2 - simplified card (logo, quote, bold "covering X
   employees" line) vs the main homepage's two-column testimonial layout. */
.testimonial-card-v2 {
	background: var(--accent-secondary);
	border-radius: 12px;
	padding: 2rem;
	height: 100%;

	.company-logo {
		max-height: 32px;
		margin-bottom: 1.25rem;
	}
}

.testimonial-v2-quote {
	color: var(--black);
	margin-bottom: 1.5rem;
}

.testimonial-v2-covering {
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0;
}