@font-face { font-family: 'Helvetica Neue Thin'; src: url('../fonts/HelveticaNeue-Thin.otf'); font-weight: 300; font-style: normal; } /* 300 - Light */ @font-face { font-family: 'Helvetica Neue Light'; src: url('../fonts/HelveticaNeue-Light.otf'); font-weight: 300; font-style: normal; } /* 400 - Regular */ @font-face { font-family: 'Helvetica Neue Regular'; src: url('../fonts/HelveticaNeue-Roman.otf'); font-weight: 300; font-style: normal; } /* 500 - Medium */ @font-face { font-family: 'Helvetica Neue Medium'; src: url('../fonts/HelveticaNeue-Medium.otf'); font-weight: 500; font-style: normal; } /* 700 - Bold */ @font-face { font-family: 'Helvetica Neue Bold'; src: url('../fonts/HelveticaNeue-Bold.otf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Black Ops One'; src: url('../fonts/BlackOpsOne-Regular.otf'); font-weight: 400; font-style: normal; } /* Condensed Bold */ @font-face { font-family: 'Helvetica Neue Condensed Bold'; src: url('../fonts/HelveticaNeue-Condensed-Bold.ttf'); font-weight: 700; font-style: normal; } html { box-sizing: border-box; overflow-x: hidden; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; overflow-x: hidden; min-width: 320px; max-width: 1920px; margin: 0px auto; scroll-behavior: smooth; } body.no-scroll { overflow: hidden; } /* 1. Убираем системный тап‑хайлайт */ * { -webkit-tap-highlight-color: transparent; } *, *::before, *::after { box-sizing: inherit; } a { color: inherit; text-decoration: none; transition: color 0.3s ease; } button { cursor: pointer; } ul { margin: 0; padding: 0; } ul { list-style-type: disc; margin-left: 20px; padding-left: 20px; margin-bottom: 16px; } h1, h2, h3, h4, h5, h6, p { margin: 0; } svg { vertical-align: middle; } blockquote { padding: 0; margin: 0; } body { background-color: var(--black-bg); color: #fff; font-family: 'Helvetica Neue Light', sans-serif; font-size: 20px; } html.no-scroll, body.no-scroll { overflow: hidden; } html.no-scroll-modal, body.no-scroll-modal { overflow: hidden; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Для Firefox */ input[type=number] { -moz-appearance: textfield; } :root { --black: #1F1F1F; --black-bg: #1F1F1F; --gray: #CCCCCC; --gray-text: #A0A0A0; --yellow: #ffe457; } input { color: var(--black) !important; } /* Кастомный скролл на странице */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--black); border-radius: 8px; } ::-webkit-scrollbar-thumb { background-color: var(--yellow); } /* Кастомный скролл для Firefox */ @-moz-document url-prefix() { * { scrollbar-color: var(--black) transparent; scrollbar-width: thin; } } .h1 { color: var(--gray); font-family: 'Helvetica Neue Regular', sans-serif; font-weight: 500; font-size: 100px; font-size: clamp(48px, 5vw, 100px); line-height: 90%; letter-spacing: -0.02em; margin-bottom: 30px; } .h2 { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: clamp(32px, 5vw, 64px); line-height: 90%; letter-spacing: -0.02em; margin-bottom: 30px; } .h3 { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 32px; line-height: 90%; letter-spacing: -0.02em; } /* Шапка */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; min-width: 320px; max-width: 1920px; margin: 0px auto; background-color: var(--black-bg); transition: transform 0.8s cubic-bezier(.2,.9,.2,1), box-shadow 0.8s ease; will-change: transform; } .header--hidden { transform: translateY(-100%); } .header--visible { box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .header-container { padding: 0px 60px; } .header-content { padding: 25px 0px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #525252; } .header-omni-logo svg path { transition: fill 0.3s ease; fill: white; } .header-omni-logo:hover svg path { fill: yellow; } .header-links { display: flex; align-items: center; gap: 63px; } .header-links a { font-family: 'Helvetica Neue Regular', sans-serif; font-size: 18px; transition: all 0.3s ease; } .header-links a:hover { color: var(--yellow); } .telegram-link { display: flex; align-items: center; gap: 6px; text-decoration: none; transition: color 0.3s ease; } .telegram-link p { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: underline; color: #fff; transition: color 0.3s ease, text-decoration-color 0.3s ease; text-decoration-color: #fff; } .telegram-link div { background-color: #fff; padding: 2px 20px; border-radius: 100px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .telegram-link svg path { transition: fill 0.3s ease; } .telegram-link:hover p { color: var(--yellow); text-decoration-color: var(--yellow); } .telegram-link:hover div { background-color: var(--yellow); } .telegram-link:hover svg path { fill: var(--black); } .header-telegram { display: none; } .header-telegram a { background-color: #fff !important; color: var(--black) !important; } /* .header-telegram a:hover { background-color: var(--yellow) !important; } */ .mobile-header { display: none; } .burger-menu { position: fixed; top: 73px; left: 0; width: 100%; height: 100vh; background: var(--black-bg); z-index: 9999; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0px 40px; box-shadow: none; display: none; } .burger-menu.active { transform: translateX(0); } .omni-logo { position: absolute; bottom: 120px; right: 20px; } .omni-logo a svg path { transition: fill 0.3s ease; fill: #2c2c2c; } .omni-logo a:hover svg path { fill: yellow; } .burger-nav { display: flex; flex-direction: column; gap: 0px; } .burger-nav a { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 24px; line-height: 90%; letter-spacing: -0.02em; color: white; padding: 12px; border-bottom: 1px solid #2c2c2c; transition: color 0.3s ease; } /* Открытие/закрытие бургер меню */ .burger-menu-btn { position: relative; z-index: 1002; width: 40px; height: 40px; background: none; border: none; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 10px; background-color: #fff; border-radius: 100px; transition: background-color 0.3s ease; } .burger-menu-btn span { display: block; width: 20px; height: 2px; background-color: var(--black); border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .burger-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); width: 20px; } .burger-menu-btn.active span:nth-child(2) { opacity: 0; transform: scale(0); } .burger-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 20px; } /* Адаптив шапки */ @media (max-width: 1500px) { .header-container { padding: 0px 40px; } } @media (max-width: 1100px) { .header-links, .telegram-link { display: none; } .header-telegram, .burger-menu-btn { display: flex; } .mobile-header { display: flex; align-items: center; gap: 11px; } .header-content { padding: 16px 0px; } .burger-menu { display: block; } } @media (max-width: 700px) { .header-container { padding: 0px 16px; } .burger-menu { padding: 0px 16px; } .h1 { margin-bottom: 24px; } } /* Главный баннер */ .main { background-color: var(--black-bg); } .main-banner { padding: 0px 60px; padding-top: 135px; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding-bottom: 80px; } .main-banner-title { max-width: 1100px; width: 100%; } .main-banner-title span { color: rgba(255, 255, 255, 0.6); } .main-banner-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; } .welcome-banner { max-width: 575px; width: 100%; background-color: #2b2b2b; padding: 33px 52px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; } .welcome-banner-icon { position: absolute; bottom: 0; right: 0; z-index: -1; } .welcome-banner-text { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 18px; line-height: 140%; } .welcome-banner-author { display: flex; align-items: center; gap: 8px; } .welcome-banner-author img { width: 40px; height: 40px; border-radius: 100px; object-fit: cover; border: 1px solid rgba(82, 82, 82, 1); } .welcome-banner-author p { font-family: 'Helvetica Neue Regular', sans-serif; font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .partnership { width: 494px; } /* Адаптив главного баннера */ @media (max-width: 1500px) { .main-banner { padding: 0px 40px; padding-top: 135px; padding-bottom: 80px; } } @media (max-width: 1200px) { .main-banner-bottom { flex-direction: column; align-items: flex-start; width: 100%; } .partnership, .welcome-banner { max-width: 100%; width: 100%; } .partnership img { width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 700px) { .main-banner { padding: 0px 16px; padding-top: 110px; padding-bottom: 40px; } .welcome-banner { padding: 20px 12px; } .welcome-banner-text { font-size: 16px; } .welcome-banner-icon svg { flex-shrink: 0; width: 60px; height: 60px; } } /* Секция "Кто мы такие?" */ .who-are-we { background-color: #fff; padding: 80px 60px 0px 60px; color: var(--black); display: grid; grid-template-columns: 0.41fr 1fr; align-items: flex-end; } .omni-big-logo { display: inline-flex; color: #f5f5f5; transition: color 0.3s ease; } .omni-big-logo:hover { color: var(--yellow); } .who-are-we-right { display: flex; flex-direction: column; align-items: flex-end; } .who-are-we-right-top .h1 { padding-right: 40px; } .who-are-we-title { max-width: 1120px; width: 100%; } .who-are-we-title span { text-decoration: underline; } .no-break { white-space: nowrap; text-decoration: none !important; } .we-card-icon { margin-bottom: 32px; } .we-card-title { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; line-height: 110%; letter-spacing: -0.01em; margin-bottom: 12px; } .who-are-we-title a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; transition: color 0.3s ease, text-decoration-color 0.3s ease; } .who-are-we-title a:hover { color: var(--yellow); text-decoration-color: var(--yellow); } .we-card-text { color: var(--gray-text); font-family: 'Helvetica Neue Regular', sans-serif; font-size: 18px; line-height: 140%; } .who-are-we-cards { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .who-are-we-card { position: relative; padding: 20px 24px 24px 24px; background-color: #f5f5f5; transition: all 0.3s ease; z-index: 2; } .who-are-we-card:hover { background-color: var(--yellow); } .we-card-absolute-icon { position: absolute; top: 0; right: 0; z-index: -1; } /* Адаптив секции "Кто мы такие?" */ @media (max-width: 1500px) { .who-are-we { grid-template-columns: 0.3fr 1fr; padding: 80px 40px 0px 40px; } } @media (max-width: 1420px) { .who-are-we { grid-template-columns: 1fr; } .who-are-we-left { display: none; } } @media (max-width: 1100px) { .who-are-we-cards { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 700px) { .who-are-we { padding: 60px 16px 0px 16px; } .who-are-we-card { padding: 16px 16px 20px 16px; } .we-card-icon { margin-bottom: 24px; } .we-card-title { font-size: 18px; margin-bottom: 8px; } .we-card-text { font-size: 16px; } .icon-1 svg { flex-shrink: 0; width: 60px; height: 40px; } .icon-2 svg { flex-shrink: 0; width: 40px; height: 40px; } .icon-3 svg { flex-shrink: 0; width: 60px; height: 60px; } } /* Секция "Что мы предлагаем?" */ .our-solutions { background-color: #fff; padding: 120px 60px; color: var(--black); display: flex; align-items: center; justify-content: center; position: relative; display: grid; grid-template-columns: 0.41fr 1fr; } .our-solutions-container { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; } .our-solutions-content { max-width: 740px; width: 100%; } /* .omni-big-logo-container { position: absolute; bottom: 120px; right: 60px; } */ .our-solutions-desc-title { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; line-height: 110%; letter-spacing: -0.01em; margin-bottom: 4px; } .our-solutions-desc-text { font-family: 'Helvetica Neue Regular', sans-serif; color: var(--gray-text); font-size: 18px; line-height: 140%; } .our-solutions-descs { margin-top: 10px; display: flex; flex-direction: column; gap: 20px; } .our-solutions-text { margin-top: 40px; display: flex; flex-direction: column; font-family: 'Helvetica Neue Regular', sans-serif; color: var(--black); font-size: 18px; line-height: 140%; } .our-solutions-text p { margin-bottom: 20px; } .our-solutions-text p:has(+ ol) { margin-bottom: 0; } .our-solutions-text ol { padding: 0; margin: 0; margin-top: 20px; padding-left: 30px; } .our-solutions-video { margin-top: 40px; position: relative; overflow: hidden; } .our-solutions-video::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; } .our-solutions-video img { width: 100%; max-height: 402px; height: auto; object-fit: cover; display: block; } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; border: 3px solid #fff; border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 2; } .play-btn:hover { transform: translate(-50%, -50%) scale(1.1); } .play-btn svg { width: 30px; height: 33px; display: block; margin-left: 5%; } .open-link-container { margin-top: 24px; display: flex; justify-content: flex-end; } .open-link { display: flex; align-items: center; gap: 6px; text-decoration: none; transition: color 0.3s ease; } .open-link { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: underline; color: var(--black); transition: color 0.3s ease, text-decoration-color 0.3s ease; text-decoration-color: var(--black); } .open-link div { background-color: var(--black); padding: 2px 20px; border-radius: 100px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .open-link svg path { transition: fill 0.3s ease; } .open-link:hover { color: var(--yellow); text-decoration-color: var(--yellow); } .open-link:hover div { background-color: var(--yellow); } .open-link:hover svg path { fill: var(--black); } /* Адаптив секции "Что мы предлагаем" */ @media (max-width: 1500px) { .our-solutions { grid-template-columns: 0.3fr 1fr; padding: 120px 40px; } } @media (max-width: 1420px) { .our-solutions { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .omni-big-logo-container { display: none; } .our-solutions-content { max-width: 100%; } .our-solutions-video img { max-height: 100%; } } @media (max-width: 700px) { .our-solutions { padding: 80px 16px; } .our-solutions-descs { margin-top: 0px; } .our-solutions-desc-title { font-size: 18px; } .our-solutions-desc-text { font-size: 16px; } .our-solutions-text { margin-top: 24px; font-size: 16px; } .our-solutions-text p { margin-bottom: 10px; } .our-solutions-video { margin-top: 24px; } .open-link { font-size: 18px; } } /* Секция "Коммерческое предложение" */ .commercial-offer { background-color: #fff; padding: 0px 60px; color: var(--black); } .commercial-offer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 40px; } .commercial-offer-title { margin-bottom: 0px; max-width: 1110px; width: 100%; } .commercial-offer-head p { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; line-height: 110%; letter-spacing: -0.01em; max-width: 370px; width: 100%; } .commercial-offer-card { width: 100%; display: grid; grid-template-columns: 1.05fr 1.8fr 1fr; justify-content: end; column-gap: 40px; padding: 16px; border-top: 1px solid var(--gray-text); padding-right: 16px; } .offer-card-time-price-container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; } .offer-card-time { display: flex; align-items: center; justify-content: center; } .commercial-offer-card:last-child { border-bottom: 2px solid var(--black); } .commercial-offer-card p, .offer-total-price-container p, .included-price-card p { font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 18px; line-height: 140%; } .included-price-card-role { font-size: 20px !important; } .offer-card-desc, .included-price-card-desc { color: var(--gray-text); } .offer-card-time, .offer-card-price, .offer-card-desc, .offer-total-price-title, .offer-total-price-time, .offer-total-price { display: flex; align-items: center; justify-content: flex-end; } .offer-total-price-container { width: 100%; display: grid; grid-template-columns: 1.8fr 1fr 1fr; justify-content: end; column-gap: 40px; padding: 40px 16px; position: relative; } .offer-total-price-container::after { content: ""; position: absolute; bottom: 0; right: 0; width: 50%; height: 1px; background-color: var(--black); } .offer-total-price-and-time { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; } .offer-total-price-time { text-align: center; } /* Адаптив секции "Коммерческое предложение" */ @media (max-width: 1500px) { .commercial-offer { padding: 0px 40px; } } @media (max-width: 1100px) { .commercial-offer-head { flex-direction: column; align-items: flex-start; gap: 16px; } .commercial-offer-card { grid-template-columns: 1fr; align-items: flex-start; justify-content: flex-start; gap: 12px; } .offer-card-time, .offer-card-price, .offer-card-desc, .offer-total-price-title, .offer-total-price-time, .offer-total-price { justify-content: flex-start; } .offer-total-price-container::after, .invisible { display: none; } .offer-total-price-container { padding: 20px 0px; grid-template-columns: 1fr; gap: 12px; } .offer-total-price-time { text-align: left; } .open-link-container { justify-content: flex-start; } .offer-total-price-time { padding-right: 50px; } .offer-card-time-price-container, .offer-total-price-and-time { justify-items: flex-start; } .commercial-offer-card { padding: 20px 0px; } } @media (max-width: 700px) { .commercial-offer { padding: 0px 16px; } .commercial-offer-head p { font-size: 18px; } .commercial-offer-head { margin-bottom: 24px; } .offer-card-desc, .offer-card-time, .offer-card-price, .offer-total-price-title, .offer-total-price-time, .offer-total-price { font-size: 16px !important; } } /* Секция "Входит в стоимость" */ .included-price { background-color: #fff; padding: 80px 60px 120px 60px; color: var(--black); } .included-price-head { display: grid; grid-template-columns: 0.41fr 1fr; margin-bottom: 24px; } .included-price-head .h2 { margin-bottom: 0px; } .included-price-title { color: var(--gray); } .included-price-cards { width: 100%; display: flex; flex-direction: column; } .included-price-card { width: 100%; display: grid; grid-template-columns: 0.55fr 0.38fr 1fr; justify-content: end; column-gap: 40px; padding: 16px 0px; padding-right: 20px; border-top: 1px solid var(--gray-text); } .included-price-card:last-child { border-bottom: 1px solid var(--gray-text); } /* Адаптив секции "Входит в стоимость" */ @media (max-width: 1500px) { .included-price { padding: 80px 40px 120px 40px; } } @media (max-width: 1100px) { .included-price-card { grid-template-columns: 1fr; gap: 12px; padding: 20px 0px; } .included-price-head { grid-template-columns: 1fr; } } @media (max-width: 700px) { .included-price { padding: 40px 16px 80px 16px; } } /* Секция "Проекты" */ .projects { background-color: #fff; color: var(--black); padding: 0px 60px; } .projects-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .projects-head-title { margin-bottom: 0px; } .projects-cards { display: flex; flex-direction: column; } .project-card { width: 100%; padding: 32px 0px; border-top: 1px solid var(--black); display: grid; grid-template-columns: 1fr 1fr; gap: 31px; } .project-card-right { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .project-card-right-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-end; gap: 16px; } .project-card-left img { width: 100%; height: 100%; object-fit: cover; } .project-card:last-child { border-bottom: 1px solid var(--black); } .project-card-title { text-decoration: underline; color: var(--black); transition: all 0.3s ease; } .project-card-title:hover { color: var(--yellow); text-decoration-color: var(--yellow); } .project-card-subtitle { color: var(--gray-text); margin-top: 16px; font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 18px; line-height: 140%; max-width: 350px; width: 100%; } .project-card-desc { font-family: 'Helvetica Neue Regular', sans-serif; font-size: 18px; line-height: 140%; } .project-card-banners { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .project-card-banner { display: inline-block; font-family: 'Helvetica Neue Medium', sans-serif; font-weight: 500; font-size: 20px; line-height: 110%; border: 1px solid var(--black); padding: 4px 8px; border-radius: 100px; } /* Адаптив секции "Проекты" */ @media (max-width: 1500px) { .projects { padding: 0px 40px; } .project-card-right-bottom { grid-template-columns: 1fr; } .project-card-banners { flex-wrap: wrap; flex-direction: row; } } @media (max-width: 1100px) { .projects-head { flex-direction: column; align-items: flex-start; gap: 16px; } .project-card { grid-template-columns: 1fr; gap: 16px; padding: 20px 0px; } } @media (max-width: 700px) { .projects { padding: 0px 16px; } .projects-head { margin-bottom: 24px; } .project-card-subtitle { font-size: 16px; } .project-card-desc, .project-card-banner { font-size: 18px; } } /* Footer */ .footer { background-color: #fff; padding: 120px 60px 60px 60px; color: var(--black); } .footer-content { display: grid; grid-template-columns: 1fr 0.96fr; } .footer-logo { align-self: end; } .footer-logo a { color: #F5F5F5; transition: all 0.3s ease; } .footer-logo a:hover { color: var(--yellow); } .contact-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: space-between; padding: 16px 0px; border-top: 1px solid var(--black); gap: 30px; } .contact-card:last-child { border-bottom: 1px solid var(--black); } .contact-card-title { font-family: 'Helvetica Neue Regular', sans-serif; font-size: 20px; line-height: 110%; letter-spacing: -0.01em; color: var(--gray); } .contact-card-link a { color: var(--black); transition: all 0.3s ease; } .contact-card-link a:hover { color: var(--yellow); } .contact-card-link-icon a { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--black); transition: all 0.3s ease; color: #fff; } .contact-card-link-icon a:hover { background-color: var(--yellow); color: var(--black); } /* Адаптив Footer */ @media (max-width: 1500px) { .footer { padding: 120px 40px 60px 40px; } .contact-card-title, .open-link p { font-size: 18px; } .h3 { font-size: 24px; } } @media (max-width: 1100px) { .footer-content { grid-template-columns: 1fr; gap: 40px; grid-auto-flow: dense; } .footer-logo { order: 2; align-self: start; } .footer { padding: 80px 40px 20px 40px; } .open-link-container-footer { justify-content: flex-end; } } @media (max-width: 700px) { .footer { padding: 80px 16px 20px 16px; } .contact-card { padding: 12px 0px; grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 450px) { .footer-logo a svg { width: 100%; height: 100%; } } /* Модальное окно для просмотра видео */ .close-video { position: absolute; top: 5px; right: 15px; font-size: 28px; color: var(--black); cursor: pointer; z-index: 10; } .modal-video-about { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100vw; height: 100vh; min-width: 340px; min-height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); justify-content: center; align-items: center; } .modal-content-video-about { position: relative; max-width: 90vw; max-height: 90vh; background: #000; border-radius: 12px; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 0; } .modal-content-video-about video { max-width: 100%; max-height: 100%; width: auto; max-height: 800px; height: auto; object-fit: contain; background-color: #000; opacity: 0; transition: opacity 1s ease; } .modal-content-video-about video.visible { opacity: 1; } .modal-video-about { display: none; opacity: 0; transition: opacity 300ms ease; } .modal-video-about.show { display: flex; opacity: 1; }