/*header*/

/*logo-info*/
.logo-info li{
    line-height:16px;
    font-weight:400;
    font-size:12px;

}

/*manager-phone*/
.manager-phone .uk-grid .el-content{
    display:flex;
    align-items: center;
    font-size:14px;
    line-height:18px;
}

.manager-phone .uk-grid .el-content a{
    font-size:20px;
    line-height:25px;
    color:#000;
    font-weight:bold;
    text-decoration: underline;
    margin-left:10px;
}

.manager-phone .uk-grid .el-content a:hover{
    color: #F6A700;
}

@media (max-width:600px){

    .manager-phone .uk-grid > div{
        padding-left:0;
    }
    .manager-phone .uk-grid .el-content a{
        font-size:16px;
        line-height:22px;

    }

    .manager-phone .uk-grid .el-content a{
        font-size:16px;
        line-height:22px;

    }

    .uk-logo {
        max-width:120px;
    }
}

/*hero*/
.section-hero{
    position:relative;
}

.section-hero > .uk-section {
    padding-top: 100px;
}

.hero-info{
    position: relative;
    /* z-index:20000!important; */
}
.hero-generators-block {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -66px;
    z-index: 0;
    text-align: center;
}

.hero-generators{
    position: relative;;
    /* left: 0;
    right: 0; */
    /* bottom: -146px; */

    z-index:0;
    display: inline-block;
    width:auto;
    max-width: 650px;
}


.hero-guys-block {
    position: absolute;
    /* left: 0; */
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    height: 100%;
    max-width: 400px;
    width: 100%;
}

.hero-guys-block img{
    max-width:90%;
}

.hero-guys{
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom:0;
    z-index:10000;
}

.uk-modal-body{
    z-index:100000!important;
}

.styled-text-bg {
    /* background: url(../images/styled-text-bg-white.svg); */
    background-color: #fff;
    /* background-size: 100% 100%; */
    background-repeat: no-repeat;
    display: inline-block;
    color: #000 !important;
    padding: 20px;
    position: relative;
    z-index: 100;
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0% 100%, 0% 20px);
    padding: 10px 15px 10px 19px;
}


.styled-text-bg strong{
    font-weight:600;
}


.styled-text-bg p{
    color: #000;
}



.styled-tile-muted .uk-tile{

    clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 70px), calc(100% - 70px) 100%, 0% 100%, 0% 30px);
}

.styled-tile-muted.big-tile .uk-tile{

    clip-path: polygon(50px 0%, 100% 0%, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0% 100%, 0% 50px);

}

@media (max-width:1200px){


    .hero-generators  img{
        max-width:70%;
    }
}


@media (max-width:600px){
    .section-hero > .uk-section {
        padding-top: 60px;
    }

    .hero-guys-block{
        position:relative;
        margin-top:0!important;
        margin-right: -30px;
        margin-bottom: -40px!important;
    }

    .hero-generators  img{
        max-width:80%;
    }
}


.hero-audio {
    position: absolute;
    right: 219px;
    bottom: 23px;
    z-index: 10;
}

/* Основной блок отзыва */
.hero-audio .audio-box {
    position: relative;
    width: 270px;
    max-width: 270px;
    background: #FFCC00;
    color: black!important;

    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
    padding: 25px 25px 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-audio .text-1{
    font-size:20px;
    line-height:24px;
}

.hero-audio .text-1 strong{
    font-size:24px;
    line-height:24px;
    font-weight:600;
}
.hero-audio .text-2{
    font-size:32px;
    margin:10px 0!important;
}
.hero-audio .text-3{
    font-size:20px;
    line-height:24px;
    margin-top:10px;
}

.hero-audio .text-3 strong{
    font-weight:600;
}

.hero-audio .audio-box p{
    margin:0;
}

.hero-audio .audio-box *{
    color: black!important;
}

/* Выноска-уголок справа */
.hero-audio .audio-box::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid #FFCC00;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

/* Текстовые стили */
.hero-audio .group {
    font-size: 14px;
}

.hero-audio .bold {
    font-weight: bold;
}

.hero-audio .recommend {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.hero-audio .author {
    font-size: 14px;
}

/* Кнопка аудио */
.hero-audio .play-button {
    align-self: center;
    margin-top: 15px;
    position: relative;
    top: -47px;
    left: 30px;
}


/* section-5-generators */

.section-5-generators .uk-tile{
    padding: 30px !important;
    /* max-height: 470px; */
    padding-right: 70px !important;
}

@media (max-width:600px){
    .section-5-generators .uk-tile .uk-h2{
        font-size: 21.2px;
        line-height: 1.2;
        font-weight: 700;
    }

    .section-5-generators .uk-tile .uk-h2{
        font-size: 21.2px;
        line-height: 1.2;
        font-weight: 700;
    }
}


.FAQ .uk-accordion .el-item {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 90px rgba(0,0,0,0.1);
}
.FAQ  .uk-accordion-title {
    display: flex;
    align-items: center;
}

.FAQ  .uk-accordion-title::before {
    content: "";
    width: 40px;
    height: 40px;
    margin-right: 10px;
    float: left;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #F4F5FD;
    border-radius: 10px;
}

.FAQ  .uk-accordion-content {
    display: flow-root;
    margin-top: 20px;
    margin-left:60px;
}

.FAQ  .uk-accordion-content strong{
    font-weight:bold;
}


/* quiz */

.quizz .uk-h4{
    font-weight:bold;
}

.quizz .uk-h4 strong{
    display:inline-block;
    background:url("../images/quiz-question-num.svg") no-repeat center center;
    background-size:cover;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    color:#fff;
    margin-right:10px;
}

.quizz  .rf-radio .uk-form-controls{
    margin-left: 52px;
}

/* .quiz-next, .quiz-prev{
    display:inline-block;
    margin:10px 0!important;
}

.quiz-next{
    float:right;
}

.quiz-next button, .quiz-prev button{
    background:rgb(255, 255, 255);
    width:40px;
    height:40px;
    line-height:30px;
    text-align: center;
    padding:0;
    border:2px solid #3758F9;
    border-radius: 20px;
    cursor: pointer;
} */


.uk-form-danger{
    border:3px solid red!important;
    background:#fff;
}

/*new quiz question nav*/

.quiz-nav{
    margin-top:20px;
    position:relative;
}

.quiz-nav > a{
    display:inline-block;
    width:30px;
    height:30px;
    border-radius:50px;
    border:3px solid #E0E4EA;
    background:#fff;
    text-align:center;
    line-height:30px;
    color:#000;
    font-weight:bold;
    transition: all 0.4s ease;;
    transition-property: background-color, color, border-color;
}

.quiz-nav > a span{
    transition: all 0.2s ease;
    transition-property: font-size;
}

.quiz-nav > a:hover span{
    font-size:20px;
}



.quiz-nav > a:not(:last-child):before{
    display:block;
    content:"";
    width: calc((100% / 7) + 10px);
    height:3px;
    background-color:#E0E4EA ;
    position:absolute;
    top:50%;
    margin-top:-1.5px;
    z-index:-1;

}

.quiz-prev, .quiz-next{
    display:none;
}

/* .quiz-nav > a:first-child:before{
    display:none!important;
} */



.quiz-nav > a.active, .quiz-nav > a.active-2, .quiz-nav > a.active.completed {
    border-color:#3758F9;
    color:#3758F9;
    background:#fff;
    font-size:20px;
}

.quiz-nav > a.completed:not(:last-child):before{
    background-color:#3758F9 ;
}



.quiz-nav > a.completed{
    border-color:#3758F9;
    color:#ffffff;
    background: #3758F9;
}


.generators-variants h5{
    font-size:24px;
    line-height:24px;
    font-weight:700;
}


@media (max-width:600px){
    .quiz-nav > a{

        width:20px;
        height:20px;
        line-height:20px;
        font-size:11px;
    }

    .quiz-nav > a.active{
        font-size:14px;
    }
}




/*radicalmart-slide-item*/

.radicalmart-slide-item .uk-button {
    width: 60px;
    height: 60px;
    position: absolute;
    padding: 0;
    line-height: 40px;
    border-radius: 50px;
    left: 50%;
    margin-left: -25px;
    bottom: 170px;
    /* display:none; */
    transition:opacity 0.6s ease, transform 0.4s ease;
    transform:scale(0.8);
    opacity:0;
    background:url("../images/view-button.svg") no-repeat center center;
}

.radicalmart-slide-item .uk-button:hover {
    transform:scale(1.3)!important;
}


.radicalmart-slide-item:hover .uk-button {
    /* display:block; */
    opacity:1;
    transform:scale(1.3);
}

.radicalmart-slide-item .product-title{
    font-size:20px;
    line-height:26px;
    text-align:center;
}

.radicalmart-slide-item .product-title:first-letter{
    text-transform:uppercase;
}

.radicalmart-slide-item .product-price{
    font-size:16px;
    line-height:24px;
    text-align:center;
    color:#637381;
}



/* ОБЩИЕ СТИЛИ */
.product-modal {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    padding: 50px;
}

/* Левая часть (СКРОЛЛ) */
.modal-left {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 30px;
    scrollbar-width: thin;
}

/* Стили для правой части (ФОРМА) */
.modal-right {
    padding: 0px 25px 0px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.modal-left img {
    max-width: 60%;
}

.modal-right .product-price {
    color: #637381;
    margin-top:0;
}

/* Кнопка "назад" */
.back-button {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1002;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* Кнопка "Оформить заказ" */
.fixed-order-button {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px;
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 640px) {
    .full-modal {
        height: 100%;
        width: 100%;
        padding: 0;
    }

    .full-modal .uk-modal-dialog {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    .product-modal {
        padding:30px;
    }

    .modal-left {
        display: block;
        max-height: calc(100vh - 60px);
        height: auto;
        padding-right: 0;
        padding: 15px;
    }

    .modal-left img {
        max-width: 100%;
    }

    .modal-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        padding: 30px;
        z-index: 1001;
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
    }

    .modal-left .uk-table td {
        padding: 5px 10px;
        vertical-align: middle;
        font-size: 12px;
    }

    .modal-left .product-price {
        color: #637381;
        margin-top:0;
    }

    /* Показываем правую часть на мобильных */
    .show-order-form .modal-right {
        right: 0;
        opacity: 1;
        visibility: visible;
    }

    /* Показываем кнопку назад на мобильных */
    .show-order-form .back-button {
        display: block;
    }

    /* Отступ для заголовка в форме */
    .modal-right .product-title {
        margin-top: 50px;
    }

    .fixed-order-button {
        display: block;
        border-radius: 0;
    }

    .back-button {
        top: 15px;
        left: 15px;
    }
}
.modal-right .product-title::first-letter,
.modal-left .product-title::first-letter{
    text-transform:uppercase




}





/*full product*/

.full-product .uk-slideshow-items .uk-background-muted{
    padding:0;
    background-color: transparent!important;
}

.full-product .uk-thumbnav li a div{
    padding:0;
}


.full-product .uk-accordion-title.uk-button{
    padding:15px 5px;
    color:#fff;
}

.full-product h1:first-letter{
    text-transform: uppercase;
}

/* review */





.section-testimonials .uk-slider-items > div{
    padding-bottom:1px;
}



.review-card{
    padding:0;
    border:1px solid #E5E5E5;
    box-shadow:none;
}


.review-names{
    text-align:left;

}

.review-name{
    font-size: 16px;
    line-height: 20px;
}

.review-image{
    padding-left:0;
    border-radius:50%;
}

.review-rating{
    text-align: right;
    text-transform: uppercase;
    font-weight: 400;
}

.review-title{
    text-align: left;
    font-size: 21px;
}


.review-content{
    text-align: left;
}

/* Основной стиль кнопки */
.play-button {
    width: 60px;
    height: 60px;
    border: none;
    background-color: #007AFF;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    overflow: hidden;

}

.review-card .play-button{
    position: absolute;
    RIGHT: -30px;
    TOP: 75PX;
    opacity:0;
    transition:opacity 04s ease;
    display:none;
}

.uk-slide-active .play-button{
    opacity:1;
    display:flex;
}

/* Цвет кнопки при наведении */
.play-button:hover {
    background-color: #F6A700;
}

/* Контейнер для волн */
.ripple-container {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0;
    overflow: hidden;
}

/* Волны */
.ripple-container::before,
.ripple-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

/* Включение волн при воспроизведении */
.review-pause .ripple-container::before {
    animation: rippleEffect 1.5s infinite ease-out;
}

.review-pause .ripple-container::after {
    animation: rippleEffect 1.5s infinite ease-out 0.75s;
}

@keyframes rippleEffect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Стили для иконок */
.icon {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* Иконка Play (треугольник) */
.play-icon {
    width: 0;
    height: 0;
    border-left: 16px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 1;
}

/* Иконка Pause (две полоски) */
.pause-icon {
    display: flex;
    justify-content: space-between;
    width: 18px;
    opacity: 0;
}

.pause-icon::before,
.pause-icon::after {
    content: "";
    width: 6px;
    height: 20px;
    background-color: white;
    border-radius: 2px;
}

/* Переключение иконок */
.review-play .play-icon {
    opacity: 1;
    transform: scale(1);
}

.review-play .pause-icon {
    opacity: 0;
    transform: scale(0.8);
}

.review-pause .play-icon {
    opacity: 0;
    transform: scale(0.8);
}

.review-pause .pause-icon {
    opacity: 1;
    transform: scale(1);
}

/* Пульсация кнопки при проигрывании */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.review-pause {
    animation: pulse 1.2s infinite ease-in-out;
}

/* Эффект нажатия */
.play-button:active {
    transform: scale(0.9);
}






/************/

.uk-checkbox {
    display: inline-block;
    height: 20px;
    width: 20px;
    overflow: hidden;
    margin-top: 3px;
    vertical-align: middle;
    border-radius:3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ededed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: .2s ease-in-out;
    transition-property: background-color,border-color,box-shadow;
    /* border: 3px solid #63DE60; */
}

/* .uk-checkbox:checked, .uk-checkbox:indeterminate {
	background-color: #63DE60;
	border-color: #F6B300;
} */


.break{
    display:none;
}
/*@@@@media*/


@media (max-width:960px){



    .hero-guys-block{
        margin-right:0;
        margin-bottom:0!important;

    }

    .hero-generators-block{
        bottom: -46px;
        z-index: 13;
    }

    .hero-guys{

    }

    .hero-audio{
        position:relative;
        bottom:0;
        right:0;
        margin-top:110px!important;
    }

    .hero-audio .audio-box{
        width:100%;
        max-width:500px;
        padding: 25px 25px 6px;
    }

    .hero-audio .text-1{
        font-size: 16px;
        line-height: 22px;
    }

    .hero-audio .text-1 strong{
        font-size:24px;
        line-height:24px;
        font-weight:600;
    }
    .hero-audio .text-2 {
        font-size: 36px;
        margin: 5px 0 !important;
    }

    .hero-audio .text-3 {
        font-size: 20px;
        line-height: 25px;
        margin-top: 10px;
    }
}



@media (max-width:640px){
    .break{
        display:block;
    }

    .hero-info h1{
        font-size: 30px;
        line-height: 34px;
    }

    .hero-guys-block {
        position: absolute;
        /* left: 0; */
        /* right: 0; */
        bottom: 0;
        /* height: 100%; */
        /* overflow: hidden; */
        z-index: 10;
        /* height: 100%; */
        /* max-width: 400px; */
        width: 100%;
    }

    .hero-generators-block{
        bottom: -46px;
        z-index: 13;
    }

    .hero-guys{

    }

    .hero-audio{
        position:relative;
        bottom:0;
        right:0;
        margin-top:100px!important;
    }

    .hero-audio .audio-box{
        width:100%;
        max-width:500px;
        padding: 25px 25px 6px;
    }

    .hero-audio .text-1{
        font-size: 16px;
        line-height: 22px;
    }

    .hero-audio .text-1 strong{
        font-size:24px;
        line-height:24px;
        font-weight:600;
    }
    .hero-audio .text-2 {
        font-size: 36px;
        margin: 5px 0 !important;
    }

    .hero-audio .text-3 {
        font-size: 20px;
        line-height: 25px;
        margin-top: 10px;
    }


    .section-5-generators .uk-tile .uk-h2 {
        font-size: 17.2px;

    }

    .styled-tile-muted .uk-tile {
        clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0% 100%, 0% 30px);
        padding-right:30px!important;
    }

    .quizz .uk-h4{
        padding-left: 50px;
        font-size: 16px;
    }

    .quizz .uk-h4 strong {
        position: absolute;
        left: 0;
    }

    .quizz .rf-radio .uk-form-controls {
        margin-left: 0px;
    }

    .generators-variants h5{
        font-size:24px;
        line-height:24px;
        font-weight:700;
    }

    .generators-variants ul li{

        line-height: 16px;
        margin-bottom: 10px;
    }



    /* radicalmart-category */
    .radicalmart-category .uk-slider-items > li {
        padding-left: 0;;
    }

    /* .product-info */
    .radicalmart-slide-item .product-title {
        font-size: 15px;
        line-height: 18px;

    }



    /* modal-left */

    .modal-left .product-title{
        margin-bottom:10px;
        margin-top:10px;
    }




    .modal-left .product-intro{
        font-size:12px;
    }

    .warranty-points{
        padding:30px;
    }

    .warranty-points .el-item .el-title{
        /* text-align:center;  */

    }

    .warranty-points .el-item .el-content{
        line-height: 25px;

    }

    .section-about{
        padding:20px;
    }


    .section-about h2{

        font-size: 28px;

    }

    .section-about .el-title{
        font-size: 20px;
        line-height: 22px;
    }

    .section-about .el-content{
        font-size: 18px;
        line-height: 22px;
    }


    .review-card .play-button {

        left: 50%;
        margin-left: -20px;
    }
}


@media (max-width:500px){

    .hero-guys-block {
        position: absolute;
        /* left: 0; */
        /* right: 0; */
        bottom: 0;
        /* height: 100%; */
        /* overflow: hidden; */
        z-index: 10;
        /* height: 100%; */
        /* max-width: 400px; */
        width: 100%;
        max-width: 320px;
        margin-left: 100px;
        right: 0;
    }
}


.modal-header{
    font-weight:normal;
}

.modal-header strong{
    font-weight:600;
}