﻿/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Sarala:wght@400;700&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/webfonts/fa-brands-400.woff2");
@import url("https://media.sandhills.com/CDN/CSS/Font-Awesome/7.0.0/css/all.min.css");

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

button,a {cursor:pointer;}
/*-------- BODY STYLES --------*/

body {
  font-family: "Sarala", sans-serif;
  box-sizing:border-box;
  font-style: normal;
   line-height: 1.5;
   overflow-x: hidden;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

.flex {display:flex;}

h1,h2,h3,h4,h5,h6 {font-family: "Schibsted Grotesk", sans-serif;}
/*--- BUTTON STYLES ---------------------*/
.yellow-button {width:100%;}
.yellow-button img{filter: invert(100%);transition:.3s;}

.yellow-button button{background: #FFCC00;color: #000;display: flex;align-items: center;width: 100%;border: unset;gap: 20px;border-radius: 10px;padding: 13px 30px;font-size: clamp(1rem, 0.9865rem + 0.0676vw, 1.0625rem);font-weight: 600;transition:.3s;}

.yellow-button button:hover {background:#2F7892;color:#fff;}
.yellow-button button:hover img {filter: invert(0%);}

.blue-button {width:100%;}
.blue-button button{background:#2F7892;color: #fff;display: flex;align-items: center;width: 100%;border: unset;gap: 20px;border-radius: 10px;padding: 18px 30px;font-size: clamp(1rem, 0.9865rem + 0.0676vw, 1.0625rem);font-weight: 600;justify-content: center;transition:.3s;}

.blue-button button:hover {background:#276379;color:#fff;}

.white-button {width:100%;}
.white-button button{background: #fff;color: #2F7892;display: flex;align-items: center;width: 100%;border: unset;gap: 20px;border-radius: 10px;padding: 18px 30px;font-size: clamp(1rem, 0.9865rem + 0.0676vw, 1.0625rem);font-weight: 600;justify-content: center;transition:.3s;}

.white-button button:hover {background:#FFCC00;color:#000;}

.header-buttons .white-button button{border-radius:10px 0 0 10px;padding: 24px 30px;}

.header-buttons .white-button button:hover {background:#2F7892;color:#fff;}
.header-buttons .blue-button button:hover {background:#276379;color:#fff;}

.header-buttons .blue-button button{border-radius:0 10px 10px 0;padding: 24px 30px;}

/*--- HEADER STYLES ---------------------*/
header {}

.header-buttons {    display: flex;
    justify-content: center;
    position: relative;
   width: 37%;
    margin: 0 auto;}

.floating-circle {position: absolute;top: 12%;color: #000;background: #FFCC00;border-radius: 100%;width: 100%;max-width: 55px;height: 51px;display: flex;align-items: center;justify-content: center;font-weight: 700;pointer-events: unset;}

/*---SWIPER -----------------*/

.swiper-slide img {width: 100% !important;object-fit:cover;}
.swiper {position:relative;background:#000;line-height:0;height:100%;}
.swiper-overlay {position: absolute;z-index: 4;background: rgba(21,34,39,60%);top: 0;width: 100%;height: 100%;}

span.small-heading {font-size: clamp(1.1875rem, 0.8rem + 2.0667vw, 3.125rem);}
.swiper-content h1 {font-size: clamp(1.875rem, 1.375rem + 2.6667vw, 4.375rem);line-height: 1;margin-bottom: 60px;}
.swiper-content {position: relative;top: 40%;display: flex;text-align: center;color: #fff;justify-content: center;line-height:1.5;flex-direction: column;box-sizing: border-box;}


.swiper {
  width: 100%;
  height: 1000px;

}

.swiper-slide {
  overflow: hidden; /* Vital to hide the scaling image edges */
  position: relative;
}

.zoom-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 7000s linear; /* Matches slide delay length */
}

/* The magic: Trigger zoom ONLY when the slide becomes active */
.swiper-slide-active .zoom-bg {
  transform: scale(1.1);
  transition: transform 6000ms ease-out;
}

/*---ANIMATIONS--------------------------------*/

.fadein {
  opacity: 0;
  transition: all 1.5s;
  transform: translate(0, 100px);
}

.fadein.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/*---BODY--------------------------------*/
 
/*---FLOATING BOXES STYLES -----------------*/
.box-wrapper {width: 100%;margin: 0 auto;display: flex;flex-direction: column;justify-content: space-between;gap: 30px;box-sizing: border-box;}

.floating-boxes {width: 90%;margin: 0 auto;}
.floating-boxes .wrapper.flex {position: relative;top:-110px;z-index:1;width: 100%;}

.box-1,.box-2 {width: 100%;padding: 0 6%;box-sizing: border-box;height: 400px;display: flex;align-items: center;}

.box-1 {border-radius:10px 0 0 10px;}
.box-2 {border-radius:0 10px 10px 0;}

.box-1 img,.box-2 img {object-fit: cover;width: 100%;height: 100%;max-width: 38px;}

.box-1 {background:#2F7892;color:#fff;}
.box-2 {background:#2a6279;color:#fff;}

.box-title {display: flex;gap: 20px;align-items:center;padding-bottom: 10px;}

/*-------- ABOUTSTYLES --------------------*/

.about-image img {width: 100%;object-fit: cover;border-radius:10px 0 0 10px;}

.floating-boxes .wrapper.flex {align-items: center;}

.about-content {width:100%;max-width: 44%;margin: 0 auto;padding: 0 2%;line-height: 1.5;}

.about-content h2{font-size: clamp(1.25rem, 0.9122rem + 1.6892vw, 2.8125rem);line-height: 1;color:#2F7892;margin-bottom:20px;}
.about-content p{border-left: 6px solid #FFCC00;padding-left: 20px;}

.about-floating {width: 90%;position:relative;margin: 0 auto;background:#fff;top: -11%;}

.about-section {position: relative;width: 100%;margin: 6% auto 10%;}

.about-section .rectangle {background: #2F7892;position: absolute;width:100%;height:80%;top: 10%;}

.about-image {width:100%;max-width: 42%;}

.about-floating .wrapper.flex {display: flex;gap: 30px;align-items: center;box-shadow: 0 0 13px #0006;line-height: 0;border-radius: 10px;}

.about-floating a.blue-button button{margin-top: 30px;}
/*-------- FORM STYLES --------------------*/

/*-------- FORM STYLES ---------*/




/*-------- FOOTER STYLES ----------------*/
footer{background:#152227;padding: 60px 0;}


.footer {display: flex;justify-content: space-between;align-items: center;gap: 30px;}
.footer a, .footer p {color:#fff;transition:.3s;}

.footer a:hover {color:#FFCC00;}

.footer-cat > p {font-family: "Schibsted Grotesk", sans-serif;font-size: clamp(1.0625rem, 1.0306rem + 0.1596vw, 1.25rem);font-weight: 600;margin-bottom: 10px;}

.footer-categories {display: flex;width: 100%;max-width: 70%;justify-content: center;flex: 5;gap: 7%;}

ul.socials-list {display:flex;}

.footer-logo {display: flex;background: #fff;padding: 43px 5%;border-radius: 0 10px 10px 0;width: 100%;justify-content: center;align-items: center;flex: 3;flex-direction: column;color: #000;gap: 12px;box-sizing: border-box;}

ul.socials-list li a i{font-size:30px;margin-right:unset !important;}
.footer-cat ul li a i {margin-right:10px;}
.footer-cat ul li a {font-size: 17px;  font-family: "Sarala", sans-serif;}
.footer-cat ul li {margin-bottom:5px;}

.footer-cat.socials ul{justify-content:center;gap:5px;}
.footer-cat.socials p {text-align:center;}

.footer-logo img {width:100%;height:100%;max-width: 38%;}
.footer-logo p {color:#000;font-weight:800;  font-family: "Sarala", sans-serif;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.inventory-header {background:#194355;height: 530px;position: relative;}

.inventory-heading{display: flex;align-items: center;justify-content: center;position: absolute;bottom: 23%;left: 0;right: 0;font-family: "Schibsted Grotesk", sans-serif;}
.inventory-text {color: #fff;font-size: clamp(1.875rem, 1.375rem + 2.6667vw, 4.375rem);font-weight:700;}

.column3.left ul li a {color:#000 !important;}

div.shipping.listing-widget__shipping a {background:#2F7892!important;color:#fff !important;}


button.calc-button,.detail__machine-location-address,span.detail__machine-location-address,.detail__machine-location,a.dealer-contact__link,.dealer-contact__videochat,.detail__machine-location,span.detail__search-results-text,.detail__machine-location a {color:#000 !important;}

a.view-listing-details-link {background: #FFCC00!important;color:#000 !important;}
.detail__breadcrumbs,.ground-bcrumbs{padding-top: 40px;}
/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1700px) {
	.header-buttons {width: 54%;}
}

@media only screen and (max-width: 1300px) {
	.box-1, .box-2 {height: 390px;}
}


@media only screen and (max-width: 1100px) {
	.header-buttons {width: 74%;}
}


@media only screen and (max-width: 1000px) {
	.floating-boxes .wrapper.flex {flex-direction: column;}
	.floating-boxes {width:90%;}
	.box-1,.box-2 {padding: 8% 7%;}
	.box-1 {border-radius:10px 10px 0 0;}
	.box-2 {border-radius:0 0 10px 10px;}
	.box-wrapper{width: 90%;}
	.footer {flex-direction: column;gap: 50px;}
	.footer-categories {max-width:90%;}
	footer {padding: 0 0 60px;}
	.footer-logo img {max-width: 28%;}
	.footer-logo {border-radius: 0;flex-direction:column;}
	.swiper-content {width: 90%;margin: 0 auto;}
	.header-buttons {width: 100%;}
	.about-floating .wrapper.flex {flex-direction: column-reverse;}
	.about-floating .wrapper.flex {gap: 60px;}
	.about-image {width: 100%;max-width: 90%;padding-bottom: 30px;}
	.about-content {padding: 30px 0 0;max-width: 90%;}
	.about-content p {border-left: unset;padding-left: unset;}
}

@media only screen and (max-width: 900px) {
	.inventory-header {height: 230px;}
}

@media only screen and (max-width: 800px) {
	.header-buttons {width: 100%;}
	.footer-categories {flex-direction: column;gap: 30px;}
	.footer-cat.socials p {text-align: left;}
	.footer-cat.socials ul {justify-content:start;}
	.footer-logo p {width:90%;margin:0 auto;text-align:center;}
	.swiper-content {top: 15%;}
	.swiper {height: 640px;}
	.inventory-heading {bottom: 37%;}
}

@media only screen and (max-width: 600px) {
	.header-buttons {flex-direction:column;}
	.header-buttons .white-button button {border-radius: 10px 10px 0 0;padding: 41px 30px;}
	.header-buttons .blue-button button {border-radius: 0 0 10px 10px;padding: 41px 30px;}
	
	.floating-circle {top: 38%;height: 57px;max-width: 65px;margin: 0 auto;right: 0;left: 0;}
	
	.yellow-button button {background: #FFCC00;color: #000;display: flex;align-items: center;border: unset;gap: 20px;border-radius: 10px;padding: 18px 19px;font-size: clamp(1rem, 0.9865rem + 0.0676vw, 1.0625rem);font-weight: 600;transition: .3s;justify-content: center;}
	.yellow-button {width:unset;}
	.box-1, .box-2 {height:100%;}
}

@media only screen and (max-width: 500px) {
	.box-title {flex-direction: column;align-items: center;}
	.box-content {text-align: center;}
	.box-1,.box-2 {padding: 13% 7%;}
}








