#footer {
	background-color: var(--primary);
	color: var(--txtprimbg);
	padding: 20px 0 0 0;
	font-size: var(--font-size-base);
}

#footer h4 {
	color: var(--secondary);
	margin-bottom: 15px;
}

#footer p,
#footer ul,
#footer ul li a {
	color: var(--txtprimbg);
}

#footer .footer-content {
	padding-bottom: 20px;
}

#footer .social-links a {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--secondary);
	line-height: 40px;
	margin-right: 10px;
	color: var(--txtprimbg);
	text-align: center;
	transition: background-color 0.3s;
}

#footer .social-links a:hover.instagram {
	background-color: var(--instagram);
}
#footer .social-links a:hover.linkedin {
	background-color: var(--linkedin);
}
#footer .social-links a:hover.whatsapp {
	background-color: var(--whatsapp);
}

#footer .footer-links {
	list-style: none;
	padding: 0;
}

#footer .footer-links li a {
	transition: color 0.3s;
	display: block;
	padding: 5px 0;
}

#footer .footer-links li a:hover {
	color: var(--secondary);
}

#footer .footer-bottom {
	background-color: var(--darkbg);
	color: var(--txtprimbg);
	padding: 10px 0;
	text-align: center;
	border-top: 1px solid var(--secondary);
}

#footer .footer-bottom p {
	margin: 0;
	font-size: smaller;
}

/* Enhance accessibility with focus styles */
#footer a:focus {
	outline: 2px dashed var(--secondary);
	outline-offset: 2px;
}
#footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0; /* Ensure there's no default margin */
}

#footer .footer-links li {
	padding: 5px 0; /* Provides padding for each list item */
}

#footer .footer-links .link-container {
	display: inline-block; /* Makes the div only as wide as its content */
	position: relative; /* Establishes a positioning context */
}

#footer .footer-links a {
	color: var(--txtprimbg); /* Text color */
	text-decoration: none; /* Removes underline */
	transition: color 0.3s; /* Smooth color transition for hover */
}

#footer .footer-links hr {
	border: 0; /* Removes default border */
	height: 2px; /* Sets the height of the hr */
	background-color: #14a098; /* Initial background color */
	margin: 5px 0 0; /* Space above the hr */
	transition: background-color 0.5s; /* Smooth transition for hover */
	width: 100%; /* Full width of the container */
}

#footer .footer-links li:hover a {
	color: var(--secondary); /* Changes color on hover */
}

#footer .footer-links li:hover hr {
	background-color: #0f292f; /* Changes hr color on hover */
}