/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Tighter body text line-height than Astra's default (1.85714). */
body {
	line-height: 1.3;
}

/* Homepage image carousel: slow down and soften the flip transition (was
   350ms with an aggressive cubic-bezier) so it reads as smooth rather than
   choppy. Paired with a longer autoplay interval set in index.html. */
.premium-adv-carousel__container .flipster__item__content {
	transition: all 700ms ease-in-out !important;
}

/* Sticky footer: keep it pinned to the bottom of the viewport on short
   pages (e.g. Contact) instead of floating mid-screen with empty space
   below it. Pages with enough content to fill the viewport are unaffected. */
html, body {
	height: 100%;
}
#page {
	display: flex !important;
	flex-direction: column;
	min-height: 100vh;
}
#content {
	flex: 1 0 auto;
}
footer.site-footer {
	flex-shrink: 0;
}

/* Compact header, same at every screen size — no separate mobile hamburger. */
#ast-desktop-header {
	display: block !important;
}
.custom-logo-link img {
	width: 120px !important;
	height: 120px !important;
	max-width: 120px !important;
}
.ast-builder-layout-element .ast-site-identity {
	margin: 0 !important;
}
.site-branding.ast-site-identity {
	padding: 0 !important;
}
.site-logo-img {
	padding-right: 0 !important;
}
.site-title {
	margin: 0 0 0 -3px !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.ast-primary-header-bar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ast-builder-grid-row-has-sides {
	grid-template-columns: max-content 1fr !important;
}
/* Not enough room for logo + title + nav on one line: the logo moves to an
   absolutely-positioned column on the left that spans the full height of
   both rows, while the title (top) and nav menu (bottom, untouched other
   than alignment) stack in the space to its right. */
@media (max-width: 768px) {
	.ast-builder-grid-row-has-sides {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto !important;
		row-gap: 0 !important;
		align-content: center !important;
		position: relative;
		padding-left: 130px;
		min-height: 130px;
	}
	.site-header-primary-section-left,
	.site-header-primary-section-right {
		margin: 0 !important;
		align-items: flex-start !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.custom-logo-link {
		position: absolute !important;
		left: 0;
		top: 0;
		bottom: 0;
		display: flex !important;
		align-items: center;
	}
	/* Nav row sits below the logo now, so left-align it (it was right-
	   aligned for sitting next to the logo in the single desktop row) */
	#primary-site-navigation-desktop .main-header-menu {
		justify-content: flex-start !important;
	}
}

/* ==========================================================================
   Site nav — plain, hand-written, ignores Astra's menu CSS entirely.
   Same simple horizontal-links style as the footer menu, at every screen
   size. "Services" opens a small dropdown that overlays the page (it never
   pushes the header taller); opens on hover (desktop) or tap (everywhere,
   via assets/js/nav-toggle.js toggling .mobile-submenu-open).
   ========================================================================== */
#primary-site-navigation-desktop .main-header-menu,
#primary-site-navigation-desktop .sub-menu {
	display: flex !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
#primary-site-navigation-desktop .main-header-menu {
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
	justify-content: flex-end;
}
#primary-site-navigation-desktop .menu-item {
	position: relative;
	list-style: none;
	width: auto !important;
	flex: 0 0 auto !important;
}
#primary-site-navigation-desktop .menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	color: #3E2A1C !important;
	font-family: 'Barlow', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	text-decoration: none !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
	padding: 6px 0 !important;
	background: none !important;
	border: none !important;
}
#primary-site-navigation-desktop .menu-text {
	line-height: normal !important;
}
#primary-site-navigation-desktop .menu-link:hover {
	color: #E2BB7B !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link {
	color: #C46316 !important;
	text-shadow: none !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link:hover {
	color: #E2BB7B !important;
}
#primary-site-navigation-desktop .menu-link .ast-icon {
	display: none !important;
}
#primary-site-navigation-desktop .dropdown-menu-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#primary-site-navigation-desktop .dropdown-menu-toggle .ast-icon {
	display: none !important;
}
#primary-site-navigation-desktop .dropdown-menu-toggle::after {
	content: "▾";
	color: #3E2A1C;
	font-size: 14px;
}
#primary-site-navigation-desktop .sub-menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	flex-direction: column;
	position: absolute !important;
	top: 100% !important;
	left: auto !important;
	right: 0 !important;
	min-width: 210px;
	background-color: #3E2A1C !important;
	padding: 6px 0;
	z-index: 999;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}
#primary-site-navigation-desktop .menu-item-has-children:hover > .sub-menu,
#primary-site-navigation-desktop .menu-item-has-children.mobile-submenu-open > .sub-menu {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link {
	padding: 5px 20px !important;
	font-size: 16px !important;
	white-space: nowrap;
}
#primary-site-navigation-desktop .ast-menu-toggle {
	display: none !important;
}

/* Footer nav links: same colors and drop shadow as the header nav links */
#footer-site-navigation .menu-link,
.ast-footer-copyright a {
	color: #3E2A1C !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
}
#footer-site-navigation .menu-link:hover,
.ast-footer-copyright a:hover {
	color: #E2BB7B !important;
}

/* Services overview page: the page-title widget sits one nesting level
   shallower than the repeated service blocks below it, so it was missing
   the padding those blocks pick up from their extra wrapper — this brings
   its width in line with everything else on the page. */
.elementor-element-69680d0 {
	padding-left: 10px !important;
	padding-right: 10px !important;
	box-sizing: border-box !important;
}
/* Service images on this page used the old 5px border; match the 2px
   gallery-item border used everywhere else on the site */
.elementor-412 .elementor-widget-container img {
	border-width: 2px !important;
}
/* Service category heading links need the same hover color as other links.
   !important because a later, equally-specific "color: inherit" rule on
   these links otherwise wins the tie and locks them to their parent
   heading's color regardless of :hover state. */
.elementor-412 .elementor-heading-title a {
	color: #C46316 !important;
}
.elementor-412 .elementor-heading-title a:hover {
	color: #E2BB7B !important;
}

/* Image gallery grid: single source of truth, replaces the old overlapping
   WordPress/Astra/Elementor column-class system */
.elementor-image-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 !important;
}
/* Every gallery item is the same size regardless of how many images are in
   its group (a group with fewer images just leaves its row short, still
   centered by the flex container above) */
.elementor-image-gallery .gallery-item {
	margin: 0 !important;
	padding: 0 !important;
	width: calc(33.333% - 6.667px);
}
@media (max-width: 767px) {
	.elementor-image-gallery .gallery-item {
		width: calc(50% - 5px);
	}
}
@media (max-width: 480px) {
	.elementor-image-gallery .gallery-item {
		width: 100%;
	}
}

/* Square, cropped thumbnails in the grid; the lightbox still opens the
   original image untouched since it renders into its own separate <img> */
.elementor-image-gallery .gallery-icon {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.elementor-image-gallery .gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elementor-image-gallery .gallery-item .gallery-caption {
	background-color: var(--e-global-color-primary, #C46316);
	color: var(--e-global-color-secondary, #3E2A1C);
	border: 2px solid var(--e-global-color-primary, #C46316);
	border-top: none;
	font-weight: 600 !important;
}