header-copy/* Base Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}




/* Root for Light/Dark Theme Variables */
:root {
	--background-color: #FBF5F2;
    --background-color-titles: rgba(255, 255, 255, 0.8);
	--text-color: #3B4142;
	--card-copy: #606463;
    --card-background: #F8EDE8;
    --card-border: #EBE6E5;
	--header-color: #101010;
	--header-height: 60px;
    --links-color: #3B4142;
    --links-background: #FBF5F2;
    --border-bottom: #BFBABA;
    --alt-section: #E4E2E2;
    --callout: rgba(255, 255, 255, 0.65);
    --ignacio-ponce: #000000;
	--transition-duration: 0.30s;
    
    --highlighter1: rgba(255, 255, 255, 0.65);
    --highlighter2: rgba(251, 245, 242, 0.40);
    
    --underline-link-off: #B1B1B1;
    --underline-link-on: #000000;
    
    --dot: #15B806;
    --sonar: rgba(21, 184, 6, 0.50);
    
}

.dark-theme {
    --background-color: #3B4142;
    --background-color-titles: rgba(0, 0, 0, 0.8);
    --text-color: #FBF5F2;
    --card-copy: #F8EDE8;
    --card-background: #606463;
    --card-border: #3B4142;
    --links-color: #FBF5F2;
    --links-background: #3B4142;
    --alt-section: #4F5859;
    --border-bottom: #5E6869;
    --callout: rgba(70, 77, 78, 0.65);
    --ignacio-ponce: #FFFFFF;
    
    --highlighter1: rgba(70, 77, 78, 0.65);
    --highlighter2: rgba(59, 65, 66, 0.30);
    
    --underline-link-off: #8F9292;
    --underline-link-on: #ffffff;
    
    --dot: #19C809;
    --sonar: rgba(25, 200, 9, 0.5);
    
    
    }

.alt-section {
    
    background-color: var(--alt-section);
}


.highlighter1 {
    background-color: var(--highlighter1);
    padding: 20px;}

.highlighter2 {
    background-color: var(--highlighter2);
    padding: 20px;}


    body {
        background-color: var(--background-color);
        color: var(--text-color);
        transition: background-color 0.3s, color 0.3s;
        text-rendering: optimizeLegibility;
        	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-fon-smoothing: grayscale;
        
        
    background-image: url('../images/pattern.png'); /* Replace with the path to your image */
    background-repeat: repeat; /* Ensures the image repeats */
    background-attachment: fixed; /* Keeps the background fixed when scrolling */
    background-size: auto; /* Ensures the image uses its natural size */
    background-position: top left; /* Positions the image at the top-left */    
        
        
    }

    .theme-switcher {
        position: fixed;
        top: 10px;
        right: 10px;
        padding: 10px;
        cursor: pointer;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-color);
        transition: color 0.3s;
    }


hr {
    border: none;
    height: 1px;
    background-color: var(--border-bottom);    
    margin: 0;
    
}       


body {
	/* font-family: Montserrat, sans-serif; */
    font-family: Manjari, sans-serif;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}


img {
  max-width: 100%;
  height: auto;
  display: block; /* Optional: Removes extra space below images */
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; */
    box-shadow: rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
}

.no-shadow {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0);
    border: 0;
    border-radius: 0;
} 


img .theme-toggle {
    cursor: pointer;
}


/* Custom selection styling */
::selection {
	background-color: #000000;
	color: #FBF5F2;
}




li {
    font-size: 19px;
    line-height: 1.75em;
    list-style-position: outside;
    margin: 0 10px 0 15px;
}

li::marker {
    font-size: 1.35em; /* Resize the bullet */
}



/* Header Styles */
.header {
	display: flex;
	align-items: center;
	justify-content:flex-end;
	position: sticky;
	top: 0;
	width: 100%;
	background-color: rgba(000, 000, 000, 0.5);
	/* Semi-transparent white */
	backdrop-filter: blur(10px);
	/* Blur effect */
	-webkit-backdrop-filter: blur(10px);
	/* Support for older browsers */
	padding: 0 20px;
	height: var(--header-height);
	z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
}




.footer {
	width: 100%;
	background-color: rgba(000, 000, 000, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 12px 16px 8px 16px;
	height: 60px;
	color: #FBF5F2;
	margin-top: 80px;
  align-items: center;
}







.flex-container {
    display: flex;
    align-items: center; /* Vertically centers the text */
    justify-content: space-between; /* Pushes elements to opposite ends */
    flex-wrap: nowrap;
}


.intro {
	font-size: 28px;
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 20px;
    letter-spacing: -0.35px;
}

.intro02 {
	font-size: 28px;
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 20px;
    letter-spacing: -0.35px;
    background-color: var(--callout);
    width: fit-content;
    padding: 4px 6px 0 6px;
}

h1 {
	font-size: 55px;
	line-height: 125%;
	font-weight: 700;
	margin:20px 0 20px 0;
    letter-spacing: 1px;
}
h2 {
	font-size: 45px;
	line-height: 140%;
	font-weight: 700;
	margin-bottom: 20px;
    letter-spacing: 0;
}
h3 {
	font-size: 33px;
	line-height: 150%;
	font-weight: 700;
	margin-bottom: 0;
}

.portfolio {
	font-size: 28px;
	line-height: 150%;
	font-weight: 700;
	margin-bottom: 5px;
}

h4 {
	font-size: 27px;
	line-height: 150%;
	font-weight: 700;
}

h5 {
	font-size: 22px;
	line-height: 100%;
	font-weight: 700;
    margin-bottom: -8px;
}
p {
	font-size: 18px;
	line-height: 175%;
    margin: 15px 0 15px 0
}

@media (max-width: 768px) and (min-width: 481px) {
	.intro {
	font-size: 28px;
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 20px;
    letter-spacing: 0;
}
    
    .intro02 {
	font-size: 28px;
	line-height: 140%;
	font-weight: 400;
	margin-bottom: 20px;
    letter-spacing: 0;
    background-color: var(--callout);
    width: fit-content;
    padding: 4px 6px 0 6px;
}
    
    
    

h1 {
	font-size: 55px;
	line-height: 125%;
	font-weight: 700;
	margin:20px 0 20px 0;
    letter-spacing: 1px;
}
h2 {
	font-size: 45px;
	line-height: 140%;
	font-weight: 700;
	margin-bottom: 20px;
    letter-spacing: 0;
}
h3 {
	font-size: 33px;
	line-height: 150%;
	font-weight: 700;
	margin-bottom: 0;
}

.portfolio {
	font-size: 28px;
	line-height: 150%;
	font-weight: 700;
	margin-bottom: 5px;
}

h4 {
	font-size: 27px;
	line-height: 150%;
	font-weight: 700;
}

h5 {
	font-size: 22px;
	line-height: 100%;
	font-weight: 700;
    margin-bottom: -8px;
}
p {
	font-size: 18px;
	line-height: 175%;
    margin: 15px 0 15px 0
}

 
    
    
    
}
@media (max-width: 480px) {
	
     .intro {
        font-size: 20px;
		line-height: 150%;
		font-weight: 400;
		margin: 0 0 20px 0;
        padding: 0 0 0 0;
    }
    
    .intro02 {
        font-size: 20px;
		line-height: 150%;
		font-weight: 400;
		margin: 0 0 20px 0;
        padding: 0 0 0 0;
        background-color: var(--callout);
        width: fit-content;
        padding: 4px 6px 0 6px;
    }
    
    
    
    
    h1 {
		font-size: 32px;
		line-height: 125%;
		font-weight: 700;
	}
	h2 {
		font-size: 24px;
		line-height: 150%;
		font-weight: 700;
	}
	h3 {
		font-size: 22px;
		line-height: 150%;
		font-weight: 700;
	}
    
    .portfolio {
		font-size: 19px;
		line-height: 150%;
		font-weight: 700;
	}
    
    
	h4 {
		font-size: 20px;
		line-height: 150%;
		font-weight: 700;
	}
    
    h5 {
		font-size: 18px;
		line-height: 150%;
		font-weight: 700;
	}
    
    
    
	p {
		font-size: 16px;
		line-height: 170%;
        font-weight: 400;
	}
}
.logo {
	margin: 20px 20px 0 20px;
    z-index: 999999;
    position: fixed;
}
/* Theme Switcher Styles */
.theme-switcher {
	font-size: 1.5rem;
	cursor: pointer;
	color: #FBF5F2;
}




a.links {
display: inline-block;
  color:  var(--links-color);
  background-color:  var(--links-background);
  border: 1px solid var(--links-color);
  border-radius: 40px;
  padding: 8px 15px 4px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
    font-weight: 400;
}
a.links:hover {
color: var(--links-background);
  background-color: var(--links-color);
  border-color: transparent;
}

a.references-links {
display: inline-block;
  color:  var(--links-color);
  background-color:  var(--links-background);
  border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid var(--links-color);
    border-left: 1px solid transparent;
  border-radius: 0;
  padding: 10px 10px 4px 10px;
  text-decoration: none;
  transition: all 0.3s ease;
    font-weight: 400;
}
a.references-links:hover {
color: var(--links-color);
  background-color: var(--links-background);
  border: 1px solid var(--links-color);
    border-radius: 40px;
}


/*
a.references-links {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 600;
	padding: 9px 3px 0 3px;
	border-bottom: solid;
    font-size: 16px
}
a.references-links:hover {
    background-color: var(--links-background);
	color: var(--links-color);
	transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
	border-radius: 4px;
	text-decoration: none;
}
*/










a.email-links {
	background-color: transparent;
	color: #FBF5F2;
	text-decoration:none;
	font-weight: 700;
	padding: 6px 3px 0 3px;
    border-bottom: solid #FBF5F2;
}
a.email-links:hover {
    background-color: transparent;
	color: #ffffff;
	transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
	text-decoration:none;
    border-bottom: solid #ffffff;
}

a.logo-link {
    text-decoration: none;
        background-color: trasparent;
}

a.logo-link:hover {
    text-decoration: none;
    background-color: trasparent;
}


/* Content Area */
.content {
	padding: 20px;
	max-width: 1200px;
	margin: 20px auto;
	text-align: left;
}

.content-portfolio-piece {
            padding: 0 20px 20px 20px;
            max-width: 960px;
            margin: 0 auto;
        }

/* Icons */
.icon {
	display: inline-block;
	width: 24px;
	height: 24px;
}
.sun-icon, .moon-icon {
	display: none;
}
.light-theme .sun-icon {
	display: inline;
}
.dark-theme .moon-icon {
	display: inline;
}
#header-copy {
	float: left;
	width: 65%;
     
}

.hero {
    float: left;
	width: 100%;
    padding: 0 80px 0 80px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}





#header-photo {
	width: 35%;
	float: right;
	height: 500px;
	background-image: url('../images/me-placeholder.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
    border-bottom: 1px solid var(--border-bottom);
}

/* Responsive Design for Tablets and Smaller Screens */
@media (max-width: 768px) {
	.header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: sticky;
		top: 0;
		width: 100%;
		background-color: rgba(000, 000, 000, 0.5);
		backdrop-filter: blur(10px);
		/* Blur effect */
		-webkit-backdrop-filter: blur(10px);
		/* Support for older browsers */
		padding: 0 20px;
		height: var(--header-height);
		z-index: 1000;
	}
	.logo {
	margin: 20px 20px 0 20px;
    z-index: 999999;
    position: fixed;
}
	.theme-switcher {
		font-size: 1.2rem;
	}
}
/* Responsive Design for Mobile Phones */
@media (max-width: 500px) {
	.header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: sticky;
		top: 0;
		width: 100%;
		background-color: rgba(000, 000, 000, 0.5);
		backdrop-filter: blur(10px);
		/* Blur effect */
		-webkit-backdrop-filter: blur(10px);
		/* Support for older browsers */
		padding: 0 20px 0 0;
		height: var(--header-height);
		z-index: 1000;
	}
	a.links {
		color: inherit;
		text-decoration: none;
		padding: 6px 6px 1px 6px;
		border: solid 2px;
        font-size: 16px;
        
	}
	a.links:hover {
		background-color: #838383;
		color: #FBF5F2;
		text-decoration: none;
	}
    
    
    	a.references-links {
		color: inherit;
		text-decoration: none;
		padding: 3px 3px 2px 3px;
		border-bottom: solid 1px;
        font-size: 16px;
	}
	a.references-links:hover {
		background-color: #838383;
		color: #FBF5F2;
		transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
		border-radius: 4px;
		text-decoration: none;
	}
    

	a:hover {
		background-color: #101010;
		color: #FBF5F2;
	}
    
    a.logo-link {
    text-decoration: none;
    background-color: none;
}

a.logo-link:hover {
    text-decoration: none;
    background-color: rgba(000, 000, 000, 0);
}
    
    
    
	.logo {
	margin: 20px 20px 0 20px;
    z-index: 999999;
    position: fixed;
}
	.theme-switcher {
		font-size: 1.5rem;
	}
	.content {
		padding: 0 20px 20px 20px;
		max-width: 100%;
		}
    
    .content-portfolio-piece {
            padding: 0;
            margin: 20px auto;
        }
    
    
    
	#header-copy {
		width:100%;
	}
    
    .hero {
        width:100%;
        padding: 0;
    }
    
    
	#header-photo {
		display: none;
	}
    
    
    .alt-section {
        padding: 0 20px 0 20px;
    }
 
    
    .hide {
        display: none;
    }
    
    

    
    
}











        /* Portfolio cards container */
	.portfolio-cards {
		max-width: 100%;
		/* Set max-width */
		margin: 0 auto;
		display: grid;
		gap: 20px;
		padding: 0 20px 20px 20px;
	}
        
	/* Card styling */
	.card {
        background-color: var(--card-background);
		color: var(--card-copy);
		border: 1px solid;
        border-color: var(--card-border);
		border-radius: 8px;
		overflow: hidden;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		/* Ensures title and description are under the image */
		transition: box-shadow 0.3s ease;
        
		/* Smooth shadow transition */
	}
        
	/* Image in card */
	.card img {
		width: 100%;
		height: auto;
		object-fit: cover;
		aspect-ratio: 16 / 9;
		/* 16:9 aspect ratio */
	}
        
	/* Title and description */
	.card .content-text {
		padding: 15px;
	}
        
	.card h3 {
		font-size: 1.25rem;
		margin-bottom: 0;
	}
        
	.card p {
		font-size: 1rem;
	}
        
	@media (min-width: 768px) {
		.portfolio-cards {
			grid-template-columns: repeat(3, 1fr);
			/* 2 cards per row on tablets and small desktops */
		}
		.card a {
			padding: 0;
		}
	}
        
	/* Grid layout for different screen sizes */
	@media (max-width: 700px) {
		.portfolio-cards {
			grid-template-columns: 1fr;
			/* 1 card per row on mobile */
		}
		.card a {
			padding: 0;
		}
	}
        
	/* Hover effect for shadow */

.card {
		opacity: 0;
		transform: translateY(100px);
		transition: opacity 0.75s ease-out, transform 0.75s ease-out;
    border: 1px solid;
        border-color: var(--card-border);
	}

	.card:hover {
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
		background-color: var(--card-background);
		color: var(--card-copy);
		border: 1px solid;
        border-color: var(--card-border);
		transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
	}
	
	.card.show {
		opacity: 1;
		transform: translateY(0);
	}
	/* Waving animation */
	@keyframes waveAnimation {
		0% {
			transform: rotate(0deg);
		}
		10% {
			transform: rotate(20deg);
		}
		20% {
			transform: rotate(-15deg);
		}
		30% {
			transform: rotate(20deg);
		}
		40% {
			transform: rotate(-10deg);
		}
		50% {
			transform: rotate(15deg);
		}
		60% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
        
	/* Waving class */
	.waving {
		display: inline-block;
		animation: waveAnimation 1.5s ease-in-out;
	}
        
	/* Go to Top Button Styles */
	#goToTopBtn {
		position: fixed;
		bottom: 8px;
		right: 20px;
		display: none;
		background-color: rgba(000, 000, 000, 0.5);
		backdrop-filter: blur(10px);
		/* Blur effect */
		-webkit-backdrop-filter: blur(10px);
		/* Support for older browsers */
		color: #FBF5F2;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		font-size: 24px;
		cursor: pointer;
		transition: opacity 0.3s ease;
		z-index: 999
}
	#goToTopBtn:hover {
		background-color: rgba(000, 000, 000, 0.75);
		backdrop-filter: blur(10px);
		/* Blur effect */
		-webkit-backdrop-filter: blur(10px);
		/* Support for older browsers */
		color: #fff;
	}






.sticky-header {
    position: sticky;
    top: 5px;
    color: var(--text-color);
    padding: 9px 5px 0 5px;
    margin-left: 5px;
    text-align: left;
    z-index: 9999;
    margin-top: 20px;
    width: fit-content;
    font-size: 32px;
}

.sticky-header02 {
    position: sticky;
    top: 60px;
    padding: 9px 12px 0 12px;
    margin-left: 0;
    text-align: left;
    z-index: 999;
    width: fit-content;
    
    /* color: var(--text-color);
    background-color: var(--background-color-titles);
    */
    
    color: var(--background-color-titles);
    background-color: var(--text-color);
    
    
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


 @media (max-width: 1300px) {        
.sticky-header {
    position: sticky;
    top: 60px;
    color: var(--text-color);
    padding: 9px 8px 0 8px;
    margin-left: 5px;
    text-align: left;
    z-index: 9999;
    margin-top: 20px;
    width: fit-content;
}        
     
.sticky-header02 {
    position: sticky;
    top: 116px;
    padding: 9px 5px 0 5px;
    margin-left: 0;
    text-align: left;
    z-index: 9999;
    width: fit-content;
    color: var(--background-color-titles);
    background-color: var(--text-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}     
     
     
        }




.testimonial-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 20px; /* Space between testimonials */
    justify-content: space-between; /* Aligns items evenly */
    margin-top: -40px;
}

.testimonial {
    flex: 1 1 calc(50% - 20px); /* Takes 50% width minus the gap, ensuring 2 per row */
    padding: 20px;

}

.testimonial p {
    margin: 0 0 10px;
}

.testimonial h4 {
    margin: 0;
    font-weight: 700;
}

@media (max-width: 600px) {
    .testimonial {
        flex: 1 1 100%; /* Full width on small screens */
    }
}



blockquote {
	margin: 0;
	padding: 0;
	position: relative;
	width: 60%;
	min-width: 100%;
	max-width: 100%;
	font-size: 1.25vw;
	line-height: 1.4;
	text-rendering: optimizeLegibility;
}

blockquote p:first-of-type:before {
	content: '\201c';
	position: absolute;
	left: -.5em;
}

blockquote p:last-of-type:after {
	content: '\201d';
	position: absolute;
}

@media screen and (max-width: 1600px) {
	blockquote {
		font-size: 2vw;
	}
}

@media all and (max-width: 1200px) {
	blockquote {
		font-size: 2.5vw;
	}
}

@media all and (max-width: 600px) {
	blockquote {
		font-size: 18px;
	}
	blockquote {
		width: 100%;
		min-width: 100%;
	}
    
    
    .footer {
	width: 100%;
	background-color: rgba(000, 000, 000, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 12px 16px 8px 16px;
	height: 60px;
	color: #FBF5F2;
	margin-top: 80px;
  align-items: center;
        line-height: 16px;
}
    
    

    
    
}



 /* Hover word styling */
        .hover-word {
            position: relative;
            display: inline-block;
            cursor: pointer;
            transition: color 0.5s ease; /* Fade text color to red */
        }

        .hover-word.hovered {
            color: var(--ignacio-ponce); /* Change text color to red on hover */
            cursor: auto;
        }

        /* Image styling */
        #followImage {
            position: absolute;
            pointer-events: none;
            width: 200px; /* Adjust image size */
            height: auto;
            display: none;
            opacity: 0; /* Initially hidden with opacity */
            transition: opacity 0.25s ease; /* Fade-in effect for image */
            transform: translate(-50%, -115%); /* Center the image above the cursor */
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0);
    border: 0;
    border-radius: 0;
            z-index: 999999;
        }





.container {
    display: flex;
    flex-wrap: wrap; /* Allows children to wrap to the next line */
    width: 100%;
}

.left {
    box-sizing: border-box;
}

.right {
    box-sizing: border-box;
}



/* Desktop view: 50% width for both divs */
.left {
    width: 40%;
}

/* Desktop view: 50% width for both divs */
.right {
    width: 60%;
}




/* Mobile view: 100% width for both divs */
@media (max-width: 768px) {
    .left, .right {
        width: 100%;
    }
}





a.slide-in-back
        {
  color: var(--text-color);
  background-image: linear-gradient(var(--underline-link-on), var(--underline-link-on)),
    linear-gradient(var(--underline-link-off), var(--underline-link-off));
  background-size: 0% 0.1em, 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
font-weight: 700;
            line-height: 250%;
}

.slide-in-back {
  background-position-x: 0%;
}

.slide-in-back:hover,
.slide-in-back:focus,
.slide-in-back:active {
  background-size: 100% 0.1em, 100% 0.1em;
color: var(--underline-link-on);
}


@media (max-width: 500px) {
  a.slide-in-back:hover,
  a.slide-in-back:focus,
  a.slide-in-back:active {
      background-color: transparent !important;
    background-size: 0% 0.1em, 100% 0.1em; /* Remove hover effect on mobile */
    color: var(--text-color); /* Ensure text remains visible */
  }
}





.dot-container {
            display: inline-block; /* Makes the dot behave like text */
            width: 32px; /* Ensures the pulse fits */
            height: 32px;
            position: relative;
            vertical-align: middle; /* Aligns with text vertically */
        }

        .dot {
            width: 6px;
            height: 6px;
            background-color: var(--dot);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .sonar {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0); /* Start with scale 0 */
            width: 28px; /* The max width to match the desired size */
            height: 28px; /* The max height to match the desired size */
            border-radius: 50%;
            background-color: var(--sonar);
            animation: pulse 2s infinite;
            will-change: transform, opacity;
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0); /* Start with scale 0 */
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1); /* End with scale 1 (32px size) */
                opacity: 0;
            }
        }



.round-image {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    float: left;
    margin: 0 10px 5px 0;
    }