@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;
  overflow: hidden;
  height: 100%;
}

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: #ffffff00!important;
  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: #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: fixed;
  right: 0; /* Sticks it to the right edge */
  top: 88%; /* Centers it vertically */
  transform: translateY(-50%); /* Perfectly aligns the center */
  display: flex;
  flex-direction: column; /* Stacks icons vertically */
  background-color: #ffffff00; /* Light gray from your image */
  padding: 0px 10px;
  border-radius: 20px 0 0 20px; /* Rounds the top and bottom left corners */
  z-index: 9999; /* Ensures it stays on top of other content */
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.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;
    top: 227px;        /* just below header, NOT bottom:0 anymore */
    bottom: auto;     /* remove the bottom:0 */
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0 50px;
    overflow: visible;
}

.hero-locations,
.services-container {
    overflow: visible;
}

.hero-locations {
    color: #ffffff;
    font-size: 16px;
    font-weight: 200px;
    letter-spacing: 2px;
    margin-bottom: 157px;
    padding-left: 64px;
    overflow: visible;
    
}

/* 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: -30px;
}

.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 */
}

.fb-follow-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  margin-right: 1100px;
  margin-bottom: 71px;
  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 */
  
}

.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 */
}

.top-text.header-text {
    position: relative;
    min-height: 500px; /* 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;
}

/* Title Styling */
.services-title {
    position: absolute;   /* ADD THIS */
    top: 100px;           /* ADD THIS - sits just below the header */
    left: 0;              /* ADD THIS */
    right: 0;             /* ADD THIS */
    z-index: 5;           /* ADD THIS */
    font-size: 64px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 15px; /* Creates that wide professional look */
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.services-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* KEEP THIS - prevents vertical stretching */
    gap: 40px;
    width: 100%;
    margin-top: -179px;
}

.circle-inner img {
    width: 70%; /* Adjust this percentage to control the padding */
    height: 70%;
    object-fit: contain;
}

.circle-inner {
    /* KEY CHANGE 1: Locking dimensions creates the spacing/gap */
    /* Tell inner ring to take up 95% of the outer ring's available space */
    width: 95%;
    height: 95%;
    border: 3px solid #012169;
    /* KEY CHANGE 2: Create the white fill that goes 'around the border' */
    background-color: #ffffff; /* This is the white fill seen in image 21 */
    
    /* Maintain the circular shape for the inner element */
    border-radius: 50%;
    
    /* STANDARD STYLING: Centering icon and clipping overflow */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Clips icon to circle boundary */
    
    /* IMPORTANT: Ensures width calculation is consistent */
    box-sizing: border-box;
}

.circle-outer {
    /* Set dimensions for the outer circle */
    width: 160px; /* Or adjust to fit your design */
    height: 160px;
    
    /* Current styling from image 20 */
    border: 12px solid #012169; /* The THICK, dark blue outer border */
    border-radius: 50%; /* This makes it a circle */
    background-color: transparent; /* No fill on the outer part */
    
    /* Centering the inner ring with Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Spacing from text */
    margin-bottom: 25px;
}

/* Container for the overall service column to center everything */
.service-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.service-item {
    flex: 0 1 350px;         /* Prevents items from stretching too much */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.circle-icon {
    width: 150px; /* Or whatever size your circle is */
    height: 150px;
    border: 10px solid #012169; /* Dark blue border from image */
    border-radius: 50%; /* This makes it a circle */
    background-color: white; /* The background color of the icon area */
    
    /* KEY CHANGE: Centering Content and Clipping */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* This clips anything outside the circle */
    margin-bottom: 10px;
}

.circle-icon img {
    width: 100%; /* Or slightly smaller to add padding */
    height: 100%;
    object-fit: contain; /* Keeps the icon's proportions */
}

.service-label {
  background: #012169;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  width: 100%;
  margin-bottom: 5px;
}

.dropdown-trigger {
  width: 100%;
  background: linear-gradient(to bottom, #ffffff, #d1d1d1);
  border: 1px solid #012169;
  border-radius: 20px;
  cursor: pointer;
  padding: 5px;
  color: #012169;
}

.location-footer {
    margin-bottom: -50px;
    color: #ffffff;
    font-size: 18px;
    text-align: left; /* Aligns with the Facebook link on the bottom left */
    width: 100%;
    padding-left: 4px;
}

.info-box {
    position: absolute;
    top: 100%;        /* opens BELOW the button */
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    background: white;
    border: 2px solid #012169;
    border-radius: 15px;
    padding: 5px;
    margin-top: 5px;
    font-size: 9px;
    font-weight: bold;
    color: #012169;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: left;
}

.info-box ul {
  padding-left: 15px;
  margin: 0;
}

.info-box.active {
  display: block; /* Show when active */
}


.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: 180px;
    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;
  }
}



@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #8d99af!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    border-bottom: 2px solid #8d99af;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}



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

.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;
}

.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-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;
  }
}

@media (max-width: 767px) {
  .main-banner ul.categories li a {
    color: transparent;
  }
  .header-area .main-nav a.logo {
    background-image: url(../images/Rurexlogoblack.png);
    float: left;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .main-nav .menu-trigger {
    right: 15px;
  }
  .category-post .icon {
    transform: translateX(-22px);
  }
}