/*   
Theme Name: Benevolence Child Theme
Theme URI: https://wplook.com/product/themes/non-profit/benevolence-church-wordpress-theme/
Description: Use this theme to start your Benevolence Child Theme development. Works with Benevolence 4.0+
Author: Victor Tihai
Author URI: http://wplook.com/
Template: benevolence-wpl
Version: 2.3
*/

/* Add your Custom CSS code Below */

/* The parent theme reserves a 1px top strip on #masthead meant to be
   covered by #toolbar's dark overlay -- we removed the toolbar, which
   left that strip showing as a thin green line above the logo bar. */
#masthead {
	padding-top: 0;
}

/* ==========================================================================
   Brand tokens (pulled from the live Theme Options colours)
   ========================================================================== */
:root {
	--mctd-green: #008c64;
	--mctd-yellow: #fecb27;
	--mctd-red: #d30731;
	--mctd-ink: #223;
	--mctd-radius: 8px;
}

/* Respect users who've asked the OS for less motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

::selection {
	background: var(--mctd-green);
	color: #fff;
}

/* Slim brand-coloured scrollbar (WebKit/Blink only, purely cosmetic) */
::-webkit-scrollbar {
	width: 11px;
}
::-webkit-scrollbar-track {
	background: #eef3f1;
}
::-webkit-scrollbar-thumb {
	background: var(--mctd-green);
	border-radius: 10px;
	border: 2px solid #eef3f1;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--mctd-red);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
	outline: 2px solid var(--mctd-yellow);
	outline-offset: 2px;
}

/* ==========================================================================
   Connection-network background + magnetic hover glow
   ========================================================================== */

/* Backdrop the canvas paints on -- without this, the frame margin below has
   nothing behind the transparent canvas and renders black in some engines. */
html {
	background: #ffffff;
}

#mctd-network-bg {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
	display: block;
}

/* Frame the site over the animated background on screens wide enough to spare the margin */
@media (min-width: 1300px) {
	body {
		padding: 18px;
		background: transparent;
	}

	/* The sticky nav uses position:fixed, which escapes the body's padding
	   entirely and re-centers against the full viewport -- pin it back to
	   the same left/right bounds as the rest of the page so it doesn't
	   drift out of alignment once it detaches on scroll. */
	#masthead > .menu.stuckMenu.isStuck {
		left: 18px !important;
		right: 18px !important;
		width: auto !important;
	}
}

/* A soft light that tracks the mouse across buttons, social icons and thumbnails.
   The OS cursor is left completely alone -- see assets/js/hover-glow.js */
.mctd-glow {
	position: relative;
	overflow: hidden;
}

.mctd-glow::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(90px circle at var(--mctd-glow-x, 50%) var(--mctd-glow-y, 50%),
		rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 2;
}

.mctd-glow:hover::after {
	opacity: 1;
}

/* ==========================================================================
   General look-and-feel polish
   ========================================================================== */

a {
	transition: color 0.2s ease;
}

/* Post/teaser cards get a gentle lift, matching the button + image motion */
article.list,
article.item,
.widget {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

article.list:hover,
article.item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.widget-title {
	position: relative;
	padding-bottom: 10px;
}

.widget-title h3 {
	position: relative;
	display: inline-block;
}

.widget-title h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 42px;
	height: 3px;
	background: var(--mctd-yellow);
	border-radius: 3px;
}

.site-navigation.main-navigation .menu li a {
	transition: color 0.2s ease;
}

/* The theme's default active/ancestor state sets white text on the yellow
   bar, which is hard to read -- keep it dark like the rest of the menu.
   (Qualified with #site-navigation: the Theme Options inline <style> block
   in <head> uses the same class-only selector and loads after ours, so it
   would otherwise win the cascade on source order alone.) */
#site-navigation.site-navigation.main-navigation .menu .current-menu-item > a,
#site-navigation.site-navigation.main-navigation .menu .current-menu-ancestor > a {
	color: #16241f;
}

/* Search + form inputs feel more alive on focus */
#searchform input[type="text"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#searchform input[type="text"]:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
	border-color: var(--mctd-green);
	box-shadow: 0 0 0 3px rgba(0, 140, 100, 0.15);
	outline: none;
}

/* Footer widget area + bottom bar get a touch more breathing room and a top accent */
.site-footer {
	position: relative;
}

.site-footer .site-info a {
	color: var(--mctd-yellow);
}

.site-footer .site-info a:hover {
	color: #fff;
}

/* ==========================================================================
   Hover animations: buttons + images
   ========================================================================== */

/* --- Buttons --- */
.btn,
.read-more-button,
.buttonsx,
button,
input[type="submit"],
input[type="button"],
.wpcf7-submit,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	will-change: transform;
	display: inline-block;
}

.btn:hover,
.read-more-button:hover,
.buttonsx:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wpcf7-submit:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active,
.read-more-button:active,
.buttonsx:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.wpcf7-submit:active,
.wp-block-button__link:active {
	transform: translateY(-1px) scale(0.98);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Icon-only buttons (e.g. slider prev/next arrows) get a gentle rotate instead of a lift */
.btn.prev:hover,
.btn.next:hover {
	transform: scale(1.15);
}

/* --- Images --- */

/* Contain the zoom so it never breaks the surrounding layout */
figure,
.gallery-item,
.attachment-thumbnail,
.entry-thumb,
.post-thumbnail {
	overflow: hidden;
}

figure img,
.gallery-item img,
.entry-content img,
.attachment-thumbnail,
.entry-thumb img,
.post-thumbnail img,
.wp-post-image {
	transition: transform 0.4s ease, filter 0.4s ease;
}

figure:hover img,
.gallery-item:hover img,
.entry-content img:hover,
.entry-thumb:hover img,
.post-thumbnail:hover img,
a:hover > .wp-post-image {
	transform: scale(1.08);
	filter: brightness(1.05);
}

/* The main hero banner/slider keeps its image static on hover -- no zoom */
.teaser a:hover > .wp-post-image,
.flexslider a:hover > .wp-post-image,
.home-teaser img {
	transform: none;
	filter: none;
}

/* Fill their box consistently across a row, without stretching, and crop
   from the bottom so faces/heads near the top of a photo stay in frame */
figure img,
.gallery-item img,
.entry-thumb img,
.post-thumbnail img,
.wp-post-image,
article img {
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   Header: logo + site name side by side, redesigned social icons
   ========================================================================== */

.mctd-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
}

.mctd-brand img {
	max-height: 70px;
	width: auto;
	transition: transform 0.3s ease;
}

.mctd-brand:hover img {
	transform: scale(1.04);
}

.mctd-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.mctd-brand-text #site-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--mctd-ink, #223);
}

.mctd-brand-text #site-description {
	font-size: 13px;
	font-weight: 400;
	color: #667;
	letter-spacing: 0.2px;
}

.grid_5.frighti {
	display: flex;
	align-items: center;
	height: 100%;
}

.header-links {
	width: 100%;
}

.mctd-social-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mctd-social-icons li {
	list-style: none;
	margin: 0;
}

.mctd-social-icons a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f2f4f3;
	color: var(--mctd-green);
	font-size: 17px;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		color 0.25s ease, box-shadow 0.25s ease;
}

.mctd-social-icons a i {
	position: relative;
	z-index: 1;
}

.mctd-social-icons a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--mctd-brand-color, var(--mctd-green));
	transform: scale(0);
	transition: transform 0.3s ease;
}

.mctd-social-icons a:hover::before {
	transform: scale(1);
}

.mctd-social-icons a:hover {
	color: #fff;
	transform: translateY(-4px) rotate(-8deg);
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.mctd-social-icons a:active {
	transform: translateY(-1px) rotate(0deg) scale(0.96);
}

.mctd-social-email a {
	--mctd-brand-color: var(--mctd-green);
}

.mctd-social-facebook a {
	--mctd-brand-color: #1877f2;
}

.mctd-social-youtube a {
	--mctd-brand-color: #ff0000;
}

.mctd-social-linkedin a {
	--mctd-brand-color: #0a66c2;
}

.mctd-social-instagram a {
	--mctd-brand-color: #d6249f;
}

@media (max-width: 780px) {
	.mctd-brand {
		gap: 10px;
	}

	.mctd-brand img {
		max-height: 48px;
	}

	.mctd-brand-text #site-title {
		font-size: 18px;
	}

	.mctd-brand-text #site-description {
		display: none;
	}

	.mctd-social-icons a {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}

/* The plugin's floating icon widget is superseded by the header icons above */
#sfsi_plus_floater {
	display: none !important;
}

/* ==========================================================================
   Modern pass: hero + sticky nav + section rhythm
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

/* Fluid headline sizing so big titles never overwhelm small screens */
.slider-title,
.entry-header h1,
h1.entry-header {
	font-size: clamp(20px, 2.4vw + 12px, 34px);
}

/* Sticky nav gets a real "lifted" look once it detaches from the header */
div.menu.stuckMenu.isStuck {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Breathing room + a faint divider between homepage widget sections */
#main,
.site-main {
	padding-top: 6px;
}

.widget {
	margin-bottom: 28px;
}

/* ==========================================================================
   Footer: horizontal tree-view sitemap + redesigned bottom bar
   ========================================================================== */

/* Note: the theme injects a same-specificity `#colophon { background, a, p }`
   rule inline in <head> from Theme Options, so several selectors below are
   qualified with #colophon.mctd-footer to reliably win over it. */
#colophon.mctd-footer {
	background: #f2f4f3;
	color: rgba(20, 32, 29, 0.7);
	margin-top: 50px;
}

#colophon.mctd-footer .site-info {
	background: rgba(0, 0, 0, 0.05);
	margin-top: 30px;
}

#colophon.mctd-footer .site-info p {
	color: rgba(20, 32, 29, 0.6);
	font-size: 13px;
}

#colophon.mctd-footer .site-info a {
	color: var(--mctd-green);
}

#colophon.mctd-footer .site-info a:hover {
	color: var(--mctd-red);
}

.mctd-footer-top {
	width: 100%;
	box-sizing: border-box;
	padding: 30px 40px 14px;
}

.mctd-footer-sitemap {
	width: 100%;
}

/* The primary menu, reproduced as a horizontal tree: one column per
   top-level item, its children listed underneath -- a footer sitemap.
   Kept to a single row (flex-nowrap, equal-width columns) so it never
   breaks onto a second line on normal screens. */
ul.mctd-footer-tree {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.mctd-footer-tree > li {
	margin: 0;
	min-width: 0;
	list-style: none;
}

#colophon ul.mctd-footer-tree > li > a {
	display: block;
	color: #16241f;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 5px;
	margin-bottom: 7px;
	border-bottom: 2px solid var(--mctd-yellow);
	transition: color 0.2s ease;
}

#colophon ul.mctd-footer-tree > li > a:hover {
	color: var(--mctd-green);
}

ul.mctd-footer-tree .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.mctd-footer-tree .sub-menu li {
	margin: 0 0 5px;
	list-style: none;
}

#colophon ul.mctd-footer-tree .sub-menu a {
	color: rgba(20, 32, 29, 0.62);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

#colophon ul.mctd-footer-tree .sub-menu a:hover {
	color: var(--mctd-green);
	padding-left: 3px;
}

/* A gray divider spanning the full footer width, with the site logo
   centered on top of it as a circular badge. */
/* The line + logo sit exactly on the footer's top edge, acting as its
   top border -- the logo straddles the boundary, half in/half out. */
.mctd-footer-divider {
	position: relative;
	width: 100%;
	height: 0;
	border-top: 1px solid #c9cfcc;
}

.mctd-footer-divider-logo {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	display: inline-flex;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	z-index: 1;
}

.mctd-footer-divider-logo img {
	height: 60px;
	width: 60px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* One row, full width, equal columns -- this is what keeps the tree
   from ever wrapping to a new line on tablet/desktop widths. */
@media (min-width: 640px) {
	ul.mctd-footer-tree {
		flex-wrap: nowrap;
		gap: 10px;
	}

	ul.mctd-footer-tree > li {
		flex: 1 1 0;
	}

	#colophon ul.mctd-footer-tree > li > a {
		font-size: 11px;
	}
}

/* ==========================================================================
   Back to top button
   ========================================================================== */

#mctd-back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--mctd-green);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, visibility 0.25s;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#mctd-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#mctd-back-to-top:hover {
	background: var(--mctd-red);
	transform: translateY(-3px);
}

/* ==========================================================================
   Internal pages, shaped by content type
   ========================================================================== */

/* Documents: file-card treatment -- icon + size badge over the thumbnail */
.entry-docsx {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 20px;
}

.widget-date {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
}

figure {
	position: relative;
}

/* Staff / Conselho Consultivo: profile-card treatment */
article.item .entry-header.candidate {
	text-align: center;
}

.candidate-position {
	display: flex;
	justify-content: center;
	margin-top: 4px;
}

.candidate-position .position {
	background: rgba(0, 140, 100, 0.12);
	color: var(--mctd-green);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 4px 14px;
	border-radius: 20px;
}

/* Sermons / Discursos: media-row cards with an icon badge for the timestamp */
.entry-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #778;
	font-size: 13px;
}

.entry-time i {
	color: var(--mctd-green);
}

/* Events: pill-style month/category selector buttons */
.events-selection a,
.events-selection span {
	display: inline-block;
	border-radius: 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.events-selection a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Long-form content (single posts/pages): calmer measure + readable rhythm */
.entry-content {
	font-size: 16px;
	line-height: 1.75;
}

.entry-content p {
	margin-bottom: 1.1em;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content table td,
.entry-content table th {
	border: 1px solid #e3e8e6;
	padding: 8px 12px;
}

/* ==========================================================================
   Podcast player: a heart-monitor scan line, looping across the wave
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.wave .sonaar_fake_wave {
		position: relative;
		overflow: hidden;
	}

	.wave .sonaar_fake_wave::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -40%;
		width: 40%;
		background: linear-gradient(90deg, transparent, rgba(70, 255, 170, 0.9), transparent);
		mix-blend-mode: screen;
		pointer-events: none;
		animation: mctd-heart-scan 2.2s linear infinite;
	}
}

/* A bright line continuously sweeping left to right across the waveform,
   like the scanning beam on a heart-rate monitor. */
@keyframes mctd-heart-scan {
	0% {
		left: -40%;
	}
	100% {
		left: 100%;
	}
}

/* ==========================================================================
   Sobre o MCTD: intro + mission/vision cards + attribution grid + decree card
   ========================================================================== */

.mctd-lead {
	font-size: 18px;
	line-height: 1.75;
	color: #445;
}

.mctd-mv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 30px 0 44px;
}

.mctd-mv-card {
	background: #fff;
	border: 1px solid #e7ebe9;
	border-radius: 12px;
	padding: 28px 26px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mctd-mv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
}

.mctd-mv-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(0, 140, 100, 0.1);
	color: var(--mctd-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
}

.mctd-mv-card h3 {
	margin: 0 0 10px;
	font-size: 20px;
}

.mctd-mv-card p {
	margin: 0;
	color: #556;
	line-height: 1.6;
}

.mctd-attrib-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px;
	margin: 24px 0 40px;
}

.mctd-attrib-card {
	background: #fff;
	border: 1px solid #e7ebe9;
	border-radius: 12px;
	padding: 26px 20px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mctd-attrib-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.08);
	border-color: var(--mctd-green);
}

.mctd-attrib-card i {
	font-size: 26px;
	color: var(--mctd-green);
	margin-bottom: 14px;
	display: inline-block;
}

.mctd-attrib-card h4 {
	margin: 0 0 8px;
	font-size: 15px;
}

.mctd-attrib-card p {
	margin: 0;
	font-size: 13.5px;
	color: #667;
	line-height: 1.5;
}

.mctd-decree-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #f7faf9;
	border: 1px solid #dfe7e4;
	border-radius: 12px;
	padding: 18px 22px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	margin: 10px 0 30px;
}

.mctd-decree-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	border-color: var(--mctd-green);
}

.mctd-decree-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--mctd-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.mctd-decree-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mctd-decree-text strong {
	color: #16241f;
	font-size: 15px;
}

.mctd-decree-text span {
	color: #667;
	font-size: 13px;
}

.mctd-decree-cta {
	flex: 0 0 auto;
	color: var(--mctd-green);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.mctd-decree-card {
		flex-wrap: wrap;
	}

	.mctd-decree-cta {
		width: 100%;
		padding-left: 66px;
	}
}

/* ==========================================================================
   Contactos: form + contact-info card, side by side
   ========================================================================== */

.mctd-contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: start;
	margin: 20px 0 40px;
}

.mctd-contact-form,
.mctd-contact-info {
	background: #fff;
	border: 1px solid #e7ebe9;
	border-radius: 14px;
	padding: 30px;
}

.mctd-contact-form h2,
.mctd-contact-info h2 {
	margin-top: 0;
	font-size: 20px;
}

.mctd-placeholder-note {
	background: rgba(254, 203, 39, 0.15);
	border: 1px solid rgba(254, 203, 39, 0.5);
	color: #7a5b00;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mctd-contact-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
}

.mctd-contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f2f1;
	font-size: 14.5px;
	color: #334;
}

.mctd-contact-list li:last-child {
	border-bottom: none;
}

.mctd-contact-list li i {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 140, 100, 0.1);
	color: var(--mctd-green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex: 0 0 auto;
}

.mctd-contact-social {
	margin-top: 20px;
}

.mctd-contact-social .mctd-social-icons {
	justify-content: flex-start;
}

/* ==========================================================================
   Header social icons: a gentle grow, rippling through the row forever
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.header-links .mctd-social-icons li a {
		animation: mctd-icon-grow 2.6s ease-in-out infinite;
	}

	/* Same brand-colour fill and white glyph as :hover, timed to the grow */
	.header-links .mctd-social-icons li a::before {
		animation: mctd-icon-fill 2.6s ease-in-out infinite;
	}

	.header-links .mctd-social-icons li a i {
		animation: mctd-icon-glyph-color 2.6s ease-in-out infinite;
	}

	.header-links .mctd-social-icons li a:hover,
	.header-links .mctd-social-icons li a:hover::before,
	.header-links .mctd-social-icons li a:hover i {
		animation-play-state: paused;
	}

	.header-links .mctd-social-icons li:nth-child(1) a,
	.header-links .mctd-social-icons li:nth-child(1) a::before,
	.header-links .mctd-social-icons li:nth-child(1) a i {
		animation-delay: 0s;
	}

	.header-links .mctd-social-icons li:nth-child(2) a,
	.header-links .mctd-social-icons li:nth-child(2) a::before,
	.header-links .mctd-social-icons li:nth-child(2) a i {
		animation-delay: 0.18s;
	}

	.header-links .mctd-social-icons li:nth-child(3) a,
	.header-links .mctd-social-icons li:nth-child(3) a::before,
	.header-links .mctd-social-icons li:nth-child(3) a i {
		animation-delay: 0.36s;
	}

	.header-links .mctd-social-icons li:nth-child(4) a,
	.header-links .mctd-social-icons li:nth-child(4) a::before,
	.header-links .mctd-social-icons li:nth-child(4) a i {
		animation-delay: 0.54s;
	}

	.header-links .mctd-social-icons li:nth-child(5) a,
	.header-links .mctd-social-icons li:nth-child(5) a::before,
	.header-links .mctd-social-icons li:nth-child(5) a i {
		animation-delay: 0.72s;
	}
}

@keyframes mctd-icon-grow {
	0%, 82%, 100% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.16);
	}
}

@keyframes mctd-icon-fill {
	0%, 82%, 100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}

@keyframes mctd-icon-glyph-color {
	0%, 82%, 100% {
		color: var(--mctd-green);
	}
	40% {
		color: #fff;
	}
}

@media (max-width: 780px) {
	.mctd-contact-grid {
		grid-template-columns: 1fr;
	}
}