/*---------- Header: back button alignment ---------- */
header-component{
  display:block;
}

 /*the actual header container created inside the web component */
header-component .header,
header-component header,
header-component .topbar{
  display:flex;
  align-items:center;      
  /*vertical center */
  justify-content:space-between;
  gap:12px;
}

 /*Back arrow */
header-component .app-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:10px;
  line-height:1;
  font-size:18px;
  cursor:pointer;
  border-radius:10px;
  user-select:none;
  color: WHITE;
   -webkit-tap-highlight-color: transparent; 
  background-color: #7a3e1d
}

 /*Title alignment */
header-component .title{
  flex:1;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1.2;
}

 /*optional: keep space on right so title stays perfectly centered */
header-component .header::after,
header-component header::after,
header-component .topbar::after{
  content:"";
  width:42px; 
  /*same as back button width */
  height:42px;
}

@font-face{
  font-family: "Shobhika";
  src: url("/fonts/Shobhika-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Shobhika";
  src: url("/fonts/Shobhika-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



 theme.css 
:root {
  --primary-brown: #7a3e1d;
  --light-bg: #f5f1ec;
  --card-bg: #f7f7f9;
  --border-radius: 18px;
}

body {
  font-size: 1.15em;
 overflow: auto;
  background-color: #f0f0f0;
}

.input textarea{
  width: 100%;
}

.input input{  
  height:2em;
}

.title {
  color: white;
  font-weight: bold;
  padding: 2px 15px ;
  background-color: #784123;
    
    /*here i added these three lines*/
    left:50%; 
  transform:translateX(-50%);
  position: absolute;
  
}



.app-menu {
   font-size:18px;
  cursor:pointer;
  padding:10px 12px;        
  /*✅ bigger tap */
  
  user-select:none;
 
}

.container {
  width: 100%;
  height: 100vh;
  flex-direction:column ;
}

.feedback {
  margin: 10px 10px;
  width: 90%;
  display: flex;
  flex-direction: column;
}

.feedback .btn {
    margin: 2em 10px;    
    align-self: center;    
}

.main {
    flex:1;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.mainmenu {
      width:100%;
    max-width:620px;
  display: flex;
  flex-direction: column;  
   gap:22px;
    align-items:center;
   font-family: "Shobhika", "Noto Serif Devanagari", serif !important ;
}

.main .mainmenu.btn {
    font-size: 20px;
   font-family: "Shobhika", "Noto Serif Devanagari", serif !important ;
}

 /*Sidebar */
 /*Solid border */
hr.solid {
  border-top: 1px solid #ccc;
}
.sidebarcontainerhidden {
  display: none;
}
.sidebarcontainer {
  width: 100%;
  height: 100vh;
  display: none;
  align-items: start;
  position: absolute;
  background-color: #00000055;
}
.navtop {
  color: white;
  padding: 10px;
  background-color: #784123;
  font-size: 0.85em;
  height: 10%;
}

.sidebar {
  width: 70%;
  background-color: #fff;
  height: 100vh;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  width: 100%;
}

.sidebar ul li {
  padding: 10px;
}

.sidebar ul li a {
  color: #000;
  text-decoration: none;
  width: 100%;
  display: inline-block;
}


.btn {
   background-color: transparent; 
   width:100%;
 font-family: "Shobhika", "Noto Serif Devanagari", serif !important ; 
  border-radius: 20px;
  border-width: 2px;
  border-color: #784123;
  margin: 10px 0;    
  padding: 18px 36px;
      
  font-size: 20px;
  text-align:center;
  cursor: pointer;
}

 /*Change background color of buttons on hover */
.btn:hover {
  background-color: #ddd;
  /*color: #000;*/
}

 /*Start Tabs */
 /*Style the tab */
.tab {
  display: flex;
  flex: 1 1 0px;
  width: 0px;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-family: Shobhika,important!;
  overflow: hidden;
  border: thin solid #ccc;
  background-color: #784123;
}

 /*Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 0px;
  margin: 0px 0px;
  transition: 0.3s;
  color: #ddd;
  font-size: 1.25em;
  border-bottom:medium solid #784123;
  width: 100%;
  border-right-width: 0px;
  border-left-width: 0px;
}

 /*Change background color of buttons on hover */
.tab button:hover {
  color: #fff;  
   border-bottom:medium solid #fff; 
}
.tablinks{
    font-family: Shobhika,!important;
}
 /*Create an active/current tablink class */
.tab button.active {  
  color: #fff;  
  border-bottom:medium solid #fff;
}

.tab button:active {  
  background-color: rgba(221, 221, 221, 0.4);
  border-radius: 40px;  
   border-bottom:medium solid #fff; 
}
 /*Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 0px;
   border: 1px solid #ccc; 
  border-top: none;
  overflow-y: auto;
  height: 100%;
}
 /*End Tabs */

.pageheading {
    
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  margin: 1em 0;
}

.pagesubheading {
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  font-weight: bold;
  text-align: center;
  font-size: 1.0em;
  margin: 1em 0;  
}

.viewtext {
    
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  color: #000;
  text-align: left;
  margin: 0px 5px;
  font-size: 1em;
  overflow-y: auto;
  height: 99%;
}

.viewcontent {
  margin: 0px 15px;
}

.textboldcenter {
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  font-weight: bold,
}

.textjustify {
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  text-align: left;
  color: #000;
  margin-left: 18px;
  margin-right: 18px;
}

.textcenter {
    
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
}

.textbold {
    
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
  /*font-family: Sanskrit2003, Arial, Helvetica, sans-serif;*/
  font-weight: bold,
}
.red {
  color: red;
}
.green {
  color: darkgreen;
}
.blue {
  color: blue;
}
.violet {
  color: darkviolet;
}
#imgtxt {
  width: 15px;  
  vertical-align: middle;
}

 /*Table */
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
 
   
  font-family: "Shobhika", "Noto Serif Devanagari", serif;
}
.table {
  border-width: 1px 1px 0px 0px;
  margin-bottom: 10px;
}
.intable {
  border-width: 0px 0px 0px 0px;
}
.table, .intable {
  display:table;
  width:100%;
  height:100%;
}
.cell7 {
  display:table-cell;
  border-width: 0px 0px 1px 1px;
  width:14%;
}
.cellmain {
  display:table-cell;  
}
.cell {
  display:table-cell;
  border-width: 0px 0px 1px 1px;
  width:20%; 
}
.row {
  display:table-row;  
}
.merged{
  width:20%;
  height:80%;
  background: transparent;
}
.table, .intable, .cell, .cell7 {
  border-style: solid;
  border-color: black;
}
.table div {
  text-align: center;
  vertical-align: middle;
}
.table .header {
  font-weight: bold;
  color: white;
  background-color: #784123;
}


.fa {
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  line-height:1;
  font-family: 'Shobhika-Regular';  
}
.fa-arrow-left:before{
  content:"\f060";
  color: #fff;
}
.fa-home:before{  
  content:"\f015";
}
.fa-clone:before{
  content:"\f24d";  
}
.fa-pencil-square-o:before{
  content:"\f044";
}
.fa-external-link:before{
  content: "\f08e";
}
.fa-info-circle:before{
  content: "\f05a";
}
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}
.fa-xs {
  font-size: 0.75em;
}
.fa-sm {
  font-size: 0.875em;
}
.fa-1x {
  font-size: 1em;
}
.fa-1hx {
  font-size: 1.5em;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-6x {
  font-size: 6em;
}
.fa-7x {
  font-size: 7em;
}
.fa-8x {
  font-size: 8em;
}
.fa-9x {
  font-size: 9em;
}
.fa-10x {
  font-size: 10em;
}

.quizContainer {    
  position: relative;
  height: 100%;
  overflow: hidden;
}

.questionHolder, .options {
  border: 1px solid;
  border-color: brown;
  display: flex;
  flex-direction: column;  
  height: max-content;
  padding: 10px;
  margin: 10px;
}

.question {
  align-self: center;
  margin: 15px;
}

progress {
  color: blue;
}

 /*🔽 Exercise Bottom Tabs */
.exercise-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    border-top: 1px solid #ddd;
    background: #fff;
    z-index: 100;
}

.exercise-tabs .tab-btn {
    flex: 1;
    padding: 14px 0;
    font-size: 20px;
    border: none;
    background: none;
    cursor: pointer;
    color: #777;
    font-weight: 500;
}

.exercise-tabs .tab-btn.active {
    color: #784123;
    border-top: 3px solid #784123;
    background-color: #f8f6f0;
}
.site-footer{
    border-top:1px solid #ddd;
    background:#ffffff;
    text-align:center;
    padding:16px 12px;
    flex-shrink:0;
  }

  .site-footer p{
    font-size:13px;
    margin:0 0 8px;
    color:#555;
  }

  .footer-links{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .footer-links a{
    font-size:13px;
    color:#666;
    text-decoration:none;
  }

  .footer-links a:hover{
    text-decoration:underline;
  }

.pageheading,
.pagesubheading,
.textboldcenter,
.textbold,
.title,
.tablinks,
.tabcontent,
.menulist {
  font-family: "Shobhika", "Noto Serif Devanagari", serif !important;
}


.pageheading,
.pagesubheading,
.btn,
.title {
  font-weight: 700 !important;
}