@font-face { 
  font-family: 'Onest'; 
  font-style: normal; 
  font-weight: 100 800; 
  font-display: swap; 
  src: url('../font/Onest/Onest-VariableFont_wght.ttf') format('truetype'); 
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
}
body {
   font-family: 'Onest', sans-serif !important; 
   overflow-x: hidden;
}
.bg-body{
  background-color: #f8fafc !important;
}
.pad-mrg{
    padding: 0px !important; 
    margin: 0px !important;
}

 .modal1{
    position:fixed;
    top:0;
    left:0;
    z-index:1060;
    display:none;
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    outline:0;
    background-color:#d9d9d940;
  }
  .modal-content-dash2{
    z-index: 99 !important; 
    background-color: #ffffff;
    margin: 1% 30%;  
    width: 45%; 
    border-radius: 20px;
    box-shadow: 0px 2px 10px 3px rgba(0,0,0,.15);
  }


    .nav-bg{
        background-color: #ffffff;
    }
      .fw200{
        font-weight: 200 !important;
    }
    .fw300{
        font-weight: 300 !important;
    }
    .fw400{
        font-weight: 400 !important;
    }
    .fw500{
        font-weight: 500;
    }
    .fw600{
        font-weight: 600;
    }
    .fw700{
        font-weight: 700;
    }
    .fw800{
        font-weight: 800 !important;

    }
    .fs10{
        font-size: 10px !important;
    }
    .fs12{
        font-size: 12px !important;
    }
    .fs14{
        font-size: 14px !important;
    }
      .fs15{
        font-size: 15px !important;
    }
    .fs18{
        font-size: 18px !important;
    }
    .fs20{
        font-size: 20px !important;
    }
    .fs24{
        font-size: 24px;
    }
    .fs27{
        font-size: 27px;
    }
    .fs28{
        font-size: 28px;
    }
    .fs30{
        font-size: 30px;
    }
    .fsH2{
        font-size: 35px;
    }
    .fs60{
        font-size: 60px;
    }
    .brdr-5{
        border-radius: 5px !important;
    }
    .brdr-4x{
      border-radius: 40px !important;
    }
    .brdr-2x{
      border-radius: 20px !important;
    }
    .addBx{
  width: 70%;border: 2px solid #f3f1f1;border-radius: 20px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
.demo-slct{
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
.clr-main{
  color: #ff541f !important;
}
.clr-main1{
  background: linear-gradient(to bottom, #ff541f 60%, #ffeee9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.clr-main2{
background: linear-gradient(to right, #ff541f 60%, #fab099 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.clr-main:hover{
  color: #ff541f;
}
.hlght-line,.hlght-line1{
  width: 30px;
        height: 3px;
        background:linear-gradient( to right, #ff541f, #ffa589);
}
.hlght-line1{
  width: 50px;
}
.footrBx:hover .hlght-line1 {
  width: 90px !important;
  transition: 0.5s;
}
.choose-bx:hover .hlght-line1 {
  width: 90px !important;
  transition: 0.5s;
}
.faq-bx{
  border-radius: 10px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
.demoBtn {
  border: 1px solid transparent;
  border-radius: 5px;
  background-image: linear-gradient(white, white), linear-gradient(to right, #ff541f, #fec7b690 );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #ff541f;
}


.icn-bx{
  width: 100%;border-radius: 10px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.icn-bg{
  width: 60px;
  height: 60px;
  background-color: #ff541f;
  border-radius: 50%;
}
.bx-icn{
  width: 20%;
}
.bx-icn1{
  width: 20%;
  border-right: 1px solid #cacbcb;
}
.txt-main{
  color: #fefcef;
}
.txt-main:hover{
  color: #fefcef;
}
.btn-bg{
        background:radial-gradient(circle at bottom left, #ff541f,#fab099);
        border: none;
      
    }

.mnuFnt{
  color: #000000;
}
.txt-white{
  color: #ffffff;
}
.txt-drk{
  color: #000000 !important;
}
.logBtn{
  border: 1px solid #ffffff;
}
.fntMain{
  font-size: 3.4vw;
}
.bxHgt{
  height: auto;
}
.faq-bot-pad{
  padding-bottom: 100px;
   
}
.accordion {
  background-color: #ffffff !important;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  transition: 0.4s;
  border-radius: 10px !important;

  position: relative;

}

.active2,
.accordion:hover {
  color: #000000;
  font-weight: 500;

}

.brdr-faq {
  border: 1px solid #7f7f7f50;
  border-radius: 10px;
}
.accordion::before {

  content: url(../images/add.png);
  font-size: 20px;
  color: #000000;
  font-weight: 600 !important;
  font-weight: normal;
  float: left;
  height: 100%;
  width: 30px;
  height: 40px;
  margin-left: 5px;
  margin-right: 10px;
  margin-top: -5px;
}
.active2::before {
  content: url(../images/minus.png);
  
  color: #000000;
  font-weight: 600;
  font-weight: normal;
  float: left;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: -5px;
}

.txt-justy {
  text-align: justify;
}

.panel {
  padding: 0px;
  color: #000000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.ancr-styl{
  text-decoration: none;
}
.cpy-right{
  color: #a09f9f;
}
.mic-bg{
  background-color: #ffffff;width: 60px;height: 60px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}
.bg-shade{
  background-image: url(../images/bg-shade.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
/* Base container setup */
.sound-wave-container { 
  position: relative; 
  width: 60px; 
  height: 60px; 
} 

/* Base styles for waves radiating from bottom-left */
.wave { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-radius: 0 100% 0 0; 
  border-top: 4px solid #ff541f; 
  border-right: 4px solid #ff541f; 
  transform: rotate(45deg); 
  transform-origin: bottom left; 
  transition: opacity 0.3s ease;
} 

/* Base styles for waves radiating from top-right */
.wave1 { 
  position: absolute; 
  top: 0; 
  right: 0; 
  border-radius: 0 0 0 100%; 
  border-bottom: 4px solid #ff541f; 
  border-left: 4px solid #ff541f; 
  transform: rotate(45deg); 
  transform-origin: top right; 
  transition: opacity 0.3s ease;
} 

/* Individual wave sizing scales */
.wave-1 { width: 18px; height: 18px; } 
.wave-2 { width: 36px; height: 36px; } 
.wave-3 { width: 54px; height: 54px; } 

/* =======================================================
   HOVER ACTIONS & MOTIONS (Triggered by .bg-shade)
   ======================================================= */

/* Staggered pulse effect for bottom-left waves */
.bg-shade:hover .wave-1 { animation: micPulse 2s infinite ease-in-out 0s; }
.bg-shade:hover .wave-2 { animation: micPulse 2s infinite ease-in-out 0.4s; }
.bg-shade:hover .wave-3 { animation: micPulse 2s infinite ease-in-out 0.6s; }

/* Staggered pulse effect for top-right waves */
.bg-shade:hover .wave1.wave-1 { animation: micPulse 2s infinite ease-in-out 0s; }
.bg-shade:hover .wave1.wave-2 { animation: micPulse 2s infinite ease-in-out 0.4s; }
.bg-shade:hover .wave1.wave-3 { animation: micPulse 2s infinite ease-in-out 0.6s; }

/* Keyframes for natural audio-wave expansion and fading */
@keyframes micPulse {
  0% {
    transform: rotate(45deg) scale(0.7);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: rotate(45deg) scale(1.25);
    opacity: 0;
  }
}

.choose-bx{
  border-radius: 5px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  height: 165px;
}
.wrks-bx{
  border-top-left-radius: 5px;
  border-top-right-radius: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius:5px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
  height: 160px;
   
}
.wrks-txt{
  color: #3d4753;
}
.bx-hear{
  border-radius: 20px;
   box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
}
.bg-tglr{
  background-color: #ff541f70;
  border-radius: 5px;
}
.bx-outr{
  width: 26%;
}
.arrw-outr{
  width: 11%;
}
.bg-grey{
  background-color: #3d4753;
}
.brdr-rght{
  border-right: 1px solid #ffffff50;
}
.brdr-px{
  border-right: 1px solid #ffffff50;border-left: 1px solid #ffffff50;
}
.wave-bx{
  width: 160px;height: auto;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  border: 2px solid #f3f1f1;
  position: absolute;right: 20%;
  font-size: 14px;
  top: 5px;
}
.wave-wdth{
  width: 40px;
}
.wave-bx1{
  width: 60%;height: auto;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  border: 2px solid #f3f1f1;
  position: absolute;left:0;
  bottom: 7.5vw;
  font-size: 14px;
  background-color: #ffffff;
  z-index: 9;
}
.wave-wdth1{
  width: 5.4vw;
  margin-left: -12px;
}
.wave-bx2{
  width: 60%;height: auto;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  border: 2px solid #f3f1f1;
  position: absolute;right:10%;
  bottom: 0vw;
  font-size: 14px;
  background-color: #ffffff;
  z-index: 9;
}
.wave-wdth2{
  width: 4vw;
 
}
.wave-lft{
  position: absolute;top: 0;right: 23%;
}
.wave-rght{
  position: absolute;top: 60px;left: 23%;
}
.txt-audio{
  color: #686666;
;
}
.btn{
  box-shadow: none !important;
}
.btn-wdth{
  width: 8%;
}
.wav-wdth{
  width: 82%;
}
.tym-wdth{
  width: 10%;
}
.footr-mnu:hover {
  padding-left: 10px;
  transition: 0.5s;
  cursor: pointer;
}
.btn-hvr:hover .right-arw {
  margin-left: 10px !important;
  transition: 0.5s;
}
.count-buble{
  width: 30px;height: 30px;border-radius: 40px;background-color: #ff541f;
}
.bubble-postn{
  position: absolute;left:-20px;top: -10px;
}
.wrks-bx1:hover .count-buble , .wrks-bx2:hover .count-buble , .wrks-bx3:hover .count-buble{
   width: 40px;height: 40px;border-radius: 40px;background-color: #ff541f;
   transition: 0.5s;
}
.wrks-bx1:hover .bubble-postn, .wrks-bx2:hover .bubble-postn , .wrks-bx3:hover .bubble-postn {
  position: absolute;left:40%;top: -10px;
  transition: 0.8s;
}
.wrks-bx1:hover, .wrks-bx2:hover , .wrks-bx3:hover{
  scale: calc(1.15);
  transition: 0.5s;
}

.arw1 { 
  display: inline-block; 
   
} 
.bx-wrk:hover .arw1{
animation: frequentShift 0.6s infinite ease-in-out; 
}
.wav-shade{
  position: absolute;
}

@keyframes frequentShift { 
  0%, 100% { 
    transform: translateX(0); 
  } 
  50% { 
    transform: translateX(6px); 
  } 
}
/* Triggers the zoom-out fading motion on hover */
.bx-hear:hover img[alt="quotes icon"] { 
  animation: quoteZoomFade 2s  ease-in-out; 
} 

/* Keyframes for scaling up while fading out */ 
@keyframes quoteZoomFade { 
  0% { 
    scale: calc(1);
    opacity: 1; 
  } 

  100% { 
    scale: calc(1.2);
    opacity: 0.8; 
   
  } 
}

/* Base state of your image */
.img-qn {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Triggered on Box Hover */
.faq-bx:hover .img-qn {
  /* Rotates the entire image left by 45 degrees */
  transform: rotate(-360deg);
}
/* Add this class to your H2 tag in the HTML */
/* Add this class to your H2 tag in the HTML */
.bg-grey:hover .shimmer-text {
  background: linear-gradient(to right, #ffffff 20%, #ff541f 40%, #ff541f 60%, #ffffff 80%);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shineGimmick 3s linear infinite;
  transition: 1s;
 scale: calc(1.2);
}

@keyframes shineGimmick {
  to {
    background-position: 200% center;
  }
}

.more-exmple:hover .rght-arw{
  margin-left: 10px;
  transition: 0.5ms;
  scale: calc(1.3);
}
/* Base container layout */
.custom-dropdown {
  position: relative;
  width: 100%;
}

/* Reusing your exact custom styles for the main field */
.custom-dropdown .slct-field {
  border: 1px solid #e2e8f0;
  width: 100%;
  padding: 6px 10px;
  font-size: 15px !important;
  padding-top: 20px !important;
  border-radius: 8px;
  background-image: url("../images/drop-dwn.png"); /* Down Arrow */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 35px;
  cursor: pointer;
  user-select: none;
}

/* Arrow flip when dropdown is open */
.custom-dropdown.open .slct-field {
  background-image: url("../images/up-arrw.png"); 
  border: 1px solid #ff541f;
}

/* Stylized Dropdown Options List Menu */
.custom-dropdown .dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 85%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}

/* Individual list rows */
.custom-dropdown .select-opt {
  padding: 10px 15px;
  cursor: pointer;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

/* Hover over unselected items */
.custom-dropdown .select-opt:hover {
  background-color: #ff541f50;
}

/* Highlighted item with background color change */
.custom-dropdown .select-opt.active {
  background-color: #fbe8e3 !important;
  color: #ff541f !important;
  border-radius: 6px;
  font-weight: 600;
}

/* Injecting the Checkmark dynamically at the end using a clean SVG background string */
.custom-dropdown .select-opt.active::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  /* White checkmark SVG for good contrast against the blue background */
  background-image: url("../images/check.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.explr-bx {
  border: 1px solid #ff541f;
  border-radius: 28px;
  background: linear-gradient(to top right, #ffefe4 10%, #fffdf9 100%);
  box-shadow: 0px 12px 24px 0px #4a2e1b08;
}
.voice-hdng{
  border: 1px solid #ffe0d3;border-radius: 30px;
}
.icn-abtbx{
  width: 50px;height: 50px;background-color: #ffefea;
}
.mission-bx{
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid #f3f1f1;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  height: 100%;
}
.specs-hdng{
  color: #1d161d;
}
.sml-titlebg{
  background-color:#ffefea ;
  border-radius: 30%;
  padding: 10px;
}



.icon-container,
.search-container_admin {
  position: relative;
  width: 100%;
  margin: 0px;
}

.icon-container button {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  padding-top: 12px;
  padding-left: 11px;
  border: none;
  background: none;
  color: #555;
  cursor: pointer;
}

.search-container_admin .showBtn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  padding-top: 12px;
  padding-right: 11px;
  border: none;
  background: none;
  color: #555;
  cursor: pointer;
}

.search-container_admin .lckBtn {
  position: absolute;
  top: 0;
  left: 5px;
  padding: 5px;
  padding-top: 12px;
  padding-right: 11px;
  border: none;
  background: none;
  color: #555;
  cursor: pointer;
}

.txt-fld,
.pswd-fld,
.email-fld {
  width: 100%;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 10px !important;
  box-sizing: border-box;
  color: #000000;
  font-size: 15px;
  background-color: #fafafa;
}
.prfl-fld{
  width: 100%;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 10px !important;
  box-sizing: border-box;
  color: #000000;
}

.search-container_admin {
  position: relative;
  width: 100%;
  margin: 0px;
}

.plcHldr::placeholder {

  color: #b4b4b4;
}

.plcHldr {
  padding-left: 32px !important;
}
.plchldr-captcha{
  color: #b4b4b4;
}
.plcHldr1,.plcHldr2{
   padding-left: 15px !important;
   font-size: 14px;
}
.plcHldr1::placeholder {
  color: #0f172a;
}
.plcHldr2::placeholder{
  color: #1b4c06;
  font-weight: 600;
}
.plcHldr3::placeholder{
  color: #94a3b8;
}
/* eye icon disabling :chrome*/
input[type="password"] {
  /*  :chrome*/
  -webkit-text-security: disc;
  -webkit-appearance: none;
  appearance: none;
}

input[type="password"]::-ms-reveal {
  /* :explorer and edge*/
  display: none;
}
  .main-bg {
  background-color: #0f172a !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.nav-width{
  width: 100%;
}

.hlght{
  background-color: #ff541f15;
  border-radius: 12px;
}
.mnuFnt1,.content-txt{
  color: #475569 !important;
}
.nav-shadow{
  box-shadow: 0 8px 6px rgba(0,0,0,0.07);
}
.trend-value{
  color: #10b981;
  font-weight: 600;
  font-size: 14px !important;
}
.trend-value1{
  color: #ff541f;
  font-weight: 600;
  font-size: 14px !important;
}
.trend-txt{
  color: #94a3b8;
  font-size: 14px !important;
}
.actv-bg{
  background-color: #e6fbf3;
  border-radius: 30px;
  color: #10b981;
  font-weight: 700;
  font-size: 14px;
}
.upgrd-bg{
  
  color: #ff541f;
  font-weight: 700;
  font-size: 14px;
}
.dash-bx{
  border: 1px solid #f1f5f9;border-radius: 16px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background-color: #ffffff;
}
.mnu-txt{
  font-weight: 600;
  color: #94a3b8;
}
.strog-pswd{
  background-color: #10b981;padding: 5px;width: 100%;border-radius: 30px;
}
.weak-pswd{
  background-color: #e2e8f0;padding: 5px;width: 100%;border-radius: 30px;
}
.hpy-span{
  font-size: 12px;
  border: 1px solid #ff541f;
  padding: 5px 10px;
  color: #ff541f;
  font-weight: 700;
  border-radius: 30px;
  background-color: #ffedd5;
}
.nactv-spn{
  font-size: 12px;
  border: 1px solid #e2e8f0;
  padding: 5px 10px;
  color: #334155;
  font-weight: 700;
  border-radius: 30px;
}
.audio-bx{
  border: 1px solid #e2e8f0;border-radius: 14px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10);
}
.audio-hdng{
  color: #111827;
}
.pagination,.pagination1 {
  list-style: none;
  padding: 0;
  display: flex;
}

.pagination li ,.pagination1 li {
  margin: 0 2px;

}

.pagination li a,.pagination1 li a {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.pagination li.active3 a {
  background-color: #ff541f;
  border: none;
  color: #ffffff;
  font-weight: 700;
}
.pagination1 li.active4 a {
  background-color: #ff541f40;
  border: none;
  color: #ff541f;
  font-weight: 700;
}


.pagintn {
  display: flex;
  justify-content: end;
}
.prev-btn,.nxt-btn{
  border: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 700;
  font-size: 13px;
}
#lang ,#stats{
  border: none;     
  outline: none;      
  box-shadow: none;   
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent; 
  background-image: url("../images/chevron-down.png");
  background-repeat: no-repeat;
  background-position: right 0px center; 
  padding-right: 20px; 
  cursor: pointer;
}

#lang:focus,#stats:focus {
  border: none;
  outline: none;
}

.ttl-txt{
  color: #0f172a;
}
.slct-optn{
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px !important;
  padding: 12px 10px;
}
.log-bx{
  border: 1px solid #f3f1f1;border-radius: 28px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}
.hide-sectn{
  height: 0px !important;
  opacity: 0 !important;
}
.content-bx{
border: 1px solid #e2e8f0;border-radius: 16px;background-color: #ffffff;
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
}
.tbl-brdr {
  border-bottom: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
}
.plcHldr4::placeholder{
  color: #000000;
}
.plcHldr4{
  padding-left: 32px !important;
}
.txtScndry{
  color: #64748b;
}
.Q-txt{
  background-color: #fef3c7;
  padding: 5px 10px;
  color: #f59e0b;
  border-radius: 30px;
}
.rjctd-txt{
  background-color: #fec5bf;
  padding: 5px 10px;
  color: #aa1c0d;
  border-radius: 30px;
}
.rejctn-bx{
  border: 1px solid #e8e8e8;border-radius: 8px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
}

 .modal1{
    position:fixed;
    top:0;
    left:0;
    z-index:1060;
    display:none;
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    outline:0;
    background-color:#d9d9d940;
  }
.modal-content-dash1{
    z-index: 99 !important; 
    background-color: #ffffff;
    margin: 12% 35%;  
    width: 35%; 
    border-radius: 20px;
    box-shadow: 0px 2px 10px 3px rgba(0,0,0,.15);
  }

  .red-dot{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #ef4444;
  }
  .plchldr-txtarea::placeholder{
    color: #0f172a !important;
  }
  .plchldr-transltd::placeholder{
    color: #ff541f !important;
    font-weight: 500;
  }
  /* Container Box */
.script-input-container {
  max-width: 600px;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Header Text */
.input-label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 16px;
}

/* Positioning context for the counter */
.textarea-wrapper {
  position: relative;
  margin-bottom: 16px;
}

/* Styled Text Area */
.plchldr-txtarea,.plchldr-transltd {
  width: 100%;
  height: 155px;
  background-color: #f8fafc;
  border: none;
  border-radius: 12px;
  padding: 16px 16px 40px 16px; /* Extra bottom padding so text doesn't overlap counter */
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.plchldr-txtarea:focus {
  border-color: #ff4500; /* Subtle accent highlight when active */
}

/* Absolute Floating Counter */
.char-counter {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 12px;
  color: #94a3b8;
  pointer-events: none; /* Allows user clicks to pass through to textarea */
  background-color: #f8fafc;
}
.char-counter1 {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 12px;
  color: #94a3b8;
  pointer-events: none; /* Allows user clicks to pass through to textarea */
  background-color: #f8fafc;
}

.slider-container {
      width: 100%;
      max-width: 400px;
     
    }

    /* Core range slider styling */
    .clean-range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 5px; /* Slider track thickness */
      border-radius: 5px;
      outline: none;
      cursor: pointer;
      display: inline;
      
      /* Uses a CSS gradient to paint the covered area up to the value percentage */
      background: linear-gradient(
        to right, 
        #ff541f 0%, 
        #ff541f var(--value), 
        #e2e8f0 var(--value), 
        #e2e8f0 100%
      );
    }

    /* --- Webkit Browsers (Chrome, Safari, Edge) --- */
    /* Hides the circular bubble/knob completely */
    .clean-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 0;
      height: 0;
      border: 0;
    }

    /* --- Firefox Browsers --- */
    /* Hides the bubble/knob */
    .clean-range-slider::-moz-range-thumb {
      width: 0;
      height: 0;
      border: 0;
      background: transparent;
    }

    /* Firefox native track styling */
    .clean-range-slider::-moz-range-track {
      width: 100%;
      height: 5px;
      border-radius: 5px;
      background: #e2e8f0;
    }

    /* Firefox native covered area filler color */
    .clean-range-slider::-moz-range-progress {
      height: 5px;
      border-radius: 5px 0 0 5px;
      background-color: #ff541f; /* Special covered color */
    }
.bg-txt{
  background-color: #f8fafc;
  border-radius: 4px;
  color: #475569 !important;
  padding: 2px 3px;
}
.q-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0f172a !important;
}
.faild-bg{
  background-color: #ef444420;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px !important;
  padding: 2px 8px;
  color: #ef4444 !important;
}
.queue-bg{
  background-color: #f1f5f9;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px !important;
  padding: 2px 8px;
  color: #64748b !important;
}
.cmpltd-bg{
  background-color: #10b98120;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px !important;
  padding: 2px 8px;
  color: #10b981 !important;
}
.procsng-bg{
  background-color: #ff541f20;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px !important;
  padding: 2px 8px;
  color: #ff541f !important;
}
.spinner {
  /* Dimensions */
  width: 10px;
  height: 10px;
  
  /* Create the circle track */
  border: 1px solid #f3f3f3; /* Light gray track background */
  border-top: 1px solid #ff541f; /* Blue spinning accent indicator */
  border-radius: 50%; /* Makes the square element a perfect circle */
  
  /* Apply the animation loop */
  animation: spin 1s linear infinite;
}

/* Define the continuous 360-degree rotation */
@keyframes spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}
#file {
  /* Reset default system appearance */
  -webkit-appearance: none;
  appearance: none;
  
  /* Dimensions */
  width: 100px;
  height: 5px;
  border: none;
  display: block !important;
}

/* 1. Color for Chrome, Safari, Opera, and newer Edge */
#file::-webkit-progress-bar {
  background-color: #f3f3f3; /* Light gray background track */
  border-radius: 4px;
}
#file::-webkit-progress-value {
  background-color: #ff541f; /* Your custom #ff541f filled color */
  border-radius: 4px;
}

/* 2. Color for Firefox */
#file::-moz-progress-bar {
  background-color: #ff541f; /* Your custom #ff541f filled color */
  border-radius: 4px;
}
.q-scroll-x{
  overflow: hidden;
}
.strt-rcrdng{
  background-color: #ff541f;width: 100%;border-radius: 10px;
  box-shadow: 0px 4px 14px 0px #ff541f50 !important;
}
.stp-rcrdng{
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background-color: #ff541f;
  box-shadow: 0px 4px 14px 0px #ff541f90 !important;
}
.stp-rcrdng1{
  height: 12px;
  width: 12px;
  border-radius: 2px;
  background-color: #ff541f;
}
.transcrptn-btn{
  background-color: #ffffff;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15) !important;
    color: #475569;
    font-weight: 800;
    width: 100%;border-radius: 10px;
}
.btn-actv{
  background-color: #0f172a;width: 100%;border-radius: 10px;
  color: #ffffff;
  box-shadow: 0px 4px 14px 0px #1a1d2e20 !important;
}
.btn-actv:hover{
  background-color: #0f172a;width: 100%;border-radius: 10px;
  color: #ffffff;
  box-shadow: 0px 4px 14px 0px #1a1d2e20 !important;
}
.btn-nactv{
  width: 100%;border-radius: 10px;color: #475569;border: 1px solid #e2e8f0;
  font-weight: 600;
}
  .upload-box {
    background-color: #ffff;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    cursor: pointer;
  }
  
  .upload-box:hover {
    border-color: #666;
  }
  
  .upload-box input[type="file"] {
    display: none;
  }
  .brws-btn{
    background-color: #ff541f;border-radius: 10px;
     box-shadow: 0px 4px 14px 0px #e8613c40 !important;
  }



#file-list-display:empty + .transcription-btn {
    display: none;
}

/* 2. Show the button automatically when the file list has content */
#file-list-display:not(:empty) + .transcription-btn {
    display: block !important;
}
.lang-txt{
  font-size: 12px;
  font-weight: 500 !important;
  color: #3366b2;
  background-color: #e8f2ff;
  padding: 2px 6px;
  border-radius: 4px;
}
.upldlst-bg{
  background-color: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0;
}
.back-btn{
  padding-top: 10px;padding-bottom: 10px;
  border-radius: 10px;color: #475569;
  border: 1px solid #e2e8f0;background-color: #ffffff;
}
.hr-bg{
  background-color: #547aac;
}
.str-bg{
  color:#ff541f;
}
.rcrd-brder {
  border: 1px solid #e5e5eb;
  background-color: #f7f7fa;
  border-radius: 6px;
}
.content-brdr{
  border: 1px solid #d9d9e0;border-radius: 6px;
}
.cncl-btn{
  padding-top: 10px;padding-bottom: 10px;border-radius: 10px;color: #475569;border: 1px solid #e2e8f0;background-color: #ffffff;
}
.agnt-btn{
  background-color: #ff541f;padding-top: 10px;padding-bottom: 10px;border-radius: 10px;opacity: 0.5
}
.agnt-btn-actv{
  background-color: #ff541f;padding-top: 10px;padding-bottom: 10px;border-radius: 10px;
}
.rcrdng-btn{
  background-color: #f04736; border-radius: 6px;
}
.rcrdng-wave-outr{
  border:1px solid #e2e8f0;border-radius: 8px;
}
.rcrded-outr{
  border: 1px solid #d1e5d1;background-color: #f7faf7;border-radius: 6px;
}
.voice-outr{
  border: 1px solid #e0e0e5;border-radius: 6px;
}
.again-rcrd-txt{
  color: #f04736;text-decoration: underline;cursor: pointer;
}
.footr-bg{
  background-color: #000000;border-top-left-radius: 50px;border-top-right-radius:50px;
}
.play-btn-bg{
  width: 40px;height: 40px;background-color: #333340 !important;border-radius: 50%;cursor: pointer;
}
@media (max-width: 599px){
.logo-img{
  width: 200px;
}
.bx-outr,.arrw-outr{
  width: 100%;
}
.arrw-shift{
  rotate: calc(90deg);
}
.bx-icn1{
  width: 100%;
  border-right: none;
  border-bottom: 1px solid #cacbcb;
}
.bx-icn{
  width: 100%;
}
    .addBx{
  width: auto;
}
.brdr-rght{
  border-right: none;
}
.brdr-px{
  border-right: none;border-left: none;
}
.mic-bg{
  background-color: #ffffff;width: 45px;height: 45px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}
.wave-bx{
  width: 150px;height: auto;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  border: 2px solid #f3f1f1;
  position: absolute;right: 5%;
  font-size: 3vw;
  top: -5px;
}
.wave-lft{
right: 18%;
}
.wave-rght{
left: 18%;
}
.wave-bx1{
  width: 60%;height: auto;
  left:10px;
  
}
.wave-wdth1{
  width: 11vw;
  margin-left: -12px;
}
.wave-bx2{
  width: 60%;right:10%;
  bottom: -80px;
}
.wave-wdth2{
  width: 8vw;
 
}
.btn-wdth{
  width: 20% !important;
}
.wav-wdth{
  width: 60%;
}
.tym-wdth{
  width: 20%;
}
.mission-bx{
  height: auto;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1 !important;
  top: 0;
  left: 0;
  background-color: #0f172a;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: -25px;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
  color: white;
}
.footr-pstn{
  bottom: auto;
  position: unset;
}
.wav-shade{
  position: absolute;
  width: 200px;
}
.modal-content-dash1{
   width: 80%;
  margin: 10% auto; 
}
.modal1 {
    left:0%;
    top: 85px; 
  }
  .q-wdth{
    width: 300%;
  }
  .q-scroll-x{
    overflow-x: scroll;
  }
  .transcrptn-btn{
  font-size: 14px;
}
.play-btn-bg{
  width: 35px;height: 35px;background-color: #333340 !important;border-radius: 50%;cursor: pointer;
}
}
@media (min-width: 600px) and (max-width: 1200px){

.bx-outr,.arrw-outr{
  width: 50%;
}
.arrw-shift{
  rotate: calc(90deg);
}
.wave-lft{
right: 18%;
}
.wave-rght{
left: 18%;
}
.brdr-rght{
  border-right: none;
}
.wave-bx1{
  width: 60%;height: auto;
  left:50px;
  
}
.wave-wdth1{
  width: 11vw;
  margin-left: -12px;
}
.wave-bx2{
  width: 60%;right:10%;
  bottom: -120px;
}
.wave-wdth2{
  width: 8vw;
 
}
.btn-wdth{
  width: 13%;
}
.wav-wdth{
  width: 73%;
}
.tym-wdth{
  width: 14%;
}
.sidenav {

  width: 100% !important;
  
}
.footr-pstn{
  bottom: auto;
  position: unset;
}
.cntntBg{
  height: 1100px ;
}

.footr-pstn{
  bottom: -340px;
  position: absolute;
}
.col-dash-width1{
  width: 32%;
}
.col-dash-width2{
  width: 68%;
}
.logo-img{
  width: 200px;
}
.modal-content-dash1{

  width: 60%; 
  margin: 30% auto; 
  
  }
 .modal1 {
    left:0%;
    top: 85px; 
  }
   .q-wdth{
    width: 150%;
  }
  .q-scroll-x{
    overflow-x: scroll;
  }
}
@media (min-width: 1200px){
.sidenav {

  width: 100% !important;
  
}
.cntntBg{
  height: 700px ;
}
.footr-pstn{
  bottom: -340px;
  position: absolute;
}
.col-dash-width1{
  width: 18%;
}
.col-dash-width2{
  width: 82%;
}
.pg-mrgbtm{
  padding-bottom: 100px;
}
 
}