@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
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;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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;
  list-style: none;
}

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

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -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: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  margin-bottom: -3px;
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Montserrat', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  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;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 35px;
  margin-bottom: 25px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h6 {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color: #8d99af;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 7px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-white-button a i {
  margin-right: 10px;
  width: 22px;
  height: 22px;
  background-color: #8d99af;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  line-height: 22px;
}

.main-white-button a:hover {
  background-color: #8d99af;
  color: #fff;
}

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

.background-header {
  background-color: rgba(0, 26, 141, 0.92) !important;
  height: 80px !important;
  position: fixed !important;
  top: 0px; left: 0px; right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

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

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

.header-area {
  background-color: transparent;
  border-bottom: 1px solid rgba(250,250,250,0.2);
  position: fixed;
  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;
}

.fa-facebook-square {
    font-size: 2em;
}


.sticky-social-bar {
  position: relative;         /* no longer fixed */
  display: flex;
  flex-direction: row;        /* horizontal, since it's just one icon */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 10px;   
}

.social-icon {
  color: #2a2a2a; /* Dark gray/black icons */
  font-size: 24px;
  margin: 5px 0; /* Spacing between icons */
  text-align: center;
  transition: all 0.3s ease;
}

.social-icon:hover {
  color: #8d99af; /* Changes color on hover to match your site theme */
  transform: scale(1.1);
}

.inquiry-buttons {
  position: fixed;
  bottom: 30px; /* Distance from bottom */
  left: 30px;   /* Distance from left */
  display: flex;
  gap: 15px;    /* Space between the two buttons */
  z-index: 9999;
  align-items: center;
}

.inquiry-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff; /* White outline */
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1); /* Slight glass effect */
  backdrop-filter: blur(5px);
}

/* The Square-ish Phone Button */
.icon-only {
  width: 50px;
  height: 50px;
  border-radius: 15px; /* Matches the rounded-square look in your image */
  font-size: 20px;
}

/* The Pill-shaped Support Button */
.text-button {
  padding: 0 20px;
  height: 50px;
  border-radius: 25px; /* Creates the pill shape */
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  gap: 10px;
}

.inquiry-item:hover {
  background-color: #ffffff;
  color: #2a2a2a; /* Flips colors on hover */
  transform: translateY(-5px);
}
.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav a.logo {
  background-image: url(../images/Rurexlogo.png);
  width: 207px;       /* Keep your desired width */
  height: 50px;       /* Keep your desired height */
  background-size: contain;      /* ADD THIS: Scales the logo to fit */
  background-repeat: no-repeat;  /* Prevents tiling */
  background-position: center;   /* Centers the image in the box */
  display: inline-block;
  margin-top: 20px;
}

.background-header .main-nav a.logo {
  background-image: url(../images/Rurexlogoblack.png);
  width: 164px;
  height: 58px;
  display: inline-block;
  margin-top: 10px;
}

.background-header .main-nav .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: 30px;
  padding-right: 30px;
}

.parent {
  position: relative;
}

.hero-info-overlay {
   position: absolute;
   bottom: 0;
   left: 50px; /* Align with your left padding preference */
   z-index: 10; /* Ensure it stays above background images */
   padding-bottom: 20px;
}

.hero-locations {
    color: #ffffff;
    font-size: 16px;
    font-weight: 200px;
    letter-spacing: 2px;
    margin-bottom: -9px;
    
}

.fb-follow-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: -5px;
  transition: color 0.3s ease, transform 0.3s ease; 

}

.fb-follow-link i {
  font-size: 2em;
  line-height: 1;
}

.fb-follow-link span {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
}

.fb-follow-link:hover {
  color: #8d99af;
  transform: translateX(5px); /* slides slightly to the right on hover */
  
}

/* Styling for the relocated Facebook link in the Hero section */
.hero-social-link {
    margin-bottom: 20px;
    text-align: left;
    padding-left: 50px; /* Align with slogans below */
}

.hero-social a {
   color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 47px;
}

.hero-social-link a {
    text-decoration: none;
    color: #fff; /* White text on picture */
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

.top-text.header-text {
    position: relative;
    min-height: 1px; /* Adjust this height to match your banner needs */
}

.hero-social img {
    width: 25px; /* Adjust size as needed */
}

.hero-social-link .fa-facebook-square {
    font-size: 1.5em; /* Specific size for the icon */
}

/* Compact Footer Styling to fit on one screen */
.compact-footer {
    background-color: #001a8d; /* Match the dark blue exactly */
    color: white;
    position: fixed; /* Keep it visible at the bottom of the screen */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 10px 60px; /* Very thin padding for compact design */
    height: 60px; /* Set a strict compact height */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

.compact-footer .copyright {
    margin: 0;
    font-size: 12px; /* Smaller font for copyright */
    opacity: 0.8;
}

.compact-footer .footer-logo img {
    height: 35px; /* Scaled down logo for compact footer */
}

.hero-shapes {
  position: absolute; /* or absolute if inside section */
  bottom: 0;
  right: 0;
  width: 600px;
  height: 500px;
  pointer-events: none; /* optional */
}

/* Base oval style */
.oval {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
   border: 6px solid white;
}

.oval2 {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
   border: 6px solid #4f86b5;
}

.oval3 {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
   border: 0px solid #4f86b5;
}

/* Images inside */
.oval img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

.oval::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 68, 255, 0.497);
}

/* Big oval */
.big {
  width: 750px;
  height: 400px;
  top: -20px;
  left: 10px;
  border-radius: 56% / 100%; /* oval shape */
  z-index: 2;
}

/* Small oval */
.small {
  width: 350px;
  height: 140px;
  top: -90px;
  right: -51px;
  border-radius: 29% / 90%;
  z-index: 3;
}

.smaller {
  width: 350px;
  height: 140px;
  top: 287px;
  right: 12px;
  background: #4f86b5;
  border-radius: 30% / 90%;
  z-index: 3;
}

.smallest {
  width: 250px;
  height: 120px;
  top: 260px;
  right: 200px;
  background: #60a6e1;
  border-radius: 40% / 90%;
  z-index: 3;
}

/* Blue background blob */
.blob {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 450px;
  height: 180px;
  background: #4f86b5;
  border-radius: 100px 0 0 0;
  z-index: 1;
}

.pill {
  width: 200px;
  height: 80px;
  background: #6ea3c9;
  border-radius: 999px;
  position: absolute;
  bottom: 80px;
  left: 120px;
}


.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  -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:hover {
    border-bottom: 2px solid #8d99af;   /* Optional: adds a gray underline on hover */
}
.header-area .main-nav .nav li a.active {
    color: #fff !important;             /* Keep text white */
    border-bottom: 2px solid #fff;      /* The white underline */
    padding-bottom: 2px;                /* Space between text and line */
    height: auto !important;            /* Allows the border to show */
    line-height: 30px !important;       /* Adjusts vertical alignment */
}

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



.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color:  #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
   position: absolute;
    /* Use rgba for transparency: (red, green, blue, alpha/opacity) */
    background-color: rgba(66, 133, 244, 0.5); 
    
    /* This creates the frosted glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    
    width: 148px;
    text-align: center;
    border-radius: 20px;
    padding: 15px 0;
    top: 60px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    
    /* White border to make it pop like in your image */
    border: 3px solid rgb(255, 255, 255);
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

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

/* Hover effect for the dropdown items */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    color: #ffffff !important; 
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    padding: 10px 0;
}

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

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

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  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: #8d99af;
}

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

/* -----------------------------------------------------------------
   HAMBURGER BUTTON
   New <button class="menu-trigger"> element inside .main-nav
----------------------------------------------------------------- */
.menu-trigger {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  z-index: 9999;
  background: transparent;
  border: none;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.menu-trigger .bar {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.35s ease;
  transform-origin: center;
}

/* Dark bars when header has scrolled */
.background-header .menu-trigger .bar {
  background-color: #1e1e1e;
}

/* Animated X when menu is open */
.menu-trigger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-trigger.active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-trigger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}



  @media (max-width: 767px) {
  /* Show hamburger */
  .menu-trigger { display: flex !important; }

  /* Header */
  .header-area {
    background-color: #001a8d00 !important;
    height: 80px !important;
    padding: 0 20px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2) !important;
  }

  .header-area .container { padding: 0 !important; position: relative; }

  .header-area .main-nav a.logo {
    background-image: url(../images/Rurexlogo.png) !important;
    width: 164px !important;
    height: 49px !important;
    margin-top: 15px !important;
    margin-left: -10px !important;
    float: left;
  }

  .header-area .main-nav .menu-trigger {
    display: flex !important;
  }

  /* Active X state */
  .header-area .main-nav .menu-trigger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
    background-color: #ffffff !important;
  }
  .header-area .main-nav .menu-trigger.active .bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .header-area .main-nav .menu-trigger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
    background-color: #ffffff !important;
  }

  /* Nav panel */
  .header-area .main-nav .nav {
    display: none;
    float: none !important;
    width: 100% !important;
    position: fixed !important;
    top: 70px;
    left: 0;
    right: 0;
    background: rgb(0 10 60 / 26%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0 !important;
    padding: 10px 0 20px !important;
    z-index: 9998;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .header-area .main-nav .nav.open {
    display: block !important;
    animation: rxSlideDown 0.3s ease forwards;
  }

  @keyframes rxSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Nav items */
  .header-area .main-nav .nav li {
    width: 100% !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: transparent !important;
  }

  .header-area .main-nav .nav li:last-child { border-bottom: none; }

  .header-area .main-nav .nav li a {
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    padding: 14px 25px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
    transition: background 0.2s ease, padding-left 0.2s ease;
  }

  .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a.active {
    background: rgba(255,255,255,0.08) !important;
    padding-left: 35px !important;
    border-bottom: none !important;
    color: #fff !important;
  }

  /* PRODUCTS dropdown accordion */
  .header-area .main-nav .nav li.has-sub { padding-right: 0 !important; position: relative; }

  .header-area .main-nav .nav li.has-sub:after {
    right: 20px !important;
    top: 14px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.6) !important;
    transition: transform 0.3s ease;
  }

  .header-area .main-nav .nav li.has-sub.sub-open:after {
    transform: rotate(180deg);
  }

  .header-area .main-nav .nav li.has-sub > a { padding-right: 40px !important; }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0, 30, 100, 0.6) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    top: auto !important;
    display: none;
    overflow: hidden;
  }

  .header-area .main-nav .nav li.has-sub.sub-open ul.sub-menu {
    display: block !important;
    animation: rxFadeIn 0.25s ease forwards;
  }

  @keyframes rxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    padding: 12px 25px 12px 40px !important;
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500 !important;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    background: rgba(255,255,255,0.06) !important;
    padding-left: 50px !important;
    color: #fff !important;
  }

  .hero-locations {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 0 !important;
  }

  

}





/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------
KBB Product Panel (White Oval)
--------------------------------------------- */
.product-info-oval {
    background-color: #fff;
    padding: 20px 25px;
    border-radius: 60px;
    min-height: auto;
    height: auto;
    width: 2000px;
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 26px;
    margin-left: -207px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Logo and Header Row */
.brand-highlight {
    color: #d32f2f; /* Red color for Garrett */
    font-weight: 600;
}

.holset-logo {
    max-width: 200px; /* Adjust based on your actual logo size */
    height: auto;
}

.kbb-logo {
    max-width: 200px; /* Adjust based on your actual logo size */
    height: auto;
}

.garett-logo {
    max-width: 170px; /* Adjust based on your actual logo size */
    height: 42px;
}

.napier-logo {
    max-width: 105px; /* Adjust based on your actual logo size */
    height: auto;
}

/* Panel Text Styles */
.panel-text p {
    font-size: 14px;         /* Smaller text size */
    line-height: 1.4;       /* Tighter spacing between lines */
    color: #1a3a6d; 
    font-weight: 700;
    margin-bottom: 15px;    /* Less gap between paragraphs */
}

/* Privacy Consent */
.privacy-consent {
    background-color: #f0f4f8;
    border: 1px solid #1a3a6d;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 5px;
}

.privacy-label {
    display: inline;   /* Changed from flex to inline */
    font-size: 13px;
    color: #1a3a6d;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    line-height: 1.8;
}

.privacy-label a {
    color: #1a3a6d;
    font-weight: 700;
    text-decoration: underline !important;
}

.privacy-label input[type="checkbox"] {
    display: inline;   /* Sits inline with text */
    width: 14px !important;
    height: 14px;
    vertical-align: middle;  /* Aligns checkbox to text baseline */
    margin-right: 6px;
    border-radius: 3px !important;
    border: 1px solid #1a3a6d !important;
    cursor: pointer;
    position: relative;
    top: -1px;         /* Fine-tune vertical alignment */
}

.product-info-oval h2.section-title {
    font-size: 20px;         /* Smaller "INDUSTRIES" heading */
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Section Title (INDUSTRIES) */
.product-info-oval .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a3a6d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Industry Grid Styles */
.industry-grid .industry-thumb {
    width: 100%;
    height: 140px; /* Force consistent height for grid */
    object-fit: cover; /* Crops image to fit height without distortion */
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.industry-grid .industry-label {
    font-size: 12px;
    font-weight: 800;
    color: #101569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* ---------------------------------------------
Bottom Action Bar & Button
--------------------------------------------- */
.bottom-action-bar {
    position: relative;
    z-index: 5;
    color: #fff;
}

/* Inquire Now Button Styles */
.inquire-btn {
    display: inline-block; /* Essential for single line */
    padding: 7px 59px;    /* Adjust top/bottom and left/right padding */
    
    /* Colors and Border */
    background-color: rgba(1, 33, 67, 0.8); 
    border: 2px solid #ffffff;
    border-radius: 12px;
    
    /* Text Styling */
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    
    /* Matching the image spacing */
    letter-spacing: 5px; 
    white-space: nowrap; /* Prevents text from wrapping to a second line */
    
    transition: all 0.3s ease;
    margin-left: 646px;
    margin-bottom: 57px;
}

.inquire-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-3px);
}

/* Modal Background Overlay */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px); /* Blurs the website behind the form */
}

/* Modal Box */
.modal-content {
   background-color: #fff;
    /* Reduced top margin and added max-height */
    margin: 2% auto; 
    padding: 20px 40px; /* Reduced top/bottom padding */
    border-radius: 40px;
    width: 70%;
    max-width: 900px;
    position: relative;
    
    /* Crucial: prevents the modal from going off-screen */
    max-height: 90vh; 
    overflow-y: auto; /* Adds a scrollbar INSIDE the modal if needed */
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }

.modal-header {
   display: flex;
    flex-direction: column; /* This stacks the text vertically */
    align-items: center;    /* This centers the text horizontally */
    text-align: center;
    margin-bottom: 25px;    /* Space between title and first input */
    padding: 0 20px;
}

.modal-header .main-title {
    font-size: 19px;
    font-weight: 800;       /* Very bold weight for the bottom line */
    color: #1a3a6d;
    margin: 0;
    line-height: 1.2;
    max-width: 80%;
}

.modal-header .sub-text {
    font-size: 14px;
    font-weight: 400;       /* Lighter weight for the top line */
    color: #1a3a6d;         /* Matching the blue theme */
    margin: 0 0 8px 0;      /* Small gap before the bold title */
    line-height: 1.4;
}

.modal-header h3 { 
    font-size: 1.1rem; /* Slightly smaller header */
}
/* Form Layout */
.form-row {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Space between side-by-side columns */
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-direction: column; /* Label goes on top of input */
    text-align: left;
}

.form-group input, 
.form-group textarea {
    padding: 8px 12px; /* Thinner input boxes */
}

.form-group.half {
    width: 48%; /* Adjust based on gap */
}

.form-group.full {
    width: 100%;
    margin-bottom: 15px;
}

.full-width {
    margin-bottom: 8px;
}

label {
    display: block;
    font-size: 14px;
    color: #1a3a6d;
    font-weight: 600;
    margin-bottom: 5px;
    margin-left: 5px; /* Slight offset to match your image */
}

input, textarea, select {
    width: 100%; /* Makes input take up the full container width */
    padding: 10px 15px;
    border: 1px solid #1a3a6d;
    border-radius: 20px;
    background-color: #ffffff;
    box-sizing: border-box; /* Crucial for width calculation */
}

/* Phone input specific */
.phone-wrapper {
    display: flex;
    gap: 0;
}

.phone-wrapper select {
    width: 80px;
    border-radius: 20px 0 0 20px;
    border-right: none;
}

.phone-wrapper input {
    border-radius: 0 20px 20px 0;
}

/* Send Button */
.form-footer {
    margin-top: 25px;
    text-align: center;
}

.send-btn {
    background-color: #012143;
    color: white;
    padding: 12px 100px;
    border: 2px solid #fff;
    border-radius: 12px;
    font-size: 20px;
    letter-spacing: 5px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Close Button */
.close-modal {
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
}

/* ---------------------------------------------
Responsive Adjustments (Mobile/Tablet)
--------------------------------------------- */
@media (max-width: 767px) {
    .product-info-oval {
        padding: 30px;
        border-radius: 30px;
    }
    
    .panel-header .kbb-logo {
        max-width: 150px;
    }

    .industry-grid .industry-thumb {
        height: 120px; /* Shorter images on mobile */
    }

    /* Stack bottom elements vertically on small screens */
    .bottom-action-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .bottom-action-bar .hero-social a {
        justify-content: center;
    }
}

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(../images/home.png);

  height: 100vh;              /* FULL screen height */
  display: flex;
  align-items: center;        /* center content vertically */
  justify-content: center;
  position: relative;
  padding-top: 100px; /* same as header height */
  position: relative;
  overflow: hidden; /* This helps contain the 'hero-shapes' if they are absolute */
  min-height: 100vh; /* Ensures it fills the screen but can grow */
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  transition: background-image 1.2s ease-in-out;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0; /* Keeps the images behind your text and shapes */
}

.main-banner .top-text {
  text-align: center;
}

.main-banner .top-text h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.main-banner .top-text h2 {
  color: #fff;
  font-size: 45px;
  font-weight: 800;
  text-transform: capitalize;
  margin-top: -200px;
  margin-left: 150px;
  text-align: left;
  text-indent: 50px;
  padding-top: 200px;
}

.main-banner ul.categories {
  width: 100%;
  margin-top: 60px;
  text-align: center;
}

.main-banner ul.categories li {
  display: inline-block;
  text-align: center;
  width: 18%;
}

.main-banner ul.categories li a {
  color: #fff;
  text-align: center;
  font-size: 15px;
  margin-top: 15px;
}

.main-banner ul.categories li .icon {
  display: block;
  margin: 0 auto 12px auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  text-align: center;
  line-height: 62px;
  color: #8d99af;
  background-color: #fff;
  transition: all .5s;
}

.main-banner ul.categories li a:hover .icon {
  background-color: #2b2d42;
}

.main-banner ul.categories li .icon img {
  max-width: 27px;
}

form#search-form {
  background-color: #fff;
  padding: 0px 0px 0px 30px;
  width: 100%;
  border-radius: 7px;
  display: inline-block;
  text-align: center;
}

form#search-form select,
form#search-form input {
  width: 100%;
  height: 36px;
  background-color: transparent;
  border: none;
  color: #2a2a2a;
  font-size: 15px;
  outline: none;
}

.form-select:focus {
  box-shadow: none;
}

form#search-form input.searchText {
  border-left: 1px solid #8d99af;
  border-right: 1px solid #8d99af;
  padding: 0px 30px;
}

form#search-form input::placeholder {
  color: #2a2a2a;
  font-size: 15px;
}

form#search-form button {
  width: 100%;
  height: 100%;
  background-color: #8d99af;
  border: none;
  padding: 15px;
  color: #fff;
  font-size: 15px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

form#search-form button i {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  color: #8d99af;
  display: inline-block;
  text-align: center;
  line-height: 38px;
  margin-right: 10px;
}

/* Container for the logo and text */
.brand-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Creating the four slanted bars */
.slanted-icon {
  display: flex;
  gap: 6px; /* Space between bars */
  transform: skewX(-20deg); /* This creates the italic/leaning look */
  margin-right: 15px;
}

.slanted-icon span {
  display: block;
  width: 8px;
  height: 45px;
  background-color: #fff; /* Matches the white text in your image */
  border-radius: 2px;
}

/* Styling the "Rurex" text */
.brand-text {
  font-size: 70px;
  font-weight: 800;
  color: #fff;
  font-style: italic;
  letter-spacing: -2px;
  margin: 0;
  line-height: 1;
}

/* Styling the slogan underneath */
.sub-slogan {
  color: #fff;
  font-size: 60px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 10px;
  letter-spacing: 1px;
}
.sub-slogan2 {
  color: #fff;
  font-size: 50px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 10px;
  letter-spacing: 1px;
}
.sub-slogan3 {
  color: #fff;
  font-size: 25px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-top: 10px;
  letter-spacing: 1px;
}
/*
---------------------------------------
Popular Categories
---------------------------------------
*/

.popular-categories {
  margin-top: 120px;
}

.popular-categories .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.popular-categories .naccs {
  position: relative;
  background-color: #2b2d42;
  border-radius: 7px;
}

.popular-categories .icon {
  display: inline-block;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  text-align: center;
  line-height: 62px;
  color: #8d99af;
  background-color: #fff;
  margin-right: 15px;
}

.popular-categories .icon img {
  max-width: 27px;
}

.popular-categories .naccs .menu div.first-thumb {
  border-top-left-radius: 7px;
}

.popular-categories .naccs .menu div.last-thumb {
  margin-bottom: 0px;
  border-bottom-left-radius: 7px;
}

.popular-categories .naccs .menu div {
  color: #fff;
  font-size: 15px;
  background-color: #8d99af;
  margin-bottom: 1px;
  height: 126px;
  text-align: left;
  padding: 0px 15px;
  line-height: 126px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.popular-categories .naccs .menu div.active,
.popular-categories .naccs .menu div.active .thumb {
  background-color: #2b2d42;
}

.popular-categories ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.popular-categories ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.popular-categories ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.popular-categories ul.nacc li {
  width: 100%;
}

.popular-categories .nacc .thumb .left-text {
  margin-left: 30px;
}

.popular-categories .nacc .thumb .left-text h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 30px;
}

.popular-categories .nacc .thumb .left-text p {
  color: #fff;
  margin-bottom: 30px;
}

.popular-categories .nacc .thumb .right-image {
  padding: 60px;
  display: inline-flex;
} 

.popular-categories .nacc .thumb img {
  border-radius: 7px;
}

.popular-categories .nacc .thumb .left-text .main-white-button a{
  width: 100%;
  text-align: center;
}



/*
---------------------------------------------
Recent Listing 
---------------------------------------------
*/

.recent-listing {
  margin-top: 120px;
  padding-top: 120px;
  margin-bottom: 120px;
  border-top: 1px solid #eee;
}

.recent-listing .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.recent-listing .item .listing-item {
  display: inline-flex;
  background-color: #f7f7f7;
  border-radius: 7px;
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}

.recent-listing .item .left-image {
  float: left;
  overflow: hidden;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.recent-listing .item .left-image img {
  overflow: hidden;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.recent-listing .item .right-content {
  display: inline-block;
  padding: 60px;
}

.recent-listing .item .right-content ul.rate {
  position: absolute;
  right: 60px;
  top: 60px;
}

.recent-listing .item .right-content ul.rate li {
  display: inline-block;
}



.recent-listing .item .right-content h4 {
  font-size: 20px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 20px;
}

.recent-listing .item .right-content h6 {
  font-size: 15px;
  font-weight: 500;
  color: #8d99af;
}

.recent-listing .item .right-content span.price {
  color: #2a2a2a;
  font-size: 15px;
  margin-top: 30px;
  display: block;
  margin-bottom: 15px;
}

.recent-listing .item .right-content span.price .icon {
  width: 30px;
  height: 30px;
  background-color: #8d99af;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  display: inline-block;
  margin-right: 10px;
}

.recent-listing .item .right-content span.price .icon img {
  max-width: 16px;
  text-align: center;
  display: inline-block;
}

.recent-listing .item .right-content span.details {
  display: block;
  margin-bottom: 30px;
  font-size: 15px;
  color: #8d99af;
}

.recent-listing .item .right-content span.details em {
  font-style: normal;
  color: #2a2a2a;
}

.recent-listing .item .right-content ul.info li {
  display: inline-block;
  margin-bottom: 15px;
  margin-right: 30px;
  width: 100%;
}



.recent-listing .item .right-content ul.info li img {
  max-width: 30px;
  margin-right: 15px;
  display: inline;
}

.recent-listing .item .right-content .main-white-button {
  position: absolute;
  right: 60px;
  bottom: 60px;
}

.recent-listing .owl-dots {
  margin-top: 15px;
  text-align: center;
}

.recent-listing .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #8d99af;
  border-radius: 50%;
  margin: 0px 5px;
  transition: all .3s;
}

.recent-listing .owl-dots .active {
  width: 14px;
  height: 14px;
}



/*
---------------------------------------------
Footer
---------------------------------------------
*/
/*
footer {
    background: #252020;
    padding: 120px 0;
  }

  footer .section-title {
    padding-bottom: 10px;
  }

  footer h2 {
    font-size: 20px;
  }

  footer a,
  footer p {
    color: #909090;
  }

  footer strong {
    color: #d9d9d9;
  }

  footer address p {
    margin-bottom: 0;
  }

  footer .social-icon {
    margin-top: 25px;
  }

  .footer-info {
    margin-right: 2em;
  }

  .footer-info h2 {
    color: #ffffff;
    padding: 0;
  }

  .footer_menu h2 {
    margin-top: 2em;
  }

  .footer_menu ul {
    margin: 0;
    padding: 0;
  }

  .footer_menu li {
    display: inline-block;
    list-style: none;
    margin: 5px 10px 5px 0;
  }

  .newsletter-form .form-control {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #303030;
    height: 50px;
    margin: 5px 0;
  }

  .newsletter-form input[type="submit"] {
    background: transparent;
    border: 1px solid #f9f9f9;
    border-radius: 50px;
    color: #ffffff;
    display: block;
    margin-top: 20px;
    outline: none;
    width: 50%;
  }

  .newsletter-form input[type="submit"]:hover {
    background: #29ca8e;
    border-color: transparent;
  }

  .newsletter-form .form-group span {
    color: #909090;
    display: block;
    font-size: 12px;
    margin-top: 20px;
  }
/* */

.main-footer {
    position: relative; /* Ensure it's not absolute */
    width: 100%;
    background-color: #fff;
    clear: both; /* Breaks any floats from the banner */
    z-index: 10;
}

.main-footer.compact {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

/* Locations styling */
.footer-locations {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 5px;
    word-spacing: 15px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Facebook link styling */
.footer-social {
    margin-bottom: 30px;
}

.footer-social a {
    text-decoration: none;
    color: #777;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-social img {
    width: 30px; /* Adjust based on your icon size */
}

/* The Blue Bottom Bar */
.footer-bottom-bar {
    background-color: #001a8d; /* Your deep blue */
    padding: 10px 50px;
    color: #fff;
}

.footer-bottom-bar .copyright {
    margin: 0;
    font-size: 12px;
    color: #fff;
    margin-left: 1px;
}

.footer-bottom-bar .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    max-width: 100% !important;;
    margin: 0 auto;
    padding-right: 20px;
}

.footer-bottom-bar                   { padding: 10px 15px !important; }
  .footer-bottom-bar .container-fluid  { flex-wrap: wrap !important; gap: 6px; }
  .footer-logo img                     
  { height: 28px !important; 
    margin-left: -13px;
  }
  .footer-bottom-bar .copyright        { font-size: 10px !important; }


.footer-logo {
    margin-right: -40px; /* Moves the logo closer to the right edge */
    transition: all 0.3s ease; /* Optional: smooth transition if screen resizes */
}

.footer-logo img {
    height: 40px; /* Makes the logo fit the slim bar */
    filter: brightness(0) invert(1); /* Forces logo to white if it isn't already */
    
}

/* Bootstrap helper for alignment */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-page {
  margin: 120px 0px;
}

.contact-page .inner-content {
  background-color: #f7f7f7;
  border-radius: 7px;
  overflow: hidden;
}

.contact-page .inner-content #map {
  margin-bottom: -8px;
  overflow: hidden;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

form#contact {
  position: relative;
  margin: 0px 60px 0px 45px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 7px;
  background-color: transparent;
  border: 1px solid #8d99af;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #8d99af;
  padding: 0px 15px;
  margin-bottom: 30px;
}

form#contact ul li {
  display: inline-block;
  margin-right: 30px;
}



form#contact input[type=checkbox] {
  display: inline-block;
  width: 15px;
  min-width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid #8d99af;
  outline: none;
  cursor: pointer;
}

form#contact span {
  color: #8d99af;
  font-size: 14px;
  font-weight: 500;
  margin-left: 8px;
}

form#contact input::placeholder {
  color: #8d99af;
  font-weight: 500;
}

form#contact textarea {
  margin-top: 10px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 7px;
  background-color: transparent;
  border: 1px solid #8d99af;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #8d99af;
  padding: 15px;
  margin-bottom: 30px;
}

form#contact textarea::placeholder {
  color: #8d99af;
  font-weight: 500;
}

form#contact button {
  margin-bottom: -15px;
  display: inline-block;
  background-color: #8d99af;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 7px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button i {
  margin-right: 10px;
  width: 24px;
  height: 24px;
  background-color: #2b2d42;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}

form#contact button:hover {
  background-color: #2b2d42;
  color: #fff;
}


/* 
---------------------------------------------
Page Heading
--------------------------------------------- 
*/

.page-heading {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(../images/heading-bg.jpg);
  padding: 230px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.page-heading .top-text {
  text-align: left;
}

.page-heading .top-text h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
}

.page-heading .top-text h2 {
  color: #fff;
  line-height: 70px;
  font-size: 45px;
  font-weight: 800;
  text-transform: capitalize;
  margin-top: 15px;
}



/*
---------------------------------------
Category Post
---------------------------------------
*/

.category-post {
  overflow: hidden;
  margin-top: 0px;
  margin-bottom: 120px;
}

.category-post .naccs {
  position: relative;
  border-radius: 7px;
}

.category-post .icon {
  display: inline-block;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  text-align: center;
  line-height: 62px;
  color: #8d99af;
  background-color: #fff;
  margin-right: 15px;
  float: left;
}

.category-post .naccs .menu div h4 {
  position: absolute;
  left: 81px;
  top: 50%;
  color: #fff;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  display: inline;
}

.category-post .icon img {
  max-width: 27px;
}

.category-post .naccs .menu div.first-thumb  {
  border-bottom-left-radius: 7px;
}

.category-post .naccs .menu div.last-thumb {
  margin-bottom: 0px;
  border-bottom-right-radius: 7px;
}

.category-post .naccs .menu div {
  color: #fff;
  margin: 0px;
  width: 20%;
  font-size: 10px;
  background-color: #8d99af;
  height: 132px;
  line-height: 132px;
  display: inline-block;
  float: left;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.category-post .naccs .menu div .thumb {
  padding: 30px 0px;
  margin-left: 25px;
  margin-right: 25px;
}

.category-post .naccs .menu div.active,
.category-post .naccs .menu div.active .thumb {
  background-color: #2b2d42;
}

.category-post ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.category-post ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.category-post ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.category-post ul.nacc li {
  width: 100%;
}

.category-post .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.category-post .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.category-post .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.category-post .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.category-post .top-content {
  margin-top: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid #eee;
  margin-bottom: 60px;
}

.category-post .description {
  padding-bottom: 60px;
  border-bottom: 1px solid #eee;
  margin-bottom: 60px;
}

.category-post .general-info p {
  margin-bottom: 30px;
}

.category-post .top-content .top-icon {
  background-color: #2b2d42;
  width: 250px;
  height: 132px;
  border-radius: 7px;
  position: relative;
  padding: 30px;
  display: inline-block;
}

.category-post .top-content .top-icon h4 {
  position: absolute;
  left: 30px;
  top: 50%;
  color: #fff;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  display: inline;
}

.category-post .top-content .top-icon .icon {
  display: inline-block;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  text-align: center;
  line-height: 62px;
  color: #8d99af;
  background-color: #fff;
  margin-right: 15px;
  float: left;
  left: 0;
}

.category-post .nacc .thumb .text-icon i  mg {
  max-width: 30px;
  margin-right: 10px;
}

.category-post .nacc .thumb span.list-item {
  font-size: 15px;
  color: #8d99af;
  font-weight: 500;
  line-height: 30px;
}



/* 
---------------------------------------------
Listing Page
--------------------------------------------- 
*/


.listing-page {
  margin-top: 120px;
  margin-bottom: 120px;
}

.listing-page .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.listing-page .naccs {
  position: relative;
}

.listing-page .icon {
  display: inline-block;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  text-align: center;
  line-height: 62px;
  color: #8d99af;
  background-color: #fff;
  margin-right: 15px;
}

.listing-page .icon img {
  max-width: 27px;
}

.listing-page .naccs .menu div.first-thumb {
  border-radius: 7px;
}

.listing-page .naccs .menu div.last-thumb {
  margin-bottom: 0px;
  border-radius: 7px;
}

.listing-page .naccs .menu div {
  color: #fff;
  font-size: 15px;
  border-radius: 7px;
  background-color: #8d99af;
  margin-bottom: 30px;
  height: 126px;
  text-align: left;
  padding: 0px 15px;
  line-height: 126px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.listing-page .naccs .menu div.active,
.listing-page .naccs .menu div.active .thumb {
  background-color: #2b2d42;
}

.listing-page ul.nacc {
  height: auto !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.listing-page ul.nacc li {
  display: none;
  opacity: 0;
  transform: translateY(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.listing-page ul.nacc li.active {
  display: block;
  transition-delay: 0s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateY(0px);
}

.listing-page ul.nacc li {
  width: 100%;
}

.listing-page .item .listing-item {
  display: inline-flex;
  background-color: #f7f7f7;
  border-radius: 7px;
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}

.listing-page .item .left-image {
  float: left;
  overflow: hidden;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  position: relative;
  z-index: 1;
}

.listing-page .item .left-image .hover-content .main-white-button a i {
  font-size: 12px;
  width: 23px;
  height: 23px;
  line-height: 23px;
}

.listing-page .item .left-image .hover-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 11;
  transition: all .5s;
  opacity: 0;
  visibility: hidden;
}

.listing-page .item .listing-item:hover .left-image .hover-content {
  opacity: 1;
  visibility: visible;
}

.listing-page .item .left-image img {
  overflow: hidden;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.listing-page .item .right-content {
  display: inline-block;
  padding: 45px;
}

.listing-page .item .right-content h4 {
  font-size: 20px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 20px;
}

.listing-page .item .right-content h6 {
  font-size: 15px;
  font-weight: 500;
  color: #8d99af;
}

.listing-page .item .right-content span.price {
  color: #2a2a2a;
  font-size: 15px;
  margin-top: 30px;
  display: block;
  margin-bottom: 15px;
}

.listing-page .item .right-content span.price .icon {
  width: 30px;
  height: 30px;
  background-color: #8d99af;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  display: inline-block;
  margin-right: 10px;
}

.listing-page .item .right-content span.price .icon img {
  max-width: 16px;
  text-align: center;
  display: inline-block;
}

.listing-page .item .right-content span.details {
  display: block;
  margin-bottom: 30px;
  font-size: 15px;
  color: #8d99af;
}

.listing-page .item .right-content span.details em {
  font-style: normal;
  color: #2a2a2a;
}

.listing-page .item .right-content span.info {
  line-height: 30px;
}

.listing-page .item .right-content span.info img {
  max-width: 30px;
  margin-right: 15px;
  display: inline;
}

.listing-page .owl-dots {
  margin-top: 15px;
  text-align: center;
}

.listing-page .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #8d99af;
  border-radius: 50%;
  margin: 0px 5px;
  transition: all .3s;
}

.listing-page .owl-dots .active {
  width: 14px;
  height: 14px;
}



/* 
---------------------------------------------
Pre Loader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #8d99af;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #8d99af;
    border-radius: 50%;
}


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

@media (max-width: 1200px) {
  .popular-categories .icon {
    margin-left: 50%;
    transform: translateX(-33px);
    text-align: center;
    display: inline-block;
  }
  .category-post .naccs .menu div.active .thumb {
    position: relative;
  }
  .category-post .icon {
    position: absolute;
    left: 50%;
    transform: translateX(15px);
  }
  .category-post .top-content .top-icon h4 { 
    left: 86px;
  }
  form#search-form {
    padding: 30px;
  }
  .popular-categories .naccs .menu .thumb,
  .category-post .naccs .menu div h4 {
    color: transparent;
  }
  .recent-listing .item .right-content,
  .listing-page .item .right-content {
    padding: 30px;
    position: relative;
  }
  .recent-listing .item .right-content h4,
  .listing-page .item .right-content h4 {
    margin-bottom: 10px;
  }
  .recent-listing .item .right-content .main-white-button,
  .listing-page .item .right-content .main-white-button {
    left: 30px;
    bottom: -30px;
  }
  .recent-listing .item .right-content span.price,
  .listing-page .item .right-content span.price {
    margin-top: 15px;
  }
  .recent-listing .item .right-content ul.rate,
  .listing-page .item .right-content ul.rate {
    left: 30px;
    top: -5px;
  }
  .recent-listing .item .right-content span.details,
  .listing-page .item .right-content span.details {
    margin-bottom: 15px;
  }
}

@media (max-width: 992px) {
  form#search-form select,
  form#search-form input {
    border: 1px solid #8d99af;
    border-radius: 7px;
    margin-bottom: 15px;
  }
  form#search-form button {
    border-radius: 7px;
  }
  .listing-page .naccs .menu {
    margin-bottom: 30px;
  }
  .popular-categories .nacc .thumb .left-text {
    margin: 30px;
  }
  .popular-categories .nacc .thumb .right-image {
    padding: 0px;
    margin: 0px 30px 30px 30px;
    display: block;
  }
  .popular-categories .naccs .menu div.first-thumb {
    border-top-right-radius: 7px;
  }
  .popular-categories .naccs .menu div.last-thumb {
    border-bottom-left-radius: 0px;
  }
  .recent-listing .item .left-image,
  .listing-page .item .left-image {
    float: none;
    width: 100%;
  }
  .category-post .top-content .top-icon .icon {
    left: 45%;
  }
  .recent-listing .item .left-image,
  .listing-page .item .left-image {
    border-bottom-left-radius: 0px;
    border-top-right-radius: 7px;
  }
  .recent-listing .item .listing-item,
  .listing-page .item .listing-item {
    display: inline-block;
  }
  .recent-listing .item .right-content ul.rate,
  .listing-page .item .right-content ul.rate {
    top: 20px;
  }
  .recent-listing .item .right-content .main-white-button,
  .listing-page .item .right-content .main-white-button {
    position: relative;
    left: 0px;
    bottom: 0px;
    margin-top: 30px;
  }
  .recent-listing .item .right-content h4 {
    margin-top: 20px;
  }
  footer {
    text-align: center;
  }
  footer .about,
  footer .helpful-links {
    margin-bottom: 45px;
  }
  .category-post .icon {
    transform: translateX(0px);
  }
  .category-post .top-content .top-icon,
  .category-post .nacc .thumb .main-white-button a {
    text-align: center;
    width: 100%;
  }
  .category-post .nacc .thumb .main-white-button  {
    margin-top: 30px;
  }
  .category-post .top-content .top-icon .icon {
    margin-left: -60px;
  }
  .category-post .top-content .top-icon h4 {
    left: 86px;
  }
  .description .text-icon {
    margin-top: 30px;
  }
  form#contact {
    margin-top: 45px;
    margin-bottom: 55px;
  }
}




.header-area .main-nav .menu-trigger .bar {
  position: relative !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  width: 26px !important;
  height: 2px !important;
  background-color: #ffffff !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  transition: transform 0.35s ease, opacity 0.2s ease !important;
  transform-origin: center !important;
  margin: 0 auto !important;
}

.header-area .main-nav .menu-trigger {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  position: absolute !important;
  top: 20px !important;
  right: 15px !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 99999 !important;
}

.header-area .main-nav .menu-trigger .bar::before,
.header-area .main-nav .menu-trigger .bar::after {
  display: none !important;
  content: none !important;
}

/* ===================================================
   GARRETT CATEGORY SECTIONS
   =================================================== */

.garrett-category-block {
    padding: 10px 0 5px 0;
}

.garrett-category-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.category-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.badge-performance {
    background-color: #fff0f0;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.badge-commercial {
    background-color: #f0f4ff;
    color: #1a3a6d;
    border: 1px solid #1a3a6d;
}

.badge-industrial {
    background-color: #f0fff8;
    color: #1a6d4a;
    border: 1px solid #1a6d4a;
}

.category-title {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.category-title .title-accent {
    color: #1a3a6d;
}

.category-subtitle {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    max-width: 420px;
}

/* Industry cards inside each category */
.industry-card {
    background: #f8faff;
    border: 1px solid #e0e8f5;
    border-radius: 12px;
    padding: 10px 10px 12px;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(26, 58, 109, 0.15);
    border-color: #1a3a6d;
}

.industry-card .industry-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: none;
}

.industry-card .industry-label {
    font-size: 10px;
    font-weight: 800;
    color: #1a3a6d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    line-height: 1.3;
}

/* Inquire button per category */
.category-inquire-row {
    text-align: center;
    margin: 15px 0 5px 0;
}

.category-inquire-btn {
    display: inline-block;
    padding: 10px 50px;
    background-color: #012143;
    border: 2px solid #012143;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-inquire-btn i {
    margin-right: 8px;
    font-size: 13px;
}

.category-inquire-btn:hover {
    background-color: #ffffff;
    color: #012143 !important;
    border-color: #012143;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 33, 67, 0.2);
}

/* Divider between sections */
.garrett-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d0daf0, transparent);
    margin: 10px 20px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .category-title {
        font-size: 18px;
    }
    .category-inquire-btn {
        padding: 10px 30px;
        font-size: 12px;
        letter-spacing: 2px;
    }
    .industry-card .industry-thumb {
        height: 90px;
    }
}
/* ===================================================
   GARRETT PAGE ONLY — ALL FIXES
   Scoped to body.page-garrett so other pages are safe
   =================================================== */

body.page-garrett {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    background-color: #000 !important;
}

body.page-garrett .main-banner {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    align-items: flex-start !important;
    padding-top: 120px !important;
}

body.page-garrett .main-banner .container {
    height: auto !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body.page-garrett .col-lg-10.offset-lg-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

body.page-garrett .product-info-oval {
    width: calc(100% - 80px) !important;
    max-width: calc(100% - 80px) !important;
    margin: 20px auto !important;
    border-radius: 40px !important;
    padding: 40px 60px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    height: auto !important;
    overflow: visible !important;
}

body.page-garrett .top-text.header-text {
    display: none !important;
    position: relative !important;
    min-height: auto !important;
    padding: 0 !important;
}

body.page-garrett .hero-info-overlay {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    padding: 15px 50px 20px 50px !important;
}



body.page-garrett .main-footer.compact {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0 !important;
}

body.page-garrett .bottom-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 60px 20px 60px !important;
    margin: 0 auto !important;
    width: calc(100% - 80px) !important;
}

body.page-garrett .inquire-btn {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}