@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.header{ padding:10px 0; background:#fff; position:fixed; width:100%; top:0; z-index:9; border-bottom: 1px solid #ddd;}
.big_title{ position: relative;
    padding: 2.5em 0;
    background:url(../images/roadmap-bg.jpg) center -170px no-repeat;
    background-size: cover; overflow:hidden; border-radius:8px; margin-bottom: 30px; z-index:1;}
.big_title:before{ content:''; position:absolute; left:0; top:0; background:#002b8c; opacity: 0.85; width:100%; height:100%; display:block;}
.container{ padding:0;}
.big_title h1 {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    color: #FFF; margin:0;
}
.brand{ float:left; margin-top: 10px;}
.header .wrap{ width:100%; padding:0 20px; margin:0 auto;}
a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  position: fixed;
  font-family: "Inter";
  transform: rotate(-90deg);
  transform-origin: 0 0;
  left: 40px;
  bottom: 0px;
  font-size: 12px;
  text-decoration: none;
  background: #f7f7f7;
  padding: 4px 8px;
  z-index: 10;
  color: #3B425A;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #7B46FE;
  color: #FDFA75;
}

body {
  background: #f7f7f8;
  padding: 50px 0 0 0;
  margin: 0;
  color: #000;
  font-family:Poppins;
}

h1 {
  font-size: 42px;
  font-weight: 400;
  color: #0075ff;
  position: relative;
  font-family:Poppins;
} 

h2 {
  font-size: 25px;
  font-weight: 100;
  color: #000;
  font-weight:400;
  position: relative;
  margin-bottom: 10px;
  font-family:Poppins;
  margin-top:30px;
}

img {
  max-width: 100%;
}
h1 span {
    display: block;
    font-size: 17px;
    text-transform: uppercase;
    color: #000;
    font-weight: 500;
	position:relative;
}
/*h1 span:after{
	content: "";
    display: inline-block;
    width: 8%;
    background: #0075ff;
    height: 2px;
    position: relative;
    top: -6px;
    margin-left: 10px;
} 
*/
section {
  font-size: 15px;
  font-weight: 400;
} 
.content-top-label{
    position: relative;
    display: flex;
    gap: 40px;
	font-size:14px;
	margin-bottom:30px;
    border-bottom:1px dashed #5c637e;
    /*background-image: radial-gradient(at 88% 40%, hsl(0deg 0% 100%) 0px, transparent 85%), radial-gradient(at 49% 30%, hsl(0deg 0% 100%) 0px, transparent 85%), radial-gradient(at 14% 26%, hsl(0deg 0% 100%) 0px, transparent 85%), radial-gradient(at 0% 64%, hsl(246.98deg 100% 62.84%) 0px, transparent 85%), radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%), radial-gradient(at 100% 99%, hsl(0deg 100% 57%) 0px, transparent 85%);*/
 	width: 100%;
 	box-sizing:border-box;
	color:#000;
}
.content-top-label *, .content-top-label p{ margin:0;}
.tag-box{ display:flex; gap:10px; width:25%;}
.tag-box h5{ font-weight:600; margin:0; font-size:13px; text-transform:uppercase; color:#0075ff;}
.tag-box p{ margin:0; padding:0; line-height:normal;}
.container li{ padding-bottom:8px;}
.container ul{ margin:0; padding:0 0 0 15px;}
.tag-box .icon{ background:#dee7f9; border-radius:6px; padding:15px; width:60px; height:60px; display:flex; align-items:center; justify-content:center;     border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
.container ul ::marker {
    color: #0075ff;
}
  
.doc_menu {
    float: left;
    width: 18%;
	padding:0 30px;
	max-height: calc(100vh - 100px);
    overflow: auto;
	position:fixed;
	left:0;
	top:80px;
}
.doc_menu ul{ margin-bottom:40px;}
.nav-item{ width:100%;}
.doc_menu h3 {
    font-size: 18px;
    margin-bottom: 1.33333em;
	color: #0075ff;
    padding: 0;
}
.doc_content{ 
width: 82%;
    padding: 25px;
    margin-top: 1px;
    z-index: 2;
	float:left;
	left: 18%;
    position: relative;
    min-height: 450px;
}
.doc_content h6{ position: absolute; width: 100%; top: 100px; text-align: center; font-size: 26px;}
.card {
    box-shadow: 0 0 20px #e2e8f0;
    border: 1px solid #cdcdd8;
    border-radius: 6px;
    overflow: hidden;
}
.card .card-body {
    padding: 1.25rem; 
}
.tab-pane{ display:none;}
.tab-pane.active{ display:block;}
.nav .nav-item button{ color:#333; font-size:13px; font-weight:400; padding:7px 10px; width: 100%; text-align: left; background: no-repeat 8px 0.61429em;    padding-left: 2.28571em;}
.nav .nav-item.sub-item button{ background: url(../images/dot.svg) no-repeat -14px -4px; margin-left: 25px; background-size: 35px; padding:4px 10px 4px 15px;}
.nav .nav-item.sub-item button.active{ background:none; color: #0075FF; font-weight:600;}
.nav .nav-item:has(.active) ul button:after{ background:#000;; width:5px; height:5px; top: 11px; left: 1px;}
.nav .nav-item.sub-item button.active:after{ background:#0075FF;; width:5px; height:5px; top: 11px; left: 1px;}
.doc_menu ul ul{ list-style:none; padding:0; margin:0;}
.nav .nav-item:has(.active) button{ background-color: #0075FF; color: #fff;}
.nav .nav-item:has(.active) button:after{ content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    background: rgba(255, 255, 255) url(../images/ico_doc.svg) 4px 3px no-repeat;
	background-size: 12px;
    pointer-events: none;
    width: 20px;
    height: 22px;
    border-radius: 4px; /* Adjust opacity */
    pointer-events: none;}
.nav .nav-item:has(.active) ul button{ background:none; color: #000;}
.nav .nav-item button {
    background-image: url(../images/ico_doc.svg);
}
.nav .nav-item button.active {
  background-color: #0075FF;
  color: #fff;
} 
.nav .nav-item button.active:after{
	content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    background: rgba(255, 255, 255) url(../images/ico_doc.svg) 4px 3px no-repeat;
	background-size: 12px;
    pointer-events: none;
    width: 20px;
    height: 22px;
    border-radius: 4px; /* Adjust opacity */
    pointer-events: none;
}
.doc_menu h4{ font-size: 1rem; line-height: 1rem; font-weight: 600; padding:0 0 16px 0; width:100%; border-bottom: 1px dashed #bcbcbc; margin-bottom: 10px;} 
.doc_menu h5{ font-size:15px;}
.next-prev-slide{ position:absolute; top:20px; right:0; gap:5px; z-index:1;}
.next-prev-slide .btn{ font-size:14px; cursor:pointer; font-weight: 500;}
.next-prev-slide .btn[disabled]{ border:none; opacity: 0.3;}
 
 .tab-content{ position:relative;}
 .product-btn{ border:none; width:100%; padding:0; text-align:left; background:url(../images/arrow-down.svg) right top no-repeat; background-size:15px;}
 .product-btn[aria-expanded="true"]{ color:#0075ff; background:url(../images/arrow-up.svg) right top no-repeat; background-size:15px;}
/* For WebKit browsers (Chrome, Edge, Safari) */
.doc_menu::-webkit-scrollbar {
  width: 3px;
}

.doc_menu::-webkit-scrollbar-track {
  background: #c8c8c8;
  border-radius: 10px;
}

.doc_menu::-webkit-scrollbar-thumb {
  background: #0075ff;
  border-radius: 10px;
}

.doc_menu::-webkit-scrollbar-thumb:hover {
  background: #005bcc;
}

.tab-wrapper{
	position: absolute;
    left: 25%;
    display: flex;
    justify-content: center;
    width: 75%;
    box-sizing: border-box;
}
.tabs{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
.tab-link{ 
	list-style: none;
	padding: 10px 20px;
	color: #000;
	cursor:pointer;
	font-weight: 500;
	transition: all ease 0.5s;
	border-bottom: solid 3px rgba(255,255,255,0.0);
}
.tab-link:hover{
	color: #0075ff;
	border-color: #0075ff;
}
.tab-link.active{
	color: #0075ff;
	border-color: #0075ff;
}  
.parent-tab-content{
	visibility: hidden;
    opacity: 0;
	display:none;
    height: auto; /* Allow dynamic height */
    max-height: 0; /* Start at zero height */
    overflow: hidden; /* Hide extra content */
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
}
.parent-tab-content.active{
	 visibility: visible;
    opacity: 1;
	display:block;
    max-height: inherit; /* Large enough to accommodate content */
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s;
}
.next-prev-slide{ display:none !important;} 
.tab-pane.fade.opacity {
  opacity: 1 !important;
}
.filter-container {
  position: absolute;
  right: 0;
  z-index: 999 !important;
  display: flex;
  gap:10px;
}
.filter-container select {
  width: 220px; font-size: 13px;
}
.filter-container option {
  font-size: 14px;
}
.filter-container h1 span{ text-transform: capitalize; font-size: 13px;}
@media only screen and (max-width: 1000px) {
	.doc_menu{ width:25%;}
	.doc_content{ width: 75%; left: 25%;}
}
@media only screen and (max-width: 767px) {
	.doc_menu{ width:100%; position: static; max-height: 300px;}
	.doc_content{ width: 100%; left: 0; border-top: 1px solid #a7a7a7; margin-top:30px;}
	.next-prev-slide{ margin-bottom: 30px; position: static;}
	.big_title{ display:none;}
	.tag-box{ width:100%;}
	.content-top-label{ display: grid;gap: 10px; grid-template-columns: 1fr 1fr;}
	.tag-box .icon{ width: 50px; height: 50px; padding: 10px;}
  .filter-container {
    position: relative;
    margin-bottom: 20px;
}
.tab-wrapper {
  position: relative;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.tab-link {padding: 10px;
  font-size: 13px;}
}