body {
		font-family: "Poppins", sans-serif !important;
}

/*
* Custom Col
*/
@media (min-width: 1400px) {
		.custom-col {
				flex: 79% !important;
				max-width: 79% !important;
		}
}

@media (min-width: 1900px) {
		.custom-col {
				flex: 74.5% !important;
				max-width: 74.5% !important;
		}
}

/*
* Custom Btn White
*/
.custom-btn-white {
		border-color: var(--light) !important;
		border-width: 3px !important;
		color: var(--light) !important;
}

.custom-btn-white:hover {
		background-color: var(--light) !important;
}

/*
* Custom Btn
*/
.custom-btn {
		border-width: 1px !important;
		border-color: var(--grey-500) !important;
}

/*
* Header
*/
#header .dropdown-item {
		text-transform: capitalize !important;
		font-size: 15px !important;
}

#header .simple-search .form-control {
		border-radius: 1.3rem 0 0 1.3rem !important;
}

#header .header-nav-features-light:before, #header .header-nav-features-light:after {
		content: none !important;
}

#header .header-container {
		height: 113px;
}

#header .header-top {
		height: 60px;
}

/*
* Carousel Slider Navigation
*/
[data-carousel-navigate] {
		cursor: pointer;
}

[data-carousel-navigate] p {
		line-height: 26px !important;
}

@media (min-width: 992px) {
		[data-carousel-navigate].active:before {
				content: "";
				position: absolute;
				display: block;
				top: 0;
				left: 0;
				height: 3px;
				width: 100%;
		}
}

/*
* Page Header
*/
.custom-page-header.page-header-background-sm {
		padding: 95px 0 !important;
}

.custom-page-header .parallax-background {
		height: 150% !important;
}

/*
* Portfolio
*/
.load-more-loader {
		display: none;
}

.portfolio-load-more-loader {
		min-height: 61px;
}

.load-more-btn-wrapper {
		min-height: 53px;
}

.custom-portfolio .nav-link {
		font-weight: 600;
		padding: 8px 23px;
		font-size: 12.32px;
		font-size: 0.77rem;
}

.custom-portfolio .nav-item {
		margin-right: 1px;
}

.custom-portfolio .nav-item:hover .nav-link {
		color: var(--light);
}

.custom-thumb-info.thumb-info {
		max-width: 80% !important;
		border-radius: 100% !important;
}

/*
* Custom Img
*/
.custom-img {
		box-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
		border-radius: 1%;
}

/*
* Custom Line Height
*/
.custom-line-height {
		line-height: 12.8px !important;
		line-height: 0.8rem !important;
}

/*
* Featured Box - Circle uses .icon-featured (div), icon is inner <i> so FA glyph is visible
*/
.custom-featured-box .icon-featured {
		width: 100px !important;
		height: 100px !important;
		min-width: 100px !important;
		min-height: 100px !important;
		display: flex !important;
		justify-content: center;
		align-items: center;
		font-size: 0 !important; /* circle only, no text */
		line-height: 0 !important;
		margin: 0 !important;
		margin-right: 1.75rem !important; /* separación círculo – texto como en el demo original */
		flex-shrink: 0;
}

.custom-featured-box .icon-featured i {
		font-size: 2.25rem !important;
		line-height: 1 !important;
		margin: 0 !important;
		display: inline-block !important;
		transition: transform 0.2s ease;
}

.custom-featured-box:hover .icon-featured i {
		transform: scale(1.2);
}

/*
* Max Width
*/
.max-w-90 {
		max-width: 90%;
}

/*
* Custom Img About
*/
.custom-img-about {
		right: 0;
		top: 12%;
}

@media (max-width: 991px) {
		.custom-img-about {
				max-width: 45%;
		}
}

/*
* Breadcrumb
*/
.custom-breadcrumb li, .custom-breadcrumb a {
		color: var(--default) 77 !important;
}

.custom-breadcrumb > li + li:before {
		content: "/" !important;
		font-size: 17.6px;
		font-size: 1.1rem;
}

/*
* Cards
*/
.custom-card:hover {
		box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.1);
}

.custom-card:hover:before {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		height: 3px;
		width: 100%;
}

.custom-card .icon-animated {
		max-width: 80px;
}

/*
* HR
*/
.custom-hr {
		background: var(--grey-500) !important;
		width: 140%;
		margin-left: -20%;
}

/*
* Card
*/
.custom-card-style-2 {
		box-shadow: 0px 0px 35px -5px rgba(0, 0, 0, 0.1);
		border-left: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
		border-right: 1px solid #e8e8e8;
		margin-top: 16px;
		margin-top: 1rem;
}

.custom-card-style-2 h3, .custom-card-style-2 h4 {
		letter-spacing: inherit;
		font-weight: 600;
}

.custom-card-style-2 hr {
		background: rgba(0, 0, 0, 0.15) !important;
}

.custom-card-style-2:before {
		content: "";
		display: block;
		top: 0;
		left: 0;
		height: 3px;
		width: 100%;
}

.custom-card-style-2.card-contact-us {
		margin-top: 6.4px !important;
		margin-top: 0.4rem !important;
}

.custom-card-style-3 {
		border: 1px solid var(--grey-500);
}

.custom-card-style-3 h4 {
		letter-spacing: inherit;
		font-weight: 600;
}

.custom-card-style-3:hover {
		cursor: pointer;
		box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.1);
}

/*
* Map
*/
.custom-map {
		margin: 0 !important;
}

/*
* Tabs
*/
.custom-tabs {
		margin-bottom: 50px !important;
}

.custom-tabs .nav-item.active .nav-link, .custom-tabs .nav-item:hover .nav-link {
		color: var(--light) !important;
}

.custom-tabs .nav-item .nav-link {
		font-weight: 600;
		border: none !important;
		padding: 12px 24px !important;
		padding: 0.75rem 1.5rem !important;
}

.custom-tabs .nav-item .nav-link:before {
		content: none !important;
}

.custom-tabs .nav-item .nav-link:hover {
		padding: 12px 24px !important;
		padding: 0.75rem 1.5rem !important;
		border: none !important;
}

/*
* Contact Form
*/
.custom-form-style-1 .form-control {
		border: 0;
		padding: 19.2px;
		padding: 1.2rem;
		box-shadow: none !important;
		height: auto;
}

/*
* Progress Bar
*/
.custom-progress-bar.progress {
		background-color: var(--grey-500) ccc;
		border-radius: 25px !important;
		height: 8px !important;
		padding-left: 0;
		margin-left: 10px;
}

.custom-progress-bar .progress-bar {
		border-radius: 25px !important;
}

.custom-progress-bar .progress-bar-tooltip {
		color: var(--default) !important;
		background-color: transparent !important;
		font-size: 14px;
		right: -10px;
}

.custom-progress-bar .progress-bar-tooltip::after {
		content: none !important;
}

/*
* Testimonial
*/
.custom-testimonial blockquote {
		background: transparent !important;
		padding: 11.2px 28.8px;
		padding: 0.7rem 1.8rem;
}

.custom-testimonial blockquote:before, .custom-testimonial blockquote:after {
		font-family: "Font Awesome 7 Free";
		font-weight: 900;
}

.custom-testimonial blockquote:before {
		content: "\f10d";
		font-size: 17px !important;
		left: -12px !important;
}

/*
* Owl Carousel - Custom Dots
*/
.owl-carousel.custom-dots .owl-dots {
		margin-top: 30px;
}

.owl-carousel.custom-dots button.owl-dot span {
		width: 14px;
		height: 14px;
		border: 2px solid;
		background: transparent !important;
}

.owl-carousel.custom-dots button.owl-dot.active span, .owl-carousel.custom-dots button.owl-dot:hover span {
		position: relative;
		border: 2px solid;
		background: transparent;
}

.owl-carousel.custom-dots button.owl-dot.active span:before, .owl-carousel.custom-dots button.owl-dot:hover span:before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		border-radius: 100%;
		transform: translate3d(-50%, -50%, 0);
}

.owl-carousel.custom-dots button.owl-dot:hover {
		opacity: 0.7;
}

/*
* Custom Angled
*/
.custom-angled .section-angled-layer-bottom,
.custom-angled .section-angled-layer-top {
		padding: 72px 0 !important;
		padding: 4.5rem 0 !important;
}

.custom-angled:not(.section-angled-reverse) .section-angled-layer-top {
		transform: skewY(-3deg) translate3d(0, -50%, 0) !important;
}

.custom-angled:not(.section-angled-reverse) .section-angled-layer-bottom {
		transform: skewY(3deg) translate3d(0, 50%, 0) !important;
}

.custom-angled.section-angled-reverse .section-angled-layer-top {
		transform: skewY(3deg) translate3d(0, -50%, 0) !important;
}

.custom-angled.section-angled-reverse .section-angled-layer-bottom {
		transform: skewY(-3deg) translate3d(0, 50%, 0) !important;
}

/* Skin */
a.text-primary:hover {
		color: var(--primary) !important;
}

a.text-secondary:hover {
		color: var(--secondary) !important;
}

a.text-tertiary:hover {
		color: var(--tertiary) !important;
}

.custom-btn:hover {
		border-color: var(--primary);
}

.custom-button-white:hover {
		color: var(--primary) !important;
}

.custom-portfolio .nav-link {
		color: var(--secondary);
}

.custom-portfolio .nav-item:hover {
		background-color: var(--primary);
}

[data-carousel-navigate]:hover h4, [data-carousel-navigate].active h4 {
		color: var(--primary) !important;
}

[data-carousel-navigate]:hover:before, [data-carousel-navigate].active:before {
		background-color: var(--primary);
}

/*
* Cards
*/
.custom-card:hover:before {
		background-color: var(--primary);
}

.custom-card-style-2:before {
		background-color: var(--primary);
}

/*
* Testimonial
*/
.custom-testimonial blockquote:before {
		color: var(--primary) !important;
}

/*
* Tabs
*/
.custom-tabs .nav-item.active, .custom-tabs .nav-item:hover {
		background-color: var(--primary);
}

.custom-tabs .nav-item .nav-link {
		color: var(--secondary) !important;
}

.owl-carousel.custom-dots button.owl-dot span {
		border-color: var(--quaternary);
}

.owl-carousel.custom-dots button.owl-dot.active span, .owl-carousel.custom-dots button.owl-dot:hover span {
		border-color: var(--secondary);
}

.owl-carousel.custom-dots button.owl-dot.active span:before, .owl-carousel.custom-dots button.owl-dot:hover span:before {
		background: var(--secondary);
}

/*
* Footer Social Icons - ensure Font Awesome brands font loads
*/
#footer .social-icons.social-icons-dark li a i,
#footer .social-icons.social-icons-clean li a i {
		font-family: "Font Awesome 7 Brands" !important;
		font-weight: 400 !important;
}

/* ========================================================
   CONSTRUCTION-2 — GLOBAL OVERRIDES
   Tema claro/cálido para vistas de módulos.

   Las vistas de módulos usan inline styles con var() que
   producen un look oscuro. Estos overrides adaptan esa
   estética al tema claro de construction-2.

   Paleta: primary=#000d33, secondary=#023b6f,
   tertiary=#eae0d9, quaternary=#999, light=#FFF
   ======================================================== */

/* === 1. Section Backgrounds → Claro ===
   Módulos usan style="background-color: var(--secondary)"
   que produce azul oscuro. Lo revertimos a beige claro. */
.main section[style*="--secondary"]:not(.page-header) {
		background-color: var(--tertiary--200) !important;
}

/* === 2. Card/Panel Backgrounds → Blanco ===
   Módulos usan style="background-color: var(--dark)" */
.main section div[style*="background-color: var(--dark)"],
.main section aside [style*="background-color: var(--dark)"] {
		background-color: var(--light) !important;
		border: 1px solid var(--grey-300) !important;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

/* Card headers dentro de módulos */
.main section div[style*="background-color: var(--secondary)"][class*="card-header"] {
		background-color: var(--tertiary) !important;
		border-bottom: 1px solid var(--grey-300) !important;
}

/* Service, project, blog cards por clase */
.main section[style*="--secondary"] .service-card,
.main section[style*="--secondary"] .project-card,
.main section[style*="--secondary"] .blog-card {
		background-color: var(--light) !important;
		border: 1px solid var(--grey-300) !important;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

.main section[style*="--secondary"] .service-card:hover,
.main section[style*="--secondary"] .project-card:hover,
.main section[style*="--secondary"] .blog-card:hover {
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* === 3. Text: Headings → Navy, Body → Default === */
.main section[style*="--secondary"] [style*="color: var(--light)"] {
		color: var(--secondary) !important;
}

.main section[style*="--secondary"] [style*="color: var(--quaternary)"] {
		color: var(--default) !important;
}

/* Inline strong/bold dentro de módulos */
.main section[style*="--secondary"] strong[style*="--light"] {
		color: var(--secondary) !important;
}

/* === 4. Hardcoded cyan borders (herencia accounting-1) → Gris neutro === */
.main [style*="rgba(0, 240, 255"] {
		border-color: var(--grey-300) !important;
}

.main [style*="border: 1px solid rgba(0, 240, 255"] {
		border: 1px solid var(--grey-300) !important;
}

/* Cyan badges → neutro */
.main [style*="background-color: rgba(0, 240, 255"] {
		background-color: var(--tertiary) !important;
		border-color: var(--grey-400) !important;
}

/* === 5. Porto Standard Classes → Beige cálido === */
.main .bg-color-grey-scale-1 {
		background-color: var(--tertiary--200) !important;
}

.main .bg-color-grey-scale-2 {
		background-color: var(--tertiary--100) !important;
}

.main .badge.bg-color-grey-scale-2 {
		background-color: var(--tertiary) !important;
		color: var(--secondary) !important;
}

.main .badge.bg-color-grey-scale-2.text-color-dark {
		color: var(--secondary) !important;
}

/* Badges con inline styles (services, projects) — legibilidad en tema claro */
.main .badge[style*="background-color: var(--secondary)"] {
		background-color: var(--tertiary) !important;
		color: var(--secondary) !important;
}

.main .badge[style*="color: var(--primary)"] {
		color: var(--secondary) !important;
}

.main .badge[style*="color: var(--quaternary)"] {
		color: var(--default) !important;
}

.main .service-badge,
.main .project-badge,
.main .project-tag {
		background-color: var(--tertiary) !important;
		color: var(--secondary) !important;
		border: 1px solid var(--grey-300);
}

/* === 6. Borders Porto → Cálido === */
.main .border-color-grey-scale-2,
.main .border-bottom.border-color-grey-scale-2 {
		border-color: var(--grey-300) !important;
}

/* === 7. Sidebar Navigation (FAQs, etc.) === */
.main .category-nav-item {
		color: var(--secondary);
		border-bottom: 1px solid var(--grey-200);
}

.main .category-nav-item:hover,
.main .category-nav-item.active {
		background-color: var(--tertiary);
		color: var(--primary);
}

/* === 8. Pagination dentro de módulos === */
.main section[style*="--secondary"] .pagination .page-link {
		background-color: var(--light);
		border-color: var(--grey-300);
		color: var(--secondary);
}

.main section[style*="--secondary"] .pagination .page-item.active .page-link {
		background-color: var(--primary);
		border-color: var(--primary);
		color: var(--light);
}

.main section[style*="--secondary"] .pagination-info {
		color: var(--default) !important;
}

/* === 9. Filter Buttons en módulos === */
.main section[style*="--secondary"] .btn-outline-light {
		color: var(--secondary) !important;
		border-color: var(--grey-400) !important;
}

.main section[style*="--secondary"] .btn-outline-light:hover,
.main section[style*="--secondary"] .btn-outline-light.active {
		background-color: var(--primary) !important;
		border-color: var(--primary) !important;
		color: var(--light) !important;
}

.main section[style*="--secondary"] .btn-outline-secondary {
		color: var(--secondary) !important;
		border-color: var(--grey-400) !important;
}

/* === 10. Forms en secciones de módulos === */
.main section[style*="--secondary"] .form-control {
		background-color: var(--light) !important;
		border: 1px solid var(--grey-300) !important;
		color: var(--dark) !important;
}

/* === 11. Service Detail: embedded CSS overrides === */
.main .service-description-content h1,
.main .service-description-content h2,
.main .service-description-content h3,
.main .service-description-content h4 {
		color: var(--secondary) !important;
}

.main .service-description-content p,
.main .service-description-content li {
		color: var(--default) !important;
}

.main .service-description-content strong {
		color: var(--secondary) !important;
}

.main .service-description-content a {
		color: var(--primary) !important;
}

.main .service-description-content blockquote {
		border-left: 3px solid var(--primary) !important;
		background-color: var(--tertiary--200) !important;
}

/* === 12. Blog Post Detail === */
.main .blog-post-detail .blog-post-content h1,
.main .blog-post-detail .blog-post-content h2,
.main .blog-post-detail .blog-post-content h3,
.main .blog-post-detail .blog-post-content h4 {
		color: var(--secondary) !important;
}

.main .blog-post-detail .blog-post-content p,
.main .blog-post-detail .blog-post-content li {
		color: var(--default) !important;
}

.main .blog-post-detail .blog-post-content strong {
		color: var(--secondary) !important;
}

/* === 13. Gallery pills & filters → Visibles en fondo claro === */
.main section[style*="--secondary"] .text-muted {
		color: var(--quaternary) !important;
}

.main section[style*="--secondary"] .btn-outline-primary {
		color: var(--primary) !important;
		border-color: var(--primary) !important;
}

.main section[style*="--secondary"] .btn-outline-primary:hover {
		background-color: var(--primary) !important;
		color: var(--light) !important;
}

/* === 14. Links dentro de módulos === */
.main section[style*="--secondary"] a[style*="color: var(--light)"] {
		color: var(--secondary) !important;
}

.main section[style*="--secondary"] a[style*="color: var(--light)"]:hover {
		color: var(--primary) !important;
}

/* === 15. Results bar / Info panels === */
.main .projects-results-bar {
		background-color: var(--light) !important;
		border: 1px solid var(--grey-300) !important;
}

.main .projects-results-bar h5[style],
.main .projects-results-bar [style*="--light"] {
		color: var(--secondary) !important;
}

.main .projects-results-bar [style*="--quaternary"] {
		color: var(--default) !important;
}

/* === 16. Cards en Porto standard (project show, etc.) === */
.main .card.shadow-modern {
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06) !important;
}

/* === 17. Custom view-more links === */
.main .custom-view-more {
		color: var(--primary) !important;
}

.main .custom-view-more:hover {
		color: var(--secondary) !important;
}

/* === 18. Container width consistency === */
.main .container:not(.container-xl-custom) {
		max-width: 1440px;
}