@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

/* --- ОБЩИE СТИЛИ ДЛЯ ВСЕХ БЛОКОВ --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #fff;
}

body {
    -webkit-user-select: none;
    user-select: none;
}

.page-wrapper {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

section {
    width: 100%;
    overflow: hidden;
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- СТИЛИ БЛОКА 1: ВИДЕО-ХЕДЕР --- */
#video-wrapper {
    position: relative;
    width: 90vw;
    max-width: 1400px;
    aspect-ratio: 16 / 5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0px 50px rgba(0,0,0,0.1);
    background-color: #ffffff;
}
#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#content-overlay { position: absolute; bottom: 8%; right: 5%; width: 100%; max-width: 480px; z-index: 2; text-align: right; color: white; padding: 20px; box-sizing: border-box; }
#content-overlay h1 { font-size: 30px; font-weight: 500; line-height: 1.3; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); margin: 0 0 20px 0; }
.glass-button { display: inline-block; padding: 14px 30px; font-size: 14px; letter-spacing: 0.5px; font-weight: 500; color: white; text-decoration: none; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; transition: background-color 0.3s, border-color 0.3s; }
.glass-button:hover { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); }

@media (max-width: 768px) {
    .header-section {
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    #video-wrapper {
        border-radius: 24px;
        width: 90vw;
        margin-top: +30px;
    }
    #content-overlay {
        bottom: 6%;
        right: 5%;
        width: 90%;
    }
    #content-overlay h1 {
        font-size: clamp(14px, 4vw, 24px);
        margin-bottom: 8px;
    }
    .glass-button {
        padding: 8px 18px;
        font-size: 10px;
        border-radius: 24px;
    }
}
/* --- СТИЛИ БЛОКА 2: ОБО МНЕ --- */
.about-section {
    height: auto;
    padding: 80px 0;
    background-color: #fff;
}

.about-me-container {
    display: flex;
    align-items: center;
    gap: 4vw;
    width: 90vw;
    max-width: 1100px;
    background-color: #ffffff;
    padding: 4vh 4vw;
    border-radius: 24px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.photo-container {
    position: relative;
    flex-shrink: 0;
    width: 320px;
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photo-container:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.about-me-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Lato', "montserrat", serif;
    font-weight: 300;
    font-size: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    border-radius: 24px;
}

.photo-container:hover .photo-overlay {
    opacity: 1;
    transform: translateY(0);
}

.text-content {
    max-width: 600px;
}

.text-content h2 {
    font-family: 'Lato', sans-serif;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 300;
    color: #333;
    margin-top: 0;
    margin-bottom: 2vh;
}

.text-content h2 span {
    color: #60a5fa;
}

.text-content p {
    font-family: 'Lato', serif;
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 22px);
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
    text-align: justify;
}

.text-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .about-section {
        padding: 30px 0;
    }
    .about-me-container {
        flex-direction: column;
        width: 90vw;
        padding:7vw;
        gap: 2vh;
        text-align: center;
    }
    .photo-container {
        width: 60%;
        max-width: 220px;
        box-shadow: none;
    }
    .text-content h2 {
        text-align: center;
    }
}

/* --- СТИЛИ БЛОКА 3: СОТРУДНИЧЕСТВО --- */
.coop-section {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: auto;
    overflow: visible !important;
    z-index: 3;
}

.coop-title {
    text-align: center;
    font-family: 'Lato';
    font-weight: 200;
    font-size: 18pt;
    padding: 50px 0;
    flex-shrink: 0;
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    padding: 2vw;
    box-sizing: border-box;
    min-height: 0;
}

.spheres-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
}

.sphere {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.07);
}

.logo-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.sphere:hover {
    cursor: pointer;
    transform: scale(1.1);
    z-index: 100;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* --- ОБНОВЛЕННЫЕ ПУТИ К ЛОГОТИПАМ --- */
.sphere-1 .logo-image { background-image: url(../assets/cooperations/rylko.png); }
.sphere-2 .logo-image { background-image: url(../assets/cooperations/luren.png); }
.sphere-3 .logo-image { background-image: url(../assets/cooperations/polo.webp); }
.sphere-4 .logo-image { background-image: url(../assets/cooperations/mosquito.png); }
.sphere-5 .logo-image { background-image: url(../assets/cooperations/muscat.png); }
.sphere-6 { background-color: #C9B8D3; }
.sphere-6 .logo-image { background-image: url(../assets/cooperations/wiskii.png); }
.sphere-7 .logo-image { background-image: url(../assets/cooperations/bonheur.png); }
.sphere-8 .logo-image { background-image: url(../assets/cooperations/ukoi.png); }
.sphere-9 .logo-image { background-image: url(../assets/cooperations/micas.png); }
.sphere-10 .logo-image { background-image: url(../assets/cooperations/dermika.png); }
.sphere-11 .logo-image { background-image: url(../assets/cooperations/loccsitan.png); }
.sphere-12 .logo-image { background-image: url(../assets/cooperations/mokosh.png); }
.sphere-13 .logo-image { background-image: url(../assets/cooperations/rene.png); }
.sphere-14 .logo-image { background-image: url(../assets/cooperations/root.png); }
.sphere-15 .logo-image { background-image: url(../assets/cooperations/remington.webp); }
.sphere-16 .logo-image { background-image: url(../assets/cooperations/fiore.webp); }
.sphere-17 .logo-image { background-image: url(../assets/cooperations/va.webp); }
.sphere-18 .logo-image { background-image: url(../assets/cooperations/strong.webp); }
.sphere-19 .logo-image { background-image: url(../assets/cooperations/liver.webp); }
.sphere-20 .logo-image { background-image: url(../assets/cooperations/metro.webp); }
.sphere-21 .logo-image { background-image: url(../assets/cooperations/krendel.webp); }
.sphere-22 .logo-image { background-image: url(../assets/cooperations/basiclo.png); }

.sphere-1 { width: 15vw; height: 15vw; max-width: 180px; max-height: 180px; top: 5%; left: 25%; }
.sphere-2 { width: 10vw; height: 10vw; max-width: 110px; max-height: 110px; top: 40%; left: 5%; }
.sphere-3 { width: 18vw; height: 18vw; max-width: 220px; max-height: 220px; top: 35%; left: 38%; }
.sphere-4 { width: 11vw; height: 11vw; max-width: 130px; max-height: 130px; bottom: 5%; left: 30%; }
.sphere-5 { width: 9vw; height: 9vw; max-width: 100px; max-height: 100px; bottom: 35%; right: 5%; }
.sphere-6 { width: 14vw; height: 14vw; max-width: 170px; max-height: 170px; bottom: 8%; left: 60%; }
.sphere-7 { width: 8vw; height: 8vw; max-width: 90px; max-height: 90px; top: 18%; left: 50%; }
.sphere-8 { width: 13vw; height: 13vw; max-width: 160px; max-height: 160px; top: 8%; right: 5%; }
.sphere-9 { width: 10vw; height: 10vw; max-width: 120px; max-height: 120px; bottom: 3%; right: 2%; }
.sphere-10 { width: 10vw; height: 10vw; max-width: 120px; max-height: 120px; top: 68%; left: 18%; }
.sphere-11 { width: 9vw; height: 9vw; max-width: 100px; max-height: 100px; top: 8%; left: 8%; }
.sphere-12 { width: 10vw; height: 10vw; max-width: 120px; max-height: 120px; top: 45%; right: 18%; }
.sphere-13 { width: 8vw; height: 8vw; max-width: 90px; max-height: 90px; top: 72%; right: 40%; }
.sphere-14 { width: 11vw; height: 11vw; max-width: 130px; max-height: 130px; bottom: 2%; left: 45%; }
.sphere-15 { width: 10vw; height: 10vw; max-width: 120px; max-height: 120px; top: 25%; left: 75%; }
.sphere-16 { width: 9vw; height: 9vw; max-width: 100px; max-height: 100px; top: 55%; left: 10%; }
.sphere-17 { width: 11vw; height: 11vw; max-width: 130px; max-height: 130px; top: 31%; right: 65%; }
.sphere-18 { width: 8vw; height: 8vw; max-width: 90px; max-height: 90px; bottom: 30%; left: 25%; }
.sphere-19 { width: 12vw; height: 12vw; max-width: 140px; max-height: 140px; top: 80%; left: 5%; }
.sphere-20 { width: 10vw; height: 10vw; max-width: 120px; max-height: 120px; top: 5%; left: 60%; }
.sphere-21 { width: 9vw; height: 9vw; max-width: 100px; max-height: 100px; bottom: 45%; right: 30%; }
.sphere-22 { width: 13vw; height: 13vw; max-width: 150px; max-height: 150px; bottom: 15%; left: 75%; }


@media (max-width: 768px) {
    .coop-section { padding: 0; }
    @keyframes lift {
        0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.07)); }
        50% { transform: scale(1.1) translateY(-8px); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.12)); }
    }
    .main-wrapper { padding: 0; height: 100lvh; overflow: visible; }
    .spheres-container { position: relative; width: 100%; height: 100%; max-width: none; aspect-ratio: unset; padding: 8vh 6vw; box-sizing: border-box; }
    .sphere { position: absolute; box-shadow: none; animation: lift 2.8s ease-in-out infinite; }
    .sphere:active { animation: none; transform: scale(1.15) translateY(-10px); filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15)); transition: transform 0.2s ease, filter 0.2s ease; }
    .sphere-1 { width: 28vw; height: 28vw; top: 0; left: 5%; animation-delay: -0.5s; }
    .sphere-2 { width: 20vw; height: 20vw; top: 10%; right: 5%; animation-delay: -1.2s; }
    .sphere-3 { width: 35vw; height: 35vw; top: 22%; left: 30%; animation-delay: -0.2s; }
    .sphere-4 { width: 22vw; height: 22vw; bottom: 5%; left: 10%; animation-delay: -2.5s; }
    .sphere-5 { width: 17vw; height: 17vw; top: 2%; right: 10%; animation-delay: -1.8s; }
    .sphere-6 { width: 32vw; height: 32vw; bottom: 8%; right: 10%; animation-delay: -0.8s; }
    .sphere-7 { width: 16vw; height: 16vw; top: 30%; left: 5%; animation-delay: -3.1s; }
    .sphere-8 { width: 25vw; height: 25vw; top: 50%; right: 0; animation-delay: -1.5s; }
    .sphere-9 { width: 19vw; height: 19vw; bottom: 0; right: 40%; animation-delay: -2.2s; }
    .sphere-10 { width: 24vw; height: 24vw; bottom: 25%; left: 35%; animation-delay: -0.4s; }
    .sphere-11 { width: 18vw; height: 18vw; top: 40%; left: 20%; animation-delay: -3.5s; }
    .sphere-12 { width: 23vw; height: 23vw; bottom: 45%; left: 0; animation-delay: -1.1s; }
    .sphere-13 { width: 16vw; height: 16vw; bottom: 5%; left: 5%; animation-delay: -2.8s; }
    .sphere-14 { width: 21vw; height: 21vw; top: 0; left: 45%; animation-delay: -0.7s; }
    .sphere-15 { width: 22vw; height: 22vw; top: 15%; left: 65%; animation-delay: -1.4s; }
    .sphere-16 { width: 20vw; height: 20vw; top: 20%; right: 5%; animation-delay: -2.0s; }
    .sphere-17 { width: 24vw; height: 24vw; bottom: 15%; left: 65%; animation-delay: -0.6s; }
    .sphere-18 { width: 18vw; height: 18vw; top: 60%; left: 60%; animation-delay: -3.3s; }
    .sphere-19 { width: 16vw; height: 16vw; top: 10%; left: 40%; animation-delay: -1.9s; }
    .sphere-20 { width: 21vw; height: 21vw; top: 59%; left: 35%; animation-delay: -2.7s; }
    .sphere-21 { width: 19vw; height: 19vw; bottom: 35%; left: 5%; animation-delay: -1.3s; }
    .sphere-22 { width: 28vw; height: 28vw; top: 45%; left: 45%; animation-delay: -0.9s; }
}
/* --- СТИЛИ БЛОКА 4: ВИДЕО-ГАЛЕРЕЯ --- */
.video-gallery-section { display: flex; flex-direction: column; justify-content: center; background-color: #fff; min-height: 100vh; height: 100vh; position: relative; z-index: 2; }
.video-gallery-title { text-align: center; font-family: 'Lato'; font-weight: 200; font-size: 18pt; padding: 50px 1px; flex-shrink: 0; }
.video-gallery-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; }
.video-carousel-row { display: flex; align-items: center; padding: 2vh 5vw; gap: 2vw; transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1); }
.video-carousel-row.no-transition { transition: none; }
.video-card { position: relative; height: 50vh; aspect-ratio: auto; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 15px 35px rgba(0, 0, 0, 0.12); flex-shrink: 0; transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease; }
.video-card:hover { transform: scale(1.03); z-index: 5; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 25px 50px rgba(0, 0, 0, 0.18); }
.video-card video { width: 100%; height: 100%; object-fit: cover; }
.nav-arrow { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); color: #333; border: none; cursor: pointer; z-index: 15; border-radius: 50%; width: 48px; height: 48px; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.2s ease, opacity 0.3s ease, display 0.3s; }
.nav-arrow:active { transform: translateY(-50%) scale(0.9); }
.nav-arrow.disabled { opacity: 0.3; pointer-events: none; }
.prev-arrow { left: 15px; }
.next-arrow { right: 15px; }

@media (max-width: 768px) {
    .video-gallery-section { height: auto; min-height: 100lvh; overflow: visible; }
    .video-gallery-title { font-size: 16pt; padding: 80px 20px 20px; flex-shrink: 0; }
    .video-gallery-wrapper { flex-grow: 1; min-height: 0; overflow: visible; }
    .video-gallery-wrapper .video-carousel-row { display: block; padding: 0; height: 100%; width: 100%; }
    .nav-arrow { width: 36px; height: 36px; font-size: 18px; }
    .video-card { position: absolute; top: 50%; left: 50%; width: 80vw; height: 90%; max-width: 450px; border-radius: 24px; opacity: 0; pointer-events: none; transition: transform 0.7s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.7s ease; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); }
    .video-card:not(.active):not(.prev):not(.next) { transform: translate(-50%, -50%) scale(0.5); }
    .video-card.active { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 10; pointer-events: auto; }
    .video-card.prev { opacity: 0.5; transform: translate(-110%, -50%) scale(0.85); z-index: 5; pointer-events: auto; }
    .video-card.next { opacity: 0.5; transform: translate(10%, -50%) scale(0.85); z-index: 5; pointer-events: auto; }
}
/* --- СТИЛИ БЛОКА 5: ФОТО-ГАЛЕРЕЯ --- */
.photo-gallery-section { display: flex; flex-direction: column; background-color: #fff; min-height: 100vh; height: auto; position: relative; z-index: 2; }
.photo-gallery-title { text-align: center; font-family: 'Lato'; font-weight: 200; font-size: 18pt; padding: 50px 0; flex-shrink: 0; }
.gallery-wrapper { position: relative; width: 100%; flex-grow: 1; min-height: 0; }
.gallery-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px 40px; }
.photo-gallery-section .photo-container { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.photo-gallery-section .photo-container:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); }
.gallery-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-gallery-section .nav-arrow { display: none; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); color: #333; border: none; cursor: pointer; z-index: 15; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.2s ease, opacity 0.3s ease; }
.photo-gallery-section .nav-arrow:active { transform: translateY(-50%) scale(0.9); }

@media (max-width: 992px) { .gallery-container { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) {
    .photo-gallery-section { height: 100lvh; overflow: visible; }
    .photo-gallery-title { text-align: center; font-family: 'Lato'; font-weight: 200; font-size: 18pt; padding: 80px 0 30px; flex-shrink: 0; }
    .gallery-wrapper { overflow: hidden; }
    .gallery-container { display: block; height: 100%; width: 100%; margin: 0; padding: 0; }
    .photo-gallery-section .nav-arrow { display: flex; width: 36px; height: 36px; font-size: 18px; }
    .photo-gallery-section .photo-container { position: absolute; top: 50%; left: 50%; height: 90%; width: auto; aspect-ratio: 3 / 4.5; max-width: 90%; border-radius: 24px; opacity: 0; pointer-events: none; transition: transform 0.7s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.7s ease; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); }
    .gallery-photo { position: absolute; top: 0; left: 0; }
    .photo-gallery-section .photo-container:hover { transform: none; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); }
    .photo-gallery-section .photo-container:not(.active):not(.prev):not(.next) { transform: translate(-50%, -50%) scale(0.5); }
    .photo-gallery-section .photo-container.active { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 10; pointer-events: auto; }
    .photo-gallery-section .photo-container.prev { opacity: 0.5; transform: translate(-110%, -50%) scale(0.85); z-index: 5; pointer-events: auto; }
    .photo-gallery-section .photo-container.next { opacity: 0.5; transform: translate(10%, -50%) scale(0.85); z-index: 5; pointer-events: auto; }
}

/* --- СТИЛИ БЛОКА "LETS WORK TOGETHER" --- */
.lets-work-section {
    height: auto;
    padding: 60px 0;
    background-color: #fff;
}

.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    perspective: 1000px;
}

.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee-animation 25s linear infinite; /* Немного замедлил анимацию */
}

/* Теперь это контейнер для переворачивающейся части */
.marquee-item {
    flex-shrink: 0;
    margin: 0 20px;
    cursor: pointer;
    /* Указываем высоту и ширину здесь */
    width: 300px;
    height: 65px;
}

.marquee-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

/* При наведении на контейнер, переворачиваем внутренний блок по оси X */
.marquee-item:hover .marquee-item-inner {
    transform: rotateX(180deg);
}

/* Общие стили для обеих сторон плитки */
.marquee-item-front,
.marquee-item-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 17px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #333;
}

/* Стиль для лицевой стороны (с текстом) */
.marquee-item-front {
    font-size: 23px;
}

/* Стиль для обратной стороны (с эмодзи) */
.marquee-item-back {
    transform: rotateX(180deg);
    font-size: 30px; /* Делаем эмодзи крупнее */
}


@keyframes marquee-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .lets-work-section {
        padding: 40px 0;
    }
    .marquee {
        padding: 15px 0;
    }
    .marquee-item {
        width: 240px;
        height: 60px;
        margin: 0 15px;
    }
    .marquee-item-front {
        font-size: 18px;
    }
    .marquee-item-back {
        font-size: 26px;
    }
}


/* --- СТИЛИ БЛОКА 6: УСЛУГИ --- */
.services-section { display: flex; flex-direction: column; background-color: #fff; padding-bottom: 40px; height: auto; min-height: 100vh; }
.services-title { text-align: center; font-family: 'Lato', serif; font-weight: 200; font-size: 30pt; padding: 30px 0 60px; }
.services-section .wrapper { width: 100%; padding: 0 10px; box-sizing: border-box; display: flex; justify-content: center; }
.services-section .content-block { display: flex; align-items: stretch; justify-content: center; gap: 2vw; width: 100%; max-width: 1200px; }
.services-section .image-column { flex-shrink: 0; width: 300px; border-radius: 24px; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.services-section .image-column img { width: 100%; height: 100%; display: block; border-radius: 24px; box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.15); object-fit: cover; }
.services-section .text-column { width: 290px; font-weight: 300; line-height: 1.5; font-family: 'Lato', serif; min-height: 40px; flex-shrink: 0; color: #333; padding: 13px; border-radius: 24px; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; background: #ffffff; display: flex; flex-direction: column; }
.services-section .text-column h2 { font-size: 24px; font-family: 'Lato', serif; margin-bottom: 15px; font-weight: 400; text-align: center; }
.services-section .text-column p { font-family: 'Lato', serif; font-size: 16px; font-weight: 300; line-height: 1.8; color: #555; text-align: justify; flex-grow: 1; }

@media (min-width: 769px) {
    .services-section .image-column:hover,
    .services-section .text-column:hover { transform: translateY(-10px); box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.12); }
    .services-section .image-column:hover img { box-shadow: 10px 7px 24px rgba(0, 0, 0, 0.12); }
}

@media (max-width: 768px) {
    .services-section { padding-top: 20px; padding-bottom: 20px; min-height: auto; }
    .services-title { font-size: 24pt; padding: 100px 0 20px; }
    .services-section .wrapper { padding: 0 16px; }
    .services-section .content-block { flex-direction: column; gap: 24px; align-items: center; }
    .services-section .text-column,
    .services-section .image-column { width: 100%; max-width: 400px; border-radius: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: #ffffff; margin: 0; transition: none; box-sizing: border-box; }
    .services-section .image-column { height: 250px; }
    .services-section .image-column img { border-radius: 24px; box-shadow: none; }
    .services-section .text-column { padding: 20px; height: auto; }
    .services-section .text-column h2 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
    .services-section .text-column p { font-size: 14px; line-height: 1.7; }
}
/* --- СТИЛИ БЛОКА 7: ФУТЕР (ПОДВАЛ) --- */
.footer-section { display: flex; justify-content: center; align-items: center; background-image: url('../assets/footer/ladonatag.webp'); background-size: 70%; background-position: center; background-repeat: no-repeat; transition: background-size 0.3s ease-in-out; box-sizing: border-box; }
.glass-footer { width: 80%; max-width: 800px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 24px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); aspect-ratio: 16 / 9; height: auto; max-height: 18vh; display: flex; justify-content: center; align-items: center; }
.footer-content { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; box-sizing: border-box; position: relative; justify-content: center; }
.footer-title { font-size: 21px; font-weight: 500; color: #333; position: absolute; top: 10px; text-align: center; left: 0; right: 0; }
.social-icons { display: flex; justify-content: center; gap: 15px; }
.social-icons a { display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); background-color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; }
.social-icons a:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.social-icons svg { width: 34px; height: 34px; fill: #333; }
.footer-credit { font-size: 12px; color: #555; width: 100%; text-align: center; position: absolute; bottom: 10px; left: 0; right: 0; }

@media (max-width: 600px) {
    .footer-section { display: flex; justify-content: center; align-items: center; height: auto; padding: 80px 15px; background-size: 139%; }
    .glass-footer { width: 100%; aspect-ratio: unset; height: auto; padding: 10px 20px; max-height: none; }
    .footer-content { position: static; }
    .footer-title { display: none; }
    .social-icons { gap:15px; margin-bottom: 15px; }
    .social-icons a { width: 44px; height: 44px; }
    .social-icons svg { width: 22px; height: 22px; }
    .footer-credit { position: static; font-size: 10px; }
}
/* --- ИСПРАВЛЕНИЕ ДЛЯ ПРЫЖКОВ И ПРИЛИПАНИЯ НА МОБИЛЬНЫХ --- */
@media (max-width: 768px) {
    .page-wrapper { scroll-snap-type: y proximity; height: var(--app-height, 100vh); overflow-y: auto; overflow-x: hidden; }
    .scroll-snap-anchor, .video-gallery-section, .photo-gallery-section { scroll-snap-align: start; }
    .scroll-snap-anchor { height: 1px; position: relative; top: -1px; }
    #bottom-anchor { top: 1px; }
    .main-wrapper, .video-gallery-section, .photo-gallery-section { height: var(--app-height, 100vh); min-height: var(--app-height, 100vh); }
}

#background-video::-webkit-media-controls {
    display: none !important;
}

/* --- СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЯ ЯЗЫКОВ "ЗАКЛАДКА" --- */
#language-selector {
    position: fixed;
    top: 0;
    right: 40px; /* ИСПРАВЛЕННЫЙ ОТСТУП */
    z-index: 1000;
    font-family: 'Manrope', sans-serif;
}

#current-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(-10%);
}

#language-selector:hover #current-lang {
    transform: translateY(0);
}

#current-lang .lang-code {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

#current-lang .arrow-down {
    width: 18px;
    height: 18px;
    color: #555;
    transition: transform 0.3s ease;
}

#language-selector.open #current-lang .arrow-down {
    transform: rotate(180deg);
}

#lang-options {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#language-selector.open #lang-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lang-option:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-option.selected {
    font-weight: 700;
    color: #007aff;
    background-color: rgba(0, 122, 255, 0.1);
}

@media (max-width: 768px) {
    #language-selector {
        right: 20px;
    }
    #current-lang {
        padding: 6px 12px;
        border-radius: 0 0 14px 14px;
    }
    #current-lang .lang-code {
        font-size: 12px;
    }
}
.simple-footer {
    text-align: center; /* Центрирует текст */
    padding: 15px 0; /* Добавляет отступ сверху и снизу */
    background-color: #fff; /* Можете изменить цвет фона */
}

.simple-footer a {
    color: #333; /* Цвет ссылки */
    text-decoration: none; /* Убирает подчеркивание */
}

.simple-footer a:hover {
    text-decoration: underline; /* Добавляет подчеркивание при наведении */
}