@font-face {
  font-family: 'khula';
  src: url('khula.ttf') format('truetype'),
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'khula-sb';
  src: url('khula-sb.ttf') format('truetype'),
  font-weight: 600;
  font-style: normal;
}

/* Apply Noto Sans globally */
* {
    font-family: 'khula-sb', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    font-variant-east-asian: normal;
    font-feature-settings: 'blwf';
    box-sizing: border-box;
}


body {
    background: #ffffff;
    color:#ca2325;
    margin: 0 auto;
    line-height: 1.5;
    scroll-behavior: smooth;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 50px;
    /*scrollbar-color: pink #ca2325;*/
}
:root {
    accent-color: #ca2325;
  }
.frame {
    max-width: 600px;
    margin: 0 auto;
    text-align: start;
    font-weight: 500;
}
.frame a{
    text-decoration: underline;
}
.home-menu a {
    display: block;
    margin: 10px 0;
}
img.rama {
    max-width: 300px;
margin: 40px;
    }

 .header{
        text-align: initial;
        max-width: 696px;
        margin: 0 auto;
    }
 .logo-wrap {
     margin: 15px 5px;
 }
 a.logo {
    font-weight: bold;
    font-size: large;
    border: 1px solid;
    padding: 5px 8px;
    border-radius: 4px;
    background: #ca2325;
    color: #fff;
    text-shadow: 2px 0px black;
}
 
 a {
    color:#ca2325;
    text-decoration:none;
 }
 a.active,.doha a:hover,.doha a:active,.button:hover {
     background: #ca2325;
     color: #ffffff;
     font-weight: bold;
 }
 a.last {
     margin-right: 30px!important;
 }
 .nav{
    padding:10px 0px;
    font-size: smaller;
    text-align:center;
 }
 .nav a {
    padding: 2px 4px;
     border: 1px solid;
     margin: 5px;
     border-radius: 3px;
     
 }
 
 .sticky {
   position: fixed;
   top: 0;
   width: 100%;
   max-width:696px;
 }

 p.shloka {
     font-family: 'khula', sans-serif;
     font-weight: 400;
 }
 
 h1 {
     text-align: center;
     font-size: revert;
 }
h3 {
    font-family: 'khula';
    font-weight: 600;
}
 
 span.headline {
     font-size: 23px;
     line-height: 1.3;
     font-weight: bold;
 }
 
 .content{
     color:#ca2325;
     text-align:center;
     font-weight:600;
     font-size: 18px; /* Default font size */
     transition: font-size 0.3s; /* Smooth transition */
     margin: 0 10px;
 }
 
 footer {
     text-align: center;
     background: #fff;
     padding: 5px;
     font-size: smaller;
 }
 
 div#dohas {
     display: block;
     width: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
     padding: 10px 5px;
    margin-top: 10px;
 }
 .dohas a {
     border: 1px solid;
     padding: 3px 5px;
     margin: 5px 10px;
     border-radius: 2px;
 }
 .doha{
    padding:10px 0px;
    font-size: smaller;
 }
 .doha a {
    padding: 2px 4px;
     border: 1px solid;
     margin: 5px;
     border-radius: 3px;
 }
 
 .sticky-doha {
   position: fixed;
   bottom: 0;
   width: 100%;
 }
 #dohas {
   overflow: hidden;
   background-color: #fff;
 }
 .anchor{
 display:block;
 height:92px;
 margin-top:-92px;
 visibility:hidden;
 }
 .accessibility{
     background-color: #fff;
     position: fixed;
     bottom: 0;
     width: 100%;
     display: block;
     transition: top 0.3s;
 }
 label {
    font-weight: 500;
}
#navbar {
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    white-space: nowrap;
    background-color: #ffffff;
 }
 
 .button {
    float: right;
    padding: 3px 10px;
    text-align: center;
    border-radius: 4px;
    margin: 3px;
    border: 1px solid #ca2325;
    color: #ca2325;
    font-size: x-small;
    font-weight: bold;
}

.android img {
    width: 70px;
    float: inline-end;
    margin-top: 4px;
    margin-left: 10px;
}

 input#fontSizeSlider {
     margin-top: 9px;
 }
 
 /*text selection*/
 body {
     -youbkit-touch-callout: none; /* iOS Safari */
     -youbkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
     -moz-user-select: none;    /* Firefox */
     -ms-user-select: none;        /* IE 10+ and Edge */
     user-select: none;            /* Non-prefixed version,
                                 currently supported by Chrome and Opera */
 }
 
 /* */
         @media print {
 
             html,
             body {
 
                 /* Hide the whole page */
                 display: none;
             }
         }
       /*Prevent User Selection*/
         html {
             user-select: none;
         }
 
 
 /*Accordion*/
 .accordion {
     cursor: pointer;
     transition: 0.4s;
 }
 .panel {
     padding: 5px 18px;
     display: none;
     overflow: hidden;
     font-size: small;
     color: #414141;
 }
 
 .active, .accordion:hover {
   background-color: #f1f2f5;
   border-radius: 4px;
 }
 .panel span {
     color: #5f6368;
 }
 hr.divider {
     border: 0;
     height: 1px;
     margin: 30px 0;
     background-image: -webkit-linear-gradient(left, #f0f0f0, #ca2325, #f0f0f0);
     background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
     background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
     background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
 }

 /* NAVBAR */
.navbar1 {
  display: center;               /* FIX */
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 3vw, 15px) clamp(12px, 5vw, 30px);
  background: #ff0000;
  
}
@media (max-width: 768px) {
  .navbar1 {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}




.logo {
  font-size: clamp(2rem, 5vw, 2rem);
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.logo2 {
  display: flex;
  flex-direction: column;   /* text up, images down */
  align-items: center;      /* center horizontally */
  text-align: center;
}

.logo-text {
  font-size: 30px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 8px;
}

.logo-images {
  display: flex;
  gap: 6px; /* space between images */
}

.emoji-img {
  width: 80px;   /* emoji size */
  height: 80px;
}
.video-buttons{
  display:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.video-btn{
  background:#c0392b;
  color:#fff;
  border:none;
  padding:10px 18px;
  font-size:15px;
  cursor:pointer;
  border-radius:6px;
}

.video-btn:hover{
  background:#a93226;
}

.video-box{
  width:100%;
  max-width:720px;
  margin:15px auto;
  aspect-ratio:16/9;
}

.video-box iframe{
  width:100%;
  height:100%;
  border-radius:10px;
}