@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;
  color: white;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #ffffff;
}

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: #92bde100;
  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;  /* flows with the page instead of sticking */
  display: flex;
  flex-direction: row;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 8px;  /* adds space between Facebook link and locations */
}

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

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

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

.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-content {
   position: relative;
    z-index: 10;
    color: #ffffff;
    /* Increase left padding to push text away from the left curve */
    padding: 40px 60px 40px 100px; 
    /* Force text to align to the left */
    text-align: left !important;
    /* Limit the width so text doesn't hit the right side curves */
    max-width: 80%;
    
}

/* Update your existing oval classes to be Flexbox containers */
.oval, .oval1, .oval2, .oval3 {
    display: flex;
    align-items: center;      /* Keeps text vertically centered */
    justify-content: flex-start; /* Pushes content to the left */
}

/* Styling for "WHO WE ARE" */
.oval.small h2 {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: 4px;
    margin: 0;
    padding-left: -5px; /* Aligns the header with the content below */
    white-space: nowrap;
    text-decoration: none;
    /* Create the underline using border-bottom for more control */
    border-bottom: 4px solid white;
    display: inline-block;
    padding-bottom: 5px;
}

/* Styling for the Main Body Text */

.oval1.big p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 300;
    text-align: left !important; /* Overrides any global centering */
}
.oval.big p {
    font-size: 15px; /* Matches your base P size */
    line-height: 1.6;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 300;
}

/* Adjusting your existing overlay for readability */
.oval1 {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
   border: 6px solid white;
}


.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 */
.oval1 img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

.oval img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

.oval1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #22419c;
}

.oval::after {
  content: "";
  position: absolute;
  inset: 0;
  background:#22419c;
}

/* Big oval */
.big {
    width: 1360px;
    height: 416px;
    top: -28px;
    /* Adjust 'left' to position the text exactly where you want it */
    left: -498px; 
    border-radius: 144% / 616%;
    z-index: 2;
}

/* Small oval */
.small {
  width: 578px;
  height: 128px;
  top: -124px;
  right: -50px;
  border-radius: 21% / 115%;
  z-index: 3;
}

.smaller {
  width: 295px;
  height: 119px;
  top: 355px;
  right: 165px;
  background: #4f86b5;
  border-radius: 30% / 90%;
  z-index: 3;
}

.smallest {
  width: 301px;
  height: 120px;
  top: 335px;
  right: 296px;
  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: 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.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;

  display: flex;
  flex-direction: column;
  align-items: center;       
  justify-content: flex-start; /* Keeps items flowing from the top down */
  
  position: relative;
  padding-top: 140px;          /* Adjusted to give space below sticky navbar */
  padding-bottom: 80px;
  min-height: 100vh;           
  overflow: hidden; 
  
  /* 2. Establish a parent stacking context */
  z-index: 1;
}

.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: -1; /* 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 .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

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


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

/* Container for the cards */
/* Owl Carousel Arrow Buttons */
.news-owl .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    font-size: 22px !important;
    color: #333 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.news-owl .owl-nav button:hover {
    background: #fff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transform: translateY(-50%) scale(1.1);
}

.news-owl .owl-nav .owl-prev {
    left: -60px;
}

.news-owl .owl-nav .owl-next {
    right: -60px;
}

.news-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.news-bottom-wrapper {
   /* width: 100%;
    z-index: 10; */
    position: relative;
    padding: 0 70px;
}

/* ✅ Smooth transition for all card elements */
.news-card,
.card-image,
.news-title,
.news-date,
.news-preview,
.card-body {
    transition: all 0.3s ease;
}

/* ✅ When detail is open — shrink everything */
.detail-open .news-card {
    border-radius: 20px;
    padding: 6px;
}

.detail-open .card-image {
    height: 120px; /* was 180px */
}

.detail-open .card-image img {
    border-radius: 14px;
    object-fit: contain;
}

.detail-open .card-body {
    padding: 8px 12px 12px 12px;
}

.detail-open .news-date {
    font-size: 0.75rem;
    margin: 6px 0 3px 0;
}

.detail-open .news-title {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
    min-height: unset;
}

.detail-open .news-preview {
    display: none; /* ✅ hide preview text to save space */
}

/* Individual Card Styling */
.news-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 10px;
    height: 100%;
    max-width: 330px; /* Limits the card width */
    margin: 0 auto;    /* Centers the card in its column */
    border: 2px solid transparent; 
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.news-section-inner {
    max-width: 1100px; /* Reducing this makes the cards thinner */
    margin: 0 auto;    /* Keeps the whole section centered */
    padding: 0 15px;
}

/* Image inside the card */
.card-image {
    width: 100%;
    height: 200px;        /* ✅ slightly taller */
    padding: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;  /* ✅ centers image vertically */
    justify-content: center;
}

.card-image img {
     width: 100%;
    height: 100%;
    object-fit: contain;     /* ✅ changed from cover to contain — shows full image */
    object-position: center;
    border-radius: 20px;
}

/* Text area inside the card */
.news-card .card-body {
   padding: 15px 20px 20px 20px; /* Reduced top padding */
    text-align: left;
}

.news-grid {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    margin-top: 20px; /* Adjust this to move cards away from the title */
}

/* 2. Change the title color to red when the CARD is hovered */
.news-card:hover .news-title {
    color: #ff0000 !important;
}

.news-card .card-title {
    color: #000;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

.news-card .card-text {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
}

@media (min-width: 992px) {
    #detail-image-container {
  /*      position: sticky; */
        top: 100px;
    }
}

#detail-full-text.ql-editor {
    color: #000000 !important; /* Forces black color */
    line-height: 1.6;
    padding-top: 0 !important;
}

/* Ensure all nested tags inside the Quill content are also black */
#detail-full-text.ql-editor p:first-child {
    margin-top: 0 !important;
}
#detail-full-text.ql-editor p, 
#detail-full-text.ql-editor span, 
#detail-full-text.ql-editor strong, 
#detail-full-text.ql-editor em {
    color: #000000 !important;
}

/* 1. Change the card border to red on hover */
.news-card:hover {
    border: 2px solid #ff0000 !important; /* Matches your 2nd image */
    transform: translateY(-5px); /* Adds a slight lift effect */
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.1);
}

.news-date {
    color: #000000 !important; /* Pure black instead of gray */
    font-weight: 700;          /* Makes it bold like the reference */
    display: block;
    margin: 15px 0 5px 0;
    font-size: 0.9rem;
    font-family: Arial, sans-serif; /* Matches the clean look in your image */
}

.news-title {
    color: #000000; /* Red title as seen in the first card of your image */
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-bottom: 10px; /* Reduced margin */
    line-height: 1.3;     /* Better spacing between lines */
    
    /* The magic code for '...' */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits to exactly 2 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Keeps all cards aligned even with 1-line titles */
}
.news-section-inner {
    max-width: 1100px; /* Adjust this number: smaller = thinner cards */
    margin: 0 auto;    /* Centers the whole block */
}

.news-summary {
    font-size: 0.9rem;
    color: #000;
    margin-top: 10px;
    line-height: 1.4; /* Increases space between lines of text */
    display: block;   /* Ensures it sits below the title */
    clear: both;
}

.news-preview {
    color: #000000 !important; /* Forces the color to pure black */
    font-weight: 600;          /* Makes the font appear bolder */
    font-size: 0.9rem;         /* Slightly larger for better readability */
    line-height: 1.5;
    
    /* Keep the ellipsis logic we set up earlier */
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-summary, .news-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* This limits the text to exactly 3 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis; /* This automatically adds the "..." */
    line-height: 1.5;
    margin-top: 10px;
}


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

.scrollable-content {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 15px;
}

#blog-detail-view {
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 40px;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    z-index: 10;
}

/* Custom scrollbar to match your design */
#blog-detail-view::-webkit-scrollbar {
    width: 6px;
}
#blog-detail-view::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
#blog-detail-view::-webkit-scrollbar-thumb {
    background: #cc0000;
    border-radius: 10px;
}

/* 
---------------------------------------------
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);
  }
}

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

  

}


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