:root {
    --white-100: #fff;
    --GrayScale-50: #F6F7F8;
    --GrayScale-100: #EDEEEF;
    --GrayScale-200: #E1E2E3;
    --GrayScale-300: #CFD0D1;
    --GrayScale-400: #AAABAC;
    --GrayScale-500: #898A8B;
    --GrayScale-600: #626364;
    --GrayScale-700: #4F5051;
    --GrayScale-800: #313233;
    --GrayScale-900-F: #111213;
    --Violet-500: #8B5CF6;
    --Violet-900: #6628f7;
    --Violet-400: #A78BFA;
    --Violet-50: #F5F3FF;
    --Violet-100: #EDE9FE;
    --Violet-200: #DDD6FE;
    --darkViolet: #101826;
    --Blue-50: #E7E9FF;
    --Error-600-F: #F04438;
    --Success-600-F: #12B76A;
    --menu-icon: url(../images/bulletMenu.svg);
}

body{ margin: 0; padding: 0; font-family: "Inter", sans-serif; color: #221b1c; line-height: 1.3;}
h1,h2,h3,h4,h5,h6,p{ margin: 0;}
h1{ font-size: 36px; font-weight: 400;}


.pageContent, .headerSection .containers{ display: flex; max-width: 1600px; margin: 0 auto; box-sizing: border-box;}
.headerSection{ border-bottom: 1px solid #ebe6e7; position: sticky; top: 0; background-color: #fff; z-index: 2;  padding:10px 30px;}
.headerSection .containers{ justify-content: space-between; align-items: center; }
.pageContent .rightSection{ flex: 1;}
.leftNavigation{padding:30px 20px;  max-width: 310px; margin-right: 48px;  position: sticky; top: 55px; height: fit-content;}
.rightSection{padding:30px 20px; }
.navigationSection{  height: calc(100vh - 115px); overflow: auto; padding-right: 10px;}
.headerSection .logo img{ height: 32px; width: 32px;}
.headerSection .logo a{ display: flex; gap: 10px; font-weight: 600; align-items: center; font-size: 18px; text-decoration: none; color: #221b1c;} 
.headerSection .logo { display: flex; align-items: center; gap: 15px;}

.serchSection{ max-width: 224px;width: 100%; }
.searchInput{ padding: 6px 10px; border: 1px solid var(--Violet-200); border-radius: 6px; position: relative; display: flex; justify-content: flex-start; gap: 8px; align-items: center; transition: all 0.2s linear;}
.searchInput:hover{ box-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a); background-color: var(--Violet-100); transform: translateY(-1px);}
.searchInput input{border: none; padding: 0; font-size: 14px; width: 100%; background-color: transparent;}
.searchInput:has(input:focus){ outline: 2px solid var(--Violet-200); box-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a); transform: translateY(-1px);}
.searchInput input:focus-visible{ outline: none;}
.searchInput input:focus{ width: 130px;}
.searchInput input::-webkit-search-cancel-button{ display: none;}
.searchInput img{ height: 12px; width: 12px;}
.searchInput .text{font-family: "IBM Plex Mono", monospace; font-size: 12px; gap: 2px; display: flex; align-items: center;}
.searchInput .text span{ background-color: transparent; border: 1px solid #c8b6f4; padding: 2px 5px; border-radius: 4px;}
.search_result{ position: fixed; display: flex; flex-direction: column; gap: 10px; padding: 10px; width: 100%; top: 50px;right: 30px; max-width: 500px; background-color: var(--white-100); border: 1px solid var(--Violet-500); border-radius: 8px; max-height: 500px; overflow: auto;     box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.1);}
.search_result_Text { position: relative; display: flex; flex-direction: column; gap: 10px; }
.search_result_Text .title{background-color: var(--Violet-100); padding: 10px; border-radius: 4px; display: flex; align-items: center;  gap: 15px;}
.search_result_Text .title i{ color: var(--Violet-500);}
.search_result_Text .title .text{ display: flex; flex-direction: column; gap: 5px;}
.search_result_Text .title p{font-size: 12px; color: var(--GrayScale-500); }
.search_result_Text .title h6{font-size: 16px; color: var(--GrayScale-900-F); }
.search_result_Text .subText{     margin-left: 40px; border-left: 1px solid var(--Violet-200); padding-left: 20px; color: var(--GrayScale-900-F); font-size: 16px; margin-right: 20px;}
.search_result_Text a { position: absolute;  width: 100%; height: 100%; }
.navigationSection::-webkit-scrollbar {width: 6px;}
.navigationSection::-webkit-scrollbar-track {background: var(--white-100); border-radius: 10px; }
.navigationSection::-webkit-scrollbar-thumb { background: var(--white-100); border-radius: 10px; transition: background 0.3s;}
.leftNavigation:hover .navigationSection::-webkit-scrollbar-thumb{ background-color: var(--Violet-200);}
.divineDocumentation .ck-content .table{ width: 100%; display: block; overflow: auto;}

.navigationSection ul{ list-style: none; padding: 0; margin: 0; font-size: 14px;}
.navigationSection ul a{ text-decoration: none; color: #707070; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; padding: 6px 12px; font-weight: 400 !important; }
.navigationSection ul a:hover{background-color:var(--Violet-100); color: #221b1c;}
.navigationSection ul a.active{ color: #8b5cf6; font-weight: 600;}
.navigationSection ul a i{ transition: all 0.2s linear;}
.navigationSection ul a.active i{ transform: rotate(90deg);}
.navigationSection ul.navigationMain .navigationSub {display: none;margin-left: 20px;border-left: 1px solid #c8b6f4;}
.navigationSection ul a.active + .navigationSub { display: block;}
.navigationSection ul.navigationMain .navigationSub a{ padding-left: 20px; }

.docSection{ display: flex; gap: 48px;}
.docSection .rightNavSection{ max-width: 224px; width: 100%; position: sticky; top: 85px; height: fit-content;}
.rightNavSection ul{ margin: 0; padding: 0; list-style: none; font-size: 14px;}
.rightNavSection ul li a{ text-decoration: none; color: #221b1c; padding: 6px 12px; display: flex; border-radius: 4px;}
.rightNavSection ul li a:hover{background-color: var(--Violet-100); color: #221b1c;}
.rightNavSection ul li a.active{ color:var(--Violet-100);font-weight: 600; }
.rightNavSection ul li + li{ margin-top: 10px;}


.divineDocumentation p{line-height: 1.6;}
.divineDocumentation{ max-width: 767px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
.divineDocumentation .mainTitle .title{ display: flex; align-items: center; gap: 10px; justify-content: space-between;}
.divineDocumentation .mainTitle{ display: flex; flex-direction: column; gap: 10px;}
.divineDocumentation .mainTitle p{ font-size: 18px; color: #7039a2;} 
.copyButton{ display: flex;  border-radius: 4px; border: 1px solid var(--Violet-200); position: relative;}
.copyButton button{ background-color: transparent; padding: 4px 8px; border: none; display: flex; align-items: center; gap: 10px; font-size: 14px;} 
.copyButton button + button{ border-left: 1px solid var(--Violet-200);}
.copyButton #copyDropdownBtn i{ transition: all 0.3s linear;}
.copyButton #copyDropdownBtn.show i{ transform: rotate(180deg); }
.copyButton button:hover{ background-color:var(--Violet-100) ;}
.copyButton .copydropdown{ z-index: 1; position: absolute; top: calc(100% + 10px); right: 0; background-color: var(--white-100); padding: 8px; border: 1px solid var(--Violet-200); width: 260px; border-radius: 8px; display: none; flex-direction: column; gap: 5px;}
.copyButton .copydropdown hr{ margin: 0; opacity: 1; border-top: 1px solid var(--Violet-200);}
.copyButton .copydropdown .copydropdownText{ position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 8px; border-radius: 4px;}
.copyButton .copydropdown.show{ display: flex;}
.copyButton .copydropdown .copydropdownText a{ position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; z-index: 1;}
.copyButton .copydropdown .copydropdownText:hover{ background-color: var(--Violet-100);}
.copyButton .copydropdown .copydropdownText p{ font-size: 14px; color: var(--GrayScale-900-F); line-height: 1;}
.copyButton .copydropdown .copydropdownText .text{ display: flex; flex-direction: column; gap: 5px;}
.copyButton .copydropdown .copydropdownText p.small{ font-size: 12px; color: var(--GrayScale-600);}
.copyButton .copydropdown .copydropdownText .icon{ color: var(--GrayScale-600); width: 16px;}
.copyButton .copydropdown .copydropdownText .icon svg{ height: 15px; width: 15px;}
.gettongStartSection{ display: flex; flex-direction: column; gap: 20px; margin-top: 20px;}
.gettongStartSection a{ display: inline-flex; align-items: center; color: #8b5cf6;     white-space: normal;  word-wrap: break-word;overflow-wrap: anywhere;}
.gettongStartSection a svg{ height: 10px; object-fit: cover; width: 20px;}
.gettongStartSection ul, .gettongStartSection ol{ margin: 0;    padding-left: 1.2rem;}
.gettongStartSection ul li + li, .gettongStartSection ol li + li{ margin-top: 10px;}

.postLink{ position: relative; padding: 8px 16px; background-color: var(--Violet-100); border: 1px solid var(--Violet-200); border-radius: 6px; font-family: "IBM Plex Mono", monospace; font-size: 14px;}
.postLink button, .copy-btn{opacity: 0; z-index: 1; cursor: pointer; color: var(--Violet-500); background-color: var(--Violet-100); border: 1px solid var(--Violet-400);border-radius: 6px; position: absolute; inset: 0; margin: auto; right: 16px; width: fit-content; height: fit-content; left: auto; }
.copy-btn{ inset: unset; top: 12px; right: 16px; z-index: 0;}
.postLink:hover button, .code-block:hover .copy-btn { opacity: 1;}
.token{ padding: 4px; border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 14px; background-color: var(--Violet-100); border: 1px solid var(--Violet-200);}

.nextStepBtn{ display: flex; text-decoration: none; color: #333; background-color: transparent; text-align: left; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid var(--Violet-500); border-radius: 4px; }
.nextStepBtn span{ display: flex; flex-direction: column; gap: 5px; font-size: 16px; }
.nextStepBtn span span{ font-size: 12px; color: var(--GrayScale-500);}
.nextStepBtn i{ font-size: 24px; color: var(--Violet-500);}
.f14{ font-size: 14px;}
.nextStepBtn:hover span{ color: var(--Violet-500);}
.nextStepBtn.previousBox{ text-align: right;}
.nextStepBtn.previousBox i{ transform: rotate(180deg);}


.toggleBtn{ display: none;}


.service-box {display: block;background: var(--white-100);border: 1px solid var(--Violet-400);padding: 12px 20px;border-radius: 8px;text-decoration: none;transition: 0.3s;}
.service-box:hover {background: var(--Violet-100);}
.box-content {display: flex;justify-content: space-between;align-items: center;font-size: 16px;color: #333;}
.arrow {font-size: 18px;color: var(--GrayScale-600);font-weight: bold;} 

.divineDocumentation .ck-content{ display: flex; flex-direction: column; gap: 20px;}
.divineDocumentation .ck-content h2{ font-size: 24px; font-weight: 400;}
.divineDocumentation .ck-content h3{ font-size: 19px; font-weight: 400;}
.divineDocumentation .ck-content pre{ margin: 0; background-color: var(--Violet-100); border-color: var(--Violet-500); border-radius: 4px; display: flex; overflow: auto;}
.divineDocumentation .ck-content pre::-webkit-scrollbar {width: 6px; height: 6px;}
.divineDocumentation .ck-content pre::-webkit-scrollbar-track {background: transparent; border-radius: 10px; }
.divineDocumentation .ck-content pre::-webkit-scrollbar-thumb { background: var(--Violet-500); border-radius: 10px; transition: background 0.3s;}
.divineDocumentation .ck-content .table{ margin: 0;}
.divineDocumentation .ck-content .table table th{ background-color: var(--Violet-100); font-size: 14px; font-weight: 500; padding: 8px 12px;} 
.divineDocumentation .ck-content .table table td{font-size: 14px; font-weight: 400; padding: 8px 12px; }
.divineDocumentation .ck-content a{ color: var(--Violet-500) !important; font-weight: 400 !important; text-decoration-color: var(--Violet-500) !important;}
.divineDocumentation .ck-content a strong{ font-weight: 400 !important;}

.divineDocumentation .ck-content code {  color: var(--Violet-500) !important; font-weight: 400 !important; background-color: var(--Violet-100) !important; box-shadow: none !important;}
.breadCurmbSection{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; max-width: 767px;}

@media(max-width:991px){
    .toggleBtn{ padding: 0; height: 15px; width: 20px; border: 0;  border-radius: 0;display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;}
    .toggleBtn span{ height: 1.5px; width: 100%; background-color: #221b1c; border-radius: 5px; display: block; transition: all 0.5s linear;}

    .toggleBtn.open{ justify-content: flex-start; position: relative;}
    .toggleBtn.open span{  position: absolute; top: 0; bottom: 0; margin: auto; width: 80%;}
    .toggleBtn.open span:first-child{ transform: rotate(-45deg);}
    .toggleBtn.open span:nth-child(2){ opacity: 0;}
    .toggleBtn.open span:nth-child(3){ transform: rotate(45deg); width: 80%;}
    .pageContent{ flex-direction: column;}
    .leftNavigation{ max-width: 100%; display: none;}
    .leftNavigation.show{ display: block;}
    .docSection .rightNavSection{ display: none;}
    .divineDocumentation .mainTitle .title{    flex-direction: column-reverse; align-items: flex-start;}
    .divineDocumentation .copyButton{ margin-left: auto;}
    .searchInput input{ display: none;}
    .serchSection{ max-width: fit-content;}
    .serchSection:has(.searchInput.show){ height: 30px; width: 5px;}
    .searchInput .text{ display: none;}
    .searchInput.show input{ display: block; width: 100%;}
    .searchInput.show{ position: absolute; right: 30px; top: 8px; background-color: #fff; right: 30px; top: 8px; width:300px;}
    body:has(.leftNavigation.show){ overflow: hidden;}
    .leftNavigation{ margin: 0;}
    .headerSection{ padding: 10px 20px;}
    .leftNavigation{ padding: 30px 10px;}
}

@media(max-width:567.98px){
    .divineDocumentation .ck-content h1, h1{ font-size: 24px;}
    .divineDocumentation .ck-content h2{ font-size: 20px;}
    .divineDocumentation .ck-content h3{ font-size: 16px;}
    .searchInput.show{width: calc(100% - 56px);}
    .search_result{ width: calc(100% - 60px);}
    .divineDocumentation .ck-content{ gap: 10px;}
    .divineDocumentation p{ font-size: 14px;}
}
@media(max-width:400.98px){
    .breadCurmbSection{gap: 5px; }
}





.breadcrumb { 
    font-family: 'Poppins', sans-serif; 
    font-size: 12px; 
    text-transform: uppercase; 
    font-weight: 400; 
    color: var(--Violet-500);  
    letter-spacing: 0.5px; margin: 0; }

.breadcrumb a {
    color:var(--Violet-500);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--Violet-900); /* slightly darker pink on hover */
    text-decoration: underline;
}

.breadcrumb span {
    color:var(--Violet-500);
}

.breadcrumb .separator {
    margin: 0 6px;
    color: var(--GrayScale-500);
}

.breadcrumb .current {
    color:var(--Violet-500);
}