.horo-row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    box-sizing: border-box
}

.horo-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x))
}

.horo-col-6 {
    flex: 0 0 auto;
    width: 50%
}

.horo-col-12 {
    flex: 0 0 auto;
    width: 100%
}

.horo-col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.horo-col-8 {
    flex: 0 0 auto;
    width: 66.66666666%
}

.horo-form-control {
    display: block!important;
    width: 100%!important;
    padding: .375rem .75rem!important;
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.5!important;
    color: #212529!important;
    background-color: #fff!important;
    background-clip: padding-box!important;
    border: 1px solid #ced4da!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    border-radius: .25rem!important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out!important
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulse {
    animation: 3s linear infinite pulse
}

.horoscrope {
    margin: auto;
    max-width: 1200px;
    padding: 15px 4px;
    background: url('../images/20250601072640-b34c.webp');
    background-size: cover!important;
    z-index: -500;
    font-size: 11px!important
}

.horoscrope_box {
    margin: auto;
    max-width: 500px;
    width: 100%;
    position: relative;
    text-align: center
}

.horoscrope_box .imgHandler {
    width: 100%;
    height: auto;
    padding: 0!important;
    margin: 0!important
}

.horoscrope_box .selectArea {
    position: absolute;
    z-index: 1;
    cursor: pointer
}

.horoscrope_result {
    text-align: center;
    padding: 5px;
    line-height: 2
}

.horoscrope .horo-image {
    text-align: center
}

.horoscrope .horo-image img {
    height: 150px
}

.horo-result {
    margin: 15px 0 10px;
    color: #fff;
    font-size: 14px;
    background: #11111161;
    padding: 5px;
    border-radius: 5px;
    min-height: 300px
}

.horoscrope .horo-result b, .horoscrope .horo-result strong {
    color: #fff;
}
.horoscrope .horo-percent strong, .horoscrope .horo-percent b{
    color: #fff;
}

.horo-comp {
    color: #fff;
    font-size: 14px;
    background: #11111161;
    padding: 5px;
    border-radius: 5px
}

.horo-percent {
    text-align: center;
    position: relative;
    color: #fff;
    padding-bottom: 5px
}

.horo-percent strong {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 30px
}

.horo-percent strong i {
    font-style: normal;
    font-size: .6em;
    font-weight: 400
}

.horo-percent-text {
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding-bottom: 20px
}