/* Tabs */
.tab {
  background:#EEEEEE; width:24%;padding:5px;border-radius:16px;height:100%;
}
.health-tab{width:100%; padding:0px; margin:0px; position:relative; z-index:6;}
.health-tab button {width:100%; display:flex; gap:20px; align-items:center;    background:#fff; border-radius:100px;  border: 1px solid #4442; border-radius: 12px;   color:#000000; padding:8px 15px;  font-size:22px; color: #01147a; font-family: DMSans Bold; outline: none;  cursor: pointer;    margin-bottom:10px; position:relative; z-index:1;}
.health-tab button img{width: 35px;  height: 35px;  position: absolute;  right:12px;  top: 10px;}
.health-tab button.active img{display:none;}
.health-tab button.active {width:100%; background:#01147a; color: #ffffff;}
.health-tab button:hover{background: #01147a; color: #ffffff;}
.health-tab span{background: linear-gradient(180deg, #38a6fe 0%, #0a71dd 92.58%); border-radius:100px; width:40px; height:40px; display:flex;  align-items:center; justify-content:center; font-size:22px;}
 
.health-tab button::before {content: ""; position:absolute;  top:25px; right:15px; width:20px;    height:20px;    background:url(../images/2026/01/arrow-down.png) no-repeat; background-size:100%;    z-index:-1;}
.health-tab button.active::before {content: ""; position:absolute;  top:22px; right:15px; width:20px;    height:20px;    background:url(../images/2026/01/arrow-up.png) no-repeat; background-size:100%;    z-index:-1;}
 
#cataract-detected-section .centrebox{
    display: none;
}
 
 

/* Style the buttons inside the tab */
.tab button {
  display: block;position:relative; 
  background-color: inherit;border-radius:12px;
  color: black;
  padding:14px;
  width: 100%;font-size:16px; font-weight:bold;
  border: inherit;
  outline: none;
  text-align: left;
  cursor: pointer;
    margin-bottom: 0px;
letter-spacing: 0.01em;
  color:#8B8B8B;
}

 
.tab button img{width:24px; height:auto; position:absolute; right:20px; top:33px; display:none;}
/* Change background color of buttons on hover */
.tab button:hover {color:#222222;} 
.tab button:hover img{display:block;}
.tab button.active img{display:block;}
/* Create an active/current "tab button" class */
.tab button.active {background:#fff; color:#222222;}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 70%;
  border-left: none;
  height: 100%;
  display: none;
}
.tab1{display:none;}





@media screen and (max-width:880px) {
.tabcontent{width:100%; padding: 0px 1px;}
.tab{width:100%; display: flex; overflow-x: scroll;flex-wrap: initial;gap: 14px;justify-content: left; /* flex-wrap: wrap; */padding-bottom: 15px;padding-right: 15px;}.tab button{width:max-content;flex: 0 0 auto; margin-bottom:0px;}

.health-tab span{width:auto; height:40px; font-size:20px; padding:5px 10px; border-radius:6px;}
.health-tab button{font-size:16px; line-height:20px; text-align: left; gap: 14px; padding:10px; justify-content: left;}
 
.health-tab button::before {display:none; top:35px; right:20px; width:15px;  height:15px;}
.health-tab button.active::before {display:none;  top:35px; right:10px; width:15px;  height:15px;}
 
 

}