label.error{
     color:red
 }

 .front-nav{
    -webkit-box-shadow: 0px -4px 64px -29px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 64px -29px rgba(0,0,0,0.75);
box-shadow: 0px -4px 64px -29px rgba(0,0,0,0.75);
 }
/* ------------------------ */
@font-face {
    font-family: 'inter';
    src: url('/assets/fonts/Inter-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'inter-medium';
    src: url('/assets/fonts/Inter-Medium.ttf');
    font-weight: medium;
    font-style: medium;
}

/* ===================== */
 .front-nav ul{
    display:flex;
    text-align: center;
    justify-content: center;
    justify-items: center;
    padding-left: 10vh;
 }
 .front-nav li>a{
    text-decoration: none;
    text-align: center;
    color: #000000;
    font-weight: 300;
    margin: 0 2px;
    font-family: 'inter';
    font-size: 15px;
 }

 .subcription-btn{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 160px;
    height: 40px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    border: 0.5px;
    background: rgba(255,175,75,1);
    background: -moz-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(255,146,10,1)));
    background: -webkit-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
    background: -o-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
    background: linear-gradient(to right, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=1 );
 }

 /* footer */

 .footer-widget p {
     margin-bottom: 27px;
 }
 p {
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
   color:white;
     line-height: 28px;
 }
 
    .animate-border {
   position: relative;
   display: block;
   width: 115px;
   height: 3px;
   background: #007bff; }
 
 .animate-border:after {
   position: absolute;
   content: "";
   width: 35px;
   height: 3px;
   left: 0;
   bottom: 0;
   border-left: 10px solid #fff;
   border-right: 10px solid #fff;
   -webkit-animation: animborder 2s linear infinite;
   animation: animborder 2s linear infinite; }
 
 @-webkit-keyframes animborder {
   0% {
     -webkit-transform: translateX(0px);
     transform: translateX(0px); }
   100% {
     -webkit-transform: translateX(113px);
     transform: translateX(113px); } }
 
 @keyframes animborder {
   0% {
     -webkit-transform: translateX(0px);
     transform: translateX(0px); }
   100% {
     -webkit-transform: translateX(113px);
     transform: translateX(113px); } }
 
 .animate-border.border-white:after {
   border-color: #fff; }
 
 .animate-border.border-yellow:after {
   border-color: #F5B02E; }
 
 .animate-border.border-orange:after {
   border-right-color: #007bff;
   border-left-color: #007bff; }
 
 .animate-border.border-ash:after {
   border-right-color: #EEF0EF;
   border-left-color: #EEF0EF; }
 
 .animate-border.border-offwhite:after {
   border-right-color: #F7F9F8;
   border-left-color: #F7F9F8; }
 
 /* Animated heading border */
 @keyframes primary-short {
   0% {
     width: 15%; }
   50% {
     width: 90%; }
   100% {
     width: 10%; } }
 
 @keyframes primary-long {
   0% {
     width: 80%; }
   50% {
     width: 0%; }
   100% {
     width: 80%; } } 
 
 .dk-footer {
   padding: 75px 0 0;
   background-color: #283646;
   position: relative;
   z-index: 2; }
   .dk-footer .contact-us {
     margin-top: 0;
     margin-bottom: 30px;
     padding-left: 80px; }
     .dk-footer .contact-us .contact-info {
       margin-left: 50px; }
     .dk-footer .contact-us.contact-us-last {
       margin-left: -80px; }
   .dk-footer .contact-icon i {
     font-size: 24px;
     top: -15px;
     position: relative;
     color:#007bff; }
 .footer-logo{
    width: 50%;
    height: 50%;
 }
 .dk-footer-box-info {
   top: -122px;
   background: #283646;
   padding: 40px;
   z-index: 2; }
   .dk-footer-box-info .footer-social-link h3 {
     color: #fff;
     font-size: 24px;
     margin-bottom: 25px; }
   .dk-footer-box-info .footer-social-link ul {
     list-style-type: none;
     padding: 0;
     margin: 0; }
   .dk-footer-box-info .footer-social-link li {
     display: inline-block; }
   .dk-footer-box-info .footer-social-link a i {
     display: block;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     text-align: center;
     line-height: 40px;
     background: #283646;
     margin-right: 5px;
     color: #fff; }
     .dk-footer-box-info .footer-social-link a i.fa-facebook {
       background-color: #0c74eb; }
     .dk-footer-box-info .footer-social-link a i.fa-twitter {
       background-color: #55ACEE; }
     .dk-footer-box-info .footer-social-link a i.fa-google-plus {
       background-color: #DD4B39; }
     .dk-footer-box-info .footer-social-link a i.fa-linkedin {
       background-color: #0976B4; }
     .dk-footer-box-info .footer-social-link a i.fa-instagram {
       background-color: #B7242A; }
 
 .footer-awarad {
   margin-top: 285px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 100%;
   -moz-box-flex: 0;
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center; }
   .footer-awarad p {
     color: #fff;
     font-size: 24px;
     font-weight: 700;
     margin-left: 20px;
     padding-top: 15px; }
 
 .footer-info-text {
   margin: 26px 0 32px; }
 
 .footer-left-widget {
   padding-left: 80px; }
 
 .footer-widget .section-heading {
   margin-bottom: 35px; }
 
 .footer-widget h3 {
   font-size: 17px;
   color: #fff;
   position: relative;
   margin-bottom: 15px;
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
   max-width: fit-content; }
 
 .footer-widget ul {
   width: 50%;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0; }
 
 .footer-widget li {
   margin-bottom: 18px; }
 
 .footer-widget p {
   margin-bottom: 27px; }
 
 .footer-widget a {
   color: #878787;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s; }
   .footer-widget a:hover {
     color: #007bff; }
 
 .footer-widget:after {
   content: "";
   display: block;
   clear: both; }
 
 .dk-footer-form {
   position: relative; }
   .dk-footer-form input[type=email] {
     padding: 14px 28px;
     border-radius: 50px;
     background: #2E2E2E;
     border: 1px solid #2E2E2E; }
   .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::-webkit-input-placeholder {
     color: #878787;
     font-size: 14px; }
   .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::placeholder {
     color: #878787;
     font-size: 14px; }
   .dk-footer-form button[type=submit] {
     position: absolute;
     top: 0;
     right: 0;
     padding: 12px 24px 12px 17px;
     border-top-right-radius: 25px;
     border-bottom-right-radius: 25px;
     border: 1px solid #007bff;
     background: #007bff;
     color: #fff; }
   .dk-footer-form button:hover {
     cursor: pointer; }
 
 /* ==========================
 
     Contact
 
 =============================*/
 .contact-us {
   position: relative;
   z-index: 2;
   margin-top: 65px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center; }
 
 .contact-icon {
   position: absolute; }
   .contact-icon i {
     font-size: 36px;
     top: -5px;
     position: relative;
     color: #007bff; }
 
 .contact-info {
   margin-left: 75px;
   color: #fff; }
   .contact-info h3 {
     font-size: 20px;
     color: #fff;
     margin-bottom: 0; }
 
 .copyright {
   padding: 28px 0;
   margin-top: 55px;
   background-color: #202020; }
   .copyright span,
   .copyright a {
     color: #878787;
     -webkit-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
     transition: all 0.3s linear; }
   .copyright a:hover {
     color:#007bff; }
 
 .copyright-menu ul {
   text-align: right;
   margin: 0; }
 
 .copyright-menu li {
   display: inline-block;
   padding-left: 20px; }
 
 .back-to-top {
   position: relative;
   z-index: 2; }
   .back-to-top .btn-dark {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     padding: 0;
     position: fixed;
     bottom: 20px;
     right: 20px;
     background: #2e2e2e;
     border-color: #2e2e2e;
     display: none;
     z-index: 999;
     -webkit-transition: all 0.3s linear;
     -o-transition: all 0.3s linear;
     transition: all 0.3s linear; }
     .back-to-top .btn-dark:hover {
       cursor: pointer;
       background: #FA6742;
       border-color: #FA6742; }

.right-widget{
    text-align: center;
}

.sub-form-footer{
    display: flex;
    flex-direction: row;
    
}
body{
    font-family: 'inter';
}
.sub-btn-footer{
    background: #D7783F;
    color: #fff;
    font-weight: 500;
    width: max-content;
    border-radius: 5px;
    
}
.sub-input-footer{
    width: max-content;
    flex: 1;
}
.footer-container{
    padding-left: 30px;
    padding-right: 60px;
}
.sub-box{
    margin-top: 40px;
}

.footer-nav-link ul{
    display: flex;
    list-style: none;
    color: #fff;
    justify-content: space-between;
    margin: 40px 0;
    padding: initial;
 }
 .footer-nav-link ul a{
    color: #fff;
    font-size: 15px;
    font-family: 'inter';
 }
 
 .footer-nav-link2  ul{
    display: flex;
    list-style: none;
    color: #fff;
    justify-content: space-between;
    margin: 40px 0;
    padding: initial;
 }
 .footer-nav-link2 ul a{
    color: #666;
    font-family: 'inter';
    width: max-content;
 }
 .footer-nav-link2 ul li{
    border-right: 1px solid #666;
    padding-right: 30px;
    
 }
 footer hr{
    margin-top: -27px;
 }
 .space-footer{
    height: 70px;
 }
.nav-helper{
    background: #D7783F;
    height: 30px;
    
}
.nav-helper{
    
}
.header-top-nav1 ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    width: max-content;
    /* top: 0; */
    /* left: 12px; */

}
.header-top-nav1 ul a{
    color: #fff;
    
}
.header-top-nav1 ul li {
    margin: 0 10px;
}
.header-top-nav2 ul{
    list-style: none;
    display: flex;
    justify-content: space-around;
    /* top: 0;
    left: 12px; */
}
.header-top-nav2 ul li {
    margin: 0 10px;
}
.header-top-nav2 ul a{
    color: #fff;
    
}
/* @media only screen and (max-width: 600px) {
  
} */

.hero-layout{
  padding-left: 100px;
  /* padding-top: 60px; */
  /* padding-right: 100px; */
  height: 380px;
}
.hero-layout1{
  
  height: 380px;
}
.hero2{
  /* padding-left: 100px;
  padding-top: 60px;
  padding-right: 100px; */
  height: 420px;
}
.s_object{
  margin-right:-95px;
  right:0;
  z-index:3;
  transform:skewX(-25deg);
  float: right;
  /* background: black; */
  background: linear-gradient(90deg, #352A22, #2E2B29);
  border-right: 4px solid #fff;
  height:-webkit-fill-available;
  width:250px;
}
.left_object{
  z-index: 5;
  /* right: 100; */
  width: -webkit-fill-available;
  /* margin-left: 10px; */
  padding-top:50px;
  text-align: center;
}
.left_object .center-img{
  width: 65px;
    border-radius: 50px;
    position: absolute;
}
.disc{
  height: fit-content;
  justify-content: center;
}
.hero-layout h2{
  font-size: 29px;
    color: #fff;
}
.hero-layout1 h2{
  font-size: 29px;
    color: #fff;
}
.hero-layout .title_box{
  padding-top: 28px;
}
.hero-layout1 .title_box{
  padding-top: 28px;
}
.hero-layout h1{

    color: #D7783F;
    font-family: 'Inter-Medium';
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
.hero-layout1 h1{

  color: #D7783F;
  font-family: 'Inter-Medium';
  font-size: 64px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}
#imageContainer {
  position: relative;
}
#imageContainer img {
  position: absolute;
  transition: opacity 1s ease;
}

#imageContainer2 {
  position: relative;
}
#imageContainer2 img {
  position: absolute;
  transition: opacity 1s ease;
}
.btn-section{
  margin-top: 20px;
}

.image-container {
  position: relative;
  max-width: 50px;
  max-height: 50px;
  margin-top: 12px;
}
#imageContainer img {
  position: absolute;
  transition: opacity 1s ease;
}

.image {
  position: absolute;
  top: 0;
  border-radius: 50%;
  width: 200px; /* Set the width and height to the desired size */
  height: 200px;
}

.image:nth-child(1) {
  left: 0;
}

.image:nth-child(2) {
  left: 40%;
}

.image:nth-child(3) {
  left: 80%;
}

.image:nth-child(4) {
  left: 120%;
}
.image:nth-child(5) {
  left: 160%;
}

.viewer-container{
  float: right;
  margin-top: 15px;
}
.viewer-num h3{
  font-size: large;
  line-height: 10px;
  font-weight: bold;
  
}
.viewer-subtitle h4{
  font-size: medium;
  color: #D7783F;
} 

.weather h2{
  font-size: 35px;
  font-weight: 400;
  font-family: 'Poppins';
  margin-bottom: 10px;
}

.weather p{
  font-size: 20px;
  font-family: 'Poppins';
  color: #000;
}

.top-left-adv-img{
  max-height: 181px;
  border: 1px;
  border-radius: 16px;
  border-bottom-right-radius: 0;
}
#top-left-adv-img-b{
  display: none;
}
.top-right-shape{
  width: 131px;
    background: #D7783F, #FF9B60;
    height: 181px;
    align-self: center;
    border: 1px;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    background: linear-gradient(180deg, #D7783F 0%, #F5E27D 100%);
    
}

.bottom-right-adv-img{
  max-height: 170px;
  border: 1px;
  border-radius: 20px;
  border-top-left-radius: 0;
  position:absolute;
    top:100vh;
    transform:translateY(-170%);
}
#bottom-right-adv-img-b{
  display: 'none';
}
.bottom-left-shape{
  width: 131px;
    background: #D7783F, #FF9B60;
    height: 181px;
    align-self: center;
    border: 1px;
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    background: linear-gradient(180.12deg, #D7783F 39.18%, #FF9B60 99.89%);
    position:relative;
    bottom: 0;
    top:100vh;
    transform:translateY(-165%);
    /* width:100%; */
}

.home-section-title{
  font-family: 'Poppins';
font-size: 36px;
font-weight: 600;
line-height: 54px;
letter-spacing: 0em;
text-align: left;

}

.image img{
  width: 100%;
/* height: 214px; */
/* flex-shrink: 0; */
}
.card{
  
  border: 0px;
}
.title h5{
color: #121212;
font-family: Poppins;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 34px; /* 141.667% */
letter-spacing: 0.3px;
width: 152px;
}
.date{
  display: flex;
  justify-content: space-between;
}
.current-date {
  color:#d7783f;
}
.read p{
  background-color: #D7783F;
  padding: 10px 0 10px 21px;
  width: 38%;
  color: #ffffff;
  font-size: 13px;
}

.shadow{
 background: linear-gradient(180deg, rgb(23, 19 ,19, 42%) 45%, rgb(6, 4, 4, 72%) 68.22%);
  color: #fff;
  margin-top: -40px;
  font-size: 40px;
}
.shadow h5{
  font-size: 13px;
}
.shadow h6{
  font-size: 12px;
}

.ptitle{
  font-size: 15px;
  font-weight: 600;
  
}
.pauthor{
  font-size: 11px;
  font-weight: 500;
}
.ntitle{
  font-weight: 800;
  font-size: 14px;
  max-width: 200px;
  height: 40px;
}

.read-more{
  background: #db813d;
  color: #fff;
  font-size: 15px;
}

.news-card{

  /* max-height: 100px; */
}
.podocast-card{
  max-height: 100px;
}
.hide,#stop-listening{
  display: none;
}
.bottom-card {
  position: fixed;
  top: 0;
  right: 0;
  /* background-color: #f2f2f2; */
  /* padding: 20px; */
  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
  /* height: 20px; */
  width: 150px;
  border-top-left-radius: 50px ;
  border-bottom-left-radius: 50px;
  /* background: linear-gradient(90deg, rgba(215, 121, 63, 0.973) 1.42%, rgba(255, 255, 255, 0.776) 90%); */
  background-color: #eb1919;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  text-align: left;
  /* padding: 15px 0; */
  position: fixed;
  top: 350px;
  padding-left: 0;
  
  }

  .bottom-card .middle{
    display: flex;
    /* gap: 23px; */
    justify-content: space-between;

  }
  canvas {
    width: calc(70% - 30px);
    height: 20px;
    position: relative;
    margin-top: 9px;
    /* margin-top: 10px; */
    /* display: flex; */
    
    /* justify-content: space-evenly; */
}
    /* background-color: #f4f4f4; */
  /* } */

  #pause{
    display: none;
  }
  #playbtn{
    border: 0px transparent;
    background-color: transparent;
  }
  #playbtn:active{
    border: 0px;
  }

  .nav-link {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: smaller;
}

.nav-link[aria-selected=false]:hover {
  /* color: #0056b3; */
  text-decoration: underline;
  border-bottom: 4px solid #C80000;
}

.nav-link[aria-selected=true] {
  /* color: #0056b3; */
  text-decoration: underline;
  border-bottom: 5px solid #C80000;
}

.nav-archive-link{
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: 500;
  font-size: medium;
}
.nav-archive-link[aria-selected=true] {
  /* color: #0056b3; */
  text-decoration: underline;
  color:  #D7783F;
}
.nav-archive-link[aria-selected=false]:hover {
  /* color: #0056b3; */
  text-decoration: underline;
  color:  #D7783F;
}
.search-icon:hover{
  color:#C80000;
}

.truncated-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Change this number to the desired number of lines */
  -webkit-box-orient: vertical;
}

.tag-card{
  -webkit-box-shadow: 1px 0px 56px -29px rgba(186,180,186,1);
-moz-box-shadow: 1px 0px 56px -29px rgba(186,180,186,1);
box-shadow: 1px 0px 56px -29px rgba(186,180,186,1);
}

.form-card{
  -webkit-box-shadow: -8px 1px 52px 5px rgba(173,173,173,1);
-moz-box-shadow: -8px 1px 52px 5px rgba(173,173,173,1);
box-shadow: -8px 1px 52px 5px rgba(173,173,173,1);
}

.form-control1 {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-bottom: 1px solid #000; /* You can change the color code as per your requirement */
}

.right-sidebar {
  background: #f9faff;
  padding: 30px;
  padding-left: 0;
  padding-right: 0;
  position: fixed;
  padding-top:105px;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 280px;
  max-width: 100%;
  overflow: auto;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  width: 450px;
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgba(11, 9, 9, 0.4);
  background-color: #f8f5f5;
  border-radius: 3px;
  transition: 0.2s;
  &.is-active {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
/* .file-drop-area:hover{
  background: white;
} */

.fake-btn {
  flex-shrink: 0;
  background-color: rgba(249, 247, 247, 0.04);
  border: 1px solid rgba(252, 252, 252, 0.1);
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-msg {
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  &:focus {
    outline: none;
    background-color: #edf4fe;
  }
}

.add_news_title::-webkit-input-placeholder{
  font-size: 30px;
}
.add_news_title{
  height: 30px;
  border: 0;
  border-bottom: 1px solid;
  font-size: 15px;
  padding:12px;
}
.add_news_title[type="text"]{
  font-size: 30px;
}

.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-size: 1em;
}

  /**
 * Styles for the example page
 */

 :root {
  --color-bg-main: #fff;
  --color-border-light: #E8E8EB;
  --color-text-main: #000;
}

.dark-mode {
  --color-border-light: rgba(255, 255, 255,.08);
  --color-bg-main: #1c1e24;
  --color-text-main: #737886;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
  background: var(--color-bg-main);
  color: var(--color-text-main);
}

.ce-example {
  font-size: 16.2px;
}

.ce-example__header {
  border-bottom: 1px solid var(--color-border-light);
  height: 50px;
  line-height: 50px;
  display: flex;
  padding: 0 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.ce-example__header a {
  color: inherit;
  text-decoration: none;
}

.ce-example__header-logo {
  font-weight: bold;
}

.ce-example__header-menu {
  margin-left: auto;
}

@media all and (max-width: 730px){
  .ce-example__header-menu {
    margin-left: 0;
    margin-top: 10px;
    flex-basis: 100%;
    font-size: 14px;
  }
}

.ce-example__header-menu a {
  margin-left: 20px;
}

@media all and (max-width: 730px){
  .ce-example__header-menu a {
    margin-left: 0;
    margin-right: 15px;
  }
}

.ce-example__content {
  max-width: 1100px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.thin-mode .ce-example__content {
  max-width: 500px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 0 15px;
}

.ce-example__output {
  background: #1B202B;
  overflow-x: auto;
  padding: 0 30px 80px;
}

.ce-example__output-content {
  max-width: 650px;
  margin: 30px auto;
  color: #ABADC3;
  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
  font-size: 13.3px;
}

.ce-example__output-content:empty {
  display: none;
}

.ce-example__button {
  display: block;
  margin: 50px auto;
  max-width: 180px;
  background: #4A9DF8;
  padding: 17px 30px;
  box-shadow: 0 22px 18px -4px rgba(137, 207, 255, 0.77);
  transition: all 150ms ease;
  cursor: pointer;
  border-radius: 31px;
  color: #fff;
  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
  text-align: center;
}

.ce-example__button:hover {
  background: #3D8DE5;
  transform: translateY(2px);
  box-shadow: 0 20px 15px -4px rgba(137, 207, 255, 0.77);
}

.ce-example__output-footer {
  padding: 30px 0;
  font-size: 14.2px;
  letter-spacing: 0.3px;
  text-align: center;
}

.ce-example__output-footer a {
  color: #fff;
  text-decoration: none;
}

.ce-example__statusbar {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: var(--color-bg-main);
  border-radius: 8px 8px 0 0;
  border-top: 1px solid var(--color-border-light);
  box-shadow: 0 2px 6px var(--color-border-light);
  font-size: 13px;
  padding: 8px 15px;
  z-index: 1;
  user-select: none;
}

@media (max-width: 768px) {
  .ce-example__statusbar {
    display: none;
  }
}

.ce-example__statusbar-item:not(:last-of-type)::after {
  content: '|';
  color: #ddd;
  margin: 0 15px 0 12px;
}

.ce-example__statusbar-item--right {
  margin-left: auto;
}

.ce-example__statusbar-button {
  display: inline-block;
  padding: 3px 12px;
  transition: all 150ms ease;
  cursor: pointer;
  border-radius: 31px;
  background: #eff1f4;
  text-align: center;
  user-select: none;
}

/* .ce-example__statusbar-button:hover {
  background: #e0e4eb;
} */

.ce-example__statusbar-button-primary {
  background: #4A9DF8;
  color: #fff;
  box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
}

.ce-example__statusbar {
  --toggler-size: 20px;
}

.ce-example__statusbar-toggler {
  position: relative;
  background: #7b8799;
  border-radius: 20px;
  padding: 2px;
  width: calc(var(--toggler-size) * 2.2);
  cursor: pointer;
  user-select: none;
}

.ce-example__statusbar-toggler::before {
  display: block;
  content: '';
  width: var(--toggler-size);
  height: var(--toggler-size);
  background: #fff;
  border-radius: 50%;
  transition: transform 100ms ease-in;
}

.ce-example__statusbar-toggler::after {
  --moon-size: calc(var(--toggler-size) * 0.5);
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  height: var(--moon-size);
  width: var(--moon-size);
  box-shadow: calc(var(--moon-size) * 0.25 * -1) calc(var(--moon-size) * 0.18) 0 calc(var(--moon-size) * 0.05) white;
  border-radius: 50%;
}

@media all and (max-width: 730px){
  .ce-example__header,
  .ce-example__content{
    padding: 0 20px;
  }
}

/**
 * JSON highlighter
 */
.sc_attr {
  color: rgb(148, 162, 192);
}
.sc_key {
  color: rgb(190, 213, 255);
}
.sc_toolname {
  color: rgb(15, 205, 251);
}
.sc_tag {
  color: rgb(4, 131, 216);
}
.sc_bool {
  color: rgb(247, 60, 173);
}

.ce-example .ce-block:first-of-type h1.ce-header{
  font-size: 50px;
}

.ce-example-multiple {
  display: grid;
  grid-template-columns: calc(50% - 15px) calc(50% - 15px);
  gap: 30px;
  padding: 30px;
}

.ce-example-multiple > div {
  background: #fff;
  border-radius: 7px;
  padding: 30px;
}

/**
 * Styles for the popup example page
 */
.ce-example--popup {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.ce-example--popup .ce-example__content {
  flex-grow: 2;
}

.ce-example-popup__overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #00000085;
}

.ce-example-popup__popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 800px;
  max-width: 100%;
  max-height: 90vh;
  background: white;
  padding: 20px;
  border-radius: 8px;
  overflow: auto;
  box-sizing: border-box;
}

@media all and (max-width: 730px){
  .ce-example-popup__popup {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    transform: none;
    max-height: none;

  }
}

.show-block-boundaries .ce-block {
  box-shadow: inset 0 0 0 1px #eff2f5;
}

.show-block-boundaries .ce-block__content {
  box-shadow: 0 0 0 1px rgba(224, 231, 241, 0.61) inset;
}
.show-block-boundaries #showBlocksBoundariesButton span,
.thin-mode #enableThinModeButton span {
  font-size: 0;
  vertical-align: bottom;
}

.show-block-boundaries #showBlocksBoundariesButton span::before,
.thin-mode #enableThinModeButton span::before {
  content: attr(data-toggled-text);
  display: inline;
  font-size: 13px;
}

/**
 * Dark theme overrides
 */
.dark-mode img {
  opacity: 0.5;
}

.dark-mode .cdx-simple-image__picture--with-border,
.dark-mode .cdx-input {
  border-color: var(--color-border-light);
}

.dark-mode .ce-example__button {
  box-shadow: 0 24px 18px -14px rgba(4, 154, 255, 0.24);
}

.dark-mode .ce-example__output {
  background-color: #17191f;
}

.dark-mode .inline-code {
  background-color: rgba(53, 56, 68, 0.62);
  color: #727683;
}

.dark-mode a {
  color: #959ba8;
}

.dark-mode .ce-example__statusbar-toggler,
.dark-mode .ce-example__statusbar-button {
  background-color: #343842;
}

.dark-mode .ce-example__statusbar-toggler::before {
  transform: translateX(calc(var(--toggler-size) * 2.2 - var(--toggler-size)));
}

.dark-mode .ce-example__statusbar-toggler::after {
  content: '*';
  right: auto;
  left: 6px;
  top: 7px;
  color: #fff;
  box-shadow: none;
  font-size: 32px;
}

.dark-mode.show-block-boundaries .ce-block,
.dark-mode.show-block-boundaries .ce-block__content {
  box-shadow: 0 0 0 1px rgba(128, 144, 159, 0.09) inset;
}

.dark-mode.thin-mode .ce-example__content{
  border-color: var(--color-border-light);
}

.dark-mode .ce-example__statusbar-item:not(:last-of-type)::after {
  color: var(--color-border-light);
}

.dark-mode .ce-block--selected .ce-block__content,
.dark-mode ::selection{
  background-color: rgba(57, 68, 84, 0.57);
}

.dark-mode .ce-toolbox__button,
.dark-mode .ce-toolbar__settings-btn,
.dark-mode .ce-toolbar__plus {
  color: inherit;
}

.dark-mode .ce-stub {
  opacity: 0.3;
}

/* ------------scrolling Text ---------------------- */

#scroll-container {
 
  overflow: hidden;
  align-self: center;
  width: 87%;
  margin-left: 3px;
  border-right: 2px solid #d4763e;
  border-left: 2px solid #d4763e;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
  font-size: 23px;
    font-weight: 600;
    color: #d4763e;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.news-title{
  font-size: 39px;
    font-weight: 900;
    color: #172B4D;
}
/* ------------scrolling Text ---------------------- */

p{
  color: initial;
}

.music-range {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-weight:600;
  font-style: normal;
  font-size: large;
  
}

/* ======================== */
.rotate-box {
  /* width: 100px;
  height: 100px; */
  /* background-color: #3498db; */
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help; /* Change cursor to pointer */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.btn-archieve:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.file-drop-area {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 200px; /* Adjust width as needed */
  height: 150px; /* Adjust height as needed */
  border: 2px dashed #ccc;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.fake-btn {
  /* position: absolute; */
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  padding: 8px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1;
  width: --webkit-fill-available;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

  .chip-container {
        display: block;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
        min-height: 51px;
        overflow-y: auto;
        background: white;
  }

  .chip {
    display: inline-block;
    background-color: #f2f1f1;
    color: orange;
    border-radius: 15px;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }