.hidden {
  display: none !important;
}

.profile-dropdown {
  position: relative;
  display: inline-block;
}

.profile-dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  position: absolute;
  right: 10px !important;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  list-style: none;
  padding: 2px 0;
  margin: 0;
  display: none;
  width: 120px;
  z-index: 100;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu li a {
  color: #333;
  text-decoration: none;
  padding: 4px 10px;
  display: block;
  transition: background-color 0.3s;
}

.dropdown-menu li a:hover {
  background-color: #f5f5f5;
}
#paypal-button-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* Modal Backdrop */
.modal {
display: none; 
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); 
z-index: 1000;
justify-content: center; 
align-items: center;
}

.modal-content {
  top:40%;
  left: 40%;
background-color: #fff ;
padding: 30px;
border-radius: 5px;
text-align: center;
width: 270px; 
max-width: 100%; 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.modal-content h3 {
margin: 0;
font-size: 20px;
margin-bottom: 18px;
}

#loginWithGoogle {
background-color: #4285f4;
color: #fff;
padding: 10px 20px;
font-size: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%; 
}

#loginWithGoogle:hover {
background-color: #357ae8 !important; 
color:#030303;
}
body.modal-open {
  overflow: hidden;
}