.smarteco-layer-switcher {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}


.smarteco-layer-switcher .wrappers {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.smarteco-layer-switcher .wrappers .layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*background-color: #0a4b78;*/
    /*opacity: 0.5;*/
}

.smarteco-layer-switcher .wrappers .layers .layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.smarteco-layer-switcher .wrappers .controls {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.smarteco-layer-switcher .wrappers .controls .control {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.smarteco-layer-switcher .wrappers .controls .control.active {
    background-color: #fff;
}

.smarteco-layer-switcher .wrappers .controls .control:hover {
    background-color: #fff;
}

.smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper {
    display: flex;
    width: 100%;
    max-width: 144px;
    justify-content: start;
    align-items: center;
    gap: 40px;
}

.smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper .divider {
    width: 3px;
    height: 48px;
    background-color: #1E5BC6;
}

.smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper .control-text {
    color: #262626
}

.smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper .control-subtext {
    color: #666666
}

.smarteco-layer-switcher .wrappers .cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 4px;
    background-color: #1E5BC6;
}

.smarteco-layer-switcher .wrappers .controls .cta-wrapper .smarteco-layer-switcher-cta-text {
    color: #fff;
}


.smarteco-layer-switcher .wrappers .cta-wrapper .cta-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 4px;
    background-color: #fff;
    color: #1E5BC6;
    font-weight: 500;
    font-size: 14px;
    font-family: "Ubuntu", sans-serif;
    line-height: 120%;
    letter-spacing: -2%;
    transition: all 0.3s ease-in-out;
}

.smarteco-layer-switcher .wrappers .cta-wrapper .cta-button:hover {
    background-color: #C7D6F1;
}

@media (width < 950px) {
    .smarteco-layer-switcher {
        gap: 40px;
    }

    .smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper .control-text {
        font-size: 28px;
    }

    .smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper,
    .smarteco-layer-switcher .wrappers .controls .control {
        gap: 20px;
    }
}

@media (width < 768px) {
    .smarteco-layer-switcher {
        flex-direction: column;
        gap: 40px;
    }

    .smarteco-layer-switcher .wrappers {
        flex-basis: 100%;
    }

    .smarteco-layer-switcher .controls-wrapper {
        width: 100%;
    }
    .smarteco-layer-switcher .wrappers .controls .control .control-text-wrapper,
    .smarteco-layer-switcher .wrappers .controls .control {
        gap: 40px;
    }
}