.jss59 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jss82 {
        width: var(--main-size);
        height: var(--main-size);
        margin: 0 auto;
        position: relative;
    }


    .jss81 {
        width: 100%;
        height: 100%;
        padding: calc(var(--circle-icon-size) / 2);
        box-sizing: border-box;
        --icon-size: 54px;
        --main-size: 428px;
        --protocol-size: 48px;
        --circle-icon-size: 86px;
        --circle-protocol-size: 58px;
        --delay-loop-animation: calc(var(--second-delay-position-animation) + var(--second-duration-position-animation));
        --speed-loop-animation: 100s;
        --delay-position-animation: 1s;
        --duration-position-animation: 1s;
        --second-delay-position-animation: calc(var(--delay-position-animation) + var(--duration-position-animation));
        --second-duration-position-animation: 1s;
    }

    @media (max-width:719.95px) {
        .jss81 {
            --icon-size: 34px;
            --main-size: 270px;
            --protocol-size: 30px;
            --circle-icon-size: 54px;
            --circle-protocol-size: 36px;
        }
    }

    .jss81 * {
        box-sizing: border-box;
    }

    .jss82 {
        width: var(--main-size);
        height: var(--main-size);
        margin: 0 auto;
        position: relative;
    }

    .jss83 {
        top: 0;
        left: 0;
        width: 100%;
        border: 2px dashed #009393;
        height: 100%;
        opacity: 0.15;
        position: absolute;
        animation:
            jss92 var(--duration-position-animation) ease-out var(--delay-position-animation) backwards,
            jss95 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        border-radius: 50%;
    }

    .jss84 {
        top: 50%;
        left: 50%;
        width: 50%;
        border: 2px dashed #009393;
        height: 50%;
        opacity: 0.15;
        position: absolute;
        animation:
            jss100 var(--second-duration-position-animation) ease-out var(--second-delay-position-animation) backwards,
            jss101 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    .jss85 {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        transform: rotate(var(--initial-rotation));
    }

    .jss86 {
        top: 0%;
        left: 50%;
        width: 50%;
        border: 2px dashed #009393;
        height: 50%;
        opacity: 0.15;
        position: absolute;
        animation:
            jss98 var(--second-duration-position-animation) ease-out var(--second-delay-position-animation) backwards,
            jss99 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: translate(-50%, 0);
        border-radius: 50%;
    }

    .jss87 {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        animation: jss93 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: rotate(var(--initial-rotation));
        transform-origin: center;
    }

    .jss88 {
        top: 0;
        left: 50%;
        width: var(--circle-icon-size);
        filter: drop-shadow(0px 5px 24px rgba(2, 88, 88, 0.03));
        height: var(--circle-icon-size);
        display: flex;
        position: absolute;
        animation:
            jss96 var(--duration-position-animation) ease-out var(--delay-position-animation) backwards,
            jss94 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        background-color: white;
    }

    .jss88 img {
        width: 100%;
        height: 100%;
        max-width: var(--icon-size);
        object-fit: contain;
    }

    .jss89 {
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        position: absolute;
        animation:
            jss102 calc(var(--second-duration-position-animation) / var(--count-protocols)) ease-out calc(var(--second-delay-position-animation) + var(--second-duration-position-animation) / var(--count-protocols) * var(--index)) backwards,
            jss103 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        border-radius: 50%;
    }

    .jss90 {
        top: 0;
        left: 50%;
        width: var(--circle-protocol-size);
        filter: drop-shadow(0px 5px 24px rgba(2, 88, 88, 0.03));
        height: var(--circle-protocol-size);
        display: flex;
        position: absolute;
        animation:
            jss104 var(--speed-loop-animation) linear var(--delay-loop-animation) infinite;
        transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        background-color: white;
    }

    .jss90 img {
        width: 100%;
        height: 100%;
        max-width: var(--protocol-size);
        object-fit: contain;
    }

    .jss91 {
        top: 50%;
        left: 50%;
        width: var(--circle-icon-size);
        filter: drop-shadow(0px 5px 24px rgba(2, 88, 88, 0.03));
        height: var(--circle-icon-size);
        display: flex;
        position: absolute;
        animation: jss97 calc(var(--duration-position-animation) / 2) ease-out var(--delay-position-animation) backwards;
        transform: translate(-50%, -50%);
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        background-color: white;
    }

    .jss91 img {
        width: 100%;
        height: 100%;
        max-width: var(--icon-size);
        object-fit: contain;
    }

    @-webkit-keyframes jss92 {
        from {
            top: 50%;
            left: 50%;
            width: 0%;
            height: 0%;
        }

        to {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    @-webkit-keyframes jss93 {
        from {
            transform: rotate(var(--initial-rotation));
        }

        to {
            transform: rotate(calc(var(--initial-rotation) + 360deg));
        }
    }

    @-webkit-keyframes jss94 {
        from {
            transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        }

        to {
            transform: translate(-50%, -50%) rotate(calc(var(--initial-rotation) - 360deg));
        }
    }

    @-webkit-keyframes jss95 {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(-360deg);
        }
    }

    @-webkit-keyframes jss96 {
        from {
            top: 50%;
        }

        to {
            top: 0;
        }
    }

    @-webkit-keyframes jss97 {
        from {
            transform: translate(-50%, -50%) scale(1);
        }

        50% {
            transform: translate(-50%, -50%) scale(1.2);
        }

        to {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @-webkit-keyframes jss98 {
        from {
            opacity: 0;
            transform: translate(-50%, 50%);
        }

        to {
            opacity: 0.15;
            transform: translate(-50%, 0%);
        }
    }

    @-webkit-keyframes jss99 {
        from {
            transform: translate(-50%, 0%) rotate(0);
        }

        to {
            transform: translate(-50%, 0%) rotate(360deg);
        }
    }

    @-webkit-keyframes jss100 {
        from {
            opacity: 0;
        }

        to {
            opacity: 0.15;
        }
    }

    @-webkit-keyframes jss101 {
        from {
            transform: translate(-50%, -50%) rotate(0);
        }

        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @-webkit-keyframes jss102 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes jss103 {
        from {
            transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        }

        to {
            transform: translate(-50%, -50%) rotate(calc(var(--initial-rotation) - 360deg));
        }
    }

    @-webkit-keyframes jss104 {
        from {
            transform: translate(-50%, -50%) rotate(var(--initial-rotation));
        }

        to {
            transform: translate(-50%, -50%) rotate(calc(var(--initial-rotation) + 360deg));
        }
    }



    .banner__video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .banner__video video {
        width: 100%;
        height: 120%;
        object-fit: cover;
    }
    /* Featured Blog Styles */
    .blog__featured-item {
        background: linear-gradient(135deg, rgba(0, 147, 147, 0.05) 0%, rgba(192, 161, 97, 0.05) 100%);
        border: 1px solid #c0a06136;
        border-radius: 20px;
        padding: 30px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .blog__featured-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px #c0a06136;
        border-color: #c0a06136;
    }

    .blog__featured-thumb {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        height: 100%;
        min-height: 400px;
    }

   

    .featured-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background: linear-gradient(135deg, #ffcc66 0%, #b9964f 100%);
        color: #fff;
        padding: 8px 20px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 600;
        z-index: 2;
        box-shadow: 0 5px 15px #c0a06136;
    }

    .blog__featured-content {
        padding: 20px 0 20px 30px;
    }

    .blog__featured-content .date {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .blog__featured-content .date i {
        margin-right: 8px;
    }

    .blog__featured-content .title {
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .blog__featured-content .title a {
        transition: color 0.3s ease;
    }

    .blog__featured-content .title a:hover {
    }

    .blog__featured-content .desc {
        font-size: 16px;
        line-height: 1.7;
        color: #666;
        margin-bottom: 25px;
    }

    .blog__meta {
        margin-bottom: 30px;
    }

    .blog__meta ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .blog__meta li {
        color: #999;
        font-size: 14px;
    }

    .blog__meta li i {
        color: var(--tg-primary-color);
        margin-right: 5px;
    }

    /* Regular Blog Post Styles */
    .blog__post-item {
        background: linear-gradient(135deg, #222325 0%, rgba(21, 21, 21, 0) 100%);
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid #c0a06136;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .blog__post-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px #c0a06136;
        border-color: #c0a06136;
    }

    .blog__post-thumb {
        position: relative;
        overflow: hidden;
        height: 250px;
    }


    .blog__post-content {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .blog__post-content .date {
        display: inline-block;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .blog__post-content .title {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .blog__post-content .title a {
        transition: color 0.3s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog__post-content .title a:hover {
        color: var(--tg-primary-color);
    }

    .blog__post-content p {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-grow: 1;
    }

    .blog__post-content .read-more {
        font-weight: 600;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        margin-top: auto;
    }

    .blog__post-content .read-more:hover {
        color: #C0A161;
        gap: 12px;
    }

    .blog__post-content .read-more i {
        transition: transform 0.3s ease;
    }

    .blog__post-content .read-more:hover i {
        transform: translateX(5px);
    }

   

    /* Responsive */
    @media (max-width: 991px) {
        .blog__featured-content {
            padding: 30px 0 0;
        }

        .blog__featured-content .title {
            font-size: 26px;
        }

        .blog__featured-thumb {
            min-height: 300px;
        }
    }

    @media (max-width: 575px) {
        .blog__featured-content .title {
            font-size: 22px;
        }

        .blog__meta ul {
            gap: 15px;
        }

        .blog__featured-thumb {
            min-height: 250px;
        }
    }
        .avt_team {
        width: 250px;
        height: 250px;
    }