.primary-bg {
    background-color: #2a3556; /* Primary background color */
  }
  
.secondary-bg {
    background-color: #05006d; /* Secondary background color */
  }
  
.tertiary-bg {
    background-color: #89b5df; /* Tertiary background color */
  }

.primary-color {
    color: #2a3556; /* Primary background color */
  }
  
.secondary-color {
    color: #05006d; /* Secondary background color */
  }
  
.tertiary-color {
    color: #89b5df; /* Tertiary background color */
  }
  
.text-white {
    color: white; /* Text color */
  }

  .text-primary {
    color: #2a3556; /* Text color */
  }

  .text-secondary {
    color: #05006d; /* Text color */
  }

  .text-tertiary {
    color: #89b5df; /* Text color */
  }


  .image-container {
    position: relative;
    display: flex;
    width: 196px; /* Ensure the container has the same width as the image */
    margin: 0 auto;
}

.hover-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(42, 53, 86, 0.7); /* #2a3556 with 70% opacity */
    color: white;
    padding: 10px;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center; /* Center text horizontally */
    border-radius: 10px;
    font-size: calc(1px + 1vw); /* Adjust font size based on viewport width */
}

.hover-text .name,
.hover-text .country {
    margin: 5px 0; /* Adjust spacing between name and country */
}

.image-container:hover .hover-text {
    opacity: 1; /* Show on hover */
}

.hover-text .name {
    font-weight: bold;
    text-overflow: ellipsis;
}

.hover-text .country {
    font-style: italic;
}

@media (max-width: 400px) {
    .hover-text {
        font-size: calc(1px + 1vw); /* Smaller font size for small screens */
    }
}

@media (min-width: 1200px) {
    .hover-text {
        font-size: calc(1px + 1vw); /* Larger font size for large screens */
    }
}
 

.responsive-img {
  border-radius: 20px;
  max-width: 100%; /* Adjust this percentage as needed */
  height: auto; /* Maintain aspect ratio */
}

/* Modal Background */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7); /* Ensure full opacity */
  transition: opacity 0.3s ease; /* Smooth transition, if needed */
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: 5% auto; /* Adjust margin for smaller modal */
  padding: 20px;
  border-radius: 8px; /* Rounded corners */
  border: 1px solid #ccc; /* Subtle border */
  width: 60%; /* Smaller width */
  max-width: 800px; /* Max width for larger screens */
}

/* Close Button */
.close-btn {
  color: #333;
  float: right;
  font-size: 24px; /* Slightly smaller font size */
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: #000; /* Darker color on hover */
}

/* Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 8px; /* Rounded corners for video container */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ensure the button-content div takes up the full space of its parent */
.popup-youtube .button-content {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;    /* Center vertically */
  height: 100%;           /* Ensure it takes up the full height of the parent */
  width: 100%;            /* Ensure it takes up the full width of the parent */
}

/* Optionally adjust the size of the icon */
.popup-youtube .button-content i {
  font-size: 24px; /* Adjust size as needed */
}