@media (min-width: 1200px) {
    #my_team_slider .swiper-wrapper {
        width: auto;
        row-gap: 30px;
    }
}

@media (max-width: 1199.98px) {
    #my_team_slider .swiper-wrapper.row {
        --bs-gutter-x: 0;
    }
}
li.menu-item-has-children{
    cursor:pointer;
}
.shorten-space {
    margin-bottom: -.5em;
    margin-top: -.5em;
    padding: 0;
}

/*hr {
    border: none;
    height: 1px;
    color: #9C853E;
    background-color: #9C853E;
    width: 70%;
    margin: 0 auto;
}*/

h1, h2, h3, h4, h5, h6 {
    font-weight: lighter;
}
.header__area-menubar-center-menu ul li.menu-item-has-children > a{
    cursor: pointer;
}

@property --progress-value {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

:root {
    --progress-bar-color: #cfd8dc;
    --progress-value-color: linear-gradient(to right, black, #9C853E);
    --progress-empty-color-h: 55.1;
    --progress-empty-color-s: 89.6;
    --progress-empty-color-l: 58.4;
    --progress-filled-color-h: 122.4;
    --progress-filled-color-s: 39.4;
    --progress-filled-color-l: 49.2;
}

progress[value] {
    display: block;
    position: relative;
    appearance: none;
    width: 100%;
    height: 6px;
    border: 2px;
    --border-radius: 20px;
    border-radius: var(--border-radius);
    counter-reset: progress var(--progress-value);
    --progress-value-string: counter(progress) '%';
    --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));
    --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));
    background-image: linear-gradient(90deg, #9C853E 0%, #8E7833 50%, #9C853E 100%);


    @supports selector(::-moz-progress-bar) {
        --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));
    }

    --progress-value-percent: calc(var(--progress-value-decimal) * 100%);
    --progress-value-color: hsl( calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg) calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%) calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%) );
    animation: calc(3s * var(--progress-max-decimal)) linear 0.5s 1 normal both progress;
}

    progress[value]::-webkit-progress-bar {
        background-color: var(--progress-bar-color);
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    progress[value]::-webkit-progress-value {
        width: var(--progress-value-percent) !important;
        background-color: var(--progress-value-color);
        border-radius: var(--border-radius);
    }

    progress[value]::-moz-progress-bar {
        width: var(--progress-value-percent) !important;
        background-color: var(--progress-value-color);
        border-radius: var(--border-radius);
    }

    progress[value]::after {
        display: flex;
        align-items: center;
        justify-content: center;
        --size: 32px;
        width: var(--size);
        height: var(--size);
        position: absolute;
        left: var(--progress-value-percent);
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--progress-value-color);
        border-radius: 50%;
        content: attr(value);
        content: var(--progress-value-string, var(--value));
        font-size: 12px;
        font-weight: 700;
        color: #fff;
    }

@keyframes progress {
    from {
        --progress-value: 0;
    }

    to {
        --progress-value: var(--value);
    }
}


.payment-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:0px;
    justify-content: center;
    height: auto;

  

    border-radius: 10px;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
    animation: fade-in 1s ease-in-out;
}

    .payment-success p {    
        font-family: Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        margin: 0;
        padding: 10px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
       
        animation: slide-in 1s ease-in-out;
    }

        .payment-success p:first-child {
            animation-delay: 0.5s;
        }

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
}