/*!
Theme Name: babcom
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>babcom</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: babcom
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

babcom is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@font-face { font-family: 'ploni'; font-weight: 400; /*(regular)*/ font-style: normal; src: url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-regular-aaa.woff') format('woff'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-regular-aaa.woff2') format('woff2'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-regular-aaa.eot') format('opentype'); }
@font-face { font-family: 'ploni'; font-weight: 700; /*(bold)*/ font-style: normal; src: url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-bold-aaa.woff') format('woff'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-bold-aaa.woff2') format('woff2'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-bold-aaa.eot') format('opentype'); }
@font-face { font-family: 'ploni'; font-weight: 300; /*(light)*/ font-style: normal; src: url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-light-aaa.woff') format('woff'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-light-aaa.woff2') format('woff2'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-light-aaa.eot') format('opentype'); }
@font-face { font-family: 'ploni'; font-weight: 500; /*(light)*/ font-style: normal; src: url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-medium-aaa.woff') format('woff'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-medium-aaa.woff2') format('woff2'), url('assets/fonts/aaa-fonts_ploni_webfont_files_ploni-medium-aaa.eot') format('opentype'); }

:root {
    font-size: 20px;
    
    --c-pink: #C60063; 
    --c-dark: #2F2F2F;
    --c-white: #ffffff;
    --c-purple: #B799F7;
    --c-grey: #E6E6E6;
    --c-cyan: #4EC6E4; /* Цвет ромбов (примерный, возьми из Figma) */
    --c-cyan-gradient: linear-gradient(135deg, #CAEEF7 0%, #CAEEF7 100%);

    --mask-url: url('../img/mask-blob.svg'); 
    --mask-career-url: url('assets/img/mask-career.svg');


}

@media (max-width: 1680px) {
  :root {
    font-size: 18px;
}  
}
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    font-family: 'ploni', sans-serif; 
    background-color: var(--c-white);
    color: var(--c-dark);
        font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 300;
}
p {
        font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
/* RTL настройки */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

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

/* --- Хедер --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999999;
    padding: 1rem 0; /* 20px */
    transition: background-color 0.3s ease;
}
/* 2. Стили после скролла (когда добавлен JS класс) */
header.is-scrolled {
    background-color: #ffffff !important; /* Белый фон */
    z-index: 999999999;
}

/* 3. ВАЖНО: Если у вас белый текст меню, при белом фоне его нужно сделать черным */
header.is-scrolled .menu-item a,
header.is-scrolled .logo {
    color: var(--c-dark); /* Темный цвет текста */
}


/* Default state: Hide the scroll logo, show the white logo */
.page-template-page-customers .logo-scroll,
.single-post .logo-scroll {
    display: none;
}
.page-template-page-customers .logo-default,
.single-post .logo-default  {
    display: block;
}

/* Scrolled state: Hide the white logo, show the scroll logo */
/* Assuming 'header' gets the class 'is-scrolled' */
.page-template-page-customers header.is-scrolled .logo-default,
.single-post header.is-scrolled .logo-default {
    display: none;
}
.page-template-page-customers header.is-scrolled .logo-scroll,
.single-post header.is-scrolled .logo-scroll {
    display: block;
}



.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Чтобы лого было слева визуально, а меню справа, 
       независимо от RTL, используем flex-direction: row-reverse */
    flex-direction: row-reverse; 
}

.logo img {
       display: block;
}
/* Меню-бургер (точки) */
.menu-trigger {
    width: 3.3rem;
    height: 3.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem; /* 5px */
    cursor: pointer;
    background-color: var(--c-pink);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.menu-trigger:hover {
    background-color: var(--c-dark);
}
.menu-trigger span {
    width: 1.8rem;
    height: 0.15rem;
    background-color: #fff;
    border-radius: 3px;
    display: block;
}

.page-template-page-customers header:not(.is-scrolled) .menu-trigger,
.single-post header:not(.is-scrolled) .menu-trigger {
    background-color: #fff;
}
.page-template-page-customers header:not(.is-scrolled) .menu-trigger:hover,
.single-post header:not(.is-scrolled) .menu-trigger:hover {
        background-color: var(--c-dark);
}
.page-template-page-customers header:not(.is-scrolled) .menu-trigger span,
.single-post header:not(.is-scrolled) .menu-trigger span {
   background-color: var(--c-pink);
}

.page-template-page-map header:not(.is-scrolled) .menu-trigger {
    background-color: var(--c-dark);
}
.page-template-page-map header:not(.is-scrolled) .menu-trigger:hover {
    background-color:  var(--c-pink);
}



.container,
.adam-jobs-app {
    width: 81.3rem;
        margin: 0px auto;
            max-width: 100%;
}
.home .container, header .container {
    width: 87.3rem;
}
.container.fs-menu-header {
    width: 87.3rem;
    display: flex;
    position: relative;
}
.container-full {
    width: 100%;
}
/* --- Hero Секция --- */
.hero-section {
    position: relative;
    background-color: var(--c-white);
    z-index: 5;
    min-height: 47.5rem;      /* Чтобы секция была высокой */
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}

.hero-grid {
    display: grid;
    /* Create 2 columns */
    grid-template-columns: 1fr 1fr; 
    gap: 2rem;
    align-items: center;
    position: relative; /* Necessary anchor for the absolute child */
    min-height: 600px; /* Give it height so the absolute child fits */
    height: 100%;
}

.hero-content {
    grid-column: 2;
    margin: auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 6;
    padding-left: 0;
}

.hero-title {
    /* clamp(мин, предпочтительно, макс) */
    font-size: 4.5rem;
    color: var(--c-pink);
    line-height: 1.1;
    margin-bottom: 1rem; /* 20px */
font-weight: 400;
line-height: 100%;
color: var(--c-dark);
}
.hero-title span {
    color: var(--c-pink);
}
.hero-subtitle {
    font-size: 1.3rem;
    max-width: 30rem;
    line-height: 1.3;
}

.hero-buttons {
    display: flex;
    gap: 0.8rem; /* 20px */
    margin-top: 1.5rem;
}

.btn {
    display: inline-flex;
    padding: 0.65rem 0;
    border-radius: 2.5rem;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    width: 10.6rem;
    text-align: center;
    font-weight: 500;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
}
.career-page-wrapper .about-hero-section .btn-primary {
    width: 16rem;
}
.btn-primary {
    background: var(--c-pink);
    color: #fff;
    border: 1px solid var(--c-pink); 
}

.btn-outline {
    border: 1px solid var(--c-dark);
    color: var(--c-dark);
    background: transparent;
}
.btn-outline-pink {
       border: 1px solid var(--c-dark);
    color: var(--c-pink);
    background: transparent; 
}
.btn-outline-pink:hover {
    border: 1px solid var(--c-pink);
    background: var(--c-pink);
    color: #fff;
}
.btn-outline-pink:hover svg path {
    fill: #fff;
}
.btn-primary:hover {
    background: var(--c-dark);
    color: #fff;
    border: 1px solid var(--c-dark);

}
.btn-primary:hover svg {
    fill: #fff;
}
.btn-outline:hover {
    background: var(--c-dark);
    color: #fff;
}
/* --- Маска и визуальная часть (Клякса) --- */
.hero-visual-wrapper {
    position: absolute;
    top: -4rem;
    /* Визуально справа. В RTL right: -5% будет "началом" справа */
    left: auto; 
        right: -11rem;
    width: 57.5vw;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* Чтобы клики проходили сквозь пустые места */
}

/* --- Контейнер (Держит маску) --- */
.custom-mask-slider {
    position: relative;
    width: 100%;
    height: 57.5vw; /* Ваша высота */
    overflow: hidden;
    
    /* === МАСКА === */
    -webkit-mask-image: url('assets/img/home-page-mask.png');
    mask-image: url('assets/img/home-page-mask.png');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Этот хак фиксирует маску в памяти GPU, чтобы она не исчезала */
    transform: translate3d(0, 0, 0);
    z-index: 1;
    background-color: transparent; /* На всякий случай */
}

/* --- Слайды (Картинки) --- */
.mask-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заполняет маску */
    
    /* Начальное состояние: невидимое */
    opacity: 0;
    z-index: 0;
    
    /* Плавность перехода (Fade) - 1 секунда */
    transition: opacity 1s ease-in-out;
}
/*
.custom-mask-slider .mask-slide {
     transform: scale(1.2);
    transform-origin: center center;   
}*/


/* --- Активный слайд --- */
.mask-slide.active-slide {
    opacity: 1;
    z-index: 1; /* Поднимаем активный наверх */
}

/* --- Вторая секция (Черная) --- */
.dark-section {
    position: relative;
    background-color: var(--c-dark);
    color: var(--c-white);
    
    /* Большой отступ сверху, чтобы текст не спрятался под нависающей кляксой */
    padding: 8rem 0 5rem; /* 160px 0 100px */
    
    z-index: 1; /* Под кляксой */
    margin-top: -3rem; /* -60px (подтянуть секцию вверх под кляксу) */
}

.dark-content {
    position: relative;
    text-align: right; /* RTL */
    z-index: 2;
}

.dark-title {
    font-size: 2.5rem; /* 50px */
    margin-bottom: 1rem; /* 20px */
}

.dark-subtitle {
    font-size: 1.1rem; /* 22px */
    opacity: 0.9;
}

/* Фиолетовая фигура (вектор) во второй секции */
.purple-shape {
    position: absolute;
    bottom: -2.5rem; /* -50px */
    left: 0; /* Визуально слева */
    width: 15rem; /* 300px */
    z-index: -1;
}

/* --- Адаптив --- */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-content {
        padding-left: 0;
    }
    
    .hero-visual-wrapper {
        position: relative;
        width: 100%;
        height: 25rem; /* 500px */
        right: auto;
        margin-top: 2rem;
    }
    
    .dark-section {
        margin-top: 0;
        padding-top: 4rem;
    }
}

/* --- Wrapper для контекста наложения --- */
.pixel-perfect-wrapper {
    position: relative;
    width: 100%;
}

/* 1. DARK SECTION */
.section-about-dark {
    position: relative;
    background-color: var(--c-dark);
    color: var(--c-white);
    padding: 6rem 0 6rem; 
    z-index: 1; 
}

.about-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    align-items: flex-start;
}

/* Контент (Визуально справа) */
.about-content-col {
    padding-left: 2rem;
}

.section-title {
    font-size: 3rem; /* 60px */
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.section-desc {
    font-size: 1.1rem; /* 22px */
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    max-width: 30rem;
}

/* Кнопка */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 2.5rem;
    color: var(--c-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    width: 10.6rem;
    text-align: center;
    justify-content: center;
}
.section-about-dark .btn-arrow {
background: var(--c-white);
    color: var(--c-dark);
    border-color: var(--c-white);
}
.section-about-dark .btn-arrow:hover {
background: var(--c-purple);
    color: var(--c-dark);
    border-color: var(--c-purple);
}
.about-visual-col {
    position: relative;
    min-height: 15rem;
    position: absolute;
    bottom: -5rem;
    left: 0;
    z-index: 9;
}
.parallax-element {
    /* Optimizes performance for transform animations */
    will-change: transform;
    /* Optional: Ensure z-index is handled if it overlaps text */
    position: relative; 
    z-index: 1; 
}
.deco-lines-svg {
    width: 100%;
}

.purple-blob {
    position: absolute;
    top: 10%;
    left: 0;
    width: 6rem;
    height: 4rem;
    background: var(--c-purple); /* Используем переменную из 1-й секции */
    filter: blur(40px);
    z-index: -1;
    border-radius: 50%;
}

/* 2. STATS SECTION */
.section-stats {
    position: relative;
    background-color: var(--c-grey); /* Или var(--c-white), если там чисто белый */
    color: var(--c-dark);
    padding: 8rem 0 8rem;
}
.section-stats .section-stats--element {
    position: absolute;
    left: 0;
    top: -3rem;
    z-index: 9;
}
/* Женщина - Overlapping Element */
.overlapping-visual {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 42.5rem; /* ~560px */
    z-index: 10; 
    pointer-events: none; 
    
    height: auto; 
    display: flex;
    align-items: flex-end;
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4.5rem 3.5rem;
    max-width: 57rem;
}

.stat-card {
    /* Formula for 3 columns: (100% - (gap * 2)) / 3 */
    /* Adjust '3rem' to match your gap value */
    flex: 0 0 calc((100% - 9rem) / 3); 
    
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    justify-content: flex-start;
}

.stat-value-wrap {
    position: relative;
    display: inline-flex;
    margin-bottom: -0.5rem;
    direction: ltr;
}

.stat-num {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 0.8;
}

.stat-suffix {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 0.8;
}

.smile-deco {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 0.8rem;
    stroke: var(--c-dark);
}

.section-stats .stat-label {
    font-size: 1.3rem;
    font-weight: 400;
}
.section-stats--element.masked-image {
    /* 1. Dimensions are REQUIRED for masks to work properly. 
       Adjust these to match the original numbers-element.png aspect ratio */
    width: 32rem; 
    height: 53rem;
    display: inline-block;

    /* 2. Background settings for the ACF image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 3. The Mask (Your original shape) */
    -webkit-mask-image: url('assets/img/numbers-element2.png');
    mask-image: url('assets/img/numbers-element2.png');

    /* Mask settings */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
/* --- Адаптив --- */
@media (max-width: 1024px) {
    .section-about-dark {
        padding-bottom: 4rem;
    }
    
    .overlapping-visual {
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        margin: -15rem auto 3rem;
        /* z-index: 10; */
    }
    .stat-num {
    font-size: 6.5rem;
}
.stat-suffix {
    font-size: 6.5rem;
}
.section-title {
    font-size: 3rem;
}
.pink-circle-btn .btn-text {
    font-size: 1.5rem;
}
    .woman-img {
        margin-top: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 0;
        gap: 3rem 5rem;
    }
    
    .about-inner {
        grid-template-columns: 1fr;
    }
    
    .about-content-col {
        padding-left: 0;
        text-align: center;
        order: 1; 
    }
    
    .about-visual-col {
        order: 2;
        display: none; 
    }
}

.section-solutions {
    position: relative;
    padding: 17.5rem 0 10rem;
    background-color: var(--c-white);
    overflow: hidden;
}

.solutions-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Места под сеть больше */
    gap: 4rem;
    align-items: center;
}

.solutions-visual {
    top: 0;
    position: absolute;
    height: 100%;
    left: 0;
    width: 71rem;
}

/* Линии на фоне */
.lines-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.54;
    pointer-events: none;
}

.lines-img {
    width: 100%;
    height: 67.5rem;
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -9rem;
    margin-top: -20rem;
}

/* Контейнер для нод */
.nodes-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- Сама Нода (Ромб) --- */
.sol-node {
    position: absolute;
    width: 8.8rem;  /* Размер ромба ~180px */
    height: 8.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
        background: var(--Light-blue, #CAEEF7);
    border-radius: 24px; /* Ваше требование */
    z-index: -1; /* Кладем слой ПОД основной ромб */
    transform: rotate(45deg); 
    padding: 15px;
}

.sol-node:hover {
    z-index: 10;
    transform: scale(1.1); /* Легкое увеличение при ховере */
}

/* Форма ромба */
.node-shape {
    position: relative; /* Обязательно: чтобы позиционировать слой внутри */
    z-index: 1; /* Создаем контекст наложения, чтобы контент был сверху */
    
    width: 100%;
    height: 100%;
    background: var(--c-cyan);
    border-radius: 24px;  
    box-shadow: 0 15px 35px rgba(38, 198, 218, 0.3);
    
    display: flex;
    justify-content: center;
    align-items: center;
    transition: box-shadow 0.3s ease;

}

/* ВАЖНО: Текст внутри тоже повернется. Нужно повернуть его обратно */
.node-content {
    transform: rotate(-45deg);
}

.sol-node:hover .node-shape {
    box-shadow: 0 20px 40px rgba(38, 198, 218, 0.5);
}

/* Текст внутри */
.node-content {
    transform: rotate(-45deg); /* Поворачиваем текст обратно */
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.1;
    width: 90%; /* Компенсация вращения, чтобы текст влезал */
    transition: transform 0.3s ease;
}
.sol-node:hover .node-content {
    transform: rotate(-45deg) scale(1.1);
}
/* --- КООРДИНАТЫ (Based on Screenshot) --- */
/* Left и Top задаем в %, чтобы было адаптивно внутри блока */

/* 1. Верхний левый (AI KMS) */
.node-1 {
    top: 0.25rem;
    left: 40.5rem;
}

/* 2. Верхний правый (AI Support) */
.node-2 {
    top: 8.35rem;
    left: 23.1rem;
}

/* 3. Центр лево (CRM) */
.node-3 {
    top: 1.65rem;
    left: 3.8rem;
}

/* 4. Центр верх (Omnichannel platform) */
.node-4 {
    top: 21.2rem;
    left: 25.8rem;
}

/* 5. Низ центр (Omnichannel AI) */
.node-5 {
    top: 20rem;
    left: 6rem;
}

/* 6. Низ лево (AI Simulator) */
.node-6 {
    top: 34rem;
    left: 22.5rem;
}
.node-7 {
    top: 35rem;
    left: 1.5rem;
}
/* --- Content Side --- */
.solutions-content {
    text-align: right; /* RTL */
    padding-left: 2rem;
}

/* Кнопка (Dark version) */
.btn-arrow.dark-text {
    color: var(--c-dark);
    border-color: var(--c-dark);
}
.btn-arrow.dark-text:hover {
    background: var(--c-dark);
    color: #fff;
}


.solutions-wrapper .btn-arrow.dark-text {
      border-color: var(--c-cyan); 
      width: 13rem; 
}
.solutions-wrapper .btn-arrow.dark-text:hover {
      background: var(--c-cyan);  
}





/* --- Responsive --- */
@media (max-width: 1024px) {
    .solutions-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .solutions-content {
        order: 1; /* Текст сверху на мобиле */
        text-align: center;
        padding-left: 0;
        margin-bottom: 2rem;
    }
    
    .solutions-visual {
        order: 2;
        height: 25rem; /* Меньше высота на мобиле */
        font-size: 0.8rem; /* Уменьшаем шрифт в ромбах */
    }
    
    .sol-node {
        width: 7rem;
        height: 7rem;
    }
}

@media (max-width: 600px) {
    /* На совсем маленьких экранах сеть может сломаться, 
       можно сделать overflow-x scroll или перестроить в грид */
    .solutions-visual {
        height: 30rem;
    }
    
    /* Корректировка позиций для мобилки, чтобы не наезжали */
    /*.node-1 { left: 5%; top: 0%; }
    .node-2 { left: 60%; top: 5%; }
    .node-3 { left: 5%; top: 35%; }
    .node-4 { left: 50%; top: 40%; }
    .node-5 { left: 45%; top: 75%; }
    .node-6 { left: 10%; top: 70%; }*/

    .sol-node {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
    }
    .solutions-visual {
        position: relative;
    height: 100%;
    left: 0;
    width: 100%;
    }
    .nodes-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        justify-content: center;
    }
}

/* --- Action Grid Section --- */
.section-actions-grid {
    position: relative;
    padding: 8.5rem 0 8rem; /* 120px 0 160px */
    background-color: var(--c-white);
}

.action-grid-header {
    text-align: center;
    margin-bottom: 2.5rem; /* 80px */
}

.grid-title {
    font-size: 2.5rem; /* 44px */
    font-weight: 400;
    margin-bottom: 0;
}

.grid-description {
    max-width: 41.5rem;
    margin: 0 auto;
}
.grid-description p {
    margin: 0;
}
.actions-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem 4.5rem;
    text-align: center;
    max-width: 60rem;
    margin: 0 auto;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--c-dark);
    transition: transform 0.3s ease;
}

.action-item:hover {
    transform: translateY(-0.5rem); /* Приподнять при ховере */
}

.action-icon-wrap {
    border-radius: 50%;
    margin-bottom: 0rem;
    
    display: flex;
    justify-content: center;
    align-items: center;

    transition: all 0.3s ease;
}

.action-item:hover .action-icon-wrap {
    transform: translateY(-5px);
}

.action-label {
    font-size: 1.4rem;
    font-weight: 400;
        margin-top: 0.5rem;
}

/* Декоративные плюсы (как в макете) */
/* Мы используем псевдоэлемент на ячейках, которые находятся между элементами */
.action-item::after {
    content: '+';
    position: absolute;
left: -3rem;
    top: 9rem;
font-size: 3rem;
    color: var(--c-dark);
    /* opacity: 0.5; */
    pointer-events: none;
    font-weight: 300;
}

/* Удаляем плюсы на последней колонке */
.actions-grid-wrapper > div:nth-child(4n)::after,
.actions-grid-wrapper > div:last-child::after {
    content: none;
}

/* Удаляем плюсы на нижнем ряду, кроме последнего */
.actions-grid-wrapper > div:nth-child(n+5)::after {
    content: none; 
}


/* --- Адаптив --- */
@media (max-width: 992px) {
    .actions-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Убираем все плюсы, так как сетка поменялась */
    .action-item::after {
        content: none;
    }
}

@media (max-width: 600px) {
    .actions-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* --- SECTION LAYOUT --- */
.section-career {
    padding: 4.5rem 0 12rem;
    background-color: var(--c-white);
    overflow: hidden; /* Prevent horizontal scroll if button pops out slightly */
}

.career-grid {
    display: grid;
    /* Grid: Text (1.1fr) | Image (0.9fr) */
    grid-template-columns: 0.95fr 0.9fr;
    /* Fluid gap: 5% of viewport width. Scales with screen size */
    gap: 5vw; 
    align-items: center;
    
    /* Layout definition: Content Left, Visual Right */
    /* This forces the layout regardless of RTL/LTR direction if strictly defined */
    grid-template-areas: "visual content";
}

/* --- CONTENT SIDE --- */
.career-content {
    grid-area: content;
    padding-left: 2rem; /* Spacing from screen edge */
}

/* RTL Specifics for Text */
html[dir="rtl"] .career-content {
    text-align: right;
    padding-left: 0;
    padding-right: 0;
    max-width: 34rem;
}

.section-title {
        margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--c-text);
    font-size: 4rem;
font-weight: 400;
line-height: 100%;
}
.career-content .section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
.section-title span {
    color: var(--c-purple);
    font-weight: 700;
}
.section-desc {
    max-width: 46rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;

}
.career-content .section-desc {
            margin: 0;
}
/* --- VISUAL SIDE (The Complex Part) --- */
.career-visual {
    grid-area: visual;
    display: flex;
    justify-content: center; /* Center mask in its column */
    position: relative;
}

/* THE MASK CONTAINER */
.mask-container {
    position: relative;
    width: 100%; /* Take full width of the grid column */
    max-width: 40rem; /* Limit max size on huge screens */
    
    /* ASPECT RATIO IS KING */
    /* Keeps the box shape consistent (Width / Height) */
    /* Change 1.2/1 to match your exact Figma mask ratio */
    aspect-ratio: 1.2 / 1; 
    
    /* Allow button to overlap outside borders */
    overflow: visible; 
}
.career-visual .mask-container {
    max-width: 100%; /* Limit max size on huge screens */
    aspect-ratio: 1.5 / 1;
}
/* The Image Inside */
.mask-image-wrap {
    width: 100%;
    height: 100%;
    
    /* Masking Magic */
    -webkit-mask-image: url(assets/img/mask-career.svg);
    mask-image: url(assets/img/mask-career.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills mask without stretching */
    transition: transform 0.5s ease;
}

/* Hover Effect */
.mask-container:hover .img-fill {
    transform: scale(1.05);
}

/* --- THE FLUID BUTTON (Pixel Perfect Scaling) --- */
.pink-circle-btn {
    position: absolute;
    z-index: 10;
    
    /* FLUID SIZE: Button is always 28% of the mask's width */
    width: calc(100% / 3 - 2rem); 
    
    /* FLUID SHAPE: Always a perfect circle */
    aspect-ratio: 1 / 1; 
    border-radius: 50%;
    
    /* FLUID POSITION: Anchored to bottom-left relative to mask */
    bottom: 0%; 
    left: 0; /* Overlaps by 5% */
    
    background-color: var(--c-pink);
    color: #fff;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
}

.pink-circle-btn:hover {
    background-color: var(--c-dark);
}

/* Fluid Text inside Button */
.btn-text {
    font-weight: 700;
    line-height: 1.1;
    padding: 5px;
    
    /* Font size scales with viewport width (vw) */
    /* 1.4vw ensures text shrinks/grows with the button perfectly */
    font-size: clamp(0.8rem, 1.4vw, 1.6rem); 
}
.pink-circle-btn .btn-text {
    font-weight: 700;
    line-height: 0.9;
    font-size: 2.5rem;
    padding: 0 1rem;
}
/* --- MOBILE & TABLET RESPONSIVENESS --- */
@media (max-width: 992px) {
    .section-career {
        padding: 4rem 0;
    }

    .career-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "visual"
            "content"; /* Image on top, Text below */
        gap: 3rem;
    }
    
    .career-content {
        text-align: center !important; /* Force center on mobile */
        padding: 0 1rem;
    }

    
    .mask-container {
        /* On mobile, limit width so it doesn't touch edges */
        max-width: 90%; 
    }
    
    /* Adjust button for touch targets */
    .pink-circle-btn {
        width: 32%; /* Slightly larger on mobile for easier tapping */
        left: 1%;
        bottom: -1%;
    }
    
    .btn-text {
        font-size: clamp(0.9rem, 3vw, 1.2rem); /* Larger relative text for readability */
    }
}

.section-contact-hero {
    position: relative;
    padding: 0;
    background: var(--c-pink);
}

/* 1. PINK BACKGROUND MASK */
.contact-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Высота по макету ~877px, но лучше задать в vh или aspect-ratio */
    height: 90vh; 
    min-height: 45rem; 
    z-index: 1;
    pointer-events: none;
    top: 10rem;
}

.pink-mask-bg {
    width: 100%;
    height: 100%;
    background-color: var(--c-pink-dark);
    
    /* Применяем SVG форму для создания изгиба. 
       Если это просто прямоугольник с clip-path, используем clip-path.
       Если это SVG на фон, используем background-image и mask-image.
       Предполагаем, что это простая маска: */
    -webkit-mask-image: var(--mask-contact-url);
    mask-image: var(--mask-contact-url);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom; /* Прижимаем изгиб к низу */
    mask-position: bottom;
}


.contact-container {
    position: relative;
    z-index: 5;
    display: flex;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 13rem;
    padding-top: 0;
    height: 100%;
}

/* 3. CONTENT (Text and Form) */
.contact-content {
    color: var(--c-white);
    padding-top: 4rem;
}
p.pre-form {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 2.5rem;
}
.contact-title {
    font-size: 4rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 2rem;
    max-width: 36rem;
    text-align: right; /* RTL */
}

/* 4. FORM STYLES (CF7) */
.contact-form-wrap {
    max-width: 30rem;
}

/* Базовые стили для полей CF7 */
.contact-form-wrap .wpcf7-form p {
        margin-bottom: 0.5rem;
    margin-top: 0;
}

.contact-form-wrap input:focus {
    outline: none;
}

/* Кнопка отправки */
.contact-form-wrap input[type="submit"] {
    width: auto;
    background-color: var(--c-white);
    color: var(--c-pink-dark);
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0.8rem 2.5rem;
    border: none;
    border-radius: 2rem;
    transition: background-color 0.3s ease;
}

.contact-form-wrap input[type="submit"]:hover {
    background-color: #f0f0f0;
}

.babcom-field, 
.wpcf7 p { /* CF7 часто оборачивает строки в <p>, используем это */
    position: relative;
   margin: 0;
    direction: rtl; 
}

/* Активный бордер при фокусе (через класс родителя) */
p.is-active .cf7-input {
    border-bottom-color: #fff;
}
.nc-form-container p.is-active .cf7-input {
border-bottom-color: #000;
}
/* --- Лейбл (Placeholder) --- */
.babcom-label {
    position: absolute;
    right: 0;
    top: 10px; /* Исходная позиция */
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
    transition: 0.3s ease all;
}
.nc-form-container .babcom-label {
    color: #000;
}
/* --- ГЛАВНАЯ МАГИЯ --- */
/* Если у родителя (p) есть класс is-active, поднимаем лейбл */
p.is-active .babcom-label {
    top: -1rem;
    font-size: 0.8rem;
    opacity: 0.8;
}
/* Container to hold input and label together */
.form-row {
    position: relative;
    margin-bottom: 20px;
    direction: rtl; /* Ensure Hebrew alignment */
}
.form-row.legal-row {
    margin-top: 2rem;
}
.nc-form-container p.pre-form {
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}
/* The Input Field */
.cf7-input {
    width: 100%;
    background: transparent!important;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white line */
    color: #fff;
    padding: 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 300;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-main);
}
.nc-form-container .cf7-input {
border-bottom: 1px solid rgba(0, 0, 0, 1); /* Semi-transparent white line */
}
/* The Fake Placeholder (Label) */
.babcom-label {
    position: absolute;
    right: 0; /* Align to the right for Hebrew */
    top: 10px; /* Align vertically with text */
font-weight: 300;
    font-size: 1.1rem;
    pointer-events: none; /* Allows click to pass through to the input */
    transition: 0.3s ease all;
}

/* The Colored Asterisk */
.babcom-label .asterisk {
    color: var(--c-purple); /* Use your specific pink color from design */
    margin-right: 8px; 
}
.nc-form-container .babcom-label .asterisk {
    color: var(--c-pink);
}
button.cf7-submit-btn {
    background: var(--c-dark);
    border: none;
    color: #fff;
    border-radius: 3rem;
    height: 3rem;
    width: 9rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0;
    border-radius: 2.5rem;
    color: var(--c-white);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    width: 10.6rem;
    text-align: center;
    justify-content: center;
    font-family: 'ploni', sans-serif;
    cursor: pointer;
}
.nc-form-container button.cf7-submit-btn {
    background: var(--c-pink);
}
.nc-form-container button.cf7-submit-btn:hover {
    background-color: var(--c-dark);
}
span.form-arrow {
    display: flex;
}
.wpcf7-list-item {
    margin: 0;
    font-size: 0.8rem;
}
.wpcf7-form-control-wrap {
    position: relative;
    width: calc(100% - 9rem);
}
.form-row.legal-row p {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}
/* 1. Reset standard checkbox appearance and create the box */
.wpcf7-acceptance input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    
    /* Size */
    width: 26px;
    height: 26px;
    
    /* Border */
    border: 1.5px solid var(--Brand-white, #FFF);
    border-radius: 0; /* Change if you need rounded corners */
    background-color: transparent;
    
    /* Layout */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0; /* Prevents shrinking if text is long */
    margin: 0;
    border-radius: 6px;
    
    /* Transition */
    transition: all 0.2s ease;
}
.nc-form-container .wpcf7-acceptance input[type="checkbox"] {
    border: 1.5px solid var(--Brand-white, #2F2F2F);
}
/* 2. Spacing for Hebrew (RTL) Context */
.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start; /* Aligns box with top line of text */
    gap: 12px; /* Space between box and text */
    cursor: pointer;
	
}
.wpcf7-acceptance label a {
	color:var(--c-dark);
}
.wpcf7-acceptance label a:hover {
	color:var(--c-pink);
}
.section-contact-hero .wpcf7-acceptance label a {
	color:#fff;
}
.section-contact-hero .wpcf7-acceptance label a:hover {
	color:var(--c-dark);
}
.wpcf7-not-valid-tip {
    color: #fff;
    font-size: 0.8rem;
    opacity: 0.8;
    position: absolute;
    bottom: -40px;
    right: 0;
}
/* 3. The Checked State (Injecting the SVG) */
.wpcf7-acceptance input[type="checkbox"]:checked {
    /* The SVG is URL Encoded here for CSS compatibility */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11' fill='none'%3E%3Cpath d='M14.9696 0.75L5.85073 9.86733L0.75 4.77448' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 11px; /* The size of your icon */
}
.nc-form-container .wpcf7-acceptance input[type="checkbox"]:checked {
    /* SVG Data URI with stroke #2F2F2F */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11' fill='none'%3E%3Cpath d='M14.9696 0.75L5.85073 9.86733L0.75 4.77448' stroke='%232F2F2F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px auto; /* Adjust size inside the box */
    
    /* Optional: Change border color when checked */
    border-color: #2F2F2F; 
}
/* --- ANIMATION LOGIC --- */

/* When input is focused OR has content (not showing placeholder space) */
.cf7-input:focus ~ .babcom-label,
.cf7-input:not(:placeholder-shown) ~ .babcom-label {
    /* Option A: Move label UP (Floating Label style - Recommended) */
    top: -20px;
    font-size: 14px;
    opacity: 0.8;
    
    /* Option B: Hide label completely (Standard Placeholder style) */
    /* opacity: 0; visibility: hidden; */
}

/* Active Border Color (Optional) */
.cf7-input:focus {
    border-bottom-color: #fff;
}

.nc-form-container .cf7-input:focus {
border-bottom-color: #000;
}
.form-legal-text {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 1rem;
    text-align: right;
}

/* 5. VISUAL (Man) */
.contact-visual {
    position: relative;
    /* Убедимся, что колонка занимает всю высоту */
    height: 100%; 
    display: flex;
}

.visual-man-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
}

.man-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Картинка сохраняет пропорции и вписывается */
    object-position: top right; /* Прижимаем к правому нижнему углу */
    margin-top: -1.5rem;
}

/* --- Адаптив --- */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        padding-top: 3rem;
        min-height: auto;
    }
    
    .contact-content {
        text-align: center;
    }

    .contact-title {
        text-align: center;
        max-width: none;
    }

    .contact-form-wrap {
        max-width: 90%;
        margin: 0 auto;
    }
    
    /* Сдвигаем человека наверх, уменьшаем и центрируем */
    .contact-visual {
        display: none; /* Часто на мобиле крупные изображения удаляют */
        /* Если нужно оставить: */
        /* height: 20rem;
        align-items: center;
        margin-top: -2rem; */
    }
    
    .pink-mask-bg {
        height: 100%; /* Фон заполняет весь контент */
        min-height: 40rem;
        /* Если маска ломается, используй простой background-color на мобиле */
        -webkit-mask-image: none;
        mask-image: none;
    }
}
/* --- Logo Marquee Section --- */
.section-logo-marquee {
    position: relative;
    padding: 4.5rem 0; /* 60px padding */
    background-color: var(--c-grey);
    overflow: hidden; /* Critical for seamless marquee */
}

.marquee-wrapper {
    display: flex;
    width: 100%;
    /* Анимация прокрутки: 30 секунд, линейно, бесконечно */
    animation: scroll-left 30s linear infinite; 
    mix-blend-mode: multiply;
    direction: ltr;
}

/* Создание бесконечной ленты: дублируем контент */
.marquee-content {
    display: flex;
    flex-shrink: 0; /* Не сжимать, важно для анимации */
    align-items: center;
    gap: 6rem; /* Отступ между логотипами */
    white-space: nowrap;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo {
    display: block;
    max-height: 100%;
    width: auto;
    transition: transform 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.1);
}

/* --- KEYFRAMES FOR SCROLLING --- */
@keyframes scroll-left {
    from {
        /* Начало: 0% смещения */
        transform: translateX(0%); 
    }
    to {
        /* Конец: Сдвигаем на 50% влево (чтобы первое дублированное содержимое стало видимым) */
        transform: translateX(-50%); 
    }
}



/* Если нужно остановить анимацию при ховере */
.marquee-wrapper:hover {
    animation-play-state: paused;
}

/* --- FOOTER SECTION --- */
.site-footer {
    background-color: var(--c-pink); /* Светлый фон */
    padding-top: 4.8rem;
    position: relative;
}
.home .site-footer {
    background-color: #fff;
}
/* --- TOP FOOTER LAYOUT (Contact + Menus) --- */
.footer-top-wrap {
    display: grid;
    /* 4 колонки: Контакты (1.5fr) | Меню (1fr) | Меню (1fr) | Меню (1fr) */
    grid-template-columns: repeat(3, 1fr) 1.5fr; 
    gap: 3.5rem;
    padding-bottom: 0;
    text-align: right; /* RTL */
        max-width: 81rem;
}

.footer-col {
    /* Ensures menu columns align properly */
    min-width: 0; 
}

.col-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.home .col-title {
color: var(--c-pink);
}
.footer-col.footer-contact-col .col-title {
        font-size: 1.1rem;
}
.contact-details {
        color: #fff;
	margin-bottom:1.5rem;
}
.home .contact-details {
        color: var(--c-dark);
	
}
/* Contact Column */
.contact-details a {
    display: block;
    text-decoration: none;
    line-height: 0.8;
    transition: color 0.3s;
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
}
.home .contact-details a {
color: var(--c-dark);
}
.contact-details a.contact-email {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.6;
    margin-top: 0rem;
}
.home .contact-details a.contact-email {
color: var(--c-dark);
}
.contact-details a:hover {
    color: #fff;
    text-decoration: underline;
}
.home .contact-details a:hover {
color: var(--c-pink);
text-decoration: none;
}
.footer-col.footer-contact-col {
    text-align: right;
}
/* Social Icons */
.social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 3.5rem;
	margin-bottom: 3rem;
    direction: ltr; 
    justify-content: flex-start; 
}

.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-icon-link:hover {
    transform: translateY(-2px);
}

.social-icon {
    width: 3.2rem;
    height: 3.2rem;
    transition: filter 0.3s;
}


/* Menu Column Styles */
.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.3s;
        font-size: 1.1rem;
        font-weight: 400;
}
.footer-menu-list li a:hover {
    color: #fff;
    text-decoration: underline;
}
.home .footer-menu-list li a {
    color: var(--c-dark);
}
.home .footer-menu-list li a:hover {
    color: var(--c-pink);
    text-decoration: none;
}

/* --- BOTTOM FOOTER (Logo & Copyright) --- */
.footer-bottom-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 2.5rem;
}
.footer-bottom {
    padding-bottom: 3rem;
    padding-top: 2rem;
}
.home .footer-bottom {
    padding-bottom: 3rem;
    padding-top: 0;
}
.footer-large-logo-wrap {
    margin-bottom: 5rem;
}

.footer-large-logo {
    height: auto;
}

.copyright-text {
    font-size: 0.8rem;
    color: #888;
}
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
}
/* --- RESPONSIVENESS (MOBILE/TABLET) --- */
@media (max-width: 992px) {
    .footer-top-wrap {
        /* Две колонки на планшете */
        grid-template-columns: 1fr 1fr;
        padding-bottom: 2rem;
    }
    
    /* Сдвигаем контакты в верхний левый угол */
    .footer-contact-col {
        order: 1; /* Порядок 1 (верхний левый) */
        grid-column: span 1; /* Занимает 1 колонку */
    }
    /* Сдвигаем меню */
    .footer-menu-col:nth-of-type(1) { order: 2; } /* Меню 1 (верхний правый) */
    .footer-menu-col:nth-of-type(2) { order: 3; } /* Меню 2 (нижний левый) */
    .footer-menu-col:nth-of-type(3) { order: 4; } /* Меню 3 (нижний правый) */
}

@media (max-width: 600px) {
    .footer-top-wrap {
        /* Одна колонка на мобильном */
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .col-title {
        text-align: center;
    }
    
    .footer-contact-col {
        order: 1;
    }
    
    .social-links {
        /* Центрируем соцсети */
        justify-content: center;
		margin-bottom: 1rem;
    }
    
    /* Меняем порядок меню, чтобы контактные данные всегда были сверху */
    .footer-menu-col {
        order: 2; /* Все меню идут после контактов */
    }
}
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    /* GSAP сам добавит transition, но можно оставить для страховки */
    visibility: hidden; /* Чтобы точно не было видно до старта */
}
/* --- SECTION 1: ABOUT HERO --- */
.about-hero-section {
    padding: 6rem 0 5rem;
    position: relative;
    background-color: var(--c-white);
}
.blog-wrapper .about-hero-section {
    padding: 6rem 0 2rem;
}
.about-hero-grid {
    display: grid;
    /* Text (Right) | Visual (Left) */
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1.5rem;
    align-items: center;
}

/* Text Side */
.about-content {
    position: relative;
    padding-left: 2rem; /* Отступ от картинки */
}
.about-desc {
    /* Magic CSS for multi-line truncation with dots */
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Limit to 6 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* Optional: Transition for smooth height change (works best with max-height method, 
       but line-clamp is cleaner for dots) */
    transition: all 0.3s ease;
}

/* State when open */
.about-desc.is-expanded {
    -webkit-line-clamp: unset; /* Remove limit */
    overflow: visible;
}
/* Розовая точка декорации */
.pink-dot-deco {
    position: absolute;
    top: -3rem; /* Над заголовком */
    right: 0;
    width: 3rem;
    height: 3rem;
    background-color: var(--c-pink);
    border-radius: 50%;
    opacity: 1; /* Если нужна прозрачность, уменьши */
}

.about-title {
    color: var(--c-pink);
    margin-bottom: 0rem;
    margin-top: 0;
    font-size: 4.5rem;
font-weight: 400;
line-height: 100%;
}

.about-desc {
    margin-bottom: 1rem;
    max-width: 35rem;
}
.career-page-wrapper .about-desc {
     -webkit-line-clamp: none;
}
.career-page-wrapper .about-desc p {
    margin: 1rem 0;
}
/* Кнопка */
.btn-arrow-pink {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 2.5rem;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: var(--c-pink);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-arrow-pink:hover {
    background-color: var(--c-pink);
    color: #fff;
    border-color: var(--c-pink);
}

.icon-arrow {
    transform: scaleX(-1); /* Разворачиваем стрелку для RTL */
}

/* Visual Side (Mask) */
.about-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.mask-blob-container {
    position: relative;
    width: 100%;
    max-width: 48rem; /* Ограничение ширины */
    /* Соотношение сторон маски (возьми из Figma) */
    aspect-ratio: 4 / 3; 
    
    /* MASK MAGIC */
    -webkit-mask-image: url('assets/img/about-mask1.png');
    mask-image: url('assets/img/about-mask1.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.career-page-wrapper .mask-blob-container {
      -webkit-mask-image: url('assets/img/careerpage-mask.png');
    mask-image: url('assets/img/careerpage-mask.png');  
}

.media-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* Эффект зума при наведении */
.mask-blob-container:hover .media-fill {
    transform: scale(1.05);
}


/* --- SECTION 2: GROUP STRUCTURE --- */
.group-section {
    background-color: var(--c-grey);
    padding: 6rem 0;
}

.group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Text Side */
.group-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 400; /* Более тонкий шрифт, как на макете */
}
/* Image Side (Diagram) */
.group-visual {
    display: flex;
    justify-content: center; /* Центрируем диаграмму в колонке */
}

.diagram-img {
    max-width: 100%;
    height: auto;
    /* Если картинка диаграммы имеет белый фон, можно использовать mix-blend-mode 
       чтобы слить ее с серым фоном, если она не прозрачная PNG */
    /* mix-blend-mode: multiply; */
}


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .about-hero-grid,
    .group-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .about-content {
        padding-left: 0;
    }

    .about-desc, .group-desc {
        margin: 0 auto 2rem;
    }

    .pink-dot-deco {
        right: 50%;
        transform: translateX(50%);
        top: -4rem;
    }
    
    /* Порядок на мобильном: Картинка сверху или текст сверху? 
       Обычно картинка About идет второй, но можно поменять */
    .about-hero-grid .about-visual {
        order: -1; /* Картинка сверху */
    }
}

/* --- VALUES SECTION --- */
.values-section {
    padding: 9rem 0 8rem;
    background-color: var(--c-white);
    text-align: center;
}

.values-header {
    margin-bottom: 3rem;
}

.section-title-center {
    font-size: 2.5rem;
    font-weight: 400;
}

/* --- THE GRID --- */
.values-grid {
    display: grid;
    /* 5 Equal Columns */
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    /* RTL direction handled by HTML dir="rtl", grid follows automatically */
}

/* --- VALUE ITEM CARD --- */
.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Initial state for animation */
    transform: translateY(30px);
}

/* Icon Wrapper */
.icon-circle {
    width: 7rem;
    height: 7rem;
    background-color: var(--c-grey-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover .icon-circle {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Text Styles */
.value-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
margin-top: 0.5rem;
}

.value-desc {
    font-size: 1.2rem;
    line-height: 1.1;
    max-width: 15rem; /* Limit width for readability */
    margin: 0 auto;

}

.value-desc p {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.1;
}
/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .values-grid {
        /* Switch to 3 columns on smaller laptops */
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .values-grid {
        /* Switch to 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr);
    }
    
.values-section {
    padding: 5rem 0 1rem;
}
}

@media (max-width: 480px) {
    .values-grid {
        /* 1 column on mobile */
        grid-template-columns: 1fr;
    }
}


/* --- MISSION & VISION SECTION --- */
.mission-vision-section {
    padding: 6rem 0;
    background-color: #fff;
    overflow: hidden; /* To clip decorative circles if they spill out */
}

.mv-grid {
    display: grid;
    /* 2 Columns: Right (Team/Vision) | Left (Mission/Woman) */
    grid-template-columns: 1fr 1fr;
    gap: 0; /* No gap between columns visually, or adjust if needed */
    align-items: start;
}

/* --- COLUMNS --- */
.mv-col {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Add spacing between the image and box within the same column */
.col-right {
    gap: 0; 
}

.col-left {
    /* The woman overlaps the box, so we handle gap/overlap manually */
}

/* --- CONTENT BOXES --- */
.mv-box {
    padding: 3rem;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20rem; /* Ensure boxes have substance */
}

.box-purple {
    background-color: var(--c-purple);
    margin-top: -1rem;
    padding-right: 7.5rem;
    padding-left: 4.5rem;
}

.box-cyan {
    background-color: var(--c-cyan); /* Cyan matches design */
    padding-right: 5rem;
        justify-content: start;
}

.mv-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.mv-text p {
margin: 0;
}
.box-purple .mv-text {
    max-width: 35rem;
}
.box-cyan .mv-text {
    max-width: 35rem;
}
/* --- IMAGES --- */
.mv-image-wrapper {
    width: 100%;
    height: 30rem; /* Match height of adjacent boxes approx */
    overflow: hidden;
}

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

.mv-woman-wrapper {
    position: relative;
    z-index: 2;
    margin-top: -11rem;
    /* padding-right: 2rem; */
    display: flex;
    justify-content: center;
    height: 40rem;
    margin-right: -2px;
}
.group-desc a {
	color:var(--c-dark);
	text-decoration:underline;
}
.group-desc p strong {
    font-weight: 700;
}
.woman-img {
    max-width: 100%;
    height: auto;
    /* Ensure the hand is visible over the cyan box */
}

/* --- DECORATIONS --- */
.deco-circle-outline {
    position: absolute;
    top: -2rem;
    right: 1.25rem;
    width: 6rem;
    height: 6rem;
    border: 2px solid var(--c-dark);
    border-radius: 50%;
    z-index: 5;
}

.deco-circle-solid-pink {
    position: absolute;
top: -4rem;
    right: -1.75rem;
    width: 6rem;
    height: 6rem;
    background-color: var(--c-pink); /* Solid purple circle */
    border-radius: 50%;
    z-index: 1;
}
.deco-circle-solid-purple {
    position: absolute;
    bottom: -2rem;
    left: -1.2rem;
    width: 6rem;
    height: 6rem;
    background-color: var(--c-purple); /* Solid purple circle */
    border-radius: 50%;
    z-index: 2;
}
/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .mv-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Reset Overlaps for Mobile */
    .mv-woman-wrapper {
        margin-top: -5rem;
        padding-right: 0;
        justify-content: center;
    }
    .certifications-section {
    padding: 0rem 0 2rem;
}
    .woman-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.mv-woman-wrapper {
    height: 30rem;
}
.mv-box {
        min-height: auto;
        padding: 4rem 2rem;
        height: auto;
    }
    
    .deco-circle-outline, 
    .deco-circle-solid {
        display: none; /* Hide decorations on mobile to keep it clean */
    }
    
    /* Order: Image, Mission, Vision, Woman? 
       Or keep document flow. */
}

/* --- Global Vars Update --- */
:root {
    --c-gold: #D4AF37; /* Golden color for wreaths */
}

/* --- CERTIFICATIONS SECTION --- */
.certifications-section {
    padding: 4rem 0 6rem;
    background-color: var(--c-white);
    text-align: center;
}

/* Part 1: Intro Text */
.cert-intro-block {
    margin-bottom: 8rem;
}

.section-desc-center {
    max-width: 46rem; /* Limit text width */
    margin: 0 auto;
}
.section-desc-center p {
    margin: 0;
}
/* Part 2: Grid Wrapper */
.cert-grid-wrapper {
    position: relative;
}

.cert-main-title {
    font-size: 2.5rem;
    font-weight: 400; /* Lighter weight title */
    margin-bottom: 2rem;
}

/* The Grid (5 Columns) */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* Grid Item */
.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Initial state for JS animation */
    opacity: 0;
    transform: translateY(30px);
}

/* Icon Styling */
.cert-icon-wrap {
    position: relative;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cert-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* If your SVG is black, filter it to gold. If it's already gold, remove this. */
    /* filter: sepia(100%) saturate(1000%) hue-rotate(5deg); */
}

.cert-star {
    position: absolute;
    font-size: 1.5rem;
    color: var(--c-gold);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -5px; /* Fine-tune centering inside wreath */
}

/* Text Styling */
.cert-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.cert-desc p {
margin: 0;
    font-size: 1.1rem;
    line-height: 1.1;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .cert-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cols on laptops */
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cols on tablets */
    }
    
    .cert-intro-block {
        margin-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .cert-grid {
        grid-template-columns: 1fr; /* 1 col on mobile */
    }
}

/* --- NAV LINKS SECTION --- */
.nav-links-section {
    padding: 2.5rem 0 13rem;
    background-color: var(--c-white);
    overflow: hidden;
}

.nav-links-grid {
    display: grid;
    /* Col 1 (Image) | Col 2 (Links) */
    grid-template-columns:1.25fr 0.75fr;
    gap: 4rem;
    align-items: center;
}

/* --- VISUAL COLUMN --- */
/* We reuse .mask-blob-container styles from Section 1. 
   Ensure that CSS is loaded or copied here if needed. */
.nav-visual-col {
    display: flex;
    justify-content: center;
}

/* --- LINKS COLUMN --- */
.nav-content-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 29rem;
}

/* Link Item Styling */
.nav-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes text to right, icon to left */
    text-decoration: none;
    padding: 0.5rem 0;
    transition: transform 0.3s ease;
    gap: 2rem;
}

.nav-link-item:hover {
    transform: translateX(-10px); /* Move slightly left on hover */
}

/* Text Wrapper */
.nav-text-wrap {
    text-align: right; /* Ensure Hebrew aligns right */
}

.nav-title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-dark);
    margin: 0;
    transition: color 0.3s ease;
    max-width: 20rem;
}

/* Icon Circle Styling */
.nav-icon-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-shrink: 0; /* Prevent shrinking */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-link-item:hover .nav-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Specific Colors */
.icon-cyan {
    background-color: var(--c-cyan);
}

.icon-pink {
    background-color: var(--c-pink);
}

.icon-purple {
    background-color: var(--c-purple);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .nav-links-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    /* Order: Image top or bottom? 
       Design often puts visual first. */
    .nav-visual-col {
        order: -1;
    }

    .nav-link-item {
        justify-content: flex-end; /* Align items to the right on mobile if preferred, or space-between */
        gap: 1.5rem;
    }
}

/* --- HERO SECTION (Pink) --- */
.cust-hero-section {
    background: url(assets/img/customers-bg.png) var(--c-pink) no-repeat;
    color: var(--c-white);
padding-top: 11rem;
    padding-bottom: 17rem;
    position: relative;
    overflow: visible; /* Allow card to stick out */
}
.single-post .cust-hero-section {
    padding-top: 11rem;
    padding-bottom: 3rem;
}
.cust-hero-text {
    position: relative;
    z-index: 2;
    text-align: right;
    margin-bottom: 2rem;
}
.single-post .cust-hero-text {
    max-width: 40rem;
}
.cust-title {
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.cust-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
margin: 0;
}
.single-post .cust-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
}
/* Decorative Lines */
.hero-deco-lines {
    position: absolute;
    top: -2rem;
    left: 10%;
    opacity: 0.3;
    pointer-events: none;
}

/* --- FLOATING CARD --- */
.cust-floating-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10rem;
    width: 100%;
    max-width: 65.3rem;
    margin: 0 auto;
    background-color: #F2F2F2;
    border-radius: 33rem;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
    color: var(--c-text);
    padding: 4.5rem 9rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--c-dark);
}

/* Right Side: Stats */
.card-stat-col {
    flex: 0 0 35%;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--c-pink);
    line-height: 1;
}

.cust-hero-section .stat-number {
 font-size: 7.5rem;
    font-weight: 400;   
}

.stat-label {
    font-size: 2.2rem;
    font-weight: 400;
}
.cust-hero-section .stat-label {
 font-size: 2.5rem;
    font-weight: 400;  
    color: var(--c-dark); 
    line-height: 1;
}
/* Divider */
.card-divider {
    width: 1px;
    height: 100px;
    background-color: #eee;
    margin: 0 2rem;
}

/* Left Side: Quote */
.card-quote-col {
    flex: 1;
    position: relative;
    padding-right: 3rem; /* Space for quote icon */
}

.quote-icon {
    position: absolute;
    top: -9rem;
    left: 0;
}

.quoter-name {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0rem;

}

.quoter-role {
    display: block;
    font-size: 1.3rem;
    color: var(--c-pink);
    margin-bottom: 1rem;
    font-weight: 400;
}

.quote-text p {
    margin: 0;
}

/* Container: Uses Grid to stack items on top of each other */
.quote-slider-container {
    display: grid;
    /* This defines one single area for everything to sit in */
    grid-template-areas: "stack"; 
    position: relative;
    /* Optional: Limit width if needed, or inherit from parent */
    width: 100%; 
        padding-right: 6rem;
    border-right: 1px solid #565656;
}

/* Individual Slide */
.quote-slide {
    /* Puts every slide into the same grid cell */
    grid-area: stack; 
    
    /* Fade transition logic */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    
    /* Ensure content aligns correctly */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The Active Slide */
.quote-slide.active-quote {
    opacity: 1;
    visibility: visible;
    z-index: 2; /* Brings it visually to the front */
}

/* Keep your existing text styling */
.quoter-name {
    /* Your existing font styles */
}
.quote-text {
    max-width: 32.5rem;
}
/* --- LOGOS SECTION (White) --- */
.cust-logos-section {
    background-color: var(--c-white);
    padding-top: 16rem; /* Huge top padding to account for the floating card overlap */
    padding-bottom: 11rem;
}

.logos-header {
    display: flex;
    justify-content: end;
    align-items: start;
    margin-bottom: 3.8rem;
    border-bottom: 1px solid var(--c-dark);
    padding-bottom: 1.3rem;
    flex-direction: column;
}

.logos-title {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

/* Tabs */
.logos-tabs {
    display: flex;
    gap: 3rem;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    transition: color 0.3s;
}

.tab-btn:hover {
    color: var(--c-pink);
}

.tab-btn.active {
    color: var(--c-pink);
}

/* Grid */
.logos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4rem;
    align-items: center;
    justify-items: center;
}

.logo-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    text-align: center;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.logo-item img {
    max-width: 100%;
    max-height: 4rem;
    object-fit: contain;
	min-height: 2.5rem;
}


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    /* Hero & Card Mobile */
    .cust-hero-section {
        padding-bottom: 4rem; /* Remove huge space, we will stack */
    }

    .cust-floating-card {
        position: relative; /* No longer floating absolute */
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        margin-top: 2rem;
        flex-direction: column;
        border-radius: 2rem;
        padding: 2rem;
        gap: 2rem;
        text-align: center;
    }

    .card-divider {
        display: none;
    }

    .card-quote-col {
        padding-right: 0;
    }
    
    .quote-icon {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: 1rem;
        display: inline-block;
    }
    
    /* Logos Section Mobile */
    .cust-logos-section {
        padding-top: 4rem;
    }
    
    .logos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .logos-tabs {
        width: 100%;
        overflow-x: auto; /* Scrollable tabs */
        padding-bottom: 0.5rem;
    }
    
    .logos-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cols */
        gap: 2rem;
    }
}


.team-page-wrapper {
    background-color: var(--c-white);
    overflow-x: hidden; /* Prevent horizontal scroll from absolute decos */
}

/* --- HERO / HEADER --- */
.team-header {
    position: relative;
    padding: 8rem 0 4rem;
    text-align: right;
}

.team-header .page-title {
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--c-pink);
    margin-bottom: 0;
    margin-top: 2rem;
}

.page-subtitle {
    max-width: 30.35rem;
}

/* Decorations */
.header-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.deco-lines {
    position: absolute;
    top: 50px;
    left: 5%;
    width: 400px;
    height: 400px;
    opacity: 0.5;
}

.deco-dot {
    position: absolute;
    border-radius: 50%;
}

.dot-pink {
    top: 150px;
    left: 20%;
    width: 60px;
    height: 60px;
    background-color: var(--c-pink);
}

.dot-purple-small {
    top: 300px;
    left: 5%;
    width: 20px;
    height: 20px;
    background-color: #CE93D8;
}
.team-page-wrapper {
    background: url(assets/img/team-bg.png) no-repeat;
}
/* --- TEAM GRID --- */
.team-grid-section {
    padding-bottom: 8rem;
    position: relative;
    z-index: 1;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4rem;
    max-width: 69rem;
    margin: 0 auto;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transform: translateY(30px);
    border-radius: 1000px;
    overflow: hidden;
    background-color: #f0f0f0;
    /* align-items: center; */
    justify-content: end;
    height: 31rem;
}

/* The Stagger Logic: Push even columns down */
.team-card.offset-down {
    margin-top: 6rem; /* Adjust this value to control how "low" the low cards are */
}

/* Member Info (Top) */
.member-info {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    max-width: 7.5rem;
    position: absolute;
    top: 3.5rem;
}

.member-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0rem;
    line-height: 1.3;
}

.member-role {
    font-size: 1.1rem;
    line-height: 1.13;
    display: block;
}

.member-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .member-img-wrap img {
    transform: scale(1.05);
}

/* Specific Card Decorations */
.deco-circle-yellow {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 60px;
    height: 60px;
    background-color: var(--c-yellow);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.8;
}

.dot-purple-bottom {
    position: absolute;
    bottom: 20%;
    left: -40px;
    width: 40px;
    height: 40px;
    background-color: #9575CD;
    border-radius: 50%;
}


/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablet */
        gap: 4rem 2rem;
    }
    
    /* On 2 columns, we still want the right column (even) to be lower */
    /* .offset-down works naturally here too: Item 2 and 4 will be lower. */
    /* But Item 5 is "High" and Item 6 is "Low", which matches the pattern perfectly. */
}

@media (max-width: 600px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 1 Column on Mobile */
        gap: 3rem;
    }
    
    /* Remove offset on mobile */
    .team-card.offset-down {
        margin-top: 0;
    }
    
    .team-header {
        text-align: center;
        padding-top: 4rem;
                padding-bottom: 2rem;
    }
    
    .page-subtitle {
        margin: 0 auto;
    }
    
    .deco-lines {
        left: -50px;
    }
}

/* --- MODAL OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark bg */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Nice blur effect */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- MODAL WRAPPER --- */
.modal-wrapper {
    background-color: #fff;
    width: 100%;
    max-width: 69.2rem;
    border-radius: 2.5rem;
    padding: 0;
    position: relative;
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); */
}

.modal-overlay.active .modal-wrapper {
    transform: scale(1) translateY(0);
}

/* Close Button */
.modal-close-btn {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: #F6EDED;
    border: none;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--c-pink);
    transition: all 0.2s;
    z-index: 10;
    font-size: 2rem;
}

.modal-close-btn:hover {
    background: var(--c-pink);
    color: #fff;
    transform: rotate(90deg);
}

/* --- MODAL GRID --- */
.modal-content-grid {
    display: flex;
    align-items: center;
    gap: 4.5rem;
    direction: rtl;
    padding-right: 10rem;
}
/* Visual Side */
.modal-visual {
    flex: 0 0 19rem;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    padding-bottom: 3rem;
}

.modal-img-container {
    width: 100%;
    overflow: hidden;
    border-bottom-left-radius: 200rem;
    border-bottom-right-radius: 200rem;
    background: #F2F2F2;
}

#modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decorations */
.modal-deco-dot {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.dot-yellow-top {
top: 2.2rem;
    right: -5rem;
    width: 6.5rem;
    height: 6.5rem;
    background-color: #FFC12D;
}

.dot-blue-bottom {
    bottom: 5rem;
    left: -2rem;
    width: 4rem;
    height: 4rem;
    background-color: #4EC6E4;
    z-index: 9;
}

/* Text Side */
.modal-text {
    flex: 1;
    text-align: right;
}

.modal-title {
font-size: 1.5rem;
    font-weight: 700;
}

.modal-subtitle {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.modal-description {
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 300;
    max-width: 30rem;
}
.modal-description p {
	    font-size: 1.1rem;
}
#modal-bio {
    white-space: pre-line;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .modal-content-grid {
        flex-direction: column;
        text-align: center;
            gap: 1.5rem;
    padding-right: 0;
    }

    .modal-visual {
        width: 150px; /* Smaller image on mobile */
    }

    .modal-text {
        text-align: center;
    }
    
    .modal-wrapper {
        padding: 2rem 1.5rem;
        width: 95%;
    }
}


.career-page-wrapper {
    background-color: var(--c-white);
    overflow-x: hidden; 
}
.career-hero-v2 {
    position: relative;
}
.blob-shape.blob-cyan {
    position: absolute;
    bottom: -30rem;
    left: 0;
}
/* --- ЛЕЧЕНИЕ БАГА С ШИРИНОЙ (ОБЯЗАТЕЛЬНО) --- */
.career-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr; /* Текст | Визуал */
    gap: 2rem;
    align-items: center;
    max-width: 100%; /* Ограничиваем грид */
}

/* min-width: 0 спасает от растягивания слайдера в бесконечность */
.ch-content, 
.ch-visual {
    min-width: 0; 
    position: relative;
}
.ch-title {
 font-size: 4rem;
font-weight: 400;
line-height: 100%; 
color: var(--c-purple);
margin: 0;
}
.ch-subtitle {
	 font-size: 2rem;
font-weight: 400;
line-height: 100%; 
color: var(--c-dark);
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.ch-desc p {
    margin-top: 0.75rem;
}
.hero-text-slider {
    max-width: 34rem;
    margin-top: -3rem;
}
.hero-text-slider .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
    background-color: var(--c-dark);
}
.hero-text-slider .slick-dots li button:before {
    display: none;
}
.hero-text-slider .slick-dots li:nth-child(2) button {
    opacity: 0.7;
}
.hero-text-slider .slick-dots li:nth-child(3) button {
    opacity: 0.5;
}
.hero-text-slider .slick-dots li:nth-child(4) button {
    opacity: 0.35;
}
.hero-text-slider .slick-dots li:nth-child(5) button {
    opacity: 0.2;
}
.hero-text-slider .slick-dots {
    bottom: -3rem;
    text-align: right;
}
/* --- НАСТРОЙКА ВИЗУАЛА --- */
.ch-visual {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Все прижимаем к низу */
}

/* 1. СТИЛИ ДЛЯ ВАШЕГО SVG */
svg.blob-purple-svg {
    position: absolute;
    bottom: 0; /* Прижат к низу */
    left: 50%;
    transform: translateX(-50%); /* По центру колонки */
    
    height: 100%; /* Растягиваем на всю высоту блока */
    width: auto;  /* Ширина подстроится пропорционально */
    max-width: none; /* Разрешаем ему быть широким */
    
    z-index: 0; /* На заднем плане */
    overflow: visible; /* Чтобы тени не обрезались */
}

/* Коррекция пути внутри SVG (если нужно двигать саму форму) */
svg.blob-purple-svg path {
    transform-origin: center;
    /* Можно добавить scale или rotate здесь, если форма не идеально ровная */
}

/* 2. СЛАЙДЕР ПОВЕРХ SVG */
.hero-image-slider {
    position: relative;
    z-index: 2; /* Поверх SVG */
    width: 100%;
    height: 100%;
}

.image-slide-item {
    height: 100%;
    display: flex !important;
    align-items: flex-end; /* Девушка стоит на "полу" */
    justify-content: center; /* По центру SVG */
}

.ch-image-wrap {
    position: relative;
    /* Девушка должна быть чуть меньше SVG */
    height: 90%; 
    width: auto;
    display: flex;
    align-items: flex-end;
}

.woman-hero {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Pin корректировка */
.hotspot-pin {
    position: absolute;
    bottom: 25%;
    right: 20%; /* Позиция относительно картинки */
    z-index: 10;
    width: 40px;
    height: 40px;
}

/* АДАПТИВ */
@media (max-width: 992px) {
    .career-hero-grid {
        grid-template-columns: 1fr;
    }
    
    .ch-visual {
        height: 500px; /* Поменьше на мобильных */
        margin-top: 2rem;
    }
    
    svg.blob-purple-svg {
        height: 100%;
        width: 100%; /* На мобильном пусть заполняет ширину */
    }
}

/* --- STORIES SECTION --- */
.stories-section {
    position: relative;
    padding: 7rem 0 8rem;
}

.stories-bg-blob {
    position: absolute;
    bottom: 0; left: 0;
    width: 400px; height: 400px;
    background-color: #B2EBF2;
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    opacity: 0.5;
}

.stories-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.stories-slider {
    position: relative;
    z-index: 2;
    /* Add negative margins to handle slide padding */
    margin: 0 -1rem; 
}
/* Магия выхода за границы */
.stories-slider-wrapper2 {
    /* RTL логика: 
       Правая сторона (начало) остается ровно по контейнеру.
       Левая сторона (конец) тянется до самого края экрана. */
    margin-left: calc(50% - 50vw); 
    width: calc(50vw + 50%);
    
    /* Если вдруг появится скроллбар, скрываем его */
    overflow: hidden; 
}

/* Небольшой отступ между слайдами, если нужно */
.stories-slider .slick-slide {
    margin: 0 0; /* Отступы между карточками */
}

/* Компенсация отступа для контейнера слайдов (чтобы не обрезало тени) */
.stories-slider .slick-list {
    padding: 20px 0; 
    margin: -20px 0;
}
/* Padding for slides so shadows don't get cut off */
.story-slide-wrapper {
    padding: 1rem; 
}

.story-card {
    display: flex;
    flex-direction: column;
}

.video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 3rem;
    overflow: hidden;
    margin-bottom: 1rem;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
    cursor: pointer;
    height: 23rem;
}

.video-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}

.video-thumb:hover img { transform: scale(1.05); }

.play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6rem; height: 6rem;
    background-color: var(--c-pink);
    border: none; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
}

.story-info { text-align: center; }
.employee-name { font-size: 1.3rem; font-weight: 700;margin-bottom: 0rem; }
.employee-role { font-size: 1.1rem; font-weight:300 }

/* Responsive */
@media (max-width: 992px) {
    .career-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-text-slider .slick-dots { justify-content: center; }
    .ch-visual { height: 400px; margin-top: 2rem; }
}


/* --- LIFE AT BABCOM SECTION --- */
.life-at-babcom-section {
    background-color: #D69DD3;
    padding: 9rem 0 6rem;
    overflow: hidden;
}

.life-header {
    margin-bottom: 3rem;
}

.life-title {
    margin: 0;
    font-size: 2.5rem;
font-weight: 400;
line-height: 120%
}

/* Slider Styling */
.life-gallery-slider {
    /* Negative margin to counteract slick slide padding if needed */
    margin: 0 -15px; 
}

/* Individual Slide */
.gallery-slide-item {
    padding: 0 15px; /* Creates the gap between images */
    transition: transform 0.3s ease;
}

.gallery-img-wrap {
    width: 100%;
    border-radius: 3rem;
    overflow: hidden;
}
.direction-vertical .gallery-img-wrap {
    width: 26.8rem;
    height: 31.75rem;
}
.direction-horizontal .gallery-img-wrap {
    width: 26.8rem;
    height: 24.3rem;
}
.gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover Effect */
.gallery-slide-item:hover .gallery-img-wrap img {
    transform: scale(1.05);
}

/* Center Mode Effect (Optional: Make center slide larger) */
.life-gallery-slider .slick-center .gallery-img-wrap {
    transform: scale(1.02); /* Subtle pop for the center item */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .life-at-babcom-section {
        padding: 4rem 0;
    }
    
    .gallery-img-wrap {
        border-radius: 15px;
    }
}


.nc-main-section {
    padding-top: 6rem;
    padding-bottom: 0; /* Image sits on bottom */
    position: relative;
    min-height: 80vh; /* Ensure tall section */
    overflow-x: hidden;
}
.nc-main-section.career-contact-section {
    padding-top: 4rem;
}
.nc-grid {
    display: grid;
    /* Form (Right/Start) | Visual (Left/End) */
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* --- FORM COLUMN --- */
.nc-form-col {
    padding-bottom: 4rem;
    z-index: 2;
}

.nc-title {
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--c-pink);
    line-height: 1;
    margin-bottom: 1rem;
}
.career-contact-section .nc-title {
    font-size: 2.5rem;
    color: var(--c-dark);
}
.career-contact-section .nc-title strong {
    color: var(--c-pink);
}
.career-contact-section .nc-form-container {
    max-width: 33rem;
}
.nc-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 3.25rem;
}

/* CF7 Styles */
.career-contact-form {
    max-width: 42rem;
}
.select2-container--default .select2-selection--single {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px;
    padding: 0.5rem 0;
    height: auto;
    font-size: 1.1rem;
}
/* 1. Change the background color when HOVERING / HIGHLIGHTING an option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--c-pink)!important;
    color: white !important; /* Text color white for readability */
}

/* 2. Change the background color of the option that is ALREADY SELECTED */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--c-pink)!important; /* A slightly darker red to distinguish it */
    color: white !important;
}

/* 1. Target the arrow container inside Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* Hide the default border-based triangle */
    border: none !important;
    
    /* Set dimensions for your icon */
    height: 14px; 
    width: 25px; 
    
    /* Center the icon vertically */
    margin-top: -6px; /* Half of height */
    
    /* 2. Insert your SVG here as a Data URI */
    /* I used a simple Chevron Down here. Replace the 'stroke' color if needed (%23 is #) */
    background-image: url(assets/img/select-arrow.svg);
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Smooth transition for rotation */
    transition: transform 0.2s ease;
}

/* 3. Rotate the arrow when the dropdown is OPEN */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}
.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 0;
    border: none;
    color: #FFB6C1;
}
.wpcf7-not-valid-tip {
    color: #FFB6C1;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 10px;
    left: 1px;
    width: 20px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    direction: rtl;
}
form.wpcf7-form {
    direction: rtl;
}
/* ביטול הרקע הכחול של הדפדפן (Autofill) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    
    /* 1. מגדיר את צבע הטקסט (כי הדפדפן מנסה לשנות אותו לשחור) */
    -webkit-text-fill-color: #000 !important;
    
    /* 2. הטריק: מעכב את שינוי הרקע ב-5000 שניות, כך שהוא נשאר שקוף */
    transition: background-color 5000s ease-in-out 0s;
    
    /* אופציה חלופית: אם את רוצה צבע רקע ספציפי (למשל לבן) במקום שקוף */
    /* -webkit-box-shadow: 0 0 0px 1000px white inset; */
}
.cf7-input {
    background: transparent!important;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #000!important;
    padding: 0.75rem 0.5rem;
    font-size: 1.1rem;
    font-weight: 300;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    direction: rtl !important;
    box-sizing: border-box;
}
.section-contact-hero .cf7-input {
    color: #fff!important;
}
.form-row-half {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.nc-form-container .form-row-half {
    margin-bottom: 0;
}
.field-wrap {
    width: 100%;
    margin-bottom: 1.5rem;
}

.field-wrap label {
    display: block;
    font-size: 1.1rem;
    color: var(--nc-label);
    margin-bottom: 0.5rem;
}

/* Clean Input Style (Underline only) */
.clean-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 1.1rem;
    color: var(--nc-text);
    border-radius: 0;
    transition: border-color 0.3s;
}

.clean-input:focus {
    outline: none;
    border-bottom-color: var(--nc-pink);
}

/* Checkbox */
.legal-wrap {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.legal-wrap input[type="checkbox"] {
    margin-left: 0.5rem;
    accent-color: var(--nc-pink);
    width: 1.2rem;
    height: 1.2rem;
}

/* Submit Button */
.pink-pill-btn {
    background-color: var(--nc-pink);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s, transform 0.2s;
}

.pink-pill-btn:hover {
    background-color: #ad1457;
    transform: translateY(-2px);
}

.arrow-icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* --- VISUAL COLUMN --- */
.nc-visual-col {
    position: relative;
    height: auto; /* Tall container */
    display: flex;
    align-items: flex-end; /* Image sits at bottom */
    justify-content: center;
}

/* Cyan Swoosh SVG */
.cyan-swoosh {
    position: absolute;
    top: 20%;
    left: -20%;
    width: 120%;
    z-index: 0;
    pointer-events: none;
}

.cyan-swoosh svg {
    width: 100%;
    height: auto;
}

/* Man Image */
.man-img-container {
    position: relative;
    z-index: 1;
    width: auto;
    display: flex;
    align-items: flex-end;
}

.man-img-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .nc-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .nc-header {
        margin-bottom: 2rem;
    }

    .career-contact-form {
        margin: 0 auto;
        text-align: right; /* Keep form alignment natural */
    }
    .nc-form-col {
    padding-bottom: 0;
}
    .cyan-swoosh {
        left: -1rem;
        width: 100%;
    }
}

.thank-you-page {
    background-color: #fff;
    min-height: 80vh; /* Ensure full screen feel */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 0;
}

.ty-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Typography */
.ty-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: var(--ty-pink);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.ty-subtitle {
    font-size: 1.5rem;
    color: #555;
    font-weight: 400;
}

/* Graphic */
.ty-graphic {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
}

.smile-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Button */
.btn-back-home {
    display: inline-block;
    margin-top: 2rem;
    color: #999;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
    transition: all 0.3s;
}

.btn-back-home:hover {
    color: var(--ty-pink);
    border-bottom-color: var(--ty-pink);
}

/* =========================================
   SECTION 1: HERO (Right Mask)
========================================= */
.srv-hero-section {
    position: relative;
    height: 100vh;
}

.srv-hero-grid {
    display: grid;
    /* Visual (Right) | Text (Left) in RTL flow */
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    height: 100vh;

}

/* Visual Side */
.srv-hero-visual {
    justify-content: center;
    /* Ensure it stays on the right visually in RTL */
    order: 1; 
    height: 100vh;
    position: relative;
}

.service-mask-container {
    position: relative;
    width: 100%;
    /*max-width: 38rem;
    aspect-ratio: 4 / 3; */
    
    /* CSS MASK MAGIC */
    -webkit-mask-image: url('assets/img/services-mask.png');
    mask-image: url('assets/img/services-mask.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right;
    mask-position: right;
    height: 45rem;
    position: absolute;
}
.type-solutions .service-mask-container {
        -webkit-mask-image: url('assets/img/solutions-mask.png');
    mask-image: url('assets/img/solutions-mask.png');
    height: 33rem;
        -webkit-mask-position: top right;
    mask-position: top right;
}
.img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.service-mask-container:hover .img-fill {
    transform: scale(1.05);
}

/* Text Side */
.srv-hero-content {
    /* Ensure it stays on the left visually in RTL */
    order: 2;
        align-content: center;
}

.srv-main-title {
font-size: 4.5rem;
    font-weight: 400;
    color: var(--c-pink);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    max-width: 43rem;
}
.type-solutions .srv-main-title {
    color: var(--c-cyan);
}
.srv-hero-desc {
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 35rem;
}


/* =========================================
   SECTION 2: CHESS LIST SECTION
========================================= */
.srv-list-section {
    padding: 0 0;
    background-color: var(--c-grey-light); /* Slight background distinction */
    margin-top: 5rem;
        margin-bottom: 14rem;
        position: relative;
}
.services-bg1 {
    position: absolute;
    top: 10rem;
    left: 0;
    opacity: 0.4;
}
.services-bg2 {
    position: absolute;
    top: 70rem;
    right: 0;
    opacity: 0.4;
}
.srv-list-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 80rem;
    margin: 0 auto;
    position: relative;
    z-index: 11;
}

/* --- THE ROW ITEM --- */
.service-row {
    display: flex;
    align-items: center;
    gap: 5rem;
}

/* --- THE CHESS MAGIC --- */
/* Every EVEN child gets reversed flow */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
}
/* ----------------------- */

/* Text Half */
.srv-row-text {
    flex: 1.5;

}

.service-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 0rem;
}

.service-desc {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
        max-width: 36.5rem;
}
.service-desc p {
    margin: 0;
}
.service-link {
    color: var(--c-pink);
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.3s;
}
.service-link:hover {
    gap: 1rem;
}

/* Image Half */
.srv-row-image {
    flex: 0.5;
}

.img-frame {
    position: relative;
    border-radius: 2.5rem;
    width: 22rem;
    height: 22rem;
    text-align: center;
    margin: 0 auto;
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;

        /* === МАСКА === */
    -webkit-mask-image: url('assets/img/rectnge.png');
    mask-image: url('assets/img/rectnge.png');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Этот хак фиксирует маску в памяти GPU, чтобы она не исчезала */
    transform: translate3d(0, 0, 0);
    z-index: 1;
    background-color: transparent; /* На всякий случай */

}

.service-row:hover .img-frame img {
    transform: scale(1.03);
}


/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 992px) {
    /* Hero */
    .srv-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }
    .srv-hero-visual { order: -1; /* Image on top on mobile */ }
    .srv-hero-content { padding-right: 0; order: 2; }
    .service-mask-container { max-width: 90%; margin: 0 auto; }

    /* Chess Section */
    .srv-list-wrapper { gap: 5rem; }
    
    .service-row,
    .service-row:nth-child(even) {
        flex-direction: column-reverse; /* Always stack: Image top, text bottom */
        gap: 2rem;
        text-align: center;
    }

    .service-link {
        justify-content: center;
    }
}

/* --- 404 PAGE PIXEL PERFECT --- */
.error-404-page {
    position: relative;
    background-color: #fff;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    direction: rtl;
    background: url(assets/img/bg-404.png) no-repeat;
    height: 100vh;
}

/* Background */
.e404-bg-decoration {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

.e404-content-wrapper {
    position: relative;
    z-index: 2;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-top: 2rem;
}

/* --- GRAPHIC (404) --- */
.e404-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* Расстояние между цифрами */
    margin-bottom: 4rem;
    line-height: 1;
}

.digit-char {
    font-family: sans-serif; /* Можно подключить Heebo, если есть */
    font-size: 13rem; /* Крупный размер */
    font-weight: 300; /* Тонкий шрифт как на макете */
    color: #333;
    line-height: 1;
    margin-top: -1rem; /* Визуальная коррекция высоты */
}

/* Circle Zero */
.digit-zero-svg {
    width: 11rem;
    height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.digit-zero-svg svg {
    width: 100%; height: 100%;
    /* No borders, plain SVG */
}

/* --- TEXT --- */
.e404-main-title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
}

/* --- BUTTON FIX --- */
.btn-404-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-pink); /* Розовый цвет бренда */
    color: #fff;
    text-decoration: none;
    padding: 0.35rem 0; /* Размер кнопки */
    width: 8rem;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 400;
    transition: all 0.3s ease;
    border: 1px solid var(--c-pink); /* Убираем любые границы */
    gap: 10px; /* Отступ между текстом и стрелкой */
    
}

.btn-404-pill:hover {
    background-color: var(--c-dark);
    transform: translateY(-2px);
    color: #fff;
}

.btn-text {
    /* Текст */
    order: 1; /* В RTL первый элемент справа */
}

.btn-icon {
    /* Иконка */
    order: 2; /* В RTL второй элемент слева */
    display: flex;
    align-items: center;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .digit-char { font-size: 8rem; }
    .digit-zero-svg { width: 7rem; height: 7rem; }
    .e404-main-title { font-size: 1.6rem; }
}

/* --- FULL SCREEN MENU --- */
.fs-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    background-color: var(--c-dark); 
    z-index: 9999999999;
    
    /* State: Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State: Active (Added via JS) */
.fs-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Close Button */
.fs-menu-close {
    position: absolute;
    top: 1rem;
    right: 0rem; /* Right for RTL designs usually, or Left if preferred */
    background: white;
    border: none;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s;
}

.fs-menu-close svg {
    stroke: #333; /* Dark icon on white circle */
}

.fs-menu-close:hover {
    transform: rotate(90deg);
}

/* Background Curve */
.fs-bg-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 70%;
    pointer-events: none;
    z-index: 0;
}

.fs-bg-curve svg {
    width: 100%;
    height: 100%;
}

/* Grid Layout */
.fs-menu-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    align-items: center;
}

/* Left Column: Slogan */
.fs-slogan-col {
    text-align: left; /* English text stays LTR */
    padding-left: 0;
}

.fs-headline {
    font-family: sans-serif;
    font-size: 5.2rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.17;
    opacity: 0;
    transform: translateY(0rem);
    transition: 0.5s ease 0.2s;
    margin: 0;
    font-family: 'ploni', sans-serif;
}

.fs-menu-overlay.is-open .fs-headline {
    opacity: 1;
    transform: translateY(-5rem);
}

/* Right Column: Nav */
.fs-nav-col {
    text-align: right; /* Hebrew Menu RTL */
    padding-right: 10rem;
}

.fs-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fs-link {
    font-size: 2.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-left: auto; /* Align to right */
    transition: color 0.3s;
    position: relative;
    display: inline-block;
    
    /* Animation setup */
    opacity: 0;
    transform: translateX(-30px);
}
.fs-link:visited {
    color: #fff;
}
/* Stagger Animation Loop (handled in CSS for simplicity or JS) */
.fs-menu-overlay.is-open .fs-link {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}
/* Manual delays for pure CSS stagger */
.fs-menu-overlay.is-open .fs-link:nth-child(1) { transition-delay: 0.1s; }
.fs-menu-overlay.is-open .fs-link:nth-child(2) { transition-delay: 0.2s; }
.fs-menu-overlay.is-open .fs-link:nth-child(3) { transition-delay: 0.3s; }
.fs-menu-overlay.is-open .fs-link:nth-child(4) { transition-delay: 0.4s; }
.fs-menu-overlay.is-open .fs-link:nth-child(5) { transition-delay: 0.5s; }
.fs-menu-overlay.is-open .fs-link:nth-child(6) { transition-delay: 0.6s; }
.fs-menu-overlay.is-open .fs-link:nth-child(7) { transition-delay: 0.7s; }
.fs-menu-overlay.is-open .fs-link:nth-child(8) { transition-delay: 0.8s; }
.fs-menu-overlay.is-open .fs-link:nth-child(9) { transition-delay: 0.9s; }
.fs-menu-overlay.is-open .fs-link:nth-child(10) { transition-delay: 1s; }
.fs-link:hover, .fs-link.active {
    color: var(--c-pink); /* Pink Hover */
}
/* 2. Position the SVG at the bottom */
.fs-link svg.active-curve {
    position: absolute;
    bottom: 1.5rem;
    right: -3.5rem;
    width: 2.5rem;
    height: 15px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* 4. Show on Active OR Hover */
.fs-link.active svg.active-curve,
.fs-link:hover svg.active-curve {
    opacity: 1;
}
/* The Pink Smile Underline */
.active-curve {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    opacity: 0;
    transition: opacity 0.3s;
}

.fs-link.active .active-curve,
.fs-link:hover .active-curve {
    opacity: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .fs-menu-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 6rem;
        align-content: flex-start;
    }

    .fs-slogan-col {
        padding-left: 0;
        text-align: center;
        margin-bottom: 3rem;
    }
    
    .fs-nav-col {
        padding-right: 0;
        text-align: center;
    }
    
    .fs-link {
        margin: 0 auto;
        font-size: 1.5rem;
    }

.fs-menu-overlay.is-open .fs-headline {
    transform: translateY(5rem);
    font-size: 3rem;
}
}

.custom-map-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
    direction: rtl;
    background: #fff;
    position: relative;
}

/* Карта */
.map-column {
    flex: 1;
    position: relative;
    background: url(assets/img/map-bg.png) #fff;
    background-size: cover;
    min-height: 600px;
    padding: 5rem 7.5rem 0;
}
.map-svg-container {
    width: 100%;
    height: 100%;
    position: relative;
    width: 972px;
    height: 935px;
}
.map-svg-container > svg {
    display: block;
        width: 100%;
    height: 100%;
}
.map-svg-element {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Пины */
.map-pin {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: 4px solid var(--map-pink);
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 10;
    transition: all 0.3s ease;
}
.map-pin:hover, .map-pin.active {
    background-color: var(--map-pink);
    z-index: 20;
}
.map-pin svg {
    transition: all 0.3s ease;
}
.map-pin:hover svg {
    transform: scale(1.5);
}
.map-pin:hover svg path {
    fill: var(--c-dark);
}
/* Тултип */
.pin-tooltip {
    position: absolute;
    bottom: -5rem;
    right: -2rem;
    transform: translateX(100%) translateY(0%);
    width: 14.4rem;
    background-color: var(--map-dark);
    color: transparent;
    padding: 2.5rem 2.5rem 2rem;
    border-radius: 2rem;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
    border-radius: 40px;
    background: #2F2F2F;
    pointer-events: auto;
}
/* Стрелка тултипа */
.pin-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--map-dark) transparent transparent transparent;
}
.map-pin.active .pin-tooltip {
    opacity: 1;
    visibility: visible;
}
.close-tooltip {
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    z-index: 20;
    font-weight: bold;
    /* padding: 5px; */
}

.close-tooltip:hover {
    color: var(--c-pink);
}
/* Типографика тултипа */
.tooltip-address strong { font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px; color: #fff; margin-bottom:1rem; }
    .tooltip-address h3 {
        margin-bottom: 0.75rem;
        color: #fff;
        font-size: 1.5rem;
    }
.tooltip-address p { font-size: 1.1rem; margin-bottom: 0; color: #fff}
.tooltip-address p {
    margin: 0;
    margin-bottom: 0.25rem;
}
.tooltip-address a {
    color: var(--c-purple);
    font-size: 1.1rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
    display: block;
}
/* Сайдбар */
.sidebar-column {
    width: 36rem;
    background-color: var(--map-bg-sidebar);
    padding: 8rem 7.5rem 0 4.5rem;
    display: flex;
    flex-direction: column;
        background: #E6E6E6;
}
.sidebar-header h1 {
    font-size: 4rem;
    margin: 0 0 0 0;
    /* border-right: 5px solid #333; */
    /* padding-right: 15px; */
    /* color: #333; */
    font-weight: 400;
}
.locations-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
    /* --- Firefox (Стандарт) --- */
    max-height: 32rem;
        padding-left: 2.5rem;
}
/* 1. Ширина всего скроллбара */
.locations-ul::-webkit-scrollbar {
    width: 12px; /* Можно менять (например, 4px или 8px) */
}

/* 2. Фон скроллбара (дорожка) */
.locations-ul::-webkit-scrollbar-track {
    background: #d3d3d3; /* Прозрачный фон или цвет (например, #f1f1f1) */
    border-radius: 3rem;
}

/* 3. Сам ползунок (Thumb) */
.locations-ul::-webkit-scrollbar-thumb {
    background-color: var(--c-dark); /* Ваш оранжевый цвет */
    border-radius: 3rem;       /* Закругление краев */
}
.locations-li {
    padding: 0.75rem 0 0.5rem 0;
    border-bottom: 1px solid var(--c-dark);
    font-size: 1.5rem;
    color: var(--c-dark);
    cursor: pointer;
    transition: all 0.2s;
}
.locations-li:hover, .locations-li.active {
    font-weight: 700;
}

/* Мобайл */
@media (max-width: 768px) {
    .custom-map-wrapper { flex-direction: column-reverse; }
    .sidebar-column {         width: calc(100% - 3rem);
        padding: 5rem 1.5rem 0 1.5rem;}
        .map-column {
        min-height: 400px;
        padding: 10rem 2rem 0;
        zoom: 0.5;
    }
}

.nc-details {
    padding: 80px 0;
    background-color: #fff;
}

.nc-details--grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 60px;
}

.nc-column-title {
    font-family: serif; /* Ваш шрифт заголовков */
    font-size: 28px;
    margin-bottom: 30px;
    color: #000;
}

/* Основной контейнер */
.nc-details {
    background-color: var(--c-pink); /* Малиновый цвет из макета */
    padding: 0;
    color: #fff;
}

/* Сетка для разделения контактов и ссылок */
.nc-details--grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 81rem;
    margin: 0 auto;
    padding: 7rem 0;
    border-bottom: 2px solid #fff;
}

/* --- КОЛОНКА КОНТАКТОВ --- */
.nc-contact-column {
    text-align: right; /* Выравнивание текста */
    flex-shrink: 0; /* Не сжимать контакты */
}

.nc-contact-link {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
}
.nc-contact-item a, .nc-contact-item div, .nc-contact-item p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.36;
}

/* --- КОЛОНКА ССЫЛОК --- */
.nc-links-column {
    flex-grow: 1; /* Занимает оставшееся место */
}

.nc-links-grid {
    display: flex;
    justify-content: flex-end; /* Сдвигаем ссылки к контактам или распределяем */
    gap: 6rem; /* Расстояние между колонками ссылок */
}

.nc-link-block {
    text-align: right;
}

.nc-link-title {
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0 0 1.25rem 0;
}

.nc-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: opacity 0.3s ease, gap 0.3s ease;
}

.nc-arrow-link:hover {
    opacity: 1;
    gap: 0.75rem; /* Анимация стрелки при наведении */
}

.nc-arrow-icon {
    display: flex;
    align-items: center;
}

/* Адаптив для мобильных */
@media (max-width: 991px) {
    .nc-details--grid {
        flex-direction: column;
        text-align: center;
    }

    .nc-links-grid {
        flex-direction: column;
        gap: 30px;
        justify-content: center;
    }
    
    .nc-contact-column,
    .nc-link-block {
        text-align: center;
    }
    
    /* Меняем порядок на мобильном: Контакты вниз */
    .nc-contact-column {
        order: 2;
        margin-top: 40px;
    }
    .nc-links-column {
        order: 1;
        width: 100%;
    }
}

.babcom-thank-you-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh; /* כדי למרכז את זה יפה במסך */
    background-color: #fff;
}

.ty-heading {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--c-pink); 
    margin-bottom: 10px;
    margin: 0;
}

.ty-subheading {
    font-size: 2.5rem;
    margin-bottom: 0;
    margin: 0;
}

.ty-smile-graphic svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.ty-content svg {
    margin-top: -8rem;
}
/* התאמה למובייל */
@media (max-width: 768px) {
    .ty-heading {
        font-size: 40px;
    }
    .ty-subheading {
        font-size: 24px;
    }
    .ty-smile-graphic svg {
        width: 300px; /* מקטין את החיוך במובייל */
    }
}

/* --- PRE-FOOTER CTA SECTION --- */
.pre-footer-cta {
background-color: #2F2F2F;
    padding: 5rem 0 5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-top: 1.5rem solid var(--c-pink);
    min-height: 28.5rem;

}

.cta-grid {
    display: grid;
    /* Текст (Справа) | Визуал (Слева) */
    /* В RTL: 1fr (первая колонка справа) | 1fr (вторая колонка слева) */
    grid-template-columns: 1.2fr 0.8fr; 
    gap: 4rem;
    align-items: center;
}

/* --- TEXT CONTENT --- */
.cta-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
        margin-top: 1.5rem;
}

.cta-title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    max-width: 47rem;
}

.cta-desc {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #fff; /* Светло-серый для текста */
    max-width: 40rem;
}
.cta-desc p {
    margin: 0;
}
.cta-desc p strong {
    font-weight: 700;
}
.cta-bottom-row {
    display: flex;
    flex-direction: column; /* На макете кнопка под текстом */
    gap: 1.5rem;
    margin-top: 0;
    align-items: flex-start; /* Кнопка справа в RTL */
}

.cta-strong {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}

/* КНОПКА */
.cta-btn.btn-pink {
    background-color: #C60063; /* Твой бренд-пинк */
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s ease, transform 0.2s;
    width: auto;
}

.cta-btn.btn-pink:hover {
    background-color: #a00050;
    transform: translateY(-2px);
}

.cta-btn svg {
    /* Разворот стрелки, если нужно, но для RTL "назад" это влево */
    width: 20px;
    height: 20px;
}

/* --- VISUAL GRAPHICS --- */
.cta-visual {
    display: flex;
    justify-content: center; /* Центрируем SVG внутри колонки */
    align-items: center;
    height: 100%;
}
.cta-visual svg {
   left: 0;
    bottom: 0;
    position: absolute; 
}

.cta-graphics {
    width: 100%;
    max-width: 500px; /* Ограничиваем ширину графики */
    height: auto;
    /* Если нужно повернуть или отразить графику, можно использовать transform */
    /* transform: scaleX(-1); */ 
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .cta-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        text-align: center;
        gap: 3rem;
        display: none;
    }
    
    .cta-visual {
        order: -1; /* Графика сверху на мобильном, или убери order, чтобы была снизу */
        /* Или можно скрыть графику на мобильном, если она мешает: display: none; */
        justify-content: center;
    }
    
    .cta-graphics {
        max-width: 300px; /* Уменьшаем графику */
    }

    .cta-bottom-row {
        align-items: center; /* Центрируем кнопку */
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
}
@media (min-width: 1921px) {
.hero-visual-wrapper {
    top: -12rem;
    width: 48.5vw;
}
.woman-img {
    width: 100%;
    object-fit: cover;
    object-position: top;
}
}
@media (max-width: 1680px) {
    body {
        zoom: 0.8;
    }

    /*
    .about-visual-col {
-webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin-x: left;
    -webkit-transform-origin-y: bottom;
}
.section-stats .section-stats--element {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform-origin-x: left;
    -webkit-transform-origin-y: bottom;
}

.overlapping-visual {
    width: 37.5rem;
}
.stats-grid {
    gap: 3.5rem 2.5rem;
    max-width: 50rem;
}
.stat-num {
    font-size: 6.5rem;
}
.stat-suffix {
    font-size: 6.5rem;
}
.contact-bg-wrap svg {
    max-width: 50%;
}
.contact-details a.contact-email {
    font-size: 1.5rem;
}
.service-mask-container {
    height: 45rem;
}
.sidebar-column {
    width: 15rem;
    padding: 8rem 3.5rem 0 4.5rem;
}
.map-column {
    padding: 5rem 5.5rem 0;
}
.custom-map-wrapper {
    flex-wrap: wrap;
}
*/
}

@media (max-width: 1440px) {

}

@media (max-width: 960px) {
        body {
        zoom: 1;
    }
    .contact-bg-wrap {
    display: none;
}
.section-stats .section-stats--element {
    top: -15rem;
    max-width: 70%;
}
    .container,
    .blog-wrapper .container, .single-post .container {
        width: 100%;
        padding: 0 1rem;
    }
.contact-details {
    text-align: center;
}
.hero-content {
    grid-column: 1;
    margin-bottom: 5rem;
}
.hero-visual-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        right: auto;
        margin-top: 7rem;
        top: 0;
    }
    .custom-mask-slider {
    height: 400px;
}
.custom-mask-slider .mask-slide {
    transform: scale(1.4);
}
.hero-title {
    font-size: 3.5rem;
}
.section-title {
    font-size: 3rem;
}
.career-content .section-desc {
    padding: 0 1rem;
}
.nav-links-section {
    padding: 2.5rem 0 7rem;
}
.srv-list-section {
    margin-top: 0;
}
.srv-hero-section,
.srv-hero-grid {
    position: relative;
    height: auto;
}
.srv-hero-visual {
    height: 650px;
}
.pre-footer-cta {
    padding: 0rem 0 3rem;
    height: auto;
}
.srv-list-section {
    margin-bottom: 7rem;
}
.quote-slider-container {
    padding-right: 0;
    border-right:none;
}
.nc-details--grid {
    align-items: center;
}
    .ch-visual {
        height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .blob-shape.blob-cyan {
    display: none;
}
.hero-text-slider {
    padding: 0 1rem;
    width: calc(100% - 2rem);
}
.contact-details a.contact-email {
    font-size: 1.5rem;
}
.sticky-wrapper {
    height: 22.5rem;
    width: 100%;
}
.cust-title {
    font-size: 2.5rem;
}
.single-post .cust-subtitle {
    font-size: 1.5rem;
}
.cust-hero-section {
    background: var(--c-pink);
}
.blog-filters-list {
    gap: 3.5rem;
}
}

/* --- Tabs Container --- */
.custom-tabs-nav {
    display: flex;
    justify-content: start; /* Center tabs (or use flex-start for right align) */
    gap: 6rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #000; /* The gray line below tabs */
    padding-bottom: 1rem;
    position: relative;
    margin-top: 1rem;
}

/* --- Tab Buttons (Text Style) --- */
.tab-link {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
}

/* --- Active State (Pink) --- */
.tab-link.active,
.tab-link:hover {
    color: var(--c-pink); /* The specific pink from your image */
    font-weight: 700;
}

/* --- Tab Panes (The Content) --- */
.tab-pane {
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tab-pane.active {
    display: block; /* Visible when active */
    opacity: 1;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .custom-tabs-nav {
        gap: 20px;
        flex-wrap: wrap;
    }
    .tab-link {
        font-size: 16px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* База */
.babcom-blog-container { position: relative; padding: 0 0 12rem; }

/* Фильтры */
.blog-filters-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3.5rem 0;
    display: flex;
    justify-content: flex-start; /* Или center */
    gap: 6.5rem;
    border-bottom: 1px solid var(--c-dark);
}

.filter-link {
    text-decoration: none;
    color: var(--c-dark);
    font-size: 1.3rem;
    font-weight: 400;
    padding-bottom: 1rem;
    display: block;
    position: relative;
    transition: color 0.3s;
}

.filter-link:hover, .filter-link.active {
    color: var(--c-pink); /* Ваш розовый */
    font-weight: 700;
}

/* Сетка */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

/* Карточка */
.post-card {
    background: #F2F2F2;
    border-radius: 25px;
    overflow: hidden;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}
.post-card:hover { transform: translateY(-5px); }

.card-image { height: 17rem; background: #F2F2F2; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }

.card-content { padding: 2.5rem 2rem; display: flex; flex-direction: column; flex-grow: 1; }

.card-date {
    color: var(--c-pink);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.65rem;
}

.card-title {
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0 0 0.65rem 0;
    font-weight: 400;
}
.card-title a { text-decoration: none; color: var(--c-dark); }

.card-excerpt {
    font-size: 1.1rem;
    color: var(--c-dark);
    margin-bottom: 0.65rem;
    flex-grow: 1;
}

.read-more-btn {
    color: var(--c-pink);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
        font-size: 1.1rem;
}
/* 1. Добавляем плавность самой иконке */
.read-more-btn svg {
    transition: transform 0.3s ease; /* Плавный переход */
}

/* 2. При наведении на кнопку сдвигаем иконку */
.read-more-btn:hover svg {
    /* -5px сдвинет влево (для RTL). Если нужно вправо, уберите минус */
    transform: translateX(-5px); 
}
/* Пагинация */
.blog-pagination ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    margin-top: 3rem;
}

.blog-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--c-dark);
    text-decoration: none;
    font-weight: 400;
    transition: 0.3s;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    color: var(--c-pink);
}

/* Адаптив */
@media(max-width: 992px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } .blog-filters-list { overflow-x: auto; }}


/* --- Split Layout Container --- */
.split-layout {
    display: flex;
    gap: 60px; /* Расстояние между текстом и картинкой */
    align-items: flex-start; /* ВАЖНО: без этого sticky не сработает! */
    position: relative;
}

/* 1. Content Column (Right in RTL) */
.post-content-column {
    flex: 1; /* Занимает все свободное место */
    width: 55%; /* Примерная ширина контента */
}

/* Стили текста */
.single-post-excerpt {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 30px;
}

.entry-content {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}
.entry-content p {
    margin-bottom: 1rem;
    font-weight: 400;
}
.entry-content p:first-child {
    margin-top: 0;
}

/* 2. Image Column (Left in RTL) */
.post-image-column {
    width: 45%; /* Ширина колонки с картинкой */
    max-width: 33rem;
    position: relative; /* Для контекста sticky */
}

/* В файле style.css */
.sticky-wrapper {
    /* position: sticky;  <-- УДАЛИТЬ ЭТО */
    /* top: 40px;         <-- УДАЛИТЬ ЭТО */
}
.sticky-wrapper {
    height: 37.5rem;
    width: 33rem;
}
.sticky-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Оставляем только Flex настройки для родителя */
.split-layout {
    display: flex;
    gap: 8rem;
    align-items: flex-start; /* Важно для GSAP тоже */
    position: relative;
}

.featured-image {
    width: 100%;
    height: auto;
    border-radius: 30px; /* Скругление как на макете */
    display: block;
}
.post-body-section {
    padding-top: 5.5rem;
}

/* --- Mobile Responsive --- */
@media (max-width: 992px) {
    .split-layout {
        flex-direction: column; /* Столбиком */
        gap: 30px;
    }

    .post-content-column,
    .post-image-column {
        width: 100%;
        max-width: 100%;
    }
.sticky-wrapper {
    height: 22.5rem;
    width: 100%;
}
    /* На мобильном картинку лучше поднять НАД текстом */
    .post-image-column {
        order: -1; 
    }
    
    /* На мобильном sticky обычно отключают, или меняют top */
    .sticky-wrapper {
        position: static; 
    }
    .newsletter-grid {
    gap: 2rem;
}
.newsletter-section {
    padding-bottom: 5rem;
}
.share-container {
    margin-bottom: 5rem;
    margin-top: 2rem;
}
.share-icons {
    gap: 1rem;
}
}

/* --- Share Section --- */
.share-container {
    margin-bottom: 10rem;
    display: flex;
    justify-content: flex-start;
    margin-top: 6rem;
}
.share-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.share-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
}

.share-icons {
    display: flex;
    gap: 1.5rem;
}

.share-btn {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--c-pink); /* Ваш розовый */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, background-color 0.3s;
}

.share-btn:hover {
    transform: translateY(-3px);
    background-color: #b00f48;
}

/* --- Newsletter Section --- */
.newsletter-section {
    background-color: #f2f2f2; /* Серый фон как на макете */
    padding: 0 0;
    margin-bottom: 7rem;
}

.newsletter-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7rem;
}

.newsletter-content {
    flex: 1;
    max-width: 43rem;
}

.nl-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.nl-title .highlight {
    color: var(--c-pink); /* Розовый акцент */
}

/* Форма */
.nl-form .input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.nl-form input[type="email"] {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 50px; /* Круглые поля */
    font-size: 16px;
    outline: none;
}

.nl-submit-btn {
    background-color: #D4145A;
    color: #fff;
    border: none;
    padding: 0 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s;
}

.nl-submit-btn:hover {
    background-color: #b00f48;
}

.nl-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #777;
    cursor: pointer;
}

.nl-terms input {
    accent-color: #D4145A;
}

/* Newsletter Visual (Image) */
.newsletter-visual {
    flex: 1;
}

.nl-image {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Related Posts Section --- */
.related-posts-section {
    margin-bottom: 10rem;
}

.related-title {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 3rem;
    /* text-align: right; - для RTL это дефолт */
}

/* Сетка такая же как в блоге */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .newsletter-grid {
        flex-direction: column-reverse; /* Картинка сверху или снизу */
        text-align: center;
    }
    
    .newsletter-content {
        width: 100%;
    }
    
    .nl-form .input-group {
        flex-direction: column;
    }
    
    .nl-submit-btn {
        padding: 15px;
        justify-content: center;
    }

    .related-grid {
        grid-template-columns: repeat(1, 1fr); /* Одна колонка на мобильном */
    }
}

section#jobs-banner {
    padding: 14rem 0 5rem;
}
.page-template-page-jobs .team-header {
    padding: 6rem 0 6rem
}
.page-template-page-jobs .page-subtitle {
    max-width: 40.35rem;
}
.page-template-page-jobs .page-subtitle p {
    margin-top: 0;
}
/* --- Поле Email (Верх) --- */
.babcom-newsletter .nl-input-group {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #000;
}

.babcom-newsletter input[type="email"] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem 0;
    font-size: 1.1rem; /* Крупный шрифт как в дизайне */
    color: #000;
    outline: none;
    text-align: right;
    font-family: var(--font-main);
    font-weight: 300;
}

.babcom-newsletter input[type="email"]::placeholder {
    color: #000;
}
.babcom-newsletter {
    margin-top: 0.5rem;
}
/* --- Нижняя строка (Flexbox) --- */
.babcom-newsletter .nl-footer-row {
    display: flex;
    justify-content: space-between; /* Распределяет по краям */
    align-items: center; /* Центрирует по вертикали */
    gap: 2.25rem; /* Расстояние между текстом и кнопкой */
}

/* --- Блок с условиями (Справа) --- */
.babcom-newsletter .nl-terms-group {
    flex: 1; /* Занимает все свободное место */
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--c-dark);
}

/* Настройки чекбокса внутри Contact Form 7 */
.babcom-newsletter .wpcf7-list-item {
    margin: 0;
    display: flex;
    gap: 1rem;
}

.babcom-newsletter input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid #333;
    border-radius: 4px;
    margin-top: 2px;
    flex-shrink: 0; /* Чтобы чекбокс не сплющило */
    accent-color: #333;
    font-family: var(--font-main);
}

/* --- Кнопка (Слева) --- */
.babcom-newsletter .nl-submit-group {
    flex-shrink: 0; /* Кнопка не сжимается */
}

.babcom-newsletter .nl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--c-pink); /* Твой розовый цвет */
    color: #fff;
    border: none;
    border-radius: 2.5rem;
    padding: 0.95rem 1.85rem 0.85rem; /* Большие отступы */
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
    line-height: 1;
    font-family: var(--font-main);
}

.babcom-newsletter .nl-btn:hover {
    background-color: var(--c-dark);
}
.simple-content {
	padding-top: 10rem
}
/* --- Адаптив (Мобильный) --- */
@media (max-width: 768px) {
    .babcom-newsletter .nl-footer-row {
        flex-direction: column; /* На телефоне ставим друг под другом */
        gap: 20px;
    }
    .simple-content {
	padding-top: 5rem
}
    .babcom-newsletter .nl-submit-group {
        width: 100%;
    }
    
    .babcom-newsletter .nl-btn {
        width: 100%;
        justify-content: center;
    }
    .home .container, header .container {
    width: 100%;
}
.form-row.legal-row p {
    flex-direction: column;
}
.wpcf7-form-control-wrap {
    width: calc(100% - 0rem);
    text-align: right;
}
section#jobs-banner {
    padding: 4rem 0 1rem;
}
.fs-link svg.active-curve {
    bottom: 0.75rem;
    right: -3rem;
    width: 2rem;
}
.fs-bg-curve {
    height: 20%;
    width: 92%;
}
.section-solutions {
    padding: 3.5rem 0 5rem;
}
.section-actions-grid {
    padding-top: 3rem;
}
/* Target the last item */
.nodes-container > :last-child {
    grid-column: 1 / -1; /* Span from first line to last line (full width) */
    margin: 0 auto; /* Center the item itself if width < 100% */
}
.sol-node {
    zoom: 0.8;
    margin: 0 auto;
    display: block;
}
.pink-circle-btn .btn-text {
    font-size: 1.5rem;
}
.contact-title {
    font-size: 3rem;
}
.section-contact-hero {
    padding-bottom: 3rem;
}
.footer-bottom-bar {
    flex-direction: column-reverse;
    gap: 1rem;
}
.footer-large-logo-wrap {
    margin-bottom: 3rem;
    margin-top: 2rem;
}
.col-title {
    margin-bottom: 0;
}
    .stat-num {
        font-size: 3.5rem;
    }
        .stat-suffix {
        font-size: 3.5rem;
    }
    .section-stats {
    padding: 18rem 0 4rem;
}
    .stats-grid {
        gap: 2rem 3rem;
    }
    .about-title {
    font-size: 3.5rem;
}
.nav-title {
    font-size: 2rem;
}
.srv-main-title {
    font-size: 3.5rem;
}
    .srv-hero-visual {
        height: 300px;
    }
        .srv-hero-content {
        padding: 0 1rem;
    }
    .custom-tabs-nav {
    margin-bottom: 0;
}
    .tab-link {
        font-size: 1.1rem;
    }
    .service-mask-container {
    height: 17rem;
}
a.logo {
    max-width: 200px;
}
.footer-large-logo {
    max-width: 300px;
}
    .container, .blog-wrapper .container, .single-post .container {
        box-sizing: border-box;
    }
    .btn {
    font-size: 1rem;
    width: 9.6rem;
}
.hero-buttons {
    gap: 0.4rem;
}

.nc-title {
    font-size: 3.5rem;
}
.sidebar-header h1 {
    font-size: 2.5rem;
}
.sidebar-column {
        width: 100%;
    }
    .map-svg-container {
    zoom: 0.7;
}
.team-header .page-title {
    font-size: 3.5rem;
}
.team-card {
    height: 22rem;
}
.adam-accordion-wrapper {
    flex-direction: column;
    padding: 0 1rem;
}
.ch-title {
    font-size: 3rem;
}
.hero-text-slider .slick-dots {
    text-align: center;
}
.direction-horizontal .gallery-img-wrap {
    width: 16.8rem;
    height: 14.3rem;
}
.direction-vertical .gallery-img-wrap {
    width: 16.8rem;
    height: 18.3rem;
}
.stories-section {
    padding: 7rem 0 4rem;
}
}
/* Глобальный сброс для всех элементов сайта */
*, *::before, *::after {
    box-sizing: border-box;
}