/* =================================
	Variables
===================================*/
:root{
	--color-black: #000000;
	--color-dark-grey: #333;
	--color-white: #ffffff;
	--transition-general: 0.3s;
}

/* =================================
	Accessibility
===================================*/
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  background: #fff;
  color: #111;
  padding: 0.75em 1.5em;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: left 0.2s, box-shadow 0.2s;
}

.skip-link:focus,
.skip-link:active {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  outline: 2px solid #007acc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* =================================
	Custom
===================================*/
.text-red-600 {
	color:red;
}
.text-green-600	{
	color: green;
	font-size: 1.2rem;
	font-weight: 600;
}
button[role="checkbox"][aria-checked="true"] {
	background-color: rgb(34 197 94); /* Tailwind green-500 */
	border-color: rgb(34 197 94);
	color: white;
	position: relative;
}
button[role="checkbox"][aria-checked="true"]::after {
	content: '✓';
	font-size: 0.75rem;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.section__logos_3 .logos .grid {
	gap:40px;
	display:grid;
	align-items: center;
	justify-items: center;
	justify-content:center;
	margin-bottom:40px;
}
.section__logos_3 .logos .grid-1{
	grid-template-columns: repeat(1, max-content);
}
.section__logos_3 .logos .grid-2{
	grid-template-columns: repeat(2, max-content);
}
.section__logos_3 .logos .grid-3{
	grid-template-columns: repeat(3, max-content);
}
.section__logos_3 .logos .grid .logo {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:150px;
	background:white;
	border-radius:15px;
}
.section__logos_3 .logos .grid .logo img {
	max-width:75%;
	max-height:75%;
	object-fit:contain;
	display:block;
}

@media (min-width:992px) and (max-width:1199px){
	.section__logos_3 .logos .grid {
		gap:20px;
		margin-bottom:20px;
	}
	.section__logos_3 .logos .grid .logo {
		max-width:300px;
	}
	.section__logos_3 .logos .grid .logo img {
		max-width:70%;
		max-height:70%;
	}
}

@media (max-width:991px){
	.section__logos_3 .logos .grid-2{
		grid-template-columns: repeat(1, max-content);
	}
	.section__logos_3 .logos .grid-3{
		grid-template-columns: repeat(1, max-content);
	}
}

@media (max-width:575px){
	.section__logos_3 .logos .grid .logo{
		max-width:100%;
		width:auto;
	}
}

/* =================================
	Spacing
===================================*/

@media (max-width:575px){
	a span.px-10{
		padding-left:1rem;
		padding-right:1rem;
	}
}