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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.9);
}

/* Прелоадер */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
    color: white;
}

.logo-animation {
    margin-bottom: 20px;
}

.logo-circle {
    width: 150px;
    height: 150px;
    border: 3px solid #8b837e;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1.5s linear infinite, pulse 2s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    background: #000;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    letter-spacing: 2px;
    animation: flicker 3s linear infinite;
    text-align: center;
    font-family: 'Montserrat', sans-serif;

}

/* Анимация вращения */
@keyframes spin {
    0% { 
        transform: rotate(0deg); 
        border-color: #8b837e;
        border-top-color: transparent;
        border-right-color: transparent;
    }
    25% {
        border-color: #8b837e;
        border-top-color: #8b837e;
        border-right-color: transparent;
    }
    50% {
        border-color: #8b837e;
        border-top-color: #8b837e;
        border-right-color: #8b837e;
    }
    75% {
        border-color: #8b837e;
        border-top-color: transparent;
        border-right-color: #8b837e;
    }
    100% { 
        transform: rotate(360deg); 
        border-color: #8b837e;
        border-top-color: transparent;
        border-right-color: transparent;
    }
}

/* Анимация пульсации */
@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(139, 131, 126, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(139, 131, 126, 0.6);
    }
}

/* Анимация мерцания текста */
@keyframes flicker {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    25% { 
        opacity: 0.8;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% { 
        opacity: 1;
        text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    }
    75% { 
        opacity: 0.9;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
}

/* Адаптивность для прелоадера */
@media (max-width: 768px) {
    .logo-circle {
        width: 120px;
        height: 120px;
    }

    .logo-text {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    .logo-circle {
        width: 100px;
        height: 100px;
    }

    .logo-text {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
}

/* Остальные стили без изменений */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

/* Навигация */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    padding: 15px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo span {
    color: white;
    font-weight: 400;
    font-size: 1.2rem;
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    cursor: pointer;
}

.nav-link:hover {
    color: #8b837e;
}

.dropdown-arrow {
    font-size: 0.7em;
    margin-left: 5px;
    display: inline-block;
}

.nav-item.has-dropdown .dropdown-arrow {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    top: 100%;
    left: 0;
    padding: 10px 0;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: 400;
    transition: background-color 0.3s;
}

.dropdown-content a:hover {
    background-color: #8b837e;
}

.nav-item:hover .dropdown-content {
    display: block;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
}

/* Герой секция */
/* =========================
   PREMIUM HERO SECTION
========================= */


/* ===== HERO BACKGROUND ===== */


/* =========================
        HERO SECTION
========================= */


.hero {

    height:100vh;

    width:100%;


    display:flex;

    align-items:center;

    justify-content:center;


    background-image:

    linear-gradient(
        rgba(0,0,0,0.60),
        rgba(0,0,0,0.70)
    ),

    url("noroot.jpg");


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}



/* контейнер */

.hero-content {


    width:100%;


    max-width:1300px;


    padding:0 40px;


    text-align:center;


    margin:0 auto;


    color:white;


}



/* верхняя строка */


.hero-top-text {


    font-family:'Montserrat', Arial, sans-serif;


    font-size:13px;


    font-weight:400;


    letter-spacing:6px;


    text-transform:uppercase;


    color:#ffffff;


    margin-bottom:55px;


}



/* главный заголовок */


.hero h1 {

    font-family:'Montserrat', Arial, sans-serif;


    font-size:64px;


    font-weight:300;


    line-height:1.2;


    letter-spacing:7px;


    text-transform:uppercase;


    color:#ffffff;


    text-align:center;


    margin:0 auto;


    width:100%;


}



/* подзаголовок */


.hero-subtitle {


    font-family:'Montserrat', Arial, sans-serif;


    margin-top:35px;


    font-size:20px;


    font-weight:300;


    line-height:1.6;


    letter-spacing:1px;


    color:#e5e5e5;


}



/* кнопки */


.hero-buttons {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:20px;


    margin-top:55px;


}



.hero-btn {


    display:flex;


    align-items:center;


    justify-content:center;



    height:60px;


    padding:0 45px;



    min-width:290px;


    background:#ffffff;


    color:#111111;



    border-radius:40px;


    text-decoration:none;



    font-family:'Montserrat', Arial, sans-serif;


    font-size:15px;


    font-weight:500;



    transition:.35s ease;


}



.hero-btn:hover {


    background:#111111;


    color:#ffffff;


    transform:translateY(-4px);


}




/* адаптив */


@media(max-width:768px){



.hero {


    height:100vh;

}



.hero-content {


    padding:0 20px;

}



.hero-top-text {


    font-size:10px;


    letter-spacing:3px;


    margin-bottom:35px;

}




.hero h1 {


    white-space:normal;


    font-size:34px;


    letter-spacing:3px;


}



.hero-subtitle {


    font-size:16px;

}



.hero-buttons {


    flex-direction:column;


    margin-top:35px;

}



.hero-btn {


    width:100%;


    min-width:auto;


}



}

/* Услуги */
.services {
    background: white;
}

.services h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.section-description {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.service-detail {
    padding: 60px 0;
    border-bottom: 1px solid #eee;

}

.service-detail:last-child {
    border-bottom: none;
}

.service-detail h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.service-detail p {
    font-size: 1.1rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Обо мне */
.about {
    background: #f8f8f8;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.about-text h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitle {
    color: #8b837e;
    font-weight: 500;
    margin-bottom: 20px;
}

.divider {
    width: 50px;
    height: 3px;
    background: #8b837e;
    margin: 20px 0;
}

/* Портфолио */
.portfolio {
    background: white;
}

.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

.portfolio-button {
    text-align: center;
    margin-top: 40px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    background: #8b837e;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: background 0.3s;
}

.btn:hover {
    background: #6b635e;
}

/* Цены */
.pricing {
    background: #f8f8f8;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.pricing-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.pricing-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 20px;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8b837e;
    margin: 15px 0;
}

/* Процесс работы */
.process {
    background: white;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.step {
    text-align: center;
}

.step-number {
    width: 60px;
    height: 60px;
    background: #8b837e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

/* Часто задаваемые вопросы */
.faq {
    background: #f8f8f8;
}

.faq-content {
    max-width: 800px;
    margin: 60px auto 0;
}

.faq-item {
    background: white;
    margin-bottom: 20px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
}

.faq-item p {
    font-size: 1.1rem;
    line-height: 1.6;
/*    color: #666;*/
}

.faq-item:last-child {
    margin-bottom: 0;
}

/* Контакты */
.contacts {
    background: #efefef;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-image img {
    width: 100%;
    border-radius: 10px;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.contact-phone {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 20px 0;
}

.social-links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-link {
    padding: 10px 20px;
    background: #8b837e;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.social-link:hover {
    background: #6b635e;
}

/* Футер */
.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 30px 0;
}

/* Стили для выпадающего меню на планшетах и мобильных (до 1024px) */
/* В конце файла, в медиа-запросах для мобильных */
@media (max-width: 1024px) {
    /* Выпадающее меню для мобильных */
    .dropdown-content {
        position: static;
        box-shadow: none;
        border-left: 2px solid #f0f0f0;
        margin-left: 15px;
        margin-top: 10px;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height 0.3s ease;
    }
    
    .dropdown-content.active {
        max-height: 500px; /* Достаточно для отображения всех пунктов */
        padding-bottom: 10px;
    }
    
    .dropdown-content a {
        padding: 10px 15px;
        border-bottom: none;
    }
    
    /* Добавляем индикатор для активного состояния */
    .dropdown-toggle.active {
/*        color: #000;*/
        font-weight: 600;
    }
}

/* На десктопе (выше 1024px) - стандартное поведение при наведении */
@media (min-width: 1025px) {
    .nav-item.has-dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown-content {
        display: none;
    }
    
    .dropdown-toggle {
        cursor: pointer;
        pointer-events: auto;
    }
    
    .dropdown-toggle::after {
        content: '▼';
        font-size: 0.6em;
        margin-left: 5px;
        display: inline-block;
        transition: transform 0.3s ease;
    }
    
    .nav-item.has-dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Обновленные стили для мобильного меню */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transition: left 0.3s ease-in-out;
        gap: 0;
        overflow-y: auto;
        padding: 20px;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
        text-align: left;
        flex-direction: column;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

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

    .nav-link {
        padding: 15px 0;
        width: 100%;
        display: block;
    }

    .dropdown-arrow {
        margin-left: 0;
        margin-top: 5px;
    }

    .dropdown-content {
        position: static;
        display: none;
        background-color: transparent;
        box-shadow: none;
        min-width: 100%;
        padding: 0;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .dropdown-content.active {
        display: block;
    }

    .dropdown-content a {
        padding: 12px 0 12px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        font-size: 0.9rem;
    }

    .dropdown-content a:last-child {
        border-bottom: none;
    }

    .nav-item.has-dropdown {
        position: relative;
        z-index: auto;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .portfolio-gallery,
    .pricing-grid,
    .process-steps {
        grid-template-columns: 1fr;
    }

    .social-links {
        flex-direction: column;
    }
}

/* Дополнительные стили для планшетов (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-menu {
        gap: 15px;
    }

    .nav-item.has-dropdown {
        position: relative;
    }

    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: rgba(0, 0, 0, 0.95);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        z-index: 1001;
        min-width: 250px;
        padding: 10px 0;
    }

    .dropdown-content a {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .dropdown-content a:hover {
        background-color: rgba(139, 131, 126, 0.3);
    }
}

a {
  text-decoration: none;
}

/* style.css */
.dropdown-content {
    display: none;
    /* другие стили */
}

.dropdown-content.active {
    display: block;
    /* или flex, в зависимости от вашей верстки */
}

/* ===== VIDEO BACKGROUND HERO ===== */

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain; /* ВАЖНО: теперь видно всё видео */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* ===== VIDEO SECTION (мелькающее видео) ===== */

.video-section {
    padding: 100px 0;
    background: #000;
}

.video-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
}

.video-wrapper video {
    width: 100%;
    display: block;
    filter: brightness(0.8);
}

.video-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.8;
    letter-spacing: 1px;
}

/* лёгкий эффект "мелькания" */
.video-wrapper video {
    animation: flickerVideo 6s infinite;
}

@keyframes flickerVideo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}


.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav-logo {
    justify-self: start;
}

.nav-menu {
    justify-self: center;
    display: flex;
    gap: 40px;
}

.hamburger {
    justify-self: end;
}

.gallery-item {
    text-align: center;
}

.gallery-item h3 {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 600;
}

.gallery-item p {
    margin-top: 5px;
    color: #666;
    font-size: 16px;
}

.project-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin: 30px 0 40px;
    color: #333;
}

.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 768px) {

    .portfolio-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-item img {
        height: auto;
        width: 100%;
    }

    .project-title {
        font-size: 22px;
        margin: 20px 0 30px;
        padding: 0 15px;
    }

}

.gallery-item {
    text-align: center;
}

.gallery-item img {
    max-width: 100%;
    max-height: 700px;
    width: auto;
    height: auto;
    border-radius: 10px;
}

.faq {
    background: #f8f8f8;
}

.faq h2 {
    text-align: center;
    margin-bottom: 50px;
}

.faq-content {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.faq-item h3 {
    margin-bottom: 20px;
    font-size: 24px;
}

.faq-item p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    flex-shrink: 0;
}



.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* ===== CONTACTS ===== */


.contacts {

    background:#000;
    color:white;

}



.contacts-wrapper {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}



.brief-form h2,
.contact-info h2 {


    font-size:38px;

    margin-bottom:35px;

    font-family:"Libertinus Mono", monospace;

}



.brief-form input,
.brief-form textarea {


    width:100%;

    background:#111;

    border:1px solid #333;

    color:white;

    padding:20px;

    margin-bottom:20px;

    border-radius:10px;

    font-size:16px;


}



.brief-form textarea {

    height:140px;

    resize:none;

}



.privacy {

    display:flex;

    gap:10px;

    align-items:center;

    color:#999;

    font-size:14px;

    margin-bottom:25px;

}



.privacy a {

    color:#8b837e;

}



.brief-form button {


    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:#8b837e;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;


}



.brief-form button:hover {


    background:#6b635e;

}



.or {

    text-align:center;

    margin:25px 0;

    color:#777;

}



.telegram-btn {


    display:block;

    text-align:center;

    padding:18px;

    border:1px solid #8b837e;

    border-radius:12px;

    color:white;

}



.contact-item {


    display:flex;

    gap:20px;

    margin-bottom:30px;

    align-items:center;


}



.contact-item span {


    width:50px;

    height:50px;

    border-radius:12px;

    background:#171717;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8b837e;

    font-size:22px;


}



.contact-item small {


    color:#777;

}



.contact-item p {


    margin-top:5px;

    font-size:18px;

    font-weight:600;


}



@media(max-width:768px){


.contacts-wrapper{

    grid-template-columns:1fr;

}


.brief-form h2,
.contact-info h2{

    font-size:30px;

}



}

.contact-item a {

    color:white;
    text-decoration:none;
    transition:.3s;

}


.contact-item a:hover {

    color:#8b837e;

}

.meta-note {

    display:block;

    margin-top:5px;

    color:#777;

    font-size:12px;

    font-style:italic;

    line-height:1.4;

}

.contact-subtitle {

    color:#999;

    font-size:16px;

    line-height:1.7;

    margin-top:-20px;

    margin-bottom:35px;

    font-weight:300;

}

.project-card{


position:relative;

overflow:hidden;

height:620px;

border-radius:0;


}



.project-card img{


width:100%;

height:100%;

object-fit:cover;

filter:brightness(.7);


}



.project-overlay{


position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:45px;

color:white;


}



.project-overlay h3{


font-size:38px;

line-height:1.2;

font-weight:400;


}



.project-overlay p{


font-size:20px;

margin:15px 0 35px;

}



.project-overlay button{


background:transparent;

border:1px solid white;

color:white;

padding:15px 35px;

border-radius:8px;

cursor:pointer;

transition:.3s;


}



.project-overlay button:hover{


background:white;

color:black;


}




/* КАРУСЕЛЬ */


.gallery-modal{


display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.95);

z-index:999;

align-items:center;

justify-content:center;


}



.gallery-modal img{


max-width:85%;

max-height:85%;

object-fit:contain;


}



.close {

    position:fixed;


    top:80px;


    right:40px;



    width:50px;

    height:50px;



    display:flex;

    align-items:center;

    justify-content:center;



    font-size:45px;

    line-height:1;


    color:white;


    cursor:pointer;


    z-index:10000;

}



.prev,
.next{


position:absolute;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

color:white;

font-size:60px;

cursor:pointer;


}



.prev{

left:40px;

}



.next{

right:40px;

}


.gallery-images {

    display:none;

}

/* Фикс расположения логотипа LEVELUX */

.nav-container {

    max-width: 1450px;

    margin: 0 auto;

    padding: 0 20px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

}


.nav-logo {

    margin-right: auto;

}


.nav-menu {

    margin:0 auto;

    display:flex;

    gap:40px;

}


.hamburger {

    margin-left:auto;

}

/* Кнопка в услугах */

.service-button {

    display:inline-block;

    margin-top:35px;

    padding:14px 35px;

    border:1px solid #8b837e;

    color:#111;

    text-decoration:none;

    font-size:15px;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.3s;

}


.service-detail {

    text-align:center;

}


.service-button:hover {

    background:#8b837e;

    color:white;

}


/* ===== NEW FAQ ===== */


.faq {

    background:#f8f8f8;

}



.faq h2 {

    text-align:center;

    margin-bottom:50px;

}



.faq-list {

    max-width:900px;

    margin:auto;

}



.faq-item {


    background:white;

    border-bottom:1px solid #ddd;

    padding:30px 35px;

    transition:.3s;

}



.faq-item:first-child {

    border-radius:12px 12px 0 0;

}



.faq-item:last-child {

    border-radius:0 0 12px 12px;

}



.faq-question {


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}



.faq-question h3 {


    font-size:22px;

    font-weight:400;

    color:#222;

}



.faq-button {


    flex-shrink:0;

    width:45px;

    height:45px;


    border-radius:50%;


    border:1px solid #8b837e;


    background:transparent;


    color:#8b837e;


    font-size:28px;


    font-weight:300;


    cursor:pointer;


    display:flex;

    align-items:center;

    justify-content:center;


    transition:.35s;


}



.faq-button:hover {


    background:#8b837e;

    color:white;


}



.faq-item.active .faq-button {


    transform:rotate(45deg);


}



.faq-answer {


    max-height:0;


    overflow:hidden;


    transition:max-height .45s ease;


}



.faq-answer p {


    margin-top:25px;


    color:#111;


    font-weight:500;


    line-height:1.8;


    font-size:17px;


}



@media(max-width:768px){


    .faq-item {

        padding:25px 20px;

    }


    .faq-question h3 {

        font-size:18px;

        padding-right:10px;

    }


}

/* ===== PREMIUM SERVICE BUTTON ===== */


.service-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    margin-top:35px;


    padding:16px 45px;


    background:linear-gradient(
        135deg,
        #1a1a1a,
        #333
    );


    color:white;


    border:1px solid rgba(255,255,255,0.15);


    text-decoration:none;


    font-size:14px;


    letter-spacing:2px;


    text-transform:uppercase;


    font-weight:500;


    border-radius:2px;


    position:relative;


    overflow:hidden;


    transition:.4s ease;


}


/* эффект блика */

.service-button::before {

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;


    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );


    transition:.6s;


}



.service-button:hover::before {

    left:120%;

}



.service-button:hover {


    transform:translateY(-3px);


    background:linear-gradient(
        135deg,
        #8b837e,
        #c0b6ad
    );


    color:white;


    box-shadow:
    0 15px 35px rgba(0,0,0,.25);


}

/* ===== PREMIUM FAQ PLUS BUTTON ===== */


.faq-button {


    width:45px;

    height:45px;


    border-radius:50%;


    border:1px solid #b8b8b8;


    background:linear-gradient(
        145deg,
        #1a1a1a,
        #333
    );


    color:white;


    font-size:28px;


    font-weight:300;


    cursor:pointer;


    display:flex;

    align-items:center;

    justify-content:center;


    transition:.35s ease;


    box-shadow:
    0 8px 20px rgba(0,0,0,.15);



}



.faq-button:hover {


    background:linear-gradient(
        145deg,
        #ffffff,
        #dcdcdc
    );


    color:#111;


    border-color:#111;


    transform:translateY(-2px);


    box-shadow:
    0 12px 25px rgba(0,0,0,.25);


}



.faq-item.active .faq-button {


    transform:rotate(45deg);


    background:#111;


    color:white;


}


.portfolio-gallery {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:25px;

}

/* ===== Фоны секций ===== */


/* Примеры работ - обычный фон */
.portfolio {

    background:#ffffff;

}



/* Этапы работ - слегка затемнённый фон */

.steps {

    background:#f2f2f2;

}



/* FAQ - светлый фон */

.faq {

    background:#ffffff;

}

#process{
    background:#f2f2f2;
}



/* Акция под главным заголовком */

.discount-text {

    margin-top:25px;

    font-size:18px;

    font-weight:400;

    letter-spacing:4px;

    text-transform:uppercase;

    color:white;

    opacity:.9;

}



/* =================================
   АДАПТАЦИЯ БЛОКА ПРИМЕРЫ РАБОТ
================================= */


/* Планшеты 





/* Телефоны */

@media (max-width:768px){


.projects {

    padding:60px 20px;

}



.projects-container {


    display:grid;


    grid-template-columns:1fr;


    gap:30px;


}



.project-card {


    width:100%;


    max-width:450px;


    margin:0 auto;


}



.project-card img {


    width:100%;


    height:auto;


    aspect-ratio:4 / 3;


    object-fit:cover;


}



.project-card h3 {


    font-size:18px;


    margin-top:15px;


}



.project-card p {


    font-size:14px;


}



}





/* Маленькие телефоны */

@media(max-width:480px){



.projects {


    padding:50px 15px;


}



.projects-container {


    gap:25px;


}



.project-card img {


    aspect-ratio:1 / 1;


}



.project-card h3 {


    font-size:17px;


}



}


/* ===================================
   ADAPTATION HERO + PROJECTS
=================================== */



/* Планшеты */

@media (max-width: 1024px) {


/* HERO */


.hero-content {

    padding:0 30px;

}



.hero h1 {

    font-size:48px;

    letter-spacing:5px;

}



.hero-top-text {

    font-size:11px;

    letter-spacing:4px;

}



.hero-subtitle {

    font-size:18px;

}



.hero-buttons {

    gap:15px;

}



.hero-btn {

    min-width:240px;

    padding:0 30px;

}



/* ПРОЕКТЫ */


.projects-container {

    max-width:900px;

    gap:25px;

}



.project-card {

    width:280px;

}



.project-card img {

    height:260px;

}



}







/* Мобильные устройства */


@media (max-width:768px) {



/* =================
 HERO MOBILE
================= */


.hero {

    height:100vh;

    min-height:700px;

    background-position:center;

}



.hero-content {


    padding:0 20px;


}



.hero-top-text {


    font-size:9px;


    letter-spacing:3px;


    line-height:1.8;


    margin-bottom:35px;


}



.hero h1 {


    font-size:32px;


    letter-spacing:3px;


    line-height:1.25;


    white-space:normal;


}



.hero-subtitle {


    font-size:15px;


    line-height:1.5;


    margin-top:25px;


}



.hero-buttons {


    flex-direction:column;


    margin-top:35px;


    gap:15px;


}



.hero-btn {


    width:100%;


    height:55px;


    min-width:auto;


    font-size:14px;


}







/* =================
 ПРОЕКТЫ MOBILE
================= */


.projects {


    padding:70px 20px;


}



.projects-container {


    display:grid;


    grid-template-columns:1fr;


    gap:35px;


    width:100%;


}



.project-card {


    width:100%;


    max-width:400px;


    margin:0 auto;


}



.project-card img {


    width:100%;


    height:300px;


    object-fit:cover;


}



.project-card h3 {


    font-size:20px;


}



}








/* Маленькие телефоны */


@media (max-width:480px){



.hero h1 {


    font-size:26px;


    letter-spacing:2px;


}



.hero-top-text {


    font-size:8px;


}



.hero-subtitle {


    font-size:14px;


}



.hero-btn {


    height:50px;


}




.project-card img {


    height:240px;


}



}




/* ===================================
   АДАПТАЦИЯ БЛОКА "ПРИМЕРЫ РАБОТ"
=================================== */


/* Планшеты 1024px */

@media (max-width:1024px){


.portfolio-gallery{

    grid-template-columns:repeat(2, 1fr);

    gap:25px;

}



.project-card{

    height:500px;

}



.project-overlay{

    padding:35px;

}



.project-overlay h3{

    font-size:30px;

}



.project-overlay p{

    font-size:17px;

}



.project-overlay button{

    padding:14px 28px;

}


}





/* Планшеты маленькие + большие телефоны */

@media (max-width:768px){



.portfolio{

    padding-left:20px;

    padding-right:20px;

}



.portfolio-gallery{


    grid-template-columns:1fr;


    gap:30px;


}



.project-card{


    height:480px;


    width:100%;


}



.project-card img{


    height:100%;


    object-fit:cover;


}



.project-overlay{


    padding:30px;


}



.project-overlay h3{


    font-size:28px;


    line-height:1.15;


}



.project-overlay p{


    font-size:16px;


    margin:12px 0 25px;


}



.project-overlay button{


    width:100%;


    padding:15px;


}


}






/* Маленькие телефоны */

@media(max-width:480px){



.portfolio h2{


    font-size:32px;


}



.project-card{


    height:420px;


}



.project-overlay{


    padding:22px;


}



.project-overlay h3{


    font-size:24px;


}



.project-overlay p{


    font-size:14px;


}



.project-overlay button{


    font-size:14px;


}


}

/* ===== ЦЕНТРИРОВАНИЕ МЕНЮ ===== */


.nav-container {

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}



/* логотип остаётся слева */

.nav-logo {

    position:absolute;

    left:40px;

}



/* меню строго по центру */

.nav-menu {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    margin:0 auto;

}



/* кнопка меню справа */

.hamburger {

    position:absolute;

    right:40px;

}


/* ===== ЭТАПЫ РАБОТ - СТИЛЬ КАК НА РЕФЕРЕНСЕ ===== */

#process{
    background:#f2f2f2;
}


#process h2{

    text-align:center;

    font-size:42px;

    font-weight:300;

    letter-spacing:3px;

    margin-bottom:80px;

}



.process-steps{

    position:relative;

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:80px;

}



.process-steps::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:1px;

    background:#d7d7d7;

}



.step{

    position:relative;

    width:50%;

}



.step:nth-child(odd){

    align-self:flex-start;

    text-align:right;

    padding-right:80px;

}



.step:nth-child(even){

    align-self:flex-end;

    text-align:left;

    padding-left:80px;

}



/* кружок с номером */

.step-number{

    position:absolute;

    top:0;

    width:46px;

    height:46px;

    background:#eeeeee;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:500;

    color:#111;

}



.step:nth-child(odd) .step-number{

    right:-23px;

}



.step:nth-child(even) .step-number{

    left:-23px;

}



.step h3{

    font-size:22px;

    font-weight:500;

    letter-spacing:1px;

    line-height:1.4;

    margin-bottom:18px;

}



.step p{

    font-size:16px;

    color:#555;

    font-weight:300;

    line-height:1.8;

}





@media(max-width:768px){


.process-steps::before{

    left:23px;

}


.step,
.step:nth-child(odd),
.step:nth-child(even){

    width:100%;

    text-align:left;

    padding-left:80px;

    padding-right:0;

    align-self:flex-start;

}



.step:nth-child(odd) .step-number,
.step:nth-child(even) .step-number{

    left:0;

    right:auto;

}



#process h2{

    font-size:30px;

}



.step h3{

    font-size:18px;

}


}

.step p{

    font-size:17px;

    line-height:1.9;

    color:black;

    font-weight:300;

    letter-spacing:.3px;

    max-width:420px;

}


.step h3{

    font-size:23px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

}


@media(max-width:768px){

.step p{

    font-size:15px;

}

}

/* =================================
   НОВАЯ АДАПТАЦИЯ ШАПКИ
================================= */


@media (max-width:1024px){


.navbar{

    padding:18px 0;

}


.nav-container{

    max-width:100%;

    padding:0 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.nav-logo{

    position:static;

    margin:0;

}



.nav-menu{

    position:fixed;

    top:75px;

    left:-100%;

    width:100%;

    height:calc(100vh - 75px);

    background:#050505;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:25px;

    transition:.35s ease;

    overflow-y:auto;

    z-index:999;


}



.nav-menu.active{

    left:0;

}



.nav-item{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}



.nav-link{

    width:100%;

    padding:18px 0;

    font-size:16px;

}



/* УСЛУГИ */

.dropdown-content{


    position:static;


    width:100%;


    min-width:0;


    background:transparent;


    box-shadow:none;


    padding:0;


    margin:0;


    display:none;


}



.dropdown-content.active{

    display:block;

}



.dropdown-content a{


    padding:14px 15px;


    font-size:14px;


    color:#ccc;


    border-left:1px solid #8b837e;


}



/* кнопка меню */

.hamburger{


    display:flex;

    z-index:1001;

}


}





/* маленькие телефоны */

@media(max-width:480px){


.nav-container{

    padding:0 18px;

}


.nav-logo span{

    font-size:18px;

}


.nav-menu{

    top:70px;

}


}


/* =================================
   FIX HEADER 1270px
================================= */

@media (max-width:1270px) and (min-width:1025px){


.nav-container{

    max-width:100%;

    padding:0 25px;

}



.nav-logo{

    position:static;

    flex-shrink:0;

}



.nav-logo span{

    font-size:18px;

    white-space:nowrap;

}



.nav-menu{

    gap:22px;

    margin-left:40px;

}



.nav-link{

    font-size:14px;

    white-space:nowrap;

}


}



/* =====================================
   PREMIUM SERVICES BLOCK
===================================== */


#services{

    background:#ffffff;

    padding:120px 0;

}



#services .container{

    max-width:1200px;

}



.service-detail{

    position:relative;

    padding:90px 40px;

    border-bottom:1px solid #e5e5e5;

    text-align:center;

    transition:.4s ease;

}



.service-detail:first-child{

    border-top:1px solid #e5e5e5;

}




.service-detail::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:0;

    height:1px;

    background:#8b837e;

    transition:.5s ease;

}



.service-detail:hover::before{

    width:100%;

    left:0;

}




.service-detail h2{


    font-size:34px;

    font-weight:400;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#111;

    margin-bottom:30px;

}



.service-detail p{


    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

    color: black;

}




/* премиальная кнопка */


.service-button{


    margin-top:45px;


    padding:18px 55px;


    background:#111;


    color:white!important;


    border:none;


    font-size:13px;


    letter-spacing:3px;


    text-transform:uppercase;


    position:relative;


    overflow:hidden;


    transition:.4s ease;


}



.service-button::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );


    transition:.6s;


}



.service-button:hover::after{


    left:100%;


}



.service-button:hover{


    transform:translateY(-5px);


    background:#8b837e;


    box-shadow:
    0 20px 40px rgba(0,0,0,.15);


}





/* маленький эффект при наведении блока */


.service-detail:hover h2{


    letter-spacing:5px;


    transition:.4s;


}




/* адаптация */


@media(max-width:768px){


#services{

    padding:80px 0;

}



.service-detail{

    padding:60px 20px;

}



.service-detail h2{

    font-size:24px;

    letter-spacing:2px;

}



.service-detail p{

    font-size:16px;

}



.service-button{

    width:100%;

}



}



/* =====================================
   RETURN BUTTON STYLE
===================================== */


.hero-content .btn,
.hero-content button,
.service-button{

    border-radius:0;

    padding:18px 45px;

    letter-spacing:2px;

}


/* =====================================
   ЭТАПЫ РАБОТ - HORIZONTAL VERSION
===================================== */


.process-steps{


    position:relative;

    max-width:1200px;

    margin:0 auto;


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;


}



.process-steps::before{


    content:"";


    position:absolute;


    top:23px;


    left:0;


    right:0;


    height:1px;


    background:#d8d8d8;


}



.step{


    position:relative;


    width:auto;


    text-align:center;


    padding:0 15px;


}



/* квадрат с цифрой */


.step-number{


    position:relative;


    margin:0 auto 35px;


    width:46px;


    height:46px;


    border-radius:0;


    background:#eeeeee;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:18px;


    font-weight:500;


    z-index:2;


}





.step h3{


    font-size:20px;


    font-weight:500;


    letter-spacing:1.5px;


    line-height:1.4;


    margin-bottom:18px;


}



.step p{


    font-size:16px;


    line-height:1.8;


    color:black;


    font-weight:300;


}




/* убрать старое смещение */

.step:nth-child(odd),
.step:nth-child(even){

    align-self:auto;

    text-align:center;

    padding-left:15px;

    padding-right:15px;

}




@media(max-width:900px){


.process-steps{


    grid-template-columns:1fr 1fr;

}



.process-steps::before{

    display:none;

}


}



@media(max-width:600px){


.process-steps{


    grid-template-columns:1fr;

}



}


/* =====================================
   HERO BUTTONS - RECTANGLE STYLE
===================================== */


.hero-content .btn,
.hero-buttons a,
.hero-content a{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    height:56px;


    padding:0 45px;


    border-radius:0 !important;


    border:1px solid #ffffff;


    background:#ffffff;


    color:#111111;


    font-size:13px;


    font-weight:400;


    letter-spacing:2px;


    text-transform:uppercase;


    text-decoration:none;


    transition:.35s ease;


}



/* вторая кнопка */

.hero-content .btn-outline,
.hero-buttons .outline{


    background:transparent;


    color:#ffffff;


    border:1px solid #ffffff;


}



.hero-content .btn:hover,
.hero-buttons a:hover{


    background:#111111;


    color:#ffffff;


    transform:translateY(-3px);


}


/* =====================================
   ЭТАПЫ РАБОТ - ВЫРАВНИВАНИЕ ЦИФР
===================================== */


.step{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.step-number{


    position:relative;


    margin:0 auto 30px;


    left:auto !important;

    right:auto !important;


    display:flex;


    align-items:center;


    justify-content:center;


}



.step h3{


    width:100%;


    text-align:center;


}



.step p{


    max-width:260px;


    margin:0 auto;


    text-align:center;

    color: black;


}


/* линия проходит через центр квадратов */


.process-steps::before{


    top:28px;


}


/* =====================================
   SMALL LUXURY DISCOUNT OFFER
===================================== */


.discount-offer{


    margin:28px auto 35px;


    display:flex;


    flex-direction:column;


    align-items:center;


    text-align:center;


    max-width:380px;


    padding:14px 25px;


    background:#f7f6f4;


    border:1px solid #ded8d0;


    color:green;


    position:relative;



}



.discount-offer::before{


    content:"";


    position:absolute;


    left:0;


    top:0;


    height:100%;


    width:3px;


    background:#b08d57;


}



.discount-offer{


    font-size:12px;


    line-height:1.5;


    letter-spacing:.8px;


    font-weight:500;


}




.discount-offer span{


    margin-top:4px;


    font-size:14px;


    color:#111;


    font-weight:500;


    letter-spacing:1px;


}





@media(max-width:600px){


.discount-offer{


    max-width:300px;


    padding:12px 18px;


    margin:20px auto 25px;


}



.discount-offer span{


    font-size:13px;


}



}

/* =====================================
   FINAL SECTION BACKGROUND ORDER
===================================== */


/* Белый фон */

#services,
#process{

    background:#ffffff;

}



/* Серый фон */

#portfolio,
#faq{

    background:#f2f2f2;

}



/* Контакты как раньше */

#contacts{

    background:#050505;

    color:#ffffff;

}



/* одинаковый премиальный ритм */

#services,
#portfolio,
#process,
#faq,
#contacts{

    padding:110px 0;

}



/* заголовки на черном блоке */

#contacts h2,
#contacts h3,
#contacts p{

    color:#ffffff;

}

#projects{
    background:#f2f2f2;
}