/* 
Theme Name:		 enforta
Theme URI:		 http://childtheme-generator.com/
Description:	 enforta is a child theme of Hello Elementor, created by ChildTheme-Generator.com
Author:			 WEBSENIOR SRL
Author URI:		 http://childtheme-generator.com/
Template:		 hello-elementor
Version:		 1.0.0
Text Domain:	 enforta
*/


/*
    Add your custom styles here
*/
.figure-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-circle {
    width: 650px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/dashed-circle.png);
    background-size: contain;
    margin: 0 auto;
    background-color: #f1f6fe;
}
.circle-1 {
    width: 554px;
    aspect-ratio: 1 / 1;
    background-color: #F1F6FD;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -277px;
    top: 50%;
    margin-top: -277px;
    box-shadow: -4px -4px 10px 0 rgba(255, 255, 255, 0.94), 5px 7px 10px 0 #07377E0D;
}
.loading .circle-1 {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/circle-1-radar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.loading .circle-2 {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/circle-2-radar.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.circle-2 {
    width: 458px;
    aspect-ratio: 1 / 1;
    background-color: #F1F6FD;
    box-shadow: -4px -4px 10px 0 rgba(255, 255, 255, 0.94), 5px 7px 10px 0 #07377E0D;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -229px;
    top: 50%;
    margin-top: -229px;
}
.circle-wording {
    width: 520px;
    height: 464px;
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/text-icon.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -260px;
    top: 50%;
    margin-top: -256px;
}

.circle-3 {
    width: 346px;
    aspect-ratio: 1 / 1;
    background-color: #F1F6FD;
    box-shadow: -4px -4px 10px 0 rgba(255, 255, 255, 0.94) inset, 5px 7px 10px 0 #07377E0D inset;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -173px;
    top: 50%;
    margin-top: -173px;
}
.circle-4 {
    width: 250px;
    aspect-ratio: 1 / 1;
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/circle-sun.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -125px;
    top: 50%;
    margin-top: -125px;
}
.circle-5 {
    width: 230px;
    aspect-ratio: 1 / 1;
    background-color: #E2E9F212;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -115px;
    top: 50%;
    margin-top: -115px;
    box-shadow: 0 10px 15px -7px #1423381A, 0 15px 15px -4px #0B204017, 0 45px 52px -10px #07377E33, 0 80px 80px -10px #07377E0D;
}

.main-figure {
    width: 130px;
    aspect-ratio: 1 / 1;
    background-color: #E2E9F212;
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/white-label-figure.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 50%;
    margin-left: -65px;
    top: 50%;
    margin-top: -65px;
}

.circle-1-stars {
    width: 554px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -277px;
    top: 50%;
    margin-top: -277px;
}

span.star {
    background: #F1F6FD;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 5px 7px 10px 0 #07377E0D, -4px -4px 10px 0px #FFFFFFF0;
    display: block;
    position: absolute;
}

.circle-1-stars span.star-1 {
    left: 176px;
}

.circle-1-stars span.star.star-2 {
    right: -12px;
    left: auto;
    top: 50%;
}

.circle-1-stars span.star.star-3 {
    right: 245px;
    left: auto;
    bottom: -12px;
}

.circle-1-stars span.star:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #FF5613;
    border-radius: 50%;
}

.circle-2-stars span.star:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #016BFF;
    border-radius: 50%;
}
.circle-2-stars {
    width: 458px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -229px;
    top: 50%;
    margin-top: -229px;
}

.circle-2-stars span.star-1 {
    right: 62px;
    top: 10%;
}

.circle-2-stars span.star.star-2 {
    right: 87px;
    left: auto;
    bottom: 6%;
}

.circle-2-stars span.star.star-3 {
    right: auto;
    left: auto;
    bottom: 31%;
}

/* Circle 1 – counterclockwise */
@keyframes rotate-ccw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Circle 2 – clockwise */
@keyframes rotate-cw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.circle-1,
.circle-2,
.circle-1-stars,
.circle-2-stars {
    transition: 0.5s ease-in-out;
}
/* Active only when .main-circle.loading este prezent */
.main-circle.loading .circle-1 {
    animation: rotate-ccw 2s linear infinite;
    transition: 0.5s ease-in-out;
}

.main-circle.loading .circle-2 {
    animation: rotate-cw 2s linear infinite;
    transition: 0.5s ease-in-out;
}

.main-circle.loading .circle-1-stars {
    animation: rotate-ccw 10s linear infinite;
    transition: 0.5s ease-in-out;
}

.main-circle.loading .circle-2-stars {
    animation: rotate-cw 15s linear infinite;
    transition: 0.5s ease-in-out;
}

.stage-2 .main-figure {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/api-integration-figure.svg);
    width: 134px;
    height: 130px;
    margin-left: -66px;
    margin-top: -65px;
}

.stage-3 .main-figure {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/hibrid-model-figure.svg);
}


/* Interaction between sides */
.left-side-pane,
.right-side-pane {
    position: absolute;
    z-index: 1;
}
.left-side-pane {
    left: 0;
}
.right-side-pane {
    right: 0;
}
.cta-right a {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}
.cta-left a,
.cta-right a {
    padding: 16px 24px 16px 20px;
    color: #000;
    border-radius: 8px;
    box-shadow: -4px -4px 10px 0 #FFFFFFF0, 5px 7px 10px 0 #07377E0D !important;
    background-color: #F1F6FD !important;
    margin-bottom: 25px;
    transition: 0.2s ease-in-out;
    display: flex;
    width: 100%;
    position: relative;
}
.cta-left a.active {
    background: #fff !important;
    box-shadow: 0px 4.67px 7px -3.27px #1423381A, 0px 7px 7px -1.87px #0B204017, 0px 21px 24px -4.67px #07377E33 !important;
}
.cta-right a span {
    left: 5px;
}
.cta-left a span,
.cta-right a span {
    margin-right: 10px;
    position: relative;
    top: 2px;
}
.cta-left a.active span {
    color: #FF5613;
}
.right-side-pane {
    width: 21.6%;
}

/* === Base panes === */
.right-side-pane > div {
    display: none;
}

.right-side-pane > div.is-active {
    display: block;
}

/* === Reveal animation setup === */
.right-side-pane .cta-right {
    opacity: 0;
    transform: translateY(-10px);
    transition:
            opacity 0.4s ease,
            transform 0.4s ease;
}

/* When revealed */
.right-side-pane .cta-right.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional: active state left buttons */
.left-side-pane a.active {
    opacity: 1;
}

.left-side-pane a:not(.active) {
    opacity: 1;
}


.step-pane-2 .main-figure {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/api-integration-figure.svg);
}

.step-pane-3 .main-figure {
    background-image: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/hibrid-model-figure.svg);
}



@media(min-width: 1451px){

    .cta-left a:after,
    .cta-right a:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: url(https://enforta.websenior.ro/wp-content/uploads/2025/12/line-long.png);
        top: 48%;
        background-repeat: repeat;
        z-index: -1;
    }
    .cta-left a:after {
        right: -100%;
    }
    .cta-right a:after {
        left: -100%;
    }

    .cta-left a.btn-2:after {
        right: -90%;
    }
    .cta-left a:before {
        content: "";
        width: 12px;
        height: 12px;
        position: absolute;
        right: -100%;
        background: #f1f6fe;
        border-radius: 50%;
        border: 1px solid #CFDCE8;
        top: 38%;
        transition: 0.2s ease-in-out;
    }
    .cta-left a.btn-2:before {
        content: "";
        margin-right: 13px;
    }
    .cta-left a.btn-3:before {
        content: "";
        margin-right: 6px;
    }
    .cta-right a.btn-1:after {
        left: -42%;
    }
    .cta-right a.btn-2:after {
        left: -30%;
    }
    .cta-right a.btn-3:after {
        left: -24%;
    }
    .cta-right a.btn-4:after {
        left: -28%;
    }
    .cta-right a.btn-5:after {
        left: -38%;
    }

    .cta-left a.active:before{
        background-color: #016BFF;
        border-color: #016BFF;
    }
    .cta-right a:before {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        left: -100%;
        background: #CFDCE8;
        border-radius: 50%;
        border: 1px solid #CFDCE8;
        top: 38%;
        transition: 0.2s ease-in-out;
    }
    .cta-right a.btn-1:before {
        left: -44%;
        margin-top: 2px;
    }
    .cta-right a.btn-2:before {
        left: -32%;
        margin-top: 2px;
    }
    .cta-right a.btn-3:before {
        left: -27%;
        margin-top: 2px;
    }
    .cta-right a.btn-4:before {
        left: -29%;
        margin-top: 2px;
    }
    .cta-right a.btn-5:before {
        left: -39%;
        margin-top: 2px;
    }

}

@media(min-width: 1250px) and (max-width:1451px){
    .left-side-pane {
        left: 2%;
    }
    .right-side-pane {
        right: 2%;
    }
}


@media(max-width:1249px){
    .left-side-pane {
        position: relative;
        order: 1;
    }
    .right-side-pane {
        position: relative;
        order: 2;
    }
    .main-circle {
        position: relative;
        order: 2;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .figure-container {
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .left-side-pane {
        display: flex;
        gap: 20px;
    }
    .right-side-pane {
        width: 95%;
        max-width: 650px;
    }
}

@media(max-width: 767px){
    .cta-left a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }
    .cta-left a span {
        margin-right: 0;
    }
    .main-circle {
        width: 520px;
    }

    .circle-1 {
        width: 443.2px;
        margin-left: -221.6px;
        margin-top: -221.6px;
    }

    .circle-2 {
        width: 366.4px;
        margin-left: -183.2px;
        margin-top: -183.2px;
    }

    .circle-3 {
        width: 276.8px;
        margin-left: -138.4px;
        margin-top: -138.4px;
    }

    .circle-4 {
        width: 200px;
        margin-left: -100px;
        margin-top: -100px;
    }

    .circle-5 {
        width: 184px;
        margin-left: -92px;
        margin-top: -92px;
    }

    .main-figure {
        width: 104px;
        margin-left: -52px;
        margin-top: -52px;
    }

    /* ===== WORDING ===== */
    .circle-wording {
        width: 416px;
        height: 371.2px; /* aici rămâne height, NU e cerc */
        margin-left: -208px;
        margin-top: -185.6px;
    }

    /* ===== STARS ===== */
    .circle-1-stars {
        width: 443.2px;
        margin-left: -221.6px;
        margin-top: -221.6px;
    }

    .circle-2-stars {
        width: 366.4px;
        margin-left: -183.2px;
        margin-top: -183.2px;
    }

    /* ===== STAR POSITIONS – scale 0.8 ===== */
    .circle-1-stars span.star-1 {
        left: 140.8px;
    }

    .circle-1-stars span.star.star-2 {
        right: -9.6px;
    }

    .circle-1-stars span.star.star-3 {
        right: 196px;
        bottom: -9.6px;
    }

    .circle-2-stars span.star-1 {
        right: 49.6px;
    }

    .circle-2-stars span.star.star-2 {
        right: 69.6px;
    }
    .circle-wording {
        margin-top: -204.6px;
    }
    .cta-left a, .cta-right a {
        margin-bottom: 14px;
    }
}

@media (max-width: 580px) {

    .main-circle {
        width: 468px;
    }

    .circle-1 {
        width: 398.88px;
        margin-left: -199.44px;
        margin-top: -199.44px;
    }

    .circle-2 {
        width: 329.76px;
        margin-left: -164.88px;
        margin-top: -164.88px;
    }

    .circle-3 {
        width: 249.12px;
        margin-left: -124.56px;
        margin-top: -124.56px;
    }

    .circle-4 {
        width: 180px;
        margin-left: -90px;
        margin-top: -90px;
    }

    .circle-5 {
        width: 165.6px;
        margin-left: -82.8px;
        margin-top: -82.8px;
    }

    .main-figure {
        width: 93.6px;
        margin-left: -46.8px;
        margin-top: -46.8px;
    }

    /* ===== WORDING ===== */
    .circle-wording {
        width: 374.4px;
        height: 334.08px;
        margin-left: -187.2px;
        margin-top: -183.04px;
    }

    /* ===== STARS CONTAINERS ===== */
    .circle-1-stars {
        width: 398.88px;
        margin-left: -199.44px;
        margin-top: -199.44px;
    }

    .circle-2-stars {
        width: 329.76px;
        margin-left: -164.88px;
        margin-top: -164.88px;
    }

    /* ===== STAR POSITIONS (scaled 0.72) ===== */
    .circle-1-stars span.star-1 {
        left: 126.72px;
    }

    .circle-1-stars span.star.star-2 {
        right: -8.64px;
    }

    .circle-1-stars span.star.star-3 {
        right: 176.4px;
        bottom: -8.64px;
    }

    .circle-2-stars span.star-1 {
        right: 44.64px;
    }

    .circle-2-stars span.star.star-2 {
        right: 62.64px;
    }

}


@media (max-width: 520px) {

    .main-circle {
        width: 374.4px;
    }

    .circle-1 {
        width: 319.1px;
        margin-left: -159.55px;
        margin-top: -159.55px;
    }

    .circle-2 {
        width: 263.8px;
        margin-left: -131.9px;
        margin-top: -131.9px;
    }

    .circle-3 {
        width: 199.3px;
        margin-left: -99.65px;
        margin-top: -99.65px;
    }

    .circle-4 {
        width: 144px;
        margin-left: -72px;
        margin-top: -72px;
    }

    .circle-5 {
        width: 132.5px;
        margin-left: -66.25px;
        margin-top: -66.25px;
    }

    .main-figure {
        width: 74.9px;
        margin-left: -37.45px;
        margin-top: -37.45px;
    }

    /* ===== WORDING ===== */
    .circle-wording {
        width: 299.5px;
        height: 267.3px;
        margin-left: -149.75px;
        margin-top: -145.65px;
    }

    /* ===== STARS CONTAINERS ===== */
    .circle-1-stars {
        width: 319.1px;
        margin-left: -159.55px;
        margin-top: -159.55px;
    }

    .circle-2-stars {
        width: 263.8px;
        margin-left: -131.9px;
        margin-top: -131.9px;
    }

    /* ===== STAR POSITIONS (scaled 0.576) ===== */
    .circle-1-stars span.star-1 {
        left: 101.4px;
    }

    .circle-1-stars span.star.star-2 {
        right: -6.9px;
    }

    .circle-1-stars span.star.star-3 {
        right: 141.1px;
        bottom: -6.9px;
    }

    .circle-2-stars span.star-1 {
        right: 35.7px;
    }

    .circle-2-stars span.star.star-2 {
        right: 50.0px;
    }
    span.star {
        width: 21.6px;
        height: 21.6px;
    }
    .circle-1-stars span.star:before,
    .circle-2-stars span.star:before {
        left: 7px;
        top: 7px;
        width: 8px;
        height: 8px;
    }
    .left-side-pane {
        gap: 9px;
        width: 95%;
    }
}
@media (max-width: 400px) {
    .cta-left a {
        padding-left: 8px;
        padding-right: 8px;
    }
    .cta-left {
        flex: 1;
    }
}