.portfolio-asset-grid{
  display: grid;
  gap: 20px;
  margin-top: 20px;

  /* ✅ auto adjust columns based on visible items */
  grid-template-columns: repeat(auto-fit, minmax(150px, 150px));

  /* ✅ center the whole grid */
  justify-content: center;

  /* ✅ center items in their cells */
  justify-items: center;
}


.portfolio-ring{
  --p:0;
  width:150px;
  height:150px;
  position:relative;
}
.portfolio-risk-btn.is-active {

  outline-offset: 2px;
}

.portfolio-ring-circle{
  width:100%;
  height:100%;
  border-radius:50%;
  background:conic-gradient(#58c7be calc(var(--p)*1%), #e6ebf0 0);
}

.portfolio-ring-circle::after{
  content:'';
  position:absolute;
  inset:14px;
  background:#fff;
  border-radius:50%;
}

.portfolio-ring-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.portfolio-ring-value{
  font-size:18px;
  font-weight:700;
}

.portfolio-ring-label{
  font-size:13px;
  opacity:.7;
}
h1 {
    font-size: 4.25rem
}

.assetsalloc {
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    transition: opacity .5s ease
}

.enable-graph .assetsalloc {
    opacity: 1
}

.tab-container {
  
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    transition: opacity .5s ease
}

.enable-graph .tab-container {
    opacity: 1
}

.tab-container.active-conservative .pointer .needle {
    -webkit-transform: rotate(-62deg);
    -moz-transform: rotate(-62deg);
    -ms-transform: rotate(-62deg);
    transform: rotate(-62deg)
}

.tab-container.active-aggressive .pointer .needle {
    -webkit-transform: rotate(62deg);
    -moz-transform: rotate(62deg);
    -ms-transform: rotate(62deg);
    transform: rotate(62deg)
}

.tab-container.active-moderate .pointer .needle {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.tab-container .tab-one {
    left: -7%;
    bottom: -41px;
    width: 43%;
    height: 89%;
    -webkit-border-radius: 0 150% 0 0;
    border-radius: 0 150% 0 0;
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg)
}

.tab-container .tab-two {
    -webkit-border-radius: 0 150% 0 0;
    border-radius: 0 150% 0 0;
    -webkit-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    transform: rotate(-44deg)
}

.tab-container .tab-three {
    right: -3%;
    bottom: -41px;
    width: 43%;
    height: 89%;
    -webkit-border-radius: 0 367% 0 0;
    border-radius: 0 367% 0 0;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

.tab-container .tab-container-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

.pointer {
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    position: absolute;
    left: 50%;
    bottom: -43px
}

.pointer .needle {
    position: absolute;
    left: 50%;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s
}

.pointer .needle-round {
    position: absolute;
    left: 50%;
    background: #4c4d4f;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    bottom: 18px
}

.pointer .needle-round:after {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 50%;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(8,8,8,.1);
    box-shadow: 2px 2px 5px 1px rgba(8,8,8,.1)
}

.strategy-graph {
    background: url(../images/strategy-graph.png) no-repeat 0 0;
    width: 165px;
    height: 165px
}

.strategy-graph:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -27px 0 0 -24px;
    background: #fdeba7;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.strategy-graph:after {
    content: "";
    left: 50%;
    top: 50%;
    position: absolute;
    background: url(../images/strategy-graph-icon-sprite.png) no-repeat;
    width: 54px;
    height: 48px;
    margin: -25px
}

.strategy-graph.indices:after {
    background-position: 0 -53px;
    height: 36px;
    margin-top: -18px
}

.strategy-graph.forex:after {
    background-position: 0 -93px;
    height: 42px;
    margin-top: -21px
}

.strategy-graph.commodities:after {
    background-position: 0 -137px;
    height: 56px;
    margin-top: -28px
}

.strategy-graph.bonds:after {
    background-position: 0 -195px;
    height: 44px;
    margin-top: -22px
}

.value {
    padding-left: 55px;
    width: 90px
}

.value:before {
    content: "";
    border-top: #444 9px solid;
    border-left: transparent 5px solid;
    border-right: transparent 5px solid;
    width: 0;
    height: 0;
    position: absolute;
    right: 41px
}

.icon_column .icon {
    display: block
}

.icon_column .icon img {
    max-width: 100%;
    height: auto
}

.description {
    line-height: 1.3
}

.arrow {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.arrow:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%
}

.arrow.up {
    border: #78b757 2px solid
}

.arrow.down {
    border: #ff5959 2px solid
}

.line_column {
    position: absolute;
    left: 104px;
    bottom: 10% !important;
}

.line_column.lavender {
    border-right: 2px solid #a28fce
}

.line_column.pink {
    border-right: 2px solid #d990bd
}

.line_column.blue {
    border-right: 2px solid #8cbfdf
}

.line_column.cyan {
    border-right: 2px solid #8fddd4
}

.line_column.orange {
    border-right: 2px solid #f9cd97;
    top: 5% !important;
}

.line_column.first {
    bottom: 0
}

.line_column.middle {
    top: 0;
    bottom: 0
}

.line_column.last {
    top: 0
}

.title {
    line-height: 1.2
}

.title:before {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 97px;
    content: "";
    margin: -8px 0 0
}

html[dir=rtl] .title:before {
    right: -7px;
    left: inherit
}

.title.lavender:before {
    border: 2px solid #a28fce
}

.title.pink:before {
    border: 2px solid #d990bd
}

.title.blue:before {
    border: 2px solid #8cbfdf
}

.title.cyan:before {
    border: 2px solid #8fddd4
}

.title.orange:before {
    border: 2px solid #f9cd97
}

img.img-icon.position-absolute {
    
    margin-top: -25px
}

html[dir=rtl] img.img-icon.position-absolute {
    right: 15px;
    left: inherit
}

.disclaimer {
    line-height: 1.4;
    color: #969896
}

.bg-gray-200:before {
    -webkit-box-shadow: inset 0 0 6px 3px rgba(0,0,0,.05);
    box-shadow: inset 0 0 6px 3px rgba(0,0,0,.05);
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    right: -15px;
    top: 0;
    left: -15px
}

.bg-gray-200:after {
    content: "";
    display: block;
    height: 15px;
    position: absolute;
    width: 100%;
    top: 12px;
    background: #f6f6f6
}

html[dir=ltr] .cms-main-head {
    font-size: 4.125rem
}

html[dir=rtl] .cms-main-head {
    font-size: 3rem
}

.cms-main-head:before {
    width: 120px;
    height: 7px
}

@media (min-width: 992px) {
    .tab-container {
        width:634px
    }

    .tab-container {
        background: url("https://www.century.ae/public/default/frontend/custom/images/strategy-bg-web.png") no-repeat
    }

    .tab-container.active-conservative {
        background-position: 0 -400px
    }

    .tab-container.active-aggressive {
        background-position: 0 -751px
    }

    .tab-container.active-moderate {
        background-position: 0 -36px
    }

    .tab-container .tab-container-inner {
        width: 634px;
        height: 314px
    }

    .tab-container .tab-two {
        width: 39%;
        height: 75%;
        left: 31%;
        top: -24px
    }

    .pointer {
        width: 89px;
        height: 297px;
        margin-left: -44px
    }

    .pointer .needle {
        margin: 0 0 0 -24px;
        border-right: transparent 25px solid;
        border-left: transparent 25px solid;
        border-bottom: #717275 248px solid;
        bottom: 51px
    }

    .pointer .needle-round {
        width: 66px;
        height: 66px;
        margin-left: -33px
    }

    .pointer .needle-round:after {
        width: 24px;
        height: 24px;
        margin: -12px
    }

    .icon_column .icon {
        width: 85px
    }

    .arrow {
        width: 34px;
        height: 34px
    }

    .arrow.up:after {
        border-bottom: #78b757 10px solid;
        border-left: transparent 6px solid;
        border-right: transparent 6px solid;
        margin: -6px 0 0 -6px
    }

    .arrow.down:after {
        border-top: #ff5959 10px solid;
        border-left: transparent 6px solid;
        border-right: transparent 6px solid;
        margin: -3px 0 0 -6px
    }

    .line_column.first {
        top: 50%
    }

    .line_column.last {
        height: 50%
    }

   
    img.img-icon.position-absolute {
        top: 50%
    }
}

@media (max-width: 1199.98px) {
    .strategy-graph {
        width:140px;
        background-size: 100%;
        height: 140px
    }

    .strategy-graph canvas {
        width: 140px!important;
        height: 140px!important
    }
}

@media (max-width: 991.98px) {
    .tab-container {
        width:320px
    }

    .tab-container {
        background: url(../images/strategy-bg.png) no-repeat
    }

    .tab-container.active-conservative {
        background-position: 0 -189px
    }

    .tab-container.active-conservative .pointer .needle {
        margin: 0 0 0 -6px
    }

    .tab-container.active-aggressive {
        background-position: 0 -388px
    }

    .tab-container.active-aggressive .pointer .needle {
        margin: 0 0 0 -24px
    }

    .tab-container.active-moderate {
        background-position: 0 4px
    }

    .tab-container.active-moderate .pointer .needle {
        margin: 0 0 0 -14px
    }

    .tab-container .tab-container-inner {
        width: 320px;
        height: 180px
    }

    .tab-container .tab-two {
        width: 38%;
        height: 62%;
        left: 31%;
        top: 10px
    }

    .pointer {
        width: 60px;
        margin-left: -30px;
        height: 168px
    }

    .pointer .needle {
        margin: 0 0 0 -14px;
        border-right: transparent 14px solid;
        border-left: transparent 14px solid;
        border-bottom: #717275 138px solid;
        bottom: 38px
    }

    .pointer .needle-round {
        width: 50px;
        height: 50px;
        margin-left: -25px
    }

    .pointer .needle-round:after {
        width: 18px;
        height: 18px;
        margin: -9px
    }

    .icon_column .icon {
        width: 65px
    }

    .arrow {
        width: 24px;
        height: 24px
    }

    .arrow.up:after {
        border-bottom: #78b757 8px solid;
        border-left: transparent 5px solid;
        border-right: transparent 5px solid;
        margin: -5px 0 0 -5px
    }

    .arrow.down:after {
        border-top: #ff5959 8px solid;
        border-left: transparent 5px solid;
        border-right: transparent 5px solid;
        margin: -3px 0 0 -5px
    }

    .range,.trend {
        font-size: 14px
    }

    .content-wrap {
        height: 57px;
        overflow: hidden
    }

    .content-wrap:after {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        background: #fff;
        width: 25px;
        height: 25px;
        line-height: 23px
    }

    .content-wrap.active {
        height: auto
    }

    .content-wrap.active:after {
        display: none
    }

    .readmore .less,.readmore .more {
        margin-left: 2px
    }

    .readmore:not(.active) .less {
        display: none
    }

    .readmore.active .more {
        display: none
    }

   
    
    .line_column.first {
        top: 1.75rem
    }

    .line_column.last {
        height: 1.75rem
    }

    .title:before {
        top: 10px
    }

    img.img-icon.position-absolute {
        top: 25%
    }

    .bg-gray-200:after {
        display: none
    }

    .cms-main-head:before {
        top: 96%
    }
}

@media (min-width: 768px) and (max-width:991.98px) {
    .progressbar {
        width:180px;
        margin: 0 auto
    }

    .graph-outer {
        max-width: 645px;
        margin: 0 auto
    }
}
.portfolio-dial{
  position: relative;
  width: 500px;
  margin: 40px auto 10px;
  text-align: center;
  top: 25px;
}

.dial-svg{
  width: 100%;
  height: auto;
}

.dial-segment{
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
}

.dial-cons{
  stroke: #9bbad0;
}

.dial-agg{
  stroke: #e07a5f;
}

.dial-divider{
  stroke: #ccc;
  stroke-width: 1;
}

.dial-needle{
  stroke: #111;
  stroke-width: 3;
  transform-origin: 150px 140px;
  transform: rotate(-60deg);
  transition: transform 0.35s ease;
}

/* Clickable areas */
.dial-hit{
  position: absolute;
  top: 0;
  width: 33.33%;
  height: 100%;
  cursor: pointer;
}

.dial-left{ left: 0; }
.dial-center{ left: 33.33%; }
.dial-right{ right: 0; }

/* Labels */
.dial-labels{
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.8;
}
/* Default fallback (just in case) */
.portfolio-ring {
  --fill: #cccccc;
}

/* Asset-specific colors */
.portfolio-ring[data-asset="equities"] {
  --fill: #9f8ccc;
}

.portfolio-ring[data-asset="indices"] {
  --fill: #d990bc;
}

.portfolio-ring[data-asset="forex"] {
  --fill: #8dc0e0;
}

.portfolio-ring[data-asset="commodities"] {
  --fill: #8fddd3;
}

.portfolio-ring[data-asset="bonds"] {
  --fill: #f7c78b;
}

/* Ring rendering using the fill */
.portfolio-ring-circle {
  background: conic-gradient(
    var(--fill) calc(var(--p) * 1%),
    #e6ebf0 0
  );
}

/* Optional: match percentage text color to asset */
.portfolio-ring-value {
  font-weight: 700;
}

.portfolio-ring[data-asset="equities"] .portfolio-ring-value {
  color: #9f8ccc;
}
.portfolio-ring[data-asset="indices"] .portfolio-ring-value {
  color: #d990bc;
}
.portfolio-ring[data-asset="forex"] .portfolio-ring-value {
  color: #8dc0e0;
}
.portfolio-ring[data-asset="commodities"] .portfolio-ring-value {
  color: #8fddd3;
}
.portfolio-ring[data-asset="bonds"] .portfolio-ring-value {
  color: #f7c78b;
}