/* AUTODISTRIBUTION — site stylesheet
   Layout/structure modeled after used-farm-tractor.com, rebranded. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #757575;
	background-color: #fff;
	overflow-x: hidden;
}

a { color: #303441; text-decoration: none; }
a:hover { color: #00a8ff; }

img { max-width: 100%; height: auto; border: 0; display: inline-block; }

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', Arial, sans-serif; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.clear { clear: both; }

/* ---------- Header ---------- */
.header {
	width: 100%;
	background-color: #f0f0f0;
	border-top: 7px solid #e6e6e6;
	position: relative;
	z-index: 999;
}

.header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 15px;
	padding-bottom: 15px;
}

.logo #logo-main a { display: block; }
.logo .site-title {
	font-size: 26px;
	font-weight: 700;
	color: #2c2c2c;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.logo .site-title span { color: #00a8ff; }
.logo .site-description {
	margin: 2px 0 0;
	font-size: 12px;
	color: #8e8d8d;
}

.main-navigation { width: 100%; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #303441;
}
.main-navigation li { position: relative; }
.main-navigation li a {
	display: block;
	padding: 16px 18px;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.main-navigation li a:hover,
.main-navigation li.current-menu-item > a { background-color: #00a8ff; color: #fff; }

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #3a3c41;
	z-index: 200;
	flex-direction: column;
}
.main-navigation li:hover .sub-menu { display: flex; }
.main-navigation .sub-menu li a { padding: 12px 18px; font-size: 13px; white-space: nowrap; }

.menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}
.menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: #2c2c2c;
}

/* ---------- Hero / slider ---------- */
.slider-main { position: relative; background: #222; }
.top-bar {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	z-index: 20;
	font-family: 'Roboto', sans-serif;
	padding: 16px 20px;
}
.top-bar h1 { font-size: 1px; padding: 0; margin: 0; line-height: normal; }
.top-bar .hero-logo { max-width: 240px; margin: 0 auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.top-bar .hero-tagline { font-size: 16px; margin: 14px 0; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.top-bar .hero-actions a {
	font: 700 16px 'Roboto', sans-serif;
	padding: 10px 30px;
	margin: 6px 8px;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 4px;
	color: #fff;
	background-color: #00a8ff;
	box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.top-bar .hero-actions a.secondary { background-color: rgba(255,255,255,.15); border: 1px solid #fff; }

.hero-slider { position: relative; overflow: hidden; height: 450px; background: #000; }
.hero-slider .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero-slider .slide.active { opacity: 1; }
.hero-slider .slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider .slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* ---------- Sections ---------- */
.menu_page { padding: 60px 0; }
.menu_page.bg-alt { background-color: #f7f7f7; }

h2.section-title {
	font-weight: 700;
	font-size: 32px;
	padding: 0 0 2rem;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase;
	color: #404040;
	line-height: 1.35;
}

/* Product / news grid */
.list-item { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.news-box { width: 25%; padding: 10px; }
.news-box .inner { border: 1px solid #f1f1f1; box-shadow: 1px 0 6px rgba(0,0,0,.08); height: 100%; background: #fff; }
.news-box figure { margin: 0; overflow: hidden; }
.news-box img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .4s ease; }
.news-box a:hover img { transform: scale(1.05); }
.news-box h2 { font-size: 14px; margin: 10px 12px 4px; line-height: 1.3; text-transform: none; text-align: left; font-weight: 500; }
.news-box h2 a { color: #333; }
.news-box .date { display: block; margin: 0 12px 12px; font-size: 12px; color: #aaa; }

/* Services */
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.services-box {
	width: calc(25% - 20px);
	min-width: 220px;
	background: #fff;
	border: 1px solid #f5f3f3;
	padding: 20px 20px 70px;
	position: relative;
	text-align: center;
	transition: .3s;
}
.services-box:hover { background-color: #f7f6f6; }
.services-box img { border-radius: 40px; margin-bottom: 1rem; width: 100%; max-width: 220px; aspect-ratio: 4/3; object-fit: cover; }
.services-box h3 { font-size: 20px; color: #2c2c2c; margin: 10px 0; }
.services-box p { font-size: 14px; }
.services-box .read-more {
	color: #fff;
	background-color: #303441;
	border-radius: 4px;
	position: absolute;
	bottom: 20px; left: 20px; right: 20px;
	padding: .6em 0;
	font: 300 13px 'Roboto', sans-serif;
	text-transform: uppercase;
	text-align: center;
}
.services-box:hover .read-more { background: #00a8ff; }

.contact-banner { text-align: center; padding-top: 40px; }
.contact-banner h3 { color: #404040; font-weight: 400; font-size: 28px; padding-bottom: 20px; }
.contact-banner strong { display: block; font-size: 22px; margin-bottom: 20px; }
.contact-button, a.contact-button {
	font: 700 18px 'Roboto', sans-serif;
	padding: 12px 34px;
	margin: 6px 8px;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 4px;
	color: #fff !important;
	background-color: #00a8ff;
}
.contact-banner > div > a:not(.contact-button) { margin-left: 10px; font-weight: 700; text-transform: uppercase; }

/* Latest news list */
.list-news { list-style: none; margin: 0; padding: 0; max-width: 760px; margin: 0 auto; }
.list-news li { border-bottom: 1px solid #eee; }
.list-news li a { display: flex; gap: 20px; padding: 16px 4px; align-items: baseline; }
.list-news .date { color: #00a8ff; font-weight: 700; min-width: 100px; }
.list-news .ttl { margin: 0 0 4px; font-size: 16px; color: #333; }
.list-news .txt { margin: 0; font-size: 13px; color: #999; }

/* About / welcome */
.about-media { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.about-media iframe { width: 100%; max-width: 540px; height: 300px; border: 0; }

.welcome-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; justify-content: center; }
.welcome-flex figure { margin: 0; flex: 0 0 280px; }
.welcome-flex figure img { border-radius: 40px; }
.welcome-flex .welcome-text { flex: 1 1 400px; }
.welcome-flex h4 { font-size: 22px; color: #333; }

/* Our products gallery */
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery-grid figure { width: 25%; margin: 0; padding: 0 5px 10px; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Social */
.social-icons { text-align: center; }
.social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	background: #303441;
	color: #fff;
	margin: 0 8px;
	font-size: 20px;
}
.social-icons a:hover { background: #00a8ff; }

/* ---------- Footer ---------- */
#footer-wrapper { background-color: #fafafa; padding: 55px 0 0; }
.footer { display: flex; flex-wrap: wrap; gap: 30px; padding: 0 20px 40px; max-width: 1140px; margin: 0 auto; }
.footer-col { flex: 1 1 300px; }
.footer-col h2 { color: #404040; font-size: 18px; text-transform: none; text-align: left; padding: 0 0 10px; }
.footer-col p { font-size: 13px; line-height: 1.6; }
.footer-col a { color: #00a8ff; }
.phone-no p { margin: 4px 0; }

.copyright-wrapper { background-color: #f4f4f4; padding: 20px 0; text-align: center; }
.copyright-txt { font-size: 12px; color: #999; }

/* ---------- Inner page layout ---------- */
.page-hero {
	background: #303441;
	color: #fff;
	text-align: center;
	padding: 50px 20px;
}
.page-hero h1 { margin: 0; font-size: 30px; text-transform: uppercase; }
.page-content { max-width: 900px; margin: 0 auto; padding: 50px 20px; }
.page-content h2 { color: #2c2c2c; font-size: 22px; text-transform: uppercase; margin-top: 40px; }
.page-content h3 { color: #333; font-size: 18px; }
.page-content img { border-radius: 6px; }
.page-content .float-img { float: left; margin: 0 20px 15px 0; max-width: 300px; }
.page-content table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.page-content table td { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: top; }
.page-content table td:first-child { width: 200px; font-weight: 700; color: #333; }
.step-box { border-left: 8px solid #00a8ff; padding: 14px 20px; margin: 16px 0; background: #f7f7f7; }

/* Products listing page grid */
.products-gallery { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 20px 0; }
.products-gallery img { width: 220px; height: 165px; object-fit: cover; border-radius: 4px; }

/* Product detail page */
.spec_sheet { max-width: 756px; margin: 40px auto; padding: 20px; border: 2px solid rgba(127,127,127,.3); border-radius: 10px; }
.spec_sheet table { width: 100%; }
.spec_sheet th { text-align: left; font-size: 15px; color: #333; padding: 8px 10px; width: 160px; border-bottom: 1px solid #eee; }
.spec_sheet td { font-size: 15px; padding: 8px 10px; border-bottom: 1px solid #eee; }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 0; }
.product-thumbs img { width: 180px; height: 180px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.15); }
.purchase-btn-wrap { text-align: center; margin: 30px 0; }
.purchase-btn {
	display: inline-block;
	font-size: 20px;
	padding: 14px 50px;
	border-radius: 8px;
	background-color: #f7880b;
	border: 2px solid #dc7707;
	color: #fff !important;
	text-align: center;
}
.purchase-btn:hover { background-color: #dc7707; color: #fff !important; }

/* Contact / inquiry form */
.contact-form h3 { font-size: 15px; margin: 20px 0 6px; color: #333; }
.contact-form .required { color: #e02020; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form input[type=url],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
}
.contact-form .checkbox-list { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.contact-form .checkbox-list label { font-size: 14px; font-weight: normal; }
.contact-form button[type=submit] {
	background-color: #303441;
	color: #fff;
	border: 0;
	padding: 14px 50px;
	border-radius: 6px;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}
.contact-form button[type=submit]:hover { background-color: #00a8ff; }
.contact-info-box { background: #f7f7f7; border-radius: 8px; padding: 20px 25px; margin-bottom: 30px; }
.contact-info-box p { margin: 6px 0; }

/* Site map */
.sitemap-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.sitemap-cols ul { list-style: none; padding: 0; }
.sitemap-cols li { padding: 4px 0; }

/* Responsive */
@media (max-width: 900px) {
	.services-box { width: calc(50% - 20px); }
	.news-box { width: 50%; }
	.gallery-grid figure { width: 50%; }
}
@media (max-width: 700px) {
	.menu-toggle { display: block; }
	.main-navigation ul { display: none; flex-direction: column; }
	.main-navigation.open ul { display: flex; }
	.main-navigation .sub-menu { position: static; display: flex !important; background: #24262b; }
	.hero-slider { height: 260px; }
	.page-content .float-img { float: none; margin: 0 0 15px; max-width: 100%; }
	.page-content table td:first-child { width: auto; display: block; }
	.page-content table td { display: block; width: 100%; }
}
@media (max-width: 480px) {
	.services-box { width: 100%; }
	.news-box { width: 100%; }
	.gallery-grid figure { width: 100%; }
}