/* Popup background */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Dimmed background */
  display: flex; /* Keeps flex for internal centering */
  justify-content: center;
  align-items: center;
  z-index:5;
}

/* Popup content */
.popup-content {
  background-color: #0c0c0c; /* Dark background color */
  color: #fff; /* Text color for readability */
  padding: 20px;
  border-radius: 0px;
  border: 1px solid #cccccc; /* Light grey border */
  position: fixed; /* Changed to fixed positioning */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow for depth */
  /*width: 500px;  Square format */
  /*height: 500px;  Square format */
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Center content vertically inside */
  text-align: center; /* Center text alignment */
  z-index:6;
  scale:72% 72%;
  margin-left:-76px;
  margin-top:-25px;
}

  
/* Responsive Styling */
@media (max-width: 768px) {
	
/* Popup content */

  
.popup-content {
    position: fixed; /* or absolute */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure it's above other content */
    width: 80%; /* or any specific width */
    max-width: 640px; /* Maximum width */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: white;
    display: flex; /* Initially hidden */align-items: center;
	  flex-direction: column; /* Center content vertically inside */
	  text-align: center; /* Center text alignment */
	 background-color: #0c0c0c; /* Dark background color */
  color: #fff; /* Text color for readability */
  border-radius: 0px;
  border: 1px solid #cccccc; /* Light grey border */
}

}


/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #fff; /* Visible against dark background */
  z-index:7;
}

/* List */
.custom-list {
  list-style-type: none; /* Remove default list style */
  padding: 0;
  margin: 0;
}

.custom-list li {
  position: relative;
  padding-left: 25px; /* Make space for the symbol */
  text-align: left; /* Align text to the left, if desired */
  margin-bottom: 10px; /* Optional: Adds space between list items */
}

.custom-list li::before {
  content: "\25A1"; /* Unicode for the square symbol */
  position: absolute;
  left: 0;
  top: 0;
  color: #fff; /* Adjust color as needed */
}

/* Video Player CSS */
.video-player {
    margin-top: 10px;
}

.video-controls {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

#volumeControl {
    margin-left: 20px;
}

.video-player video {
    width: 100%; /* Ensure the video fits within the popup */
    height: auto;
}

#videoPlayer{
	width:82%;
	margin-left: 50px;
}