body {font-family: Arial, Helvetica, sans-serif;}

		.cert-thumbnail {
			border-radius: 6px;
			cursor: pointer;
			transition: 0.2s;
			margin-top: 20px;
			outline: 2px #F2F2F2 solid;
			padding: 4px;
		}

		.cert-thumbnail:hover {outline: 2px #B1B1B1 solid;}

		.modal {
		   display: none;
		   position: fixed;
		   z-index: 9999;
		   padding-top: 5%;
		   left: 0;
		   top: 0;
		   width: 100%;
		   height: 100%;
		   overflow: auto;
		   background-color: rgb(0,0,0);
		   background-color: rgba(0,0,0,0.4);
		   opacity: 1;
		   transition: opacity 0.4s ease;
		}

		/* Smooth fade-out when a validate modal is closed (X button or backdrop click). */
		.modal.hidden { opacity: 0; }

		.cert-icon img {margin: auto;height: 110px;}

		@media (max-width: 680px) {.modal-content {width:95% !important;}}
		@media (max-width: 680px) {.cert-icon { height: 150px !important;margin-bottom: 15px !important;padding-bottom: 24px;width: 180px;margin: auto !important;display: block;}}

		.modal-content {
		   background-color: #FFFFFF;
		   margin: auto;
		   padding: 30px 25px 20px 25px;
		   border: 1px solid #888;
		   width: 420px;
		   text-align: center;
		   -webkit-animation-name: animatetop;
		   -webkit-animation-duration: 0.4s;
		   animation-name: animatetop;
		   animation-duration: 0.4s
		}

		.close {
		   color: #c0c0c0;
		   float: right;
		   font-size: 28px;
		   font-weight: bold;
		   margin-top: -18px;
		   margin-right: -8px;
		   opacity: 1;
		}

		.close:hover,
		.close:focus {
		   color: #6F6F6F;
		   text-decoration: none;
		   cursor: pointer;
		   opacity: 1;
		}
	  
		.cert-button {
		   display: block;
		   cursor: pointer;
		   border: 2px solid #6F6F6F !important;
		   background: #ededed;
		   color: #ffffff;
		   font-size: 14px;
		   background-color: #6F6F6F;
		   outline: 0;
		   border-radius: 4px;
		   padding: 0 15px;
		   line-height: 32px;
		   font-weight: 400;
		   text-transform: uppercase;
		   text-decoration: none;
		}

		.cert-button:hover,
		.cert-button:focus,
		.cert-button:active {
		   background-color: #444;
		   border: 2px solid #444 !important; 
		   color:#FFF !important;
		}
	  
		.val {
		   display: inline-block;
		   margin: auto;
		   margin-top: -13px;
		   z-index: 1;
		   position: relative;
		   padding: 6px 8px;
		 }
	 
		.val i{z-index: -999;position: relative;}
	 
		.verification {
		   background-color: #d4ffd4;
		   padding: 15px;
		   width: fit-content;
		   margin: auto;
		   border-radius: 4px;
		   color: #205520;
		   border: solid 1px #a6e3a6;
		}
		 
		.cert-icon {
		   height: 130px;
		   padding: 10px!important;
		}
	 
		@media (max-width: 680px) {.cert-icon img {height: 130px !important; width: 100%;}}
	 
		@-webkit-keyframes animatetop {
			from {top:-300px; opacity:0}
			to {top:0; opacity:1}
		}

		@keyframes animatetop {
		  from {top:-300px; opacity:0}
		  to {top:0; opacity:1}
		}
	 
		.o-grid--gallery [class*="o-grid__col"] {margin-bottom:0!important;}
		 
		.icon-bar {padding-right: 0px !important;text-align:center;}
		 
		.modal-cert {
			display: none;
			position: fixed;
			z-index: 10000;
			padding-top: 150px;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgb(0,0,0);
			background-color: rgba(0,0,0,0.9);
		}

		.modal-content-cert {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 920px;
			padding: 10px;
			border-radius: 12px;
		}

		.thumbnail-modal .close {
			display: none;
		}

		.modal-cert {
			opacity: 1;
			transition: opacity 0.4s ease;
		}

		.modal-cert.hidden {
			opacity: 0;
		}

		.modal-content-cert {  
			-webkit-animation-name: zoom;
			-webkit-animation-duration: 0.6s;
			animation-name: zoom;
			animation-duration: 0.6s;
		}

		@-webkit-keyframes zoom {
			from {-webkit-transform:scale(0)} 
			to {-webkit-transform:scale(1)}
		}

		@keyframes zoom {
			from {transform:scale(0)} 
			to {transform:scale(1)}
		}

		@media only screen and (max-width: 700px){
			.modal-content-cert {
			   width: 100%;
			   padding-top: 20%;
			}
			
		}

		.jr-head-desktop img {outline: 8px solid #727272;border-radius: 50%;margin-top: -10px;border: 4px solid #ababab;}
		
		.cv-summary {padding-right:30px;text-align: justify;}
		
		@media (min-width: 720px) and (max-width: 9999px) {
			.jr-head-mobile {
				display: none;
			}
		}
		
		@media (max-width: 720px){		
			.cv-summary {padding-right:0px!important;}
			.btn-linkedin{width: 100%; right: auto!important;margin-top: 20px;margin-bottom: -20px;}
			.jr-head-desktop{display:none;}
			.jr-head-mobile img {position: relative;width: 200px;outline: 4px solid #727272;border: 2px solid #ababab;margin: auto;border-radius: 50%;display: block;margin-top: -30px;margin-bottom: -15px;margin-right: 62px;}
			.title-mobile {text-align: center;width: auto;}
			.hr-line {
				height: 1px;
				border: none;
				top: 41px !important;
				margin-bottom: 20px;
				background: repeating-linear-gradient(
					to right,
					#ececec,
					#ececec 6px,
					transparent 0px,
					transparent 14px				   
				);
			}
		}
		.hr-line {
			height: 1px;
			border: none;
			margin-bottom: 20px;
			background: repeating-linear-gradient(
				to right,
				#ececec,
				#ececec 6px,
				transparent 0px,
				transparent 14px			   
			);
		}
		.btn-linkedin {
			background: #0E76A8;
			border-radius: 4px;
			color: #fff;
			border-width: 1px;
			border-style: solid;
			padding: 6px 10px;
			font-size: 16px;
			float: right;
			top: -12px;
			position: relative;
			right: 29px;
		}
		.btn-linkedin i{
			color:#FFF!important;
			top: 1px;
			position: relative;
		}		
		.btn-linkedin span{
			color:#FFF!important;
			border-left: 1px solid #ffffff38;
			margin-left: 2px;
			padding-left: 8px;
			position: relative;
			top: 1px;
		}			
		.btn-linkedin:link, .btn-linkedin:visited {
		  color: #fff;
		}
		.btn-linkedin:active, .btn-linkedin:hover {
		  background: #084461;
		  color: #fff;
		}		
		
.parent-container {
    position: relative;
}

.visa-badge {
    width: 90px;
    height: 90px;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 228px;
    top: 164px;
	background: #e3eaf6;
    border: 2px solid #c0cee7;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.visa-badge:hover,
.visa-badge:active {
    background: #b4c4e0;
    border-color: #8298bd;
	text-decoration:none;
}


.visa-badge__flag {
    width: 80%;
    display: block;
    position: relative;
    top: 8px;
    outline: 0 !important;
    border-radius: unset !important;
    margin-top: unset !important;
    border: unset !important;
}

.visa-badge__text {
	text-align: center;
    line-height: 1.2;
    font-weight: bold;
    font-size: 0.75rem;
    color: #002654;
    margin-top: 8px;
}

@media (max-width: 360px) {
	.visa-badge {
        right: 67vw!important;
        top: 86px;
    }
}

@media (max-width: 460px) {
	.visa-badge {
        right: 59vw!important;
        top: 86px;
    }
}

@media (max-width: 720px) {
	.visa-badge {
        right: 58vw!important;
        top: 86px;
    }
}
@media (max-width: 1200px) {
    .visa-badge {
        right: 16.5vw;
    }
}
		
#thm-badge, #thm-badge-mobile  {
  position: relative;
  width: 350px;
  height: 92px;
  background-color: #1c2538;
  background-image: url('https://riggs.com/assets/images/misc/thm-public-badge-bg-hover.svg'); /* Hosted locally — TryHackMe's CDN blocks the original */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
}

 #thm-badge-mobile {    
	display: inline-flex!important;
    width: 100%!important;
 }

/* Hover image overlay */
#thm-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://riggs.com/assets/images/misc/thm-public-badge-bg-hover.svg');
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  z-index: 0;
}

/* Fade in the overlay smoothly */
#thm-badge:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Ensure inner content stays above background layers */
#thm-badge > * {
  position: relative;
  z-index: 1;
}

  .thm-avatar-outer {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 0;
    background: linear-gradient(to bottom left, #a3ea2a, #2e4463);
    padding: 2px;
    margin-left: 10px;
  }

  .thm-avatar {
    background-image: url(https://tryhackme-images.s3.amazonaws.com/user-avatars/b0724537c85b078b5c8be0b59a99a080.png);
    display: block;
    width: 56px;
    height: 56px;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    box-sizing: content-box; /* Needed for border to stop changing image width*/
    background-color: #121212;
    object-fit: cover;
    box-shadow: 0 0 3px 0 #303030;
  }

  .badge-user-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .details-icon-wrapper {
    display: flex;
    gap: 5px;
	margin-top: -1px;
  }

  .details-wrapper {
    display: flex;
    gap: 8px;
  }

  .title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .user_name {
    font-family: 'Ubuntu', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #f9f9fb;
    transform: rotate(0.2deg);

    max-width: 135px;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }

  .rank-icon {
    width: 8px;
    height: 10px;
    font-style: normal;
    font-weight: 900;
    font-size: 10px;
    line-height: 10px;
    text-align: center;

    color: #ffbb45;
    transform: rotate(0.2deg);
  }

  .rank-title {
    font-family: Ubuntu, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;

    color: #ffffff;
    transform: rotate(0.2deg);
  }

  .detail-icons {
    font-weight: 900;
    text-align: center;

    transform: rotate(0.2deg);
  }

  .trophy-icon {
    color: #9ca4b4;
    width: 13px;
    height: 13px;
    font-style: normal;
    font-size: 11px;
    line-height: 11px;
  }

  .fire-icon {
    width: 12px;
    height: 13px;
    font-style: normal;
    font-size: 13px;
    line-height: 13px;
    color: #a3ea2a;
  }

  .award-icon {
    width: 10px;
    height: 13px;
    font-style: normal;
    font-size: 13px;
    line-height: 13px;
    color: #d752ff;
  }
  
  .face-smile {
    width: 10px;
    height: 13px;
    font-style: normal;
    font-size: 13px;
    line-height: 13px;
    color: #d752ff;
  }

  .door-closed-icon {
    width: 14px;
    height: 12px;
    font-style: normal;
    font-size: 12px;
    line-height: 12px;
    color: #719cf9;
  }

  .earth-americas {
    width: 14px;
    height: 12px;
    font-style: normal;
    font-size: 12px;
    line-height: 12px;
    color: #719cf9;
  }
  
  .gem {
    width: 14px;
    height: 12px;
    font-style: normal;
    font-size: 12px;
    line-height: 12px;
    color: #719cf9;
  }

  .star { 
	width: 14px;
    height: 12px;
    font-style: normal;
    font-size: 12px;
    line-height: 12px;
    color: #f7af3e;
  }

  .details-text {
    font-family: Ubuntu, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    color: #ffffff;
    transform: rotate(0.2deg);
  }

  .thm-link {
    text-decoration: none;
    font-family: Ubuntu, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    margin: 0;
	text-decoration: none;
    color: #f9f9fb;
    transform: rotate(0.2deg);
  }
  
  #htb-badge, #htb-badge-mobile  {
	  position: relative;
	  width: 350px;
	  height: 92px;
	  background-image: url('https://riggs.com/assets/images/misc/htb-public-badge-bg.svg');
	  background-size: cover;
	  background-position: center;
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  user-select: none;
	  cursor: pointer;
	  border-radius: 12px;
	  overflow: hidden;
 }

 #htb-badge-mobile {    
	display: inline-flex!important;
    width: 100%!important;
 }

/* Hover image overlay */
#htb-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://riggs.com/assets/images/misc/htb-public-badge-bg-hover.svg');
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  z-index: 0;
}

/* Fade in the overlay smoothly */
#htb-badge:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Ensure inner content stays above background layers */
#htb-badge > * {
  position: relative;
  z-index: 1;
}

  .htb-avatar-outer {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 0;
    background: linear-gradient(to bottom left, #a3ea2a, #2e4463);
    padding: 2px;
    margin-left: 10px;
  }

  .htb-avatar {
    background-image: url(https://riggs.com/assets/images/misc/jr-htb-avatar.png);
    display: block;
    width: 56px;
    height: 56px;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    box-sizing: content-box; /* Needed for border to stop changing image width*/
    background-color: #121212;
    object-fit: cover;
    box-shadow: 0 0 3px 0 #303030;
  }
  
  .htb-link {
    text-decoration: none;
    font-family: Ubuntu, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    margin: 0;
	text-decoration: none;
    color: #f9f9fb;
    transform: rotate(0.2deg);
  }