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

 :root {
     --belyy: #fff;
     --svetlyy: #f5f5f5;
     --svetlo-seryy: #d9d9d9;
     --seryy: #787878;
     --temnyy: #282631;
     --siniy: #0870f3;
     --svetlo-siniy: #1e80fb;
     --zelenyy-1: #e5ff8b;
     --zelenyy-2-osnovnoy: #dcff5c;
     --zelenyy-3: #d4f853;
     --zelenyy-4: #cbf13c;
     --zelenyy-5: #bfef0a;
     --zelenyy-6: #a8d307;
     --belyy-100: rgba(255, 255, 255, 0.1);
     --belyy-300: rgba(255, 255, 255, 0.3);
     --temnyy-300: rgba(40, 38, 49, 0.1);
     --font-family: 'Arial', sans-serif;
 }

 body {
     font-family: var(--font-family);
     background: var(--svetlyy);
     color: var(--temnyy);
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 button {
     cursor: pointer;
     border: none;
     background: none;
 }

 h2 {
     font-family: var(--font-family);
     font-weight: 600;
     font-size: clamp(24px, 2.5vw, 50px);
     line-height: 110%;
     color: #111;
 }

 .blue {
     color: var(--siniy);
 }

 .container {
     width: 100%;
     max-width: 1600px;
     margin: 0 auto;
     padding: 0 40px;
 }

 /* Tablet and mobile padding */
 @media (max-width: 768px) {
     .container {
         padding: 0 20px;
     }
 }

 @media (max-width: 480px) {
     .container {
         padding: 0 15px;
     }
 }

 /* Header Styles */
 .header {
     background: var(--belyy);

 }

 /* ========== ФИКСАЦИЯ ШАПКИ И АНИМАЦИЯ ========== */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background: white;
     /* Убедитесь, что фон есть */
     z-index: 9999;
     transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transform: translateY(0);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     /* Лёгкая тень для фиксации */
 }

 /* Скрытое состояние */
 .header.hide-header {
     transform: translateY(-100%);
 }

 .hContent {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 70px;
     padding: 15px 0;
 }
.butBan svg { 
    transition: 300ms all;

    animation: jump 3s infinite;
}

@keyframes jump {
    0%{
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);

    }
    100%{
        transform: translateY(0);

    }
}
 /* Адаптация хедера */
 @media (max-width: 992px) {
     .hContent {
         gap: 30px;
     }
 }

 @media (max-width: 768px) {


     .hContent {
         flex-wrap: wrap;
         gap: 15px;
     }

     .logo {
         height: 40px;
     }
 }

 .logo {
     height: 50px;
     width: auto;
     transition: 300ms all;
 }

 .logo:hover {
     transform: scale(1.1);
 }

 .hLink {
     font-family: var(--font-family);
     font-weight: 400;
     font-size: clamp(14px, 2.5vw, 16px);
     text-align: center;
     color: var(--seryy);
     padding: 10px 15px;
     transition: 300ms all;
     white-space: nowrap;
 }

 .hLink:hover {
     background: var(--svetlo-seryy);
     color: var(--siniy);
     border-radius: 5px;
 }

 .menu {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     flex-wrap: wrap;
 }

 .butTak {
     display: none;
 }

 /* Адаптивное меню */
 @media (max-width: 768px) {
     .menu {
         display: none;
     }

     .butBan {
         display: none !important;
     }
.hContent{
    display: flex;
    flex-wrap: nowrap;
}
     .butTak {
         display: block;
         font-family: var(--font-family);
         font-weight: 600;
         font-size: 12px;
         line-height: 120%;
         text-transform: uppercase;
         color: var(--belyy);
        background: var(--siniy);
         padding: 15px;
         border-radius: 5px;
     }

     .menu {
         justify-content: center;
     }

     .hLink {
         padding: 8px 12px;
         white-space: nowrap;
     }
 }

 @media (max-width: 550px) {
     .hLink {
         padding: 6px 10px;
         font-size: 13px;
     }
 }

 .hButton {
     background: var(--siniy);
     color: var(--belyy);
     padding: 10px 20px;
     border-radius: 5px;
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: center;
     transition: 300ms all;
     white-space: nowrap;
 }

 .hButton:hover {
     background: var(--svetlo-siniy);
 }

 .hButton:active {
     transform: scale(0.95);
 }

 /* Hero Styles */
 .heroContent {
     width: 100%;
     height: 70vh;
     overflow: hidden;
 }

 @media (max-width: 768px) {
     .heroContent {
         height: 40vh;
     }
 }

 @media (max-width: 480px) {
     .heroContent {
         height: 30vh;
     }
 }

 .hBanner {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .hBanner.mobile {
     display: none;
 }

 @media (max-width: 768px) {
     .hBanner {
         display: none;
     }

     .hBanner.mobile {
         display: block;

     }

     .heroContent {
         height: auto;
     }

     .heroContainer {
         padding: 0;
     }
 }

 .heroAdBox {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto;
     gap: 20px;
     margin-top: 30px;
 }

 /* Адаптация рекламных карточек */
 @media (max-width: 992px) {
     .heroAdBox {
         gap: 15px;
     }
 }

 @media (max-width: 768px) {
     .heroAdBox {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
     }
 }

 @media (max-width: 480px) {
     .heroAdBox {
         grid-template-columns: 1fr;
         gap: 12px;
     }
 }

 .heroAdItem {
     background: var(--belyy);
     border-radius: 10px;
     padding: 20px 15px;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .heroAdItem h3 {
     font-size: clamp(18px, 2.5vw, 22px);
     color: var(--temnyy);
 }

 .heroAdItem p {
     font-size: clamp(14px, 2vw, 16px);
     color: var(--seryy);
 }

 /* Catalog Styles */
 .catalog {
     margin: 100px 0;
 }

 @media (max-width: 768px) {
     .catalog {
         margin: 60px 0;
     }
 }

 @media (max-width: 480px) {
     .catalog {
         margin: 40px 0;
     }
 }

 .catalogContent {
     margin: 50px 0;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 /* Адаптация сетки каталога */
 @media (max-width: 1200px) {
     .catalogContent {
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
     }
 }

 @media (max-width: 768px) {
     .catalogContent {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
         margin: 30px 0;
     }
 }

 @media (max-width: 540px) {
     .catalogContent {
         grid-template-columns: 1fr;
         gap: 20px;
     }
 }

 .catalogButtonBox {
     display: flex;
     justify-content: center;
     margin-top: 30px;
     align-items: center;
 }

 .catalogButton {
     font-weight: 600;
     font-size: 16px;
     line-height: 110%;
     color: #3390ed;
     padding: 18px 70px;
     align-items: center;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     background: var(--belyy);
     border-radius: 5px;
     transition: 300ms all;
     text-align: center;
 }

 /* Адаптация кнопки */
 @media (max-width: 768px) {
     .catalogButton {
         padding: 14px 40px;
         font-size: 15px;
     }
 }

 @media (max-width: 480px) {
     .catalogButton {
         padding: 12px 30px;
         width: 100%;
         max-width: 280px;
         font-size: 14px;
     }
 }

 .catalogButton:hover {
     background: var(--siniy);
     color: var(--belyy);
 }

 .catalogButton:active {
     transform: scale(0.95);
 }

 .catalogItem {
     background: var(--belyy);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     gap: 15px;
     overflow: hidden;
     height: 100%;
     transition: transform 0.2s ease;
 }

 .catalogItem:hover {
     transform: translateY(-5px);
 }

 .catalogItemImage {
     position: relative;
     height: 250px;
     overflow: hidden;
     border-radius: 6px;
 }

 /* Адаптация высоты изображения */
 @media (max-width: 768px) {
     .catalogItemImage {
         height: 220px;
     }
 }

 @media (max-width: 480px) {
     .catalogItemImage {
         height: 200px;
     }
 }

 .catalogItemImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     left: 0;
     top: 0;
     transition: transform 0.3s ease;
 }

 .catalogItem:hover .catalogItemImg {
     transform: scale(1.03);
 }

 .catalogItemImageHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
     z-index: 2;
     position: relative;
 }

 .catalogItemImageHeaderInfo {
     display: flex;
     gap: 5px;
     align-items: center;
     flex-wrap: wrap;
 }

 .catalogItemImageHeaderInfoItem {
     padding: 7px 5px;
     font-family: var(--font-family);
     font-weight: 500;
     font-size: 10px;
     line-height: 120%;
     color: var(--seryy);
     background: var(--belyy);
     border-radius: 3px;
     white-space: nowrap;
 }

 @media (max-width: 480px) {
     .catalogItemImageHeaderInfoItem {
         font-size: 9px;
         padding: 5px 4px;
     }
 }

 .catalogItemBody {
     padding: 20px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 @media (max-width: 480px) {
     .catalogItemBody {
         padding: 15px;
     }
 }

 .catalogItemBody h3 {
     font-size: clamp(18px, 2.5vw, 22px);
     color: var(--temnyy);
     margin-bottom: 10px;
 }

 .catalogItemBody p {
     font-size: clamp(14px, 2vw, 16px);
     color: var(--seryy);
     line-height: 1.4;
 }

 .catalogItemBodyFooter {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     padding-top: 15px;
     margin-top: auto;
     border-top: 1px solid #eee;
     gap: 10px;
 }

 .catalogItemBodyFooterVan {
     font-family: var(--font-family);
     font-weight: 400;
     font-size: clamp(14px, 2vw, 16px);
     line-height: 120%;
     color: #111;
 }

 .catalogItemBodyFooterTu {
     font-family: var(--font-family);
     font-weight: 700;
     font-size: clamp(14px, 3vw, 18px);
     line-height: 120%;
     text-align: right;
     color: #3390ed;
 }

 /* Дополнительные улучшения для touch устройств */
 @media (hover: none) {
     .catalogItem:hover {
         transform: none;
     }

     .catalogItem:hover .catalogItemImg {
         transform: none;
     }

     .logo:hover {
         transform: none;
     }

     .hButton:active {
         transform: scale(0.97);
     }
 }



 /* mobuile menu */


 .menuMob {
     display: none;
 }


 @media (max-width: 768px) {
     .menuMob {
         display: block;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: var(--belyy);
         z-index: 9999;

         height: 60px;
     }

     .menuMobContent {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
     }


     .menuMobItem {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         color: var(--belyy);
         font-size: 18px;
         font-weight: 500;
         transition: 300ms all;
         width: 100%;

         padding: 3px;
     }



     .menuMobItemName {
         font-family: var(--font-family);
         font-weight: 400;
         font-size: 9px;
         text-align: center;
         color: var(--seryy);

         transition: 300ms all;
     }


     .menuMobItem:hover .menuMobItemName {
         color: var(--siniy);
     }

     .menuMobItemIcon {
         width: 35px;
         height: 35px;
     }
 }

 /* footer */

 .footer {
     background: #fff;
     padding: 75px 100px;
 }

 .fContent {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 .fWho {
     font-family: var(--font4);
     font-weight: 400;
     font-size: max(12px, 2.2rem);
     line-height: 130%;
     color: #111;
 }

 .fLeft {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .fLogo {
     height: 54px;
     width: auto;
     margin: 20px 0;
     display: inline-block;
 }

 .fLogo img {
     height: 100%;
     width: auto;
     object-fit: contain;
 }

 .fPolitic {
     font-family: var(--font-family);
     font-weight: 400;
     font-size: max(12px, 1rem);
     line-height: 130%;
     letter-spacing: 0.05em;
     color: #111;
     position: relative;
     width: fit-content;
     text-decoration: none;
 }

 .fPolitic::after {
     content: "";
     width: 100%;
     position: absolute;
     left: 0;
     bottom: -1px;
     height: 1px;
     background: #111;
 }

 .fRight h3 {
     font-family: var(--font4);
     font-weight: 400;
     font-size: max(1rem, 36px);
     line-height: 110%;
     color: #111;
     margin-bottom: 16px;
 }

 .fRight #footerForm {
     margin-top: 20px;
 }

 .fFormText {
     font-family: var(--font-family);
     font-weight: 400;
     font-size: clamp(12px, 1.4rem, 18px);
     line-height: 130%;
     color: #111;
 }

 /* Стили для формы в футере (дополнительно) */
 .fRight .form-group {
     margin-bottom: 20px;
 }

 .fRight .form-group label {
     font-family: var(--font-family);
     font-size: 14px;
     font-weight: 500;
     color: #333;
     margin-bottom: 6px;
     display: block;
 }

 .fRight .form-group input {
     width: 100%;
     padding: 14px 16px;
     font-family: var(--font-family);
     font-size: 15px;
     border: 1px solid #ddd;
     border-radius: 12px;
     transition: all 0.2s;
     box-sizing: border-box;
     background: #fff;
 }

 .fRight .form-group input:focus {
     outline: none;
     border-color: #3390ed;
     box-shadow: 0 0 0 3px rgba(244, 0, 0, 0.1);
 }

 .fRight .form-group.has-error input {
     border-color: #3390ed;
     background-color: rgba(244, 0, 0, 0.02);
 }

 .fRight .checkbox-wrapper {
     margin: 20px 0;
 }

 .fRight .checkbox-wrapper label {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: var(--font-family);
     font-size: 13px;
     color: #666;
     cursor: pointer;
 }

 .fRight .checkbox-wrapper input {
     width: 18px;
     height: 18px;
     cursor: pointer;
     margin: 0;
 }

 .fRight .checkbox-wrapper a {
     color: #3390ed;
     text-decoration: none;
 }

 .fRight .checkbox-wrapper a:hover {
     text-decoration: underline;
 }

 .fRight .checkbox-wrapper.has-error label {
     color: #3390ed;
 }

 .fRight .popup-submit-btn {
     width: 100%;
     background: #3390ed;
     color: #ffffff;
     border: none;
     padding: 14px 24px;
     font-family: var(--font-family);
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     border-radius: 12px;
     transition: all 0.3s ease;
     margin-top: 8px;
 }

 .fRight .popup-submit-btn:hover:not(:disabled) {
     background: #AC0000;
     transform: translateY(-1px);
 }

 .fRight .popup-submit-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }

 /* Сообщения об успехе/ошибке в футере */
 #footerSuccessMsg,
 #footerErrorMsg {
     margin-bottom: 20px;
     padding: 12px 16px;
     border-radius: 12px;
     font-family: var(--font-family);
     font-size: 14px;
 }

 #footerSuccessMsg {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 #footerErrorMsg {
     background: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 /* ========== АДАПТИВ ========== */

 /* Планшеты (768px - 1024px) */
 @media (max-width: 1024px) {
     .footer {
         padding: 50px 60px;
     }

     .fContent {
         gap: 30px;
     }

     .fRight h3 {
         font-size: 32px;
     }

     .fLogo {
         height: 45px;
     }
 }

 /* Планшеты и крупные телефоны (600px - 768px) */
 @media (max-width: 768px) {
     .footer {
         padding: 40px 30px;
     }

     .fContent {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .fLeft {
         flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
         gap: 20px;
     }

     .fLeft .g2 {
         flex: 1;
     }

     .fLogo {
         margin: 0;
         height: 40px;
     }

     .fWho {
         font-size: 14px;
     }

     .fPolitic {
         font-size: 12px;
     }

     .fRight h3 {
         font-size: 28px;
     }

     .fFormText {
         font-size: 14px;
     }

     .fRight .form-group input,
     .fRight .popup-submit-btn {
         padding: 12px 14px;
     }
 }

 .fPolitic.mob {
     display: none;
 }

 /* Мобильные телефоны (до 600px) */
 @media (max-width: 600px) {
     .footer {
         padding: 30px 20px;
     }

     .butBan p {
         font-size: 16px !important;
         text-align: center;
     }

     .fContent {
         gap: 30px;
         justify-items: center;
     }

     .fLeft {
         flex-direction: column;
         align-items: flex-start;
         gap: 25px;
     }

     .fLeft .g2 {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 12px;
         align-items: center;
     }

     .fWho {
         font-family: var(--font4);
         -webkit-text-stroke-width: 0.5px;
         font-size: 20px;
         line-height: 130%;
         color: #111;
         text-align: center;
     }

     .fLogo {
         height: 35px;
         margin: 0;
     }

     .fPolitic {
         display: none;
     }

     .fPolitic.mob {
         display: block;
         font-weight: 400;
         font-size: 14px;
         line-height: 130%;
         letter-spacing: 0.05em;
         color: #111;
         text-align: center;
     }

     .fRight h3 {
         font-size: 24px;
     }

     .fFormText {
         font-size: 13px;
     }

     .fRight .form-group {
         margin-bottom: 16px;
     }

     .fRight .form-group label {
         font-size: 13px;
     }

     .fRight .form-group input {
         padding: 10px 12px;
         font-size: 14px;
     }

     .fRight .checkbox-wrapper label {
         font-size: 12px;
     }

     .fRight .checkbox-wrapper input {
         width: 16px;
         height: 16px;
     }

     .fRight .popup-submit-btn {
         padding: 12px 20px;
         font-size: 15px;
     }

     #footerSuccessMsg,
     #footerErrorMsg {
         font-size: 12px;
         padding: 10px 12px;
     }
 }

 /* Очень маленькие телефоны (до 380px) */
 @media (max-width: 380px) {
     .footer {
         padding: 25px 15px;
     }

     .fRight h3 {
         font-size: 22px;
     }

     .fRight .form-group input {
         padding: 10px;
         font-size: 13px;
     }

     .fRight .popup-submit-btn {
         padding: 10px 16px;
         font-size: 14px;
     }

     .fRight .checkbox-wrapper label {
         font-size: 11px;
         gap: 8px;
     }
 }

 /* Для устройств с высокой плотностью пикселей (Retina) */
 @media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {
     .fLogo img {
         image-rendering: -webkit-optimize-contrast;
     }
 }

 /* Альбомная ориентация на мобильных */
 @media (max-width: 768px) and (orientation: landscape) {
     .footer {
         padding: 30px 40px;
     }

     .fContent {
         gap: 30px;
     }

     .fLeft {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
     }

     .fLeft .g2 {
         flex-direction: row;
         align-items: center;
         gap: 20px;
     }

     .fWho {
         margin: 0;
     }

     .fLogo {
         margin: 0;
     }
 }


 /* Добавьте к существующим стилям футера */

 /* Стили для формы в футере с анимацией как в попапе */
 .footer-form__body {
     transition: all 0.3s ease;
 }

 .footer-form__body.close {
     display: none;
 }

 /* Сообщение об успехе в футере (как в попапе) */
 .footer-success {
     text-align: center;
     padding: 30px 20px;
     background: #ffffff;
     border-radius: 24px;
     margin-top: 20px;
 }

 .footer-success svg {
     width: 60px;
     height: 60px;
     margin-bottom: 20px;
 }

 .footer-success h3 {
     font-family: var(--font4);
     font-size: 24px;
     font-weight: 600;
     color: #111;
     margin-bottom: 10px;
 }

 .footer-success p {
     font-family: var(--font-family);
     color: #666;
     font-size: 14px;
     line-height: 1.5;
 }

 /* Сообщение об ошибке в футере */
 .footer-error {
     text-align: center;
     padding: 15px 20px;
     background: #ffe0e0;
     border-radius: 16px;
     margin-top: 20px;
     animation: slideIn 0.3s ease;
 }

 .footer-error p {
     color: #ab0000;
     font-size: 14px;
     margin: 0;
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Адаптив для сообщений в футере */
 @media (max-width: 768px) {
     .footer-success {
         padding: 20px 15px;
     }

     .footer-success svg {
         width: 50px;
         height: 50px;
     }

     .footer-success h3 {
         font-size: 20px;
     }

     .footer-success p {
         font-size: 13px;
     }
 }

 @media (max-width: 600px) {
     .footer-success {
         padding: 15px 12px;
     }

     .footer-success svg {
         width: 45px;
         height: 45px;
         margin-bottom: 15px;
     }

     .footer-success h3 {
         font-size: 18px;
     }

     .footer-success p {
         font-size: 12px;
     }
 }


 .butBan {
     background: #3390ed;
     padding: 12px 20px;

     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;

     transition: 300ms all;
 }

 .butBan:hover {
     background: #4da4fa;
     transform: scaleX(1.01);

 }

 .butBan:hover * {}


 .butBan p {
     font-family: var(--font-family);
     font-weight: 500;
     font-size: 25px;
     line-height: 100%;
     color: var(--belyy);
 }