.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.85); /* Adjust the opacity to make it darker */
}
.center {
	margin-top: 3mm;
   text-align: center;
  border: 1px solid green;
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem 1rem; }
  
  .stretch-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch; }
  .stretch-card > .card {
    width: 100%;
    min-width: 100%; }
    
    
    .grid-margin, .purchase-popup {
  margin-bottom: 2.5rem; }
  
  /* Cards */
.card {
  border: 0;
  background: #fff; }
  .card .card-body {
    padding: 2.5rem 2.5rem; }
    .card .card-body + .card-body {
      padding-top: 1rem; }
  .card .card-title {
    color: #343a40;
    margin-bottom: 0.75rem;
    text-transform: capitalize;
    font-family: "ubuntu-medium", sans-serif;
    font-size: 1.125rem; }
  .card .card-subtitle {
    font-family: "ubuntu-regular", sans-serif;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem; }
  .card .card-description {
    color: #76838f;
    margin-bottom: 1.5rem;
    font-family: "ubuntu-regular", sans-serif; }
  .card.card-outline-success {
    border: 1px solid theme-color("success"); }
  .card.card-outline-primary {
    border: 1px solid theme-color("primary"); }
  .card.card-outline-warning {
    border: 1px solid theme-color("warning"); }
  .card.card-outline-danger {
    border: 1px solid theme-color("danger"); }
  .card.card-rounded {
    border-radius: 5px; }
  .card.card-faded {
    background: #b5b0b2;
    border-color: #b5b0b2; }
  .card.card-circle-progress {
    color: #ffffff;
    text-align: center; }
  .card.card-img-holder {
    position: relative; }
    .card.card-img-holder .card-img-absolute {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%; }
  .card.bg-blue-gradient {
    background: -webkit-gradient(linear, left top, right top, from(#065efd), color-stop(#3169fd), to(#6f79fc));
    background: linear-gradient(to right, #065efd, #3169fd, #6f79fc);
    color: #fff; }
  .card.bg-orange-gradient {
    background: -webkit-gradient(linear, left top, right top, from(#ff7f2e), to(#fe7452));
    background: linear-gradient(to right, #ff7f2e, #fe7452);
    color: #fff; }
  .card.bg-green-gradient {
    background: -webkit-gradient(linear, left top, right top, from(#24e8a6), to(#09cdd1));
    background: linear-gradient(to right, #24e8a6, #09cdd1);
    color: #fff; }
  .card.card-no-shadow {
    -webkit-box-shadow: none;
    box-shadow: none; }
  .card.card-img-holder {
    position: relative; }
    .card.card-img-holder .card-img-absolute {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%; }
      
      .bg-gradient-danger {
  background: -webkit-gradient(linear, left top, right top, from(#ffbf96), to(#fe7096)) !important;
  background: linear-gradient(to right, #ffbf96, #fe7096) !important; }
      
      
  .bg-gradient-info {
  background: -webkit-gradient(linear, left top, right top, from(#90caf9), color-stop(99%, #047edf)) !important;
  background: linear-gradient(to right, #90caf9, #047edf 99%) !important; }

.custom-card {
    background: linear-gradient(135deg, #2a428c, #4b6bbf); /* Gradient effect */
    border-radius: 20px; /* Larger border radius for softer corners */
    padding: 25px;
    color: white;
    width: 100%; /* Full-width within its container */
    max-width: 350px; /* Ensures cards don't get too wide on large screens */
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
    transform: translateY(-7px); /* More noticeable lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

.custom-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px; /* Adds spacing below the heading */
}

.custom-card h2 {
    font-size: 40px;
    margin-top: 15px;
}

.custom-card .card-text {
    font-size: 14px;
    opacity: 0.8; /* Slight transparency for secondary text */
    margin-top: 10px;
}


    .custom-icon {
        font-size: 36px;
        color: #ffffffaa; /* Slightly lighter icon color */
        float: right;
    }

    /* Ensures the modal's content fits well inside */
    .modal-body {
        max-height: 70vh; /* Adjusts the height to fit the viewport */
        overflow-y: auto; /* Adds scroll if content exceeds the max height */
        padding: 15px; /* Provides some padding for visual appeal */
    }

    /* Makes the media players responsive */
    #videoPlayer {
        width: 100%; /* Ensures the player fills the modal body width */
        height: auto; /* Maintains the aspect ratio for video */
        margin-top: 10px; /* Adds some space from other elements */
    }