.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.cormorant-garamond-<uniquifier> {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Применение шрифта к элементам */
body {
   font-family: "Montserrat", sans-serif;
}
a{
        text-decoration: inherit;
}
a:not([class]) {
    text-decoration: inherit;
}

h1, h2, h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    letter-spacing: -1px;
}
.fonb{
    --tw-gradient-stops: var(--tw-gradient-from), rgb(17 24 39 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
a {
    color: inherit;
    text-decoration: inherit;
}
.font-bold {
       font-weight: 500;
   }



/* ============================================ */
/* ФОНОВЫЙ БАННЕР С АДАПТАЦИЕЙ                  */
/* ============================================ */

.fonban {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Для десктопов (1024px и выше) */
@media (min-width: 1024px) {
    .fonban {
        min-height: 100vh;
    }
    
    .fonban-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .fonban-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* Затемнение поверх картинки */
    .fonban-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        z-index: 2;
        pointer-events: none;
    }
    
    .zagban {
        position: relative;
        z-index: 3;
        max-width: 1060px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 2rem;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .zagban1 {
        padding-left: 13.5rem;
        padding-right: 1.5rem;
        color: #fff;
        width: 100%;
    }
}

/* Для планшетов (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .fonban {
        min-height: 80vh;
    }
    
    .fonban-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .fonban-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }
    
    .fonban-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.7));
        z-index: 2;
        pointer-events: none;
    }
    
    .zagban {
        position: relative;
        z-index: 3;
        max-width: 1060px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 2rem;
        min-height: 80vh;
        display: flex;
        align-items: center;
    }
    
    .zagban1 {
        padding-left: 6rem;
        padding-right: 2rem;
        color: #fff;
        width: 100%;
    }
}

/* Для мобильных (до 767px) - текст поверх картинки */
@media (max-width: 767px) {
    .fonban {
        min-height: 100vh;
        position: relative;
    }
    
    /* Картинка как абсолютный фон */
    .fonban-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .fonban-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 40%;
    }
    
    /* Затемнение поверх картинки */
    .fonban-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.6));
        z-index: 2;
        pointer-events: none;
    }
    
    /* Текст поверх картинки */
    .zagban {
        position: relative;
        z-index: 3;
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 2rem 1rem;
    }
    
    .zagban1 {
        padding: 80px 20px 40px 20px;
        color: #fff;
        text-align: center;
        width: 100%;
    }
    
    .zagban2 span {
        font-size: 10px;
        padding: 3px 8px;
        background-color: rgb(2 132 199);
    }
    
    .zagban3 h1 {
        font-size: 32px;
        line-height: 1.2;
        margin: 1rem 0;
    }
    
    .zagban3 h1 span {
        font-size: 36px;
        color: rgb(2 132 199);
    }
    
    .zagban4 {
        font-size: 14px;
        padding-left: 15px;
        margin: 20px 0;
        border-left-width: 4px;
        border-left-color: rgb(2 132 199);
        text-align: left;
    }
    
    .button-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px 0;
    }
    
    .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
    }
}

/* Для очень маленьких мобильных (до 480px) */
@media (max-width: 480px) {
    .zagban3 h1 {
        font-size: 28px;
    }
    
    .zagban3 h1 span {
        font-size: 30px;
    }
    
    .zagban4 {
        font-size: 12px;
    }
    
    .fonban-bg-image {
        object-position: center 45%;
    }
}





/* Для маленьких мобильных */
@media (max-width: 480px) {
    .zagban3 h1 {
        font-size: 28px;
    }
    
    .zagban3 h1 span {
        font-size: 30px;
    }
    
    .zagban1 {
        padding: 80px 15px 30px 15px;
    }
}




.container-header{
    background:none;
    box-shadow:none;
        height: 0;
}
.hedcon{
    max-width: 1536px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    
}
.grid-child{
    margin-left: 0;
    margin-right: 0;
    display: flex;
    width: 100%;
    max-width: 880px;
    align-content: center;
    justify-content: center !important;
}
.alog{
    display: flex;
    align-items: center;
}
.imglogo{
   width: 6em;
}
.txtlogo{
             padding: 20px;
    width: 100%;
    max-width: 265px;
        flex-direction: column;
        text-align: left;
            letter-spacing: -1px;
}
.text-2xl{
       font-size: 1.5rem;
        line-height: 2rem;
}
.text-2x2{
       font-size: 15px;
    font-weight: 500;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(var(--white-rgb), var(--text-opacity)) !important;
}
.text-whitelogo {
    --tw-text-opacity1: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-grey {
        --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
.container-header .mod-menu{
            display: flex;
        flex-wrap: nowrap;
}
.mod-list li{
    
}
.mod-list li li{
  text-align: left;  
}
.mod-list li li a{
    letter-spacing: 0.1em !important;
    text-transform: inherit !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 10px !important;
    font-weight: 700;
    display: block;
}
.mod-list li li a:hover{
    color: rgb(2 132 199) !important;
    text-decoration: inherit;
}

.mod-list a:hover{
    
}
.tracking {
   
}
.tel{
   display: flex; 
}
.tel1{
      color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    display: flex;
    width: 100%;
        gap: 1rem;
}
.tel1 span{
     font-weight: 700;
     font-size: 13px;
     
}
.telspanmin{
    font-weight: 700;
    font-size: 10px !important;
        opacity: 0.6;
    
}
.tel2 {
text-align: right;
}
#mod-menu1{
 display: flex;
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
}
#mod-menu1 a{
letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color:rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.container-header .mod-menu>li.active:after, .container-header .mod-menu>li:hover:after{
        background-color: rgb(2 132 199 );
}
.zagban{
    max-width: 1170px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem; 
        position: absolute;
}
.zagban1{
    padding-left: 13.5rem;
    padding-right: 1.5rem;
    color: #fff;
    padding-top: 15rem;
    
}
.zagban2{
     
            font-size: 1rem;
        line-height: 3rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
}
.zagban2 span{
      --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    padding: 5px 10px;
       
} 
.zagban3{
	   
    
}
.zagban3 h1{
   font-size: 5.5rem;
        line-height: 1;
	text-shadow: 2px 2px 4px black;
}

.zagban3 span{
    color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.zagban4{
   border-left-width: 4px;
   font-size: 1.25rem;
        line-height: 1.75rem;
            --tw-border-opacity: 1;
    border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
    padding-left: 30px;
	    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.7));
}
  .button-container {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .btn {
            display: inline-block;
            padding: 14px 35px;
            font-family: 'Gotham Pro Narrow', Arial, sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        /* Кнопка "Бесплатная консультация" - золотая */
        .btn-consult {
            background:rgb(2 132 199 / var(--tw-bg-opacity, 1));
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .btn-consult::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: #272c38;
            transition: all 0.4s ease;
            z-index: -1;
        }

        .btn-consult:hover {
            color: #fff;
        }

        .btn-consult:hover::before {
            left: 0;
        }

        /* Кнопка "Наши услуги" - белая */
        .btn-services {
                background-color: #272c38;
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        .btn-services::before {
            content: '';
            position: absolute;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100%;
            background: #ffffff;
            transition: all 0.4s ease;
            z-index: -1;
        }

        .btn-services:hover {
            color: #0a0a0a;
        }

        .btn-services:hover::before {
            right: 0;
        }

        /* Эффект нажатия */
        .btn:active {
            transform: scale(0.98);
        }

.pol{
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
   padding-top: 3rem;
        padding-bottom: 3rem;
        border-top-width: 1px;
    border-bottom-width: 1px;
        border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
        color:#fff;
}
.polfon{
   display: block;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto; 
}
.polfon1{
    display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));  
}
.polfon2{
 display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.text-AGROUP-accent {
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.nkom {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.nkom1 {
    width: 100%;
}

.nkom2 {
    
    margin-bottom: 3rem;
}

.nkom2 h2 {
    font-size: 2.5rem;
    
    margin-top: 0.5rem;
}

/* ГЛАВНОЕ - делаем карточки в ряд */
.nkom3 {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
}

/* Стили для карточки */
.card {
    flex: 1;
    min-width: 280px;
    max-width: calc(33.333% - 20px);
    height: 100%;
        overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border:1px solid #0284c7;
}

/* Контейнер изображения */
.image-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .image-container img {
    transform: scale(1.1);
}

/* Контент карточки */
.card-content {
    padding: 20px;
}

.card-content h3 {
    color: #0284c7;
    font-size: 1.125rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.card-content p {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    font-size: 12px;
    line-height: 1.5;
}
.pcard{
color: #0284c7 !important;
    font-size: 15px !important;
    font-weight: bold;
        letter-spacing: 0.1em;
}
.ptxtcard{
color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    font-size: 12px !important;
    font-weight: bold;
     text-transform: uppercase;
         letter-spacing: 0.1em;
}
.pcard1{
display: flex;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
    
    flex-direction: row;
    justify-content: space-between;
    margin-top: auto;
}
.soz{
       display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 2rem; 
}
.soz1{
  display: flex;
    justify-content: space-between;
    align-items: center;  
	    padding-top: 30px;
}
.soz2{
  width: 100%;   
}
.soz3{
       padding: 0 40px;
    width: 100%; 
}
audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}
.ostxt{
    display: flex;
    align-items: center;
        color: #0284c7;
}
.ostxt1{
   font-size: 2.25rem;
        line-height: 7rem;
}
.ostxt2{
      font-style: italic;
              font-size: 1.125rem;
        line-height: 1.75rem;
            --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        padding-bottom: 45px;
}
.ostxt3{
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
font-size: 1rem;
        line-height: 1.5rem;
            padding-bottom: 45px;
    
}
.ostxt4{
    
}
.ostxt4 a{
--tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    font-size: 1.5rem;
    line-height: 1rem;
    text-transform: uppercase;
    font-weight: bold;
}


.ostxt4 a:hover {
    color:#203240;
}


.mirab{
       
        --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
position: relative;
overflow: hidden;
}
.mirab-fon{
      z-index: 0;
      inset: 0px;
          position: absolute;
}
.mirab-fon-img{
    opacity: 0.1;
        object-fit: cover;
            width: 100%;
            height: 100%;
}
.mirab1{
    padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-left: auto;
    margin-right: auto;
    z-index: 10;
    position: relative;
    max-width: 1536px;
    width: 100%;
        padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    
}
.mirab2{
    
}
.mirab2 h3{
            font-size: 2.875rem;
        line-height: 2.25rem;
            letter-spacing: -0.025em;
                margin-bottom: 1rem;
                    text-align: center;
}
.mirab2pol{
  --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    width: 4rem;
    height: 0.25rem;
    margin-left: auto;
    margin-right: auto;
}
.mirabchi{
        display: grid;
            text-align: center;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 3rem;
                padding-top: 2rem;
}
.mirabchi1{
display: flex;
flex-direction: column;
align-items: center;
    position: relative;
}
.mirabchi11{
             width: 5rem;
                  height: 5rem;
        margin-bottom: 1.5rem;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        background-color: rgb(255 255 255 / 0.1);
border-radius: 9999px;
justify-content: center;
    align-items: center;
        display: flex; 
}
.mirabchi11:hover{
      --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));

  
}
.mirabchi1 h3{
   font-size: 1.25rem;
        line-height: 1.75rem;
            font-weight: 700;
}
.mirabchi1 p{
  font-size: 0.875rem;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        max-width: 250px;
}
.textma{
   font-size: 1.875rem;
        line-height: 2.25rem;
        font-weight: 700;
}
.mirabchi2{
   display: flex;
flex-direction: column;
align-items: center;
    position: relative; 
}


.mirabchi3{
    display: flex;
flex-direction: column;
align-items: center;
    position: relative;
}
.prem{
            padding-top: 6rem;
        padding-bottom: 6rem;
}
.prem1{
padding-left: 1.5rem;
        padding-right: 1.5rem;
                max-width: 1536px;
                width: 100%;
                    margin: 0 auto;
}
.prem2{
gap: 4rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
            align-items: center;
}
.prem2 h3{
           font-size: 2.25rem;
        line-height: 2.5rem;
            --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.zagprem{
  font-size: 0.75rem;
        line-height: 1rem;
        --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    letter-spacing: 0.1em;
        text-transform: uppercase;
            font-weight: 700;
}
.prem3{

}
.prem4{

}
.prem5{

}
.prem6{

}
.fotoprem{
    height: 400px;
    margin-top: 0px;
    position: relative;
}
.fotoprem img{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        object-fit: cover;
            border-radius: 0.125rem;
                width: 100%;
                    height: 100%;
                    max-width: 100%;
}
.premprechis{
        row-gap: 1rem;
            column-gap: 1.5rem;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            display: grid;
}
.premprechis-vot{
        display: flex;
        gap: 1rem;
}
.premprechis-vot1{
        flex-shrink: 0;
}
.premprechis-votsvg{
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    border-radius: 9999px;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
            height: 2.5rem;
            display: flex;
}
.premprechis h4{
     --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}
.premprechis p{
        --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
            font-size: 0.75rem;
        line-height: 1rem;
}
.obsv{
  padding-top: 6rem;
        padding-bottom: 6rem;
            --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
        position: relative;
}
.obsv1{
  padding-left: 1.5rem;
        padding-right: 1.5rem;
            margin-left: auto;
    margin-right: auto;
            position: relative;
            max-width: 1536px;
            width: 100%;
}
.obsv2{
          padding: 4rem;
              --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        background-color: rgb(255 255 255 / 0.9);
 border-width: 1px;
     border-radius: 0.125rem;
         border-color: rgb(255 255 255 / 0.5);

}
.obsv3{
         grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 3rem;
                     align-items: center;
                         display: grid;
}
.obsv4{
    
}
.obsv4 h4{
          font-size: 1.875rem;
        line-height: 2.25rem;
            --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    font-weight: 700;
    margin-bottom: 1rem;
}
.obsv4 p{
 font-size: 1.125rem;
        line-height: 1.75rem;
        margin-bottom: 2rem;
            --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.obsv5{
    
}
.obsv6{
    
}
/* Обертка формы */
.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    font-family: 'Segoe UI', Roboto, sans-serif;
}

.form-wrapper h3 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #1a1a1a;
    text-align: center;
    font-weight: 600;
}

/* Группы полей */
.form-group {
    margin-bottom: 20px;
}

/* Поля ввода и селект */
.callback-form input,
.callback-form select,
.callback-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: #fefefe;
}

/* Стиль для placeholder (текст-подсказка внутри поля) */
.callback-form input::placeholder,
.callback-form textarea::placeholder {
    color: #aaa;
    font-size: 14px;
    font-weight: 400;
}

.callback-form input:focus,
.callback-form select:focus,
.callback-form textarea:focus {
    outline: none;
    border-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    box-shadow: 0 0 0 3px rgba(201,160,61,0.15);
}

/* Стиль для селекта */
.callback-form select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    color: #333;
}

/* Стиль для невыбранного option (серый текст) */
.callback-form select option:first-child {
    color: #888;
}

/* Текстовое поле */
.callback-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* Маленькая подсказка */
.form-group small {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    margin-left: 5px;
}

/* Чекбокс */
.checkbox-group {
    margin: 25px 0 20px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    line-height: 1.4;
}

.checkbox-label input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #0284c7;
}

.checkbox-label a {
    color: #0284c7;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.checkbox-label a:hover {
    border-bottom: 1px solid;
}

/* Кнопка отправки */
.submit-btn {
        --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    background: #025179;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(201,160,61,0.3);
}

/* Сообщения об успехе/ошибке */
.form-success {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: center;
    border-left: 4px solid #2e7d32;
}

.form-error {
    background: #ffebee;
    color: #c62828;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-align: center;
    border-left: 4px solid #c62828;
}
.footerniz{
       --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        padding-top: 4rem;
        padding-bottom: 2rem;
        --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
        border-top-width: 1px;
}
.footerniz1{
 width: 100%;
    max-width: 1536px;
    padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin:0 auto;
}
.footerniz2{
         grid-template-columns: repeat(4, minmax(0, 1fr));
         gap: 3rem;
             display: grid;
}
.footernizh3{
     --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 700;
        font-size: 1.4rem;
    line-height: 1.75rem;
        padding-bottom: 0.5rem;
            border-color: rgb(2 132 199 / 0.3);
            border-bottom-width: 1px;
                width: fit-content;
}
.footernizul{
      font-size: 0.875rem;
    line-height: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footernizul li{
  --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));  
}
.vot4{
        --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
        padding-top: 1rem;
            padding-bottom: 1rem;
}
.vot4 a{
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
        padding-top: 1rem;
            font-size: 0.75rem;
    line-height: 1rem;
        border-top-width: 1px;
        border-color: rgb(255 255 255 / 0.05);
            gap: 0.5rem;
            align-items: center;
                display: flex;
}
.vot4 a:hover{
    color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.footerniz3{
      --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
        padding-top: 0.5rem;
    padding-bottom: 0.5rem;
        padding-left: 0.75rem;
    padding-right: 0.75rem;
        background-color: rgb(255 255 255 / 0.05);
            border-color: rgb(255 255 255 / 0.1);
                border-width: 1px;
                border-radius: 0.125rem;
                    gap: 0.5rem;
                    align-items: center;
                        width: fit-content;
                            display: flex;
}
.footerniz3 span{
      --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
        text-transform: uppercase;
            font-weight: 700;
                font-size: 10px;
}
.footerniz4{
    
}
.footerniz4 a{
     text-transform: uppercase;
}
.footerniz4 p{
     --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
            font-weight: 700;
                font-size: 10px !important;
                margin-bottom: 0.25rem;
}
.footerniz4div{
        display: flex;
            align-items: center;
                gap: 0.75rem;
                    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.footerniz4div span{
    font-size: 1.125rem;
    line-height: 1.75rem;
        font-weight: 700;
}
.footerniz4div span:hover{
   color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.footerniz5{
    padding-top: 20px;
}
.footerniz5 a{
            display: flex;
            align-items: center;
                gap: 0.75rem;
                --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    font-size:12px;
}
.footerniz5 a:hover{
    color: rgb(2 132 199 / var(--tw-bg-opacity, 1)); 
}
.footerniz6{
        display: flex;
            align-items: flex-start;
                gap: 0.75rem;
                    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.footerniz6 span{
        line-height: 1.25;
        font-size: 12px;
}
.nizlogo{
    display: flex;
    align-items: center;
        gap: 0.75rem;
}
.nizlogo span{
--tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    letter-spacing: 0.1em;
        text-transform: uppercase;
            font-weight: 700;
                font-size: 1.25rem;
    line-height: 1.75rem;
}
.footerniz2 p{
        --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
        --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
        line-height: 1.625;
            font-size: 0.875rem;
}
.nizniz{
    display: flex;
        align-items: center;
        justify-content: space-between;
            gap: 1rem;
                border-top-width: 1px;
                --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
    padding-top: 2rem;
        font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
                letter-spacing: 0.15em;
                    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
            flex-direction: row;
}
.flexnizniz{
        font-style: italic;
            gap: 1.5rem;
                display: flex;
}
.hedconback{
    background: #fff;
position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 9999;  /* Поверх всех элементов */
  border-bottom: 1px solid #ccc;
}
.conteinertxt{
    width: 100%;
    max-width: 1536px;
    margin: 0 auto; 
        padding-bottom: 4rem;
        padding-top: 11rem;
}
.hedot{
      text-align: center;
          max-width: 48rem;
              margin-bottom: 4rem;
              margin-left: auto;
    margin-right: auto;
}
.hedot span{
        --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        letter-spacing: 0.3em;
            text-transform: uppercase;
                font-weight: 700;
                    font-size: 0.75rem;
    line-height: 1rem;
        display: block;
            margin-bottom: 1rem;
}
.hedot h1{
            font-size: 3rem;
        line-height: 1;
        --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        font-weight: 700;
            margin-bottom: 1.5rem;
}
.hedot p{
       margin-bottom: 2rem;
           font-weight: 300;
               line-height: 1.625;
                   --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.otzivtxt{
          grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 2rem;
                  display: grid;
}
.otzivtxt1{
        transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        padding: 2rem;
            --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
        border-width: 1px;
            border-radius: 0.125rem;
                flex-direction: column;
                    height: 100%;
                        display: flex;
                            position: relative;
}
.otzivtxt1p {
           font-size: 1rem;
        line-height: 1.5rem;
            --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
     padding-top: 1rem;
         flex-grow: 1;
             margin-bottom: 2rem;
                 z-index: 10;
                     position: relative;
   font-style: italic;
}
.otzivtxt1svg{
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        --tw-text-opacity: 1;
    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
        top: 1.5rem;
        right: 1.5rem;
            position: absolute;
}

.otzivtxt1niz{
       padding-top: 1.5rem;
       --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
        border-top-width: 1px;
            margin-top: auto;
}
.otzivtxt1nizp{
        --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
      text-transform: uppercase;
          font-weight: 700;
              font-size: 0.75rem;
    line-height: 1rem;
        gap: 0.5rem;
            display: flex;
                align-items: center;
}
.otzivtxt1nizp1{
        --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
    letter-spacing: 0.1em;
        text-transform: uppercase;
            font-size: 10px;
                margin-top: 0.25rem;
}
/* Показываем подменю при наведении на родительский пункт */
ul.mod-menu li.parent:hover > ul.mod-menu__sub {
  display: block;
}

/* Базовые стили для подменю: скрыто по умолчанию, абсолютное позиционирование */
ul.mod-menu__sub {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  z-index: 999;
  padding: 0.5rem;
  list-style: none;
  min-width: 180px;
}

/* Делаем родительский пункт относительным контейнером для абсолютного позиционирования подменю */
ul.mod-menu li.parent {
  position: relative;
}

.container-header .mod-menu a, .container-header .mod-menu button {
     color: rgb(15 23 42 / var(--tw-text-opacity, 1));
     letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.spankeis{

            display: flex;
    justify-content: center;
}
.spankeis-span{
    width: 3rem;
        height: 3rem;
}
b, strong {
    font-weight: bold;
}
.key{
    
}
.key1{
   display: flex;
       flex-direction: column;
}
.key2{
  flex-direction: row;
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    border-width: 1px;
    border-radius: 0.125rem;
    overflow: hidden;
    display: flex;
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
    align-items: center;
        margin-bottom: 3rem;
}
.key3{
   position: relative; 
           padding: 2rem;
                   width: 34%;
}
.key4{
    padding: 2rem;
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
            width: 67%;
}
.key5{
     margin-bottom: 1.5rem;   
}
.keytxt1{
      --tw-text-opacity: 1;
    color: rgb(56 189 248 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
        text-transform: uppercase;
            font-weight: 700;
                    font-size: 0.75rem;
        line-height: 1rem;
}
.keytxt2{
       --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
        letter-spacing: -0.05em;
        text-transform: uppercase;
            font-size: 10px;
}
.keytxt3{
           font-size: 1.5rem;
        line-height: 2rem;
                margin-top: 0.5rem;
                font-weight: 700;
                    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.keytxt4{
   display: block;
       --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
        font-size: 0.875rem;
    line-height: 1.25rem;
}

.key5 h4{
     --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 700;
                align-items: center;
                    display: flex;
                    margin-bottom: 0.75rem;
                            font-size: 0.75rem;
        line-height: 1rem;
}
.key5 p{
            font-size: 1rem;
        line-height: 1.5rem;
        --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.key5 svg{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        flex-shrink: 0;
            margin-right: 0.5rem;
}
.key6{
      padding-top: 1.5rem;
          --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
   border-top-width: 1px;
}
.key6 h4{
     --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 700;
                align-items: center;
                    display: flex;
                    margin-bottom: 0.75rem;
                            font-size: 0.75rem;
        line-height: 1rem;
}
.key6 p{
            font-size: 1rem;
        line-height: 1.5rem;
        --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.key6 svg{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        flex-shrink: 0;
            margin-right: 0.5rem;
}
.garant{
        display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: 3rem;
                            padding-bottom: 3rem;
                           
}
.garant h3{
  text-transform: uppercase;  
}
.garant1{
          padding: 3rem;
              transition-duration: 300ms;
                  transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --tw-shadow-color: rgb(226 232 240 / 0.5);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
    border-width: 1px;
        border-radius: 0.125rem;
}
.garant2{
         
}
.garant3{
            padding: 1rem;
            margin-bottom: 2rem;
            --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
        border-radius: 0.125rem;
            width: fit-content;
}
.garant3 svg{
    -tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        display: block;
    vertical-align: middle;
    
}
.garant21{
          padding: 3rem;
              transition-duration: 300ms;
              transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        --tw-shadow-color: rgb(226 232 240 / 0.5);
    --tw-shadow: var(--tw-shadow-colored);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        --tw-border-opacity: 1;
    border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
        border-left-width: 4px;
            border-radius: 0.125rem;
            width: 100%;
}
.garant22{
  gap: 2.5rem;
          align-items: center;
          flex-direction: row;
              display: flex;
}
.garant23{
      transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    padding: 1rem;
        --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
        border-radius: 0.125rem;
}
.garant23 svg{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        display: block;
    vertical-align: middle;
}
.garant24{
       flex-grow: 1;      
}
.garant24 h3{
          font-size: 1.5rem;
        line-height: 2rem;
                margin-bottom: 1rem;   
                --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        text-transform: uppercase;
        font-weight: 700;
}
.garant24 p{
       flex-grow: 1;      
}
.onas1{
        padding-top: 6rem;
    padding-bottom: 6rem;
}
.onas11{
padding-left: 1.5rem;
        padding-right: 1.5rem;
}
.onas12{
        flex-direction: row;
            gap: 4rem;
                align-items: center;
                    display: flex;
}
.onas12 h2{
      --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        text-transform: uppercase;
            font-weight: 700;
            font-size: 1.875rem;
    line-height: 2.25rem;
    padding-left: 1rem;
        --tw-border-opacity: 1;
    border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
    border-left-width: 4px;
}
.onas12 p{
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
        font-size: 1.125rem;
        line-height: 1.625;
        margin-bottom: 1.5rem;
}
.onas13{
 width: 100%;
}
.onas13dat{
      display: grid;
          grid-auto-flow: column;
          gap: 1rem;
}
.onas13dat1{
      padding: 1rem;
          --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
        --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    border-width: 1px;
    border-radius: 0.125rem;
}
.onas13dat2{
 --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 2.25rem;
        margin-bottom: 0.25rem;
}
.onas13dat3{
      --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    letter-spacing: 0.1em;
        text-transform: uppercase;
            font-size: 0.75rem;
    line-height: 1rem;
}
.onas14{
position: relative;
}
.onas14 img{
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        border-radius: 0.125rem;
            width: 100%;
                height: auto;
                max-width: 100%;
                    display: block;
    vertical-align: middle;
}



.onas2{
  padding-left: 1.5rem;
        padding-right: 1.5rem;
            margin-left: auto;
    margin-right: auto;
            max-width: 1536px;
                    width: 100%;
                    padding-bottom: 10rem;
}
.onas2zag1{
       margin-bottom: 4rem;
           text-align: center;
}
.onas2zag1 h2{
       --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        letter-spacing: 0.25em;
            text-transform: uppercase;
                font-weight: 700;
                    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 1rem;
}
.onas2zag1 p{
     --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: 0.05em;
            text-transform: uppercase;
                    font-size: 2.25rem;
    line-height: 2.5rem;
}
.onas2zag1pol{
     --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    width: 4rem;
    height: 0.25rem;
    margin-top: 1.5rem  !important;;.    
    margin-left: auto;
    margin-right: auto;
        margin: 0 auto;
}
.onas2zag2{
  gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Фиксируем 2 колонки */
	    padding-bottom: 30px;

}
.onas2zag2foto1{
  transition-duration: 300ms;
      transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
        border-width: 1px;
            border-radius: 0.125rem;
            flex-direction: column;
            display: flex;
}
.onas2zag2foto11{
       border-radius: 0.125rem;
           overflow: hidden;
           aspect-ratio: 3 / 4;
               position: relative;
}
.onas2zag2foto11 img{
    transition-duration: 500ms;
        transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        object-fit: cover;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            height: 100%;
                width: 100%;
                    max-width: 100%;
                        display: block;
    vertical-align: middle;
}
.onas2zag2foto12{
      padding: 1.25rem;
          flex-grow: 1;
}
.onas2zag2foto12 h3{
        --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
    line-height: 1.25;
        font-size: 1.125rem;
            margin-bottom: 0.25rem;
            font-weight: inherit;
                margin: 0;
}
.onas2zag2foto12 p{
transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    line-height: 1.625;
    font-size: 11px;
    margin: 0;
}
.onas2zag2foto12 span{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
            line-height: 1.25;
                text-transform: uppercase;
                    font-size: 9px;
                    display: block;
                        margin-bottom: 0.75rem;
	font-weight: 500;
}
.onas3ur{
  gap: 4rem;
  display: flex;
      max-width: 72rem;
      flex-direction: column;
      background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
          margin: 0 auto;
}
.onas3ur3 h3{
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: -0.025em;
            text-transform: uppercase;
                font-size: 1.875rem;
    line-height: 2.25rem;
        margin-bottom: 1.5rem;
}
.onas3ur1{
        display: grid;
            gap: 0px;
            overflow: hidden;
                border-radius: 0.125rem;
                    border-width: 1px;
                        --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
        --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            grid-template-columns: repeat(12, minmax(0, 1fr));
}
.onas3ur2{
          aspect-ratio: auto;
                  grid-column: span 4 / span 4;
                      --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
        overflow: hidden;
        position: relative;
}
.onas3ur2 img{
        object-position: top;
            object-fit: cover;
                width: 100%;
                    height: 100%;
                        max-width: 84%;
}
.onas3ur22{
        background-color: rgb(15 23 42 / 0.1);
        inset: 0px;
            position: absolute;
                pointer-events: none;
}
.onas3ur3{
 padding: 4rem;
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    flex-direction: column;
    justify-content: center;
    display: flex;
    grid-column: span 8 / span 8;  /* ← ДОБАВИТЬ: текст занимает 8 колонок */
}
.onasurtxt{
        gap: 0.75rem;
            align-items: center;
                display: flex;
                    margin-bottom: 1.5rem;
}
.onasurtxt svg{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    display: inline-block;  /* вместо block */
    vertical-align: middle;
    flex-shrink: 0;  /* запрещаем сжатие */
    width: 28px;     /* фиксируем размер */
    height: 28px;
    stroke: currentColor;  /* явно указываем цвет обводки */
    fill: none;            /* заливка отсутствует */
}
.onasurtxt span{
  --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.75rem;
    line-height: 1rem;
}
.onas3ur3 p{
        --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
    line-height: 1.625;
        font-size: 1.125rem;
}
.onasurtxt1{
       --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 1.5rem;
        --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        --tw-border-opacity: 1;
    border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
        border-left-width: 4px;
}
.onasurtxt1 p{
        --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
        line-height: 1.625;
        font-style: italic;
            font-size: 0.875rem;
}
.onas3{
        padding-bottom: 10rem;
}
.onas3ur4{
    
}
.onas4lic{
   display: flex;
    justify-content: center;
    gap: 3rem;
        text-align: center;
        padding-bottom: 5rem;
}
.onas4lic img{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}
.onas4lic h4{
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        text-transform: uppercase;
        font-weight: 700;
            font-size: 11px;
            padding-top:2rem;
}
.onas4lic p{
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
letter-spacing: 0.05em;
    line-height: 1.625;
    text-transform: uppercase;
    font-size: 10px;
        margin-top: 0.75rem;
}
.onas4lic span{
    --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
        font-weight: 700;
}
.ofdet{
 display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
        width: 100%;
    max-width: 780px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #0284c7;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.ofdet svg{
        --tw-text-opacity: 1;
    color: rgb(2 132 199 / var(--tw-text-opacity, 1));
    flex-shrink: 0;
    
}
.ofdet h4{
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity, 1));
        letter-spacing: -0.025em;
        text-transform: uppercase;
            font-weight: 700;
            font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
    
}
.ofdet p{
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
        line-height: 1.625;
       font-size: 0.875rem;
    
}
.princ1{
       background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); 
}
.princ11{
       width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.princ11 h2{
        letter-spacing: 0.1em;
            text-transform: uppercase;
                font-weight: 700;
                font-size: 1.875rem;
    line-height: 2.25rem;
        text-align: center;
            margin-bottom: 4rem;
                color: #fff;
    
}
.princtxt{
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 колонки по горизонтали */
    gap: 2rem;
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.princtxt1{
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
    border-width: 1px;
    border-radius: 0.125rem;
    padding: 2rem;
    text-align: center;  /* ← выравниваем весь текст по центру */
    display: flex;
    flex-direction: column;
    align-items: center;  /* центрируем содержимое по горизонтали */
}
.princtxt p{
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    line-height: 1.625;
    font-size: 0.875rem;
    text-align: center;  /* текст по центру */
    margin: 0;
}
.princtxt h3{
     text-transform: uppercase;
    font-weight: 700;
    font-size: 1.25rem;  /* уменьшил с 1.8rem для лучшего вида */
    line-height: 1.75rem;
    margin-bottom: 1rem;
    color: #fff;
    text-align: center;  /* заголовок по центру */
}
.princtxtsvg{
   --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    display: flex;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 9999px;
    flex-shrink: 0;  /* иконка не сжимается */
}
.princtxtsvg svg{
       
   color: rgb(255 255 255);
    display: block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
}
.princtxt2{
    
}
.princtxt3{
    
}
.hero-image-container {
    position: relative;
    width: 100%;
    height: 500px; /* фиксированная высота */
    
    overflow: hidden;
}

.hero-background-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* картинка заполнит контейнер без искажений */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background-color: rgb(17 24 39 / 0.8);
    z-index: 1;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 100%;
    padding: 0 1rem;
}

.hero-text h3 {
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        font-style: italic;
        padding-bottom: 2rem;
}
.obsva{
        --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
        transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        letter-spacing: 0.1em;
        text-transform: uppercase;
            font-size: 0.875rem;
    line-height: 1.25rem;
        font-weight: 700;
            padding-left: 3rem;
    padding-right: 3rem;
        border-radius: 0.125rem;
            display: inline-block;
                text-decoration: inherit;
                    padding: 20px 50px;
}
.contact{
    padding-left: 1.5rem;
        padding-right: 1.5rem;
}
.contact50{
            gap: 5rem;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
            display: grid;
}
.contact5050{
    order: 1;
}
.contact5050 h2{
            font-size: 1.875rem;
        line-height: 2.25rem;
        margin-bottom: 1.5rem;
            --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
        letter-spacing: 0.05em;
            text-transform: uppercase;
}
.marbot2{
    margin-bottom:2rem;
}
.marbot3{
    margin-top:2rem;
}



/* ===== ОСНОВНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (до 768px) ===== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .container-header{
            padding-bottom: 36rem;
}
    
    /* ХЕДЕР */
    .hedconback {
        position: relative; /* Убираем фиксацию на мобильных, чтобы не перекрывал контент */
        top: auto;
    }
    
    .hedcon {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    
    .alog {
        justify-content: center;
        width: 100%;
    }
    
    .imglogo {
        width: 100px;
    }
    
    .imglogo img {
        width: 100%;
        height: auto;
    }
    
    .txtlogo {
        text-align: center;
        padding: 10px;
    }
    
    .txtlogo .text-2xl {
        font-size: 2.2rem;
    }
    
    .txtlogo .text-2x2 {
        font-size: 13px;
    }
    
    /* Навигация - горизонтальная прокрутка для сохранения всех пунктов */
    .grid-child {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
    }
    
    #mod-menu1 {
        gap: 15px;
        padding: 10px;
        flex-wrap: nowrap;
        min-width: max-content;
    }
    
    #mod-menu1 a {
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* Телефоны */
    .tel {
        width: 100%;
    }
    
    .tel1 {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    .tel2 {
        text-align: center;
    }
    
    /* ГЛАВНЫЙ БАННЕР - сохранение фоновой картинки */
    .fonban-img {
        min-height: 500px;
        background-position: center 40%;
        background-size: cover;
    }
    
    .zagban {
        position: relative;
        padding: 20px;
                padding: 125px 0;
    }
    
    .zagban1 {
        padding: 100px 20px 40px 20px;
    }
    
    .zagban2 span {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .zagban3 h1 {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .zagban3 h1 span {
        font-size: 36px;
    }
    
    .zagban4 {
        font-size: 14px;
        padding-left: 15px;
        margin: 20px 0;
    }
    
    /* Кнопки */
    .button-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }
    
    .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
        box-sizing: border-box;
    }
    
    /* Блок услуг (карточки) - главное для сохранения картинок */
    .nkom {
        padding: 20px 15px;
    }
    
    .nkom2 h2 {
        font-size: 28px;
        text-align: center;
    }
    
    .nkom3 {
        flex-direction: column;
        gap: 20px;
    }
    
    .card {
        max-width: 100%;
        width: 100%;
    }
    
    /* Контейнер изображений в карточках */
    .image-container {
        height: 200px;
    }
    
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .card-content h3 {
        font-size: 16px;
    }
    
    /* Секция "Основатель" */
    .soz {
        padding: 20px 15px;
    }
    
    .soz1 {
        flex-direction: column;
        gap: 30px;
    }
    
    .soz3 {
        padding: 0;
    }
    
    .ostxt1 {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .ostxt2, .ostxt3 {
        padding-bottom: 20px;
        font-size: 14px;
    }
    
    /* Блок преимуществ (3 колонки в ряд на десктопе) */
    .mirabchi {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
    }
    
    .mirab2 h3 {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .mirabchi11 {
        width: 60px;
        height: 60px;
    }
    
    .mirabchi1 h3 {
        font-size: 18px;
    }
    
    .mirabchi1 p {
        font-size: 13px;
    }
    
    /* Секция "Почему доверяют" */
    .prem {
        padding: 40px 15px;
    }
    
    .prem2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
    }
    
    .prem2 h3 {
        font-size: 28px;
        text-align: center;
    }
    
    .fotoprem {
        height: 300px;
    }
    
    .premprechis {
        gap: 20px;
    }
    
    /* Секция с формой */
    .obsv {
        padding: 40px 15px;
    }
    
    .obsv2 {
        padding: 20px;
    }
    
    .obsv3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
    }
    
    .obsv4 h4 {
        font-size: 24px;
        text-align: center;
    }
    
    .obsv4 p {
        font-size: 14px;
        text-align: center;
    }
    
    /* Форма */
    .form-wrapper {
        padding: 20px;
        margin: 0 10px;
    }
    
    .form-wrapper h3 {
        font-size: 22px;
    }
    
    .callback-form input,
    .callback-form select,
    .callback-form textarea {
        padding: 12px;
        font-size: 14px;
    }
    
    /* Подвал (футер) */
    .footerniz {
        padding: 40px 15px 20px;
    }
    
    .footerniz2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
    }
    
    .footernizh3 {
        font-size: 18px;
    }
    
    .nizniz {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .flexnizniz {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .footerniz3 {
        width: 100%;
        justify-content: center;
    }
    
    .footerniz4div {
        justify-content: center;
    }
    
    .nizlogo {
        justify-content: center;
    }
    
    /* Полигон (4 колонки) */
    .polfon1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
    
    .polfon2 {
        text-align: center;
    }
}

/* Планшеты (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .zagban3 h1 {
        font-size: 48px;
    }
    
    .nkom3 {
        gap: 20px;
    }
    
    .card {
        max-width: calc(50% - 10px);
    }
    
    .mirabchi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
    
    .prem2 {
        gap: 30px;
    }
    
    .footerniz2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
    
    .polfon1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .zagban3 h1 {
        font-size: 28px;
    }
    
    .zagban3 h1 span {
        font-size: 30px;
    }
    
    .btn {
        padding: 10px 15px;
        font-size: 12px;
    }
    
    .card-content h3 {
        font-size: 14px;
    }
    
    .pcard {
        font-size: 13px !important;
    }
    
    .ptxtcard {
        font-size: 10px !important;
    }
}

/* Глобальные настройки для сохранения картинок */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Обертка для фоновых изображений - сохраняем пропорции */
.fonban-img,
.mirab-fon-img,
.fotoprem img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================
   ДОПОЛНИТЕЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================ */

/* Общие исправления для всех устройств */
* {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
}

/* Исправление для хедера на мобильных */
@media (max-width: 768px) {
    .hedconback {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        border-bottom: none;
    }
    .conteinertxt {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding-bottom: 4rem;
    padding-top: 17rem;
}
    
    body {
        padding-top: 0 !important;
    }
    
    .container-header {
        padding-bottom: 2rem !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕТОК
   ============================================ */

/* Сетка 4 колонок → 2 на планшетах → 1 на телефонах */
@media (max-width: 768px) {
    .polfon1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .polfon1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Сетка 3 колонок (эксперты, преимущества) → 1 на мобильных */
@media (max-width: 768px) {
    .onas2zag2 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .princtxt {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .otzivtxt {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .mirabchi {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 2rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .onas2zag2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .princtxt {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .otzivtxt {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .mirabchi {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "О НАС" (фото + текст)
   ============================================ */

@media (max-width: 768px) {
    .onas3ur1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    .onas3ur2 {
        grid-column: span 1 / span 1 !important;
    }
    
    .onas3ur3 {
        grid-column: span 1 / span 1 !important;
        padding: 2rem !important;
        text-align: center;
    }
    
    .onasurtxt {
        justify-content: center;
    }
    
    .onas3ur3 h3 {
        font-size: 1.5rem !important;
        text-align: center;
    }
    
    .onas3ur3 p {
        font-size: 0.875rem !important;
        text-align: center;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "ПРЕИМУЩЕСТВА" (prem)
   ============================================ */

@media (max-width: 768px) {
    .prem2 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 2rem !important;
    }
    
    .prem2 h3 {
        text-align: center !important;
        font-size: 1.5rem !important;
    }
    
    .premprechis-vot {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .fotoprem {
        height: 250px !important;
    }
    
    .zagprem {
        text-align: center !important;
        display: block !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "ОТЗЫВЫ"
   ============================================ */

@media (max-width: 768px) {
    .obsv2 {
        padding: 1.5rem !important;
    }
    
    .obsv3 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .obsv4 h4 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .obsv4 p {
        font-size: 0.875rem !important;
        text-align: center !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "ГАРАНТИИ" (garant)
   ============================================ */

@media (max-width: 768px) {
    .garant {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 1.5rem !important;
        padding: 0 1rem 2rem !important;
    }
    
    .garant1, .garant21 {
        padding: 1.5rem !important;
    }
    
    .garant22 {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .garant24 h3 {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "КОНТАКТЫ" (contact)
   ============================================ */

@media (max-width: 768px) {
    .contact50 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 2rem !important;
    }
    
    .contact5050 {
        order: 0 !important;
    }
    
    .contact5050 h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .ofdet {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
}

/* ============================================
   АДАПТАЦИЯ HERO-БЛОКА С КАРТИНКОЙ
   ============================================ */

@media (max-width: 768px) {
    .hero-image-container {
        height: 400px !important;
        margin: 1rem 0 !important;
    }
    
    .hero-text h3 {
        font-size: 1.2rem !important;
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-image-container {
        height: 300px !important;
    }
    
    .hero-text h3 {
        font-size: 1rem !important;
    }
}

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

@media (max-width: 768px) {
    .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    .button-container {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 1rem !important;
    }
    
    .obsva {
        display: block !important;
        text-align: center !important;
        padding: 12px 24px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   АДАПТАЦИЯ ФУТЕРА
   ============================================ */

@media (max-width: 768px) {
    .footerniz2 {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footernizh3 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .footernizul {
        text-align: center !important;
    }
    
    .footernizul li {
        text-align: center !important;
    }
    
    .vot4 a {
        justify-content: center !important;
    }
    
    .footerniz3 {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }
    
    .footerniz4div {
        justify-content: center !important;
    }
    
    .nizlogo {
        justify-content: center !important;
    }
    
    .nizniz {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .flexnizniz {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "ЛИЦЕНЗИИ" (onas4lic)
   ============================================ */

@media (max-width: 768px) {
    .onas4lic {
        flex-wrap: wrap !important;
        gap: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .onas4lic > div {
        flex: 0 0 calc(50% - 1rem) !important;
    }
}

@media (max-width: 480px) {
    .onas4lic > div {
        flex: 0 0 100% !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "ОТЗЫВЫ" (карточки)
   ============================================ */

@media (max-width: 768px) {
    .otzivtxt1 {
        padding: 1.5rem !important;
    }
    
    .otzivtxt1p {
        font-size: 0.875rem !important;
    }
    
    .otzivtxt1nizp {
        font-size: 0.7rem !important;
    }
}

/* ============================================
   АДАПТАЦИЯ СЕКЦИИ "КЛЮЧЕВЫЕ НАПРАВЛЕНИЯ" (key)
   ============================================ */

@media (max-width: 768px) {
    .key2 {
        flex-direction: column !important;
        margin-bottom: 1.5rem !important;
    }
    
    .key3, .key4 {
        width: 100% !important;
        padding: 1.5rem !important;
    }
    
    .key3 {
        text-align: center !important;
    }
    
    .keytxt3 {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   ПЛАНШЕТЫ (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .onas2zag2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .princtxt {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .mirabchi {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .otzivtxt {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .footerniz2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    .polfon1 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .prem2 {
        gap: 2rem !important;
    }
    
    .garant {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .key2 {
        flex-direction: row !important;
    }
    
    .key3 {
        width: 40% !important;
    }
    
    .key4 {
        width: 60% !important;
    }
}

/* ============================================
   УЛУЧШЕНИЕ ПРОКРУТКИ МЕНЮ НА МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 768px) {
    .grid-child {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        padding-bottom: 5px !important;
    }
    
    #mod-menu1 {
        flex-wrap: nowrap !important;
        min-width: max-content !important;
        gap: 1rem !important;
    }
    
    #mod-menu1 a {
        white-space: nowrap !important;
        font-size: 12px !important;
    }
}

/* ============================================
   УЛУЧШЕНИЕ ФОРМ
   ============================================ */

@media (max-width: 768px) {
    .form-wrapper {
        padding: 1.5rem !important;
        margin: 0 !important;
    }
    
    .callback-form input,
    .callback-form select,
    .callback-form textarea {
        font-size: 16px !important; /* Предотвращает масштабирование на iOS */
        padding: 12px !important;
    }
    
    .checkbox-label {
        font-size: 12px !important;
    }
    
    .submit-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ============================================ */
/* БУРГЕР-МЕНУ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ        */
/* ============================================ */

/* Скрываем стандартное десктопное меню на мобильных */
@media (max-width: 768px) {
    .container-nav {
        display: none !important;
    }
    
    /* Если нужно скрыть еще и поиск */
    .container-nav + .container-nav {
        display: none !important;
    }
}

/* Кнопка-бургер */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: relative;
    margin-left: auto;
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #0f172a;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

/* Анимация при открытом меню */
.hamburger.active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger.active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger.active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/* Мобильное меню (off-canvas) */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.open {
    left: 0;
}

/* Шапка мобильного меню */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.mobile-menu-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #64748b;
    transition: color 0.2s;
}

.mobile-menu-close:hover {
    color: #0284c7;
}

/* Контент мобильного меню */
.mobile-menu-content {
    padding: 15px 0;
}

/* Стили для пунктов меню в мобильной версии */
.mobile-menu-content .mod-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-content .mod-menu li {
    border-bottom: 1px solid #f1f5f9;
}

.mobile-menu-content .mod-menu a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #0f172a;
    font-size: 14px;
    transition: all 0.2s;
}

.mobile-menu-content .mod-menu a:hover {
    background: #f1f5f9;
    color: #0284c7;
}

/* Подменю в мобильной версии */
.mobile-menu-content .mod-menu ul {
    padding-left: 20px;
    list-style: none;
}

.mobile-menu-content .mod-menu li.parent > a {
    position: relative;
}

.mobile-menu-content .mod-menu li.parent > a::after {
    content: "▼";
    position: absolute;
    right: 20px;
    font-size: 10px;
    transition: transform 0.2s;
}

.mobile-menu-content .mod-menu li.parent.open > a::after {
    transform: rotate(180deg);
}

/* Показываем бургер только на мобильных */
@media (max-width: 768px) {
    .hamburger {
        display: inline-block;
    }
}

@media (min-width: 769px) {
    .mobile-menu {
        display: none;
    }
}



/* Стили для подменю в мобильной версии */
@media (max-width: 768px) {
    /* Контейнер мобильного меню */
    .mobile-menu-content .mod-menu {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    /* Основные пункты меню */
    .mobile-menu-content .mod-menu li {
        border-bottom: 1px solid #f1f5f9;
        position: relative;
    }
    
    /* Ссылки */
    .mobile-menu-content .mod-menu a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        text-decoration: none;
        color: #0f172a;
        font-size: 14px;
        transition: all 0.2s;
        background-color: #ffffff;
    }
    
    .mobile-menu-content .mod-menu a:hover {
        background: #f1f5f9;
        color: #0284c7;
    }
    
    /* Подменю (второй уровень) */
    .mobile-menu-content .mod-menu ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #f9fafb;
    }
    
    .mobile-menu-content .mod-menu ul li {
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-menu-content .mod-menu ul li:last-child {
        border-bottom: none;
    }
    
    .mobile-menu-content .mod-menu ul a {
        padding: 10px 20px 10px 35px;
        font-size: 13px;
        background-color: #f9fafb;
    }
    
    .mobile-menu-content .mod-menu ul a:hover {
        background-color: #f1f5f9;
        color: #0284c7;
    }
    
    /* Третий уровень и глубже */
    .mobile-menu-content .mod-menu ul ul a {
        padding-left: 50px;
    }
    
    .mobile-menu-content .mod-menu ul ul ul a {
        padding-left: 65px;
    }
}

.video{
	    width: 100%;
    height: 30rem;
    background: #ccc;
    margin-top: 30px;
}

 /* Контейнер плеера */
        .video-container {
            max-width: 100%;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            background: #000;
            transition: transform 0.3s ease;
			margin-top: 30px;
        }

        .video-container:hover {
            transform: translateY(0px);
        }

        /* Видео элемент */
        .video-container video {
            width: 100%;
            display: block;
            cursor: pointer;
        }

        /* Кастомные контролы */
        .custom-controls {
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
            padding: 15px 20px;
            transition: opacity 0.3s ease;
        }

        .progress-bar {
            width: 100%;
            height: 5px;
            background: rgba(255,255,255,0.2);
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 15px;
            position: relative;
        }

        .progress-filled {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 5px;
            transition: width 0.1s linear;
            position: relative;
        }

        .progress-filled::after {
            content: '';
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .progress-bar:hover .progress-filled::after {
            opacity: 1;
        }

        .controls-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .control-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 20px;
            padding: 5px;
            transition: transform 0.2s, opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .time-display {
            color: white;
            font-size: 14px;
            font-family: monospace;
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .volume-slider {
            width: 80px;
            height: 4px;
            -webkit-appearance: none;
            background: rgba(255,255,255,0.2);
            border-radius: 5px;
            outline: none;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
        }

        .speed-select {
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .speed-select:hover {
            background: rgba(0,0,0,0.8);
        }

        .fullscreen-btn {
            margin-left: auto;
        }

        /* Анимация при загрузке */
        @keyframes pulse {
            0% { opacity: 0.6; }
            100% { opacity: 1; }
        }

        /* Адаптив */
        @media (max-width: 768px) {
            .controls-wrapper {
                gap: 10px;
            }
            
            .control-btn {
                font-size: 16px;
            }
            
            .time-display {
                font-size: 12px;
            }
            
            .volume-slider {
                width: 50px;
            }
        }