/* ==========================================================================
   HighwayCore Core — Elementor layer
   Makes Elementor containers host HighwayCore sections edge-to-edge and styles
   native Elementor widgets (image, text, icon list, button, icon box) to match.
   Classes are added in Elementor → Advanced → CSS Classes.
   ========================================================================== */

/* Containers hosting a full HighwayCore section: no padding, no gap. */
.e-con.hc-bare,
.e-con.hc-section,
.e-con.hc-wrap,
.e-con.hc-about-media,
.e-con.hc-about-content,
.e-con.hc-why-sticky,
.e-con.hc-why-list {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--margin-top: 0px; --margin-bottom: 0px;
}
.e-con.hc-bare { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.e-con.hc-bare > .elementor-widget { width: 100%; margin: 0; }
.elementor-widget-hcc-heading .section-head { margin-bottom: 20px; }
.hcc-heading--dark .section-title { color: #fff; }
.hcc-heading--dark .section-intro { color: rgba(255, 255, 255, .62); }

/* Native-widget sections --------------------------------------------------- */
.e-con.hc-section { position: relative; padding-block: var(--section); overflow-x: clip; }
.e-con.hc-wrap {
	width: 100%; max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto; padding-inline: var(--gutter);
	--padding-left: var(--gutter); --padding-right: var(--gutter);
}
.elementor .e-con.hc-grid-2 {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); align-items: center;
}

/* About */
.elementor .e-con.hc-about-media { position: relative; display: block; padding: 0 12% 12% 0; }
.hc-about-main img, .hc-about-small img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.hc-about-main { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.hc-about-main:hover img { transform: scale(1.06); }
.elementor-widget-image.hc-about-small {
	position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
	border: 8px solid #fff; box-shadow: var(--shadow-lg);
}
.elementor-widget-text-editor.hc-about-badge {
	position: absolute; top: 28px; right: 4%; z-index: 2; width: 148px; height: 148px; border-radius: 50%;
	display: grid; place-content: center; text-align: center; color: #fff; background: var(--accent);
	box-shadow: 0 24px 50px -16px rgba(255, 107, 26, .7);
}
.hc-about-badge p { margin: 0; line-height: 1.2; }
.hc-about-badge strong { display: block; font-family: var(--font-head); font-size: 2.6rem; line-height: 1; }
.hc-about-badge span { display: block; font-size: .75rem; font-weight: 500; padding: 6px 18px 0; }
.e-con.hc-about-content { --gap: 0px; }
.hc-lead, .hc-lead p { font-size: 1.125rem; color: var(--text); }

.hc-checklist { margin: 26px 0 34px; }
.hc-checklist .elementor-icon-list-items { display: grid; gap: 14px; }
.hc-checklist .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 14px; padding: 0 !important; }
.hc-checklist .elementor-icon-list-icon {
	display: grid !important; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
	background: var(--accent-100); color: var(--accent); margin-top: 1px;
}
.hc-checklist .elementor-icon-list-icon svg, .hc-checklist .elementor-icon-list-icon i { width: 12px; height: 12px; font-size: 12px; fill: var(--accent); color: var(--accent); }
.hc-checklist .elementor-icon-list-text { color: var(--ink); font-weight: 500; padding: 0 !important; }

/* Native Elementor button styled as a HighwayCore pill button */
.hc-el-btn .elementor-button {
	display: inline-flex; align-items: center; min-height: 52px; padding: 7px 7px 7px 24px; border-radius: 999px;
	background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.hc-el-btn--dark .elementor-button { background: var(--navy-900); }
.hc-el-btn .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(10, 22, 40, .45); color: #fff; }
.hc-el-btn .elementor-button-content-wrapper { display: flex; align-items: center; gap: 14px; flex-direction: row-reverse; }
.hc-el-btn .elementor-button-icon {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff;
	transition: transform .5s var(--ease), background .3s;
}
.hc-el-btn:not(.hc-el-btn--dark) .elementor-button-icon { background: rgba(255, 255, 255, .2); }
.hc-el-btn .elementor-button-icon svg { width: 14px; height: 14px; fill: currentColor; }
.hc-el-btn .elementor-button:hover .elementor-button-icon { transform: rotate(-45deg); background: #fff; color: var(--accent); }
.hc-el-btn .elementor-button:hover .elementor-button-icon svg { fill: var(--accent); }

/* Why choose us */
.e-con.hc-why { background: var(--navy-900); color: rgba(255, 255, 255, .72); }
.e-con.hc-why::before {
	content: ""; position: absolute; width: 700px; height: 700px; right: -200px; top: -200px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 107, 26, .2), transparent 65%);
}
.elementor .e-con.hc-why-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.elementor .e-con.hc-why-sticky { display: block; position: sticky; top: calc(var(--header-h) + 40px); }
.hc-why-img { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; }
.hc-why-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e-con.hc-why-list { --gap: 18px; }
.hc-why-card {
	padding: 30px; border-radius: 22px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
	transition: background .4s, border-color .4s, transform .5s var(--ease);
}
.hc-why-card:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 107, 26, .35); transform: translateX(8px); }
.hc-why-card .elementor-icon-box-wrapper { display: flex; gap: 22px; align-items: flex-start; text-align: left; }
.hc-why-card .elementor-icon-box-icon { margin: 0 !important; flex-shrink: 0; }
.hc-why-card .elementor-icon {
	display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; font-size: 24px;
	background: linear-gradient(135deg, var(--accent), #ff9a52); color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 107, 26, .7);
}
.hc-why-card .elementor-icon svg { width: 24px; height: 24px; fill: #fff; }
.hc-why-card .elementor-icon-box-title { font-size: 1.25rem; color: #fff; margin: 0 0 8px; font-family: var(--font-head); }
.hc-why-card .elementor-icon-box-description { margin: 0; font-size: .9688rem; color: rgba(255, 255, 255, .7); }

/* Image reveal in Elementor (JS uses the hc-reveal class) */
.js:not(.no-anim) .hc-reveal:not(.anim-done) { clip-path: inset(100% 0 0 0); }

/* Elementor editor: never hide content */
.elementor-editor-active .hc-reveal { clip-path: none !important; }

@media (max-width: 1100px) {
	.elementor .e-con.hc-why-grid { grid-template-columns: 1fr; }
	.elementor .e-con.hc-why-sticky { position: static; }
}
@media (max-width: 900px) {
	.elementor .e-con.hc-grid-2 { grid-template-columns: 1fr; }
	.elementor .e-con.hc-about-media { max-width: 560px; }
}
@media (max-width: 767px) {
	.elementor-widget-text-editor.hc-about-badge { width: 118px; height: 118px; top: 12px; }
	.hc-about-badge strong { font-size: 2rem; }
	.hc-why-card .elementor-icon-box-wrapper { flex-direction: column; }
}

/* Editing the Header / Footer templates in Elementor: show the header in normal flow on a navy background. */
.single-elementor_library .site-header { position: relative; }
.single-elementor_library .site-header .navbar { background: var(--navy-900); }
.single-elementor_library .site-header .topbar { background: var(--navy-950); }
/* Elementor sites using font icons (<i>) instead of inline SVG icons. */
.hc-why-card .elementor-icon i { font-size: 24px; color: #fff; }
.hc-el-btn .elementor-button-icon i { font-size: 14px; color: currentColor; }
.hc-checklist .elementor-icon-list-icon i { font-size: 12px; color: var(--accent); }

/* Elementor sites without "Flexbox Container": old Section/Column wrappers stay full width. */
.elementor-section.hc-bare > .elementor-container { max-width: none; }
.elementor-section.hc-bare .elementor-widget-wrap { padding: 0; }
/* ==========================================================================
   DESIGN LOCK — Elementor's frontend CSS resets images inside .elementor
   (height:auto; border-radius:0; max-width:100%), which stops HighwayCore photos
   from filling their frames. Re-assert the theme's image styles with higher
   specificity so the Elementor version matches the custom design everywhere.
   ========================================================================== */
.elementor .hero__media img { width: 100%; height: 115%; max-width: none; object-fit: cover; object-position: 60% center; }
.elementor .pillar__media img,
.elementor .stats__media img,
.elementor .cta-band__media img,
.elementor .page-hero__media img,
.elementor .hc-about-main img,
.elementor .hc-about-small img,
.elementor .hc-why-img img,
.elementor .avatar img {
	width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
}
.elementor .pillar__media img { position: absolute; inset: 0; }
.elementor .hc-about-main, .elementor .hc-about-small, .elementor .hc-why-img { overflow: hidden; }
.elementor .hc-about-main > *, .elementor .hc-about-small > *, .elementor .hc-why-img > * { height: 100%; }
.elementor .avatar img { border-radius: 50%; }
/* Elementor also adds link/heading/list resets — keep the theme's. */
.elementor .section-title, .elementor .hero__title, .elementor .page-hero__title, .elementor .pillar__title { font-family: var(--font-head); }
.elementor .btn, .elementor .btn:hover { color: var(--btn-fg); text-decoration: none; }
.elementor .footer-menu a, .elementor .primary-nav a { text-decoration: none; }
/* Theme animation for native Elementor widgets (class "hc-anim" in Advanced → CSS Classes). */
.js:not(.no-anim) .hc-anim:not(.anim-done) { opacity: 0; }
.no-anim .hc-anim, .elementor-editor-active .hc-anim { opacity: 1 !important; transform: none !important; }
/* If Elementor's own entrance animations are used and its script is delayed or blocked, never keep content hidden. */
.no-anim .elementor-invisible { visibility: visible !important; opacity: 1 !important; }
/* Elementor's default widget transform transition conflicts with scroll animations. */
.elementor .elementor-element.hc-anim, .elementor .elementor-element.hc-reveal { transition-property: background, border, border-radius, box-shadow; }