/* @import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap'); */
html, body { margin: 0; height: 100%; background: #fff; font-family: Arial, Helvetica, sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; font-size: 0.781vw; font-weight: 400; color: #333; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: rgba(0,0,0,.01) 0 0 0.052vw; }

:root {
    --subcolor1: #fe4e00 /*#ff5347*/;
    --subcolor2: #ddce58 /*#ff9d4f*/;
    --subcolor3: #99e5c5 /*#f8be34*/;
    --subcolor4: #215b6d /*#81d152*/;

    --rainbow1: #215b6d /*#008bff*/;
    --rainbow2: #2991b1 /*#50c3fc*/;
    --rainbow3: #4ee4e9 /*#86f460*/;
    --rainbow4: #99e5c5 /*#4be035*/;
    --rainbow5: #41e9a3 /*#32c822*/;
    --rainbow6: #02bb6e /*#0da303*/;
    --rainbow7: #f1e9aa /*#ffd02c*/;
    --rainbow8: #ddce58 /*#ffaf11*/;
    --rainbow9: #ffa51f /*#ff8f00*/;
    --rainbow10: #fe4e00 /*#ec6500*/;
    --rainbow11: #c43b00 /*#da3e00*/;
    --rainbow12: #fe0055 /*#b529f7*/;

    --beige: #faf7e0;
    --celadon: #99e5c5;
    --aeorange: #fe4e00;
    --midgreen: #215b6d;
}

@keyframes sectionshow {
    /* 0% { visibility: none; }
    100% { visibility: visible; } */
}

.h5, h5 { font-size: 1.042vw; }
.h4, h4 { font-size: 1.25vw; }

section, .section { width: 100%; height: auto; min-height: 100vh; background: #f5f5f5; padding: 2.604vw 0; position: relative; animation: sectionshow 7s ease-in-out both; }
.view__inner { width: 100%; height: 100%; position: relative; left: 0; top: 0; }
.page-heading { width: fit-content; height: 3.646vw; display: block; background: transparent url(../images/page-head-bg-2.png) repeat-x top center; background-size: auto 100%; padding: 0 1.042vw; font-size: 1.563vw; line-height: 3.646vw; font-weight: 700; text-align: center; color: #333; text-shadow: 0 -0.104vw rgba(255,255,255,0.5); margin: 0 auto 1.563vw; position: relative; }
.page-heading::before { content: ''; display: block; width: 1.944vw; height: 3.646vw; background: transparent url(../images/page-head-left-2.png) no-repeat top left; background-size: 100% 100%; position: absolute; transform: translateY(-50%); top: 50%; left: 0; margin-left: -1.7vw; }
.page-heading::after { content: ''; display: block; width: 1.944vw; height: 3.646vw; background: transparent url(../images/page-head-right-2.png) no-repeat top left; background-size: 100% 100%; position: absolute; transform: translateY(-50%); top: 50%; right: 0; margin-left: -0.5vw; }

.logo-first { width: 13%; margin: 0 auto 1%; }

.logo-img {width: 150%; height: auto; }
.logo-sec { width: 8%; margin: 0 auto;   display: flex;   justify-content: center;   align-items: center; }
.card { border-radius: 0.781vw; border: 0.052vw solid rgba(0,0,0,0.1); box-shadow: 0.104vw 0.104vw 0.26vw 0 rgba(0,0,0,0.05); height: calc(100% - 0.781vw); }
.card .card-header, .card .card-footer { background: transparent; border: 0; padding: 1.042vw 0.781vw; }
.card .card-body { padding: 0.26vw 0.781vw 1.563vw; display: flex; align-items: center; }
button.card-btn { width: fit-content; height: 2.344vw; background: linear-gradient(55deg, var(--celadon), var(--midgreen)); font-size: 0.938vw; font-weight: 400; color: #fff; padding: 0 1.302vw; border: 0; border-radius: 0.521vw; outline: 0; box-shadow: none; }

.wid-row { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start !important; position: relative; }
.wid-row .widget { position: relative; width: calc(100% - 7.813vw) !important; margin-left: 0; }
.wid-row .value { width: 7.813vw; font-size: 1.25vw; font-weight: 700; color: #1099f5; text-align: right; }
.wid-row .value span { font-size: 0.781vw; font-weight: 400; color: rgba(0,0,0,0.6); letter-spacing: -0.052vw; }

.widget {
    /* border-radius: 0.75rem; */
    background-color: var(--background-widget);
    /* padding: 1rem; */
    max-width: 40rem;
    width: 100%;
    min-width: 20rem;
}

.widget canvas {
    min-height: 10rem;
}

.toggle-top { width: 3.125vw; height: 3.125vw; background: #fff; border: 0.052vw solid rgba(0,0,0,0.1); border-radius: 50%; padding: 0.938vw 0.781vw; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; box-shadow: 0.104vw 0.104vw 0.521vw 0 rgba(0,0,0,0.05); position: fixed; bottom: 1.146vw; right: 1.042vw; cursor: pointer; z-index: 100; }
.toggle-top span { display: block; width: 100%; height: 0.208vw; border-radius: 0.104vw; background: var(--subcolor1); }

.pie-row { width: 100%; height: auto; padding: 0 1vw; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 1.5vw; }
.pie-row .flag { width: 20%; margin-right: 1.042vw; }
.pie-row .pie-box { width: calc((80% - 1.042vw) / 3); padding: 0 0.3vw; text-align: center; }
.pie-row .pie-box p { font-size: 0.938vw; font-weight: 600; line-height: 1.146vw; color: #333; margin-bottom: 0; }
.pie-row .pie-box h6 { font-size: 0.729vw; font-weight: 400; line-height: 0.833vw; color: #888; margin-bottom: 0; }


.pie {
    flex: 1 0 1;
    width: 100%;
    /* max-width: 325; */
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    margin-bottom: 0.4vw;
    /* border: 1 solid; */
  
    /* background-image: conic-gradient(
        from 30deg,
        var(--c1) 40%,
        var(--c2) 0 65%,
        var(--c3) 0 85%,
        var(--c4) 0
    ); */
}
.pie span { font-size: 1.25vw; font-weight: 600; line-height: 1.25vw; color: var(--rainbow6); position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.donut {
    background-image: radial-gradient(white 40%, transparent 0 70%, white 0),
    conic-gradient(
        from 0deg,
        var(--rainbow1) 13%,
        var(--rainbow3) 0
    );
}

.trend-row { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 0.521vw; flex-wrap: wrap; }
.trend-row .trend-col { width: calc((100% - 1.563vw) / 4); height: auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.781vw; font-weight: 500; color: #ff5347; }
.trend-row .trend-col .box { width: 100%; height: 4.427vw; background: var(--subcolor1); display: flex; align-items: center; justify-content: center; font-size: 1.563vw; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.781vw; }
.trend-row .trend-col:nth-child(2) { color: var(--subcolor2); }
.trend-row .trend-col:nth-child(3) { color: var(--subcolor3); }
.trend-row .trend-col:nth-child(4) { color: var(--subcolor4); }
.trend-row .trend-col:nth-child(2) .box { background: var(--subcolor2); }
.trend-row .trend-col:nth-child(3) .box { background: var(--subcolor3); }
.trend-row .trend-col:nth-child(4) .box { background: var(--subcolor4); }

.trend-row .trend-col .box.circle { width: 4.427vw; background: #fff; border: 0.052vw solid rgba(0,0,0,0.2); border-radius: 50%; color: #242527; overflow: hidden; transform: rotate(15deg); position: relative; z-index: 1; }
.trend-row .trend-col .box.circle::after { content: ''; width: calc(100% - 1.563vw); height: calc(100% - 1.563vw); background: #fff; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.trend-row .trend-col .box.circle .quarter { content: ''; display: block; width: 50%; height: 50%; background: var(--subcolor1);  position: absolute; left: -0.521vw; top: -0.521vw; z-index: 0; }
.trend-row .trend-col .box.circle .quarter:nth-child(2) { left: auto; right: -0.521vw; }
.trend-row .trend-col .box.circle .quarter:nth-child(3) { left: auto; right: -0.521vw; top: auto; bottom: -0.521vw; }
.trend-row .trend-col .box.circle .quarter:nth-child(4) { left: -0.521vw; right: auto; top: auto; bottom: -0.521vw; }
.trend-row .trend-col .box.circle span { position: relative; z-index: 2; transform: rotate(-15deg); }
.trend-row .trend-col:nth-child(2) .box.circle .quarter { background: var(--subcolor2); }
.trend-row .trend-col:nth-child(3) .box.circle .quarter { background: var(--subcolor3); }
.trend-row .trend-col:nth-child(4) .box.circle .quarter { background: var(--subcolor4); }

.tcr-block { width: 100%; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; position: relative; }
.tcr-block .tcr-col { width: calc(100% / 12); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: center; }
.tcr-block .tcr-col .head { width: 100%; height: 2.344vw; background: #008bff; display: flex; align-items: center; justify-content: center; font-size: 0.625vw; font-weight: 500; line-height: 0.781vw; color: #fff; text-align: center; }
.tcr-block .tcr-col .icon { width: 100%; height: 3.646vw; display: block; background: #242527; padding: 0.26vw 0; text-align: center; }
.tcr-block .tcr-col .icon img { width: auto; height: 3.125vw; }
.tcr-block .tcr-col:nth-child(1) .head { background: var(--rainbow1); }
.tcr-block .tcr-col:nth-child(2) .head { background: var(--rainbow2); }
.tcr-block .tcr-col:nth-child(3) .head { background: var(--rainbow3); }
.tcr-block .tcr-col:nth-child(4) .head { background: var(--rainbow4); }
.tcr-block .tcr-col:nth-child(5) .head { background: var(--rainbow5); }
.tcr-block .tcr-col:nth-child(6) .head { background: var(--rainbow6); }
.tcr-block .tcr-col:nth-child(7) .head { background: var(--rainbow7); }
.tcr-block .tcr-col:nth-child(8) .head { background: var(--rainbow8); }
.tcr-block .tcr-col:nth-child(9) .head { background: var(--rainbow9); }
.tcr-block .tcr-col:nth-child(10) .head { background: var(--rainbow10); }
.tcr-block .tcr-col:nth-child(11) .head { background: var(--rainbow11); }
.tcr-block .tcr-col:nth-child(12) .head { background: var(--rainbow12); }
.tcr-block .tcr-col .value { width: 100%; font-size: 1.25vw; font-weight: 700; line-height: 1.354vw; margin: 0.26vw 0; text-align: center; color: #242527; }

.alert-row { width: fit-content; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; margin: 0 auto; gap: 2.083vw; }
.alert-row .alert-col { width: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.alert-row .alert-col .icon { width: 4.167vw; }
.alert-row .alert-col .name { font-size: 0.521vw; line-height: 0.625vw; font-weight: 400; text-transform: uppercase; color: var(--subcolor1); text-align: center; margin: 0.104vw auto 0; }
.alert-row .alert-col .value { font-size: 1.146vw; font-weight: 700; line-height: 1.354vw; color: #333; text-align: center; }
.alert-row .alert-col .value span { font-size: 0.521vw; font-weight: 400; }
.alert-row .alert-col .wave { width: 4.167vw; }

.pipelines { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.521vw; }
.pipelines .pipeline { width: calc((132% - 2.083vw) / 5); position: relative; margin: 0 -4%; }
.pipelines .pipeline:first-child { margin-left: 0; }
.pipelines .pipeline .pipe-cut { width: 100%; position: relative; }
.pipelines .pipeline .pipe-cut .bg { width: 100%; display: block; position: relative; left: 0; top: 0; }
.pipelines .pipeline .pipe-cut .bg::after { content: ''; display: block; width: 100%; padding-bottom: 100%; position: relative; left: 0; top: 0; }
.pipelines .pipeline .pipe-cut .bg img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 0; }
.pipelines .pipeline .pipe-cut span { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 20% 0 40%; text-align: center; font-size: 0.7vw; line-height: 0.85vw; font-weight: 600; color: #333; position: absolute; left: 0; top: 0; }
.pipelines .pipeline .pipe-text { display: block; position: relative; width: 65.5%; background: var(--rainbow1); font-size: 1.042vw; font-weight: 700; color: #fff; text-align: center; padding: 0.26vw 0; margin-top: 0.26vw; }
.pipelines .pipeline:nth-child(2) .pipe-text { background: var(--rainbow2); }
.pipelines .pipeline:nth-child(3) .pipe-text { background: var(--rainbow3); }
.pipelines .pipeline:nth-child(4) .pipe-text { background: var(--rainbow4); }
.pipelines .pipeline:nth-child(5) .pipe-text { background: var(--rainbow5); }

.dubai-row { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; gap: 0.781vw; }
.dubai-row .dubai-left { width: calc(100% - 6.771vw); display: block; position: relative; }
.dubai-row .dubai-right { width: 10.781vw; text-align: center; }
.dubai-row .dubai-right .right-circle { width: 4.167vw; height: 4.167vw; background: var(--subcolor4); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.563vw; font-weight: 700; color: #fff; }
.dubai-row .dubai-right .right-circle span { font-size: 0.729vw; font-weight: 400; }
.dubai-row .dubai-left .dubai-ruler { width: 100%; }
.dubai-row .txt { width: calc(100% - 6.771vw); font-size: 0.625vw; font-weight: 400; color: #333; text-align: center; }
.dubai-row .txt.right { width: 10.781vw; }
.dubai-row .dubai-ruler { width: 100%; display: block; position: relative; }
.dubai-row .dubai-ruler .ruler-points { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.dubai-row .dubai-ruler .ruler-points .point { display: block; font-size: 0.625vw; font-weight: 400; color: #333; width: 0.052vw; text-align: center; padding-top: 4.167vw; position: relative; }
.dubai-row .dubai-ruler .ruler-points .point::after { content: ''; width: 0.052vw; height: 4.167vw; background: #333; position: absolute; top: 0; left: 0; }
.dubai-row .dubai-ruler .ruler-bg { display: block; width: 100%; height: 3.854vw; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0.156vw; }
.dubai-row .dubai-ruler .ruler-colors { width: 100%; height: 3.333vw; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; position: absolute; left: 0; top: 0.417vw; }
.dubai-row .dubai-ruler .ruler-colors .color { display: block; width: 40%; background: var(--subcolor1); }
.dubai-row .dubai-ruler .ruler-colors .color:nth-child(2) { background: var(--subcolor3); }
.dubai-row .dubai-ruler .ruler-colors .color:nth-child(3) { background: var(--subcolor4); width: 20%; }

.rating-box { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.781vw; }
.rating-box .blocks { width: calc(100% - 4.427vw);}
.rating-box .rating { width: 3.646vw; display: block; text-align: left; }
.rating-box .rating p { font-size: 0.781vw; line-height: 1.302vw; font-weight: 600; color: #333; margin-bottom: 0; }
.rating-box .blocks .block-row { width: 100%; height: 3.646vw; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; }
.rating-box .blocks .block-row .block-50, .rating-box .blocks .block-row .block-33 { width: 50%; display: flex; align-items: center; justify-content: center; background: var(--rainbow2); }
.rating-box .blocks .block-row .block-33 { width: calc(100% / 3); }
.rating-box .blocks .block-row .block-50:nth-child(2) { background: var(--rainbow5); }
.rating-box .blocks .block-row .block-33:nth-child(1) { background: var(--rainbow8); }
.rating-box .blocks .block-row .block-33:nth-child(2) { background: var(--rainbow9); }
.rating-box .blocks .block-row .block-33:nth-child(3) { background: var(--rainbow10); }
.rating-box .blocks .block-row .data { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.rating-box .blocks .block-row .data .left { width: 1.354vw; height: 1.563vw; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center; font-size: 0.781vw; font-weight: 600; color: rgba(0,0,0,0.5); margin-right: 0.521vw; }
.rating-box .blocks .block-row .data .right { width: fit-content; display: block; text-align: center; color: #fff; }
.rating-box .blocks .block-row .data .right p { font-size: 1.146vw; line-height: 1.146vw; font-weight: 700; margin-bottom: 0; }
.rating-box .blocks .block-row .data .right h6 { font-size: 0.521vw; line-height: 0.521vw; font-weight: 400; margin-bottom: 0; }

.vision-row { width: 100%; display: flex; flex-direction: row;
     align-items: center; justify-content: flex-start; text-align: center;}
.vision-row img { width: 4.646vw; margin-right: 0.521vw; }
.vision-row h5 { width: calc(100% - 4.167vw); }
.vision-text p {
    font-size: 2.0rem;
    margin: 0;
    text-align: center;
}
.vision-text p:first-child {
    font-weight: bold;
    direction: rtl;
}



.attack-row { width: fit-content; height: 17.708vw; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background: #fff; padding: 3.125vw 3.646vw 21.354vw 2.083vw; border: 0.052vw solid rgba(0,0,0,0.1); border-radius: 0.781vw; box-shadow: 0.104vw 0.104vw 0.26vw 0 rgba(0,0,0,0.05); margin: 2.604vw auto; position: relative; transform-origin: center 0; transform: scale(1.2); }
.attack-row .attack-box { width: 13.542vw; height: 11.146vw; position: relative; margin: 0 -2.344vw; }
.attack-row .attack-box .small { display: block; width: 4.427vw; height: 3.906vw; background: #000; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; }
.attack-row .attack-box .small img { height: 2.083vw; }
.attack-row .attack-box .large { display: block; width: 11.198vw; height: 9.896vw; background: #a1a1a1; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; padding: 1.563vw 1.563vw; font-size: 0.938vw; line-height: 1.146vw; font-weight: 500; color: #333; text-align: center; position: absolute; bottom: 0; right: 0; }
.attack-row .attack-box .large::after { content: ''; width: 10.677vw; height: 9.375vw; background: #fff; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); position: absolute; top: 0.26vw; left: 0.26vw; z-index: -1; }
.attack-row .attack-box .foot { width: 8.594vw; height: 2.656vw; background: url(../images/attack-foot.png) no-repeat center center; background-size: cover; position: absolute; bottom: -3.125vw; right: 1.25vw; }
.attack-row .attack-box:nth-child(1) { margin-left: 0; }
.attack-row .attack-box:nth-child(2), .attack-row .attack-box:nth-child(4), .attack-row .attack-box:nth-child(6) { margin: 7.292vw -1.823vw 0; }
.attack-row .attack-box:nth-child(2) .small, .attack-row .attack-box:nth-child(4) .small, .attack-row .attack-box:nth-child(6) .small { top: auto; bottom: 0; }
.attack-row .attack-box:nth-child(2) .large, .attack-row .attack-box:nth-child(4) .large, .attack-row .attack-box:nth-child(6) .large { top: 0; bottom: auto; }
.attack-row .attack-box:nth-child(2) .foot, .attack-row .attack-box:nth-child(4) .foot, .attack-row .attack-box:nth-child(6) .foot { rotate: 180deg; bottom: auto; top: -3.125vw; right: 1.38vw; }

.attack-row .attack-box:nth-child(1) .small, .attack-row .attack-box:nth-child(1) .large { background: var(--rainbow1); }
.attack-row .attack-box:nth-child(2) .small, .attack-row .attack-box:nth-child(2) .large { background: var(--rainbow2); }
.attack-row .attack-box:nth-child(3) .small, .attack-row .attack-box:nth-child(3) .large { background: var(--rainbow5); }
.attack-row .attack-box:nth-child(4) .small, .attack-row .attack-box:nth-child(4) .large { background: var(--rainbow6); }
.attack-row .attack-box:nth-child(5) .small, .attack-row .attack-box:nth-child(5) .large { background: var(--rainbow9); }
.attack-row .attack-box:nth-child(6) .small, .attack-row .attack-box:nth-child(6) .large { background: var(--rainbow10); }

canvas#horizontalBarChartCanvas {
    max-width: 80%;
    margin: 2.083vw auto;
}

.at-circle { width: 100%; border: 0.052vw solid #7c39db; border-radius: 50%; padding: 15%; text-align: center; color: #fff; position: relative; z-index: 2; }
.at-circle::before { content: ''; display: block; padding-bottom: 100%; position: relative; top: 0; left: 0; }
.at-circle::after { content: ''; display: block; width: 90%; height: 90%; background: linear-gradient(to bottom, #e18bf8, #7c39db); border-radius: 50%; position: absolute; top: 5%; left: 5%; z-index: -1; }

.at-circle .d-block { width: 60%; height: fit-content; text-align: center; color: #fff; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.at-circle h1 { font-size: 5vw; font-weight: 600; line-height: 5.1vw; margin-bottom: 0.781vw; }
.at-circle p { font-size: 1.6vw; font-weight: 500; line-height: 1.8vw; margin-bottom: 0; }

.at-circle.right { border-color: #ff9338; }
.at-circle.right::after { background: linear-gradient(to bottom, #fdd762, #ff9338);}

.card.how { position: relative; margin: 6.25vw 0 0; height: 10.417vw; z-index: 0; }
.card.how::before { content: ''; width: 7.813vw; height: 3.906vw; display: block; background: rgba(255, 83, 71, 0.4); border-radius: 3.906vw 3.906vw 0 0; position: absolute; transform: translateX(-50%); top: -3.906vw; left: 50%; z-index: -1; }
.card.how .icon-top { width: 6.042vw; height: 6.042vw; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.104vw 0.26vw 0 rgba(0,0,0,0.2); position: absolute; transform: translate(-50%, -50%); left: 50%; top: 0; }
.card.how .icon-top::before { content: ''; width: 5.208vw; height: 5.208vw; background: linear-gradient(to bottom, var(--subcolor1), #ad2c22); border-radius: 50%; position: absolute; top: 0.417vw; left: 0.417vw; z-index: -1; }
.card.how .icon-top img { width: 3.125vw; }
.card.how .card-body { text-align: center; justify-content: center; padding: 1.042vw 0 0; }
.card.how .card-body h5 { font-size: 1.25vw;
     font-weight: 700; 
     /* text-transform: uppercase; */
      color: #777; }

.card.how .card-body .arabic-text {
    font-size: 2.0vw; /* Increased font size for Arabic text */
    direction: rtl; /* Ensure proper right-to-left text direction */
    margin-left: 1vw; 
    margin-right: 1vw;
    /* margin-bottom: 2vw; */
  }
  
.card.how .card-body .english-text {
    font-size: 1.65vw; /* Same size as the original for English text */
    margin-left: 1vw; 
    margin-right: 1vw;
    /* margin-top: 2vw; */
  }


  .card.how .card-body .why1 {
    font-size: 1.285vw; line-height: 1.398vw; font-weight: 400; margin-bottom: 0.521vw;
}

.card.how .card-body p {
    font-size: 0.885vw; line-height: 1.198vw; font-weight: 400; margin-bottom: 0.521vw;
}
.card.how .card-body ul.new-list { padding-left: 1.042vw; list-style: none; text-align: left; }
.card.how .card-body ul.new-list li { font-size: 0.885vw; line-height: 1.094vw; font-weight: 400; color: #333; margin-bottom: 0.521vw; position: relative; }
.card.how .card-body ul.new-list li::before { content: ''; width: 0.4vw; height: 0.4vw; border-radius: 50%; background: #777; position: absolute; left: -1.042vw; top: 0.365vw; }
.card.how .card-body ul.new-list li:last-child { margin-bottom: 0; }

.card.how.new { height: calc(100% - 6.25vw); }
.card.how.new .card-body { display: block; padding: 4.167vw 2.344vw 2.344vw; }
table.table.table-bordered { border-color: #777; margin-bottom: 1.042vw; }
table.table.table-bordered td { font-size: 1.042vw; line-height: 1.25vw; font-weight: 500; text-align: center; }

.card.how .clamp { width: 35%; height: 1.563vw; background: linear-gradient(to bottom, var(--subcolor1), #ad2c22); border-radius: 0.521vw 0.521vw 0.156vw 0.156vw; position: absolute; transform: translateX(-50%); left: 50%; bottom: -0.313vw; }

.card.how.two .icon-top::before, .card.how.two .clamp { background: linear-gradient(to bottom, var(--subcolor2), #eb4b0c);}
.card.how.two::before { background: rgba(255, 157, 79, 0.4); }

.card.how.three .icon-top::before, .card.how.three .clamp { background: linear-gradient(to bottom, #140fa3, #140fa3);}
.card.how.three::before { background: #140fa3; }

.card.how.four .icon-top::before, .card.how.four .clamp { background: linear-gradient(to bottom, var(--rainbow1), #005da8);}
.card.how.four::before { background: rgba(0, 139, 255, 0.4); }

.card.how.five .icon-top::before, .card.how.five .clamp { background: linear-gradient(to bottom, var(--rainbow12), #7a01b3);}
.card.how.five::before { background: rgba(181, 41, 247, 0.4); }

.service-circle { width: 26.042vw; height: 26.042vw; position: relative; transform: rotate(28deg); margin: 0 auto; }
.service-circle-outer { width: 26.042vw; height: 26.042vw; background: var(--subcolor1); border-radius: 50%; color: #fff; position: absolute; left: 0; top: 0; }
svg#outer {
    fill: currentColor;
    height: auto;
  /*   max-width: 66vmin; */
    transform-origin: center;
    width: 26.042vw;
    /* transform: translate(-50%, -50%); */
    transform: scale(1.18);
}
.service-circle-inner { width: 21.875vw; height: 21.875vw; background: var(--rainbow1); border-radius: 50%; color: #fff; position: absolute; rotate: 9deg; top: 2.083vw; left: 2.083vw; }
svg#inner {
    fill: currentColor;
    height: auto;
  /*   max-width: 66vmin; */
    transform-origin: center;
    width: 21.875vw;
    /* transform: translate(-50%, -50%); */
    transform: scale(1.15);
}
.service-circle-center { width: 17.708vw; height: 17.708vw; background: #fff; border-radius: 50%; color: #000; padding: 2.344vw 1.563vw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; position: absolute; top: 4.167vw; left: 4.167vw; overflow: hidden; rotate: -28deg; }
.service-circle-center h4 { font-size: 1.042vw; font-weight: 600; line-height: 1.354vw; margin-bottom: 0; color: var(--subcolor1); }
.service-circle-center hr { border: 0; margin: 0; width: 130%; height: 0.052vw; background: rgb(0, 139, 255, 0.3); }

.card.offer { position: relative; min-height: 9.115vw; margin: 0 0 0.781vw 3.906vw; z-index: 0; }
.card.offer::before { content: ''; width: 3.906vw; height: 7.813vw; display: block; background: #fe4e00; border-radius: 3.906vw 0 0 3.906vw; position: absolute; transform: translateY(-50%); top: 50%; left: -3.906vw; z-index: -1; }
.card.offer .icon { width: 6.042vw; height: 6.042vw; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.104vw 0.26vw 0 rgba(0,0,0,0.2); position: absolute; transform: translate(-50%, -50%); left: 0; top: 50%; }
.card.offer .icon::before { content: ''; width: 5.208vw; height: 5.208vw; background: linear-gradient(to right, #fe4e00, #fe4e00); border-radius: 50%; position: absolute; top: 0.417vw; left: 0.417vw; z-index: -1; }



.card.offer .icon img { width: 3.125vw; }



.card.offer .card-body { text-align: left; justify-content: flex-start; padding: 0.781vw 1.042vw 0.781vw 4.167vw; }
.card.offer .card-body p { font-size: 0.938vw; line-height: 1.25vw; font-weight: 500; color: #333; margin-bottom: 0; }
.card.offer .card-body ul { padding-left: 1.042vw; list-style: none; }
.card.offer .card-body ul li { font-size: 0.938vw; line-height: 1.25vw; font-weight: 500; color: #333; margin-bottom: 0.521vw; position: relative; }


.card.offer .card-body ul li::before { content: ''; width: 0.521vw; height: 0.521vw; border-radius: 50%; background: #fe4e00; position: absolute; left: -1.042vw; top: 0.365vw; }


.card.offer .card-body ul li:last-child { margin-bottom: 0; }


.card.offer .card-body h2 { width: 100%; font-size: 2.6vw; text-align: center; line-height: 4.69vw; font-weight: 700; color: var(--rainbow1);  border-bottom: 0.052vw solid #bbb; margin-bottom: 1.042vw; }




.card.offer.two .icon::before { background: linear-gradient(to right, 
    var(--rainbow1), var(--rainbow1));}
.card.offer.two::before { background: var(--rainbow1) }
.card.offer.two .card-body ul li::before { background: var(--rainbow1); }
.card.offer.two h2 { color: var(--rainbow1); }





.card.offer.three .icon::before { background: linear-gradient(to right, #5dc8e0, #5dc8e0);}
.card.offer.three::before { background: #5dc8e0; }
.card.offer.three .card-body ul li::before { background: #5dc8e0; }
.card.offer.three h2 { color: #5dc8e0; }

.card.offer.four .icon::before { background: linear-gradient(to right, var(--rainbow5), #086801);}
.card.offer.four::before { background: rgb(13, 163, 3, 0.4); }
.card.offer.four .card-body ul li::before { background: var(--rainbow5); }
.card.offer.four h2 { color: var(--rainbow5); }

.card.offer.five .icon::before { background: linear-gradient(to right, var(--rainbow8), #cf6400);}
.card.offer.five::before { background: rgb(255, 175, 17, 0.4); }
.card.offer.five .card-body ul li::before { background: var(--rainbow8); }
.card.offer.five h2 { color: var(--rainbow8); }

.card.offer.six .icon::before { background: linear-gradient(to right, var(--rainbow10), #a52600);}
.card.offer.six::before { background: rgb(236, 101, 0, 0.4); }
.card.offer.six .card-body ul li::before { background: var(--rainbow10); }
.card.offer.six h2 { color: var(--rainbow10); }

.wall { display: block; width: 34.994vw; height: 22.521vw; margin: 7.813vw auto 0; transform: scale(1.4); position: relative; margin-top: -1%; }
.wall::before { content: ''; width: 100%; height: 100%; background: transparent url(../images/how-bg.svg) no-repeat center center; background-size: 100% 100%; position: absolute; }
.bricks-row-group { width: fit-content; height: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 0.052vw; transform: translateX(-50%); left: 50%; }
.bricks-row { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.bricks-row.top { width: 15.625vw; justify-content: space-between; }
.bricks-row .brick { width: 5.313vw; height: 2.448vw; padding: 0 0.521vw; background: linear-gradient(135deg, #fd756b, var(--rainbow11)); border: 0.104vw solid #000; display: flex; align-items: center; justify-content: center; font-size: 0.521vw; font-weight: 500; color: #fff; line-height: 0.625vw; text-align: center; margin: -0.052vw; }
.wall .top-txt { width: 33.75vw; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: absolute; left: 0.625vw; top: 3.802vw; }
.wall .top-txt .txt { width: 6.406vw; height: 2.24vw; background: var(--rainbow2); font-size: 0.833vw; font-weight: 600; line-height: 2.188vw; text-align: center; color: #fff; text-transform: uppercase; }



.wall .guard { width: 3.125vw; position: absolute; transform: translateX(-50%); left: 50%; top: 6.771vw; }

.logo-bottom { display: block; width: 10.417vw; height: auto; position: fixed; left: 1.042vw; bottom: 1.302vw; z-index: 100; }
.logo-righttop { display: block; width: 7.813vw; height: auto; position: fixed; right: 1.042vw; top: 0.781vw; z-index: 100; }
.left-arrow { display: block; width: 2.604vw; rotate: 180deg; cursor: pointer; position: fixed; right: 7.902vw; bottom: 1.302vw; z-index: 100; }
.right-arrow { display: block; width: 2.604vw; cursor: pointer; position: fixed; right: 3.125vw; bottom: 1.302vw; z-index: 100; }
.right-arrow.disabled { cursor: default; }
.right-arrow.disabled img { filter: grayscale(1) brightness(5); }

.risk-left .risk-big { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding-bottom: 1.042vw; border-bottom: 0.052vw dashed #d6d6d6; margin-bottom: 1.042vw; }
.risk-left h1 { font-size: 3.125vw; line-height: 3.333vw; font-weight: 700; color: var(--aeorange); margin-bottom: 0; margin-right: 0.781vw; }
.risk-left p { font-size: 0.938vw; line-height: 1.146vw; font-weight: 400; color: #888888; margin-bottom: 0; }
.risk-left h6 { font-size: 0.833vw; line-height: 1.042vw; font-weight: 400; color: #888; margin-bottom: 0; }
.risk-left ul.risk-list { list-style-type: none; padding-left: 1.042vw; }
.risk-left ul.risk-list li { margin-bottom: 0.26vw; position: relative; }
.risk-left ul.risk-list li::before { content: ''; width: 0.625vw; height: 0.625vw; background: var(--celadon); border-radius: 50%; position: absolute; left: -1.042vw; top: 0.156vw; }
.risk-left ul.risk-list li:nth-child(2):before { background: var(--aeorange); }
.risk-left ul.risk-list li:nth-child(3):before { background: var(--midgreen); }
.risk-left .mid { color: var(--aeorange); }
.risk-left .low { color: var(--celadon); }

.card-border { width: 100%; height: auto; border: 0.052vw solid #f0f0f0; border-radius: 0.521vw; padding: 2.083vw 1.042vw; }
.level-row, .risk-point { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.563vw; margin: 1.042vw 0 0.26vw; }
.level-row p {color: #777; margin-bottom: 0; }
.risk-point { gap: 0.26vw; margin: 0; }
.risk-point span { display: block; width: 0.625vw; height: 0.625vw; border-radius: 50%; }
.progress-row { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 0.781vw; }
.progress-row .bar { display: block; width: auto; height: 1.563vw; margin-right: 0.104vw; }
.risk-point span.low, .progress-row .bar.low { background: var(--celadon); }
.risk-point span.mid, .progress-row .bar.mid { background: var(--midgreen); }
.risk-point span.high, .progress-row .bar.high { background: var(--aeorange); }

.nav-tabs { border-bottom: 0.052vw solid #f0f0f0; margin: 0 0 1.563vw; padding: 0; }
.nav-tabs .nav-link { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0.521vw 0.781vw; background: transparent; border-top: 0; border-right: 0; border-left: 0; border-bottom: 0.104vw solid transparent; }
.nav-tabs .nav-link.active { border-bottom: 0.104vw solid var(--aeorange); }
.nav-tabs .nav-link img { height: 1.875vw; margin-right: 0.521vw; filter: grayscale(1); opacity: 0.4; }
.nav-tabs .nav-link.active img { filter: grayscale(0); opacity: 1; }
.nav-tabs .nav-link h4 { font-size: 0.833vw; font-weight: 600; line-height: 1.042vw; margin-bottom: 0.156vw; color: #777; }
.nav-tabs .nav-link.active h4 { color: #111; }
.nav-tabs .nav-link p { font-size: 0.677vw; line-height: 0.885vw; font-weight: 400; color: #999; margin-bottom: 0; }
.nav-tabs .nav-link.active p { color: #333; }
.nav-tabs .nav-link p span.mid, .nav-tabs .nav-link p span.low { font-weight: 600; color: #999; }
.nav-tabs .nav-link.active p span.mid { color: var(--midgreen); }
.nav-tabs .nav-link.active p span.low { color: var(--celadon); }

.process-area { width: 80%; display: flex; flex-direction: row; align-items: stretch; justify-content: start; position: relative; margin: 5vh auto 0; }
.process-area .wings { width: 30%; display: flex; flex-direction: column; justify-content: space-between; }
.process-area .center-setup { width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.gear { width: 90%; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; position: relative; }
.gear::after { content: ''; width: 15%; height: 15%; background: #fff; display: block; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.gear .gear-part { display: block; width: 50%; height: auto; position: relative; }
.gear .gear-part img { width: 100%; height: auto; position: relative; left: 0; top: 0; }
.gear .gear-part .part-center { width: 50%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; }
.gear .gear-part .part-center img { width: 70%; }
.gear .gear-part .part-center h3 { font-size: 2.5vh; font-weight: 600; color: #fff; margin-top: 0.5vh; margin-bottom: 0; position: relative; }

.gear .gear-part:nth-child(1) .part-center { left: auto; right: 10%; top: auto; bottom: 10%; }
.gear .gear-part:nth-child(2) .part-center { left: 10%; right: auto; top: auto; bottom: 10%; }
.gear .gear-part:nth-child(3) .part-center { left: auto; right: 10%; top: 10%; bottom: auto; }
.gear .gear-part:nth-child(4) .part-center { left: 10%; right: auto; top: 10%; bottom: auto; }

.wings .tip { width: 100%; height: auto; background: #fff; border: 0.3vh solid var(--rainbow1); border-radius: 1.8vh; padding: 1.5vh; text-align: right; }
.wings .tip h4 { font-size: 2.5vh; font-weight: 600; color: var(--rainbow1); margin-bottom: 0.5vh; position: relative; }
.wings .tip p { font-size: 2vh; line-height: 2.5vh; font-weight: 400; color: #777; margin-bottom: 0; }
.wings .tip.righttop { border-color: var(--rainbow6); text-align: left; }
.wings .tip.righttop h4 { color: var(--rainbow6); }
.wings .tip.leftbot { border-color: var(--rainbow12); }
.wings .tip.leftbot h4 { color: var(--rainbow12); }
.wings .tip.rightbot { border-color: var(--rainbow9); text-align: left; }
.wings .tip.rightbot h4 { color: var(--rainbow9); }

.recycle { width: 80%; display: block; position: relative; margin: 5vh auto 0; }
.recycle .brackets { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; position: relative; }
.recycle .brackets .brack { width: 50%; height: auto; position: relative; z-index: 5; }
.recycle .brackets .brack .main { width: 100%; height: auto; position: relative; z-index: -1; }
.recycle .brackets .brack .brack-text { width: 11.458vw; height: 2.604vw; background: #fff; border-radius: 0.417vw; font-size: 1.25vw; font-weight: 600; line-height: 2.604vw; color: var(--rainbow1); text-align: center; position: absolute; transform: translateX(-50%); left: 50%; top: 7%; }
.recycle .brackets .brack:nth-child(2) .brack-text { color: #002160; }
.recycle .brackets .brack:nth-child(3) .brack-text { color: #9ae5c6; top: 78%; }
.recycle .brackets .brack:nth-child(4) .brack-text { color: #004e89; top: 78%; }
.recycle .brackets .brack .arrow, .brackets .brack:nth-child(4) .arrow { width: 9%; height: auto; position: absolute; right: -7.5%; left: auto; top: -6%; bottom: 0; z-index: 10; }
.brackets .brack:nth-child(4) .arrow { top: auto; bottom: -6%; left: -7.5%; right: auto; }
.brackets .brack:nth-child(2) .arrow, .brackets .brack:nth-child(3) .arrow { width: auto; width: 18%; left: auto; right: -2.7%; top: auto; bottom: -16%; }
.arrow, .brackets .brack:nth-child(3) .arrow { left: -2.7%; right: auto; top: -16%; bottom: auto; }
.recycle .brackets .brack .main img, .recycle .brackets .brack .arrow img { width: 100%; height: auto; }
/* .brackets .brack:nth-child(2) .arrow img { height: 100%; width: auto; } */
.recycle .brackets .brack:nth-child(2) { z-index: 4; }
.recycle .brackets .brack:nth-child(4) { z-index: 3; }
.recycle .brackets .brack:nth-child(3) { z-index: 2; }
.recycle .brackets .brack:nth-child(3) .arrow { z-index: 200; }

.recycle .tfs-hr { width: 6.25vw; position: absolute; top: -5.729vw; right: 13.542vw; }

.recycle .arrows-only { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1000; }
.recycle .arrows-only .arrow { width: 4.5%; height: auto; position: absolute; transform: translate(-50%, -50%); }
.recycle .arrows-only .arrow:nth-child(1) { left: 49%; top: -3.3%; }
.recycle .arrows-only .arrow:nth-child(4) { left: 46%; top: 82.5%; }
.recycle .arrows-only .arrow:nth-child(2) { left: 92.4%; top: 48%; }
.recycle .arrows-only .arrow:nth-child(3) { left: -1.35%; top: 42%; }
.recycle .arrows-only .arrow:nth-child(2), .recycle .arrows-only .arrow:nth-child(3) { width: 9%; }

.new-how { width: 70%; height: auto; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.new-how .icon-group .icon { width: 25%; }
.recycle-inner { width: 100%; height: 100%; padding: 8%; position: absolute; left: 0; top: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.recycle-inner .inner-left { width: 25%; }
.icon-group { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.icon-group .icon { width: 50%; display: block; text-align: center; }
.icon-group .icon img { width: 60%; margin: 0 auto 2%; }
.icon-group .icon.three { width: calc(100% / 3); }
.icon-group .icon.three img { width: 85%; }
.icon-group .icon p { font-size: 1.2vw; font-weight: 600; line-height: 1.5vw; margin-bottom: 0; }
.recycle-inner .inner-left .icon-group .icon p { display: none; }
.recycle-inner .inner-arrow { width: 5%; }
.recycle-inner .inner-arrow img { width: 80%; }
.recycle-inner .inner-right { width: 70%; height: 100%; position: relative; }
.recycle-inner .inner-right .data-group { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; }
.recycle-inner .inner-right .data-group .data { width: 25%; height: 40%; padding: 1%; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.3vw; font-weight: 500; color: #111; border-right: 0.104vw solid var(--midgreen); position: relative; }

.showblock1 { animation: show1 8s ease-in-out both; }
.showblock2 { animation: show2 8s ease-in-out both; }
@keyframes show1 {
    0% { scale: 1; opacity: 1; left: 50%; top: 50%; }
    65% { scale: 1; opacity: 1; left: 50%; top: 50%; }
    70% { scale: 0.4; opacity: 0; left: 10%; top: 25%; }
    100% { scale: 0.4; opacity: 0; left: 10%; top: 25%; }
}
@keyframes show2 {
    0% { display: none; transform: scale(1.2); opacity: 0; }
    71% { display: none; transform: scale(1.2); opacity: 0; }
    75% { display: block; transform: scale(1); opacity: 1; }
    100% { display: block; transform: scale(1); opacity: 1; }
}

.team { width: 90%; display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; margin: 5vh auto 0; padding-top: 15vh; gap: 1vw; }
.team .member { width: calc((100% - 5vw) / 6); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin-top: 0; transform-origin: center center; position: relative; }
.team .member img { height: 18.23vw; }
.team .member.mid { margin-top: -23vh; }
.team .member.bot { margin-top: -3%; }



.team .tip {
    width: 100%;
    min-height: 18vh;
    background: rgba(255, 255, 255, 0.8);
    /* border: 0.3vh solid var(--rainbow1); */
    padding: 2vh 3vh;
    text-align: center;
    position: relative;
    margin-bottom: 1vw;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 20vh;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    font-size: 1.6vh; /* Adjust font size */
    /* line-height: 1.9vh; */
    box-shadow: 0 0 5vh rgba(0, 0, 0, 0.2), 0 0 10vh rgba(0, 0, 0, 0.19);
}

.team .tip h4 {
    font-size: 2vh;
    font-weight: 600;
    color: var(--rainbow1);
    margin-bottom: 1vh;
    position: relative;
}

.team .tip p {
    font-size: 1.5vh;
    line-height: 1.5vh;
    font-weight: 400;
    color: #777;
    margin-bottom: 0;
    padding: 0 1vh;
}

/* Maintain different border colors for each variation */
.team .member.rnbo2 .tip {
    border-color: var(--rainbow2);
}

.team .member.rnbo2 .tip h4 {
    color: var(--rainbow2);
}

.team .member.rnbo3 .tip {
    border-color: var(--rainbow10);
}

.team .member.rnbo3 .tip h4 {
    color: var(--rainbow10);
}

.team .member.rnbo4 .tip {
    border-color: var(--rainbow9);
}

.team .member.rnbo4 .tip h4 {
    color: var(--rainbow9);
}

.team .member.rnbo5 .tip {
    border-color: var(--rainbow6);
}

.team .member.rnbo5 .tip h4 {
    color: var(--rainbow6);
}

.team .member.rnbo6 .tip {
    border-color: var(--rainbow12);
}

.team .member.rnbo6 .tip h4 {
    color: var(--rainbow12);
}


/* 
.team .tip h4 { font-size: 2vh; font-weight: 600; color: var(--rainbow1); margin-bottom: 0.5vh; position: relative; }
.team .tip p { font-size: 1.5vh; line-height: 1.9vh; font-weight: 400; color: #777; margin-bottom: 0; }
.team .member.rnbo2 .tip { border-color: var(--rainbow2); }
.team .member.rnbo2 .tip h4 { color: var(--rainbow2); }
.team .member.rnbo3 .tip { border-color: var(--rainbow10); }
.team .member.rnbo3 .tip h4 { color: var(--rainbow10); }
.team .member.rnbo4 .tip { border-color: var(--rainbow9); }
.team .member.rnbo4 .tip h4 { color: var(--rainbow9); }
.team .member.rnbo5 .tip { border-color: var(--rainbow6); }
.team .member.rnbo5 .tip h4 { color: var(--rainbow6); }
.team .member.rnbo6 .tip { border-color: var(--rainbow12); }
.team .member.rnbo6 .tip h4 { color: var(--rainbow12); } */

.inc-area { width: 100%; height: 31.25vw; display: block; position: relative; z-index: 5; }
.inc-area .inc-bg { width: 100%; height: 100%; padding: 1.042vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; position: relative; left: 0; top: 0; z-index: -1; }
.inc-area .inc-bg h1 { font-size: 4.167vw; line-height: 4.479vw; font-weight: 700; color: #f5f5f5; }
.inc-area .divider { width: 100%; height: 0.26vw; background: var(--rainbow3); position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; z-index: 5; }
.inc-area .graph-area { width: 100%; height: auto; padding: 0.781vw; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.781vw; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; z-index: 6; }
.inc-area .graph-area .bars { width: calc((100% - 9.375vw) / 13); height: 5.208vw; position: relative; }
.inc-area .graph-area .bars .bar-box { width: 100%; height: 5.208vw; padding: 0.26vw; background: var(--rainbow1); border-radius: 0.521vw; display: flex; align-items: center; justify-content: center; font-size: 0.729vw; line-height: 0.99vw; font-weight: 500; color: #fff; text-align: center; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.inc-area .graph-area .bars .bar-box.active { border: 0.26vw solid var(--rainbow12); }
.inc-area .graph-area .bars .bar { width: calc(100% - 1.563vw); background: linear-gradient(to bottom, #2991b100, #2991b1 ); display: block; margin: 0 auto; }
.inc-area .graph-area .bars p { font-size: 1.042vw; line-height: 1.458vw; font-weight: 700; color: var(--rainbow2); margin-bottom: 0; }
.inc-area .graph-area .bars .top-bar { width: 100%; height: auto; position: absolute; transform-origin: bottom; text-align: center; bottom: 5.208vw; }
.inc-area .graph-area .bars .bot-bar { width: 100%; height: auto; position: absolute; transform-origin: top; text-align: center; top: 5.208vw; }
.inc-area .graph-area .bars .bot-bar .bar { background: linear-gradient(to bottom, #2991b1, #2991b100); }

.new-how-area { width: 80%; height: 36.458vw; display: block; margin: 0 auto; position: relative; }
.circle-how-area { width: 24.219vw; height: 20.729vw; display: block; position: relative; margin: 7.813vw auto 0; }
.circle-how-area { transform-origin: center; scale: 1.4; }
.circle-how { width: 8.594vw; height: 8.594vw; background: #f3f0cd; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 0.833vw; line-height: 1.042vw; font-weight: 500; color: #002160; position: absolute; transform: translate(-50%, 0); left: 50%; top: 8.594vw; z-index: 100; cursor: pointer; }
.circle-how img.icon { width: 2.813vw; margin-bottom: 0.781vw; }
.circle-how span { font-size: 1.2vw; display: block; }
.circle-how img.icon-big { width: 5.167vw; }
.circle-how.top { width: 12.24vw; height: 12.24vw; border: 1.823vw solid #ea4a0c; position: absolute; transform: translate(-50%, 0); left: 50%; top: 0; z-index: -1; }
.circle-how.left { width: 12.24vw; height: 12.24vw; border: 1.823vw solid #15406d; position: absolute; transform: translate(0, 0); left: 0; bottom: 0; z-index: -1; }
.circle-how.right { width: 12.24vw; height: 12.24vw; border: 1.823vw solid #57bfda; position: absolute; transform: translate(0, 0); right: 0; bottom: 0; z-index: -1; }

.how-side-tip { width: fit-content; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; position: absolute; cursor: pointer; }
.how-side-tip img { width: 2.188vw; margin-right: 0.781vw; }
.how-side-tip .tip-txt { width: 17.708vw; display: block; }
.how-side-tip .tip-txt h4 { font-size: 1.938vw; font-weight: 600; line-height: 1.146vw; color: #002160; margin-bottom: 0.521vw; }

.how-side-tip .tip-txt p { font-size: 1vw; line-height: 1.3vw; font-weight: 400; color: #000; margin-bottom: 0.5vw; }

.how-side-tip.left { left: -5.0vw; top: 10.417vw; }
.how-side-tip.top { right: 1.208vw; top: -5.0vw; }
.how-side-tip.right { right: 0; bottom: 5.208vw; }

.new-team-outer { width: 37.5vw; height: 35.208vw; display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 7.813vw auto 0; }


.new-team { width: fit-content; height: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1.042vw; flex-wrap: wrap; position: relative; margin: 0 -1.042vw; }



.new-team .new-team-box { width: 15.5vw; height: 14.042vw; background: #d1d6dc; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.083vw; text-align: center; position: relative; font-size: 0.938vw; line-height: 1.25vw; font-weight: 600; color: #000; text-align: center; }
.new-team .new-team-box img { width: 2.865vw; margin-bottom: 0.521vw; }
.new-team .new-team-box::before { content: ''; width: 14.458vw; height: 13vw; background: linear-gradient(135deg, #d8e5ee, #fcfdff); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); position: absolute; left: 0.521vw; top: 0.521vw; z-index: -1; }
.new-team .new-team-box.center {  color: #fff; }
.new-team .new-team-box.center img { width: 8.688vw; margin-bottom: 0; }
.new-team .new-team-box.center::before { display: none; }
.new-team .new-team-box h4 { font-size: 1.133vw; line-height: 1.342vw; font-weight: 600; margin-bottom: 0.521vw; }
.new-team .new-team-box p { font-size: 0.977vw; line-height: 0.933vw; font-weight: 400; margin-bottom: 0; }