/* ==========================================
   2G IMPIANTI - Custom Overrides
   ========================================== */

/* --- FAQ ACCORDION --- */
#accordionFaq .collapse {
	display: none;
}
#accordionFaq .collapse.show {
	display: block;
}
#accordionFaq [data-bs-target] .fa-chevron-down {
	transition: transform 0.3s ease;
}
#accordionFaq [data-bs-target][aria-expanded="true"] .fa-chevron-down {
	transform: rotate(180deg);
}

/* --- DARK HEADER --- */
#header .header-body {
	background-color: var(--quaternary) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

#header .header-body {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Nav links - light on dark */
#header .header-nav-main nav > ul > li > a {
	color: rgba(255, 255, 255, 0.85) !important;
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li > a.active {
	color: var(--primary) !important;
}

/* Top bar text */
#header .text-color-dark {
	color: rgba(255, 255, 255, 0.85) !important;
}

#header .text-color-hover-primary:hover {
	color: var(--primary) !important;
}

/* Vertical rule in top bar */
#header .vr {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile hamburger button */
#header .header-btn-collapse-nav {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Header CTA button - too big/disproportionate on small phones */
@media (max-width: 575px) {
	#header .header-cta-btn {
		padding: 8px 12px !important;
		font-size: 11px !important;
		white-space: nowrap;
	}

	#header .header-cta-btn i {
		margin-left: 6px !important;
	}
}

/* Mobile nav dropdown - dark */
@media (max-width: 991px) {
	#header .header-nav-main nav {
		background-color: var(--quaternary--100) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	#header .header-nav-main nav > ul > li > a {
		color: #fff !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
		padding: 12px 20px !important;
	}

	#header .header-nav-main nav > ul > li > a.active {
		color: #fff !important;
	}
}

/* --- LOGO SIZING --- */
.header-logo img {
	max-width: 160px;
	height: auto !important;
}

/* --- HERO SECTION --- */
.hero {
	min-height: 680px;
}

@media (max-width: 767px) {
	.hero {
		min-height: 500px;
		height: auto !important;
		padding: 120px 0 80px;
	}

	.custom-el-pos-1 {
		margin-top: 0 !important;
	}
}

/* --- SERVICE CARDS (hero overlap) --- */
@media (max-width: 991px) {
	.custom-el-pos-1 {
		margin-top: 0 !important;
	}
}

/* --- PAGE HEADER (breadcrumb sections) --- */
.page-header.page-header-lg {
	padding-top: 100px !important;
	padding-bottom: 60px !important;
}

/* --- SECTION SPACING --- */
@media (max-width: 767px) {
	h3 {
		font-size: 1.6em !important;
	}

	.text-10 {
		font-size: 2em !important;
	}

	.text-12 {
		font-size: 2.4em !important;
	}
}

/* --- BUTTONS --- */
.btn-primary {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--primary-100) !important;
	border-color: var(--primary-100) !important;
}

/* --- BREADCRUMB ON DARK HEADER --- */
.breadcrumb li a.text-color-light,
.breadcrumb li.active.text-color-light {
	opacity: 0.8;
}

/* --- FOOTER SOCIAL ICONS --- */
.social-icons li a {
	background: transparent !important;
}

/* --- SOCIAL ICON BRAND COLORS --- */
/* Header social icons */
#header .fa-facebook-f  { color: #1877F2 !important; }
#header .fa-instagram   { color: #E1306C !important; }
#header .fa-tiktok      { color: #69C9D0 !important; }
#header .fa-whatsapp    { color: #25D366 !important; }

/* --- LOGO MARQUEE --- */
.logo-marquee {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logo-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: logoMarquee 25s linear infinite;
}
.logo-marquee-track:hover {
	animation-play-state: paused;
}
.logo-marquee-track-reverse {
	animation-direction: reverse;
	animation-duration: 20s;
}
.logo-marquee-item {
	padding: 10px 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.logo-marquee-item img {
	max-height: 46px;
	max-width: 130px;
	width: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.logo-marquee-item img:hover {
	transform: scale(1.08);
}
.logo-marquee-text {
	font-size: 1.3rem;
	font-weight: 700;
	color: #555;
	white-space: nowrap;
	letter-spacing: -0.3px;
	transition: color 0.3s ease;
}
.logo-marquee-item:hover .logo-marquee-text {
	color: var(--primary);
}
/* Brand colors */
.brand-tesla    { color: #E31937; }
.brand-zcs      { color: #1D4E9F; }
.brand-sungrow  { color: #005BAC; }
.brand-afore    { color: #0052A5; }
.brand-solarwatt{ color: #003082; }
.brand-jinko    { color: #1B4F9C; }
.brand-longi    { color: #CA1126; }
@keyframes logoMarquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-25%); }
}

/* Footer social icons */
#footer .fa-facebook-f  { color: #1877F2 !important; }
#footer .fa-instagram   { color: #E1306C !important; }
#footer .fa-tiktok      { color: #69C9D0 !important; }
#footer .fa-whatsapp    { color: #25D366 !important; }

/* --- CONTACT FORM --- */
.contact-form .form-control,
.contact-form .form-select {
	border-radius: 4px;
	padding: 12px 16px;
	font-size: 15px;
	border: 1px solid #dee2e6;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(235, 102, 9, 0.15);
}

/* --- PARTNER NAMES SPACING --- */
[class*="col-"] > span[class*="font-weight-bold"] {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	font-size: 1rem;
}
