/* ==========================================================================
   custom.css — site-specific overrides (not part of the original theme)
   Loaded after style.min.css / responsive.css so these rules win.

   Purpose: the shared header uses .menu-style-four, whose nav links are
   hard-coded to #fff. That reads fine over the dark pages (index-4,
   about-v3, project-v3) but is invisible over the light ones (index-8,
   service-v4). Giving the bar a solid dark background makes the one
   shared header legible on every page.
   ========================================================================== */

/* Header: transparent at the top of every page (overlays the hero); the theme
   adds .fixed on scroll, at which point we show a dark-grey bar. Menu/logo stay
   white throughout. */
.theme-main-menu.menu-style-four {
	background: transparent;
}
.theme-main-menu.menu-style-four.fixed {
	background: #2a2a2c;
}

/* Contact form (added to every page). It uses white text/inputs, so on the
   light pages (services, marketing = .bg-grey) give the form panel a solid dark
   background so it stays legible; on the dark pages it keeps the glass look. */
.bg-grey .contact-section-two .contact-form-bg {
	background: #14151a;
}
.bg-grey .contact-section-two .contact-form-bg p,
.bg-grey .contact-section-two .contact-form-bg .tel {
	color: #fff;
}
/* Smooth-scroll when "Let's Talks"/Contact jumps to #contact, offset so the
   fixed header doesn't cover the top of the form. */
html {
	scroll-behavior: smooth;
}
#contact {
	scroll-margin-top: 110px;
}

/* services.html service list: it's a Bootstrap accordion (.accordion-style-five)
   with solid white items. Now that the page is dark, give the items the same
   glass effect as the other panels, with white text and a white (inverted)
   arrow. Scoped to .dark-bg-one so it only applies on the dark services page. */
.dark-bg-one .accordion-style-five .accordion-item {
	background: hsla(0, 0%, 100%, 0.05);
	border-color: hsla(0, 0%, 100%, 0.1);
	-webkit-backdrop-filter: blur(75px);
	backdrop-filter: blur(75px);
}
.dark-bg-one .accordion-style-five .accordion-button,
.dark-bg-one .accordion-style-five .accordion-body p {
	color: #fff;
}
.dark-bg-one .accordion-style-five .accordion-button::before {
	filter: invert(1);
}

/* AM19 site logo (header, offcanvas sidebar, footer).
   The logo <a> is a flex container; sizing an <img> flex-item by height alone
   collapses its width to 0, so size by an explicit width and let height follow
   the intrinsic ratio (259x163) — matching how the theme drove the original
   width-based SVG logo. */
.logo img[src*="am19-logo"] {
	width: 100px;
	height: auto;
}
footer .logo img[src*="am19-logo"] {
	width: 125px;
}
/* Unified footer: every page now uses .footer-four, whose text/logo are white.
   It carries no background of its own and relied on the dark page wrapper, so
   the light pages (services, marketing use .bg-grey) would show white-on-grey.
   Give the footer its own dark background — matching the dark pages' #08090b —
   so the one footer looks identical and stays legible everywhere. */
.footer-four {
	background: #08090b;
}

/* services/marketing: the "Connect with us" banner (.fancy-banner-seven) carried
   large bottom padding (up to 150px) that used to blend into the old light
   footer. With the unified dark footer, that padding became a glaring block of
   empty LIGHT space above the dark footer. Trim it so the CTA sits close to the
   footer. Only these two pages have this banner. */
.fancy-banner-seven .box-layout {
	padding-bottom: 50px;
}

/* Preloader: show the AM19 logo instead of the old spinner + "GRAFTY" text.
   The logo is white, so put it on the brand-dark background and let it show in
   its native form; a gentle pulse keeps the "loading" feel the removed letters
   used to provide. */
.ctn-preloader {
	background: #08090b;
}
.ctn-preloader .icon img {
	width: 170px;
	animation: am19-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes am19-loader-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.95); }
}

/* Home-page services list — the index-8 "service-section-five" layout ported
   onto the dark home page. Instead of a light panel, give it the same glass
   effect the About Us section uses (.bg-blur: translucent white + heavy blur)
   with white text. Scoped with .home-light so the original index-8/marketing
   section is untouched. (Class name kept for stability; it's a dark-glass panel
   now, not a light one.) */
.service-section-five.home-light {
	background: hsla(0, 0%, 100%, 0.05);
	border: 1px solid hsla(0, 0%, 100%, 0.1);
	-webkit-backdrop-filter: blur(75px);
	backdrop-filter: blur(75px);
	border-radius: 30px;
	overflow: hidden;
}
.service-section-five.home-light h2,
.service-section-five.home-light h3,
.service-section-five.home-light .upper-title,
.service-section-five.home-light .btn-three .text {
	color: #fff;
}
/* rows: light dividers, and the arrow icon is a black-stroke SVG so invert it
   to white on the dark panel */
.service-section-five.home-light .service-block {
	border-color: hsla(0, 0%, 100%, 0.12);
}
.service-section-five.home-light .service-block .cta-btn img {
	filter: invert(1);
}
/* the theme turns each row white on hover — flip text + arrow back to dark so
   they stay readable */
.service-section-five.home-light .service-block:hover h3 {
	color: #000;
}
.service-section-five.home-light .service-block:hover .cta-btn img {
	filter: none;
}

/* Footer mobile spacing: on phones the two footer columns stack, and the big
   "Unlock quality growth & business success." heading (col-lg-8) ends up right
   under the address block with no breathing room. Add space above the heading
   column, and a little gap above the copyright line. Mobile only — desktop is
   fine, so scope to the width where the columns stack. */
@media (max-width: 767px) {
	.footer-four .col-lg-8 {
		margin-top: 45px;
	}
	.footer-four .copyright-text {
		margin-top: 40px !important;
	}
}