@media (max-width:500px){
   #metamask-mobile-container{    
        bottom:0%;
        width: 0%;
        height: 600px;
        position: fixed;
        background-color: var(--modal-background-color);
        border: 1px solid #1d1e29;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        transition: 0.5s;
        z-index: 2;
        overflow-x: hidden;
    }
 .mobile-metamask-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
}
.mobile-metamask-header-center h4{
    color: #fff;
    font-size: 20px;
}

.mobile-container .spinner-wrapper, .mobile-container .spinner-wrapper-mobile-metamask {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto 20px;
}

.mobile-container .logo-box img {
  width: 60px;
  height: auto;
  border-radius: 20px;
  z-index: 2;
  position: relative;
}

.mobile-container .spinner-mobile-metamask {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 6px solid rgba(255,255,255,0.2);
  border-top-color: #7b68ee; /* metamask orange */
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  z-index: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mobile-container .error-message-mobile-metamask{
  position: absolute;
  top: 20px;        
  left: 35px;    
  background-color: #222525;
  text-align: center;
  padding: 20px;
  width: 80%;
  display: none;
  border-radius: 8px; /* optional */
  z-index: 2;
  

}
#error-container-mobile-metamask{
    display: flex;
    justify-content: center;
    align-items: center;
   
    
}
#errorMsg-mobile-metamask p{
    color: #fff;
}
.error-message-mobile-metamask span{
    color: crimson;
    font-size: 18px;
}

.next-screen-mobile-metamask {
  display: none;
  width: 90%;
  margin: 0 auto;
}
.next-screen-header-mobile-metamask h2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    margin-top: 1rem;
}
.next-screen-header-mobile-metamask img{
    width: 30px;
    margin:0 5px ;
    border-radius: 10px;
}

.next-screen-mobile-metamask {
  color: #fff;
}
/* shake + fade animation for error */
@keyframes shakeFade {
  0% { transform: translateX(0); opacity: 0; }
  20% { transform: translateX(-10px); opacity: 1; }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* explosion animation for error exit */
@keyframes explode {
 0% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(-10px); opacity: 1; }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); opacity: 0; }
}

/* next screen bounce in */
@keyframes slideUpBounce {
  0% { transform: translateY(100px); opacity: 0; }
  60% { transform: translateY(-20px); opacity: 1; }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
.action-buttons-mobile-metamask{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}
 .action-buttons-mobile-metamask h5{
    color: #ccc;
    font-size: 16px;
}
 .action-buttons-mobile-metamask p{
    color: #666;
    font-size: 14px;
    text-align: center;
}
.action-buttons-mobile-metamask button {
    background-color: var(--button-background-color);
    margin: 1rem 0 0;
    color: #7b68ee;
    border-radius: 100px;
    font-size: 14px;
}
#loaderBox-mobile-metamask {
  display: flex;
  align-items: center;
  justify-content: center;
    background-color: var(--button-background-color);
    margin: 1rem 0 0;
       color: #7b68ee;;
    border-radius: 100px;
    font-size: 14px;
    padding: 14px 16px;
}

.loader-icon-mobile-metamask {
    margin-right: 5px;
  font-size: 14px;
  transition: transform 0.8s ease-out; /* smooth stop */
}

/* infinite spin while active */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.tab-container, .tab-container-mobile-metamask {
  width: 300px;
  margin: 30px auto;
  font-family: sans-serif;
}

.tabs-mobile-metamask {
     background: #222;
    border-radius: 15px;
     padding: 10px;
  display: flex;
  border-bottom: 2px solid #444;
}

.tab-mobile-metamask {
  flex: 1;
    padding: 10px;
    border-radius: 15px;
  cursor: pointer;
  border: none;
  font-size: 15px;
  background: #222;
  color: #fff;
  transition: background 0.3s;
}

.tab-mobile-metamask.active {
  background: #7b68ee; /* highlight active tab */
  font-weight: bold;
}

.tab-content-mobile-metamask {
  display: none;
  margin: 0.5rem 0;
 }

 .tab-content-mobile-metamask.active {
  display: block;
}
.tab-container-mobile-metamask form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tab-container-mobile-metamask form textarea{
    background-color: #333;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #444;
    color: white;

}
.tab-container-mobile-metamask form input{
  font-size: 16px;
}
.tab-container-mobile-metamask form button{
    padding: 14px 18px;
    color: white;
    background-color: #7b68ee;
    width: 250px;
    cursor: pointer;
    margin: 1.5rem auto 0;
    border-radius: 10px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
button i{
    margin: 0 3px ;
}
::placeholder{
    color: #ccc;
    font-size: 15px;
}
#contact-form-mobile-metamask span, #contact-form-mobile-metamask-1{
    font-size: 14px;
}

 }



 @media (min-width:501px){
   #metamask-desktop-container{    
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0%;
        height: 550px;
        position: absolute;
        background-color: var(--modal-background-color);        
        border-radius: 30px;
        transition: 0.5s;
        z-index: 2;
        overflow-x: hidden;

    }
 .desktop-metamask-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
}
.desktop-metamask-header-center h4{
    color: #fff;
    font-size: 20px;
}

.desktop-container .spinner-wrapper, .desktop-container .spinner-wrapper-desktop-metamask {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto 20px;
}

.desktop-container .logo-box img {
  width: 60px;
  height: auto;
  border-radius: 20px;
  z-index: 2;
  position: relative;
}

.desktop-container .spinner-desktop-metamask {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 6px solid rgba(255,255,255,0.2);
  border-top-color: #7b68ee; /* metamask orange */
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  z-index: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.desktop-container .error-message-desktop-metamask{
  position: absolute;
  top: 20px;        
  left: 35px;    
  background-color: #222525;
  text-align: center;
  padding: 20px;
  width: 80%;
  display: none;
  border-radius: 8px; /* optional */
  z-index: 2;
  

}
#error-container-desktop-metamask{
    display: flex;
    justify-content: center;
    align-items: center;
   
    
}
#errorMsg-desktop-metamask p{
    color: #fff;
}
.error-message-desktop-metamask span{
    color: crimson;
    font-size: 18px;
}

.next-screen-desktop-metamask {
  display: none;
  width: 90%;
  margin: 0 auto;
}
.next-screen-header-desktop-metamask h2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    margin-top: 1rem;
}
.next-screen-header-desktop-metamask img{
    width: 30px;
    margin:0 5px ;
    border-radius: 10px;
}

.next-screen-desktop-metamask {
  color: #fff;
}
/* shake + fade animation for error */
@keyframes shakeFade {
  0% { transform: translateX(0); opacity: 0; }
  20% { transform: translateX(-10px); opacity: 1; }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* explosion animation for error exit */
@keyframes explode {
 0% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(-10px); opacity: 1; }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); opacity: 0; }
}

/* next screen bounce in */
@keyframes slideUpBounce {
  0% { transform: translateY(100px); opacity: 0; }
  60% { transform: translateY(-20px); opacity: 1; }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}
.action-buttons-desktop-metamask{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}
 .action-buttons-desktop-metamask h5{
    color: #ccc;
    font-size: 16px;
}
 .action-buttons-desktop-metamask p{
    color: #666;
    font-size: 14px;
    text-align: center;
}
.action-buttons-desktop-metamask button {
    background-color: var(--button-background-color);
    margin: 1rem 0 0;
    color: #7b68ee;
    border-radius: 100px;
    font-size: 14px;
}
#loaderBox-desktop-metamask {
  display: flex;
  align-items: center;
  justify-content: center;
    background-color: var(--button-background-color);
    margin: 1rem 0 0;
       color: #7b68ee;;
    border-radius: 100px;
    font-size: 14px;
    padding: 14px 16px;
}

.loader-icon-desktop-metamask {
    margin-right: 5px;
  font-size: 14px;
  transition: transform 0.8s ease-out; /* smooth stop */
}

/* infinite spin while active */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.tab-container, .tab-container-desktop-metamask {
  width: 300px;
  margin: 30px auto;
  font-family: sans-serif;
}

.tabs-desktop-metamask {
     background: #222;
    border-radius: 15px;
     padding: 10px;
  display: flex;
  border-bottom: 2px solid #444;
}

.tab-desktop-metamask {
  flex: 1;
    padding: 10px;
    border-radius: 15px;
  cursor: pointer;
  border: none;
  background: #222;
  color: #fff;
  transition: background 0.3s;
}

.tab-desktop-metamask.active {
  background: #7b68ee; /* highlight active tab */
  font-weight: bold;
}

.tab-content-desktop-metamask {
  display: none;
  margin: 0.5rem 0;
 }

 .tab-content-desktop-metamask.active {
  display: block;
}
.tab-container-desktop-metamask form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tab-container-desktop-metamask form textarea{
    background-color: #333;
    padding: 10px;
    border: 1px solid #444;
    font-size: 16px;
    color: white;

}
.tab-container-desktop-metamask form button{
    padding: 14px 18px;
    color: white;
    background-color: #7b68ee;
    width: 250px;
    cursor: pointer;
    font-size: 15px;
    margin: 1.5rem auto 0;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
button i{
    margin: 0 3px ;
}
::placeholder{
    color: #ccc;
}
#contact-form-desktop-metamask span, #contact-form-desktop-metamask-1{
    font-size: 12px;
}
 }