:root{ --color1: rgba(76, 115, 255, 1); --color2: rgba(13, 12, 30, 1); --color3: rgba(255, 255, 255, 1); } @font-face { font-family: 'Ubuntu'; src: url('../fonts/Ubuntu-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu'; src: url('fonts/Ubuntu-Bold.woff') format('woff'); font-weight: normal; font-style: bold; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/Ubuntu-Medium.woff') format('woff'); font-weight: normal; font-style: medium; } @font-face { font-family: 'Syne'; src: url('../fonts/Syne-Bold.woff') format('woff'); font-weight: normal; font-style: bold; } .navbar { margin: 0; padding: 0; padding-left: 88px; padding-right: 88px; } section{ padding: 65px 0; } header{ background-image: url(../img/backjpg.jpg); background-size: 100% 100%; /* Растягиваем фон до полного размера, сохраняя пропорции */ background-position: center; /* Центрируем фон по горизонтали и вертикали */ margin-left: 88px; margin-right: 88px; margin-bottom: 65px; padding-left: 50px; padding-right: 50px; padding-top: 71px; padding-bottom: 300px; } .bg-body-color { background-color: rgba(28, 28, 28, 0.05); } .navbar-brand { margin-right: 40px; } .nav-link.active{ font-family: 'Ubuntu'; font-weight: bold; opacity: 1; } .nav-link { margin-right: 20px; font-family: 'Ubuntu'; font-weight: normal; font-size: 18px; color: var(--color2); opacity: 0.7; } .nav-link:hover { opacity: 1; } .btn{ font-family: 'Ubuntu'; font-weight: normal; font-size: 18px; } .list{ color: rgba(255, 255, 255); font-family: Ubuntu; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; opacity: 0.5; } .bosslist{ color: #FFF; font-family: Ubuntu; font-size: 20px; font-style: normal; font-weight: 500; line-height: 123%; /* 19.68px */ letter-spacing: 0.56px; } .active{ color: rgba(255, 255, 255); font-weight: bold; opacity: 1; } footer{ background: #000; padding-top: 65px; padding-bottom: 0; } .list:hover{ opacity: 1; } .textlist{ white-space: nowrap; } h1{ color: var(--, #0C0C1D); text-align: center; font-family: Ubuntu; font-size: 36px; font-style: normal; } h2{ color: var(--, #0C0C1D); text-align: center; font-family: Ubuntu; font-size: 18px; font-style: medium; font-weight: 400; line-height: normal; } .container { position: relative; text-align: center; } .btn-over-image { width: 143px; height: 50px; padding: 11px 21px; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 30px; border: 2px solid #000; margin-top: 58px; } .btn-over-image:hover{ background-color: #FFF; border: 0px; } #firstheader { position: relative; } #h1-special{ color: var(--, #0C0C1D); text-align: center; font-family: Syne; font-size: 39px; font-style: bold; } .card { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 160%); padding-left: 0px; padding-right: 0px; background-color: rgba(255, 255, 255); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } @media (max-width: 1022px) { #h1-special{ font-size: 38px; } } @media (max-width: 1003px) { #h1-special{ font-size: 35px; } } @media (max-width: 769px) { #h1-special{ font-size: 30px; } } @media (max-width: 650px) { #h1-special{ font-size: 20px; } } @media (max-width: 434px) { #h1-special{ font-size: 18px; } } .one{ background-color: rgba(156, 181, 211, 0.5); margin-bottom: 0px; } .two{ background-color: rgba(125, 165, 183, 0.5); margin-bottom: 0px; } .container_two{ margin-left: 176px; margin-right: 165px; margin-bottom: 10px; } .container_three{ margin-left: 176px; margin-right: 165px; margin-bottom: 10px; } .container_four{ margin-left: 176px; margin-right: 165px; margin-bottom: 10px; } @media(max-width: 992px){ .container_two{ margin-left: 100px; margin-right: 90px; } } @media(max-width: 768px){ .container_two{ margin-left: 50px; margin-right: 40px; } } #h1-card{ font-size: 30px; text-align: left; margin-top: 100px; } .card-text{ color: var(--, #0C0C1D); text-align: left; font-family: Ubuntu; font-size: 16px; padding-top: 12px; font-style: normal; font-weight: 400; line-height: 138.9%; letter-spacing: 0.24px; line-height: normal; } .btn-card{ color: #FFF; font-family: Ubuntu; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; display: flex; width: 143px; height: 50px; padding: 11px 21px; margin-top: 44px; justify-content: center; align-items: center; gap: 10px; border-radius: 30px; background: #000; } .btn-card:hover{ background: var(--color1); } #h1-minicard{ color: var(--color1); text-align: left; font-family: Ubuntu; font-size: 36px; font-style: medium; margin-left: 5px; margin-right: 30px; } #p-minicard{ color: var(--, #0C0C1D); text-align: left; font-family: Ubuntu; font-size: 16px; font-style: normal; font-weight: 400; line-height: 138.9%; letter-spacing: 0.24px; line-height: normal; margin-top: -20px; margin-left: 10px; margin-right: 70px; } #boss-card{ position: relative; } .card-mini{ border-radius: 20px; background: #FFF; position: absolute; top: 75%; left: 35%; transform: translate(-50%, -50%); } .card-mini2{ border-radius: 20px; background: #FFF; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 845px){ #h1-card { font-size: 24px; margin-top: 0px; } .card-text { font-size: 14px; } } @media (max-width: 810px){ #h1-minicard{ font-size: 24px; } #p-minicard{ font-size: 12px; margin-right: 10px; } } /* ------------------------------------------------- */ @media (max-width: 991px) { #firstheader { margin-left: 0px; margin-right: 0px; background-size: cover; } } @media (max-width: 302px) { .card-spec{ display:none; } header{ margin-bottom: 0px; } #h1-minicard{ font-size: 18px; } #p-minicard{ font-size: 8px; margin-right: 1px; } .container_two{ margin-left: 30px; margin-right: 10px; } } /* -------------------------------------------------- */ @media (min-width: 561px) { .img-fluid { width: 100%; height: auto; } } @media (max-width: 650px) { .btn-over-image { width: 100px; height: 40px; font-size: 12px; margin-top: 0px; background-color: #FFF; border-radius: 30px; border: 0px; } #firstheader{ padding-bottom: 200px; } .container_two{ margin-left: 10px; margin-right: 10px; } } @media (max-width: 560px) { .img-fluid { width: auto; /* Сохраняем ширину по умолчанию */ height: 50vh; /* Устанавливаем высоту изображения в 100% высоты видимой области экрана (100vh) */ } .glavtext { font-size: 26px; } .maltext { font-size: 14px; } } @media (max-width: 310px) { .img-fluid { width: auto; /* Сохраняем ширину по умолчанию */ height: 50vh; /* Устанавливаем высоту изображения в 100% высоты видимой области экрана (100vh) */ } .glavtext { font-size: 18px; } .maltext { font-size: 12px; } } @media (max-width: 230px) { .img-fluid { width: auto; height: 50vh; } .glavtext { font-size: 14px; } .maltext { font-size: 12px; } .btn-over-image { width: 70px; height: 30px; padding: 5px 15px; font-size: 8px; } #firstheader{ padding-bottom: 100px; } #h1-card { font-size: 14px; margin-top: 0px; } .card-text { font-size: 12px; } .btn-card{ margin-top: 22px; font-size: 12px; width: 100px; height: 35px; padding: 11px 21px; } } #listperenos br{ display: none; } @media (max-width: 270px) { #listperenos br{ display: initial; } } @media (max-width: 380px) { .navbar { padding-left: 0; padding-right: 0; text-align: center; } .navbar-brand { margin-right: 0; /* Убираем правый отступ у логотипа */ } .navbar-toggler { margin-right: 0; /* Убираем правый отступ у кнопки меню */ } .navbar-nav { flex-direction: column; /* Отображаем элементы вертикально */ } .nav-item { margin-right: 0; /* Убираем правый отступ у элементов меню */ } #h1-minicard{ margin-right: 10px; margin-left: 5px; font-size: 13px; } #p-minicard{ margin-right: 10px; margin-left: 5px; } } @media (max-width: 170px) { .navbar-toggler { display: block; position: static; margin-top: 10px; } .navbar-brand { display: block; text-align: center; } .navbar-nav { display: none; } } @media(max-width: 200px){ header{ padding-left: 0; padding-right: 0; } } /* ------------------------------------ */ #zag{ padding-bottom: 97px; } @media(max-width: 230px){ #zag{ font-size: 20px; padding-bottom: 10px; } } .photo-pers{ width: 36px; height: 36px; } .card-comment { position: relative; } .left-top-image { position: absolute; top: 0; left: 20px; padding-top: 8px; } .right-bottom-image { position: absolute; bottom: 50px; right: -8px; padding-right: 18px; } @media(max-width: 200px){ .left-top-image{ width: 24px; height: 24px; } .right-bottom-image{ width: 40px; height: 40px; } } .comm{ padding-top: 40px; padding-bottom: 10px; } .card-comment{ background-color: rgba(255, 255, 255); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); border-radius: 30px; padding-left: 18px; margin-bottom: 20px; } #hcomment, #hcomment2 { display: block; } #hcomment{ color: #000; font-family: Ubuntu; font-size: 14px; font-style: medium; line-height: normal; } #hcomment2{ color: #000; font-family: Ubuntu; font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; margin-top: 5px; } @media (max-width: 170px) { #hcomment{ font-size: 10px; } #hcomment2{ font-size: 6px; } }