@font-face {
      font-family: 'Peace Sans'; 
      src: url('../fonts/Peace Sans Webfont.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Open Sans Regular'; 
      src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Open Sans Bold'; 
      src: url('../fonts/OpenSans-Bold.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Syazliana'; 
      src: url('../fonts/syazalina83.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Azim Light'; /* Name you want to use in CSS */
      src: url('../fonts/Azim-Light.otf') format('opentype');
      }
      @font-face {
      font-family: 'Azim Medium'; /* Name you want to use in CSS */
      src: url('../fonts/Azim-Medium.otf') format('opentype');
      }
      @font-face {
      font-family: 'Azim Bold'; /* Name you want to use in CSS */
      src: url('../fonts/Azim-Bold.otf') format('opentype');
      }
      @font-face {
      font-family: 'Azim Light'; /* Name you want to use in CSS */
      src: url('../fonts/Azim-Light.otf') format('opentype');
      }
      @font-face {
      font-family: 'Wak Nan'; 
      src: url('../fonts/WakNan.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Wak Nan Dot'; 
      src: url('../fonts/WakNanDot.ttf') format('truetype'); 
      }
      @font-face {
      font-family: 'Atlanta Medium'; 
      src: url('../fonts/AtlantaMed.ttf') format('truetype'); 
      }
      .content {
      text-align: center; 
      padding:15px;
      }
      .content h1,h2,h3,h4,h5,h6,button {
      font-family: 'Azim Bold', sans-serif !important;
      text-align: center; 
      padding-bottom: 20px;
      }

      .content h3{
      font-size: 30px;
      }

      .content ul,li, ol {
      font-family: 'Azim Bold', sans-serif !important;
      font-size: 20px;
      margin-bottom: 10px;
      text-align: left;
      }
      .content p {
      font-family: 'Azim Bold', sans-serif !important;
      text-align: center; 
      padding: 20px;
      font-size: 20px;
      }
      .content video {
      aspect-ratio: 16 / 9;
      width: 100%;
      border-radius: 15px;
      /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      .contentButton {
      font-family: 'Azim Bold', sans-serif;
      padding:10px;
      padding-left: 50px;
      padding-right: 10px;
      border:3px solid #000000;
      border-radius:30px;
      background:#fff;
      transition : 0.3s;
      color:#000;
      font-weight: bold;
      font-size: 0.9rem;
      width:96%;
      margin-left:2%;
      margin-right:2%;
      margin-top:10px;
      box-shadow: rgba(0, 0, 0, 0) 0px 5px 15px;
      position:relative;
      min-height: 55px;
      font-size: 20px;
      }
      .contentButtonCenter {
      padding-left: 10px !important;
      }
      .contentButton:hover {
      color:#fff;
      background:#000;
      border:3px solid #ffffff;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      .contentButton:hover .d-flex {
      color:#000;
      }
      .contentNumber {
      position: absolute;
      top: 4px;
      left: 5px;
      font-size: 0.9rem;
      text-align: center;
      padding-top: 5px;
      width: 40px;
      min-height: 40px;
      background: white;
      border: 3px solid #000;
      border-radius: 50%;
      color:#000;
      }
      .contentCenter {
      text-align: center;
      }
      .contentLeft {
      text-align: left;
      }
      .contentMenuImage {
      height:80px;
      border-radius: 15px;
      margin-top:10px;
      margin-bottom: 10px;
      }
      .contentImage {
      width:90%;
      margin-left:5%;
      margin-left:5%;
      border-radius: 30px;
      }
      #sidebarMenu {
      width: 260px;
      height: calc(100vh - 90px - 2%);
      position: fixed;
      top: 90px;
      left: 3%;
      overflow-y: auto;
      border-radius: 20px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      z-index: 4;
      }
      .nav-pills .nav-link {
            color: #333333;
            background: #f0f0f0;
            border-bottom: 1px solid #ccc;
            min-height: 80px;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      }

      .nav-pills .nav-items{
            font-size: 12px !important;
            font-weight: normal;
            min-height: 40px;
            /* background: #cecece; */
            /* border: 1px solid #aaa; */
            color: #fff;
            background: #156da3;
            border-radius: 0 !important;
            cursor:pointer;
            padding-left: 30px;
            /*background: linear-gradient(0deg, rgba(21, 109, 163, 1) 0%, rgba(30, 168, 255, 1) 65%, rgba(98, 193, 252, 1) 100%);*/
      }
      body { margin: 0; overflow: hidden; }
      canvas { display: block; position: absolute; inset: 0; z-index: 1; }
      #overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: transparent; }
      #overlay > * { pointer-events: auto; }
      #camera-position, #camera-rotation, #tree-position, #selected-object {
      position: absolute; left: 10px;
      background: rgba(0,0,0,.7); color: #fff;
      padding: 5px 10px; border-radius: 3px;
      font-family: monospace; font-size: 14px;
      }
      #camera-position { bottom: 10px; }
      #camera-rotation { bottom: 40px; }
      #tree-position { bottom: 70px; }
      #selected-object { bottom: 100px; }
      #ui-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url(../images/bg-ray2.png) no-repeat;background-size: cover; }
      #ui-overlay > * { pointer-events: auto; }
      #ui-icon-3d{
      position: absolute;
      width: 7%;
      /*height:60px;*/
      right: 1%;
      bottom:1%;
      }
      #ui-icon-3d img {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      border-radius:50%;
      }
      #ui-button-help {
      position: absolute;
      width: 5%;
      /*height:60px;*/
      right: 1%;
      top: 1%;
      }
      #ui-button-help img {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      border-radius:50%;
      }
      #ui-button-help img:hover {
      transform: scale(1.1);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      #ui-button-help img:active {
      transform: scale(1.05);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      #ui-button-sound {
      position: absolute;
      width: 5%;
      /*height:60px;*/
      right: 6%;
      top: 1%;
      }
      #ui-button-sound img {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      border-radius:50%;
      }
      #ui-button-sound img:hover {
      transform: scale(1.1);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      #ui-button-sound img:active {
      transform: scale(1.05);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      #ui-button-vo {
      position: absolute;
      width: 5%;
      /*height:60px;*/
      right: 11%;
      top: 1%;
      }
      #ui-button-vo img {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      border-radius:50%;
      }
      #ui-button-vo img:hover {
      transform: scale(1.1);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      #ui-button-vo img:active {
      transform: scale(1.05);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      #ui-button-sidemenu {
      position: absolute;
      width: 5%;
      /*height:60px;*/
      right: 16%;
      top: 1%;
      }
      #ui-button-sidemenu img {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      border-radius:50%;
      }
      #ui-button-sidemenu img:hover {
      transform: scale(1.1);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      #ui-button-sidemenu img:active {
      transform: scale(1.05);
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      #ui-subtitle{
      position: absolute;
      pointer-events: none;
      width: 25%;
      /*max-width:600px;*/
      height:auto;
      top: 1%;
      left: 1%;
      }
      #ui-subtitle img{
      width:100%;
      pointer-events: none;
      }
      #ui-title{
      position: absolute;
      pointer-events: none;
      width: 40%;
      max-width:40%;
      height:auto;
      top: 20%;
      left: 30%;
      }
      #ui-title img{
      pointer-events: none;
      width:100%;
      }
      #ui-button-start{
      position:absolute;
      width: 15%;
      max-width:15%;
      height:auto;
      top: 65%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      }
      #ui-button-start img{
      width:100%;
      cursor: pointer;
      transition: all 0.3s ease-out;
      }
      #ui-button-start img:hover {
      transform: scale(1.15);
      }
      #ui-button-start img:active {
      transform: scale(1.1);
      }
      #ui-menu-panel {
      position: absolute;
      width: 80%;
      max-width: 900px;
      height: auto;
      top: 65%;
      left: 0;
      right: 0;
      margin: auto;
      } 
      @media screen and (max-width: 767px) {
      .mainmenuicons {
      width:80% !important;
      }
      #ui-title {
      width: 75%;
      max-width: 75%;
      height: auto;
      top: 20%;
      left: 12%;
      }
      #ui-subtitle {
      width: 50%;
      /* max-width: 600px; */
      height: auto;
      top: 1%;
      left: 1%;
      }
      #ui-button-help {
      width: 10%;
      /* height: 60px; */
      right: 1%;
      top: 1%;
      }
      #ui-button-sound {
      width: 10%;
      /* height: 60px; */
      right: 11%;
      top: 1%;
      }
      #ui-button-vo {
      width: 10%;
      /* height: 60px; */
      right: 21%;
      top: 1%;
      }
      #ui-button-sidemenu {
      width: 10%;
      /* height: 60px; */
      right: 31%;
      top: 1%;
      }
      
      }
      @media screen and (max-width: 480px) {
      #ui-menu-panel{
      width: 80%;
      height:auto;
      top: 33%;
      right: 0;
      margin: auto;
      }
      #ui-title {
      top: 15% !important;
      }
      #ui-button-start {
      width: 40%;
      max-width: 40%;
      height: auto;
      top: 65%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      }
      }
      @media screen and (min-width: 481px) and (max-width: 767px) {
      #ui-menu-panel{
      width: 80%;
      height:auto;
      top: 55%;
      left: 10%;
      }
      #ui-button-start {
      width: 30%;
      max-width: 30%;
      height: auto;
      top: 65%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      }
      }
      .mainmenuicons {
      width:90%;
      height:auto;
      cursor: pointer;
      transition: all 0.3s ease-out;
      }
      .mainmenuicons:hover {
      transform: scale(1.1);
      }
      .mainmenuicons:active {
      transform: scale(1.05);
      }
      .dontshow {
      display:none;
      }
      .ui-content-panel{
      background: #000000b0;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      }
      #ui-content-inner{
      position:absolute;
      width: 89%;
      height: 89%;
      top: 5.5%;
      left: 5.5%;
      background: #ffffff;
      background: linear-gradient(39deg,rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 50%, rgba(242, 242, 242, 1) 100%);
      border-radius: 20px;
      border:5px solid white;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      }
      .closebuttonhelp {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      right:-20px;
      top:-20px;
      transition: 0.3s;
      }
      .closebuttonhelp:hover {
      transform: scale(1.10);
      }
      .closebutton {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      right:-20px;
      top:-20px;
      transition: 0.3s;
      }
      .closebutton:hover {
      transform: scale(1.10);
      }
      .soundbutton {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      right:35px;
      top:-20px;
      transition: 0.3s;
      }
      .soundbutton:hover {
      transform: scale(1.10);
      }
      .vobutton {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      right:90px;
      top:-20px;
      transition: 0.3s;
      }
      .vobutton:hover {
      transform: scale(1.10);
      }
      .homebutton {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      left:-20px;
      top:-20px;
      transition: 0.3s;
      }
      .homebutton:hover {
      transform: scale(1.10);
      }
      .backbutton {
      color:#fff;
      font-weight:bold;
      padding:10px;
      background: #4670ED;
      background: linear-gradient(39deg, rgba(70, 112, 237, 1) 0%, rgba(95, 213, 255, 1) 78%, rgba(95, 213, 255, 1) 100%);
      border-radius: 50%;
      border: 3px solid #ffffff;
      width: 50px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      position:absolute;
      left:35px;
      top:-20px;
      transition: 0.3s;
      }
      .backbutton:hover {
      transform: scale(1.10);
      }
      .contentrow {
      width:100%;
      height:100%;
      padding:20px;
      overflow: hidden;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      border-radius:20px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      }
      /* For Webkit browsers (Chrome, Safari, Opera) */
      .contentrow ::-webkit-scrollbar {
      display: none;
      }
      /* For Firefox */
      .contentrow  {
      scrollbar-width: none;
      }
      /* For Internet Explorer and Edge */
      .contentrow  {
      -ms-overflow-style: none;
      }
      /* Ensure vertical scrolling is enabled */
      .contentrow {
      overflow-y: scroll; /* or auto */
      }
      .ui-content-inner {
      background: #ffffff;
      background: linear-gradient(39deg,rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 78%, rgba(245, 245, 245, 1) 100%);
      }
      .row {
      --bs-gutter-x: 0;
      --bs-gutter-y: 0;
      }
      .innertitle {
          position:absolute;
          width:30%;
          top:-50px;
          left:35%;
        }
        @media (min-width: 480px) {
          .innertitle {
            display:block;
          }
        }
        @media (max-width: 481px) {
          .innertitle {
            display:none;
          }
        }