:root {
  /*--color-header: #333F3B;*/
  --color-header: 51, 63, 59;
  --color-footer: #232C29;
  --color-bg-general: #F4F1EA;
  --color-section-alt: #E6E1DB;
  --color-border: #C7CEC9;
  --color-badge: #A3B18A;
  --color-btn-normal: #5E7C72;
  --color-btn-cta: #D9773D;
  --color-btn-cta-hover: #C7632D;
  --color-link: #2E6F6A;
  --color-link-hover: #1F554F;
  --color-text-main: #1F2523;
  --color-text-sec: #5A645F;
}

body {
  background-color: var(--color-bg-general);
  color: var(--color-text-main);
}
.row{
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.nav-link {
	color: whitesmoke !important;
}

#buttons-header button {
	border: none !important;
}

#header {
	background-image: url('../img/01.webp');
	background-size: cover;
	text-align: center;
	text-align: -webkit-center;
	color: whitesmoke;
}

#header .col-sm-12 {
	background-color: rgba(0, 0, 0, .1);
}

#subtitle-principal {
	font-size: 12px;
	letter-spacing: 0.3px;
	line-height: 16px;
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	width: 24%;
}

#title-principal {
	font-size: 36px;
	letter-spacing: -1.188px;
	line-height: 45px;
}

#description-principal {
	font-size: 18px;
	line-height: 30.24px;
}
#btn-servicios-header, #btn-nosotros-header, .btn-normal{
	background-color: var(--color-btn-normal);
}
#btn-contacto-header, .btn-cta{
	background-color: var(--color-btn-cta);
}
.btn-cta:hover{
	background-color: var(--color-btn-cta-hover);
}
.btn-normal:hover{
	background-color: var(--color-link-hover);
}
#img-banner-principal {
	width: 100%;
	height: auto;
	border-radius: 0em;
}

.mt-10 {
	margin-top: 6rem;
}

#banner-secondary {
	background-image: url('../img/03.webp');
	background-size: cover;
}

.bi-lightbulb,
.bi-eye,
.bi-patch-checkm,
.fa-solid,
.bi-facebook,
.bi-instagram,
.bi-twitter-x,
.bi-linkedin,
.bi-whatsapp,
.bi-house,
.bi-telephone,
.bi-envelope{
	color: var(--color-btn-cta) !important;
}

.bi-lightbulb,
.bi-eye,
.bi-check-lg,
.bi-patch-checkm,
.bi-journal-check,
.bi-journal-bookmark,
.fa-solid,
.bi-coin,
.bi-currency-dollar {
	font-size: 3rem !important;
}

.d-history-aside {
	margin-left: 1rem;
}

.title-principal-service {
	color: var(--color-text-main) !important;
}

.fs-7 {
	font-size: 0.8rem;
}

.fs-8 {
	font-size: 0.7rem;
}

.icon-service-details {
	font-size: 0.9rem !important;
	color: var(--color-btn-cta);
}

a {
	text-decoration-line: none;
	color: var(--color-link);
}
a:hover {
	color: var(--color-link-hover);
}

.img-blog-principal {
	width: 99%;
	height: auto;
	border-radius: 1em;
}

.img-galardonado {
	width: 100%;
	height: auto;
}

#mdlConversatorio h3 {
	color: var(--color-text-main);
}

#mdlConversatorio p {
	font-size: 0.8rem;
}

.w-90 {
	width: 90%;
}

.w-90 img {
	width: 95%;
}
.contact-info{
	height: 2.5rem;
}
#map {
	width: 95%;
}

#footer {
	background-color: var(--color-footer);
	color: white !important;
}

#footer h4 {
	font-size: 1.2rem;
}

#footer li {
	font-size: 0.9rem;
}

.cta-button {
	background: var(--color-btn-cta);
	color: white;
	font-weight: bold;
	padding: 10px 20px;
	/*border-radius: 25px;*/
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
	background: var(--color-btn-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	color: white;
}

/* Hero Section Styles */
.hero-section {
	/*min-height: 80vh !important;*/
	/*background: linear-gradient(135deg, var(--color-footer) 0%, #0a2463 50%, #247ba0 100%);*/
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	margin-top: 0 !important;
}

.hero-section .col-12 {
	align-content: center;
	text-align: -webkit-center;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="1200" height="600" fill="url(%23grid)"/></svg>');
	opacity: 0.3;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background: rgba(0, 0, 0, 0.3);*/
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 800px;
	padding: 2rem;
	color: white;
	animation: fadeInUp 0.8s ease-out;
}

.hero-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	color: #ffffff;
	font-weight: 900;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
	font-size: 1.1rem;
	line-height: 1.9;
	margin-bottom: 2rem;
	color: #e0e0e0;
	font-weight: 400;
}

.hero-cta-button {
	display: inline-block;
	background: var(--color-btn-cta);
	color: white;
	padding: 15px 40px;
	/*border-radius: 50px;*/
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
	/*box-shadow: 0 8px 16px rgba(217, 119, 61, 0.4);*/
	border: none;
}

.hero-cta-button:hover {
	background: var(--color-btn-cta-hover);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(199, 99, 45, 0.6);
	color: white;
	text-decoration: none;
}

.hero-cta-button:active {
	transform: translateY(-1px);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#footer p {
	font-size: 0.9rem;
}

.nav-link-footer {
	color: white;
	cursor: pointer;
}

.nav-link-footer:hover {
	color: gray;
}

#copyright {
	font-size: 0.7rem !important;
	margin-bottom: calc(.25rem * 2.5);
}
.card{
	min-height: 100% !important;
}

/*@media (min-width: 992px)*/
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-width: 992px) {
	#social-header {
		text-align: left;
	}

	#buttons-header {
		text-align: right;
	}

	#logo-menu {
		width: 4.5rem;
	}

	.navbar-nav {
		align-items: center !important;
		text-align: center !important;
		-webkit-text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		background-color: rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}

	.nav-link {
		font-size: 0.8rem !important;
	}

	.nav-link:hover {
		background-color: gainsboro !important;
	}

	.hero-section {
		/*margin-top: 2rem !important;*/
		margin-bottom: 4.2rem !important
	}

	.hero-section,
	.hero-overlay,
	.hero-content {
		/*min-height: 45vh !important;*/
	}

	.hero-content {
		margin-top: 5vh !important;
		margin-bottom: 5vh !important;
	}

	#header,
	#banner-secondary {
		/*box-shadow: inset 0 0 100vw 18vw rgba(8, 26, 65, .8);*/
		box-shadow: inset 0 0 100vw 18vw rgba(var(--color-header), 0.8);
		-webkit-box-shadow: inset 0 0 100vw 18vw rgba(var(--color-header), 0.8);
	}

	#title-principal {
		width: 100%;
	}

	#description-principal {
		width: 75%;
		/*margin-left: 12.5%;*/
	}

	/*#banner-secondary{
		box-shadow: inset 0 0 100vw 18vw rgba(8, 26, 65, 0.8);
	}*/
	#banner-secondary button {
		width: 15% !important;
	}

	#btn-servicios-header,
	#btn-nosotros-header,
	#btn-contacto-header {
		width: 15%;
	}

	#btn-solicitar-asesoria {
		width: 25%;
	}

	/*#btn-servicios-header {
		margin-bottom: 3rem !important;
	}*/

	.container-img-galardonado {
		width: 200px;
		height: 200px;
		overflow: hidden;
		border-radius: 50%;
		margin-left: calc(100% - 275px);
	}

	#mdlConversatorio h3 {
		font-size: 1.5rem;
	}

	#mdlConversatorio p {
		width: 95%;
		text-align: justify;
	}

	#container-subscribe {
		margin-top: 2rem;
		padding: 2rem;
		border-radius: 10px;
		background-color: rgb(var(--color-header));
		color: white;
	}

	#container-subscribe i {
		font-size: 1.5rem;
	}

	#img-contact {
		object-fit: cover;
		aspect-ratio: 1/1;
	}

	#container-contact {
		align-content: center;
	}

	#footer {
		justify-content: space-around;
	}

	#copyright p {
		display: inline !important;
		margin-left: 0.8rem;
		margin-right: 0.8rem;
	}

	.info-legal {
		display: inline-block;
		/*width: 48%;*/
	}
}

@media only screen and (max-width: 991px) {
	#social-header {
		text-align: left;
		-webkit-text-align: left;
	}

	#buttons-header {
		text-align: right;
		-webkit-text-align: right;
	}

	#logo-menu {
		width: 3rem;
	}

	.navbar-nav {
		align-items: right !important;
		text-align: right !important;
		-webkit-text-align: right !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.hero-section,
	.hero-section .col-12,
	.hero-overlay,
	.hero-content {
		min-height: 40vh !important;
	}

	.hero-content {
		margin-top: 6vh !important
	}

	#header {
		-webkit-box-shadow: inset 0 0 100vw 18vw rgba(var(--color-header), 0.8);
		box-shadow: inset 0 0 100vw 18vw rgba(var(--color-header), 0.8);
		margin-top: 5vh !important;
	}

	#title-principal {
		width: 95%;
	}

	#description-principal {
		width: 100%;
	}

	#banner-secondary {
		-webkit-box-shadow: inset 0 0 100vw 18vw var(--color-header);
		box-shadow: inset 0 0 100vw 18vw var(--color-header);
	}

	#btn-servicios-header,
	#btn-nosotros-header,
	#btn-contacto-header {
		width: 80%;
	}

	#btn-solicitar-asesoria {
		width: 50%;
	}

	.container-galardonado {
		transition: 1s;
	}

	.container-galardonado:hover {
		transform: translate(0px, -10px);
	}

	#mdlConversatorio h3 {
		font-size: 1.1rem;
	}

	#copyright {
		margin-top: calc(.25rem * 5);
	}

	.info-legal {
		display: inline-block;
		/*width: 45%;*/
		vertical-align: middle;
	}
}
