/*
Theme Name: Bonsai Theme Child
Template: bonsai-theme
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bonsai
*/

:root {
	--font-primary: "Sarabun", sans-serif;
	--font-secondary: "Play", sans-serif;
	--font-terciary: "Oxanium", sans-serif;

	--color-white: #fff;
	--color-black: #000;
	--color-lightergray: #707070;
	--color-lightgray: #d3d3d3;
	--color-gray: #282829;
	--color-darkgray: #101010;
	--color-blue: #0576c0;

	--text-xs: 0.75rem;
	--text-xs--line-height: calc(1 / 0.75);
	--text-sm: 0.875rem;
	--text-sm--line-height: calc(1.25 / 0.875);
	--text-base: 1rem;
	--text-base--line-height: calc(1.5 / 1);
	--text-lg: 1.125rem;
	--text-lg--line-height: calc(1.75 / 1.125);
	--text-xl: 1.25rem;
	--text-xl--line-height: calc(1.75 / 1.25);
	--text-2xl: 1.5rem;
	--text-2xl--line-height: calc(2 / 1.5);
	--text-3xl: 1.875rem;
	--text-3xl--line-height: calc(2.25 / 1.875);
	--text-4xl: 2.25rem;
	--text-4xl--line-height: calc(2.5 / 2.25);
	--text-5xl: 3rem;
	--text-5xl--line-height: 1;
	--text-6xl: 3.75rem;
	--text-6xl--line-height: 1;
	--text-7xl: 4.5rem;
	--text-7xl--line-height: 1;
	--text-8xl: 6rem;
	--text-8xl--line-height: 1;
	--text-9xl: 8rem;
	--text-9xl--line-height: 1;
}

body {
	font-family: var(--font-primary);
	font-size: var(--text-xl);
	color: var(--color-white);
	background-color: var(--color-darkgray);
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--font-secondary);
	margin: initial;
}

h1,
.h1 {
	font-size: 2.5rem;
	font-weight: 700;
	@media (width >= 768px) {
		font-size: 3rem;
	}
}

h2,
.h2 {
	font-size: 2rem;
	font-weight: 700;
	@media (width >= 768px) {
		font-size: 3rem;
	}
}

h3,
.h3 {
	font-weight: 700;
}

h4,
.h4 {
	font-weight: 700;
}

.container {
	--bs-gutter-x: 2rem;
	max-width: 80rem;
}

p {
	margin-bottom: initial;
}

a {
	color: var(--color-blue);
	text-decoration: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.reset-ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Font Family */
.font-primary {
	font-family: var(--font-primary);
}
.font-secondary {
	font-family: var(--font-secondary);
}

/* Color */
.text-lightergray {
	color: var(--color-lightergray);
}
.text-lightgray {
	color: var(--color-lightgray);
}
.text-gray {
	color: var(--color-gray);
}
.text-darkgray {
	color: var(--color-darkgray);
}
.text-blue {
	color: var(--color-blue);
}

/* Font Size */
.text-xs {
	font-size: var(--text-xs);
	line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-sm {
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-base {
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
	font-size: var(--text-lg);
	line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-xl {
	font-size: var(--text-xl);
	line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-2xl {
	font-size: var(--text-2xl);
	line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
	font-size: var(--text-3xl);
	line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
	font-size: var(--text-4xl);
	line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
	font-size: var(--text-5xl);
	line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-6xl {
	font-size: var(--text-6xl);
	line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-7xl {
	font-size: var(--text-7xl);
	line-height: var(--tw-leading, var(--text-7xl--line-height));
}
.text-8xl {
	font-size: var(--text-8xl);
	line-height: var(--tw-leading, var(--text-8xl--line-height));
}
.text-9xl {
	font-size: var(--text-9xl);
	line-height: var(--tw-leading, var(--text-9xl--line-height));
}

/* Background Color */
.bg-lightgray {
	background-color: var(--color-lightgray);
}
.bg-gray {
	background-color: var(--color-gray);
}
.bg-darkgray {
	background-color: var(--color-darkgray);
}
.bg-blue {
	background-color: var(--color-blue);
}

/* Buttons */
.btn {
	font-family: var(--font-terciary);
	font-size: var(--text-lg);
	font-weight: 700;
	padding: 0.5em 1.5em;

	&.btn-primary {
		color: var(--color-white);
		background-color: var(--color-blue);
		border-color: var(--color-blue);
		border-radius: var(--bs-border-radius);

		&:hover {
			background-color: color-mix(in srgb, var(--color-blue) 100%, var(--color-black) 100%);
			border-color: color-mix(in srgb, var(--color-blue) 100%, var(--color-black) 100%);
		}
	}
}

/* Bootstrap Forms */
.form-label {
	font-size: var(--text-base);
	color: #ffffffb2;
}
.form-control,
.form-select {
	border-radius: 0;
	background-color: #00000040;
	border: 1px solid #00000040;
	border-bottom: 2px solid var(--color-blue);
	color: var(--color-lightgray);
	padding: 0.5rem 1rem;
	transition: all 0.3s;
	&::placeholder {
		color: var(--color-lightgray);
	}
	&:hover,
	&:focus {
		box-shadow: none;
		color: var(--color-lightgray);
		border: 1px solid #00000040;
		background-color: #0576c012;
		border-bottom: 2px solid var(--color-blue);
	}
}
.form-select option {
	background-color: var(--color-darkgray);
}

/* Bootstrap Modal */
.modal {
	.modal-content {
		border-radius: 0;
		color: var(--color-lightgray);
		background-color: #1b1b1b;
		.modal-header {
			border-bottom: none;
			.btn-close {
				--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");

				border: 1px solid var(--color-lightgray);
				border-radius: var(--bs-border-radius-pill);
			}
		}
		.modal-body {
			padding: 0 3rem 3rem;
		}
	}

	.form-control,
	.form-select {
		border-radius: 0;
		background-color: #83838340;
		&:hover,
		&:focus {
			background-color: #0576c012;
		}
	}
	.form-select {
		--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	}
}

/* Contact Form 7 */
.wpcf7-not-valid-tip {
	font-size: var(--text-base);
	color: var(--bs-red);
}
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 1rem;
	border: none;
	background-color: var(--color-darkgray);
	color: var(--bs-yellow);
}

#main-header {
	position: sticky;
	top: 0;
	background-color: var(--color-gray);
	z-index: 9999;
	.navbar {
		padding: 0;
		background-image: none;
		.navbar-brand {
			padding: 1rem 0;
			img {
				width: 6rem;
			}
		}
		.navbar-toggler {
			padding: 0;
			border-color: transparent;
			&:focus {
				box-shadow: none;
			}
			.navbar-toggler-icon {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="%23fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
			}
		}
		.navbar-collapse {
			justify-content: end;

			.nav-link {
				font-size: var(--text-lg);
				font-weight: 500;
				color: var(--color-white);
				text-transform: uppercase;
				&:hover {
					color: var(--color-blue);
				}
				@media (width >= 1200px) {
					padding: 0 .875rem;
				}
				&.active {
					color: #0695f2;
				}
			}
		}
	}
}

#main-footer {
	padding: 3rem 0;
	background-color: var(--color-gray);

	.footer-logo {
		img {
			width: 11rem;
		}
	}

	h2 {
		font-size: var(--text-xl);
		font-weight: 700;
		text-transform: uppercase;
	}

	.social-icons {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		li {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			a {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: 1.125em;
				width: 2em;
				height: 2em;
				border-radius: 50em;
				background-color: var(--color-blue);
				color: var(--color-white);
				transition: all 0.3s;

				&:hover {
					background-color: var(--color-white);
					color: var(--color-blue);
				}
			}
		}
	}
}

.section-titlebar {
	padding: 3rem 0;
	background: url("assets/images/bg-titlebar.png") no-repeat top center/cover;
	border-image: linear-gradient(
			to right,
			color-mix(in srgb, var(--color-black) 70%, transparent 100%),
			color-mix(in srgb, var(--color-black) 70%, transparent 100%)
		)
		fill 1;
	@media (width >= 768px) {
		padding: 2.5rem 0;
	}

	p {
		color: var(--color-lightgray);
	}
}

.swiper {
	.swiper-pagination {
		bottom: -3rem;
		.swiper-pagination-bullet {
			width: 0.5em;
			height: 0.5em;
			background-color: color-mix(in srgb, var(--color-white) 100%, var(--color-black) 70%);
			opacity: 1;
			&.swiper-pagination-bullet-active {
				background-color: var(--color-blue);
			}
		}
	}
}

.section-timeline {
	padding: 3rem 0;
	overflow-x: hidden;
	@media (width >= 768px) {
		padding: 5rem 0;
	}
	.swiper-timeline {
		overflow: visible;
	}
}
.timeline-item {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	&.last-item {
		.timeline-header {
			&:before {
				width: 2rem;
			}
		}
	}
	.timeline-header {
		position: relative;
		&:before {
			content: "";
			display: block;
			width: 100%;
			height: 2px;
			background-color: var(--color-blue);
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			z-index: -1;
		}
		&:after {
			content: "";
			display: block;
			width: 1rem;
			height: 1rem;
			background-color: var(--color-blue);
			border-radius: 50em;
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			z-index: -1;
		}
		span {
			display: inline-block;
			font-family: var(--font-secondary);
			font-size: var(--text-lg);
			font-weight: 700;
			color: var(--color-white);
			background-color: var(--color-blue);
			border-radius: 50em;
			padding: 0.5em 1.25em;
			margin-left: 2rem;
		}
	}
	.timeline-content {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding-right: 15%;

		.icon {
			i {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				border-radius: 50em;
				font-size: 1.25em;
				width: 2em;
				height: 2em;
				color: var(--color-white);
				background-color: var(--color-blue);
			}
		}
		ul {
			color: color-mix(in srgb, var(--color-white) 100%, var(--color-black) 70%);
			padding-left: 2ch;
		}
		p {
			color: color-mix(in srgb, var(--color-white) 100%, var(--color-black) 70%);
		}
	}
}

.section-mision-vision {
	.video {
		position: relative;
		height: auto;
		overflow: hidden;
		/*@media (width >= 768px) {
			height: 36rem;
		}*/
		/*&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			border-image: linear-gradient(
					to right,
					color-mix(in srgb, var(--color-black) 100%, transparent 100%),
					color-mix(in srgb, var(--color-black) 100%, transparent 100%)
				)
				fill 1;
		}*/
		video {
			width: 100%;
			/*height: 100%;
			object-fit: cover;*/
		}
	}
	.content {
		padding: 3rem 0;
		@media (width >= 768px) {
			padding: 6rem 0;
		}
		color: var(--color-darkgray);
		background: url("assets/images/bg-mision-vision.jpg") no-repeat center/cover;

		h2 {
			text-transform: uppercase;
		}

		p {
			color: var(--color-lightergray);
		}
	}
}

.section-empresas-principios {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}

	.empresas {
		.logo {
			border-bottom: 2px solid var(--color-white);
			@media (width >= 576px) {
				border-bottom: none;
				border-right: 2px solid var(--color-white);
			}
		}

		.logos {
			img {
				object-fit: cover;
			}
		}
	}

	.principios {
		.box {
			background-color: #282828cc;
			transition: all 0.3s;

			&:hover {
				translate: 0 -4px;

				.box-number {
					color: var(--thm-color-white);
				}
			}

			.box-number {
				font-family: var(--font-terciary);
				color: #6e6e6e;
				transition: all 0.3s;
			}
			.icon {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 4rem;
				height: 4rem;
				background-color: #171717;
				pointer-events: none;
			}
			p {
				color: #f5f5f7;
			}
		}
	}
}

.section-numeros-2025 {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}

	.icon {
		pointer-events: none;
		img {
			width: 8rem;
			height: 8rem;
			object-fit: contain;
			aspect-ratio: 1/1;
			filter: brightness(0) invert(1);
		}
	}
	
	span.h1 {
		color: var(--color-blue);
	}

	p {
		max-width: 11.5rem;
		margin-inline: auto;
		text-wrap: pretty;
	}
}

.section-premios-y-reconocimientos {
	padding: 1rem 0 3rem;
	@media (width >= 768px) {
		padding: 3rem 0 6rem;
	}
	.swiper-premios-reconocimientos {
		overflow: visible;
	}
}

.section-contacto {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
}

/* LOCACIONES */
.section-locaciones {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
	.locacion {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		background-color: var(--color-white);
		color: var(--color-black);
		border-radius: var(--bs-border-radius-lg);
		padding: 1rem;
		text-align: center;
		height: 100%;
		transition: all 0.3s;

		&:hover {
			translate: 0 -4px;
		}

		.image {
			aspect-ratio: 16/9;
			overflow: hidden;
			border-radius: var(--bs-border-radius);
			pointer-events: none;
			user-select: none;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;

			.title {
				font-size: var(--text-2xl);
				color: #212529;
			}

			p {
				font-size: var(--text-base);
				i {
					color: var(--color-blue);
					margin-right: 1rem;
				}
			}
		}
		
		a.btn {
			margin-top: auto;
		}
	}
}

/* SERVICIOS Y TALLERES */
.section-servicios-talleres {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
	.servicio-taller {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		background-color: var(--color-white);
		color: var(--color-black);
		border-radius: var(--bs-border-radius-lg);
		padding: 1rem;
		transition: all 0.3s;

		&:hover {
			translate: 0 -4px;
		}

		.image {
			aspect-ratio: 16/9;
			overflow: hidden;
			border-radius: var(--bs-border-radius);
			pointer-events: none;
			user-select: none;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			padding-bottom: 0.625rem;

			@media (width >= 768px) {
				padding-inline: 1rem;
			}

			.icon {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 2.5rem;
				height: 1rem;
				@media (width >= 768px) {
					width: 3rem;
				}
			}

			.title {
				display: flex;
				align-items: center;
				font-size: var(--text-2xl);
				color: #212529;
				text-transform: uppercase;

				.icon {
					height: 3rem;
					font-size: var(--text-3xl);
					color: var(--color-blue);
				}
			}

			p {
				display: flex;
				align-items: center;
				font-size: var(--text-base);
			}
		}
	}
}

/* AREAS DE NEGOCIO */
.section-tabs {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
	> .container > .row:first-child {
		margin-bottom: 4rem;
	}
	ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		@media (width >= 480px) {
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
		}
		@media (width >= 768px) {
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 0;
		}

		li {
			@media (width >= 768px) {
				&:first-child {
					button {
						border-radius: 1rem 0 0 1rem;
					}
				}
				&:last-child {
					button {
						border-radius: 0 1rem 1rem 0;
					}
				}
			}
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				aspect-ratio: 16/9;
				overflow: hidden;
				background-color: var(--color-white);
				border-radius: 1rem;
				z-index: 1;

				&:focus {
					outline: none;
				}

				@media (width >= 768px) {
					border-radius: 0;
				}

				i {
					position: absolute;
					bottom: 0.75em;
					right: 0.75em;
					font-size: var(--text-2xl);
					color: var(--color-blue);
				}

				&[aria-expanded="true"] {
					background-color: #212121;
					img {
						filter: brightness(0) invert(1);
					}
					i {
						color: var(--color-black);
						rotate: 45deg;
					}
				}

				& + div {
					border-radius: 0 0 1rem 1rem;
					translate: 0 -1rem;
					> div {
						padding-top: 4rem !important;

						img {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
	}
}

/* RRHH */
.section-banner {
	aspect-ratio: 2.95 / 1;
	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #444;
	}
	.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		pointer-events: none;
	}
	.swiper-pagination {
		position: absolute;
		bottom: 0rem;
		@media (width >= 768px) {
			bottom: 2rem;
		}
	}
}

.section-rrhh {
	.accordion {
		display: grid;
		gap: 2rem;
		.accordion-item {
			color: #d3d3d3;
			border-color: transparent;
			background-color: transparent;
			&:not(:last-child) {
				padding-bottom: 2rem;
				border-bottom: 1px solid #ffffff66;
			}
			.accordion-header {
				.accordion-button {
					display: flex;
					align-items: center;
					gap: 1rem;
					padding: 0;
					box-shadow: none;
					background-color: transparent;
					@media (width >= 768px) {
						gap: 2rem;
					}
					&:after {
						display: none;
					}
					&[aria-expanded="true"] {
						.accordion-number {
							color: var(--color-white);
							background-color: var(--color-blue);
						}
						i {
							color: var(--color-blue);
							background-color: var(--color-white);
							&.fa-plus {
								display: none;
							}
							&.fa-minus {
								display: inline-flex;
							}
						}
					}
					.accordion-number {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 3rem;
						height: 3rem;
						font-size: var(--text-2xl);
						color: var(--color-blue);
						border: 2px solid var(--color-blue);
						border-radius: 50em;
						flex: 0 0 auto;
						@media (width >= 768px) {
							width: 4rem;
							height: 4rem;
						}
					}
					.accordion-title {
						font-size: var(--text-2xl);
						font-weight: 600;
						color: #d3d3d3;
						flex: 1 1 auto;
					}
					i {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 1.875em;
						height: 1.875em;
						font-size: var(--text-base);
						color: var(--color-white);
						color: var(--color-white);
						background-color: var(--color-blue);
						border-radius: 0.5em;
						margin-left: auto;
						flex: 0 0 auto;
						&.fa-minus {
							display: none;
						}
					}
				}
			}
			.accordion-body {
				font-size: var(--text-base);
				border-color: transparent;
				padding: 1rem 0 0 4rem;
				@media (width >= 768px) {
					padding: 0 6rem;
				}
			}
		}
	}
}

.section-equipo {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}

	.link-email {
		color: var(--color-black);
		&:hover {
			color: var(--color-blue);
		}
	}

	.areas-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		@media (width >= 576px) {
			grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		}
		@media (width >= 1200px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5rem;
		}
		li {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			padding: 1.5rem;
			font-family: var(--font-secondary);
			font-size: var(--text-xl);
			font-weight: 700;
			color: var(--color-white);
			background-color: #171717;
			border-radius: 0.75rem;
			transition: all 0.3s;

			&:hover {
				box-shadow: 0px 3px 18px 0px #0576c0b2;
				translate: 0 -2px;
			}

			img {
				width: 3.125rem;
				height: 3.125rem;
				object-fit: contain;
				pointer-events: none;
				user-select: none;
			}
		}
	}
}

.section-nota {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
	p {
		margin-bottom: 1em;
	}
	img {
		border-radius: 0.625rem;
	}
}

.section-blog {
	padding: 3rem 0;
	@media (width >= 768px) {
		padding: 6rem 0;
	}
	> .container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		@media (width >= 768px) {
			grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		}
		@media (width >= 1200px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	article {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 1.5rem;
		color: var(--color-black);
		background-color: var(--color-white);
		border-radius: 1rem;

		.article-image {
			aspect-ratio: 16/10;
			overflow: hidden;
			border-radius: .75rem;
			&:hover {
				img {
					scale: 1.05;
					opacity: .75;
				}
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				transition: all .3s;
			}
		}
		.article-content {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 1rem;
			.article-title {
				font-size: var(--text-xl);
				color: var(--color-black);
				a {
					color: var(--color-black);
					transition: all .3s;
					&:hover {
						color: var(--color-blue);
					}
				}
			}
			.article-description {
				font-size: var(--text-xl);
				color: var(--color-gray);
				display: -webkit-box;
				line-clamp: 3;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;  
				overflow: hidden;
			}
		}
		.article-footer {
			display: flex;
			align-items: center;
			gap: 2rem;
			font-size: var(--text-sm);
			font-weight: 600;
			color: var(--color-gray);
			.article-author {
				display: flex;
				align-items: center;
				gap: .5rem;
				img {
					width: 1.25rem;
					height: 1.25rem;
					object-fit: cover;
					border-radius: 50em;
					background-color: var(--color-gray);
				}
			}
			.article-date {
				display: flex;
				align-items: center;
				gap: 5px;
			}
		}
	}
	.blog-pagination {
		display: flex;
		align-items: center;
		gap: .25rem;
		.pagination {
			display: flex;
			align-items: center;
			gap: .25rem;
			li {
				&:hover {
					a {
						background-color: var(--color-blue);
						color: var(--color-white);
					}
				}
				&.prev {
					a {
						border-radius: .25rem 50em 50em .25rem;
					}
				}
				&.next {
					a {
						border-radius: 50em .25rem .25rem 50em;
					}
				}
				&.active {
					span {
						background-color: var(--color-blue);
						color: var(--color-white);
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 3rem;
						height: 3rem;
						border-radius: 50em;
						text-align: center;
						transition: all .3s;
					}
				}
				a {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 3rem;
					height: 3rem;
					border-radius: 50em;
					background-color: var(--color-white);
					color: var(--color-darkgray);
					text-align: center;
					transition: all .3s;
				}
			}
		}
	}
}

/*Language*/

.lang-en {
	display: none;
}

.lang-switch {
    display: flex;
    align-items: center;
}