/* === MaintainX-style certificate layout === */

/* Make the whole certificate a left-aligned flex layout */
.CertBodyWrapper {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 40px 60px !important;
}

/* Keep the text block constrained to the left half */
.CertContentWrapper {
max-width: 45% !important;
width: 45% !important;
text-align: left !important;
margin: 0 !important;
}

/* Make sure the right-side graphic has space */
.CertBodyWrapper {
flex: 1 1 auto !important;
padding-bottom: 80px !important;
box-sizing: border-box !important;
}

.CertContentInnerWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  /* ensure it has a height (e.g. height: 100%) */
}

/* Hide the Awarded By title completely */
.CertAwardedByTitle {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

/* Top “MAINTAINX CERTIFIED” tag */
/* Hide the original Certified Text */
.CertCertifiedText {
font-size: 0 !important; /* hides the original text */
color: #ffffff !important;
line-height: 0 !important;
}

/* Inject your replacement text */
.CertCertifiedText::before {
content: "" !important; /* you can change this, but an empty string = nothing shown */
font-size: 1rem !important;
line-height: 1.2 !important;
font-weight: 600 !important;
color: #000 !important; /* adjust as needed */
}

/* Learner name */
.CertLearnerName {
font-size: 4.5rem !important; /* increase/decrease as you like */
font-weight: 700 !important;
line-height: 1.1 !important;
margin-bottom: 16px !important;
}

/* "Passed the requirements…" line */
.CertHasCompletedText {
text-align: left !important;
font-size: 1.25rem !important;
margin: 0 0 8px 0 !important;
font-weight: 300 !important;
}

/* Certification title inside that line */
.CertHasCompletedText span {
font-weight: 600 !important;
}

/* Earned date */
.CertEarnedOn {
text-align: left !important;
font-size: 0.9rem !important;
margin-top: 10px !important;
text-transform: uppercase;
}

/* Logo – keep it left but a bit detached from the edges */
.CertLogo {
text-align: left !important;
margin-top: 24px !important;
}

/* Hide Awarded By, since it's not part of the MaintainX design */
.CertAwardedByTitle,
.CertAwardedByName {
display: none !important;
}

/* Make the cert wrapper a positioning context */
.CertBodyWrapper {
position: relative !important;
}

/* Force the top bar to be an overlay, not part of the flex layout */
[class*="TopBlueBar"] {
position: absolute !important;
top: 0;
left: 0;
right: 0;
height: 30px !important;

background-image: none !important;
background-color: #1853FF !important;

margin: 0 !important;
padding: 0 !important;
border: none !important;
}

.AL_Custom_NavLogo img {
margin-right: 40px !important;
}

.AL_Custom_NavCustomLinksList a {
font-size: 0.875rem !important;
padding: 5px !important;
}

.AL_Custom_NavCustomLinksList a:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
padding: 5px !important;
border-radius: 5px !important;
}


.AL_Custom_NavGoToLink {
font-size: 0.875rem !important;
}

.AL_Custom_BannerMainHeading {
font-size: 2rem !important;
margin-top: 30px !important;
}

.AL_Custom_BannerSubHead {
font-size: 1rem !important;
width: 50%;
}

.AL_Custom_NavBg {
border-bottom: 1px solid #E7F3FE;
}

.AL_Custom_TabBar {
border-bottom: 1px solid #E7F3FE;
}

.AL_Custom_TabBarTab {
font-size: 14px;
margin-right: 24px !important;
}

.academy-content {
padding-top: 30px !important;
}

.powered-by {
display: none !important;
}

.AL_Custom_NavAccountMenuTrigger {
background-color: #ffffff !important;
}

@media screen and (max-width: 490px) {
.AL_Custom_BannerMainHeading {
margin-top: 0px !important;
}

.AL_Custom_BannerSubHead {
width: 75%;
}

.academy-navigation nav ul li a {
color: #ffffff !important;
}

.AL_Custom_NavMenuBtnMob {
background-color: transparent !important;
}

.AL_Custom_MenuBackdropMob ul li {
display: flex !important;
justify-content: flex-end;
}

.AL_Custom_MenuBackdropMob ul li a {
width: 160px;
padding: 5px;
}

.AL_Custom_NavSearchTriggerMob {
margin-top: 6px;
color: rgb(1, 30, 64) !important;
}

.AL_Custom_NavGoToLink {
visibility: hidden !important;
}
}