/********** Template CSS **********/
:root {
    --primary: #F5D130;
    --secondary: #FF6922;
    --light: #EFFDF5;
    --dark: #0E2E50;
}


.modal {
    z-index: 1055 !important; /* Установим его выше backdrop */
}

.rigth-calculator{
display:none;}

  
.modal-dialog {
position: absolute !important; /* Абсолютное позиционирование */
top: 50% !important; /* Центр по вертикали */
left: 50% !important; /* Центр по горизонтали */
transform: translate(-50%, -50%) !important; /* Смещаем окно для центрирования */
margin: 0 !important; /* Убираем отступы */
width: 90vh !important; /* Ширина по содержимому */
height: 90vh !important;
max-height: 90% !important;
max-width: 90% !important; /* Ограничиваем ширину */
padding: 10px !important; /* Внутренние отступы */
z-index: 1060 !important; /* Устанавливаем выше слоя backdrop */
}
  
.modal-backdrop {
z-index: 1050 !important; /* Убедимся, что backdrop ниже модального окна */
display: none;
}

.container {
    padding-right: 0px !important;
    padding-left: 0px !important;
    max-width: 100% !important;
}

.maxwidth-theme  {
    padding-right: 0px !important;
    padding-left: 0px !important;
    max-width: 100% !important;
} 

.logo-row{
max-width: 1760px !important;
}

.menu-only{
    max-width: 1760px !important;
    margin: auto;
}


body{
    background-color: #fcfcfc !important;
}



/*** Button ***/
.btn {
    transition: .5s;
}

.btn-primary {
    color: #000 !important;
    background-color: #F5D130 !important;
    border-color: #000000 !important;
    border: 1px !important;
}

.btn-secondary {
    color: #F5D130 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
    border: 1px !important;
}

.btn-primary:hover {
    color: #F5D130 !important ;
    background-color: #000 !important;
    border-color: #000 !important;
    border: 1px !important;
}
.btn-secondary:hover {
    color: #000 !important ;
    background-color: #F5D130 !important;
    border-color: #000000 !important;
    border: solid 1px !important;
}


.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}

.btn-primary:focus{
    box-shadow:none !important;
}
.btn-secondary:focus{
    box-shadow: none !important;    
}

  /* Intro Section */
.intro {
    background-image: url("../img/222.jpg"); /* Background image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Cover the entire area */
    position: relative;
    padding: 6rem 2rem; /* Increased padding for spaciousness */
    height: auto; /* Automatic height */
    display: flex; /* Flexbox for alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text */
    color: #ffffff; /* Text color for contrast */
    background-attachment: fixed;
}

/* Overlay for better readability */
.intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.336); /* Dark overlay for better contrast */
    z-index: 1;
}

/* Container for content */
.intro__container {
    position: relative; /* For positioning above the overlay */
    z-index: 2; /* Above overlays */
    max-width: 800px; /* Max width for better reading */
    width: 100%; /* Full width */
    padding: 2rem; /* Padding for content */
    background: rgba(0, 0, 0, 0.5); /* Slightly transparent background */
    border-radius: 10px; /* Softer corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    z-index: 2;
}

/* Heading style */
.intro__heading {
    font-size: 2.2rem; /* Large heading */
    margin-bottom: 1rem; /* Space below heading */
    line-height: 1.2; /* Line height for readability */
    animation: fadeIn 1s; /* Fade-in animation */
    color: #ffffff;
}

/* Text style */
.intro__text {
    margin-bottom: 2rem; /* Space below text */
    font-size: 1.2rem; /* Font size for better readability */
    animation: fadeIn 1.2s; /* Fade-in animation */
}



/* Highlighted text style */
.highlight {
    color: #f9ce00;
    font-weight: bold;
}

.tn-atm{
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
  background-position: center center;
  border-color: transparent;
  border-style: solid;
  z-index: 1;
}

/* Fact Section */
.fact {
    position: relative;
    z-index: 2; /* Above overlays */
    width: auto !important;
}

.fact {
    background: rgba(0, 0, 0, 0.5) !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    animation: fadeIn 1s;
}

/* Fact Item Styles */
.fact h2 {
    font-size: 1.5rem; /* Larger heading for facts */
    margin-bottom: 0.5rem; /* Space below heading */
}
/* Responsive styles */
@media (max-width: 768px) {
    .intro__heading {
        font-size: 2.2rem; /* Responsive heading size */
    }

    .intro__text {
        font-size: 1rem; /* Responsive text size */
    }

    .intro__container {
        padding: 1.5rem; /* Adjust padding for smaller screens */
    }

    .fact h2 {
        font-size: 1.7rem; /* Responsive heading size for facts */
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


    /* Сброс отступов */
    /* * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    } */
    
    /* Стили для ссылок */
    a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    a:hover {
        color: #f0f0f0;
    }
    
    /* Заголовки */
    /* h1 {
        font-size: 2em;
    } */
    
    h2 {
        font-size: 1.75em;
        margin-bottom: 10px;
        /* color: #fff; */
    }
    
    h3 {
        font-size: 1.2em;
        margin-bottom: 15px;
        /* color: #ddd; */
    }
    
    /* Карточка */
    

/* Анимации для изображения */
/* .h-card.active .banner-placeholder img {
    transform: scale(1.1);
    transform: translateY(40%);
} */

.h-card.active .banner-placeholder {
    opacity: 0.9;
}

.h-card.active .banner-placeholder:before {
    opacity: 1;
}
    
    /* Эффект градиента и изображения */
    #hc1 {
        background: linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.55)
        ),
        url("../img/file_file_pt_BR_1524488466367_UNIPORT_3030_CANAVIEIRO_47.jpg") no-repeat center center;
        background-size: cover;
        color: white;
        padding-right: 0px;
        background-attachment: fixed;
    }
    
    #hc1:hover {
        background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
        ),
        url("../img/file_file_pt_BR_1524488466367_UNIPORT_3030_CANAVIEIRO_47.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }

    #hc2 {
        background: linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.55)
        ),
        url("../img/MC_RPF1_X8_Banner_1920x900_001.jpg") no-repeat center center;
        background-size: cover;
        color: white;
        padding-left: 0px;
        background-attachment: fixed;
    }
    
    #hc2:hover {
        background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
        ),
        url("../img/MC_RPF1_X8_Banner_1920x900_001.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }

    #hc3 {
        background: linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.55)
        ),
        url("../img/M155-R85-Forage-1.jpg") no-repeat center center;
        background-size: cover;
        color: white;
        padding-right: 0px;
        background-attachment: fixed;
    }
    
    #hc3:hover {
        background: linear-gradient(
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.4)
        ),
        url("../img/M155-R85-Forage-1.jpg") no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }
    
    /* Контент в карточке */
    .h-card a {
        display: block;
        text-decoration: none;
    }
    
    .h-card p {
        opacity: 0;
        transition: opacity 0.3s ease-out;
        margin-bottom: 10px;
    }
    
    .h-card h3 {
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }

    .h-card li {
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }
    
    /* Стили кнопок и ссылок внутри карточек */
    .d-flex {
        margin-top: 20px;
    }
    
    /* Адаптивность изображений */
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
    
    /* Анимация для изображений */
    /* .animated-background {
        animation: pulse 1.5s infinite;
    }
    */


    @keyframes pulse {
        0% {
        opacity: 0.9;
        }
        50% {
        opacity: 1;
        }
        100% {
        opacity: 0.9;
        }
    }
    

    .h3-card-right {
        position: relative;
        /* max-width: 90%; */
        color: #194a73;
        background-color: white;
        padding: 20px;
        border-radius: 22px 0 0 22px;
        
    }

    .h3-card-right:before,
    .h3-card-right:after {
        content: '';
        position: absolute;
        display: block;
        height: 30px;
        width: 30px;
        right: 0;
        background-size: cover;
    }

    .h3-card-right:before {
        top: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 22C12.1503 22 22 12.1503 22 0V22H0Z" fill="white"/></svg>');
    }

    .h3-card-right:after {
        bottom: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 22C22 9.84973 12.1503 -5.31105e-07 -9.61651e-07 0L22 -9.61651e-07L22 22Z" fill="white"/></svg>');
    }

    .p {
        font-size: 20px;
        margin-top: 60px;
    }

    .h3-card-left {
        position: relative;
        max-width: 90%;
        color: #194a73;
        background-color: white;
        padding: 20px;
        border-radius: 0 22px 22px  0;
        
    }

    .h3-card-left:before,
    .h3-card-left:after {
        content: '';
        position: absolute;
        display: block;
        height: 30px;
        width: 30px;
        left: 0;
        background-size: cover;
    }

    .h3-card-left:before {
        top: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 22C12.1503 22 22 12.1503 22 0V22H0Z" fill="white" transform="scale(-1,1) translate(-22, 0)" /></svg>');
    }

    .h3-card-left:after {
        bottom: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 22C22 9.84973 12.1503 -5.31105e-07 -9.61651e-07 0L22 -9.61651e-07L22 22Z" fill="white" transform="scale(-1,1) translate(-22, 0)" /></svg>');

    }

    .p {
        font-size: 20px;
        margin-top: 60px;
    }

    .h2-card-left{
        padding-left: 3%;
    }

    .h2-card-right{
        padding-right: 3%;
    }

    .h2-card-left h2{
        font-size: 10em;
    }


    .ptest-left {
        position: relative;
        max-width: 90%;
        color: #194a73;
        background-color: white;
        padding: 20px;
        border-radius: 0 22px 22px 0;
        
    }

    .ptest-left:before,
    .ptest-left:after {
        content: '';
        position: absolute;
        display: block;
        height: 30px;
        width: 30px;
        left: 0;
        background-size: cover;
    }

    .ptest-left:before {
        top: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 22C12.1503 22 22 12.1503 22 0V22H0Z" fill="white" transform="scale(-1,1) translate(-22, 0)" /></svg>');
    }

    .ptest-left:after {
        bottom: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 22C22 9.84973 12.1503 -5.31105e-07 -9.61651e-07 0L22 -9.61651e-07L22 22Z" fill="white" transform="scale(-1,1) translate(-22, 0)" /></svg>');

    }


    .ptest-right {
        position: relative;
        /* max-width: 90%; */
        color: #194a73;
        background-color: white;
        padding: 20px;
        border-radius: 22px 0 0 22px ;
        
    }

    .ptest-right:before,
    .ptest-right:after {
        content: '';
        position: absolute;
        display: block;
        height: 30px;
        width: 30px;
        right: 0;
        background-size: cover;
    }

    .ptest-right:before {
        top: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 22C12.1503 22 22 12.1503 22 0V22H0Z" fill="white"/></svg>');
    }

    .ptest-right:after {
        bottom: -30px;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 22C22 9.84973 12.1503 -5.31105e-07 -9.61651e-07 0L22 -9.61651e-07L22 22Z" fill="white"/></svg>');

    }

    .h-card-container {
        display: flex;
        flex-direction: column;
        resize: vertical;
        margin-top: 30px;
    }

    .ptest-right, .ptest-left{
        height: auto;
    }
    
    .h-card {
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
        padding: 30px;
        margin-bottom: 20px;
        border: 8px solid white;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        overflow: hidden;
        transition: all 0.5s ease;
        position: relative;
        height: 300px;
    }
    
    /* Изменение hover на active */
.h-card.active {
    padding-top: 50px;
    padding-bottom: 50px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
    height: auto;
}

.h-card.active p,
.h-card.active h3 {
    opacity: 1;
}
     
    /* Стили для изображений внутри карточек */
    .banner-placeholder {
        position: relative; /* Для управления позиционированием */
        display: flex; /* Используем Flexbox для выравнивания */
        justify-content: center; /* Горизонтальное выравнивание по центру */
        align-items: flex-start; /* Вертикально выравниваем изображение по верхнему краю */
        overflow: hidden; /* Скрываем части изображения за границами */
        height: 100%; /* Занимает всю высоту карточки */
        border-radius: 30px;
        transition: transform 0.5s ease, opacity 0.5s ease; /* Плавный переход */
        transform: translateY(-20%);
        top: 50%;
    }

    .banner-placeholder img {
         /* Ширина от родительского контейнера */
        height: auto; /* Автоматическая высота для сохранения пропорций */
        transition: transform 0.5s ease, opacity 0.5s ease; /* Плавные изменения для трансформации и прозрачности */
        /* transform: translateY(0%); */
        z-index: 1;
    }

    /* Эффекты при наведении */
    .h-card.active .banner-placeholder {
        /* Слегка уменьшить непрозрачность */
        transform: translateY(0%);
        /* transition: transform 0.5s ease, opacity 0.5s ease; */
        /* width: 40%;  */
        
    }

    .h-card.active .banner-placeholder {
        opacity: 0.9; /* Затемнение карточки при наведении */
    }

    /* Если хотите добавить затемнение фона изображения */
    .h-card.active .banner-placeholder:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(232, 232, 232, 0.3); /* Затемнение */
        transition: opacity 0.5s ease; /* Плавный переход */
        opacity: 0; /* Начальное состояние (прозрачное) */
        height: auto;
    }

    .h-card.active .banner-placeholder:before {
        opacity: 1; /* Затемнение при наведении */
    }


    /* Call To Action */

/* Общие стили */
.text-primary {
    color: #F5D130 !important;
}

p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

.bgfon {
    position: relative; /* Установим относительное позиционирование */
    z-index: 10; /* Поверх всех фонов */
    background-color: #F5D130 !important; /* Фон блока */
    border-radius: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #000000; /* Цвет текста */
    padding: 20px; /* Немного паддинга, чтобы контент не прилипал */
    overflow: visible; /* Убедимся, что содержимое видно */
}

/* Стили для h3 */
.bgfon h3 {
    position: relative; /* Убедимся, что текст всегда на переднем плане */
    z-index: 20 !important; /* Повышаем слой текста */
    color: #000000 !important; /* Принудительно задаём чёрный цвет текста */
    font-weight: bold;
    text-shadow: none; /* Убираем тень для гарантии контраста */
    margin: 0;
}

/* Иконка рядом с номером */
.bgfon h3 i {
    color: #000000 !important; /* Принудительно задаём чёрный цвет иконки */
}

/* Специальные стили для iOS Safari */
@supports (-webkit-overflow-scrolling: touch) {
    .bgfon {
        background-color: #F5D130 !important; /* Принудительно задаём фон */
        color: #000000 !important; /* Принудительно задаём чёрный текст */
    }

    .bgfon h3 {
        color: #000000 !important; /* Принудительно задаём чёрный текст для номера телефона */
        z-index: 21 !important; /* Убедимся, что текст находится поверх */
    }

    .bgfon h3 i {
        color: #000000 !important; /* Принудительно задаём чёрный цвет иконки */
    }

    .bgfon h3 {
        color: #000000 !important;
        -webkit-text-fill-color: #000000; /* Устанавливаем чёрный цвет текста */
        -webkit-text-stroke-width: 0; /* Отключаем обводку текста */
    }
}


  @media (max-width: 1400px) {

    .banner-placeholder {
        position: relative; /* Для управления позиционированием */
        display: flex; /* Используем Flexbox для выравнивания */
        justify-content: center; /* Горизонтальное выравнивание по центру */
        align-items: flex-start; /* Вертикально выравниваем изображение по верхнему краю */
        overflow: hidden; /* Скрываем части изображения за границами */
        height: 100%; /* Занимает всю высоту карточки */
        border-radius: 30px;
        transition: transform 0.5s ease, opacity 0.5s ease; /* Плавный переход */
        transform: translateY(-25%);
        top: 50%;
    }

    .h-card.active {
        height: auto;
    }

    .ptest-right, .ptest-left{
        height: auto;
    }
    .h5-rs{
        font-size: 1.2em;
    }
  }

  @media (max-width: 1370px) {
    .btn-primary{
        font-size: 1em;
    }

    .h5-rs{
        font-size: 1em;
    }
  }

  @media (max-width: 1180px) {
    .btn-primary{
        font-size: 0.9em;
    }

    .h5-rs{
        font-size: 0.9em;
    }
    
  }

  @media (max-width: 1110px) {
    .btn-primary{
        font-size: 0.9em;
    }

    .h5-rs {
        font-size: 0.9em;
    }
    
  }

  @media (max-width: 1050px) {
    .btn-primary{
        font-size: 0.8em;
    }

    .h5-rs{
        font-size: 0.8em;
    }
  }

  @media (max-width: 991px) {
   

    .banner-placeholder {
        position: relative; /* Для управления позиционированием */
        display: flex; /* Используем Flexbox для выравнивания */
        justify-content: center; /* Горизонтальное выравнивание по центру */
        align-items: flex-start; /* Вертикально выравниваем изображение по верхнему краю */
        overflow: hidden; /* Скрываем части изображения за границами */
        height: 100%; /* Занимает всю высоту карточки */
        border-radius: 30px;
        transition: transform 0.5s ease, opacity 0.5s ease; /* Плавный переход */
        transform: translateY(-75%);
        top: 50%;
    }

    .h-card.active {
        height: auto;
    }

    .ptest-right, .ptest-left{
        height: auto;
    }

    .btn-primary{
        font-size: 0.8em;
    }

    .h5-rs{
        font-size: 0.9em ;
    }

  }

  @media (max-width: 870px) {
    .btn-primary{
        font-size: 0.7em;
    }

    .h5-rs{
        font-size: 0.7em;
    }
  }
  @media (max-width: 767px) {
    .btn-primary{
        font-size: 1em;
    }

    .h5-rs{
        font-size: 1em;
    }

    .banner-placeholder{
        display: none;
    }

  }

.card-custom {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    position: relative;
}

.card-custom:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-custom-title {
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card-custom-desc {
    font-family: 'Rubik', sans-serif;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card-col {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    display: flex;
}

@media (max-width: 768px) {
    .card-col {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .card-col {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Калькулятор */
/* Базовые стили для десктопа и планшетов */
.rigth-calculator {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px #d2d2d266;
    color: #141414;
    height: 620px;
    width: 367px;
    position: sticky;
    top: 100px;
    margin: 40px 0 110px;
    z-index: 1000;
    padding: 20px;
}

/* Для заголовка */
.rigth-calculator .rigth-calculator-header {
    background-color:#fff3e2;
    border-radius:10px 10px 0 0;
    display:flex;
    align-items:center;
    height:58px;
}

.rigth-calculator .rigth-calculator-header .title {
    font-size:18px;
    font-weight:700;
    line-height:32px;
}

/* Стили для контента и ввода */
.rigth-calculator .rigth-calculator-content-row {
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
}

.rigth-calculator .rigth-calculator-select,
.rigth-calculator .rigth-calculator-input {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px 7px;
}

/* Основные элементы select */
.rigth-calculator .rigth-calculator-select select {
    background-color: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding-left: 10px;
    height: 40px;
    width: 330px;
    cursor: pointer;
}

.rigth-calculator .rigth-calculator-content-row .rigth-calculator-input input {
    background-color: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    padding-left: 10px;
    height: 40px;
    width: 330px;
}

/* Кнопка расчета */
.rigth-calculator .rigth-calculator-content-row .calc {
    background: linear-gradient(90deg, #E27022 0%, #f8b43e 100%);
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 330px;
    margin-top: 20px;
}

/* Фиксированное положение для футера */
.rigth-calculator .rigth-calculator-footer {
    background-color: #fff3e2;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    width: 100%;
    margin-top: 20px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .rigth-calculator {
        width: 100%;
        margin: 20px;
        height: auto;
        position: relative; /* Меняем с sticky на обычный flow для мобильных */
    }

    .rigth-calculator .rigth-calculator-header .title {
        font-size: 16px; /* Меньше размер шрифта */
    }

    .rigth-calculator .rigth-calculator-select select,
    .rigth-calculator .rigth-calculator-content-row .rigth-calculator-input input,
    .rigth-calculator .rigth-calculator-content-row .calc {
        width: 100%; /* Делим на всю ширину контейнера */
        font-size: 14px; /* Уменьшаем шрифт */
    }

    .rigth-calculator .rigth-calculator-footer {
        padding: 10px 20px;
        height: auto;
    }

    .rigth-calculator .rigth-calculator-footer .rigth-calculator-footer-row {
        font-size: 14px;
    }

    .rigth-calculator .rigth-calculator-footer .order {
        width: 100%; /* Сделать кнопку на всю ширину */
    }
}

/* Еще одна настройка для очень маленьких экранов (например, телефоны в портретной ориентации) */
@media (max-width: 480px) {
    .rigth-calculator {
        margin: 10px;
    }

    .rigth-calculator .rigth-calculator-header {
        height: 50px; /* Меньше высота для мобильных устройств */
    }

    .rigth-calculator .rigth-calculator-header .title {
        font-size: 14px;
    }

    .rigth-calculator .rigth-calculator-footer {
        margin-top: 10px;
    }

    .rigth-calculator .rigth-calculator-footer .rigth-calculator-footer-row {
        font-size: 13px;
    }

    .rigth-calculator .rigth-calculator-footer .order {
        font-size: 14px; /* Уменьшаем размер текста на кнопке */
    }
}