/* Нулиране на настройките */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #0a0a0a;
    color: white;
    line-height: 1.6;
}

/* Навигация (Гъвкава и подравнена отляво) */
.navbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 40px 10%; /* Използваме проценти (10%), за да е винаги на едно и също разстояние от ръба, независимо от екрана */
    z-index: 10;
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: #555555;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500; 
    transition: 0.3s;
}

.nav-links a:hover {
    color: white;
}

/* Hero Секция (Разделяне 50/50) */
.hero {
    display: flex;
    width:100%;
    height: 100vh;
}

/* Hero Секция (Разделяне 50/50) */
.hero {
    display: flex;
    width: 100%;       /* Гарантираме, че заема 100% от екрана */
    height: 100vh;
}

/* 1. Основният контейнер (Лявата част с текста) */
.hero-content {
    width: 50%;        /* ЗАКОВАВАМЕ НА 50% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;     /* Намалихме малко отстоянието, за да диша текста */
    box-sizing: border-box; /* МАГИЯТА: Пречи на padding-a да разширява кутията над 50% */
    
    /* ТУК Е МАГИЯТА С ДВАТА СЛОЯ: */
    background-image: url('waves.png'), url('rectangleback.jpg');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-color: #111; 
    color: white; 
}
/* 2. Дясната част със снимката */
.hero-image {
    position: relative;
    overflow: hidden; /* Изрязва видеото, ако е по-голямо */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Това прави видеото да запълва цялото място без да се разтяга */
}

/* Оправяме и бутона, за да не е разтегнат */
.btn {
    display: block;
    width: fit-content; /* Свива бутона само до текста */
    background-color: white;
    color: black;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
}

.hero-image {
    flex: 1;
    background: url('') no-repeat center center;
    background-size: cover;
}

/* Текстове */
h1 {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.role {
    color: #888;
    margin-bottom: 30px;
}

.description {
    max-width: 450px;
    color: #ccc;
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    background: white;
    color: black;
    padding: 14px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255,255,255,0.1);
}

/* Футър */
.footer {
    display: flex;
    justify-content: space-between;
    padding: 100px 10%;
    background: #000;
    border-top: 1px solid #222;
}

.footer-col h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-col p, .footer-nav a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
}

.footer-nav {
    list-style: none;
}

/* Адаптивност за мобилни телефони */
@media (max-width: 900px) {
    .hero { flex-direction: column; height: auto; }
    .hero-content { padding: 120px 20px 60px; }
    .hero-image { height: 400px; }
    .footer { flex-direction: column; gap: 50px; }
}
/* Footer video */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    
    /* МАГИЯТА: */
    background: linear-gradient(to bottom, rgba(0,0,0, 0.9) 0%, rgba(0,0,0, 0) 100%);
    
    padding: 30px 10%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   ABOUT ME PAGE STYLES (ПЕРФЕКТНА МРЕЖА)
   ========================================= */

body.about-page {
    background-image: url('waves.png'), url('rectangleback.jpg');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-attachment: fixed, fixed; 
    background-color: #222022; 
    color: #F2EFED;
    margin: 0;
    overflow-x: hidden; /* Спира всякакво скролване настрани! */
}

/* Главен контейнер - използва 10% отстояние отляво и отдясно, за да съвпадне с логото */
.about-container {
    width: 100%;
    box-sizing: border-box;
    padding: 180px 10% 150px; 
    display: flex;
    flex-direction: column;
    gap: 120px; 
}

/* Редовете, които държат съдържанието */
.hero-row, .content-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

/* ЛЯВА КОЛОНА (Снимка и етикети) - държи линията под логото */
.hero-left, .content-left {
    width: 35%; 
    flex-shrink: 0;
}

/* ДЯСНА КОЛОНА (Текст и Грид) - има достатъчно място да диша */
.hero-right, .content-right {
    width: 58%; 
    flex-shrink: 0;
}

/* Снимката на Максим */
.profile-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Леко заобляне за стил */
}

/* --- ТЕКСТОВЕ "ABOUT ME" --- */
.hero-right h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 40px;
    margin: 0 0 30px 0;
    color: #F2EFED;
}

.hero-right p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 25px 0;
}

.hero-right p:last-child {
    margin-bottom: 0;
}

/* Етикети вляво ("Design Philosophy:") */
.section-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    margin: 0; 
}

/* Големият манифест */
.manifesto {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.35; 
    letter-spacing: -1px;
    color: #FFFFFF;
    margin: 0 0 60px 0;
}

/* --- МРЕЖА ЗА ФИЛОСОФИЯ (С ПРАВИТЕ ЛИНИИ) --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px; /* Красиво разстояние между колоните */
    row-gap: 60px;
}

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

/* Номерата (01, 02) и пунктираната линия */
.val-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    padding-bottom: 12px;
    margin-bottom: 20px;
    /* Ето тук е разликата. Сменяме 'dashed' на 'solid' */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); 
    width: 100%; 
}

.value-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}

.value-card p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.8; 
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* --- КОНТАКТИ --- */
.contact-line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin-bottom: 10px;
}

/* =========================================
   ABOUT ME: FIGMA EXACT CONTACTS (FULL)
   ========================================= */

.contact-figma-layout {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    
    /* ТОЧНАТА ШИРИНА ОТ FIGMA (Group 633927) */
    width: 1380px; 
    max-width: 95%; /* Защита за малки екрани */
    
    /* ЦЕНТРИРАНЕ НА БЛОКА */
    margin: 0 auto; 
    
    /* ТОЧНИТЕ ОТСТОЯНИЯ (PADDING) ОТ FIGMA (Footer details) */
    padding: 20px 30px 21px; 
    box-sizing: border-box; /* Гарантира, че padding-ът не раздува ширината */

    /* ЛИНИИТЕ, КОИТО СЕГА ЩЕ БЪДАТ "ИЗРЯЗАНИ" ДО 1380px */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Лявата част - текстът вече е на 2 реда */
.contact-text-box {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
}

.contact-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px; /* Леко разстояние между етикета и имейла */
}

.figma-email-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.76px;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.figma-email-link:hover {
    opacity: 0.7;
}

/* Средната част - Стрелката и Професиите */
.contact-roles-box {
    display: flex;
    align-items: center;
    gap: 12px; /* Разстояние между стрелката и текста */
}

.roles-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.76px;
    color: #FFFFFF;
}

/* Дясната част - Кутиите с иконки */
.contact-icons-box {
    display: flex;
    height: 84px;
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* ТОВА Е ПОСЛЕДНАТА ЗАТВАРЯЩА ЛИНИЯ | */
}

.social-grid-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 138px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* ЛИНИИТЕ МЕЖДУ ИКОНКИТЕ | */
    transition: background-color 0.3s ease;
    color: #FFFFFF;
}

.social-grid-box:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.social-grid-box svg {
    transition: transform 0.3s ease;
}

.social-grid-box:hover svg {
    transform: scale(1.1);
}
/* =========================================
   ALL PROJECTS PAGE (FIGMA GRID)
   ========================================= */

body.projects-page {
    background-image: url('waves.png'), url('rectangleback.jpg'); /* Връщаме двата файла */
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-attachment: fixed, fixed; 
    margin: 0;
}


/* Контейнерът поддържа 10% отстояние, за да е заглавието в линия с логото */
.projects-container {
    width: 100%;
    padding: 180px 10% 150px; 
    box-sizing: border-box;
}

.projects-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 32px;
    margin-bottom: 80px; /* Разстояние до снимките */
    color: #FFFFFF;
}

/* Този wrapper избутва самата мрежа със снимките в абсолютния център на екрана */
.projects-grid-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Перфектната мрежа: 2 колони по 348px, 80px дупка между тях */
.projects-grid {
    display: grid;
    grid-template-columns: 348px 348px;
    column-gap: 80px;
    row-gap: 120px;
}

/* Всяка карта (Линк) */
.project-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрира текстовете под снимката */
    text-decoration: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-8px); /* Лек левитиращ ефект при посочване */
}

/* Кутията за снимката (198px висока според Figma) */
.card-img-box {
    width: 348px;
    height: 198px;
    margin-bottom: 20px; /* Разстояние до заглавието */
    border-radius: 4px; /* Леко заобляне */
    overflow: hidden;
    background-color: #1A1A1A; /* Тъмен гръб, докато зареди снимката */
}

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

/* Плейсхолдер за празните проекти (Цвят #D9D9D9 от Figma) */
.card-img-box.placeholder {
    background-color: #D9D9D9; 
}

/* Заглавие на проекта */
.project-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 5px 0;
    text-align: center;
}

/* Категория на проекта */
.project-card p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}
/* =========================================
   PROJECT PAGE STYLES (The Golden Circle)
   ========================================= */

body.project-page {
    background-color: #222022;
    color: #FFFFFF;
    /* Отново слагаме вълните за консистентност */
    background-image: url('waves.png'), url('rectangleback.jpg');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-attachment: fixed, fixed;
}

/* Универсален контейнер, който държи съдържанието центрирано като във Figma */
.content-block {
    max-width: 691px;
    margin: 0 auto;
    padding: 60px 20px;
}

.project-intro h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 20px;
}

.project-intro p, .project-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.54;
}

.project-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 20px;
}

/* Мета данни */
.project-meta {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-top: 0;
}

.meta-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 5px;
}

.meta-col p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

/* Главна снимка */
.project-hero-image img, .project-website img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.25);
}

/* Специален шрифт */
.alt-font {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 30px;
}

.blue-text {
    color: #0084E4;
}

/* Градиентни секции */
/*.project-gradient-section {
    background: linear-gradient(180deg, #0082E3 0%, #FFD900 100%);
    padding: 60px 0;
}
*/
.project-social-media {
    background: linear-gradient(180deg, #0182E3 0%, #FFD900 100%);
    padding: 80px 0;
}

.image-grid-abstract, .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.social-grid img, .image-grid-abstract img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.48);
}

/* Зелена секция за мачовете 
/.project-fight-cards {
    background-color: #158948;
    padding: 60px 0;
}
*/
.fight-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    text-align: center;
}

.fight-col h3 {
    margin-bottom: 15px;
}

.fight-col img {
    box-shadow: 0px 4px 20px 3px rgba(0, 0, 0, 0.53);
    border-radius: 8px;
}

/* Бутон Go Back */
.go-back-wrapper {
    text-align: center;
    padding: 40px 0 80px;
}

.go-back-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    transition: 0.3s;
}

.go-back-btn:hover {
    color: #FFD900;
    border-color: #FFD900;
}
/* =========================================
   PROJECT PAGE: RUSTBERRY (691px GRID)
   ========================================= */

/* Основният контейнер за проекта */
.rustberry-project .project-content-691 {
    max-width: 691px;
    margin: 0 auto;
    padding: 180px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Разстояние между блоковете */
}

/* Снимки на цяла ширина */
.rustberry-project .full-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.2);
}

/* Заглавия и Текстове */
.rustberry-project h1, .rustberry-project h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 25px;
    color: #FFFFFF;
}

.rustberry-project p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.54;
    color: #FFFFFF;
}

/* Мета данни */
.rustberry-project .project-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.rustberry-project .meta-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 5px;
}

.rustberry-project .meta-col p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

/* Слята мрежа (50/50) */
.khan-grid-flush {
    display: flex;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.khan-grid-flush img {
    object-fit: cover;
}

/* Bento Grid (Яке и Кафе) */
.khan-bento-grid {
    display: flex;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.bento-left img, .bento-right img {
    height: 100%;
    object-fit: cover;
}

/* Бутон Go Back */
.go-back-wrapper {
    text-align: center;
    padding-top: 40px;
}

.go-back-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    transition: 0.3s;
}

.go-back-btn:hover {
    color: #FFD900;
    border-color: #FFD900;
}
/* =========================================
   RUSTBERRY: СНИМКИ ЕДНА ПОД ДРУГА С РАЗСТОЯНИЕ
   ========================================= */

.bento-columns {
    display: flex;
    flex-direction: column; /* ТОВА ги връща една под друга! */
    gap: 40px; /* Разстоянието между двете снимки (можеш да го намалиш на 20px, ако искаш да са по-близо) */
    width: 100%; 
}

.bento-columns img {
    width: 100%; 
    height: auto;
    display: block;
    border-radius: 4px; /* Заоблянето */
    box-shadow: 0px 4px 20px rgba(0,0,0,0.2); /* Сянката */
}
/* =========================================
   PROJECT PAGE: KHAN BURGER (SPECIFIC STYLES)
   ========================================= */

/* Основен контейнер за текстове и снимки (Центриран на 691px ширина като във Figma) */
.project-content-691 {
    max-width: 691px;
    margin: 0 auto;
    padding: 180px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Разстояние между различните секции/снимки */
}

/* Типография за проекта */
.project-intro h1, .project-text-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 25px;
    color: #FFFFFF;
}

.project-intro p, .project-text-section p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 31px; /* 154% */
    color: #FFFFFF;
}

/* Мета данни */
.project-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.meta-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 5px;
    color: #FFFFFF;
}

.meta-col p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   ИЗОБРАЖЕНИЯ И "СЛЕПЕНИ" МРЕЖИ (FLUSH GRIDS)
   ========================================= */

.full-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Гъвкав контейнер за залепени снимки */
.khan-grid-flush {
    display: flex;
    width: 100%;
}

.khan-grid-flush img {
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Пропорция: 300px (Фасада) и 391px (Камион) */
.col-43-57 img:first-child { width: 43.4%; }
.col-43-57 img:last-child { width: 56.6%; }

/* Пропорция: 415px (Табела) и 277px (Престилка) */
.col-60-40 img:first-child { width: 60%; }
.col-60-40 img:last-child { width: 40%; }

/* Вертикално слепени снимки (Asset 3 и 4) */
.khan-grid-flush.vertical {
    flex-direction: column;
}

.khan-grid-flush.vertical img {
    width: 100%;
    height: auto;
}

.red-border {
    border: 2px solid #D7263D;
    box-sizing: border-box;
}

/* =========================================
   BENTO МРЕЖИ (1 Голяма снимка + 2 Малки)
   ========================================= */
.khan-bento-grid {
    display: flex;
    width: 100%;
}

.bento-left {
    flex: 0 0 57%; /* Торбата / Доставчикът */
}

.bento-right {
    flex: 0 0 43%; /* Малките кутии вдясно */
    display: flex;
    flex-direction: column;
}

.bento-left img, .bento-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   ЦВЕТОВА ПАЛИТРА
   ========================================= */
.khan-colors {
    display: flex;
    justify-content: flex-end; /* Избутва ги вдясно като на дизайна */
    width: 100%;
    margin-top: -40px; /* Приближава ги до горната снимка */
}

.color-box {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ruslan Display', cursive; /* Шрифтът от дизайна */
    font-size: 14px;
}
/* =========================================
   СПЕЦИФИЧЕН BENTO GRID ЗА ФАСАДАТА И КАМИОНА
   ========================================= */
.khan-bento-43-57 {
    display: flex;
    width: 100%;
}

.khan-bento-43-57 .bento-col-left {
    flex: 0 0 43.4%; /* Точната ширина на фасадата (300px от 691px) */
}

.khan-bento-43-57 .bento-col-right {
    flex: 0 0 56.6%; /* Точната ширина на камиончето (391px от 691px) */
    display: flex;
    flex-direction: column; /* Реди камиончето и менюто едно под друго */
}

/* Гарантираме, че всички снимки вътре запълват плътно кутиите си */
.khan-bento-43-57 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* =========================================
   PROJECT PAGE: ETHERE BEAUTY (SPECIFIC STYLES)
   ========================================= */

/* Цветова палитра */
.ethere-colors {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: -20px;
    margin-bottom: 40px;
}

.color-item {
    text-align: center;
    flex: 1;
}

.color-swatch {
    width: 100%;
    aspect-ratio: 1 / 1; /* Прави ги перфектни квадрати */
    border-radius: 4px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.color-item p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
    color: #F5F5F3;
    margin: 0;
}

.color-item p span {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

/* Типография секция */
.ethere-typography {
    display: flex;
    flex-direction: column;
    gap: 50px;
    background-color: #1A1919; /* Лек контраст с основния фон */
    padding: 50px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.type-block h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.type-letters {
    font-size: 40px;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.type-uppercase, .type-lowercase {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.type-uppercase {
    text-transform: uppercase;
}

/* Специфични шрифтове за блоковете */
.type-block.playfair h3, .type-block.playfair .type-letters, .type-block.playfair p {
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
}

.type-block.montserrat h3, .type-block.montserrat .type-letters, .type-block.montserrat p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
/* =========================================
   PROJECT PAGE: STELLAR ESTATES (SPECIFIC STYLES)
   ========================================= */

/* Перфектно 50/50 разделение за две снимки, слепени една за друга */
.stellar-grid-50-50 {
    display: flex;
    width: 100%;
}

.stellar-grid-50-50 img {
    width: 50%; /* Всяка снимка заема точно половината */
    height: auto;
    object-fit: cover;
    display: block;
}
/* =========================================
   PROJECT PAGE: KIBBLESS (BENTO GRIDS)
   ========================================= */

/* Билборд секцията (Вектори + Снимка) */
.kibbless-bento-billboard {
    display: flex;
    width: 100%;
}
.bento-vectors {
    width: 215px; /* Разликата до 691px */
    display: flex;
    flex-direction: column;
}
.vector-swatch {
    flex: 1;
    width: 100%;
}
.bento-billboard {
    width: 476px;
}
.bento-billboard img {
    width: 100%;
    display: block;
}

/* Bento 500px + 191px */
.kibbless-bento-500-191 {
    display: flex;
    width: 100%;
}
.bento-main {
    width: 500px;
}
.bento-side {
    width: 191px;
    display: flex;
    flex-direction: column;
}
.bento-main img, .bento-side img {
    width: 100%;
    display: block;
}

/* Bento 416px + 277px */
.kibbless-bento-416-277 {
    display: flex;
    width: 100%;
}
.bento-left-img {
    width: 416px;
}
.bento-right-img {
    width: 277px;
}
.kibbless-bento-416-277 img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   PROJECT PAGE: SU BUILD SPECIFIC
   ========================================= */

/* Перфектна 2х2 мрежа за четирите мокъпа на SU Build */
.subuild-mockups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равни колони */
    gap: 20px; /* Разстояние между снимките */
    width: 100%;
}

.subuild-mockups-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.2);
    display: block;
}


/* =========================================
   NEW MODERN FOOTER (FIGMA BASED)
   ========================================= */
.site-footer {
    background-color: #121212;
    border-top: 2px solid #211E1C;
    padding: 50px 0 0 0;
    width: 100%;
    margin-top: 80px; /* Разстояние от съдържанието */
}

.footer-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 50px;
}

/* Колони */
.footer-col {
    display: flex;
    flex-direction: column;
}

/* Лого и Услуги */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 25px;
}

.footer-services {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.services-list {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 21px;
    letter-spacing: -0.76px;
    color: #FFFFFF;
}

/* Контакти и Имейл */
.footer-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.footer-email {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin-bottom: 20px;
    transition: 0.3s;
}

.footer-email:hover { color: #FFFFFF; }

/* Социална мрежа с вертикални линии | */
.footer-social-grid {
    display: flex;
    height: 63px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
}

.f-social-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    transition: background 0.3s;
}

.f-social-box:hover { background: rgba(255, 255, 255, 0.05); }

/* Навигация */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.footer-nav a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #FFFFFF;
    text-decoration: none;
    transition: 0.3s;
}

.footer-nav a:hover { opacity: 0.7; }

/* Долната линия */
.footer-bottom-line {
    border-top: 1px solid #FFFFFF;
    width: 100%;
    height: 54px;
}

/* Адаптивност за малки екрани */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
        align-items: center;
        text-align: center;
    }
    .footer-services, .footer-social-grid { justify-content: center; }
}

.main-footer {
    background-color: #121212;
    border-top: 2px solid #211E1C;
    padding: 80px 0 0 0;
    width: 100%;
    color: white;
}

.footer-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
}

/* Колона 1 */
.f-brand { font-size: 20px; font-weight: 600; margin-bottom: 25px; }
.f-services { display: flex; gap: 15px; }
.f-arrow { font-size: 20px; margin-top: -5px; }
.f-services p { font-size: 12px; font-weight: 600; line-height: 1.8; opacity: 0.9; }

/* Колона 2 */
.f-label { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.f-email { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 15px; margin-bottom: 30px; display: block; }

/* Социални кутии с линии | | */
.f-social-row { display: flex; height: 60px; border-right: 1px solid rgba(255,255,255,0.2); width: fit-content; }
.social-box {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,0.2);
}

/* Колона 3 */
.f-nav { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.f-nav a { color: white; text-decoration: none; font-weight: 600; font-size: 18px; }

/* Линията най-отдолу */
.f-bottom-line {
    border-top: 1px solid white;
    width: 100%;
    height: 60px;
    margin-top: 20px;
}
/* Социалните кутии в хедъра/футъра */
.social-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    /* ТОВА ОПРАВЯ ЦВЕТА (премахва синьото/лилавото) */
    color: #FFFFFF !important; 
    text-decoration: none;
    
    /* ПЛАВНОСТ НА ЕФЕКТА */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* ЕФЕКТ ПРИ ПОСОЧВАНЕ (HOVER) */
.social-box:hover {
    /* Иконката се уголемява с 15% */
    transform: scale(1.15); 
    
    /* Добавяме съвсем леко светване на фона на самата кутийка */
    background-color: rgba(255, 255, 255, 0.05);
    
    /* ГАРАНТИРАМЕ, ЧЕ ЦВЕТЪТ ОСТАВА БЯЛ */
    color: #FFFFFF !important; 
}

/* Правим и самото SVG да слуша цвета на линка */
.social-box svg {
    stroke: currentColor;
    fill: none;
    transition: stroke 0.3s ease;
}

/* CTA HTML */

/* ФОН С ВЪЛНИ (КАТО НА ДРУГИТЕ СТРАНИЦИ) */
body.bg-waves {
    background-image: url('waves.png'), url('rectangleback.jpg');
    background-position: center center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-attachment: fixed;
    background-color: #222022;
    color: #FFFFFF;
}

/* CTA СЪДЪРЖАНИЕ */
.cta-page-content {
    padding: 160px 0 100px;
    display: flex;
    justify-content: center;
}

.cta-inner-container {
    width: 1187px;
    max-width: 90%;
}

/* Заглавия */
.cta-hero { margin-bottom: 80px; }

.cta-title-wrapper {
    border-bottom: 2px solid #FFFFFF;
    width: 725px;
    padding-bottom: 5px;
    margin-bottom: 30px;
}

.cta-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.5;
}

.cta-sub-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 32px;
}

/* Мрежа */
.cta-main-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* Форма */
.cta-contact-form {
    width: 544px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cta-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-input-group label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.cta-input-group input, .cta-input-group textarea {
    background: rgba(245, 244, 242, 0.1);
    border: 2px solid #E8E6E3;
    padding: 18px;
    color: white;
    font-family: 'Montserrat', sans-serif;
}

.cta-input-group input { height: 60px; }
.cta-input-group textarea { height: 190px; resize: none; }

.cta-submit-btn {
    width: 268px;
    height: 56px;
    background: #FFFFFF;
    color: #000000;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

/* Инфо Карта */
.cta-contacts-card {
    width: 493px;
    background: rgba(245, 244, 242, 0.1);
    border: 2px solid #FFFFFF;
    padding: 42px;
}

.card-title { font-size: 28px; margin-bottom: 40px; }
.card-email-label { font-size: 14px; opacity: 0.7; margin-bottom: 5px; }
.card-email-link { font-size: 17px; font-weight: 600; color: white; text-decoration: none; display: block; margin-bottom: 40px; }

.card-services { display: flex; align-items: center; gap: 15px; margin-bottom: 50px; }
.card-services-text { font-size: 12px; font-weight: 600; }

.card-social-grid {
    display: flex;
    height: 84px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
}

.card-social-box {
    width: 138px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: background 0.3s;
}

.card-social-box:hover { background: rgba(255, 255, 255, 0.05); }

/* FOOTER (ОБНОВЕН) */
.site-footer {
    background-color: #121212;
    border-top: 2px solid #211E1C;
    padding: 50px 0 0;
    margin-top: 100px;
}

.footer-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.footer-logo { font-size: 20px; margin-bottom: 25px; }
.footer-services { display: flex; gap: 12px; }
.services-list { font-size: 12px; font-weight: 600; line-height: 1.8; }

.footer-label { font-size: 18px; margin-bottom: 16px; }
.footer-email { font-size: 15px; color: rgba(255, 255, 255, 0.7); text-decoration: none; display: block; margin-bottom: 20px; }

.footer-social-grid { display: flex; height: 63px; border-right: 1px solid rgba(255, 255, 255, 0.2); }
.f-social-box { width: 86px; display: flex; justify-content: center; align-items: center; border-left: 1px solid rgba(255, 255, 255, 0.2); }

.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { font-size: 18px; font-weight: 600; color: white; text-decoration: none; }

.footer-bottom-line { border-top: 1px solid #FFFFFF; width: 100%; height: 54px; margin-top: 20px; }

/* =========================================
   UNIVERSAL PREMIUM ANIMATIONS
   ========================================= */

/* 1. Глобална плавност за всички интерактивни елементи */
a, button, .project-card, .social-box, .btn, .cta-submit-btn {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Ефект за основните бутони (Hero, Forms, Work with me) */
.btn, .send-btn, .cta-submit-btn, .nav-contact-btn {
    position: relative;
    overflow: hidden;
}

.btn:hover, .send-btn:hover, .cta-submit-btn:hover, .nav-contact-btn:hover {
    transform: translateY(-6px) scale(1.02); /* "Floating" ефект */
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
    letter-spacing: 1px; /* Леко разтягане на текста за премиум усещане */
}

.btn:active, .cta-submit-btn:active {
    transform: translateY(-2px);
}

/* 3. Елегантна линия за навигационните линкове */
.nav-links a, .footer-nav a, .f-nav a, .go-back-btn {
    position: relative;
    display: inline-block;
}

.nav-links a::after, .footer-nav a::after, .f-nav a::after, .go-back-btn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #FFFFFF;
    transition: width 0.3s ease;
}

.nav-links a:hover::after, .footer-nav a:hover::after, .f-nav a:hover::after, .go-back-btn:hover::after {
    width: 100%;
}

/* 4. Магнитен ефект за социалните иконки */
.social-box:hover svg, .f-social-box:hover svg, .social-grid-box:hover svg {
    transform: scale(1.25) rotate(8deg); /* Увеличаване с лека ротация */
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

/* 5. Левитация за картите с проекти */
.project-card:hover {
    transform: translateY(-12px);
    filter: brightness(1.1);
}

/* 6. Анимация за инпутите (Form focus) */
.cta-input-group input:focus, .cta-input-group textarea:focus, 
.form-group input:focus, .form-group textarea:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    transform: translateX(5px); /* Леко отместване надясно при писане */
}

/* 7. Пулсираща стрелка (ако имаш такава) */
.f-arrow, .card-arrow, .services .arrow {
    display: inline-block;
    animation: pulseArrow 2s infinite;
}

@keyframes pulseArrow {
    0% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(5px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

/* =========================================
   MOBILE RESPONSIVENESS (SMART FIX)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Общи настройки - намаляваме огромните отстояния */
    .container, .cta-inner-container, .nav-container, .footer-container, .about-container, .projects-container {
        width: 90% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    /* 2. Навигация - правим я по-компактна */
    .navbar, .main-header {
        padding: 15px 5% !important;
    }
    .nav-links {
        gap: 15px !important;
    }
    .nav-links a {
        font-size: 12px !important;
    }
    .nav-contact-btn {
        padding: 5px 10px !important;
    }

    /* 3. Hero Секция (Начална страница) - Слагаме видеото под текста */
    .hero {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
    }
    .hero-content {
        width: 100% !important;
        padding: 120px 20px 60px !important;
        text-align: center !important;
        align-items: center !important;
    }
    .hero-image {
        width: 100% !important;
        height: 350px !important;
    }
    h1, .main-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* 4. Страница Проекти - Правим ги в 1 колона */
    .projects-grid {
        grid-template-columns: 1fr !important; /* Една колона */
        gap: 40px !important;
    }
    .card-img-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    /* 5. Контактна форма (cta.html) - Слагаме картата под формата */
    .cta-main-grid, .contact-grid {
        flex-direction: column !important;
        gap: 50px !important;
    }
    .cta-contact-form, .cta-contacts-card, .contact-form, .contacts-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    .cta-title-wrapper {
        width: 100% !important;
    }

    /* 6. About Me - Подреждаме редовете вертикално */
    .hero-row, .content-row {
        flex-direction: column !important;
    }
    .hero-left, .hero-right, .content-left, .content-right {
        width: 100% !important;
        margin-bottom: 30px;
    }
    .values-grid {
        grid-template-columns: 1fr !important; /* Философията става 1 колона */
    }
    .manifesto {
        font-size: 24px !important;
    }

    /* 7. Footer - Центрираме всичко за по-лесно четене */
    .footer-content, .footer-columns, .footer-grid {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 40px !important;
    }
    .f-nav {
        text-align: center !important;
        align-items: center !important;
    }
    .footer-social-grid, .f-social-row {
        margin: 0 auto !important;
    }
    .contact-figma-layout {
        flex-direction: column !important;
        height: auto !important;
        padding: 40px 20px !important;
    }
}