/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
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,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  }

/* Override the global "list-style: none" rule ONLY for the #about section */

#about ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#about ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#about ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #commercial section */

#commercial ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#commercial ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#commercial ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #maintenance section */

#maintenance ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#maintenance ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#maintenance ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #deep-clean section */

#deep-clean ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#deep-clean ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#deep-clean ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #machine-polish section */

#machine-polish ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#machine-polish ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#machine-polish ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #caravans-motorhomes section */
#caravans-motorhomes ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#caravans-motorhomes ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#caravans-motorhomes ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #terms-and-conditions section */
#terms-and-conditions ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#terms-and-conditions ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#terms-and-conditions ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #important-information section */
#important-information ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#important-information ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#important-information ul li::marker {
  color: #c4022f;
}

/* Override the global "list-style: none" rule ONLY for the #payment-methods section */
#payment-methods ul {
  /* Re-enable default bullets */
  list-style-type: disc; 
  /* Add back some margin so the bullets have space from the left edge */
  margin-left: 20px; 
}

#payment-methods ul li {
  /* Add vertical spacing between list items (optional) */
  margin-bottom: 10px; 
  line-height: 25px;
}

/* Color the marker using the modern method */
#payment-methods ul li::marker {
  color: #c4022f;
}


header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 16px;
  line-height: 25px;
  color: #2a2a2a;
}

/* 
h1 {
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 60px;
  margin-bottom: 20px;
}
*/
/* Ensure it looks good on mobile phones */
@media (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 40px;
  }
}
/*
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #c4022f;
  color: #fff;
}

::-moz-selection {
  background: #c4022f;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-white-button a {
  font-size: 13px;
  color: #c4022f;
  background-color: #fff;
  padding: 12px 25px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.main-white-button a:hover {
  opacity: 0.9;
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h6 {
  position: relative;
  font-size: 30px;
  color: #c4022f;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
 
  padding-bottom: 12px;
}

.section-heading h2 {
  line-height: 20px;
  margin-top: 20px;
  margin-bottom: 18px; 
  font-size: 20px;
  font-weight: 500;
  color: #2a2a2a;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #c4022f!important;
}

.background-header .nav li a.active {
  color: #c4022f!important;
}

.header-area {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #c4022f!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #c4022f!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #c4022f!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #c4022f;
}

/* ============================================
   MOBILE HEADER & NAVIGATION FIXES
   ============================================ */

/* MOBILE STYLES (767px and below) */
@media (max-width: 767px) {
  /* Fix header positioning on mobile */
  .header-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    background-color: #fff !important;
    z-index: 1000 !important;
    padding: 0 15px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  }
  
  .background-header {
    height: 70px !important;
    top: 0 !important;
  }
  
  .header-area .main-nav .logo {
    line-height: 70px !important;
    font-size: 22px !important;
    float: left !important;
    margin: 0 !important;
    color: #1e1e1e !important;
  }
  
  .background-header .main-nav .logo {
    line-height: 70px !important;
  }
  
  /* Hamburger menu button */
  .header-area .main-nav .menu-trigger {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 15px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-indent: -9999px !important;
  }
  
  .background-header .main-nav .menu-trigger {
    top: 20px !important;
  }
  
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after {
    width: 30px !important;
    height: 3px !important;
    background-color: #1e1e1e !important;
    position: absolute !important;
    left: 0 !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
  }
  
  .header-area .main-nav .menu-trigger span {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .header-area .main-nav .menu-trigger span:before {
    top: -8px !important;
    width: 30px !important;
  }
  
  .header-area .main-nav .menu-trigger span:after {
    top: 8px !important;
    width: 30px !important;
  }
  
  .header-area .main-nav .menu-trigger.active span {
    background: transparent !important;
  }
  
  .header-area .main-nav .menu-trigger.active span:before {
    transform: rotate(45deg) !important;
    top: 0 !important;
  }
  
  .header-area .main-nav .menu-trigger.active span:after {
    transform: rotate(-45deg) !important;
    top: 0 !important;
  }
  
  /* Mobile navigation menu */
  .header-area .main-nav .nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #fff !important;
    display: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 70px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    z-index: 999 !important;
  }
  
  .header-area .main-nav .nav.active {
    display: block !important;
  }
  
  .header-area .main-nav .nav li {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    clear: both !important;
  }
  
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee !important;
  }
  
  .header-area .main-nav .nav li a {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 20px !important;
    color: #1e1e1e !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
    background: #fff !important;
    text-transform: capitalize !important;
    border: none !important;
  }
  
  .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a.active {
    color: #c4022f !important;
    background: #f9f9f9 !important;
  }
  
  /* MOBILE DROPDOWN COMPLETE FIX */
  .header-area .main-nav .nav li.submenu {
    position: relative !important;
  }
  
  .header-area .main-nav .nav li.submenu > a {
    padding-right: 50px !important;
    position: relative;
  }
  
  /* Add dropdown arrow to the link */
  .header-area .main-nav .nav li.submenu > a::after {
    content: "\f107" !important;
    font-family: "FontAwesome" !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: #1e1e1e !important;
    transition: transform 0.3s ease !important;
    z-index: 10 !important;
  }
  
  .header-area .main-nav .nav li.submenu.open > a::after {
    transform: translateY(-50%) rotate(180deg) !important;
  }
  
  /* Hide the desktop arrow */
  .header-area .main-nav .nav li.submenu:after {
    display: none !important;
  }
  
  /* Mobile dropdown menu - FIXED HEIGHT ISSUE */
  .header-area .main-nav .nav li.submenu ul {
    position: static !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f9f9f9 !important;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: block !important;
    z-index: 1 !important;
  }
  
  /* When dropdown is open - AUTO HEIGHT SOLUTION */
  .header-area .main-nav .nav li.submenu.open ul {
    max-height: 500vh !important; /* Use viewport height for flexibility */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Dropdown items */
  .header-area .main-nav .nav li.submenu ul li {
    border-bottom: none !important;
    border-top: 1px solid #eee !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
  }
  
  .header-area .main-nav .nav li.submenu ul li a {
    padding-left: 40px !important;
    background: #f9f9f9 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 45px !important;
    line-height: 45px !important;
    color: #2a2a2a !important;
    border-bottom: 1px solid #eee !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
  }
  
  .header-area .main-nav .nav li.submenu ul li a:hover {
    background: #f0f0f0 !important;
    color: #c4022f !important;
  }
  
  /* Disable hover effects on mobile */
  .header-area .main-nav .nav li.submenu:hover ul {
    max-height: 0 !important;
  }
  
  /* Content spacing */
  body {
    padding-top: 70px !important;
  }
  
  #top {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .header-area,
  .background-header,
  .main-nav,
  .nav,
  .nav li {
    max-width: 100vw !important;
  }
  
  /* Clean up existing mobile styles */
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 70px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: left;
  }
  
  .header-area .container {
    padding: 0px;
  }
  
  .header-area .logo {
    margin-left: 0;
  }
  
  .header-area .main-nav {
    overflow: visible;
  }
  
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    margin-left: 0px;
  }
  
  .header-area.header-sticky .nav {
    margin-top: 70px !important;
  }
  
  /* Clear float fix to prevent overlap */
  .header-area .main-nav .nav:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Make sure dropdowns don't overlap next items */
  .header-area .main-nav .nav li.submenu.open {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Last item fix */
  .header-area .main-nav .nav li:last-child {
    border-bottom: 1px solid #eee !important;
  }
}

/* EXTRA GUARANTEE FIX FOR DROPDOWN HEIGHT */
@media (max-width: 767px) {
  .header-area .main-nav .nav li.submenu.open ul {
    max-height: 10000px !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Remove any inline max-height styles */
  .header-area .main-nav .nav li.submenu ul[style*="max-height"] {
    max-height: 0 !important;
  }
  
  .header-area .main-nav .nav li.submenu.open ul[style*="max-height"] {
    max-height: 10000px !important;
  }
}

/* TABLET STYLES (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-area {
    height: 80px !important;
  }
  
  .header-area .main-nav .logo {
    line-height: 80px !important;
  }
  
  .header-area .main-nav .nav li {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .header-area .main-nav .nav li a {
    font-size: 14px !important;
  }
  
  .header-area .main-nav .menu-trigger {
    display: none !important;
  }
  
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* Ensure desktop navigation works */
@media (min-width: 768px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
  
  .header-area .main-nav .menu-trigger {
    display: none !important;
  }
}

/* Desktop specific dropdown reset */
@media (min-width: 768px) {
  .header-area .main-nav .nav li.submenu > a::after {
    display: none !important;
  }
  
  .header-area .main-nav .nav li.submenu:after {
    display: block !important;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

#top {
  padding-top: 100px;
}

#top .col-lg-4,
#top .col-lg-8 {
  padding: 0px;
}

#top .left-content {
  background-image: url(../images/top-left-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}

#top .left-content .inner-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 40%;
}

#top .left-content h4 {
  
  color: #fff;
  font-size: 36px;
  font-weight: 600;
}

#top .left-content h6 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 3px;
  margin-top: 5px;
}

#top .left-content .main-white-button  {
  margin-top: 25px;
  margin-bottom: 10px;
}

#top .left-content .main-white-button a {
  display: inline-block;
}

/* ==== Main CSS === */
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
  height:100%;
  max-height: 700px;
  background:#000;
}

/* Remove slider arrows */
.Modern-Slider .NextArrow,
.Modern-Slider .PrevArrow {
  display: none !important;
}

ul.slick-dots {
  display: none!important;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {background:#000;}


/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}


/*
---------------------------------------------
about
---------------------------------------------
*/

#about {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#about .section-heading h2 {
  padding-right: 120px;
}

#about img {
  width: 100%;
  overflow: hidden;
}

#about .left-text-content p {
  margin-bottom: 15px;
}

#about .right-content {
  margin-left: 30px;
}

#about .right-content .thumb {
  position: relative;
}

#about .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#about .right-content .thumb a:hover {
  opacity: .9;
}


/*
---------------------------------------------
deep clean
---------------------------------------------
*/

#deep-clean {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#deep-clean .section-heading h2 {
  padding-right: 120px;
}

#deep-clean img {
  width: 100%;
  overflow: hidden;
}

#deep-clean .left-text-content p {
  margin-bottom: 15px;
}

#deep-clean .right-content {
  margin-left: 30px;
}

#deep-clean .right-content .thumb {
  position: relative;
}

#deep-clean .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#deep-clean .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
maintenance
---------------------------------------------
*/

#maintenance {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#maintenance .section-heading h2 {
  padding-right: 120px;
}

#maintenance img {
  width: 100%;
  overflow: hidden;
}

#maintenance .left-text-content p {
  margin-bottom: 15px;
}

#maintenance .right-content {
  margin-left: 30px;
}

#maintenance .right-content .thumb {
  position: relative;
}

#maintenance .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#maintenance .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
commercial
---------------------------------------------
*/

#commercial {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#commercial .section-heading h2 {
  padding-right: 120px;
}

#commercial img {
  width: 100%;
  overflow: hidden;
}

#commercial .left-text-content p {
  margin-bottom: 15px;
}

#commercial .right-content {
  margin-left: 30px;
}

#commercial .right-content .thumb {
  position: relative;
}

#commercial .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#commercial .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
machine polish
---------------------------------------------
*/

#machine-polish {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#machine-polish .section-heading h2 {
  padding-right: 120px;
}

#machine-polish img {
  width: 100%;
  overflow: hidden;
}

#machine-polish .left-text-content p {
  margin-bottom: 15px;
}

#machine-polish .right-content {
  margin-left: 30px;
}

#machine-polish .right-content .thumb {
  position: relative;
}

#machine-polish .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#machine-polish .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
caravans and motorhomes
---------------------------------------------
*/

#caravans-motorhomes {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#caravans-motorhomes .section-heading h2 {
  padding-right: 120px;
}

#caravans-motorhomes img {
  width: 100%;
  overflow: hidden;
}

#caravans-motorhomes .left-text-content p {
  margin-bottom: 15px;
}

#caravans-motorhomes .right-content {
  margin-left: 30px;
}

#caravans-motorhomes .right-content .thumb {
  position: relative;
}

#caravans-motorhomes .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#caravans-motorhomes .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
terms and conditions
---------------------------------------------
*/

#terms-and-conditions {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#terms-and-conditions .section-heading h2 {
  padding-right: 120px;
}

#terms-and-conditions img {
  width: 100%;
  overflow: hidden;
}

#terms-and-conditions .left-text-content p {
  margin-bottom: 15px;
}

#terms-and-conditions .right-content {
  margin-left: 30px;
}

#terms-and-conditions .right-content .thumb {
  position: relative;
}

#terms-and-conditions .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#terms-and-conditions .right-content .thumb a:hover {
  opacity: .9;
}


/*

---------------------------------------------
important-information
---------------------------------------------
*/

#important-information {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#important-information .section-heading h2 {
  padding-right: 120px;
}

#important-information img {
  width: 100%;
  overflow: hidden;
}

#important-information .left-text-content p {
  margin-bottom: 15px;
}

#important-information .right-content {
  margin-left: 30px;
}

#important-information .right-content .thumb {
  position: relative;
}

#important-information .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#important-information .right-content .thumb a:hover {
  opacity: .9;
}


/*
---------------------------------------------
payment methods
---------------------------------------------
*/

#payment-methods {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#payment-methods .section-heading h2 {
  padding-right: 120px;
}

#payment-methods img {
  width: 100%;
  overflow: hidden;
}

#payment-methods .left-text-content p {
  margin-bottom: 15px;
}

#payment-methods .right-content {
  margin-left: 30px;
}

#payment-methods .right-content .thumb {
  position: relative;
}

#payment-methods .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #c4022f;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#payment-methods .right-content .thumb a:hover {
  opacity: .9;
}


/*


---------------------------------------------
reservation
--------------------------------------------- 
*/

#contact .section-heading {
  margin-bottom: 30px;
}

#contact .section-heading h6 {
  color: #fff;
}

#contact .section-heading h2 {
  color: #fff;
  font-weight: 700;
}

#contact .section-heading h6:before {
  background-color: #fff;
}

#contact p {
  color: #fff;
  margin-bottom: 25px;
}

#contact {
  margin-top: 120px;
  padding: 120px 0px;
  background-image: url(../images/contact.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact .phone,
#contact .message {
  background-color: rgb(0 0 0 / 0);
  border-radius: 3px;
  text-align: center;
  padding: 0px 10px 10px 0px;
}

#contact .phone i,
#contact .message i {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: #c4022f;
  border-radius: 50%;
  font-size: 24px;
  margin-top: -35px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#contact .phone h4,
#reservation .message h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

#contact .phone span a,
#contact .message span a {
  font-size: 14px;
  color: #2a2a2a;
  transition: all .3s;
}

#contact .phone span a:hover,
#contact .message span a:hover {
  color: #c4022f;
}

#contact {
  margin-left: 0px;
  padding: 45px 30px;
  background-color: f5f0f1;
  border-radius: 5px;
}

#contact h4 {
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  color: #2a2a2a;
  margin-bottom: 30px;
}

.datepicker-days {
  padding: 30px;
  cursor: pointer;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  color: #2a2a2a;
  font-size: 14px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  outline: none;
  padding-top: 3px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 15px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #c4022f;
}

.contact-form button {
  margin-top: -10px;
  font-size: 13px;
  color: #fff;
  background-color: #c4022f;
  padding: 12px 25px;
  width: 100%;
  box-shadow: none;
  border: none;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.contact-form button:hover {
  opacity: .9;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #2a2a2a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #2a2a2a;
}

.contact-form ::placeholder {
  color: #2a2a2a;
}

/*



/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
  margin-top: 0px;
  padding: 50px 0px;
  background-color: #c4022f;
}

footer .left-text-content p {
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
  text-align: right;
}

footer .right-text-content p {
  color: #fff;
  font-size: 14px;
  margin-right: 15px;
  text-transform: uppercase;
}


footer .right-text-content {
  text-align: left;
  margin-top: 10px;
}

footer .logo {
  text-align: center;
}

footer .right-text-content ul li {
  display: inline-block;
  margin-left: 15px;
}
footer .right-text-content ul li:first-child {
  margin-left: 0px;
}


footer .right-text-content ul li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  color: #c4022f;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

footer .right-text-content ul li a:hover {
  color: #2a2a2a;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 992px) {
  #top {
    padding-top: 100px;
    height: auto;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 3px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 15px;
  }
  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }
  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0px;
  }
  #top .left-content {
    text-align: center;
    padding: 25% 0px;
  }
  #about .right-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  
  #contact .phone {
    margin-bottom: 60px;
  }
  #contact {
    margin-left: 0px;
    margin-top: 30px;
  }
   footer .right-text-content {
    text-align: center;
    margin-bottom: 30px;
  }
  footer .left-text-content p {
    text-align: center;
    margin-top: 30px;
  }
}

/* Banner mobile fixes - FIXED FOR PROPER MOBILE SIZE */
@media (max-width: 767px) {
  #top {
    padding-top: 0 !important;
  }
  
  #top .left-content {
    text-align: center;
    padding: 60px 20px !important;
    height: auto !important;
    min-height: 300px !important;
  }
  
  #top .left-content .inner-content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    padding: 20px !important;
  }
  
  #top .left-content h4 {
    font-size: 28px !important;
    margin-bottom: 15px !important;
  }
  
  #top .left-content h6 {
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }
  
  /* Adjust slider arrows for mobile - already hidden */
  .Modern-Slider .NextArrow,
  .Modern-Slider .PrevArrow {
    display: none !important;
  }
  
  /* FIXED: Proper mobile slider height - much smaller */
  .Modern-Slider .item .img-fill {
    height: 300px !important; /* Much more reasonable mobile height */
    max-height: 300px !important;
    min-height: 250px !important;
  }
  
  /* FIX FOR BLACK BAR - SIMPLIFIED */
  .Modern-Slider .slick-list {
    height: 300px !important;
  }
  
  .Modern-Slider .slick-track {
    height: 300px !important;
  }
  
  .Modern-Slider .slick-slide {
    height: 300px !important;
  }
  
  .Modern-Slider .item {
    height: 300px !important;
  }
  
  /* Ensure images cover properly without black bars */
  .Modern-Slider .img-fill img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
  }
  
  /* Fix the Modern-Slider container */
  .Modern-Slider {
    height: 300px !important;
  }
}

/* Smaller mobile devices - EVEN SMALLER */
@media (max-width: 480px) {
  /* Even smaller slider on very small devices */
  .Modern-Slider .item .img-fill {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  
  .Modern-Slider .slick-list,
  .Modern-Slider .slick-track,
  .Modern-Slider .slick-slide,
  .Modern-Slider .item {
    height: 250px !important;
  }
  
  .Modern-Slider {
    height: 250px !important;
  }
  
  #top .left-content h4 {
    font-size: 24px !important;
  }
  
  #top .left-content {
    padding: 40px 15px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 992px) {
  .Modern-Slider .item .img-fill {
    height: 500px !important;
    max-height: 500px !important;
  }
  
  .Modern-Slider .slick-list,
  .Modern-Slider .slick-track,
  .Modern-Slider .slick-slide,
  .Modern-Slider .item {
    height: 500px !important;
  }
  
  .Modern-Slider {
    height: 500px !important;
  }
}



#preloader {
  overflow: hidden;
  background-color: #c4022f;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}