* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width:100%;
    display: flex;
    flex-direction: column;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, sans-serif;
    background-color: #181818;
    color:#ffffff;
    margin-top: 0;
    margin-bottom: 0;
	margin-left:auto;
	margin-right:auto;
    padding: 0;
	width:100%;	
    height: 100vh;
    scroll-snap-type: y mandatory; /* Enables snapping between sections */
    overflow-y: scroll; /* Enables vertical scrolling */
}    
.mainbody, #mainbody, .mainbody_legacy {
    margin: 0 auto;
    width: 100%;
	max-width: 1440px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mainbody_legacy
{
    max-width: 995px;
    border-radius:5px;
	line-height:110%;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color:#ffffff;
	/* color: inherit;  Prevents any color change */
}

.mainbody_legacy ul, .mainbody_legacy ol {
  display: block;
  list-style-type: disc;   /* for , "decimal" for  */
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;       /* or sometimes padding-left: 40px */
  padding-left: 0;         /* or varies depending on browser */
}

h1 {
	font-size:29px;
}
h2 {
	font-size:25px;
}
h3 {
	font-size:22px;
}





.uc_mobile_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1001; /* Ensures the header stays on top */
	box-sizing: border-box;
}

.uc_mobile_header_left {
    display: flex;
    align-items: center;
}
.uc_mobile_header_center
{
    display: flex;
    align-items: center;
    color:#ffffff;
    overflow:hidden;
    max-height:40px;
}

.uc_mobile_hamburger {
	position:relative;
	top:-5px;
	color:#ffffff;
    cursor: pointer;
    font-size: 27px;
    border: none;
    background: none;
    margin-right: 15px;
}

.uc_mobile_logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    text-align:center;
}

.uc_mobile_logo img {
    height: 30px;
    margin-right: 10px;
}

.uc_mobile_header_right {
    display: flex;
    align-items: center;
    gap: 15px;
    color:#ffffff;
    text-aligh:right;
}

/* Custom Icons */
.uc_mobile_search_icon, 
.uc_mobile_cart_icon {
    color:#ffffff;
    width:22px;
    height: auto;
    position: relative;
    cursor: pointer;
}


/* Side Menu */


.uc_mobile_logo_pulse {
    position: absolute;
    left: 15px;
    top: 10px;
    width: 40px;
    height: 40px;
    z-index: 999;
}

.uc_mobile_logo_pulse img {
    width: 100%;
    height: auto;
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px #f7e85e);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 12px #ffef70);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px #f7e85e);
    }
}

.uc_mobile_menu {
    position: fixed;
    top: 0;
    left: -480px;
    width: 280px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: 0.3s;
    overflow-y: auto;
    z-index: 1002; /* Menu must be above the backdrop */
}

.uc_mobile_menu.open {
    left: 0;
}

.uc_mobile_close_btn {
    font-size: 40px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
}

.uc_mobile_menu ul {
    list-style: none;
    margin-top: 20px;
}

.uc_mobile_menu ul li {
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.uc_mobile_menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    display: block;
    padding: 5px 10px;
}

.uc_mobile_menu ul li a:hover {
    background: #eee;
}

/* Fixed Overlay Behind the Menu */
.uc_mobile_backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Must be lower than the menu */
}

.uc_mobile_backdrop.active {
    display: block;
}










/* Each section should snap into place */
.screen1, .screen2, .screen3 {
    scroll-snap-align: start;
}

/* homepage header */
.uchdr {
display: flex;   
justify-content: space-between;
align-items: center; 
width: 100%; 
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:10px;
margin-top:0px;
gap: 10px;
}

.uclogo {
text-align:left;
padding:5px;
}


/* begin center fix */
.uchdr {
  position: relative; /* make it a containing block */
}

.ucsearch {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 350px;
}


/* end center fix */



.ucsearch, .ucmenu, .uclogo {	
	width:33%;	
	overflow:hidden;
}

.uclogo img {
width: 100%;             /* Ensures the image is responsive */
height: auto;                /* Maintains aspect ratio */

max-width:165px;
min-height:30px;

}

@media (max-width: 768px) {
	
	.uclogo {
		width:15%;
		max-width:100px;
	}
    .uclogo img {
        max-height:40px;
    }

	
}



.uchpmenu {
  background-color: #161616; 
  padding: 10px 20px; 
  display: flex;        
  gap: 10px;      
  justify-content: flex-end;   
  align-items: center;       
}

.uchpmenu a {
color: #ffffff;             /* White text */
text-decoration: none;     /* Removes underline */
font-size: 16px;          /* Adjust font size */
white-space: nowrap;       /* Prevents word wrapping */
}

.uchpmenu a:hover {
text-decoration: underline; /* Adds underline on hover */
}

.ucdivider {
color: white;             /* White color for the '|' divider */
font-size: 18px;          /* Match text size */
}

.ucsrch-container {
position: relative;
width: 100%; /* Responsive width */
max-width: 350px; /* Limit maximum size */
margin-left:auto;
margin-right:auto;
margin-top:5px;
transition: width 0.3s ease-in-out;
text-align:center;
}
.ucsrch-form {
display:block;
width:100%;
max-width:250px;
margin:auto;
}
.ucsrch-input {
padding: 10px 35px; /* Space for icon */
font-size: 15px;
border: none;
border-radius: 25px;
background-color: #252525;
color: #ffffff;
outline: none;
transition: width 0.3s ease-in-out;
width:100%;
margin:auto;

}

.ucsrch-input::placeholder {
color: #aaa;
}

.ucsrch-icon {
position: absolute;
top: 50%;
margin-left:5px;
transform: translateY(-50%);
width: 18px;
height: 18px;
filter: invert(60%);
}


/* Expanding effect when focused */
.ucsrch-input:focus {
	width: 100%;
}






.uc_splash_container {
    display: flex;
    max-width: 995px;
    width: 100%;
    align-items: center;
    position: relative;
    color:#ffffff;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    margin-bottom:30px;
    overflow:hidden;
}
.uc_splash_text {
    width: 35%;
    text-align: left;
    padding: 20px;
    z-index: 10;
}
.uc_splash_text h1 {
    font-size: 2.5em;
    line-height:95%;

}
.uc_splash_highlight {
    color: #00b3ff;
	font-style: italic;
}
.uc_splash_description {
    margin: 20px 0;
    font-size: 1.1em;
}
.uc_splash_learn_more {
    font-size: 1.0em;
    opacity: 0.8;
    text-align:center;
}
.uc_splash_images {
    width: 65%;
    position: relative;
    height: 400px;
}
.uc_splash_images div {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
}
.uc_splash_images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.uc_splash_images div::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1));
}
.uc_splash_img1 {
    width: 50%;
    height: auto;
    top: -5%;
    left: 5%;
    z-index: 4;
}
.uc_splash_img2 {
    width: 38%;
    height: auto;
    top: 11%;
    left: 50%;
    z-index: 3;
}
.uc_splash_img3 {
    width: 40%;
    height: auto;
    top: 40%;
    left: 25%;
    z-index: 5;
}
.uc_splash_img4 {
    width: 45%;
    bottom: 10PX;
    right: 0;
    z-index: 1;
    opacity: 0.7;
}

.uc_splash_smll_images
{
    width: 100%;
    display: none;
    align-items: center;
	gap:15px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}
.uc_splash_smll_images img
{
	min-width:70px;
	width:100%;
	height:auto;
	border-radius:5px;
}

@media (max-width: 768px) {

	.uc_splash_text h1 {
	    font-size: 28px !important;
	    line-height:95%;	
	}
	
	.uc_splash_text {
		margin-top:0px;
		padding-top:0px;
		width:100%;
	}
	.uc_splash_images {
		display:none;
	}
	.uc_splash_smll_images
	{
	    display: flex;
	    align-items: center;
		gap:15px;	
	}
	.uc_splash_text h1 {
	    font-size: 2.2em;
	}

}






 
.uc_stats-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the top for better alignment */
    flex-wrap: wrap;
    gap: 100px; /* Space between items */
    width: 100%;
    max-width: 995px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
    margin-bottom:30px;
    box-sizing: border-box;
    clear: both;
}

.uc_stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
	width:100%;
    max-width: 210px;
	height:210px;
    background-color: black;
    border-radius: 50%;
    position: relative;
    text-align: center;
    padding: 20px;
    flex-shrink: 0;
}

.uc_stat-box img {
    width: 65px; /* Adjusted icon size to fit inside the circle */
    height: auto;
    position: relative;
    z-index: 1;
}

.uc_stat-number {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FFD700; /* Gold color for numbers */
    position: relative;
    z-index: 1;
}

.uc_stat-description {
    font-size: 0.9rem;
    font-style: italic;
    color: #ccc;
    max-width: 140px; /* Limits text width for better readability inside the circle */
    position: relative;
    z-index: 1;
}

.uc_stats_explrbttn {
    text-align:center;
    padding:20px;
    margin-top:30px;
    margin-bottom:30px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    max-width:995px;
}
@media (max-width: 768px) {
	.uc_stats-container {
	    gap: 20px; /* Space between items */
	}
}





.uc_about_container {
    width: 100%;
    max-width:995px;
    margin: auto;
    padding: 20px;
    text-align: center;
    position: relative;
    color:#ffffff;
}
.uc_about_header {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}
.uc_about_gradient {
    width: 75px;
    height: 10px;
    background: linear-gradient(90deg, #4a90e2, #1a73e8);
    margin-bottom: 20px;
    border-radius: 3px;
    text-align: left;
}
.uc_about_gradient_gold {
    width: 75px;
    height: 10px;
    background: linear-gradient(90deg, #FFD700, gold);
	margin-top:10px;
    margin-bottom: 10px;
    border-radius: 3px;
    text-align: left;
}
.uc_about_subtext {
    font-size: 14px;
    line-height: 1.6;
    max-width: 90%;
    margin: auto;
    text-align: left;
}
.uc_about_highlight {
    font-weight: bold;
    color: #FFD700;
}
.uc_about_button {
    display: inline-block;
    background-color: #4a90e2;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.uc_about_features {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 40px;
}
.uc_about_feature_box {
    background-color: #11131a;
    padding: 20px;
    border-radius: 10px;
    max-width: 320px;
    text-align: left;
    margin: 10px auto;
    width: 30%;
}
.uc_about_feature_title {
    font-size: 18px;
    font-weight: bold;
    color: #FFD700;
}
.uc_about_feature_text {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 10px;
}
.uc_about_feature_img
{
	width:100%;
	text-align:right;
}
.uc_about_feature_img img
{
	width:auto;
	height:100%;
	max-height:70px;
	height:auto;
}

.uc_about_icon {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 110px; /* Ensure the circle is large enough */
    height: 110px;
    background-color: black; /* Black circle */
    border-radius: 50%; /* Make it perfectly round */
    position: relative;
    margin:auto;
    margin-bottom:15px;
}

.uc_about_icon img {
    width: auto;
    height: 60px; /* Adjust image size */
    position: absolute;
}

@media (max-width: 768px) {
	.uc_about_features, .uc_about_feature_box {
		display:block;
		width:100%;
	}
    .uc_featured_slide_description {
      	max-height:125px;
      	line-height:110%;
    }
    .uc_about_header {
    	font-size:29px;
    }
    .uc_about_container {
    	padding:5px;	
    }
}





.uc_benefits_container {
    position: relative;
    width: 100%;
    max-width: 995px;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 20px;
    color: #ffffff;
    background: url('https://m.universalclass.com/30/default/image10.jpg') no-repeat center center;
    background-size: cover;
    flex-direction: row;
}

.uc_benefits_sidebar {
    width: 40%;
}

.uc_benefits_button {
    width: auto;
    margin-right: 20px;
}

.uc_benefits_overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* This dims only the background */
    z-index: 1;
}

.uc_benefits_sidebar,
.uc_benefits_content {
    position: relative;
    z-index: 2; /* Ensures content stays above the dimmed background */
}

.uc_benefits_sidebar {        	
    background-color: rgba(10, 10, 10, 0.9);
    padding: 30px;
    border-radius: 10px;
    width: 35%;
    line-height: 104%;
}

.uc_benefits_content {
    width: 65%;
    flex-grow: 1;
    padding: 50px;
    text-align: left;
}

.uc_benefits_heading {
    font-size: 2em;
}

.uc_benefits_membership {
    text-align: center;
    font-size: 23px;
    font-style: italic;
    margin-bottom: 7px;
}

.uc_benefits_feature {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.uc_benefits_feature img {
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(900%) hue-rotate(180deg) brightness(98%) contrast(97%);
}

.uc_benefits_feature div {
    max-width: 200px;
    width: 15%;
    text-align: center;
}

.uc_benefits_feature p {
    width: 85%;
}

.uc_benefits_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    overflow:hidden;
    width:100%;
    text-align:center;
}


.uc_benefits_target {
	display:block;
	z-index:20;
	position:absolute;
	top:-35px;
	left:-35px;
}

.uc_benefits_target img {
	width:75px;		
	height:auto;
}

@media (max-width: 768px) {
	.uc_benefits_container{
		display:block;
		padding:0px;
	}
	.uc_benefits_target {
		display:none;
	}
    .uc_benefits_sidebar {
      	width:100%;
      	display:block;
    }
    .uc_benefits_content {
    	display:block;
    	width:100%;
    	text-align:left;
    	padding:0px;
    }
    .uc_benefits_heading {
    	font-size:27px;
    }
    .uc_benefits_buttons {    	
   	    flex-direction: column;
		text-align:center;
		align-items:cetner;
		gap:15px;
    }

}		






.uc_rocket_container {
    text-align: center;
    position: relative;
	width:100%;
    max-width: 640px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    color:#ffffff;
}

.uc_rocket_title {
    font-size: 2rem;
    font-weight: bold;
}

.uc_rocket_title em {
    font-style: italic;
}

.uc_rocket_text {
    font-size: 1.2rem;
    font-weight: normal;
    margin-top: 10px;
    text-align:left;
    width:80%;
    padding-left:15px;
}

.uc_rocket_area {
    max-width: 440px;
    text-align: center;
	width:100%;
    margin-left:auto;
    margin-right:auto;
    color:#ffffff;
    display:flex;
    align-items:center;
}

.uc_rocket_image {
    padding-right:15px;
    position: absolute;
    bottom: -30px;
    right: 0px;
	height:100px;
	width:auto;
    animation: uc_rocket_float 3s ease-in-out infinite;
}

@keyframes uc_rocket_float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
.uc_rocket_title {
    font-size: 28px;
}
}







.uc_joinsplsh_container {
    width: 100%;
    max-width: 995px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    flex-wrap: wrap;
    color:#ffffff;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    margin-bottom:25px;
}

/* Text Section */
.uc_joinsplsh_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 60%;
    position: relative;
    color:#ffffff;

}

.uc_joinsplsh_headline {
    font-size: 2rem;
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.uc_joinsplsh_headline span {
    color: #FFD700;
    font-style: italic;
    font-weight: bold;
}

/* Curved underline effect that adapts to text width */
.uc_joinsplsh_underline {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 110%;
    height: 10px;
    border: 2px solid #FFD700;
    border-radius: 50%;
    transform: translateX(-50%);
    border-top: none;
}

.uc_joinsplsh_subtext {
    margin-top: 10px;
    font-size: 1rem;
    opacity: 0.8;
}

/* Button Section */
.uc_joinsplsh_button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    max-width: 40%;
}

.uc_joinsplsh_cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid #FFD700;
    padding: 12px 30px;
    font-size: 1.2rem;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    white-space: nowrap; /* Prevents text wrapping inside the button */
}

.uc_joinsplsh_cta-button:hover {
    background: #FFD700;
    color: #0A0A0A;
}

.uc_joinsplsh_lightbulb {
    font-size: 1.5rem;
    color: #FFD700;
    margin-left: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .uc_joinsplsh_container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .uc_joinsplsh_text {
        max-width: 100%;
    }

    .uc_joinsplsh_button-container {
        max-width: 100%;
    }

    .uc_joinsplsh_cta-button {
        width: 100%;
        max-width: 300px;
    }
}





/* TABS */
.uc_tabs-container {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.uc_tabs-container a {
    display: block;
    text-decoration: none;
}

/* Remove default hyperlink behaviors */
.uc_tabs-container a:link,
.uc_tabs-container a:visited,
.uc_tabs-container a:hover,
.uc_tabs-container a:active {
    text-decoration: none;
}

/* Tabs container */
.uc_tabs {
    display: flex;
    justify-content: center;
    background: rgba(25, 25, 25, 0.95);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Individual tabs */
 
.uc_tab {
    flex: 1;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid transparent;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    display: flex !important;
    align-items: center  !important;     /* vertical align center */
    justify-content: center  !important; /* horizontal align center */
}

.uc_tab svg,
.uc_tab span {
    display: block;          /* kill inline text baseline quirks */
    line-height: 1;          /* tighten text box */
}

/* Hover effect */
.uc_tab:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/* Active tab style */
.uc_tab.active {
    background: #ffffff;
    color: #000000 !important; /* Ensure active tab text is black */
    border-bottom: 2px solid #ffffff;
}

/* Tab content */
.uc_tab-content {
    display: none;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    width: 100%;
    max-width: 900px;
	min-height:550px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
}

/* Show active tab content */
.uc_tab-content.active {
    display: block;
}




	/* uc_tags Container */
	.uc_tags-container {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    gap: 12px;
	    margin-bottom: 40px;
	    max-width: 995px;
	    margin-left: auto;
	    margin-right: auto;
	    padding-left:10px;
	    padding-right:10px;
	    box-sizing: border-box;
	}




/* uc_tag Buttons */
.uc_tag {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid;
    border-radius: 25px;
    background: transparent;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    display: flex;
    gap:8px;
}
/* Different Border Colors */
.uc_tag.finance { border-color: #28a745; }
.uc_tag.tech { border-color: #1E90FF; }
.uc_tag.arts { border-color: #FF5733; }
.uc_tag.business { border-color: #FFD700; }
.uc_tag.health { border-color: #FF3333; }
.uc_tag:hover {
    background: darkgray;
    color: black;
}

.uc_tag img {
	height:18px;
	width:auto;
}

	




.uc_mytag {
  font-weight: normal !important;
  border: 1px solid transparent !important;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--uc_mycrnz-panel) !important;
  border: 1px solid var(--uc_mycrnz-border) !important;
  color: var(--uc_mycrnz-muted) !important;
  font-size: 13px !important;
  white-space: nowrap;

  display: inline-flex;    /* flex container */
  align-items: center;     /* vertical middle */
  gap: 6px;                /* spacing between text & icon */
}

.uc_mytag:hover {
  background-color: gray !important;
}

.uc_mytag img {
  width: auto !important;
  height: 18px !important;
  display: inline-block;   /* stays inline, doesn’t break nowrap */
  vertical-align: middle;  /* extra safeguard */
  margin-left:5px;
}






	.uc_gradient_bar {
		width: 220px;
		height: 15px;
		border-radius: 15px;
		margin-bottom:7px;
		background: linear-gradient(to left, rgba(0, 35, 102, 0.7), #052668);
	}

    .uc_cat_header {
        background: #2a2d5d;
        padding: 15px;
        border-radius: 12px;
        font-size: 24px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .uc_cat_header img {
        width: 24px;
        height: 24px;
    }

	.uc_error-box, .uc_success-box {
        color: white;
        padding: 20px;
        border-radius: 12px;
        max-width: 400px;
        text-align: center;
        margin-left:auto;
        margin-right:auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: scale(0.8);
        animation: uc_error-growFadeIn 0.6s ease-out forwards;
    }
	.uc_error-box{
        background: #ff4d4d;
	}

	.uc_success-box{
        background: darkgreen;
	}


    @keyframes uc_error-growFadeIn {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .uc_error-box h2 {
        margin: 0 0 10px;
        font-size: 22px;
        text-align:left;
    }
    .uc_error-box p {
    	text-align:left;
        font-size: 19px;
        margin: 0 0 10px;
    }
    .uc_error-box .retry-button {
        background: white;
        color: #ff4d4d;
        padding: 10px 15px;
        border-radius: 8px;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin-top: 10px;
        cursor: pointer;
    }
    .uc_error-box .retry-button:hover {
        background: #ffe6e6;
    }

/* Trending Courses */
.uc_trending-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px; /* Add padding so buttons don't touch images */
}
/* Ensure trending courses don't overlap navigation buttons */
.uc_trending-courses {
    display: flex;
    gap: 35px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px; /* Add padding so images don't touch arrows */
    padding-left: 50px; /* Ensure left button is not overlapped */
    padding-right: 50px; /* Ensure right button is not overlapped */
}
/* Ensure navigation buttons are on top */
.uc_trending_nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    z-index: 10; /* Ensure buttons are above images */
}
/* Space out navigation buttons */
.uc_trending_nav-button.left { 
    left: 0;
    margin-left: 10px; /* Prevent overlap */
}
.uc_trending_nav-button.right { 
    right: 0;
    margin-right: 10px; /* Prevent overlap */
}

.uc_trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color:#ffffff;
}

.uc_trending-header span {
    font-size: 1.2rem;
    font-weight: bold;
}


/* Hide Scrollbar */
.uc_trending-courses::-webkit-scrollbar {
    display: none;
}


.uc_crn-card {
    width: 200px; /* Fixed width */
    height: 300px; /* Fixed height */
    background: #222;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}




.uc_crn-card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border: 0;
    position: absolute; /* Makes the link cover the entire card */
    top: 0;
    left: 0;
    z-index: 3; /* Ensure it’s above other elements */
}

.uc_crn-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 0; /* Set behind the content */
}

.uc_crn-card img {
    width: 200px;
    height: 300px;
    object-fit: cover; /* Ensures images fill the space proportionally */
    border-radius: 10px;
    z-index: 1;
}

.uc_crn-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
    padding: 10px 10px;
    box-sizing: border-box;
    z-index: 1;
    white-space: normal;  /* Allow text wrapping */
    overflow-wrap: break-word; /* Ensure long words break */
    text-align: center; /* Keep it readable */
	line-height:100%;
}
.uc_crn-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 0.9rem;
    font-style: italic;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
    padding: 5px 10px;
    box-sizing: border-box;
    text-align:left;
    z-index: 2;
    white-space: normal;  /* Allow text wrapping */
    overflow-wrap: break-word; /* Ensure long words break */

    line-height:100%;
}







.uc_featured-container {
    position: relative;
    width:100%; /* Ensure this matches the slide width */
    max-width:995px;
    overflow: hidden;
    background: #222;
    border-radius: 10px;
    padding: 20px;
	margin-left:auto;
	margin-right:auto;
    box-sizing: border-box;
}
.uc_featured-mobile {
overflow-x: auto; white-space: nowrap; display: flex; gap: 45px; padding: 10px;margin-left:auto;margin-right:auto;width:100%;max-width:995px;box-sizing: border-box;
}
.uc_featured {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
	max-height:800px;
    width:100%;
    box-sizing: border-box;
}

.uc_featured-item {	
	margin-right:auto;
	margin-left:auto;
    padding-left: 35px;
    padding-right: 20px;
    width:100%; /* Explicitly set width to match container */
    flex-shrink: 0; /* Prevents flexbox from resizing */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.uc_featured-img {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
}

.uc_featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.uc_featured-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center, 
        rgba(0, 0, 0, 0) 50%, 
        rgba(0, 0, 0, 0.2) 75%, 
        black 100%
    ),
    linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, black 100%);
    pointer-events: none; /* Ensures the overlay does not interfere with interactions */
}


.uc_featured_course-info {
    flex: 1;
    padding-left: 20px;
   
}

.uc_featured_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    z-index: 40;
}

.uc_featured_arrow-left {
    left: 10px;
}

.uc_featured_arrow-right {
    right: 10px;
}



.uc_featured_slide_card {
    background-color: #1a1a1a;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
	margin-left:auto;
	margin-right:auto;
    width:100%;
    max-width: 500px;
	max-height:800px;
    box-sizing: border-box;
}
.uc_feature_hdr {

	width:100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align:center;
    font-size: 12px;
    padding-bottom:5px;
    box-sizing: border-box;
}

.uc_feature_hdr_popular {
    background-color: #fcdc4d;
    color: black;
    font-size: 12px;
    margin:auto;

}

.uc_feature_hdr_label {
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 15px;
    white-space: nowrap;
    margin:auto;

}


.uc_feature_hdr_lessons {
    background-color: #4d4d4d;
    color: #ffffff;
    margin:auto;
    text-align:center;
    margin:auto;

}

.uc_feature_hdr_bookmark {
    width: 20px;
    height: 20px;
    border: 2px solid #fcdc4d;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
    margin:auto;
    text-align:center;

}

.uc_feature_hdr_bookmark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid #fcdc4d;
    border-bottom: 2px solid #fcdc4d;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
}
.uc_featured_slide_title {
    font-size: 24px;
    color: #ccc;
    font-weight: bold;
    margin-top:10px;
}
.uc_featured_slide_subtitle {
    font-size: 15px;
    color: #ccc;
    margin-bottom: 7px;
    line-height:110%;
	text-align:left;
	margin-top:10px;
    font-style: italic;

}
.uc_featured_slide_description {
    font-size: 14px;
    color: #aaa;
   text-align: left;
    margin-bottom: 20px;
    max-height: 200px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Custom scrollbar */
.uc_featured_slide_description::-webkit-scrollbar {
width: 8px;
}
.uc_featured_slide_rating {
    color: yellow;
    font-size: 18px;
    margin-bottom: 5px;
}
.uc_featured_slide_buttons {
    display: flex;
    justify-content: space-between;
    gap:10px;
}
.uc_featured_slide_button {
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    width: 48%;
    text-align: center;
    border: 2px solid white;
}

.uc_featured_slide_gift {
    background-color: transparent;
    color: white;
}

@media (max-width: 768px) {
    .uc_featured_slide_description {
    	display:none;
      	max-height:125px;
      	line-height:110%;
    }

.uc_featured_slide_buttons {
	display:block;
	width:100%;
	text-align:center;
}

.uc_featured-item {	
	margin-right:auto;
	margin-left:auto;
    padding-left: 0px;
    padding-right: 15px;
    width:100%;; /* Explicitly set width to match container */
    flex-shrink: 0; /* Prevents flexbox from resizing */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

}








.uc_myc_course-widget {
    height: 220px;
    width: 100% !important;
    position: relative;
    background: url('#MEDIASERVER#/17/rnd/bg/5s.jpg') center/cover no-repeat;
    position: relative;
    text-align: center;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.uc_course_header {
    width: 100%;
    height: 120px;
    background: url('#MEDIASERVER#/17/rnd/bg/5s.jpg') center/cover no-repeat;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    margin-bottom:20px;
}
.uc_course_header h1 {
line-height:100%;	
}

/* Lessons Progress Box Styling */
.uc_myc_progress {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 15px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.uc_myc_progress-box {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}







.uc_myc_course-header {
    position: relative;
    overflow: hidden;
    height:220px;
    backdrop-filter: blur(10px);

}

/* Blurred edge effect for seamless blending */
.uc_myc_course-header::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: url('#mediaserver#/17/rnd/bg/5s.jpg') center/cover no-repeat;
    filter: blur(25px) brightness(0.9);
    z-index: -1;

}

/* Soft gradient overlay for readability */
.uc_myc_course-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(5, 38, 104, 0.1), rgba(10, 147, 150, 0.1), rgba(148, 210, 189, 0.3));
    z-index: -1;
}

























.uc_myc_course-title {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    width: 90%;
    max-width: 425px;
}

.uc_myc_course-enter, .uc_myc_course-remove  {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #ffffff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.uc_myc_course-enter {
    background: linear-gradient(135deg, #28a745, #218838);
}

.uc_myc_course-remove  {
    background: linear-gradient(135deg, red, darkred);
    font-size:14px;
}

.uc_myc_course-enter:hover, .uc_myc_course-remove:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.uc_myc_course-enter a, .uc_myc_course-remove a {
    text-decoration: none;
    color: #ffffff;
}
/* Remove default hyperlink behaviors */

.uc_myc_course-enter a:link,
.uc_myc_course-enter a:visited,
.uc_myc_course-enter a:hover,
.uc_myc_course-enter a:active {
    text-decoration: none;
    color:#ffffff;
}


@media (max-width: 768px) {	
.uc_course_header h1 {
font-size:22px !important;
}


}










.uc_curriculum_underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #007bff;
  width: 0;
  transition: width 0.4s ease;
  max-width: 995px;
}


/* ---------------------
   CURRICULUM CONTAINER
---------------------- */
.uc_curriculumn_container {
  max-width: 995px;
  margin: auto;
  margin-bottom: 10px;
  background: #222;
  padding: 20px 20px 5px 20px;
  border-radius: 10px;
  color: #ffffff;
  box-sizing: border-box;
}

.uc_curriculumn_container h2 {
  text-align: center;
  color: #ffffff;
  font-size: 19px;
  font-weight: bold;
  padding: 10px 20px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 2px solid #D4AF37; /* Gold underline */
}

/* ---------------------
   CURRICULUM SPLIT AREA
---------------------- */
.uc_curriculum_split {
  display: flex;
  background: #333;
  color: #ffffff;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* ---------------------
   LESSON HEADERS & CONTENT
---------------------- */
.uc_curriculumn_section-header {
  display: block;
  width: 100%;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
}

.uc_curriculumn_section-content {
  display: none;
  color: #ffffff;
  margin-top: 10px;
  padding-left: 15px;
}

/* ---------------------
   VIDEO THUMBNAILS
---------------------- */
.uc_curriculumn_video {
  text-align: center;
}

.uc_curriculumn_video img {
  width: 100%;
  height: auto;
  max-width: 175px;
  border-radius: 5px;
  margin: auto;
  color: #ffffff;
}

/* ---------------------
   ICON AND BUTTON
---------------------- */
.uc_curriculumn_toggle-icon {
  font-size: 18px;
}

.uc_curriculum_seemore {
  font-size: 17px;
  font-weight: bold;
  background-color: #333333;
  color: #cccccc;
  padding: 8px;
  border-radius: 3px;
  display: block;
}

/* ---------------------
   NAVIGATION STYLES
---------------------- */
.uc_curriculum_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
  margin: auto;
  max-width: 995px;
  position: relative;
}

.uc_curriculum_nav a {
  color: #777;
  text-decoration: none;
  font-size: 18px;
  font-weight: normal;
  margin: 0 20px;
  position: relative;
}

.uc_curriculum_nav a.active {
  color: #fff;
  font-weight: bold;

}

/* ---------------------
   DIVIDERS AND LINES
---------------------- */
.uc_curriculum_divider {
  width: 2px;
  height: 25px;
  background-color: #007bff;
}

.uc_curriculum_bottom-line {
  position: absolute;
  bottom: 0;
  width: 80%;
  max-width: 600px;
  height: 2px;
  /* background-color: #007bff; uncomment if needed */
}


.uc_curriculum_header-container {

margin-left:auto;
margin-right:auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #121212;
  border-bottom: 2px solid #f5c518;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);

}

.uc_curriculum_header-info {
  color: #ffffff;
}

.uc_curriculum_header-title {

line-height:112%;
  font-size: 35px;
  font-weight: bold;
  margin: 0;
  color: #f5c518;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.uc_curriculum_header-crn {
  font-size: 23px;
  color: #cccccc;
  margin-top: 10px;
  padding-top:3px;
}

.uc_curriculum_header-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-in-out;
 max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  background-color: #fff;
  padding: 5px;
}

@media (max-width: 768px) {
	
	.uc_curriculum_header-title {
	    font-size: 24px;
	}
		
	.uc_curriculum_header-crn {
		    font-size: 19px;	
	}
}







.uc_flip-card {
	width:100%;
	max-width: 550px;
    height: 250px;
    perspective: 1000px;
    position: relative;
    display: inline-block; /* Ensures multiple cards align properly */
 
}

.uc_flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    transform-origin: center; /* Ensures it flips exactly in place */
}

.uc_flipped .uc_flip-card-inner {
    transform: rotateY(180deg);
}

.uc_flip-card-front, .uc_flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    box-sizing: border-box; /* Ensures padding doesn't cause shifts */
/*
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
*/

}

/* Front Side */
.uc_flip-card-front {
/*    background: linear-gradient(to bottom, #444, #666);
    color: white;
*/
    position: absolute;
    top: 0;
    left: 0;
}

.uc_flip-card-front img {
    width: 100%;
    height: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.uc_flip-card-front h3 {
    margin: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* Back Side */
.uc_flip-card-back {
/*
    background: linear-gradient(to bottom, #555, #777);
    color: white;
*/
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
}

/* Gear Icon (Both Sides) */
.uc_gear-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
    padding: 5px;
    transition: background 0.3s;
    box-sizing: border-box;
    border: 1px solid transparent;
    z-index:100;

}

.uc_gear-icon:hover {
    border: 1px solid #cccccc;
}








.uc_collage {
    max-width:995px;
    width:100%;
    background: #1a1a1a;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
    position: relative;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    margin-top:5px;
    padding-top:0px;
	box-sizing: border-box;
}
.uc_collage_title {
	width:50%;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
    color:#ffffff;
    display: flex;
    align-items: flex-end; /* Aligns items at the top */
    gap: 10px; /* Adjust spacing between elements */    
}
 
.uc_collage_title img {
	margin-left:20px;
    height:45px;
    width:auto;
	position:relative;
	top:5px;
}
.uc_collage_subtitle {
	width:50%;
    font-style: italic;
    color: #b3b3b3;
    margin-bottom: 20px;
}
.uc_collage_content {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    color:#ffffff;

}
.uc_collage_text-box {
    flex: 1 1 50%;
    background: #262626;
    padding: 20px;
    border-radius: 8px;
    line-height:1.3;
}
.uc_collage_text-box strong {
    color: #ffd700;
}
.uc_collage_images {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left:20px;
}
.uc_collage_image-wrapper {
    position: absolute;
    width: 140px;
    height: 180px;
}
.uc_collage_image-wrapper:nth-child(1) {
        width: 190px;
        height: 220px;
        left: 10px;
        top: -30px;
    z-index: 1;
}
.uc_collage_image-wrapper:nth-child(2) {
        width: 190px;
        height: 220px;
        left: 130px;
        top: -90px;
    z-index: 2;
}
.uc_collage_image-wrapper:nth-child(3) {
        width: 190px;
        height: 210px;
        left: 240px;
        top: 20px;
    z-index: 3;
}
.uc_collage_image-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 8px;
}
.uc_collage_image-wrapper img {
    width: 100%;
    height: 80%;
    object-fit: cover;
    border-radius: 8px;
    position: absolute;
    transition: transform 0.3s ease-in-out;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0));
}
.uc_collage_buttons {
    margin-top: 20px;
}
.uc_collage_buttons a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    background: #ff7b00;
    margin-right: 10px;
    transition: 0.3s;
}
.uc_collage_buttons a:hover {
    background: #e66a00;
}


@media (max-width: 768px) {
	.uc_collage_images {
		display:none;
	}
	.uc_collage_content, .uc_collage_subtitle, .uc_collage_buttons
	{
		width:100%;
		display:block;
	}
	.uc_collage_title
	{
		width:100%;
		font-size:25px;
	}
}





.uc_abtmore_container {
    max-width: 995px;
    padding: 20px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
    color:#ffffff;
}
.uc_abtmore_title {
    font-size: 3rem;
    font-weight: 500;
    color: #3752e3;
	text-align:center;
}
.uc_abtmore_text {
    font-size: 25px;
    line-height:120%;
    text-align:center;
    margin-top: 20px;
    color: #d1d1d1;
	width:70%;
	margin:auto;
}
.uc_abtmore_image {
    margin-top: 30px;
	width:30%;
	text-align:center;
}
.uc_abtmore_image img {
    width: 100px;
    height: auto;
    margin:auto;
}
.uc_abtmore_box {
	width:100%;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	gap:30px;	
	text-align:center;
}
@media (max-width: 768px) {
    .uc_abtmore_title {
        font-size: 2rem;
    }
    .uc_abtmore_text {
        font-size: 1rem;
    }
    .uc_abtmore_image img {
        width: 80px;
    }
}




.uc_skll_container {
    position: relative;
    width: 100%;
    max-width: 995px;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 20px;
    color: #ffffff;
    background: url('https://m.universalclass.com/30/default/image10.jpg') no-repeat center center;
    background-size: cover;
    flex-direction: row;
}

.uc_skll_sidebar {
    width: 40%;
}

.uc_skll_button {
    width: auto;
    margin-right: 20px;
}

.uc_skll_overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* This dims only the background */
    z-index: 1;
}

.uc_skll_sidebar,
.uc_skll_content {
    position: relative;
    z-index: 2; /* Ensures content stays above the dimmed background */
}

.uc_skll_sidebar {        	
    background-color: rgba(10, 10, 10, 0.9);
    padding: 30px;
    border-radius: 10px;
    width: 35%;
    line-height: 104%;
}

.uc_skll_content {
	margin-top:10px;
    width: 65%;
    flex-grow: 1;
    padding: 50px;
    text-align: left;
    font-size:20px;
	line-height:125%;
}

.uc_skll_heading {
    font-size: 2em;
    text-align:center;
}

.uc_skll_membership {
    text-align: center;
    font-size: 23px;
    font-style: italic;
    margin-bottom: 7px;
}

.uc_skll_feature {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.uc_skll_feature img {
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    filter: brightness(0) saturate(100%) invert(58%) sepia(93%) saturate(749%) hue-rotate(20deg) brightness(105%) contrast(95%);

}

.uc_skll_feature div {
    max-width: 200px;
    width: 15%;
    text-align: center;
}

.uc_skll_feature p {
    width: 85%;
}

.uc_skll_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center
    align-items: center;
    margin-top: 20px;
    overflow:hidden:
    width:100%;
    text-align:center;
}


.uc_skll_target {
	display:block;
	z-index:20;
	position:absolute;
	top:-35px;
	left:-35px;
}

.uc_skll_target img {
	width:75px;		
	height:auto;
}

@media (max-width: 768px) {
	.uc_skll_container{
		display:block;
	}
	.uc_skll_target {
		display:none;
	}
    .uc_skll_sidebar {
      	width:100%;
      	display:block;
    }
    .uc_skll_content {
    	display:block;
    	width:100%;
    	text-align:left;
    	padding:0px;
    }
    .uc_skll_heading {
    	font-size:27px;
    }
    .uc_skll_buttons {    	
   	    flex-direction: column;
		text-align:center;
		align-items:cetner;
		gap:15px;
    }

}		





.uc_crn_cover-container {
    display: flex;
    width:100%;
    max-width: 995px;
    background-color: #111;
    border-radius:9px;
    overflow: hidden;
	margin-left:auto;
	margin-right:auto;
    color:#eeeeee;
    box-sizing: border-box;
}

/* New parent wrapper with padding */
.uc_crn_cover-image-wrapper {
    width: 40%;
    padding: 15px; /* Adjust as needed */
    box-sizing: border-box;
}
.uc_crn_cover-image {
    background: url('https://m.universalclass.com/17/rnd/bg/5s.jpg') no-repeat center center/cover;
    position: relative;
    width: 85%;
    height: 100%;
    max-width: 300px;
    max-height: 600px;
    padding: 20px;
    display: block;
    margin-left: auto;
    border-radius:7px;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden; /* Ensures the border-radius applies correctly */
}

/* Full gradient overlay covering all edges */
.uc_crn_cover-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, 
        rgba(0, 0, 0, 0.6) 5%,  /* Dark center fade */
        rgba(0, 0, 0, 0) 40%,  /* Transparent middle */
        rgba(0, 0, 0, 0.8) 100%  /* Dark edges */
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.8)), 
    linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.8));
    pointer-events: none; /* Ensures it does not interfere with interactions */
}

.uc_crn_cover-image-content {
  position: relative;
  width: 100%;
  height: 100%;

}


/* Top Bubble */
.uc_top_choice_wrap {
  position: absolute;
  width:100%;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}

/* Bottom-aligned title + subtitle */
.uc_crn_cover-text {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  border-radius:5px;
  padding:15px
  text-align: center;
  color: white;
    background: rgba(0, 0, 0, 0.6);
    color:#ffffff;

}

.uc_crn_cover-text h2 {
	line-height:99%;
	text-align:left;
  margin: 0;
  font-size: 24px;
  padding:10px;
}

.uc_crn_cover-text p {
	line-height:102%;
	margin-top:5px;
	text-align:left;
	margin:0px;
  padding:10px;
 font-style: italic;
  font-weight: 400; /* not too bold */
  font-family: 'Georgia', 'Times New Roman', serif; /* adds elegance */
  font-size: 1.05em; /* optional subtle size bump */
  letter-spacing: 0.3px; /* slightly more breathing room */
}















.uc_crn_cover-details {
    width: 60%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.uc_crn_cover-details-image {
	width:100%;
    box-sizing: border-box;
    overflow: hidden; /* Ensures the border-radius applies correctly */
	display:none;
}

.uc_crn_cover-details-image img {
	width:90%;
	height:auto;
	border-radius:11px;
	padding:3px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.uc_crn_cover_most-popular {
    background: yellow;
    color: black;
    padding: 4px 7px;
    border-radius: 15px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    text-align:center;
    max-width:150px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    font-size:15px;
}

.uc_crn_cover-title {
    font-size: 26px;
    font-weight: bold;
}

.uc_crn_cover-subtitle {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 15px;
}

.uc_crn_cover-description {
    font-size: 14px;
    color: #ddd;
	width:100%;
    line-height: 1.6;
	margin-top:0px;
    max-height: 200px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}


/* Custom scrollbar */
.uc_crn_cover-description::-webkit-scrollbar {
    width: 8px;
}

.uc_crn_cover-description::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

.uc_crn_cover-description::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #2a2a2a;
}



.uc_crn_cover-rating {
    margin: 10px 0;
    font-size: 16px;
    color: gold;
    display: flex;
    align-items: center;
}

.uc_crn_cover-stars {
    margin-left: 5px;
}

.uc_crn_cover-stars span {
    font-size: 20px;
}

.uc_crn_cover-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.uc_crn_btn {
    padding: 15px 20px;
    font-size: 15px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    width: 50%;
    text-transform: uppercase;
    background-color:#2a2a2a;
}
.uc_crn_btn:hover {
	text-decoration:none;
}
.uc_crn_cover-btn-primary {
    border: 2px solid blue;
    color: white;
}

.uc_crn_cover-btn-primary:hover {
    background: blue;
    color: white;
}

.uc_crn_cover-btn-secondary {
    border: 2px solid green;
    color: white;
}

.uc_crn_cover-btn-secondary:hover {
    background: green;
    color: white;
}

.uc_crn_cover-plan {
    text-align: center;
    margin-top: 15px;
}

.uc_crn_cover-plan a {
    color: yellow;
    text-decoration: none;
    border: 2px solid yellow;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    font-weight: bold;
}

.uc_crn_cover-plan a:hover {
    background: yellow;
    color: black;
}


    .uc_crn_price_card {
      background-color: #12151c;
      padding: 15px;
      text-align: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      margin-top:7px;
      width:90%;
      border-radius: 20px;
      margin-left:auto;
      margin-right:auto;
    }

    .uc_crn_price_info {
      color: #ccc;
      font-size: 15px;
      margin-bottom: 20px;
    }

    .uc_crn_price_row {
    width:100%;
     max-width:320px;
    margin-left:auto;
    margin-right:auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

.uc_crn_price_price_tag {
  background: linear-gradient(
    to right,
    rgba(0, 29, 220, 0.25),
    rgba(80, 100, 255, 0.15)
  );
  color: white;
  font-weight: bold;
  font-size: 24px;
  padding: 14px 26px;
  border-radius: 40px;
  border: 1px solid #001DDC;
  margin-right: 15px;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 29, 220, 0.1); /* faint glow */
  backdrop-filter: blur(2px);
}

    .uc_crn_price_rating_block {
      text-align: center;
    }

    .uc_crn_price_rating {
      display: flex;
      align-items: center;
      font-size: 15px;
      margin-bottom: 4px;
    }

    .uc_crn_price_stars {
      color: gold;
      margin-left: 6px;
    }

    .uc_crn_price_star {
      font-size: 16px;
      margin-right: 2px;
    }

    .uc_crn_price_quote {
      font-style: italic;
      font-size: 14.5px;
      color: #f5f5f5;
      margin-bottom: 6px;
      text-align: left;
    }

    .uc_crn_price_students {
      font-size: 13.5px;
      color: #aaa;
      width:100%;
     	margin-bottom:10px;
      text-align: center;
    }

	.uc_crn_price_bttns 
	{
		clear:both;display:flex;align-items:center;justify-content:center;max-width:400px;margin-top:10px;gap:20px;	
	}


@media (max-width: 768px) {
.uc_crn_cover-image-wrapper {	
	display:none;	
}
.uc_crn_cover-details {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:7px;
}
.uc_crn_cover-details-image
{
	display:block;
}
.uc_crn_cover-details-image-wrapper {
    position: relative;
    width: 90%;
    margin: 0 auto;
    border-radius: 11px;
    overflow: hidden;
}
.uc_crn_cover-details-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 11px;
    z-index: 1;
    background: radial-gradient(circle, 
        rgba(0, 0, 0, 0.5) 10%,  
        rgba(0, 0, 0, 0) 40%,  
        rgba(0, 0, 0, 0.8) 100%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 25%, transparent 75%, rgba(0, 0, 0, 0.7)),
    linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.7));
}

.uc_crn_cover-details-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 11px;
    position: relative;
    z-index: 0;
}
.uc_crn_cover-buttons {
display:block;
width:100%;
text-align:center;	
}

}





.uc_desc_area {
    display: flex;
    gap: 20px;
    justify-content: center;
    color:#ffffff;
    width:100%;
    max-width:995px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.uc_desc_card {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	width:40%;
}

.uc_desc_card2 {
	width:50%;
    background-color: #1a1a1a;
    padding: 20px;
    padding-top: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}


.uc_desc_card h2 {
    font-size: 24px;
	margin-bottom:0px;
	display:inline-block;
	padding-bottom:10px;
}


.uc_desc_card ul {
    list-style: none;
    padding: 0;
}

.uc_desc_card li {
    display: flex;
    align-items: center;
    margin: 10px 0;
    line-height:100%;
}


.uc_desc_card li img {
	width:35px;
	height:auto;
	padding-right:10px;
	display:inline-block;
}

.uc_desc_card li::before {
/*    content: '\2713'; */
    margin-right: 10px;
    color: #00aaff;
}

.uc_desc_scrll {
	width:100%;
    line-height: 1.6;
	margin-top:0px;
    max-height: 510px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}


/* Custom scrollbar */
.uc_desc_scrll::-webkit-scrollbar {
    width: 8px;
}

.uc_desc_scrll::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

.uc_desc_scrll::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #2a2a2a;
}
.uc_desc_lightbulb {
	width:50px;
	height:auto;
  position: absolute;
  top: 1px;
  right:-70px;
 }


@media (max-width: 768px) {
.uc_desc_card, .uc_desc_card2, .uc_desc_area {
	display:block;
	width:100%;	
}

.uc_desc_scrll {
	width:100%;
    line-height: 1.6;
	margin-top:0px;
    max-height: 310px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}

}




.crnskills {
    list-style: none !important;
    padding: 0;
    margin: 0;
    color:#ffffff;
}

.crnskillcard h2 {
    color:#ffffff;

}
.crnskills li {
    list-style: none !important;

    display: inline-block;
    margin: 5px;
    padding: 10px 15px;
    background-color: #252525;
    border: 2px solid #00aaff;
    border-radius: 20px;
    font-size: 14px;
    color: #ffffff;
}

.crnskillcard li::before {
content: '' !important;
margin-right: 0 !important;
}
.crnskilldesc {
	width:100%;
    line-height: 1.6;
	margin-top:0px;
    max-height: 510px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}


/* Custom scrollbar */
.crnskilldesc::-webkit-scrollbar {
    width: 8px;
}

.crnskilldesc::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

.crnskilldesc::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #2a2a2a;
}




.uc_discover {
    width: 100%;
    max-width: 995px;
    padding-top: 10px; /* Adds space between previous section */
    padding-bottom: 40px; /* Ensures spacing before next section */
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px; /* Adds space between H1 and the next section */
    box-sizing: border-box;
    text-align:center;
    color:#ffffff;
}
.uc_discover h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-align:center;
}
.uc_discover p {
    font-size: 1rem;
    color: #bbb;
    margin-bottom: 30px;
    text-align:center;
}






.uc_unlmtd_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-family: Arial, sans-serif;
    width: 100%;
    max-width: 995px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}



    .uc_unlmtd_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
    }
    .uc_unlmtd_text {
        padding: 40px;
    }
    .uc_unlmtd_heading {
        text-align: center;
    }


.uc_unlmtd_image_container, .uc_unlmtd_text {
    flex: 1;
}

.uc_unlmtd_image {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.uc_unlmtd_text {
    padding: 20px;
}

.uc_unlmtd_heading {
    font-size: 2.5rem;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
    line-height: 95%;
}

.uc_unlmtd_highlight {
    font-style: italic;
}

.uc_unlmtd_heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -25px;
    width: 120%;
    height: 20px;
    background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 80%);
    transform: translateX(-50%);
    border-radius: 50%;
}

.uc_unlmtd_paragraph {
    font-size: 1.2rem;
    margin-top: 10px;
}

.uc_unlmtd_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid yellow;
    color: white;
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
}

.uc_unlmtd_button:hover {
    background: yellow;
    color: black;
}

.uc_unlmtd_bttns {
    margin-top: 7px;
    margin-bottom: 7px;
    padding: 3px;
    width: 100%;
    display: flex;
    justify-content: center; /* Ensures the button is centered */
    align-items: center;
}

@media (max-width: 768px) {
.uc_unlmtd_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.uc_unlmtd_heading {
	font-size:31px;	
}
}





.uc_grpsplsh_container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    width:100%;
    max-width:995px;
    margin-left:auto;
    margin-right:auto;
}
.uc_grpsplsh_content {
    display: flex;
    flex-direction: column;
    background: #11131a;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
}
.uc_grpsplsh_image {
    width: 100%;
}
.uc_grpsplsh_image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.uc_grpsplsh_text {
    padding: 20px;
    text-align: center;
    position: relative;
}
.uc_grpsplsh_text h1 {
    font-size: 28px;
	margin-bottom:10px;
    font-weight: bold;
    line-height:95%;
}
.uc_grpsplsh_text span {
    color: #00a2ff;
    font-style: italic;
}
.uc_grpsplsh_logo {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #00a2ff;
    border-radius: 50px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
}
.uc_grpsplsh_desc {
    margin-top: 20px;
    font-size: 14px;
}
.uc_grpsplsh_desc strong {
    font-weight: bold;
}
.uc_grpsplsh_underline {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: linear-gradient(to right, transparent, #00a2ff, transparent);
    border-radius: 50%;
}
@media (min-width: 768px) {
    .uc_grpsplsh_content {
        flex-direction: row;
    }
    .uc_grpsplsh_image {
        width: 50%;
    }
    .uc_grpsplsh_text {
        width: 50%;
        text-align: left;
        padding: 40px;
    }
    .uc_grpsplsh_text h1 {
        font-size: 36px;
    }
    .uc_grpsplsh_logo {
        font-size: 18px;
    }
    .uc_grpsplsh_desc {
        font-size: 16px;
    }
    .uc_grpsplsh_underline {
        width: 100%;
        left: 0;
        transform: none;
    }
}





.uc_gftsplsh_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 50px;
    max-width: 995px;
    margin: auto;
    color:inherit;
}
.uc_gftsplsh_text-section {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}
.uc_gftsplsh_text-section h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height:95%;
}
.uc_gftsplsh_text-section em {
    font-style: italic;
}
.uc_gftsplsh_text-section p {
    font-size: 1rem;
    margin: 20px 0;
    line-height: 1.6;
}
.uc_gftsplsh_btn {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid #00FF66;
    padding: 10px 30px;
    font-size: 1.2rem;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 20px;
    cursor: pointer;
}
.uc_gftsplsh_btn:hover {
    background-color: #00FF66;
    color: black;
}
.uc_gftsplsh_btn::before {
    content: '\1F381'; /* Gift Icon */
    margin-right: 10px;
}
.uc_gftsplsh_image-section {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.uc_gftsplsh_image-section img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
}
@media (max-width: 768px) {
	.uc_gftsplsh_text-section h1 {
		font-size:31px;	
	}
    .uc_gftsplsh_container {
        flex-direction: column;
        text-align: center;
    }
    .uc_gftsplsh_btn {
        display: block;
        margin: auto;
    }
}





.uc_hdr-container {
    text-align: left;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    color:#ffffff;
    width:100%;
    max-width:995px;
    margin-top:15px;
    margin-bottom:4px;
	padding-right:15px;
	padding-left:15px;
	box-sizing: border-box;

}
.uc_hdr {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.uc_hdr img {
	border:0;        	
    margin-left: 8px;
    font-size: 24px;
    width:100%;
   	height:auto;
    max-width:85px;
    max-height:40px;
}
.uc_hdr-container .subtext {
	width:100%;
    font-size: 14px;
    color: #aaa;
    margin-top: 5px;
    text-align:right;
	font-style: italic;        
	line-height:105%;    
}





.uc_hdrcstm-container {
    text-align: left;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 995px;
    margin-top: 40px;
    margin-bottom: 4px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
	color: inherit;
}
.uc_hdrcstm {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: flex-end; /* Align by the bottom */
    margin-bottom:5px;
}
.uc_hdrcstm img {
    border: 0;
    margin-left: 8px;
    font-size: 24px;
    width: auto;
    max-height: 70px;
    position:relative;
    top:20px;
}
.uc_hdrcstm-container .subtext {
    width: 100%;
    font-size: 14px;
    color: #aaa;
    margin-top: 5px;
    text-align: right;
    font-style: italic;
}

@media (max-width: 768px) {
	.uc_hdrcstm-container {
		margin-top:20px;	
	}
	.uc_hdrcstm {
		font-size:21px;
	}
	.uc_hdrcstm img {	
	    width: auto;
	    max-height: 50px;	
	}
}





.uc_hdrcstm_nm-container {
    color: #ffffff;
    text-align: left;
    position: relative;
    width: 100%;
    max-width: 995px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 15px;
	padding-top:0px;
	padding-bottom:0px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
.uc_hdrcstm_nm {

	margin-top:0px;
	padding-top:0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: flex-start; /* Align by the bottom */
    margin-bottom:15px;
}
.uc_hdrcstm_nm img {
	
    border: 0;
    margin-left: 15px;
    font-size: 24px;
    width: auto;
    max-height: 70px;
    position:absolute;
    top:-20px;
}

@media (max-width: 768px) {

	.uc_hdrcstm_nm {
		font-size:21px;
	}
	.uc_hdrcstm_nm img {	
	    margin-left: 4px;
	    font-size: 15px;
	    width: auto;
	    max-height: 40px;
	    top:-5px;	
	}
}





.uc_hpsignup {
	margin-left:auto;
	margin-right:auto;
	width:80%;
	max-width: 995px;
	text-align:center;
	clear:both;
    margin-top: 40px; /* Ensures it doesn’t overlap with previous section */
    padding-top: 20px; /* Adds breathing room */
}
.uc_hpsignup h1 {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 10px;
    color:#ffffff;
}

.uc_hpsignup p {
    font-size: 1rem;
    color: #bbb;
    margin-bottom: 25px;
}

/* uc_hpsignup_buttons Container */
.uc_hpsignup_buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Button Base Style */
.uc_hp_btn {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid;
    border-radius: 25px;
    background: transparent;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    min-width: 140px;
    text-align: center;
    transition: 0.3s ease-in-out;
}

/* Button Variants */
.uc_hp_btn-signup { border-color: #FFD700; color: #FFD700; }
.uc_hp_btn-signup:hover { background: #FFD700; color: black; }

.uc_hp_btn-gift { border-color: #28a745; color: #28a745; }
.uc_hp_btn-gift:hover { background: #28a745; color: black; }

.uc_hp_btn-group { border-color: #FF5733; color: #FF5733; }
.uc_hp_btn-group:hover { background: #FF5733; color: black; }

.uc_hp_btn-explore { border-color: #1E90FF; color: #1E90FF; }
.uc_hp_btn-explore:hover { background: #1E90FF; color: black; }

/* uc_hp_divider */
.uc_hp_divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    color: #555;
}

.uc_hp_divider-line {
    width: 40%;
    height: 1px;
    background-color: #555;
}

.uc_hp_divider-text {
    font-size: 0.9rem;
    font-weight: bold;
}

/* uc_hp_subtext */
.uc_hp_subtext {
    font-size: 1.4rem;
    font-style: italic;
    color: #bbb;
    margin-bottom: 30px;
    margin-top:40px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.uc_hpsignup h1 {
        font-size:25px;
		
	}
    .uc_hpsignup_buttons-container {
        flex-direction: column;
        margin:auto;
        text-align:center;
	    justify-content: center;
	    align-items: center;
    }
}







.uc_bttn_explr_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.uc_bttn_explr_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/explorebutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    width: 100%;
    text-align: center;
    padding-top:21px;
    overflow:hidden;
 	width:200px;
	height:80px
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.uc_hdr.animate-on-load img {
    animation: slideFadeIn 1s ease-out forwards;
}

.uc_bttn_explr_button::before {
    content: '';
    position: absolute;
    top: 65%;
    left: 50%;
    width: 100%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 255, 0.4) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease-in-out;
}

.uc_bttn_explr_button:hover::before {
    opacity: 1;
    animation: haloPulse 1.2s ease-in-out infinite;
}

@keyframes haloPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}





.uc_bttn_sgnup_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.uc_bttn_sgnup_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/lightbulbbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top:21px;
    overflow:hidden;
 	width:200px;
	height:80px;

}



.uc_bttn_cart_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.uc_bttn_cart_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/cartbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: normal;
    color: white;
    width: 100%;
    text-align: center;
    padding-top: 15px;
    overflow: hidden;
 	width:150px;
	height:80px;
}



.uc_bttn_prsnl_container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    width: 100%;
    max-width: 220px;
}

.uc_bttn_prsnl_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/personbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: inherit;
    text-align: center;
    padding-top: 21px;
    overflow: hidden;
 	width:200px;
	height:80px

}

@media (max-width: 768px) {
	.uc_bttn_prsnl_container {	
		margin-top:20px;
		max-width: 170px;
		width:100%;
		margin-left:auto;
		margin-right:auto;
		
	}
	.uc_bttn_prsnl_button {
		font-size: 15px;
	}
}



.uc_bttn_managecourses_container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    width: 100%;
    max-width: 220px;
    margin-left:auto;
    margin-right:auto;
}

.uc_bttn_managecourses_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/managecoursesbutton.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 22px;
    overflow: hidden;
 	width:200px;
	height:80px
}
/* Optional: Adjust color on hover */
.uc_bttn_managecourses_button:hover {

}

@media (max-width: 768px) {
	.uc_bttn_managecourses_container {	
		margin-top:20px;
		max-width: 170px;
		margin-left:auto;
		margin-right:auto;	
	}
	.uc_bttn_managecourses_button {
		font-size: 15px;
	}
}



.uc_bttn_info_container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    width: 100%;
    max-width: 220px;
}

.uc_bttn_info_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/magnifybutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 22px;
    overflow: hidden;
 	width:200px;
	height:80px
}
/* Optional: Adjust color on hover */
.uc_bttn_info_button:hover {

}

@media (max-width: 768px) {
.uc_bttn_info_container {	
	margin-top:20px;
	max-width: 170px;
	margin-left:auto;
	margin-right:auto;
	
}
.uc_bttn_info_button {
	font-size: 15px;
}

}




.uc_bttn_group_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.uc_bttn_group_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/groupbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    width: 100%;
    text-align: center;
    padding-top:15px;
    overflow:hidden;
 	width:220px;
	height:80px
}

 
.uc_bttn_gift_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 220px;
}

.uc_bttn_gift_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/giftbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    width: 200px;
    height: 80px;
    text-align: center;
    padding-top: 21px;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    will-change: transform, opacity; /* Suggest to browser this will animate */
    isolation: isolate; /* This is KEY to prevent affecting siblings */
}

.uc_bttn_gift_button::before {
    content: '';
    position: absolute;
    top: 65%;
    left: 50%;
    width: 80%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 247, 240, 0.3) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease-in-out;
}

.uc_bttn_gift_button:hover::before {
    opacity: 1;
    animation: haloPulse 1.2s ease-in-out infinite;
}

@keyframes haloPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}





.uc_bttn_checked_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.uc_bttn_checked_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/checkedbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: normal;
    color: white;
    width: 100%;
    text-align: center;
    padding-top: 15px;
    overflow: hidden;
 	width:150px;
	height:80px;
}




.uc_bttn_add_container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    width: 100%;
    max-width: 220px;
}

.uc_bttn_add_button {
    position: relative;
    background: url('https://m.universalclass.com/30/bttns/addcartbutton-grdnt.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 21px;
    overflow: hidden;
 	width:200px;
	height:80px
}


@media (max-width: 768px) {
.uc_bttn_add_container {	
	margin-top:20px;
	max-width: 170px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	
}
.uc_bttn_add_button {
	font-size: 15px;
}

}




.uc_gold_gradient_bar {
    width: 80px;
    height: 11px;
    background: linear-gradient(90deg, #FFD700, gold);
	margin-top:10px;
    margin-bottom: 10px;
    border-radius: 3px;
    text-align: left;
}



.uc_blue_gradient_bar {
    width: 80px;
    height: 11px;
    background: linear-gradient(90deg, #4a90e2, #1a73e8);
	margin-top:10px;
    margin-bottom: 20px;
    border-radius: 3px;
    text-align: left;
}



.uc_swish_bar {
    margin-top: 10px;
    width: 185px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
    filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(900%) hue-rotate(180deg) brightness(98%) contrast(97%);
    
    /* Apply a mask gradient to fade out the tail */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
}







.crnskillarea {
    display: flex;
    gap: 20px;
    justify-content: center;

    color:#ffffff;
    width:95%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.crnskillcard {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.crnskillcard h2 {
    font-size: 24px;

    display: inline-block;
    padding-bottom: 5px;
}

.crnskillcard ul {
    list-style: none;
    padding: 0;
}

.crnskillcard li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.crnskillcard li::before {
    content: '\2713';
    margin-right: 10px;
    color: #00aaff;
}



.crnskills {
    list-style: none !important;
    padding: 0;
    margin: 0;
    color:#ffffff;
}

.crnskillcard h2 {
    color:#ffffff;

}
.crnskills li {
    list-style: none !important;

    display: inline-block;
    margin: 5px;
    padding: 10px 15px;
    background-color: #252525;
    border: 2px solid #00aaff;
    border-radius: 20px;
    font-size: 14px;
    color: #ffffff;
}

.crnskillcard li::before {
content: '' !important;
margin-right: 0 !important;
}
.crnskilldesc {
	width:100%;
    line-height: 1.6;
	margin-top:0px;
    max-height: 510px; /* Limit the height */
    overflow-y: auto; /* Enable vertical scrolling */
}


/* Custom scrollbar */
.crnskilldesc::-webkit-scrollbar {
    width: 8px;
}

.crnskilldesc::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 10px;
}

.crnskilldesc::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #2a2a2a;
}



 
.crn_faq {
	color:#ffffff;
    display: flex;
    justify-content: space-around;
    gap:20px;
    width:100%;
    max-width:995px;
    margin-left:auto;
    margin-right:auto;
    box-sizing: border-box;
}

.crn_faq h2
{   
	font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 3px solid #00aaff;
    display: inline-block;
    padding-bottom: 5px;
}

.crn_faq_box {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width:995px;
    crn_faq_box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.crn_faq_box ul {
    list-style: none;
    padding: 0;
    width:100%;
    max-width:995px;
    box-sizing: border-box;
}

.crn_faq_box li {
    margin: 10px 0;
}

.crn_faq_box li::before {
    content: '\2714';
    color: #d4af37;
    margin-right: 10px;
}

.crn_faq_highlight {
    color: #d4af37;
}

.crn_faq_box a {
    color: #d4af37;
    text-decoration: none;
    font-weight: bold;
}

@media (max-width: 768px) {
	.crn_faq {
    box-sizing: border-box;
		display:block;
		width:100%;
		margin-left:auto;
		margin-right:auto;	
	}
}




.uc_testimonial_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px;
  gap: 20px;
  background-color: #111;
}

.uc_testimonial_card {
  background-color: #1e1e1e;
  border-radius: 12px;
  color: #fff;
  padding: 24px;
  width: 400px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.uc_testimonial_header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.uc_testimonial_initials {
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 16px;
}

.uc_testimonial_title {
  font-size: 18px;
  font-weight: 600;
}

.uc_testimonial_stars {
	font-size:28px;
  text-align:center;
  color: gold;
  margin: 8px 0;
}

.uc_testimonial_text {
  font-size: 14px;
  line-height: 1.5;
  color: #ccc;
}

.uc_testimonial_footer {
  margin-top: 16px;
  font-style: italic;
  font-size: 14px;
  color: #aaa;
}

.uc_testimonial_see_less {
  color: #3b82f6;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  display: inline-block;
  cursor: pointer;
}





.uc_search_results {
	overflow:hidden;
    background: #222;
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    display:block;	
    max-width:995px;
	box-sizing: border-box;
}
.uc_srch_card_link {
    text-decoration: none;
    color: inherit;
    display:block;	
    margin-bottom:30px;
    margin-top:10px;
}
.uc_srch_card {
    display: flex;
    background: #222;
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    color: white;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width:995px;
	box-sizing: border-box;
}


/* Card Image */
.uc_srch_card img {
    width: 90px;
    height: 130px;
    border-radius: 10px;
    margin-right: 15px;
object-fit: cover;
}

/* Card Content */
.uc_srch_card_content {
    flex: 1;
}

.uc_srch_card_title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

.uc_srch_card_subtitle {
    font-size: 14px;
    color: #bbb;
    margin-bottom: 10px;
}

.uc_srch_card_description {
    font-size: 13px;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Badge Container */
.uc_srch_badge_container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.uc_srch_badge {
    background: #444;
    color: white;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 15px;
}

.uc_srch_badge_popular {
    background: #fcd34d;
    color: black;
    font-weight: bold;
}

/* Bookmark Icon */
.uc_srch_bookmark {
    width: 18px;
    height: 22px;
    border: 2px solid #fcd34d;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg);
    position: relative;
    top: 3px;
}

/* Rating Container */
.uc_srch_rating_container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.uc_srch_stars {
    color: #fcd34d;
    font-size: 16px;
}

.uc_srch_student_count {
    font-size: 12px;
    color: #bbb;
}




:root {
    --uc_az-box-size: 160px;
    --uc_az-gap: 20px;
    --uc_az-border-radius: 12px;
    --uc_az-text-color: white;
    --uc_az-font-size: 17px;
    --uc_az-font-family: Arial, sans-serif;
}
.uc_hdr-container {
    margin-bottom: 20px;
}

.uc_az_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--uc_az-box-size), 1fr));
    gap: var(--uc_az-gap);
    width: 90vw;
    max-width: 995px;
    margin: auto;
}

.uc_az_box {
    height: var(--uc_az-box-size);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px;
    border-radius: var(--uc_az-border-radius);
    color: var(--uc_az-text-color);
    font-size: var(--uc_az-font-size);
    font-weight: bold;
    text-align: left;
    line-height:100%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    opacity: 0; /* Initially hidden for animation */
    transform: scale(0.9);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.4s ease;
    max-width:250px;
    overflow:hidden;
}

/* Hover Animation - Glowing Highlight */
.uc_az_box:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
    filter: brightness(1.2);
    animation: pulse-glow 1.5s infinite alternate ease-in-out;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
        filter: brightness(1.2);
    }
    100% {
        box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.5);
        filter: brightness(1.4);
    }
}

/* Click Effect - Quick Pop */
.uc_az_box:active {
    transform: scale(1.1);
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.uc_az_icon {
    position: absolute;
    top: 30px;
    right: 30px;
    width: auto;
    height: 70px;
    object-fit: cover;
}


/* Algorithmic Gradient Backgrounds */
.uc_az_box:nth-child(1)  { background: linear-gradient(45deg, #00C9A7, #01796F); }
.uc_az_box:nth-child(2)  { background: linear-gradient(45deg, #9B287B, #FF5F9E); }
.uc_az_box:nth-child(3)  { background: linear-gradient(45deg, #FF6A3D, #FFA07A); }
.uc_az_box:nth-child(4)  { background: linear-gradient(45deg, #1E3D59, #467599); }
.uc_az_box:nth-child(5)  { background: linear-gradient(45deg, #647DEE, #7F53AC); }
.uc_az_box:nth-child(6)  { background: linear-gradient(45deg, #005AA7, #00C6FB); }
.uc_az_box:nth-child(7)  { background: linear-gradient(45deg, #FF9A8B, #FF6A88); }
.uc_az_box:nth-child(8)  { background: linear-gradient(45deg, #FFC371, #FF5F6D); }
.uc_az_box:nth-child(9)  { background: linear-gradient(45deg, #7B4397, #DC2430); }
.uc_az_box:nth-child(10) { background: linear-gradient(45deg, #00B4DB, #0083B0); }
.uc_az_box:nth-child(11) { background: linear-gradient(45deg, #F7971E, #FFD200); }
.uc_az_box:nth-child(12) { background: linear-gradient(45deg, #56CCF2, #2F80ED); }
.uc_az_box:nth-child(13) { background: linear-gradient(45deg, #6A11CB, #2575FC); }
.uc_az_box:nth-child(14) { background: linear-gradient(45deg, #C33764, #1D2671); }
.uc_az_box:nth-child(15) { background: linear-gradient(45deg, #11998E, #38EF7D); }
.uc_az_box:nth-child(16) { background: linear-gradient(45deg, #FDC830, #F37335); }
.uc_az_box:nth-child(17) { background: linear-gradient(45deg, #E44D26, #F16529); }
.uc_az_box:nth-child(18) { background: linear-gradient(45deg, #FF416C, #FF4B2B); }
.uc_az_box:nth-child(19) { background: linear-gradient(45deg, #8E2DE2, #4A00E0); }
.uc_az_box:nth-child(20) { background: linear-gradient(45deg, #30C7EC, #009FFF); }
.uc_az_box:nth-child(21) { background: linear-gradient(45deg, #662D8C, #ED1E79); }
.uc_az_box:nth-child(22) { background: linear-gradient(45deg, #2AF598, #009EFD); }
.uc_az_box:nth-child(23) { background: linear-gradient(45deg, #FC466B, #3F5EFB); }
.uc_az_box:nth-child(24) { background: linear-gradient(45deg, #FF512F, #DD2476); }
.uc_az_box:nth-child(25) { background: linear-gradient(45deg, #EE9CA7, #FFdde1); }
.uc_az_box:nth-child(26) { background: linear-gradient(45deg, #74EBD5, #ACB6E5); }
.uc_az_box:nth-child(27) { background: linear-gradient(45deg, #F3A183, #F7CE68); }
.uc_az_box:nth-child(28) { background: linear-gradient(45deg, #0F2027, #203A43, #2C5364); }
.uc_az_box:nth-child(29) { background: linear-gradient(45deg, #D9A7C7, #FFFCDC); }
.uc_az_box:nth-child(30) { background: linear-gradient(45deg, #FF758C, #FF7EB3); }
.uc_az_box:nth-child(31) { background: linear-gradient(45deg, #4CB8C4, #3CD3AD); }
.uc_az_box:nth-child(32) { background: linear-gradient(45deg, #F2994A, #F2C94C); }
.uc_az_box:nth-child(33) { background: linear-gradient(45deg, #764BA2, #667EEA); }
.uc_az_box:nth-child(34) { background: linear-gradient(45deg, #F12711, #F5AF19); }
.uc_az_box:nth-child(35) { background: linear-gradient(45deg, #2980B9, #6DD5FA); }
.uc_az_box:nth-child(36) { background: linear-gradient(45deg, #D66D75, #E29587); }
.uc_az_box:nth-child(37) { background: linear-gradient(45deg, #B06AB3, #4568DC); }
.uc_az_box:nth-child(38) { background: linear-gradient(45deg, #C9FFBF, #FFAFBD); }
.uc_az_box:nth-child(39) { background: linear-gradient(45deg, #EECDA3, #EF629F); }
.uc_az_box:nth-child(40) { background: linear-gradient(45deg, #A770EF, #CF8BF3, #FDB99B); }
.uc_az_box:nth-child(41) { background: linear-gradient(45deg, #FF3CAC, #784BA0, #2B86C5); }
.uc_az_box:nth-child(42) { background: linear-gradient(45deg, #FF9A8B, #FF6A88, #FF99AC); }
.uc_az_box:nth-child(43) { background: linear-gradient(45deg, #DA22FF, #9733EE); }
.uc_az_box:nth-child(44) { background: linear-gradient(45deg, #FA8BFF, #2BD2FF, #2BFF88); }
.uc_az_box:nth-child(45) { background: linear-gradient(45deg, #FF5F6D, #FFC371); }
.uc_az_box:nth-child(46) { background: linear-gradient(45deg, #00F260, #0575E6); }
.uc_az_box:nth-child(47) { background: linear-gradient(45deg, #E44D26, #F16529, #FC6736); }
.uc_az_box:nth-child(48) { background: linear-gradient(45deg, #FC466B, #3F5EFB, #24C6DC); }
.uc_az_box:nth-child(49) { background: linear-gradient(45deg, #E8198B, #C60066, #870000); }
.uc_az_box:nth-child(50) { background: linear-gradient(45deg, #F0C27B, #4B1248); }
.uc_az_box:nth-child(51) { background: linear-gradient(45deg, #FF4E50, #F9D423); }
.uc_az_box:nth-child(52) { background: linear-gradient(45deg, #D66D75, #E29587, #FAA49B); }
.uc_az_box:nth-child(53) { background: linear-gradient(45deg, #F00000, #DC281E); }
.uc_az_box:nth-child(54) { background: linear-gradient(45deg, #56CCF2, #2F80ED, #00C6FF); }
.uc_az_box:nth-child(55) { background: linear-gradient(45deg, #FF6A00, #EE0979); }
.uc_az_box:nth-child(56) { background: linear-gradient(45deg, #11998E, #38EF7D, #5EF6C7); }
.uc_az_box:nth-child(57) { background: linear-gradient(45deg, #06BEB6, #48B1BF, #80D0C7); }
.uc_az_box:nth-child(58) { background: linear-gradient(45deg, #1D976C, #93F9B9); }
.uc_az_box:nth-child(59) { background: linear-gradient(45deg, #614385, #516395); }
.uc_az_box:nth-child(60) { background: linear-gradient(45deg, #00C6FF, #0072FF, #5F72BE); }
.uc_az_box:nth-child(61) { background: linear-gradient(45deg, #EC008C, #FC6767); }
.uc_az_box:nth-child(62) { background: linear-gradient(45deg, #A1FFCE, #FAFFD1); }
.uc_az_box:nth-child(63) { background: linear-gradient(45deg, #0F2027, #203A43, #2C5364); }
.uc_az_box:nth-child(64) { background: linear-gradient(45deg, #16BFFD, #CB3066); }
.uc_az_box:nth-child(65) { background: linear-gradient(45deg, #A8E063, #56AB2F, #3CA55C); }
.uc_az_box:nth-child(66) { background: linear-gradient(45deg, #FF0099, #493240); }
.uc_az_box:nth-child(67) { background: linear-gradient(45deg, #4B79A1, #283E51); }
.uc_az_box:nth-child(68) { background: linear-gradient(45deg, #8E44AD, #C0392B, #F39C12); }
.uc_az_box:nth-child(69) { background: linear-gradient(45deg, #F7B733, #FC4A1A); }
.uc_az_box:nth-child(70) { background: linear-gradient(45deg, #EECDA3, #EF629F, #FFC3A0); }
.uc_az_box:nth-child(71) { background: linear-gradient(45deg, #DA4453, #89216B); }
.uc_az_box:nth-child(72) { background: linear-gradient(45deg, #AA076B, #61045F); }
.uc_az_box:nth-child(73) { background: linear-gradient(45deg, #CC95C0, #DBD4B4, #7AA1D2); }
.uc_az_box:nth-child(74) { background: linear-gradient(45deg, #3C3B3F, #605C3C); }
.uc_az_box:nth-child(75) { background: linear-gradient(45deg, #2C3E50, #4CA1AF); }
.uc_az_box:nth-child(76) { background: linear-gradient(45deg, #FF9966, #FF5E62); }
.uc_az_box:nth-child(77) { background: linear-gradient(45deg, #C94B4B, #4B134F); }
.uc_az_box:nth-child(78) { background: linear-gradient(45deg, #FF6F61, #DE1D3E, #B71C1C); }
.uc_az_box:nth-child(79) { background: linear-gradient(45deg, #FFB88C, #DE6262); }
.uc_az_box:nth-child(80) { background: linear-gradient(45deg, #8A2387, #E94057, #F27121); }

/* Future-proofing: Default for extra categories */
.uc_az_box:nth-child(n+81) {
    background: linear-gradient(45deg, #4B1248, #F0C27B, #FF4E50);
}





:root {
    --uc_pricing_bg: #0A0A0A;
    --uc_pricing_text: white;
    --uc_pricing_primary: gold;
    --uc_pricing_secondary: rgba(255, 255, 255, 0.1);
    --uc_pricing_hover: rgba(255, 255, 255, 0.2);
    --uc_pricing_border: rgba(255, 255, 255, 0.3);
    --uc_pricing_shadow: rgba(255, 255, 255, 0.2);
    --uc_pricing_selected: gold;
}

.uc_plans_container
{
    display: flex;
    gap: 20px;	
    width:100%;
    max-width:995px;
    margin-left:auto;
    margin-right:auto;
}
.uc_plans_description {
	width:35%;
	text-align:left;
	color:#ffffff;
}
.uc_plans_tiers {
	width:65%;
	text-align:center;
}
.uc_pricing_container {
	min-height:350px;
    display: flex;
    gap: 20px;
    background: var(--uc_pricing_secondary);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px var(--uc_pricing_shadow);
    position: relative;
    overflow: hidden;
    color:inherit;
}

.uc_pricing_plan {
	color:inherit;
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    flex: 1;
    border: 2px solid var(--uc_pricing_border);
    transition: all 0.3s ease-in-out;
    position: relative;
    width:150px;
}

.uc_pricing_plan:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--uc_pricing_shadow);
    border-color: var(--uc_pricing_primary);
}

.uc_pricing_best-value {
    border: 2px solid var(--uc_pricing_primary);
    position: relative;
    overflow: hidden;
}

.uc_pricing_best-value::before {
    content: "Best Value";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--uc_pricing_primary);
    color: black;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 10px;
    animation: uc_pricing_badge_pulse 1.5s infinite alternate;
}

@keyframes uc_pricing_badge_pulse {
    from { transform: translateX(-50%) scale(1); }
    to { transform: translateX(-50%) scale(1.1); }
}

.uc_pricing_plan h3 {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: bold;
}

.uc_pricing_price {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.uc_pricing_plan small {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 15px;
}

.uc_plans_description {
    list-style: none;
    padding: 0;
}
.uc_plans_description li {
            position: relative;
            padding-left: 20px; /* Adds space between checkmark and text */
            font-size: 16px;
            margin: 8px 0;

}
.uc_plans_description li::before {
            content: '\2713'; /* Unicode checkmark */
            color: var(--uc_pricing_primary);
            font-size: 18px;
            font-weight: bold;
            position: absolute;
            left: 0; /* Positions checkmark before the text */
}


.uc_pricing_checkmark {
    color: var(--uc_pricing_primary);
    font-size: 16px;
}

.uc_pricing_button {
    background: none;
    border: 2px solid white;
    color: white;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.uc_pricing_button:hover {
    background: white;
    color: black;
}

.uc_pricing_selected .uc_pricing_button {
    background: var(--uc_pricing_selected);
    color: black;
    border-color: var(--uc_pricing_selected);
}

.uc_pricing_warning {
	width:200px;
	text-align:center;
    font-size: 13px;
    background: rgba(255, 0, 0, 0.3);
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
	color:#ffffff;
	margin-left:auto;
	margin-right:auto;
    color: red;

}





.uc-expandable-container {
  position: relative;
  max-height: 250px;
  overflow: hidden;
  transition: max-height 0.5s ease;
  margin-bottom: 2em;
}

.uc-expandable-container.expanded {
  max-height: 3000px;
}

.uc-expandable-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 175px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #181818);
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1;
}

.uc-expandable-container.expanded .uc-expandable-overlay {
  opacity: 0;
}

.uc-expandable-toggle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #0073E6;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.uc-expandable-toggle:hover {
  background: #005bb5;
}

.uc-expandable-live {
  position: absolute;
  left: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}





.uc_bubble_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 16px;
  background-color: #000; /* Optional */
}

.uc_bubble_button {
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  max-width:250px;
  overflow:hidden;
/*  cursor: pointer; */
cursor: default;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  margin-bottom:5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-family: "Helvetica Neue", sans-serif;
}

.uc_bubble_button:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* 🔥 Highest Rated */
.uc_bubble_highest_rated {
  background: linear-gradient(90deg, #ffb600, #ff6a00);
}

/* ✨ New */
.uc_bubble_new {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000;
}

/* ⭐ Most Popular */
.uc_bubble_most_popular {
  background: linear-gradient(90deg, #ffff00, #ffb400);
  color: #000000;
}

/* ♡ Best-Selling */
.uc_bubble_best_selling {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

/* 🎖️ Career-Ready */
.uc_bubble_career_ready {
  background: linear-gradient(90deg, #0044ff, #2400ff);
}

/* 💎 Industry Recognized */
.uc_bubble_industry_recognized {
  background: linear-gradient(90deg, #00d5e3, #007bff);
}

.uc_bubble_certified_pro {
  background: linear-gradient(90deg, #00d5e3, #007bff);
}

.uc_bubble_student_favorite {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

.uc_bubble_fast_track {
  background: linear-gradient(90deg, #43e97b, #38f9d7);
}

.uc_bubble_lifetime_access {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

.uc_bubble_boost_skills {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
}

.uc_bubble_enroll_today {
  background: linear-gradient(90deg, #f7971e, #ffd200);
}

.uc_bubble_in_demand {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
 }

.uc_bubble_featured_course {
  background: linear-gradient(90deg, #ff6a00, #ee0979);
}

.uc_bubble_expert_led {
  background: linear-gradient(90deg, #1d976c, #93f9b9);
}

.uc_bubble_start_anytime {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

.uc_bubble_upgrade_career {
  background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
}

.uc_bubble_flexible_learning {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

.uc_bubble_top_choice {
  background: linear-gradient(90deg, #f12711, #f5af19);
}

.uc_bubble_proven_results {
  background: linear-gradient(90deg, #00b09b, #96c93d);
}

.uc_bubble_no_prerequisites {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
 }

.uc_bubble_mobile_friendly {
  background: linear-gradient(90deg, #30cfd0, #330867);
}

.uc_bubble_quick_completion {
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
  color: #000;
}

.uc_bubble_self_paced {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
}

.uc_bubble_accredited {
  background: linear-gradient(90deg, #f9d423, #ff4e50);
}

.uc_bubble_project_based {
  background: linear-gradient(90deg, #00f2fe, #4facfe);
}

.uc_bubble_dark_matter {
  background: linear-gradient(90deg, #0f0c29, #302b63, #24243e);
}

.uc_bubble_occult_sciences {
  background: linear-gradient(90deg, #4b134f, #1d1d1d);
}

.uc_bubble_forgotten_histories {
  background: linear-gradient(90deg, #3a1c71, #d76d77, #ffaf7b);
}

.uc_bubble_time_bending {
  background: linear-gradient(90deg, #000046, #1cb5e0);
}

.uc_bubble_alchemy_101 {
  background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
}

.uc_bubble_reality_hacking {
  background: linear-gradient(90deg, #2b5876, #4e4376);
}

.uc_bubble_shadow_psychology {
  background: linear-gradient(90deg, #434343, #000000);
}

.uc_bubble_cosmic_languages {
  background: linear-gradient(90deg, #2c3e50, #4ca1af);
}

.uc_bubble_ethereal_theory {
  background: linear-gradient(90deg, #232526, #414345);
}

.uc_bubble_alien_anthropology {
  background: linear-gradient(90deg, #3e5151, #decba4);
}

.uc_bubble_consciousness_shift {
  background: linear-gradient(90deg, #1e130c, #9a8478);
}

.uc_bubble_quantum_poetics {
  background: linear-gradient(90deg, #870000, #190a05);
}

.uc_bubble_esoteric_math {
  background: linear-gradient(90deg, #000428, #004e92);
}

.uc_bubble_parallel_realms {
  background: linear-gradient(90deg, #373b44, #4286f4);
}

.uc_bubble_transdimensional {
  background: linear-gradient(90deg, #2b2e4a, #e84545);
}

.uc_bubble_dream_engineering {
  background: linear-gradient(90deg, #20002c, #cbb4d4);
}

.uc_bubble_fractal_logic {
  background: linear-gradient(90deg, #3a6073, #16222a);
}

.uc_bubble_liminal_spaces {
  background: linear-gradient(90deg, #2c3e50, #bdc3c7);
  color: #000;
}

.uc_bubble_psi_experiments {
  background: linear-gradient(90deg, #1f1c2c, #928dab);
}

.uc_bubble_energy_fields {
  background: linear-gradient(90deg, #141e30, #243b55);
}

/* in progress/in development */

.uc_bubble_in_progress {
  background: linear-gradient(90deg, #232526, #414345);
}

.uc_bubble_in_development {
  background: linear-gradient(90deg, #2c3e50, #fd746c);
}

.uc_bubble_being_enhanced {
  background: linear-gradient(90deg, #000000, #434343);
}

.uc_bubble_editing_now {
  background: linear-gradient(90deg, #4b6cb7, #182848);
}

.uc_bubble_updating_course {
  background: linear-gradient(90deg, #283e51, #485563);
}

.uc_bubble_fresh_materials {
  background: linear-gradient(90deg, #134e5e, #71b280);
}

.uc_bubble_reworking_content {
  background: linear-gradient(90deg, #2c3e50, #4ca1af);
}

.uc_bubble_course_reboot {
  background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
}

.uc_bubble_almost_ready {
  background: linear-gradient(90deg, #1d2b64, #f8cdda);
  color: #000;
}

.uc_bubble_finalizing {
  background: linear-gradient(90deg, #000428, #004e92);
}

.uc_bubble_module_upgrade {
  background: linear-gradient(90deg, #373b44, #4286f4);
}

.uc_bubble_under_review {
  background: linear-gradient(90deg, #232526, #414345);
}

.uc_bubble_improvements_live {
  background: linear-gradient(90deg, #000000, #0f9b0f);
}

.uc_bubble_beta_editing {
  background: linear-gradient(90deg, #2b5876, #4e4376);
}

.uc_bubble_realigning_focus {
  background: linear-gradient(90deg, #42275a, #734b6d);
}

.uc_bubble_tweaking_layout {
  background: linear-gradient(90deg, #485563, #29323c);
}

.uc_bubble_test_phase {
  background: linear-gradient(90deg, #16222a, #3a6073);
}

.uc_bubble_design_iteration {
  background: linear-gradient(90deg, #1e3c72, #2a5298);
}

.uc_bubble_loading_updates {
  background: linear-gradient(90deg, #000046, #1cb5e0);
}

.uc_bubble_revamping {
  background: linear-gradient(90deg, #8e0e00, #1f1c18);
}






.uc_footer_container {
  padding: 40px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: 1440px;
  margin-left:auto;
  margin-right:auto;
}

.uc_footer_section {
  min-width: 120px;
  width: 100%;
  max-width: 220px;
  flex: 1 1 200px;
}

.uc_footer_section h4 {
  font-size: 21px;
  margin-bottom: 15px;
  color: #cccccc;
}

.uc_footer_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.uc_footer_list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.uc_footer_list li:hover {
  text-decoration: underline;
}

.uc_footer_bottom {
  text-align: center;
  color: #ccc;
  font-size: 14px;
  padding: 20px 10px;
}

.uc_footer_spacer {
  width: 100%;
  height: 2px;
  background-color: #2a2a2a;
  margin-top: 40px;
  margin-bottom: 0;
  opacity: 1;
}

@media (max-width: 768px) {

  .uc_footer_section {
    flex: 0 0 40%;
    max-width: none;
    min-width: 140px;
  }
}







.uc_footer_small_container {
  background: linear-gradient(to top, #000, #222);
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  position: relative;
  bottom: 0;
  width: 100%;
}

.uc_footer_small_links {
  margin-top: 8px;
}

.uc_footer_small_links a {
  color: #d1e6ff;
  text-decoration: none;
  margin: 0 12px;
  transition: color 0.3s ease;
}

.uc_footer_small_links a:hover {
  color: #ffffff;
}

@media (max-width: 600px) {
  .uc_footer_small_container {
    font-size: 0.8rem;
    padding: 15px 5px;
  }

  .uc_footer_small_links a {
    display: block;
    margin: 6px 0;
  }
}







.uc_footer_container {
  padding: 40px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: 1440px;
  margin-left:auto;
  margin-right:auto;
}

.uc_footer_section {
  min-width: 120px;
  width: 100%;
  max-width: 220px;
  flex: 1 1 200px;
}

.uc_footer_section h4 {
  font-size: 21px;
  margin-bottom: 15px;
  color: #cccccc;
}

.uc_footer_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.uc_footer_list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.uc_footer_list li:hover {
  text-decoration: underline;
}

.uc_footer_bottom {
  text-align: center;
  color: #ccc;
  font-size: 14px;
  padding: 20px 10px;
}

.uc_footer_spacer {
  width: 100%;
  height: 2px;
  background-color: #2a2a2a;
  margin-top: 40px;
  margin-bottom: 0;
  opacity: 1;
}

@media (max-width: 768px) {

  .uc_footer_section {
    flex: 0 0 40%;
    max-width: none;
    min-width: 140px;
  }
}







.uc_footer_small_container {
  background: linear-gradient(to top, #000, #222);
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  position: relative;
  bottom: 0;
  width: 100%;
}

.uc_footer_small_links {
  margin-top: 8px;
}

.uc_footer_small_links a {
  color: #d1e6ff;
  text-decoration: none;
  margin: 0 12px;
  transition: color 0.3s ease;
}

.uc_footer_small_links a:hover {
  color: #ffffff;
}

@media (max-width: 600px) {
  .uc_footer_small_container {
    font-size: 0.8rem;
    padding: 15px 5px;
  }

  .uc_footer_small_links a {
    display: block;
    margin: 6px 0;
  }
}






.uctts_content {
  position: relative;
  overflow: hidden;
  padding: 40px;
  width: 100%;
  max-width: 640px;
  max-height: 480px;
  margin: 40px auto;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  color: #ffffff;
  background: url('') no-repeat center center;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
	background-color:#000000;
  z-index: 1;
box-sizing: border-box;
}

.uctts_content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.uctts_content > * {
  position: relative;
  z-index: 1;
}
.uctts_content h2 {
  line-height: 110%;
  color: #ffffff;
  width:100%;
  padding:5px;
  margin: auto;
}

.uctts_titlebar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.7);
    padding:5px;
  border-radius: 7px;
box-sizing: border-box;
overflow:hidden;
}

.uctts_titlebar img {
  max-width: 145px;
  padding:5px;
  height: auto;
  max-height:100px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.uctts_titlebar h2 {
  flex: 1;
  font-size: 1.4em;
  color: #ffffff;
  padding: 8px 12px;
  margin: 0;
  background: rgba(0, 0, 0, 0);
box-sizing: border-box;

}


.uctts_textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-size: 1.1em;
  border-radius: 8px;
  border: none;
  resize: vertical;
}
.uctts_controls {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  text-align: center;
}
.uctts_controls select,
.uctts_controls button {
  padding: 10px 15px;
  font-size: 1em;
  border-radius: 8px;
  border: none;
}
.uctts_subtitle_container {
  height: 90px;
  width: 100%;
  max-width: 375px;
  text-align: center;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 10px;
  margin: 20px auto 0;
  color: #ffffff;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.uctts_subtitle_container::-webkit-scrollbar {
  display: none;
}
.uctts_subtitle {
  font-size: 1.3em;
  line-height: 115%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.uctts_subtitle span {
  display: inline;
  margin-right: 2px;
}
.uctts_highlight {
  background-color: yellow;
  color: black;
  padding: 2px 4px;
  border-radius: 4px;
}
.uctts_footer {
  text-align: center;
  padding: 10px;
  font-size: 0.9em;
  color: #ccc;
}
#uctts_volumeTooltip {
  display: none;
  font-size: 0.85em;
  color: #ffd700;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#uctts_volumeTooltip.show {
  display: block;
  opacity: 1;
}



.uctts_content {
  position: relative;
  overflow: hidden;
  padding: 40px;
  width: 100%;
  max-width: 800px;
  max-height: 480px;
  margin: 40px auto;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  color: #ffffff;
  z-index: 1;
}

.uctts_bg_slideshow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 0;
  border-radius: 15px;
}

.uctts_bg_slideshow .uctts_slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  filter: brightness(0.60) contrast(1.4) saturate(1.2) blur(3px);
}

.uctts_bg_slideshow .uctts_active {
  opacity: 1;
  z-index: 1;
}


.uctts_visualizer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 20px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
	
	.uctts_titlebar {
		display:block;
		margin:auto;
		width:100%;
		
	}
	.uctts_titlebar h2 {
		display:block;
		margin:auto;
	}
	.uctts_titlebar img {
		display:none;
	}

.uctts_content {
	margin:auto;
	padding:5px;
}

	
}






  /* --- Design tokens (scoped) --- */
  .uc_final_lesson {
    --uc_final_lesson-radius: 18px;
    --uc_final_lesson-gap: 20px;
    --uc_final_lesson-bg: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.35), transparent 60%),
                          radial-gradient(800px 400px at 110% 10%, rgba(82,91,255,.15), transparent 60%),
                          linear-gradient(180deg, #f7f8fb, #eef1f7);
    --uc_final_lesson-surface: rgba(255,255,255,.65);
    --uc_final_lesson-border: 1px solid rgba(20,23,45,.08);
    --uc_final_lesson-shadow: 0 10px 25px rgba(20,23,45,.12), inset 0 1px 0 rgba(255,255,255,.6);
    --uc_final_lesson-text: #0f172a;
    --uc_final_lesson-muted: #475569;
    --uc_final_lesson-primary: #3b82f6;     /* blue-500 */
    --uc_final_lesson-primary-2: #2563eb;   /* blue-600 */
    --uc_final_lesson-accent: #a78bfa;      /* violet-400 */
    --uc_final_lesson-success: #10b981;     /* emerald-500 */
    color: var(--uc_final_lesson-text);
    background: var(--uc_final_lesson-bg);
    border-radius: var(--uc_final_lesson-radius);
    padding: clamp(16px, 2.5vw, 28px);
    position: relative;
    overflow: clip;
  }

  /* Subtle vignette */
  .uc_final_lesson::before {
    content:"";
    position:absolute; inset:-1px;
    pointer-events:none;
    background: radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.07), transparent 60%),
                radial-gradient(700px 400px at 120% 120%, rgba(59,130,246,.08), transparent 50%);
    mix-blend-mode: multiply;
  }

  /* Banner */
  .uc_final_lesson-banner{
    display:flex; gap:12px; align-items:flex-start;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    border: var(--uc_final_lesson-border);
    border-radius: calc(var(--uc_final_lesson-radius) - 8px);
    padding: 14px 16px;
    box-shadow: var(--uc_final_lesson-shadow);
    backdrop-filter: blur(8px);
    margin-bottom: clamp(12px, 1.8vw, 18px);
  }
  .uc_final_lesson-banner-pill{
    flex:0 0 auto;
    padding: 6px 10px;
    background: linear-gradient(90deg, var(--uc_final_lesson-primary), var(--uc_final_lesson-accent));
    color:#fff; font-weight:700; border-radius:999px; letter-spacing:.02em; font-size:12px;
    box-shadow: 0 6px 16px rgba(59,130,246,.25);
  }
  .uc_final_lesson-banner-text{margin:2px 0 0; color:var(--uc_final_lesson-muted);}

  /* Hero */
  .uc_final_lesson-hero{padding: 6px 4px 12px;}
  .uc_final_lesson-hero-badge{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#1e293b; background:rgba(167,139,250,.18); border:1px dashed rgba(76,29,149,.25);
    padding:6px 10px; border-radius:999px; backdrop-filter: blur(4px);
  }
  .uc_final_lesson-hero-title{
    margin:.3rem 0 .25rem; line-height:1.1;
    font-size: clamp(22px, 3vw, 32px); font-weight:800;
    background: linear-gradient(90deg, #0f172a, #111827 45%, #334155 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .uc_final_lesson-hero-sub{color:var(--uc_final_lesson-muted); margin:0;}

  /* Grid */
  .uc_final_lesson-grid{
    display:grid;
    grid-template-columns: 1.3fr .9fr;
    gap: var(--uc_final_lesson-gap);
  }
  @media (max-width: 880px){
    .uc_final_lesson-grid{grid-template-columns: 1fr;}
  }

  /* Cards */
  .uc_final_lesson-card{
    background: var(--uc_final_lesson-surface);
    border: var(--uc_final_lesson-border);
    border-radius: var(--uc_final_lesson-radius);
    box-shadow: var(--uc_final_lesson-shadow);
    backdrop-filter: blur(10px);
    overflow:hidden;
  }
  .uc_final_lesson-card-head{padding:18px 18px 8px;}
  .uc_final_lesson-card-title{margin:0; font-weight:800; letter-spacing:.01em;line-height:100%;}

  /* Progress area */
  .uc_final_lesson-progress{
    display:grid; grid-template-columns: 220px 1fr; align-items:center; gap: 8px 12px;
    padding: 6px 18px 18px;
  }
  @media (max-width: 520px){
    .uc_final_lesson-progress{grid-template-columns: 1fr;}
  }
  .uc_final_lesson-progress-ring{
    position:relative; width: 160px; height:160px; margin:auto;
    display:grid; place-items:center;
  }
  .uc_final_lesson-ring{width:100%; height:100%; transform: rotate(-90deg);}
  .uc_final_lesson-ring-track{
    fill:none; stroke: rgba(15,23,42,.08); stroke-width: 12;
  }
  .uc_final_lesson-ring-fill{
    fill:none; stroke: url(#uc_final_lesson-grad);
    stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 326; /* set by JS at runtime for exactness */
    stroke-dashoffset: 326;
    filter: drop-shadow(0 4px 14px rgba(59,130,246,.35));
  }
  /* ring gradient (using painted gradient via mask) */
  .uc_final_lesson .uc_final_lesson-ring defs linearGradient stop {}
  /* numeric label */
  .uc_final_lesson-ring-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px;
    font-weight:800;
  }
  .uc_final_lesson-ring-num{font-size:34px;}
  .uc_final_lesson-ring-unit{font-size:14px; color:var(--uc_final_lesson-muted); transform: translateY(3px);}

  /* Stats */
  .uc_final_lesson-stats{
    list-style:none !important; margin:0; padding: 10px 0 0; display:grid; gap:16px;
    grid-template-columns: repeat(3, minmax(0,1fr));
    white-space: nowrap;       /* Prevents word wrapping */
  }
  @media (max-width: 520px){ .uc_final_lesson-stats{grid-template-columns:1fr; } }
  .uc_final_lesson-stat{
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
    border: var(--uc_final_lesson-border);
    border-radius: 14px; padding: 14px 12px;
    box-shadow: var(--uc_final_lesson-shadow);
  }
  .uc_final_lesson-stat-num{display:block; font-weight:800; font-size:20px;}
  .uc_final_lesson-stat-label{display:block; font-size:12px; color:var(--uc_final_lesson-muted);}

  /* CTA card */
  .uc_final_lesson-body{padding: 8px 18px 18px;}
  .uc_final_lesson-copy{color:var(--uc_final_lesson-muted); margin:4px 0 16px;}
  .uc_final_lesson-btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border: none; cursor: pointer; padding: 14px 18px; isolation:isolate;
    font-weight:800; letter-spacing:.01em; color:#fff;
    background: linear-gradient(90deg, var(--uc_final_lesson-primary), var(--uc_final_lesson-primary-2));
    border-radius: 14px; box-shadow: 0 10px 22px rgba(37,99,235,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
  }
  .uc_final_lesson-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(37,99,235,.4); }
  .uc_final_lesson-btn:active{ transform: translateY(0); }
  .uc_final_lesson-btn:focus-visible{ outline: 3px solid rgba(59,130,246,.45); outline-offset: 3px; }
  .uc_final_lesson-btn-glow{
    position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
    background: radial-gradient(220px 80px at 50% 0%, rgba(255,255,255,.35), transparent 60%),
                radial-gradient(220px 120px at 50% 120%, rgba(167,139,250,.25), transparent 60%);
    filter: blur(8px); opacity:.9; pointer-events:none;
  }
  .uc_final_lesson-msg{margin:12px 2px 0; color: var(--uc_final_lesson-success); font-weight:700;}

  /* Gentle entrance animation */
  @media (prefers-reduced-motion: no-preference){
    .uc_final_lesson-card, .uc_final_lesson-banner {
      animation: uc_final_lesson-fadeUp .6s ease both;
    }
    .uc_final_lesson-card--cta{animation-delay:.08s;}
    .uc_final_lesson-card--progress{animation-delay:.02s;}
  }
  @keyframes uc_final_lesson-fadeUp{
    from{opacity:0; transform: translateY(6px);}
    to{opacity:1; transform: translateY(0);}
  }










  	/* =================== THEME TOKENS =================== */
	/* Tip: add data-uc_reportcard-incomplete="POINTS" on a lesson to exclude those points from the Current Grade calculation. */ 

  .uc_reportcard_root {
    --uc_reportcard_radius: 18px;
    --uc_reportcard_gap: 14px;
    --uc_reportcard_font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  /* Light */
  .uc_reportcard_theme-light {
    --uc_reportcard_bg: #f7f9ff;
    --uc_reportcard_panel: #ffffff;
    --uc_reportcard_panel2: #f5f7ff;
    --uc_reportcard_surface_alt: #f9faff;
    --uc_reportcard_border: #e3e8ff;
    --uc_reportcard_text: #101827;
    --uc_reportcard_muted: #5a6aa8;
    --uc_reportcard_accent: #3b82f6;
    --uc_reportcard_accent2: #06b6d4;
    --uc_reportcard_warn: #b45309;
    --uc_reportcard_bad: #dc2626;
    --uc_reportcard_good: #059669;
    --uc_reportcard_shadow: 0 12px 30px rgba(15,23,42,.08);
    --uc_reportcard_chip_bg: #eef2ff;
    --uc_reportcard_track: #eef2ff;
    --uc_reportcard_chev_bg: #eef2ff;
    --uc_reportcard_ring_base: #e5e9ff;
    --uc_reportcard_btn_text_on_primary: #ffffff;
  }
  /* Dark */
  .uc_reportcard_theme-dark {
    --uc_reportcard_bg: #0b1020;
    --uc_reportcard_panel: #121935;
    --uc_reportcard_panel2: #0f152e;
    --uc_reportcard_surface_alt: #0d1437;
    --uc_reportcard_border: #2a356b;
    --uc_reportcard_text: #e8ecff;
    --uc_reportcard_muted: #b5c0ff;
    --uc_reportcard_accent: #7aa4ff;
    --uc_reportcard_accent2: #6ef0d1;
    --uc_reportcard_warn: #ffcf6e;
    --uc_reportcard_bad: #ff7a88;
    --uc_reportcard_good: #98f5a7;
    --uc_reportcard_shadow: 0 12px 32px rgba(4,10,34,.35);
    --uc_reportcard_chip_bg: #0a1233;
    --uc_reportcard_track: #0a1233;
    --uc_reportcard_chev_bg: #121a3f;
    --uc_reportcard_ring_base: #1f285a;
    --uc_reportcard_btn_text_on_primary: #0a1030;
  }

  /* =================== BASE LAYOUT =================== */
  .uc_reportcard_root {
    min-height: 100vh;
    padding: 32px clamp(16px, 3vw, 48px);
    background:
      radial-gradient(1200px 600px at 10% -10%, #bcd2ff33, transparent 60%),
      radial-gradient(1200px 600px at 110% 20%, #9ff3e633, transparent 60%),
      var(--uc_reportcard_bg);
    color: var(--uc_reportcard_text);
    font-family: var(--uc_reportcard_font);
    line-height: 1.35;
  }
  .uc_reportcard_shell { max-width: 1100px; margin: 0 auto; }

  /* =================== HEADER =================== */
  .uc_reportcard_titlebar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:linear-gradient(160deg,var(--uc_reportcard_panel),var(--uc_reportcard_panel2));
    border:1px solid var(--uc_reportcard_border);
    box-shadow:var(--uc_reportcard_shadow);
    border-radius:var(--uc_reportcard_radius);
    padding:16px 18px;
  }
  .uc_reportcard_h1{ margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(20px,2.2vw,28px); }
  .uc_reportcard_actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .uc_reportcard_btn{
    appearance:none; border:1px solid var(--uc_reportcard_border);
    background:var(--uc_reportcard_panel); color:var(--uc_reportcard_text);
    padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  }
  .uc_reportcard_btn:hover{ transform:translateY(-1px); }
  .uc_reportcard_btn--primary{
    background:linear-gradient(90deg,var(--uc_reportcard_accent),var(--uc_reportcard_accent2));
    color:var(--uc_reportcard_btn_text_on_primary); border:none;
  }

  /* =================== OVERVIEW STATS =================== */
  .uc_reportcard_stats{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--uc_reportcard_gap); margin-top:14px; }
  .uc_reportcard_statcard{
    grid-column:span 6;
    background:var(--uc_reportcard_panel);
    border:1px solid var(--uc_reportcard_border);
    border-radius:var(--uc_reportcard_radius);
    padding:16px;
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px;
    box-shadow:var(--uc_reportcard_shadow);
    overflow:hidden; /* contain any internal overflow */
  }
  .uc_reportcard_statcard > * { min-width: 0; }
  @media (max-width:720px){ .uc_reportcard_statcard{ grid-column:span 12; } }

  .uc_reportcard_ring{ width:86px;height:86px;position:relative; }
  .uc_reportcard_ring svg{ width:86px;height:86px;display:block; transform:rotate(-90deg); }
  .uc_reportcard_ringText{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    font-size:clamp(14px, 2.4vw, 18px); /* less crowded */
    line-height:1;
    font-variant-numeric: tabular-nums;
    white-space:nowrap;
    pointer-events:none;
  }
  .uc_reportcard_statLabel{ font-size:12px;color:var(--uc_reportcard_muted);text-transform:uppercase;letter-spacing:.12em; }
  .uc_reportcard_statValue{ font-weight:800;font-size:18px;margin-top:6px; }
  .uc_reportcard_statNote{ color:var(--uc_reportcard_muted);font-size:13px;margin-top:6px; }

  /* =================== LESSONS =================== */
  .uc_reportcard_lessons{
    margin-top:18px; background:var(--uc_reportcard_panel);
    border:1px solid var(--uc_reportcard_border); border-radius:var(--uc_reportcard_radius);
    overflow:hidden; box-shadow:var(--uc_reportcard_shadow);
  }
  .uc_reportcard_lessonsHeader{
    display:grid; grid-template-columns:1fr 120px 120px 40px; gap:8px;
    padding:14px 16px; background:var(--uc_reportcard_panel2);
    border-bottom:1px solid var(--uc_reportcard_border);
    color:var(--uc_reportcard_muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  }
  @media (max-width:760px){ .uc_reportcard_lessonsHeader{ grid-template-columns:1fr 90px 90px 40px; } }
  @media (max-width:580px){ .uc_reportcard_lessonsHeader{ display:none; } }

  .uc_reportcard_lesson{ border-bottom:1px solid var(--uc_reportcard_border); }
  .uc_reportcard_lesson:last-child{ border-bottom:none; }
  .uc_reportcard_lesson>summary{
    list-style:none; display:grid; grid-template-columns:1fr 120px 120px 40px; gap:8px; align-items:center;
    padding:16px; cursor:pointer;
  }
  .uc_reportcard_lesson>summary::-webkit-details-marker{ display:none; }
  @media (max-width:760px){ .uc_reportcard_lesson>summary{ grid-template-columns:1fr 90px 90px 40px; } }
  @media (max-width:580px){ .uc_reportcard_lesson>summary{ grid-template-columns:1fr; row-gap:6px; } }

  .uc_reportcard_lTitle{ font-weight:700; font-size:15px; }
  .uc_reportcard_lStat{ justify-self:end; font-weight:700; color:var(--uc_reportcard_text); }
  .uc_reportcard_lStat .uc_reportcard_muted{ color:var(--uc_reportcard_muted); font-weight:600; }
  .uc_reportcard_chev{
    width:22px;height:22px;border-radius:6px;display:grid;place-items:center;justify-self:end;
    background:var(--uc_reportcard_chev_bg); border:1px solid var(--uc_reportcard_border);
  }
  .uc_reportcard_chev svg{ transition:transform .25s ease; }
  .uc_reportcard_lesson[open] .uc_reportcard_chev svg{ transform:rotate(180deg); }

  .uc_reportcard_sub{ padding:0 16px 14px 16px; display:grid; gap:10px; }
  .uc_reportcard_row{
    display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
    background:var(--uc_reportcard_surface_alt); border:1px solid var(--uc_reportcard_border);
    padding:12px; border-radius:12px;
    width:80%;
    margin:auto;
    margin-bottom:20px;
  }
  .uc_reportcard_rowTitle{ font-weight:600; }
  .uc_reportcard_rowMeta{ display:flex; align-items:center; gap:12px; font-weight:700; }

  .uc_reportcard_chip{
    font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--uc_reportcard_border);
    background:var(--uc_reportcard_chip_bg); color:var(--uc_reportcard_muted);
  }
  .uc_reportcard_chip--good{ background:#e8f9f1; color:var(--uc_reportcard_good); border-color:#cdeee1; }
  .uc_reportcard_chip--warn{ background:#fff3e0; color:var(--uc_reportcard_warn); border-color:#fde7c2; }
  .uc_reportcard_chip--bad{ background:#ffeef0; color:var(--uc_reportcard_bad); border-color:#ffd7dd; }

  .uc_reportcard_progress{
    height:8px;border-radius:999px;background:var(--uc_reportcard_track);
    border:1px solid var(--uc_reportcard_border); overflow:hidden;
  }
  .uc_reportcard_progressFill{
    width:calc(var(--uc_reportcard_progress,0)*100%); height:100%;
    background:linear-gradient(90deg,var(--uc_reportcard_accent),var(--uc_reportcard_accent2));
  }
  .uc_reportcard_progressFill2{
    width:calc(var(--uc_reportcard_progress,0)*100%); height:100%;
    background:linear-gradient(90deg,lightblue,var(--uc_reportcard_accent));
  }
  .uc_reportcard_footnote{ margin-top:14px;color:var(--uc_reportcard_muted);font-size:12px; }

  /* Print */
  @media print{
    .uc_reportcard_actions{ display:none !important; }
    .uc_reportcard_titlebar, .uc_reportcard_lessons, .uc_reportcard_statcard{ box-shadow:none !important; }
    .uc_reportcard_root{ background:#fff; padding:0; }
  }





.loaderwrapper {
  z-index: 999999 !important; /* absurdly high to beat everything */
  pointer-events: all;
}

.loaderwrapper .loading-container {
  z-index: 1000000 !important; /* ensure inner spinner is on top */
}