.hidden {
   display: none;
}


.share_Con_C{
   position:fixed;
   z-index:999999999999999999 !important;
   top:0;
   bottom:0;right:0;left:0;background:rgba(255,255,255,0.1);
   backdrop-filter:blur(5px);
width:100%;height:100%;
display:flex;flex-direction:column;
justify-content:flex-end;align-items:center;
z-index:9999999999999999999999;
   }
   .share_Con_top{
   width:100%;height:40%;
   background: transparent;
   }
   .share-container {
   position:relative;
     width:100%;height:100%;
     bottom:0;
     background:#292929;
     border-radius:19px 19px 0 0;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding:15px;
     border:0px solid #009;
     max-width:620px;max-height:330px
   }
  
   .share-header {
     display: flex;
     align-items:space-between;
     margin-bottom:10px;
     border-bottom:0px solid #000;
     background:#333;
     position:relative;
     padding:2px;
     border-radius:13px;
     height:50px;
   }
   .share-header:after{
       content:'';
       position: absolute;
       bottom:-5px;
       width:100%;
       height:1px;
       background:#323232;
      
       
   }
   .share-header img {
     width:auto;
     height:auto;
     margin-right: 10px;
     aspect-ratio:1/1;
     border:1px solid #000;
     padding:5px;
     background:#292929;
     border-radius:13px;
     overflow:hidden;
   }
   .share-header .share_grd{
     width:90%;
    /* height:;*/
     padding:0px 0px 0px;
     align-items:center;
     display:flex;flex-direction:column;
     justify-content:center;
     align-items:start
       
   }
   .share-header h4,.share-header h5{
     margin: 0;padding:0;
     font-size: 15px;
     color:#ebebeb;
   }
   .share-header h5{
     font-size:14px;
     font-weight:400;
   }
   .share-options {
     display: flex;
     justify-content:flex-start;
     height:auto;
     flex-wrap:wrap;
     gap:10px;
     margin-bottom:10px;
     padding:10px;
     background:#333;
     border-radius:19px;
     border:0px solid #000;
   }

   .share-option {
     flex: 0 0 calc(25% - 10px);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     cursor: pointer;
     border:0px solid #000
   }

   .share-option svg{
     width:21px;
     height:21px;
     stroke-width:1px;
     margin-bottom: 5px;
     border:0px solid #000;
     background:#292929;
     border-radius:9px;
     aspect-ratio:1/1;
     padding:3px;
   }


   .share-option span {
     font-size:13px;
     color:#ebebeb;
   }

   .share-actions {
     display: flex;
     justify-content: space-between;
     border-top: 1px solid #ddd;
     padding-top: 10px;
   }

   .share-actions button {
     background:#666;
     color:#ebebeb;
     border: none;
     width:100%;
     border-radius: 5px;
     padding: 10px 15px;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.3s;
   }

   .share-actions button:hover {
     background: #202020;
   }
   
@media only screen and (min-width: 600px) {
.share-option {flex: 0 0 calc(16.666% - 10px);}
   .share_Con_top{display:none}
  .share-container{ max-height:215px;}
}
@media only screen and (min-width:768px) {
.share_Con_C{justify-content:center;}
.share-container {border-radius:19px;
max-height:215px;
}

}



.Tost {
   position: fixed;
   bottom: -100px;
   left: 50%;
   z-index:999999999999999999;
   transform: translateX(-50%);
   padding: 15px 10px;
   border-radius: 9px;
   background: #424242;
   color: #ebebeb;
   width: 90%;
   max-width: 500px;
   display: grid;
   place-items: center;
   opacity: 0; /* Initially hidden */
   transition: all 0.3s ease-in-out;
}

.Tost span {
   text-align: center;
   font-size: 15px;
   font-weight: 700;
}

.Tost.alrt {
   background: #e61355;
   color: #ebebeb;
}

.Tost.show {
   opacity: 1;
   bottom: 20px; /* Slide up into the viewport */
   animation: slide-up 0.3s ease-in-out, slide-down 0.3s ease-in-out 2.2s forwards;
}

/* Slide up animation */
@keyframes slide-up {
   from {
       bottom: -100px;
       opacity: 0;
   }
   to {
       bottom: 20px;
       opacity: 1;
   }
}

/* Slide down animation */
@keyframes slide-down {
   from {
       bottom: 20px;
       opacity: 1;
   }
   to {
       bottom: -100px;
       opacity: 0;
   }
}

@media only screen and (min-width: 768px) {
   .Tost {
       max-width: 400px;
       left: 20px;
       transform: none;
   }
}




















/* Loader */



.Loadee{
    width:100%;height:100%;
    border:0px solid #fff;
position:fixed;z-index:999999;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
backdrop-filter:blur(5px);
background:rgba(0,0,0,0.5);
display:flex;flex-direction:column;justify-content:center;
    align-items:center;
}

.plse{
  font-size:20px;
  color:#fff;
  font-weight:800;
  background: linear-gradient(to right,#e61355, #fbcada); /* Your gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.Loadee svg {
  font-family: 'Raleway', sans-serif;
  max-width: 500px;
  width: 100%;height:auto;;
  margin:-30px 0px 0px 0px;
    border:0px solid #fff;
    display:flex;justify-content:center;
    align-items:center;
    margin-left:10px;
}
.Loadee svg text {
  text-transform: uppercase;
  animation: stroke 2s infinite;
  stroke-width: 3;
  stroke: #fff;
  font-size: 100px;
  font-weight: 800;
  color:#fff;
  border:0px solid #fff;
  fill:url(#gradient)
}
@keyframes stroke {
  0%   {
    fill: rgba(46, 189, 255, 0); stroke: url(#gradient);
    stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
  }
  70%  {fill: rgba(46, 189, 255, 0); stroke: url(#gradient); }
  80%  {fill: rgba(46, 189, 255, 0); stroke: url(#gradient); stroke-width: 3; }
 81% {fill: url(#gradient); stroke: url(#gradient); stroke-width: 3;}
  82% {fill: none; stroke: url(#gradient); stroke-width: 3;}
  100% {stroke-dashoffset: 2%; stroke-dasharray:50% 0%; stroke-width:0;stroke: url(#gradient)} 
 /* 100% {
    fill: url(#gradient); stroke: rgba(255,255,255,1); 
    stroke-dashoffset: -9%; stroke-dasharray: 30% 0%; stroke-width: 0;
  }*/
}