/**
 * Theme Name: Cashare 2024
 * Author: DevLabor GmbH
 * Author URI: https://devlabor.com
 * Description: Child Theme of Hello Elementor
 * Version: 1.0.0
 * Template: hello-elementor
 *
 * Text Domain: cashare
 * Domain Path: /languages
*/

body {
    margin: 0;
    overflow-x: hidden !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;

    main,
    > .elementor-location-single,
    > .elementor-location-footer {
        overflow-x: hidden !important;
    }
}

.cashare-container-wrapper {
    position: relative;

    > svg,
    > .background-stripes {
        left: 0;
        right: 0;
        margin: 0 auto;
        position: absolute;
    }

    > svg {
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    > .background-stripes {
        top: 50%;
        width: auto;
        bottom: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        transition: all 2s ease;
        transform: translateY(-50%) rotateX(90deg);

        &.visible-in {
            transform: translateY(-50%);
        }
    }
}

.blurred-bubble {
    $size: 512px;
    top: 20%;
    width: $size;
    height: $size;
    position: absolute;
    animation-duration: 20s;
    animation-fill-mode: both;
    animation-play-state: running;
    transform: rotateZ(1deg) scaleX(1);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

    &.left {
        left: -$size / 2;
    }

    &.right {
        right: -$size / 2;
    }

    &.center {
        left: 0;
        right: 0;
        top: 30%;
        width: 100%;
        height: 100%;
        margin: auto;
        max-width: 1000px;
        max-height: 600px;
    }

    &.color-primary {
        background-image: radial-gradient($container-primary-color 15%, $transparent 70%);
    }

    &.color-secondary {
        background-image: radial-gradient($container-secondary-color 15%, $transparent 70%);
    }
}

.gradient-shadow-square {
    position: relative;
    transform: translateZ(1px) perspective(100vw) rotateY(0deg);
    transform-style: preserve-3d;

    &:after {
        /*content: "";
        left: -20%;
        top: -20%;
        right: -20%;
        bottom: -20%;
        position: absolute;
        background: url('https://cashare2024.codelords.de/wp-content/themes/cashare-2024/assets/box-shadow-2-color-square.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: -1;
        transition: all 0.3s ease;
        background-position: center;
        transform: translateZ(-1px);*/

        @include create-animated-background((#44BCFF -0.55%, #44B0FF 22.86%, #FF44EC 48.36%, #FF44EC 73.33%, #FF675E 99.34%), 90deg);
    }
}

.gradient-shadow-button {
    position: relative;

    &:before {
        content: "";
        left: -10%;
        top: -10%;
        right: -15%;
        bottom: -40%;
        position: absolute;
        background: url('https://cashare2024.codelords.de/wp-content/themes/cashare-2024/assets/box-shadow-4-color-button.png');
        background-size: 50% 50%;
        background-repeat: no-repeat;
        z-index: -1;
        transition: all 0.3s ease;
        background-position: center;
    }

    &:hover {
        &:before {
            background-size: 100% 100%;
        }
    }
}

/* some tooling */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1.0rem;
}

.gap-7 {
    gap: 1.75rem;
}

.\!gap-7 {
    gap: 1.75rem !important;
}

.text-5xl {
    font-size: 3.5rem;
    line-height: 3rem;
}

.text-3xl {
    font-size: 2.125rem;
    line-height: 2.875rem;
}

.text-2xl {
    font-size: 2rem;
    line-height: 2.875rem;
}

.text-xl {
    font-size: 1.125rem;
    line-height: 1.125rem;
}

.text-sm {
    font-size: 1rem;
    line-height: 2rem;
}

.text-xs {
    font-size: 0.875rem;
    line-height: 0.875rem;
}

.text-2xs {
    font-size: 0.75rem;
    line-height: 0.75rem;
}

.text-gray-200 {
    color: #8E8F8F;
}

.text-gray-600 {
    color: #424748;
}

.text-gray-700 {
    color: #424D53;
}

.justify-between {
    justify-content: space-between;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-1\/3 {
    width: 32%;
}

.border-bottom {
    border-bottom: 1px solid #E5E5E5;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: end;
}

.flex-grow {
    flex-grow: 1;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.text-white {
    color: white;
}

.tooltip-bubble {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 2rem;
    color: #373F52;
    display: flex;
    align-self: end;
    margin-left: 0;
    justify-content: center;
    align-items: center;
    z-index: 10;
    min-width: 140px;
    margin-bottom: 1rem;
    background: white;
}


.slider-input {
    height: 12px;
    border-radius: 6px;
    background: #E2F5F7;
    width: 100%;
}

.slider-input::-webkit-slider-runnable-track {
    background: #E3F5F9;
    height: 0.5rem;
}

.slider-input::-moz-range-track {
    background: #E3F5F9;
    height: 0.5rem;
}

:root {
    --track-color: #4FB0C6;
}

.track-color-secondary {
    --track-color: #03799A;
}

input[type="range"]::-webkit-slider-thumb {
    box-shadow: -407px 0 0 400px var(--track-color);
}

input[type="range"]::-moz-range-thumb {
    box-shadow: -407px 0 0 400px var(--track-color);
}

input[type="range"] {
    overflow: hidden;
    border-radius: 16px;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    height: 12px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: var(--track-color);
    border-radius: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    margin-top: -5px;
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    background-color: var(--track-color);
    border-radius: 50%;
    border: 0;
}


.app-yield-calculator {
    display: flex;
    gap: 5%;
    flex-direction: row;

    .container-glass-wrapper {
        position: relative;
        max-width: 47%;
        width: 100%;

        .container-glass {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 1rem;
            backdrop-filter: blur(40px);
            padding: 5.625rem 3.875rem 3.5rem 3.875rem;
            color: white;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
            z-index: 1;

            .container-result {
                display: flex;
                justify-content: space-between;
                background: #FFFFFF73;
                padding: 1.75rem;
                border-radius: 0.75rem;
            }
        }
    }


}

.app-recent-projects {
    position: relative;

    .projects {
        display: flex;
        gap: 20px 2%;
        flex-wrap: wrap;
        padding-bottom: 2rem;

        .project-item {
            width: 32%;
            border-radius: 1.5rem;
            box-shadow: 3.26px 8.16px 24.48px 0 #0000000F;
            display: flex;
            gap: 1.5rem;
            padding: 1rem 2rem;

            .text-gradient {
                background: linear-gradient(90deg, #176570 0%, #29BACE 100%);
                background-clip: text !important;
                color: transparent !important;
            }
        }
    }

    .btn-invest {
        text-transform: uppercase;
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
        border-radius: 1.5rem;

        a {
            font-size: 1.25rem;
            font-weight: bold !important;
        }
    }

    .gradient-border {
        position: relative;
        background: white;

        &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: -1px;
            z-index: -1;
            background: linear-gradient(90deg, #176570 0%, #29BACE 100%);
            border-radius: 1.5rem;

        }
    }

    .fade-out-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        background: linear-gradient(0deg, white 20%, transparent);
    }
}


.calculator-borrow,
.calculator-invest {
    display: flex;
    flex-direction: column;
    background: white;
    gap: 1rem;
    padding: 2rem;
    border-radius: 1rem;
    transition: $transition;
}

.calculator-invest {
    transform: translateZ(-3px) perspective(100vw) rotateY(180deg);
}