/* Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* Black background for the loader */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  opacity: 1; /* Fully visible initially */
  visibility: visible; /* Ensures it's displayed initially */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth transition */
}

.loader-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Background Animation */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #141414, #000); /* Subtle gradient background */
  z-index: 1;
}

/* Logo Name Animation */
.logo-name {
  width: 300px;
  height: auto;
  animation: fadeSlideIn 2s ease-in-out; /* Plays once during load */
}

/* Logo Name Keyframes */
@keyframes fadeSlideIn {
  0% {
    opacity: 0.5;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Loading Bar */
.loading-bar {
  margin: 20px auto 0;
  width: 150px;
  height: 5px;
  background: #f7b500;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}

.loading-bar::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 100%;
  background: #fff;
  animation: loadingSlide 1.5s infinite;
}

@keyframes loadingSlide {
  0% {
    left: -50px;
  }
  50% {
    left: 75px;
  }
  100% {
    left: 150px;
  }
}

/* Smooth Zoom-Forward and Fade-out Effect */
.fade-out {
  opacity: 0; /* Gradually fades out */
  visibility: hidden; /* Hides it after fading out */
  transform: scale(1.2); /* Slight zoom forward */
  transition: opacity 0.8s ease, transform 0.8s ease; /* Matches the JavaScript timing */
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.skelenton{
  animation: skelenton-loeading 1s linear infinite alternate;
}


  @font-face {
    font-family: "Anton SC"; /* Choose a name for your font */
    src: url("./Fonts/Anton_SC/AntonSC-Regular.ttf") format("woff2"), /* Path to your font file */
          url("./Fonts/AntonSC-Regular.ttf") format("woff");
    font-weight: normal; /* Optional: Define weight if you have multiple versions */
    font-style: normal;  /* Optional: Define style if you have multiple versions */
  }

  @font-face {
    font-family: "Public Sans"; /* Choose a name for your font */
    src: url("../Fonts/Public_Sans/PublicSans-VariableFont_wght.ttf") format("woff2"), /* Path to your font file */
          url("../Fonts/Public_Sans/PublicSans-Italic-VariableFont_wght.ttf") format("woff");
    font-weight: normal; /* Optional: Define weight if you have multiple versions */
    font-style: normal;  /* Optional: Define style if you have multiple versions */
  }

  @font-face {
    font-family: "Comic Sans MS"; /* Choose a name for your font */
    src: url("../Fonts/Comic\ Sans\ MS.ttf") format("woff2"), /* Path to your font file */
          url("../Fonts/Comic\ Sans\ MS.ttf") format("woff");
    font-weight: normal; /* Optional: Define weight if you have multiple versions */
    font-style: normal;  /* Optional: Define style if you have multiple versions */
  }

.skelenton-text{
  margin-bottom: .25rem;
  border-radius: .125rem;
}

.skelenton-box{
  margin-bottom: .25rem;
  border-radius: .125rem;
  margin: 0 4% .5em 4%;
  text-decoration: none;
  display: inline-block;
  min-width: 6em;
  visibility: hidden;
}

/* .skelenton-text:last-child{
  margin-bottom: 0;
  width: 80%;  
} */

@keyframes skelenton-loeading {
  0% {
    background-color: hsl(190.91deg 64.71% 3.33% / 70.9%);
  }

  100% {
    background-color: hsla(200, 23%, 10%, 0.452);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('http://fonts.googleapis.com/css?family=source+sans+pro:400');
  @media screen and (max-width: 840px) and (min-width: 481px) and (orientation: landscape){
  body, html {
      font-size: 1.2vw;
  }}
  head {
      display: none;
  }
  @media screen and (max-width: 840px) and (min-width: 481px) and (orientation: landscape){
    body, html {
        font-size: 1.2vw;
    }}
    @media screen and (max-aspect-ratio: 4/3) and (max-width: 840px) and (min-width: 481px){
    body, html {
        font-size: 1vw;
    }}
  @font-face {
    font-family: nf-icon;
    src: url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-88.eot);
    src: url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-88.eot?#iefix) format('embedded-opentype'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-88.woff) format('woff'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-88.ttf) format('truetype'), url(https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-88.svg#nf-icon-v1-88) format('svg');
    font-weight: 400;
    font-style: normal
  }

  @media (min-width: 768px) {
    .hide-on-large-screens {
      display: none;
    }
  }
  
  body{
      margin: 0;
      font-family: Arial, sans-serif;
      background: url('./Login-Bck.png') no-repeat;
      background-size: cover, cover;
      background-position: center;
      background-blend-mode: overlay, normal;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Arial', 'Helvetica', sans-serif;
      font-size: 14px;
      line-height: 1.2;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
      -webkit-touch-callout: none;
  -khtml-user-select: none;
  -o-user-select: none;
  image-rendering: -webkit-optimize-contrast;
  }

  
/* iPhone-specific styles */
@media only screen and (max-device-width: 812px) and (-webkit-max-device-pixel-ratio: 3) {
  #iphone-section {
    display: block;
  }
}

/* Styles for all other devices */
@media not screen and (max-device-width: 812px) and (-webkit-max-device-pixel-ratio: 3) {
  #iphone-section {
    display: none;
}
}

  nav
  {
    position: fixed;
    top: 0%;
    z-index: 20;
    width: 100%;
    border-radius: 0;
    filter: blur(-11px);
    background: linear-gradient(180deg, rgb(0 0 0 / 75%) 10%, transparent);
    height: 50px;
    opacity: 8;
  }
  
  
  /* this is for the scroll hover change color */
  
  
  
  /*Apply styles after scroll*/
  .scrolling-active{
    background-color: rgb(0, 0, 0);
    box-shadow: 0 3px 1rem rgba(0,0,0,.1);
  }
  
  .scrolling-active nav{
    background-color: #000000;
  }
  
  .scrolling-active nav a{
    color: #fffffff7;
  }
  
  /* scrole change color ending */
  
  
  .menu {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    left: 0%;
    z-index: 20;
    opacity: 100;
    image-rendering: -webkit-optimize-contrast;
    filter: blur(-5.5px);
    margin-top: 8.5px;
    overflow: visible;
  }
  .menu ul
  {
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 1.2vw;
    font-family: Comic Sans MS;
    justify-content: space-evenly;
    width: 35%;
    position: relative;
    left: 0;
    float: right;
    list-style: none;
    z-index: 2;
    cursor: default;
  }

  @media screen and (max-width: 1024px) {
    .menu ul {
    font-size: 2vw;
    width: 55%;
    }
  }
  @media screen and (max-width: 820px) {
    .menu ul {
    font-size: 2.5vw;
    width: 60%;
    }
  }
  @media screen and (max-width: 769px) {
    .menu ul {
    font-size: 2.5vw;
    width: 60%;
    }
  }
  @media screen and (max-width: 505px) {
    .menu ul {
      font-size: 2.5vw;
      width: 65%;
      font-weight: bolder;
      letter-spacing: 2px;
    }
  }


  .menu ul li
  {
    list-style: none;
  }
  .menu ul li,
  .menu ul li a
  {
    color: #19bba0;
    line-height: 40px;
    text-decoration: none;
    font-family: Comic Sans MS;
  }

  @media screen and (max-width: 780px){
    .menu ul li,
    .menu ul li a {
      font-family: "Comic Sans MS", sans-serif;
      cursor: default;
    }
    }
  @media screen and (max-width: 500px){
    .menu ul li,
    .menu ul li a {
      font-family: "Comic Sans MS", sans-serif;
      cursor: default;
    }
    }
  
  .menu ul li span
  {
    color: #19bba0;
    line-height: 40px;
    text-decoration: none;
    font-family: Cushing Hv BT;
  }
  
  a:hover {
    color: #19bba0;
  }
  
  .menu ul li,
  .menu ul li a:hover {
    color: #0dc167;
  }
  
  .menu ul li,
  .menu ul li span:hover {
    color: #19bba0;
  }
  
  
  .menu ul li a.menu-item {
    transform: scale(1);
    transition: 2s;
    display: block;
  }

  @media screen and (max-width: 780px){
    .menu ul li a.menu-item {
      transform: scale(1);
      transition: 2s;
      display: block;
      cursor: default;
    }
    }
  @media screen and (max-width: 500px){
    .menu ul li a.menu-item {
      transform: scale(1);
      transition: 2s;
      display: block;
      cursor: default;
    }
    }
  
  .menu ul li span.menu-item
  {
    transform: scale(1);
    transition: 2s;
    display: block;
  }
  
  
  .menu ul li span.menu-item
  {
    transform: scale(1);
    transition: 2s;
    display: block;
  }
  
  .menu p.hide-item
  {
    transform: scale(0);
  }

  /*  */
  .menu p:nth-child(1) a.logo-word
  {
    transition-delay: 1ms;
  }

  .menu p:nth-child(1) a.logo-word
  {
    transition-delay: 0.1ms;
  }

  /*  */
  .menu p a.logo-word.hide-item
  {
    transform: scale(0);
  }
  .menu ul li a.menu-item.hide-item
  {
    transform: scale(0);
  }
  .menu ul li:nth-child(2) a.menu-item
  {
    transition-delay: 0.7ms;
  }
  
  .menu ul li:nth-child(3) a.menu-item
  {
    transition-delay: 0.6ms;
  }

  .menu ul li:nth-child(4) a.menu-item
  {
    transition-delay: 0.5ms;
  }
  
  .menu ul li:nth-child(5) a.menu-item
  {
    transition-delay: 0.4ms;
  }
  
  .menu ul li:nth-child(6) a.menu-item
  {
    transition-delay: 0.3ms;
  }
  
  .menu ul li:nth-child(7) a.menu-item
  {
    transition-delay: 0.2ms;
  }
  
  .menu ul li:nth-child(8) span.menu-item
  {
    transition-delay: 0.1ms;
  }



  
  
  .menu ul li:nth-child(2) a.menu-item
  {
    transition-delay: 0.1ms;
  }
  
  .menu ul li:nth-child(3) a.menu-item
  {
    transition-delay: 0.2ms;
  }

  .menu ul li:nth-child(4) a.menu-item
  {
    transition-delay: 0.3ms;
  }
  
  .menu ul li:nth-child(5) a.menu-item
  {
    transition-delay: 0.4ms;
  }
  
  .menu ul li:nth-child(6) a.menu-item
  {
    transition-delay: 0.5ms;
  }
  
  .menu ul li:nth-child(7) a.menu-item
  {
    transition-delay: 0.6ms;
  }
  
  .menu ul li:nth-child(8) span.menu-item
  {
    transition-delay: 0.7ms;
  }

  #search{
    cursor: pointer;
  }

  @media screen and (max-width: 769px){
    #search{
      cursor: default;
    }
    }
    @media screen and (max-width: 505px){
      #search{
        cursor: default;
      }
    }
  
  .search-form 
  {
    position: absolute;
    top: 3px;
    transform: translateX(0);
    width: 100%;
    left: 50%;
    height: 35px;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }
  
  .search-form.activa
  {
    opacity: 1;
    top: 0.2vh;
    visibility: visible;
    z-index: 2;
    transition-delay: 0.9s;
    transform: translateX(-50%);
  }
  .search-form input
  {
    width: 80%;
    height: 35px;
    background: rgba(0, 0, 0, 0);
    color: #19bba0;
    border: none;
    outline: none;
    margin-top: 0;
    font-size: 16px;
    pointer-events: visible;
  }
  .search-form input::placeholder
  {
    color: #19bba0;
    top: 15px;
  }
  .search-form:before
  {
    content: '\f002';
    position: absolute;
    top: 12px;
    left: -26px;
    font-size: 18px;
    color: #19bba0;
    font-family: fontAwesome;
  }

/* Drop Down List */

.search-form .search_box1 {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #04313a;
  justify-content: center;
}

.search-form .search_box1 .search_box2 {
  border-radius: 10px;
  width: 100%;
  border-radius: 3px;
  height: 100vh;
  padding: 0px 7px 0px 7px;
  overflow-y: scroll;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer/Edge */
}

/* Hide scrollbar for WebKit browsers */
.search-form .search_box1 .search_box2::-webkit-scrollbar {
  display: none;
}

.search-form .search_box1 .search_box2 .top_box {
  height: 60px;
  border-radius: 3px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.search-form .search_box1 .search_box2 .header_box {
  height: 200px;
  border-radius: 3px;
  background-color: #333;
  margin: 3vh 0px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-form .search_box1 .search_box2 .header_box p {
  font-size: 40px;
  font-weight: bold;
  color: white;
}

.search-form .search_box1 .search_box2 .body_box {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
  font-size: 18px;
  margin-bottom: 45px;
}

.search-form .search_box1 .search_box2 #root_box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

.search-form .search_box1 .search_box2 .box_box {
  margin: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #00000000;
  background-color: #0e2f3d;
  border-radius: 5px;
  width: 100%;
  height: auto;
  z-index: 2;
}


/* Media Query for smaller screens */
@media screen and (max-width: 600px) {
  .search-form .search_box1 .search_box2 #root_box {
      grid-template-columns: initial;
  }
}


.search-form .search_box1 .search_box2 .img-box_box {
  width: 100%;
  height: 100%;
  align-items: center;
  z-index: 2;
  border-radius: 5px 5px 0 0;
  justify-content: center;
}
.search-form .search_box1 .search_box2 .images_box {
  max-width: 100%;
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  object-position: center;
}
.search-form .search_box1 .search_box2 .bottom_box {
  margin-top: 0px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  height: 100%;
  border-radius: 0 0 5px 5px;
  background: #0e2f3d;
}
.search-form .search_box1 .search_box2 p {
  padding: 0px;
  font-size: 0.9vw;
  font-family: monospace;
  color: #ffffff;
  font-weight: 600;
  margin: 5px 0px 5px 0px
}

@media screen and (min-width: 890px) {
  .search-form .search_box1 .search_box2 p {
    line-height: 2;
    font-size: 1.5vw;
  }
}
@media screen and (min-width: 1200px) {
  .search-form .search_box1 .search_box2 p {
    line-height: 2.5;
    font-size: 1vw;
  }
}

@media screen and (max-width: 769px){
.search-form .search_box1 .search_box2 p {
  line-height: 2.5;
  font-size: 1.8vw;
  }
}
@media screen and (max-width: 505px){
.search-form .search_box1 .search_box2 p {
  line-height: 2.5;
  font-size: 3.5vw;
  }
}


.search-form .search_box1 .search_box2 a {
  width: 30%;
  border: none;
  border-radius: 10px;
  background-color: aliceblue;
  margin: 5px 0px 5px 0px;
}

.search-form .search_box1 .search_box2 a .Play_box {
  width: 100%;
  height: 100%;
  position: relative;
  border: none;
  border-radius: 10px;
  background-color: aliceblue;
  padding: 0.3vw 0.3vw;
  cursor: pointer;
  color: black;
  font-size: 1.5vw;
  font-family: cursive;
  font-weight: 550;
  line-height: 4vw;
  margin: 0px 0px 0px 0px;
}


@media screen and (min-width: 890px) {
.search-form .search_box1 .search_box2 a .Play_box {
    line-height: 2;
    font-size: 1.5vw;
    font-family: "Comic Sans MS", sans-serif;
  }
}
@media screen and (min-width: 1200px) {
.search-form .search_box1 .search_box2 a .Play_box {
    line-height: 1.5;
    font-size: 1vw;
    font-family: "Comic Sans MS", sans-serif;
  }
}

@media screen and (max-width: 769px){
.search-form .search_box1 .search_box2 a .Play_box {
  line-height: 2.5;
  font-size: 1.5vw;
  font-family: "Comic Sans MS", sans-serif;
  cursor: default;
  }
}
@media screen and (max-width: 505px){
.search-form .search_box1 .search_box2 a .Play_box {
  line-height: 2.5;
  font-size: 3.5vw;
  font-family: "Comic Sans MS", sans-serif;
  cursor: default;
  }
}


.search-form .search_box1 .search_box2 a:hover {
  background-color: #fb9905;
  border: none;
  border-radius: 10px;
}

.search-form .search_box1 .search_box2 a .Play_box:hover {
  background-color: #19bba0;
  width: 100%;
  height: 100%;
  position: relative;
  border: none;
  border-radius: 10px;
  padding: 0.3vw 0.3vw;
  cursor: pointer;
  color: black;
  font-size: 0.8vw;
  font-weight: 550;
  margin: 0px 0px 0px 0px;
}

@media screen and (min-width: 890px) {
.search-form .search_box1 .search_box2 a .Play_box:hover {
    line-height: 2;
    font-size: 1.5vw;
  }
}
@media screen and (min-width: 1200px) {
.search-form .search_box1 .search_box2 a .Play_box:hover {
    line-height: 1.5;
    font-size: 1vw;
  }
}

@media screen and (max-width: 769px){
.search-form .search_box1 .search_box2 a .Play_box:hover {
  line-height: 2.5;
  font-size: 1.5vw;
  cursor: default;
  }
}
@media screen and (max-width: 505px){
.search-form .search_box1 .search_box2 a .Play_box:hover {
  line-height: 2.5;
  font-size: 3.5vw;
  cursor: default;
  }
}


.search-form .search_box1::-webkit-scrollbar {
  display: none;
}


/* nav .search-form .search_box2 a{
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 50px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  transition: .3s linear;
} */

/* nav .search-form .search_box2 a:hover{
  background: rgb(184, 184, 184, .6);
}

nav .search-form .search_box2 a img{
  width: 30px;
  height: 45px;
  border-radius: 5px;
  margin: 0px 5px;
}

nav .search-form .search_box2 a .content2 {
  color: #fff;
}

nav .search-form .search_box2 a .content2 h6 {
  font-size: 13px;
}

nav .search-form .search_box2 a .content2 p {
  color: rgb(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 500;
  bottom: 25px;
  position: relative;
}  */

/* Drop Down List */


/*  */



/*  */

.close
{
  position: absolute;
  left: 94%;
  top: 0.4vh;
  height: 28px;
  background: #fff0;
  color: #19bba0;
  line-height: 35px;
  font-size: 20px;
  text-align: center;
  width: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 1024px) {
  .close {
    font-size: 2vw;
    }
}
@media screen and (max-width: 820px) {
  .close {
    font-size: 2.5vw;
    }
  }
  @media screen and (max-width: 769px) {
    .close {
      font-size: 2.5vw;
      }
  }
@media screen and (max-width: 505px) {
  .close {
    font-size: 2.5;
  }
}

.close.activa{
  opacity: 1;
  visibility: visible;
  z-index: 2;
  left: 91.8%;
  cursor: pointer;
  line-height: 50px;
  text-decoration: none;
  font-family: Comic Sans MS;
  z-index: 20;
}


@media screen and (max-width: 1024px) {
  .close.activa {
    font-size: 2.3vw;
    cursor: pointer;
    left: 87.8%;
    }
}

@media screen and (max-width: 820px) {
.close.activa {
  font-size: 2.8vw;
  left: 87%;
  }
}
@media screen and (max-width: 769px) {
.close.activa {
  font-size: 2.8vw;
  cursor: default;
  left: 87%;
    }
}
@media screen and (max-width: 505px) {
.close.activa {
  font-size: 2.8vw;
  cursor: default;
  left: 86%;
}
}

  
nav .Plogo-word {
  margin: 0;
  padding: 0;
}
nav .logo-word {
  position: absolute;
  left: 3vh;
  bottom: 0%;
  opacity: 8;
  z-index: 20;
  margin: 12px;
  padding: 0;
  font-size: 1.3vw;
  font-family: 'Comic Sans MS', 'Arial', 'Helvetica', sans-serif;
  color: #19bba0;
  font-weight: 600;
  text-decoration: none;
}

@media screen and (max-width: 1024px) {
  nav .logo-word {
    font-size: 2vw;
    display: flex;
    margin: 7px;
    padding: 0;
    font-family: 'Comic Sans MS', 'Arial', 'Helvetica', sans-serif;
  }
}
@media screen and (max-width: 820px) {
  nav .logo-word {
    font-size: 2vw;
    font-family: 'Comic Sans MS', 'Arial', 'Helvetica', sans-serif;
    display: flex;
    margin: 12px;
    padding: 0;
    letter-spacing: 1.5px;
    cursor: default;
  }
}

@media screen and (max-width: 769px) {
  nav .logo-word {
    font-size: 2.5vw;
    font-family: 'Comic Sans MS', 'Arial', 'Helvetica', sans-serif;
    display: flex;
    margin: 12px;
    padding: 0;
    letter-spacing: 1.5px;
    cursor: default;
  }
}
@media screen and (max-width: 505px) {
  nav .logo-word {
    left: 0vh;
    font-size: 2.9vw;
    letter-spacing: 1.5px;
    font-weight: 600;
    font-family: 'Comic Sans MS', 'Arial', 'Helvetica', sans-serif;
    cursor: default;
  }
}
  
  .angeelBACK img {
    position: absolute;
    left: 34%;
    transform: translate(-50%, 20%);
    opacity: 8;
    filter: blur(-100px);
    max-width: calc(70%);
    min-height: calc(93%);
    height: 90%;
    width: 93%;
    image-rendering: -webkit-optimize-contrast;
    z-index: 15;
    top: -5vh;
    }
  
    .angeelBACK:before {
      content: '';
      position: absolute;
      opacity: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, #000000e8 98%, transparent);
      transform: translate(-30%, 20%);
      opacity: 8;
      filter: blur(-100px);
      max-width: calc(99%);
      min-height: calc(93%);
      image-rendering: -webkit-optimize-contrast;
      z-index: 18;
      top: -9vh;
      }
  
  .angelSP2 {
    position: relative;
    left: 50%;
    transform: translate(-50%, 20%);
    opacity: 8;
    filter: blur(-100px);
    max-width: calc(60%);
    min-height: calc(66%);
    height: 73%;
    width: 40%;
    image-rendering: -webkit-optimize-contrast;
    z-index: 20;
    top: 28vh;
    }

.navbar .btnLogin-popup {
    width: 130px;
    height: 50px;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    color: #19bba0;
    font-weight: 500;
    transition: .5s;
}

.navbar .btnLogin-popup:hover {
    color: #19bba0;
}


/* Custom Popup Message Styles */
#customPopup {
  position: fixed;
  top: 80px;                /* You can adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  z-index: 10000;
  display: none;            /* Hidden by default */
  opacity: 0.95;
  width: 200px;
  height: 60px;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Variations for different message types */
#customPopup.error {
  background-color: #ffdddd;
  color: #a94442;
  border: 1px solid #a94442;
}

#customPopup.success {
  background-color: #ddffdd;
  color: #3c763d;
  border: 1px solid #3c763d;
}

#customPopup.info {
  background-color: #ddeeff;
  color: #31708f;
  border: 1px solid #31708f;
}

/* Second zs-sub-mainue */
.Zs-sub-menu-wrap {
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  z-index: 999;
}

.Zs-sub-menu-wrap.open-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
}

.Zs-sub-menu {
  background: #fff;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
}

/* Second zs-sub-mainue end  */


.user-info {
  display: flex;
  align-items: center;
}

.user-info h3 {
  font-weight: 500;
  color: #04313a;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info img {
  width: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

i#editProfilePicBtn {
  cursor: pointer;
  color: #04313a;
  font-size: 13px;
  margin-right: 5px;
}

i#editProfilePicBtn:active {
transform: scale(0.7)
}

@media screen and (max-width: 769px) {
  i#editProfilePicBtn {
    cursor: default;
  }
}

.sub-menu hr {
  border: 0;
  height: 1px;
  width: 100%;
  background: #ccc;
  margin: 15px 0 10px;
}

.sub-menu-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #000000;
  margin: 9px 0;
}

@media screen and (max-width: 769px) {
  .sub-menu-link {
    cursor: default;
  }
}

.sub-menu-link:hover {
  color: #000000;
}

.sub-menu-link:active {
  color: #525252;
}

@media screen and (max-width: 769px) {
  .sub-menu-link:hover, .sub-menu-link:active {
    cursor: default;
  }
}

.sub-menu-link p {
  width: 100%;
  font-size: 13px;
}

.sub-menu-link i {
  font-size: 20px;
  padding: 8px;
  margin-right: 15px;
}

.sub-menu-link span {
  font-size: 20px;
  transition: transform 0.5s;
}

.sub-menu-link:hover span {
  transform: translate(4px);
}

.sub-menu-link:hover p {
  font-weight: 600;
}

/* SUB-MENU END */

/* =========================================
   ZionSpeaks Auth (Login / Register / Reset)
   Dark-glass, high-contrast, responsive
   ========================================= */

/* --------- Theme tokens --------- */
:root{
  --zs-bg-glass: linear-gradient(180deg, rgba(9,23,31,.86), rgba(9,23,31,.78));
  --zs-stroke: rgba(255,255,255,.10);
  --zs-ink: #e9f3f6;           /* primary text on dark */
  --zs-ink-dim: #b9d2da;       /* secondary text */
  --zs-ink-muted: #8fb0bb;     /* helper */
  --zs-ink-strong: #ffffff;    /* headings/labels when active */
  --zs-brand: #19bba0;         /* mint/teal */
  --zs-accent: #86ffe7;        /* light mint accent */
  --zs-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* --- Wrapper (modal) --- */
.wrapper{
  position: fixed;
  inset: 6vh 4vw;                 /* breathing room around panel */
  max-width: 980px;
  max-height: calc(100vh - 12vh);
  margin: auto;
  background: #00000087;
  margin-top: 30px;
  border: 1px solid var(--zs-stroke);
  border-radius: 20px;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--zs-shadow);
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;               /* panels scroll internally */
  transition: transform .3s ease, opacity .3s ease;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
@media (max-width: 680px){
  .wrapper{ inset: 4vh 3vw; border-radius: 16px; }
}
.wrapper:not(.active-popup){
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
}

/* Compact mode (Reset Password) */
.wrapper.compact{ max-width: 520px; }

/* Slide between login <-> register */
.wrapper.active{ height: auto; }

/* --- Panel (scrollable content) --- */
.wrapper .form-box{
  width: 100%;
  min-width: 320px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 28px 34px 30px;
  color: var(--zs-ink);
}

/* Scrollbar polish */
.wrapper .form-box::-webkit-scrollbar{ width: 8px; }
.wrapper .form-box::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}
.wrapper .form-box::-webkit-scrollbar-track{ background: transparent; }

/* Login panel animation */
.wrapper .form-box.login{
  transition: transform .18s ease;
  transform: translateX(0);
}
.wrapper.active .form-box.login{
  transition: none;
  transform: translateX(-120%);
}

/* Register panel animation */
.wrapper .form-box.register{
  position: absolute;
  inset: 0;
  padding: 32px 40px;
  transition: none;
  transform: translateX(120%);
}
.wrapper.active .form-box.register{
  transition: transform .18s ease;
  transform: translateX(0);
}

/* Close button */
.wrapper .icon-close{
  position: absolute; top: 0; right: 0;
  width: 46px; height: 46px;
  background: rgba(22,41,56,.9);
  font-size: 2em; color: #fff;
  display: flex; justify-content: center; align-items: center;
  border-bottom-left-radius: 18px;
  cursor: pointer; z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* --- Typography / headings --- */
.form-box h2{
  font-size: 1.9rem;
  color: var(--zs-ink-strong);
  text-align: center;
  letter-spacing: .3px;
  line-height: 1.2;
  margin: 6px 0 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* --- Fields: dark glass inputs with floating labels --- */
.input-box{
  position: relative;
  width: 100%;
  height: 56px;
  margin: 18px 0;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--zs-stroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.input-box input,
.input-box textarea{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none; outline: none;
  font-size: 0.7rem;
  color: var(--zs-ink);
  font-weight: 600;
  padding: 18px 40px 0 14px;           /* room for label + icon */
  caret-color: var(--zs-accent);
}

.input-box .icon{
  position: absolute; right: 10px; top: 0;
  font-size: 1.2em; color: var(--zs-ink-muted);
  line-height: 56px;
  cursor: help;
  outline: none;
}

/* Floating label */
.input-box label{
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  color: var(--zs-ink-muted);
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  border-radius: 4px;
  transition: top .25s ease, font-size .25s ease, color .25s ease, transform .25s ease;
}

/* .input-box input:focus ~ label,
.input-box input:not(:placeholder-shown) ~ label{
  top: 10px;
  font-size: .78rem;
  color: var(--zs-accent);
  text-shadow: 0 0 0 transparent;
} */

/* Inputs/Textareas: float when focused OR when they have content */
.input-box input:focus ~ label,
.input-box input:not(:placeholder-shown) ~ label,
.input-box.textarea textarea:focus ~ label,
.input-box.textarea textarea:not(:placeholder-shown) ~ label{
  top: 10px;
  font-size: .78rem;
  color: var(--zs-accent);
}


/* --- Selects: float the label using a helper class from JS --- */
.input-box select{
  width: 100%;
  height: 56px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--zs-stroke);
  color: var(--zs-ink);
  font-weight: 700;
  padding: 0 14px;
  appearance: none;
  /* keep your chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--zs-accent) 50%),
    linear-gradient(135deg, var(--zs-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1.05em), calc(100% - 13px) calc(1.05em);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}


.input-box select:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(134,255,231,.22);
  border-color: rgba(134,255,231,.55);
}

/* Float the label when the select has a chosen value (set by JS) or on focus */
.input-box select:focus ~ label,
.input-box.has-value label{
  top: 10px;
  font-size: .78rem;
  color: var(--zs-accent);
}

/* --- Dropdown menu readability (native options) --- */
select,
select option{
  background-color: rgba(10,24,32,.98); /* dark dropdown panel */
  color: var(--zs-ink);                  /* light text */
}


/* Edge cases: some browsers tint <option> differently on hover/selected */
select option:checked,
select option:focus,
select option:hover{
  background-color: rgba(25,187,160,.20);
  color: var(--zs-ink);
}


/* Autofill (Chrome) readability on dark inputs */
input:-webkit-autofill,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--zs-ink);
  transition: background-color 9999s ease-in-out 0s; /* keep bg transparent */
}


/* Slightly smoother label shift for very short inputs (optional) */
.input-box input,
.input-box textarea{
  transition: color .15s ease;
}


/* Focus ring */
.input-box:focus-within{
  border-color: rgba(134,255,231,.65);
  box-shadow:
    0 0 0 2px rgba(25,187,160,.25),
    inset 0 0 0 1px rgba(134,255,231,.2);
}

/* Textarea variant */
.input-box.textarea{ height: auto; padding-top: 6px; }
.input-box.textarea textarea{
  min-height: 122px;
  padding: 26px 14px 12px 14px;
  resize: vertical;
}

@media (max-width: 560px){
.input-box.textarea textarea{
  padding: 45px 14px 12px 14px;
  }
}
.input-box.textarea label{ top: 18px; transform: none; }

/* Grid helpers */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px){ .grid-2{ grid-template-columns: 1fr; } }

/* Radios / chips / tags */
.input-row{ margin: 18px 0; }
.zs-label{ color: var(--zs-ink); font-size: .95rem; font-weight: 700; display: block; margin-bottom: 8px; }
.zs-radio-group{ display: flex; flex-wrap: wrap; gap: 14px; }
.zs-radio{ color: var(--zs-ink-dim); font-weight: 700; }
.zs-radio input{ margin-right: 8px; accent-color: var(--zs-brand); }

.zs-fieldset{
  border: 1px solid var(--zs-stroke);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  background: rgba(255,255,255,.05);
}
.zs-fieldset legend{ color: var(--zs-ink); font-weight: 800; padding: 0 6px; }

.zs-chip-group{ display: flex; flex-wrap: wrap; gap: 10px; }
.zs-chip{
  border: 1px solid rgba(134,255,231,.35);
  color: var(--zs-accent);
  padding: 6px 10px; border-radius: 999px; font-weight: 700;
  background: rgba(25,187,160,.10);
}
.zs-chip input{ margin-right: 8px; accent-color: var(--zs-brand); }

.zs-tag-input{
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--zs-stroke);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--zs-ink); font-weight: 700;
}

/* Small section divider (Login member profile) */
.zs-divider{
  margin: 8px 0 4px;
  font-weight: 900;
  color: var(--zs-ink);
  font-size: .95rem;
  letter-spacing: .02em;
  opacity: .95;
  display: none;
}

/* Toggle row */
.zs-toggle{ display:flex; 
  align-items:center; 
  gap:10px; 
  margin:4px 0 10px; 
  color: var(--zs-ink); 
  font-weight:800;
  display: none; 
}
.zs-toggle input{ accent-color: var(--zs-brand); }

/* Links / helper text */
.remember-forgot,
.login-register,
#backToLoginLink{
  font-size: .92rem;
  color: var(--zs-ink-dim);
  font-weight: 600;
}
.remember-forgot{ margin: -6px 0 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.remember-forgot label input{ accent-color: var(--zs-brand); margin-right: 6px; }
.remember-forgot a,
.login-register a,
#backToLoginLink{ color: var(--zs-accent); text-decoration: none; }
.remember-forgot a:hover,
.login-register a:hover,
#backToLoginLink:hover{ text-decoration: underline; }
#backToLoginLink{ text-align: center; line-height: 3; margin: 20px 0 6px; }

/* Buttons */
.btn{
width: 100%;
    height: 48px;
    background: #162938;
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 30px;
    box-shadow: 0 12px 26px #16293894;
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter: brightness(1.03); box-shadow: 0 14px 32px #162938 }
.btn:active{ transform: translateY(1px) scale(.998); }

/* Hidden helper */
.is-hidden{ display: none; }

/* Disabled look for optional member inputs until toggled on */
#loginMemberFields input:disabled{ opacity:.65; cursor:not-allowed; }

/* Make selects look consistent on dark glass */
select{
  width: 100%;
  height: 56px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--zs-stroke);
  color: var(--zs-ink);
  font-weight: 700;
  padding: 0 14px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--zs-accent) 50%),
                    linear-gradient(135deg, var(--zs-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1.05em), calc(100% - 13px) calc(1.05em);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:focus{ outline: none; box-shadow: 0 0 0 2px rgba(134,255,231,.22); border-color: rgba(134,255,231,.55); }

/* Compact spacing for login */
.form-box.login .input-box{ margin: 16px 0 30px 0; }

/* Done: keep buttons readable on dark theme (affirmation) */



/* ZionSpeaks: tooltip bubble (non-invasive add-on) */
.zs-tip{
  position: absolute;
  right: 48px;                 /* sits to the left of the icon */
  top: 50%;
  transform: translateY(-50%) scale(.98);
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10,24,32,.96);
  color: var(--zs-ink);
  border: 1px solid rgba(134,255,231,.30);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.25;
  pointer-events: none;        /* avoid hover flicker */
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 5;
}

/* little arrow pointing to the icon */
.zs-tip::after{
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(10,24,32,.96);
  border-right: 1px solid rgba(134,255,231,.30);
  border-bottom: 1px solid rgba(134,255,231,.30);
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
}

/* visible state */
.zs-tip.is-visible{
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.input-box .icon:focus{
  box-shadow: 0 0 0 2px rgba(134,255,231,.5);
  border-radius: 6px;
}

/* Responsive: if space is tight, place the bubble below the field */
@media (max-width: 560px){
  .zs-tip{
    right: auto;
    left: 14px;
    top: 100%;
    transform: translateY(8px);
    max-width: min(88vw, 360px);
  }
  .zs-tip::after{
    right: auto;
    left: 18px;
    top: -6px;
    transform: rotate(45deg);
  }
  .zs-tip.is-visible{
    transform: translateY(6px);
  }
}


/* Eye toggle sits at the far right; shift your existing .icon slightly left only when present */
.input-box.with-toggle .icon{ right: 40px; }

/* Eye button */
.pw-toggle{
  position: absolute;
  top: 0; right: 8px;
  width: 36px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; padding: 0; margin: 0;
  cursor: pointer;
  color: var(--zs-ink-muted);
}
.pw-toggle ion-icon{ font-size: 1.2em; }
.pw-toggle:hover{ color: var(--zs-accent); }
.pw-toggle:focus{ outline: none; box-shadow: 0 0 0 2px rgba(134,255,231,.5); border-radius: 6px; }


/* ZS toast system */
.zs-toasts{
  position: fixed; right: 18px; top: 18px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999;
}
.zs-toast{
  min-width: 280px; max-width: 360px;
  background: rgba(10,24,32,.96);
  border: 1px solid var(--zs-stroke);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  color: var(--zs-ink); border-radius: 12px;
  padding: 12px 14px;
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start;
  overflow: hidden;
  animation: zsToastIn .18s ease;
  font-weight: 700;
}
.zs-toast .icon{ line-height: 1; color: var(--zs-accent); }
.zs-toast .title{ font-size: .95rem; margin:0; }
.zs-toast .desc{ font-size: .88rem; color: var(--zs-ink-dim); margin-top: 4px; }
.zs-toast .close{
  background: transparent; border: none; color: var(--zs-ink-dim); cursor: pointer; font-size: 1rem;
}
.zs-toast.success{ border-color: rgba(25,187,160,.55); }
.zs-toast.error{ border-color: rgba(255, 82, 82, .55); }
.zs-toast.info{ border-color: rgba(134,255,231,.45); }
@keyframes zsToastIn{ from{ transform: translateY(-6px); opacity: 0 } to{ transform: none; opacity: 1 } }


.field-hint{font-size:.84rem;margin-top:6px}
.field-hint.error{color:#ff8080}
.input-box input[aria-invalid="true"]{outline:2px solid #ff8080;}



/* Phone input (dial code inside the same glass box) */
.input-box .zs-phone{
  position: relative;
  height: 100%;
  display: block;           /* keep it as a single field */
}

.input-box .zs-phone input{
  width: 100%;
  height: 100%;
  /* leave right padding from your base rule; just add left space for dial */
  padding-left: 86px;       /* room for the +234 chip */
}

@media (max-width: 560px){
.for-small-phone{
  margin-top: 75px !important;
}
}


.c-code{
    left: 75px !important;
}

/* Dial chip lives INSIDE the input-box now */
.input-box .zs-dial{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  font-weight: 800;
  color: var(--zs-ink);
  pointer-events: none;     /* clicks go to the input */
}

/* Make the label float when a nested phone input is focused or has value */
.input-box:has(.zs-phone input:focus) label,
.input-box:has(.zs-phone input:not(:placeholder-shown)) label{
  top: 10px;
  font-size: .78rem;
  color: var(--zs-accent);
}


/* Info icon inside textarea boxes sits on the right like inputs */
.input-box.textarea .icon{
  position: absolute;
  right: 10px;
  top: 8px;
  line-height: 1;
  cursor: help;
  color: var(--zs-ink-muted);
}

/* Tiny character counter in the bottom-right of the textarea box */
.zs-count{
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: .78rem;
  color: var(--zs-ink-muted);
  pointer-events: none;
  user-select: none;
}





/* Brighter, more legible placeholders for tag inputs */
.zs-tag-input::placeholder { 
  color: var(--zs-ink-dim);   /* same palette as your other inputs */
  opacity: 1;                 /* Safari/Firefox need this to actually show */
  font-weight: 600;
}
.zs-tag-input::-webkit-input-placeholder { color: var(--zs-ink-dim); opacity:1; font-weight:600; }
.zs-tag-input::-moz-placeholder { color: var(--zs-ink-dim); opacity:1; font-weight:600; }
.zs-tag-input:-ms-input-placeholder { color: var(--zs-ink-dim); font-weight:600; }
.zs-tag-input:-moz-placeholder { color: var(--zs-ink-dim); opacity:1; font-weight:600; }


/* =========================================
   End of ZionSpeaks Auth Styles
   ========================================= */