.csuk-home-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.csuk-home-container {
  position: relative;
  width: min(600px, 90vw, 85vh);
  aspect-ratio: 1 / 1;
}

.csuk-home-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px; /* Increased size */
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 5;
}


.csuk-home-card {
  position: absolute;
  top: 38.5%;
  left: 33%; /* Adjusted for new size */
  width: 200px; /* Increased size */
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transform: scale(0.2);
  transition: transform 0.5s ease-out;
  text-decoration: none!important;
}



.card-icon {
    display: block; /* Ensures the image block centers correctly */
    width: 30px; /* Example size, adjust as needed */
    height: 30px; /* Maintain aspect ratio */
    margin: 0 auto 10px; /* Centers the image and adds space below */
}


.csuk-home-card:visited {
	text-decoration: none!important;
}

.csuk-home-card .csuk-home-title {
	color: white;
	font-size: 20px;
}

.csuk-home-card.hover-effect {
	box-shadow: 0 16px 26px rgba(0,0,0,0.7);
	cursor: pointer;
	box-sizing: border-box;
	width: 200px; /* Increase width */
    height: 160px; /* Increase height */
    transition: width 0.3s ease, height 0.3s ease;
	text-decoration: none!important;
	color: white;
}


.csuk-home-teacher { background: #e59900; }
.csuk-home-academy { background: #57b07f; }
.csuk-home-revisecs { background: #5680ed; }
.csuk-home-advanced { background: #78328D; }
.csuk-home-coder { background: #4d4d4d; }
.csuk-home-bytes { background: #008baa; }



/* Apply different animations to each card */
.csuk-home-card:nth-child(2) {
  animation: enter1 1s ease-out forwards;
  transform-origin: center center;
}
.csuk-home-card:nth-child(3) {
  animation: enter2 1s 0.2s ease-out forwards;
  transform-origin: center center;
}
.csuk-home-card:nth-child(4) {
  animation: enter3 1s 0.4s ease-out forwards;
  transform-origin: center center;
}
.csuk-home-card:nth-child(5) {
  animation: enter4 1s 0.6s ease-out forwards;
  transform-origin: center center;
}
.csuk-home-card:nth-child(6) {
  animation: enter5 1s 0.8s ease-out forwards;
  transform-origin: center center;
}
.csuk-home-card:nth-child(7) {
  animation: enter6 1s 1s ease-out forwards;
  transform-origin: center center;
}


.csuk-home-card-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FF4136; /* Bright red color, change as needed */
    color: white;
    padding: 3px 3px;
    z-index: 10;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform-origin: top right;
}

/* Optional: Style adjustments for specific ribbons */
.csuk-home-ribbon-free { background-color: #2ECC40; } /* Green for free */
.csuk-home-ribbon-membership { background-color: #0074D9; } /* Blue for membership */
.csuk-home-ribbon-coming-soon { background-color: #FF851B; } /* Orange for coming soon */