/*Chart-1*/

.chart-container{
    width:90%;
    max-width:700px;
    background:#ffffff;
    padding:25px 30px;
    margin: 30px 30px;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.chart-title{
    text-align:center;
    font-size:20px;
    font-weight:600;
    margin-bottom:25px;
}

.chart-row{
    margin-bottom:25px;
}

.chart-label{
    font-size:14px;
    margin-bottom:8px;
    color:#333;
}

.bar-wrapper{
    width:100%;
    height:26px;
    background:#e6e6e6;
    border-radius:6px;
    overflow:hidden;
}

.bar{
    height:100%;
    background:#f05c2b;
    border-radius:6px;
}

.axis{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#666;
    margin-top:8px;
}

@media (max-width:600px){

.chart-title{
    font-size:18px;
}

.chart-label{
    font-size:13px;
}

.bar-wrapper{
    height:22px;
}

}










/*Chart-2*/

.riskChartBox{
    width:90%;
    max-width:700px;
    margin:auto;
    background:#ffffff;
    padding:25px 30px;
    border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    font-family:Arial, Helvetica, sans-serif;
}

.riskChartHeading{
    text-align:center;
    font-size:22px;
    font-weight:600;
    margin-bottom:25px;
}

.riskRow{
    margin-bottom:22px;
}

.riskLabel{
    font-size:15px;
    margin-bottom:6px;
    color:#333;
}

.riskBarArea{
    width:100%;
    height:26px;
    background:#e5e5e5;
    border-radius:6px;
    overflow:hidden;
}

.riskBarFill{
    height:100%;
    background:#f05c2b;
    border-radius:6px;
}

.riskAxis{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#666;
    margin-top:10px;
}

.riskAxisTitle{
    text-align:center;
    margin-top:6px;
    font-size:13px;
    color:#666;
}

@media(max-width:600px){

.riskChartHeading{
    font-size:18px;
}

.riskLabel{
    font-size:14px;
}

.riskBarArea{
    height:22px;
}

}











/*PIE CHART*/

.pie-container{
  position:relative;
  width:100%;
  max-width:420px;
  margin:auto;
}

/* PIE */

.pie-chart{
  position:relative;
  width:100%;
  padding-top:100%; /* keeps it square */
  border-radius:50%;
  background:conic-gradient(
    #e02020 0 42%,
    #2ca02c 42% 54%,
    #ff7f0e 54% 75%,
    #2c7fb8 75% 100%
  );
}

/* PERCENT TEXT */

.percent{
  position:absolute;
  font-weight:700;
  font-size:16px;
}

.p1{ top:35%; right:22%; }
.p2{ bottom:30%; right:44%; }
.p3{ bottom:35%; left:25%; }
.p4{ top:25%; left:25%; }

/* LABELS */

.label{
  position:absolute;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}

/* CONNECTOR LINES */

.label::after{
  content:"";
  position:absolute;
  background:#333;
}

/* LABEL POSITIONS */

.sleep{
  right:-12%;
  top:30%;
}

.sleep::after{
  width:35px;
  height:2px;
  left:-40px;
  top:50%;
}

.play{
  bottom:-10%;
  left:30%;
}

.play::after{
  width:2px;
  height:35px;
  top:-38px;
  left:50%;
}

.study{
  left:-18%;
  bottom:30%;
}

.study::after{
  width:35px;
  height:2px;
  right:-40px;
  top:50%;
}

.screen{
  left:-10%;
  top:12%;
}

.screen::after{
  width:35px;
  height:2px;
  right:-40px;
  top:50%;
}













/* LIST VIEW WITH ICONS */

.poster{
max-width:900px;
margin:auto;
padding:25px;
}

.subtitle{
text-align:center;
font-size:13px;
color:#777;
margin-bottom:30px;
}

/* Step card */

.step{
display:flex;
align-items:center;
gap:14px;
background:#f9fbff;
padding:14px 16px;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,0.05);
transition:0.3s;
height:100%;
border: 1px dashed #F05C2B;
}

.step:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* Icon */

.icon{
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:white;
flex-shrink:0;
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* Gradients */



.orange{
background:linear-gradient(135deg,#F05C2B,#AD2627);
}

.text{
font-size:15px;
}

/* Responsive */

@media(max-width:576px){

.poster{
padding:28px 20px;
}

.text{
font-size:14px;
}

.icon{
width:40px;
height:40px;
font-size:18px;
}

}