/* Should you need to overwrite any of our SCSS or LESS or SASS code need to add any custom code, We recommend that you add your code into this file, so whenever theme update is available and you update the theme, You will not lose your hard work :) */
.butnow {
    background: #00bcd1;
    cursor: pointer;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 20px;
    padding: 16px 32px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    -webkit-transition: all linear 300ms;
    transition: all linear 300ms;
    border: none;
    text-align: center; }
.butnow:hover, .butnow:active {
    color: #fff;
    background: #1e2022; }

a.butnow:hover, a.butnow:active, a.butnow:focus {
    color: #fff;
    background: #1e2022; }

.butnow:focus {
    color: #fff; }
.butnow.white {
    background: #fff;
    color: #00bcd1; }
.butnow.white:hover {
    color: #fff;
    background: #1e2022; }

a.butnow.white:hover, a.butnow.white:active, a.butnow.white:focus {
    color: #fff;
    background: #1e2022; }

.butnow.dark {
    color: #fff;
    background: #1e2022; }
.butnow.dark:hover, .butnow.dark:active, .butnow.dark:focus {
    color: #fff;
    background: #00bcd1; }

.butnow.white-hover:hover, .butnow.white-hover:active, .butnow.white-hover:focus {
    color: #00bcd1;
    background: #fff; }

.butnow.small {
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 20px;
    padding: 8px 20px;
    white-space: nowrap; }
.butnow.md {
    letter-spacing: 1px;
    font-size: 13px;
    line-height: 20px;
    padding: 12px 24px; }
.butnow.transparent {
    background: none;
    border: 1px solid #dee2e6;
    color: #1e2022; }
.butnow.transparent:hover {
    background: #00bcd1;
    border: 1px solid #00bcd1;
    color: #fff; }
.butnow.appo {
    background: #f15b5a;
    color: #fff;
    padding: 12px 14px !important;
    font-size: 14px; }

@media screen and (max-width: 991px) {
    .butnow {
        padding: 14px 28px;
        font-size: 13px; }
    .butnow.appo {
        padding: 7px 5px 7px 5px !important;
        background: none;
        color: #f15b5a; }
    .butnow.appo:hover {
        color: #00bcd1;
        background: none; } }
@media screen and (max-width: 767px) {
    .butnow {
        padding: 12px 24px; }}

.grecaptcha-badge {
    visibility: hidden;
    opacity: 0;
}

/*Кнопки ватсапп и телеграм*/

/* Общие стили для плавающих кнопок */
.floating-button {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

/* Кнопка WhatsApp */
.floating-button.whatsapp {
    background-color: #25D366;
}

.floating-button.whatsapp:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

/* Кнопка Telegram */
.floating-button.telegram {
    background-color: #0088CC;
}

.floating-button.telegram:hover {
    background-color: #005A9C;
    transform: scale(1.1);
}

/* Позиционирование для десктопа */
@media (min-width: 768px) {
    .floating-button {
        transition: all 0.3s ease;
    }

    .floating-button.whatsapp {
        bottom: 20px;
        left: 20px;
    }

    .floating-button.telegram {
        bottom: 100px;
        left: 20px;
    }
}

/* Позиционирование для мобильных устройств */
@media (max-width: 767px) {
    .floating-button {
        right: 0;
        border-radius: 30px 0 0 30px;
        transition: none; /* Отключаем анимации на мобильных */
    }

    .floating-button.whatsapp {
        top: calc(50% - 35px); /* Смещаем на полторы кнопки вверх */
    }

    .floating-button.telegram {
        top: calc(50% + 35px); /* Смещаем на полторы кнопки вниз */
    }

    /* Отключаем эффекты наведения на мобильных */
    .floating-button:hover {
        background-color: inherit;
        transform: none;
    }
}
