@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500;800;900&display=swap');

:root {
	--primary-clr: hsl(0, 0%, 0%);
	--secondary-clr: hsl(0, 0%, 11%);
	--other-clr: hsl(0, 0%, 61%);
	--tag-clr: hsl(0, 0%, 55%);
	--accent-clr: hsl(160, 100%, 70%);
	--accent-other-clr: hsl(166, 100%, 80%);
	--main-clr: hsl(0, 0%, 95%);
	--section-mt: 8rem;
	--transition: cubic-bezier(0.25, 0.32, 0.85, 0.58);
	--transition-clr: color 300ms var(--transition);
	font-size: 10px;

	/* style for scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--other-clr) hsl(0, 0%, 73%);
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

/* style webkit browsers (chrome, edge) scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: hsl(0, 0%, 89%);
}

::-webkit-scrollbar-thumb {
	background-color: var(--other-clr);
}

::selection {
	background: var(--accent-clr);
	color: var(--primary-clr);
}

/* remove focus from all elements */
*:focus:not(:focus-visible) {
	outline: none;
}

/* adds focus style only on pressing tab key */
:focus-visible {
	outline: 2px dotted var(--accent-clr);
	outline-offset: 3px;
}

/***********************
	CSS RESET
*********************/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Hide the cursor on mobile devices */
@media (pointer: coarse) {
	body {
	  cursor: none; /* Hides the default cursor on touch devices */
	}
  }

@media only screen and (max-width: 768px) {
	/* Example: adjust font size or layout for mobile devices */
	.hero-text {
	  font-size: 2rem;
	}
	.cert-grid {
	  grid-template-columns: 1fr; /* Single column on mobile */
	}
  }
  
/* Set core root defaults */
@media screen and (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Fira Sans', 'Segoe UI',
		'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
		'Helvetica Neue', sans-serif;
	font-size: clamp(1.4rem, 1vw, 1.6rem);
	line-height: 1.6;
	background: var(--primary-clr);
	color: var(--main-clr);
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}



/* Hide default cursor */
body, html {
	cursor: none;
  }
	a, button, img, input, textarea {
		cursor: none !important;
	}
  
  
  /* Main cursor dot */
  .cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	background-color: #00ffae;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 8px #00ffae;
	mix-blend-mode: difference;
  }
  
  /* Trailing dots */
  .cursor-trail {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #00ffae;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	opacity: 0.3;
	mix-blend-mode: difference;
  }
  .cursor-dot.hover,
.cursor-trail.hover {
  transform: translate(-50%, -50%) scale(1.6);
  background-color: #ffffff;
  opacity: 0.8;
}


  

  
  

a {
	text-decoration: none;
	color: currentColor;
}

img,
picture {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
	all: unset;
}

ul li {
	list-style: none;
}

h1,
h2,
h3 {
	line-height: 1.2;
	font-weight: 900;
}

/***********************
	ANIMATION UTILITIES
*********************/
.bounce-in-left {
	animation: bounce-in-left 1.1s both 0.3s;
}

.slide-in-top {
	animation: slide-in-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.fade-in {
	animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s both;
}

@keyframes bounce-in-left {
	0% {
		transform: translateX(-600px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		transform: translateX(0);
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		transform: translateX(-68px);
		animation-timing-function: ease-in;
	}
	72% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
	81% {
		transform: translateX(-28px);
		animation-timing-function: ease-in;
	}
	90% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
	95% {
		transform: translateX(-8px);
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slide-in-top {
	0% {
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/*******************
		UTILITIES
*************************/
.container {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 1rem;
}

.subtitle {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: clamp(1.2rem, 1vw, 1.35rem);
	color: var(--accent-clr);
}

.title {
	font-size: clamp(3.2rem, 3vw, 6rem);
}

.info {
	max-width: 500px;
	font-size: 1.35rem;
	padding-block-start: 1.3rem;
	color: var(--other-clr);
}

.btn {
	padding: 0.8rem 3rem;
	margin-block-start: 2rem;
	color: var(--main-clr);
	border-radius: 0.2rem;
	cursor: pointer;
}

.btn:active {
	transform: scale(0.98);
}

.hover-effect::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--accent-clr);

	transform: scaleX(0);
	transform-origin: left;
	transition: all 300ms ease-in-out;
}

.hover-effect:hover::after {
	transform-origin: right;
	transform: scaleX(1);
}

small {
	color: var(--other-clr);
}

/* link to skip to content for accesibility (keyboard users) */
.skip-to-content {
	position: absolute;
	background: var(--accent-clr);
	color: var(--secondary-clr);
	padding: 0.75rem 1rem;
	left: 1.5rem;
	top: 0;
	border-radius: 0 0 0.5rem 0.5rem;
	font-size: 1.4rem;
	transform: translateY(-200%);
	transition: all 350ms ease-in;
}

.skip-to-content:focus {
	transform: translateY(0);
}

/*******************
		HEADER
*************************/
.nav {
	width: 100%;
	padding: 0 1rem;
}

.nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 2rem;
	background: var(--secondary-clr);
	margin-block-start: 1.15rem;
	border-radius: 0.5rem;
	font-size: 1.4rem;
}

.nav-logo h3 {
	font-weight: 800;
}

.logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.hamburger {
	display: none;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.nav-links {
	position: relative;
	transition: var(--transition-clr);
}

.nav-links:hover {
	color: var(--accent-clr);
}

.social-nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.social-nav a {
	line-height: 0;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms cubic-bezier(0.25, 0.32, 0.85, 0.58);
}

.social-nav a:hover {
	background: var(--accent-other-clr);
	color: var(--secondary-clr);
}

/* 1) Make it sticky */
.main-header {
	position: sticky;
	top: 10px;
	left: 0;
	width: 100%;
	z-index: 1000;
  
	/* For the slide‑in initial load (if you want it) */
	animation: slideInTop 0.6s ease forwards;
  }
  
  /* 2) Define the “scrolled” state */
  .main-header.scrolled {
	background: rgba(0, 0, 0, 0.75);       /* semi‑opaque bg */
	backdrop-filter: blur(8px);            /* soft blur behind it */
	padding-top: 0.4rem;                   /* shrink padding */
	padding-bottom: 0.4rem;
	transition: background 0.3s ease, padding 0.3s ease;
  }
  
  /* 3) Your slide-in-top keyframes (only if you want that initial animation) */
  @keyframes slideInTop {
	0%   { transform: translateY(-100%); opacity: 0; }
	100% { transform: translateY(0);      opacity: 1; }
  }
  

/*******************
		HERO SECTION
*************************/
.hero {
	padding: 0 1rem;
}

.hero .container {
	margin-block-start: var(--section-mt);
	display: grid;
	place-items: center;
	gap: 5rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hero-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.name {
	font-size: clamp(3.6rem, 5vw, 5.8rem);
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.intro {
	color: var(--other-clr);
}

.hero img {
	max-width: 375px;
}

.hero .code {
	filter: drop-shadow(0 0 0.75rem var(--secondary-clr));
}

.hero-btn-container {
	margin-block-start: 5rem;
	display: flex;
	/* align-items: center; */
}

.hire-btn {
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	border: 1px solid var(--accent-clr);
	color: var(--accent-clr);
	transition: all 300ms cubic-bezier(0.25, 0.32, 0.85, 0.58);
	z-index: 1;
	position: relative;
	font-size: inherit;
	overflow: hidden;
}

.hire-btn::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: 100%;
	right: 100%;
	width: 2rem;
	height: 1em;
	border-radius: 50%;
	background-color: var(--accent-clr);
	transform-origin: center;
	transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
	transition: transform 0.45s ease-in-out;
}

.hire-btn:hover {
	cursor: pointer;
	color: hsl(0, 0%, 9%);
	border: 0;
}

.hire-btn:hover::before {
	transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
}

.download-link {
	color: var(--other-clr);
	transition: color 0.45s ease-in-out;
}

.download-link:hover {
	color: #fff;
}

.download-link:focus {
	outline: none;
}

/*******************
		ABOUT SECTION
*************************/
.about-me {
	margin-block-start: var(--section-mt);
	background: var(--secondary-clr);
	padding: var(--section-mt) 1rem;
}

.about-me .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	place-items: center;
	gap: 8rem;
	position: relative;
}

.about-me img {
	align-self: end;
	justify-self: end;
	width: 425px;
	box-shadow: 0px 0px 2.2px rgba(0, 0, 0, 0.006),
		0px 0px 5.3px rgba(0, 0, 0, 0.008), 0px 0px 10px rgba(0, 0, 0, 0.01),
		0px 0px 17.9px rgba(0, 0, 0, 0.012), 0px 0px 33.4px rgba(0, 0, 0, 0.014),
		0px 0px 80px rgba(0, 0, 0, 0.02);
	/* filter: brightness(0.8); */
}

.about {
	padding-block-start: 1.25rem;
}

.about p {
	padding-block-start: 2rem;
	line-height: 1.8;
}

/*******************
		MY SKILLS SECTION
*************************/
.my-skills {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

.my-skills ul {
	padding-block-start: 5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.2rem 1rem;
}

/*******************
		PROJECTS SECTION
*************************/
.projects-section {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

.projects {
	padding-block-start: 5rem;
	display: flex;
	flex-direction: column;
	gap: 12rem;
}

.project {
	margin-bottom: 60px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	place-items: center;
	gap: 5rem;
}

.project-img {
	transition: opactiy 300ms ease-in-out;
	position: relative;
	display: inline-block;
	height: 100%;
}

.project-img:hover {
	opacity: 0.9;
}

.project:nth-child(even) a {
	order: 2;
}
.project:nth-child(even) div {
	order: 1;
}

.project h3 {
	font-size: clamp(2rem, 3vw, 4rem);
	font-weight: 500;
	letter-spacing: 5px;
	color: var(--other-clr);
}

.project h2 {
	padding-block-start: clamp(1.5rem, 2vw, 3rem);
	font-size: clamp(2.5rem, 3vw, 4rem);
}

.project p {
	padding-block-start: 1.5rem;
	max-width: 500px;
}

.tech-stack,
.project-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	padding-block-start: 2rem;
}

.project-links {
	column-gap: 5rem;
	padding-block-start: 3.2rem;
}

.tech-stack li {
	padding: 0.2rem 0.5rem;
	background: var(--tag-clr);
	border-radius: 2px;
	color: var(--primary-clr);
	font-size: clamp(1.15rem, 1vw, 1.3rem);
}

.project-links a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	transition: var(--transition-clr);
}

.project-links a:hover {
	color: var(--accent-clr);
}



/*******************
		CONTACT SECTION
*************************/
.contact {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

.mail-link {
	display: flex;
	margin-block-start: var(--section-mt);
	width: max-content;
	transition: var(--transition-clr);
	position: relative;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.mail-link:hover {
	color: var(--accent-clr);
	text-decoration: none;
}

/*******************
		FOOTER
*************************/
.footer {
	margin-block-start: var(--section-mt);
	background: var(--secondary-clr);
	padding: 0 1rem;
}

.footer .container {
	margin-block-start: var(--section-mt);
	font-size: 1.35rem;
	padding: 2rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.footer em {
	color: var(--other-clr);
}

.footer div {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.footer ul {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.footer a {
	letter-spacing: 1px;
	transition: var(--transition-clr);
	position: relative;
}

.footer a:hover {
	color: var(--accent-clr);
}

.top {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 1.15rem;
}

.scroll {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: flex-end;
}

/* responsiveness */
@media screen and (max-width: 50em) {
	body::after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--secondary-clr);
		transform: translateY(-100%);
	}

	body.open::after {
		transition: transform 300ms ease-in-out;
		transform: translateY(0);
	}

	.skip-to-content {
		display: none;
	}

	.nav {
		position: relative;
		z-index: 1;
	}

	.nav-list,
	.social-nav {
		transition: opacity 300ms ease-in-out;
	}

	.nav-list {
		flex-direction: column;
		position: absolute;
		top: 250px;
		left: 50%;
		transform: translate(-50%);
		height: 100vh;
		opacity: 0;
		pointer-events: none;
	}

	.social-nav {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 175px;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-list.open,
	.social-nav.open {
		opacity: 1;
		pointer-events: all;
	}

	.hero-btn-container {
		justify-content: center;
	}

	/* hamburger menu */
	.hamburger {
		width: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
		transition: transform 330ms ease-out;
	}

	.hamburger.open {
		transform: rotate(-45deg);
	}

	.line-menu {
		background: hsl(0, 0%, 100%);
		width: 100%;
		height: 1.5px;
	}

	.line-menu:not(:first-child) {
		margin-block-start: 0.75rem;
	}

	.line-menu.half {
		width: 50%;
	}

	.line-menu.start {
		transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
		transform-origin: right;
	}

	.open .line-menu.start {
		transform: rotate(-90deg) translateX(3px);
	}

	.line-menu.end {
		align-self: flex-end;
		transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
		transform-origin: left;
	}

	.open .line-menu.end {
		transform: rotate(-90deg) translateX(-3px);
	}

	.hero .container {
		height: 60vh;
		text-align: center;
		position: relative;
	}

	.hero img {
		display: none;
	}

	.my-skills ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.project:nth-child(even) img {
		order: 1;
	}
	.project:nth-child(even) div {
		order: 2;
	}

	.other-projects {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.other-projects ul {
		justify-content: center;
	}

	.footer .container {
		justify-content: center;
		gap: 3rem;
	}

	.mail-link {
		justify-content: center;
	}
}




.hover-video {
	transition: transform 0.4s ease;
	border-radius: 8px;
  }
  
  .hover-video:hover {
	transform: scale(1.03);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  }

/* Container positioning (unchanged) */
.social-dropdown {
	position: relative;
  }
  
  /* Dropdown panel */
  .insta-dropdown {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translateX(-50%) translateY(-10px);
	background: #111;               /* dark background to match theme */
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: nowrap;           /* prevent text wrap */
	z-index: 10;
	min-width: 180px;              /* make it wider for readability */
  }
  
  /* Show on hover */
  .social-dropdown:hover .insta-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
  }
  
  /* List items reset */
  .insta-dropdown li {
	list-style: none;
	padding-top: 5%;
  }
  
  /* Links—full width, larger text, plenty of padding */
  .insta-dropdown li a {
	display: block;
	width: 100%;
	padding: 0.75rem 1.2rem;
	font-size: 1.1rem;            /* ~15px */
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
  }
  
  /* Full-text hover highlight */
  .insta-dropdown li a:hover {
	background-color: var(--accent-other-clr);
	color: var(--secondary-clr);
	border-radius: 6px;            /* soften corners on hover */
  }
  














  /* ===== Experience Section Styling ===== */

  .experience {
	margin-top: 250px
  }

.experience-items {
	margin-top: 3rem;
  }
  .experience-item {
	display: flex;
	align-items: center;
	margin-bottom: 3rem;
	padding: 3rem;
	background: var(--secondary-clr);
	border-radius: 1rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
  }
  .experience-item:hover {
	transform: translateY(-5px);
  }
  .experience-img {
	flex: 0 0 50%; /* Takes half the width of the experience item */
	max-width: 200px;
	margin-right: 20px;
  }
  .experience-img img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
	object-fit: cover;
  }
  
  .experience-content h3 {
	font-size: 3rem;
	margin-bottom: 0.5rem;
  }
  .experience-content .experience-date {
	font-size: 1.5rem;
	color: var(--accent-other-clr);
	margin-bottom: 1rem;
  }
  .experience-content p {
	font-size: 1.7rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
  }

  /* For mobile responsiveness */
@media only screen and (max-width: 768px) {
	.experience-item {
	  flex-direction: column; /* Stack the items vertically */
	  align-items: flex-start; /* Align items to the left */
	}
  
	.experience-img img {
	  max-width: 100px; /* Smaller image size for mobile */
	  margin-bottom: 1rem;
	}
  
	.experience-content h3 {
	  font-size: 1.3rem; /* Reduce font size on mobile */
	}
  
	.experience-content p {
	  font-size: 1rem; /* Adjust paragraph size */
	}
  
	.experience-content .experience-date {
	  font-size: 1rem; /* Adjust date font size */
	}
  }
  
  




  .animated-line-divider {
	width: 66%;
	height: 4px;
	margin: 4rem auto;
	border-radius: 10px;
	background: linear-gradient(270deg, rgb(0, 131, 37), rgb(54, 175, 255), rgb(255, 255, 255));
	background-size: 600% 600%;
	animation: glowLine 4s ease infinite;
	box-shadow: 0 0 15px #0ff4;
  }
  
  @keyframes glowLine {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 100% 50%;
	}
	100% {
	  background-position: 0% 50%;
	}
  }
  .svg-divider {
	margin-top: 45px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
  }
  .svg-divider svg {
	display: block;
	width: 100%;
	height: 80px;
  }
	

.certifications {
	margin-top: 250px;
	margin-bottom: 100px;
}


.cert-grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	padding: 2rem 0;
	scroll-behavior: smooth;
	scrollbar-width: thin; /* For Firefox */
	scrollbar-color: #4a4a4a #0a0a0a; /* thumb and track */
	overflow-x: auto;
}

.cert-grid::-webkit-scrollbar {
	height: 10px;
	background-color: #0a0a0a; /* Track background */
}
.cert-grid::-webkit-scrollbar-thumb {
	background: #0a0a0a;
	border-radius: 10px;
}
.cert-grid::-webkit-scrollbar-track {
	background: transparent;
}
.cert-grid::-webkit-scrollbar-thumb {
	background: linear-gradient(145deg, #00ffcc, #007f7f);
	border-radius: 10px;
	box-shadow: 0 0 10px #00ffcc;
	transition: background 0.3s ease;
}

.cert-grid::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(145deg, #00ffe1, #009999);
	box-shadow: 0 0 15px #00ffe1;
}


.cert-card {
	flex: 0 0 auto;
	width: 280px;
	background: var(--secondary-clr);
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	transition: transform 0.3s ease;
	position: relative;
	scroll-snap-align: start;
}
.cert-card:hover {
	transform: translateY(-6px);
}
.cert-card img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 8px;
}
.cert-card h3 {
	margin: 0.5rem 0 0.2rem;
}
.cert-card p,
.cert-card .cert-date {
	font-size: 1.65rem;
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(5, 168, 149);
}

/* More Info Button */
.cert-card .more-info {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	width: 32px;
	height: 32px;
	background: black;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, transform 0.3s ease;
}
.cert-card .more-info svg {
	width: 16px;
	height: 16px;
	fill: var(--secondary-clr);
	transition: transform 0.3s ease;
}
.cert-card .more-info:hover {
	background: rgb(0, 118, 169);
	transform: scale(1.1);
}
.cert-card .more-info:hover svg {
	transform: scale(1.2);
}