.msg-button {
      display: inline-block;
      font-size: 1.4rem;
      color: white;
      cursor: pointer;
      margin-bottom: 6px;
      margin-top: 0;
      margin-left: 0;
      font-family: 'Quicksand', sans-serif;
      z-index: 15000;
    }

    .msg-button:hover {
      color: #fff;
      font-weight: bold;
    }

.msg-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 20000;
}
    
.msg-overlay.active {
  opacity: 1;
  visibility: visible;
}

    .msg-content {
      width: 70%;
      max-width: 800px;
      background: #000;
      border: 3px solid #2b2b2b;
      border-radius: 8px;
      padding: 32px;
      position: relative;
      color: #fff;
      animation: fadeInUp 0.4s ease;
      text-align: center;
      justify-content: center;
      font-family: 'Quicksand', sans-serif;
      font-style: normal;
      font-size: 0.7rem;
      z-index: 20100;
    }

    .msg-close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 32px;
      color: #e53935;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .msg-close:hover {
      color: #fff;
    }

    @keyframes fadeInUp {
      from {
        transform: translateY(30px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    /*========================= Screen 6000=========================*/ 
@media (max-width: 6000px)
{

    .msg-button {
      margin-left: 15px;
      font-size: 2.2rem;      
    }
    .msg-content {
      font-size: 2.5rem;
      width: 60%;
      max-width: 60%;
    }    
    .msg-close {
      font-size: 56px;
    }    
}

    /*========================= Screen 3840=========================*/ 

@media (max-width: 3840px)
{

    .msg-content {
      font-size: 2.2rem;
      width: 60%;
      max-width: 60%;       
    }
    .msg-button {
      font-size: 2.2rem;
    }  
    .msg-close {
      font-size: 56px;
    }        
}
    /*========================= Screen 2560=========================*/ 

@media (max-width: 2560px)
{

    .msg-content {
      font-size: 1.3rem;
      width: 60%;
      max-width: 60%;       
    }
    .msg-button {
      font-size: 1.1rem;
    }  
    .msg-close {
      font-size: 48px;
    }        
}
    /*========================= Screen 1920=========================*/ 

@media (max-width: 1920px)
{

    .msg-content {
       font-size: 1.1rem;
      width: 60%;
      max-width: 60%;       
    }
    .msg-button {
      font-size: 1.1rem;
    }  
    .msg-close {
      font-size: 48px;
    }        
}
    /*========================= Screen 914=========================*/ 

@media (max-width: 914px)
{

    .msg-button {
      margin-left: 0;
      font-size: 1.3rem;      
    }
    .msg-close {
      font-size: 42px;
    } 
    .msg-content {
      font-size: 1.1rem;
      width: 60%;
      max-width: 60%;       
    }    
}

    /*========================= Screen 700=========================*/ 

@media (max-width: 700px)
{
    .msg-content {
      font-size: 0.75rem;
      width: 70%;
      max-width: 800px;
    }
    .msg-close {
      font-size: 32px;
    } 
    .msg-button {
      margin-left: 0;
      font-size: 1.1rem;      
    }
}