/**
 * =========================================================
 * ATS Industrial - Global Styles
 * =========================================================
 *
 * Theme: ATS Industrial
 * Parent Theme: Astra
 * Developer: Auspian Technologies
 *
 * File:
 * /assets/css/global.css
 *
 * =========================================================
 */


/* =========================================================
   1. Root Variables
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   Core Brand Colours
	   ----------------------------------------------------- */

	--ats-primary: #12314A;
	--ats-primary-hover: #0D263A;

	--ats-secondary: #66717A;

	--ats-accent: #F28C28;
	--ats-accent-hover: #D97617;

	--ats-heading: #16202A;
	--ats-body: #4B5660;

	--ats-bg: #F4F6F7;
	--ats-white: #FFFFFF;


	/* -----------------------------------------------------
	   Neutral / Border
	   ----------------------------------------------------- */

	--ats-border: #D9DEE2;
	--ats-border-dark: rgba(18, 49, 74, 0.18);


	/* -----------------------------------------------------
	   WhatsApp
	   ----------------------------------------------------- */

	--ats-whatsapp: #25D366;
	--ats-whatsapp-hover: #1EAD53;


	/* -----------------------------------------------------
	   Button System
	   ----------------------------------------------------- */

	--ats-btn-height: 48px;
	--ats-btn-height-mobile: 46px;

	--ats-btn-padding-x: 24px;
	--ats-btn-padding-x-mobile: 20px;

	--ats-btn-radius: 3px;

	--ats-btn-font-size: 15px;
	--ats-btn-font-weight: 600;

	--ats-btn-transition: 0.25s ease;


	/* -----------------------------------------------------
	   Section Spacing
	   ----------------------------------------------------- */

	--ats-section-space: 88px;

}


/* =========================================================
   2. Global Base
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}


/* =========================================================
   3. Global Elementor Button Base
   ========================================================= */

/**
 * Add one of these classes to an Elementor Button widget:
 *
 * ats-btn ats-btn--primary
 * ats-btn ats-btn--secondary
 * ats-btn ats-btn--light
 * ats-btn ats-btn--whatsapp
 *
 * Optional:
 * ats-btn--mobile-full
 */

.ats-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: var(--ats-btn-height);
	padding: 12px var(--ats-btn-padding-x) !important;

	font-family: "Inter", sans-serif;
	font-size: var(--ats-btn-font-size) !important;
	font-weight: var(--ats-btn-font-weight) !important;
	line-height: 1.2em;

	border-radius: var(--ats-btn-radius) !important;

	text-decoration: none;

	transition:
		background-color var(--ats-btn-transition),
		border-color var(--ats-btn-transition),
		color var(--ats-btn-transition),
		transform var(--ats-btn-transition),
		box-shadow var(--ats-btn-transition);
}


.ats-btn .elementor-button:hover {
	transform: translateY(-2px);
}


.ats-btn .elementor-button:focus-visible {
	outline: 3px solid rgba(242, 140, 40, 0.35);
	outline-offset: 3px;
}


/* =========================================================
   4. Primary Button
   ========================================================= */

.ats-btn--primary .elementor-button {
	background: var(--ats-accent);
	color: var(--ats-white);

	border: 1px solid var(--ats-accent);

	box-shadow:
		0 5px 14px rgba(242, 140, 40, 0.16);
}


.ats-btn--primary .elementor-button:hover {
	background: var(--ats-primary);
	border-color: var(--ats-primary);

	color: var(--ats-white);

	box-shadow:
		0 8px 20px rgba(18, 49, 74, 0.16);
}


/* =========================================================
   5. Secondary Button
   ========================================================= */

.ats-btn--secondary .elementor-button {
	background: transparent;

	color: var(--ats-primary);

	border: 1px solid var(--ats-primary);

	box-shadow: inset 4px 0 0 var(--ats-accent);
}


.ats-btn--secondary .elementor-button:hover {
	background: var(--ats-primary);

	color: var(--ats-white);

	border-color: var(--ats-primary);

	box-shadow: inset 0 0 0 var(--ats-accent);
}


/* =========================================================
   6. Secondary Button - Dark Background
   ========================================================= */

.ats-btn--light .elementor-button {
	background: transparent;

	color: var(--ats-white);

	border: 1px solid rgba(255, 255, 255, 0.65);

	box-shadow: inset 4px 0 0 var(--ats-accent);
}


.ats-btn--light .elementor-button:hover {
	background: var(--ats-white);

	color: var(--ats-primary);

	border-color: var(--ats-white);

	box-shadow: none;
}


/* =========================================================
   7. WhatsApp Button
   ========================================================= */

.ats-btn--whatsapp .elementor-button {
	background: var(--ats-whatsapp);

	color: var(--ats-white);

	border: 1px solid var(--ats-whatsapp);
}


.ats-btn--whatsapp .elementor-button:hover {
	background: var(--ats-whatsapp-hover);

	border-color: var(--ats-whatsapp-hover);

	color: var(--ats-white);

	transform: translateY(-2px);

	box-shadow:
		0 8px 20px rgba(37, 211, 102, 0.20);
}


/* =========================================================
   8. Button Icon Animation
   ========================================================= */

.ats-btn .elementor-button-icon {
	transition: transform var(--ats-btn-transition);
}


.ats-btn .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}


/* =========================================================
   9. Astra Header CTA
   ========================================================= */

/**
 * Astra Header Builder:
 * Button 1
 */

.ast-header-button-1 .ast-custom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 10px 20px;

	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2em;

	color: var(--ats-white);

	background: var(--ats-accent);

	border: 1px solid var(--ats-accent);
	border-radius: var(--ats-btn-radius);

	transition:
		background-color var(--ats-btn-transition),
		border-color var(--ats-btn-transition),
		color var(--ats-btn-transition),
		transform var(--ats-btn-transition);
}


.ast-header-button-1 .ast-custom-button:hover {
	background: var(--ats-primary);
	border-color: var(--ats-primary);

	color: var(--ats-white);

	transform: translateY(-1px);
}


.ast-header-button-1 .ast-custom-button:focus-visible {
	outline: 3px solid rgba(242, 140, 40, 0.35);
	outline-offset: 3px;
}


/* =========================================================
   10. Tablet
   ========================================================= */

@media (max-width: 1024px) {

	:root {
		--ats-section-space: 64px;
	}


	.ats-btn .elementor-button {
		padding-left: 22px;
		padding-right: 22px;
	}

}


/* =========================================================
   11. Mobile
   ========================================================= */

@media (max-width: 767px) {

	:root {
		--ats-section-space: 48px;
	}


	.ats-btn .elementor-button {
		min-height: var(--ats-btn-height-mobile);

		padding:
			11px
			var(--ats-btn-padding-x-mobile);

		font-size: 15px;
	}


	/**
	 * Add ats-btn--mobile-full only where
	 * a full-width mobile CTA is required.
	 */

	.ats-btn--mobile-full,
	.ats-btn--mobile-full .elementor-button-wrapper,
	.ats-btn--mobile-full .elementor-button {
		width: 100%;
	}


	.ast-header-button-1 .ast-custom-button {
		min-height: 44px;
		padding: 9px 18px;
	}

}


/* =========================================================
   12. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}


	.ats-btn .elementor-button,
	.ats-btn .elementor-button-icon,
	.ast-header-button-1 .ast-custom-button {
		transition: none;
	}


	.ats-btn .elementor-button:hover,
	.ats-btn .elementor-button:hover .elementor-button-icon,
	.ast-header-button-1 .ast-custom-button:hover {
		transform: none;
	}

}