/* ==========================================================================
   Custom Theme Override
   Colors derived from logo: #05526A (dark teal), #0A8EC7 (blue), 
   Black (#1a1a1a), White (#ffffff)
   ========================================================================== */

:root {
  --primary: #0A8EC7;
  --primary-dark: #05526A;
  --primary-light: #e8f4fa;
  --dark: #1a1a1a;
  --white: #ffffff;
  --light-bg: #f8fbfd;
  --border-light: #e8eef2;
}

/* ==========================================================================
   Section backgrounds - All light/white
   ========================================================================== */
.r-bg-a,
.r-bg-c,
.r-bg-d,
.r-bg-i,
.r-bg-x {
  background: var(--white) !important;
}

.sec-pad {
  background-color: var(--white);
}

section {
  background-color: var(--white);
}

/* Subtle alternate section */
.r-bg-c {
  background: var(--light-bg) !important;
}

/* ==========================================================================
   FIX #1: Remove yellow/peach background from blog section
   ========================================================================== */
.half-bg-ree:before {
  background: var(--white) !important;
  display: none !important;
}

.half-bg-ree {
  background: var(--white) !important;
}

/* ==========================================================================
   Gradient & colored buttons - use logo blue
   ========================================================================== */
.ree-btn-grdt1,
.ree-btn-grdt2 {
  background: var(--primary) !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  transition: background 0.3s ease, transform 0.2s ease;
}

.ree-btn-grdt1:hover,
.ree-btn-grdt2:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px);
}

.ree-btn0 {
  background: var(--primary) !important;
  background-image: none !important;
  color: #fff !important;
}

.ree-btn0:hover {
  background: var(--primary-dark) !important;
}

/* ==========================================================================
   Text colors
   ========================================================================== */
.ree-text,
.ree-tt {
  color: var(--primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--primary) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dark) !important;
}

.ree-text,
.ree-tt,
h1 .ree-text,
h1 .ree-tt,
h2 .ree-text,
h2 .ree-tt {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
}

p, li, span, a {
  color: #444;
}

a:hover {
  color: var(--primary);
}

/* ==========================================================================
   Header
   ========================================================================== */
.ree-header {
  background: var(--white) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.ree-header.sticky {
  background: var(--white) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* When scrolled (sticky), hide announcement bar and center logo + nav */
.ree-header.sticky .mini-header-bar {
  display: none !important;
}

/* Desktop sticky: center nav between logo and CTA */
@media (min-width: 992px) {
  .ree-header.sticky .menu-header.horzontl {
    justify-content: center !important;
    position: relative;
  }

  .ree-header.sticky .menu-logo {
    position: absolute;
    left: 20px;
  }

  .ree-header.sticky .ree-nav {
    margin: 0 auto !important;
  }

  .ree-header.sticky .ree-nav-cta {
    position: absolute;
    right: 20px;
  }
}

.mini-header-bar {
  background: var(--primary-dark) !important;
}

.mini-header-bar a {
  color: #fff !important;
}

.menu-links {
  color: var(--dark) !important;
}

.menu-links:hover {
  color: var(--primary) !important;
}

/* ==========================================================================
   FIX #2: Page title / header-title spacing below fixed header
   The header is fixed-top, so content goes behind it.
   Add top margin/padding to push page banners below the header.
   ========================================================================== */
body {
  padding-top: 0 !important;
}

/* Push first section below fixed header on all pages */
.header-title,
.page-heading-sec,
.home-hero.slide-hero,
.header-title.pera-block {
  margin-top: 90px !important;
}

/* About page heading */
.about-pag-head {
  margin-top: 90px !important;
  padding-top: 40px !important;
}

/* Contact page heading */
.header-title.pera-block.slide-hero {
  margin-top: 90px !important;
}

/* ==========================================================================
   FIX #3: Hero Section - Keep original look, just ensure proper spacing
   ========================================================================== */
.home-hero.slide-hero {
  margin-top: 90px !important;
  background: var(--light-bg) !important;
}

/* Owl dots styling for hero */
.home-hero .owl-dots .owl-dot span {
  background: var(--border-light) !important;
}

.home-hero .owl-dots .owl-dot.active span {
  background: var(--primary) !important;
}

/* ==========================================================================
   Cards & Service blocks
   ========================================================================== */
.ree-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.ree-card:hover {
  box-shadow: 0 8px 30px rgba(10, 142, 199, 0.1) !important;
  transform: translateY(-4px);
}

.ree-card-link {
  color: var(--primary) !important;
}

.ree-card-link:hover {
  color: var(--primary-dark) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-a {
  background: var(--primary-dark) !important;
}

.footer-a h5,
.footer-a .footer-links-list a,
.footer-a .social-linkz a,
.footer-a p,
.footer-a .ft-copyright p {
  color: rgba(255,255,255,0.85) !important;
}

.footer-a .footer-links-list a:hover,
.footer-a .social-linkz a:hover {
  color: #fff !important;
}

/* Footer logo column - vertically centered */
.footer-logo-col {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
}

.footer-logo-col .footer-logo {
  display: flex;
  align-items: center;
}

/* Social media icons - white color */
.footer-a .social-linkz a,
.footer-a .social-linkz a span,
.footer-a .social-linkz a i {
  color: #fff !important;
}

.footer-a .social-linkz a:hover,
.footer-a .social-linkz a:hover span,
.footer-a .social-linkz a:hover i {
  color: var(--primary-light) !important;
  opacity: 0.85;
}

.featuredon {
  background: var(--light-bg) !important;
}

.featuredon h4 {
  color: var(--dark) !important;
}

/* ==========================================================================
   Process / steps section
   ========================================================================== */
.process-content {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
}

.setps {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   Industry icons
   ========================================================================== */
.industry-workfor {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
}

.industry-workfor:hover {
  border-color: var(--primary) !important;
}

/* ==========================================================================
   Numbers / features
   ========================================================================== */
.numbers-feature .number-f h2 {
  color: var(--primary) !important;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.nav-pills-custom .nav-link.active {
  background: var(--primary) !important;
  color: #fff !important;
}

.nav-pills-custom .nav-link {
  color: var(--dark) !important;
}

/* ==========================================================================
   Counter / stats
   ========================================================================== */
.counter {
  color: var(--primary) !important;
}

/* ==========================================================================
   Header title / page banner - visible below header
   ========================================================================== */
.header-title {
  background: var(--primary-dark) !important;
  padding: 50px 0 !important;
}

.header-title h1 {
  color: #fff !important;
}

.header-title p {
  color: rgba(255,255,255,0.85) !important;
}

.header-title .sub-heading {
  color: rgba(255,255,255,0.9) !important;
}

.header-title .sub-heading i {
  color: rgba(255,255,255,0.9) !important;
}

.header-title.head-opacity {
  position: relative;
}

.header-title.head-opacity::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 82, 106, 0.85);
  z-index: 0;
}

.header-title.head-opacity > .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Testimonial section
   ========================================================================== */
.bg-opcty {
  background: var(--light-bg) !important;
}

.bg-opcty h2 {
  color: var(--dark) !important;
}

/* ==========================================================================
   CTA section
   ========================================================================== */
.cta-info-tt {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   Blog cards
   ========================================================================== */
.half-blog-card {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.half-blog-card:hover {
  box-shadow: 0 8px 30px rgba(10, 142, 199, 0.08) !important;
}

/* ==========================================================================
   Mega menu
   ========================================================================== */
.menu-dropdown {
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
}

.menu-headings {
  color: var(--primary-dark) !important;
}

.menu-li-link li a {
  color: #444 !important;
}

.menu-li-link li a:hover {
  color: var(--primary) !important;
}

.menu-extra-info {
  background: var(--light-bg) !important;
  border-top: 1px solid var(--border-light) !important;
}

/* ==========================================================================
   About page
   ========================================================================== */
.page-heading-sec {
  background: var(--light-bg) !important;
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-block {
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   Icon block
   ========================================================================== */
.icon-block-ree {
  background: var(--white) !important;
}

.icon-card-title img {
  filter: none !important;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */
@media (max-width: 991px) {
  .header-title,
  .page-heading-sec,
  .home-hero.slide-hero,
  .header-title.pera-block,
  .about-pag-head {
    margin-top: 75px !important;
  }

  /* Fix: allow header to grow with announcement bar */
  html body .header-bhv,
  .ree-header {
    height: auto !important;
  }

  /* Mobile: keep logo on left, hamburger on right, vertically centered */
  .menu-header.horzontl {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 65px;
    padding: 0 15px;
  }

  .menu-logo {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-logo .dskt-logo {
    float: none !important;
    line-height: normal !important;
    display: flex;
    align-items: center;
  }

  .menu-logo .dskt-logo .ree-logo {
    max-height: 50px;
  }

  .mobile-menu2 {
    display: flex !important;
    align-items: center;
    height: 100%;
  }

  .mobile-menu2 .mob-nav2 {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  .mobile-menu2 .mob-nav2 li {
    display: flex;
    align-items: center;
  }

  .ree-nav-cta {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .header-title,
  .page-heading-sec,
  .home-hero.slide-hero,
  .header-title.pera-block,
  .about-pag-head {
    margin-top: 65px !important;
  }

  /* Fix: allow header to grow with announcement bar */
  html body .header-bhv,
  .ree-header {
    height: auto !important;
  }

  /* Mobile: logo left, items right, all vertically centered */
  .menu-header.horzontl {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px;
    padding: 0 10px;
  }

  .menu-logo {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-logo .dskt-logo {
    float: none !important;
    line-height: normal !important;
    display: flex;
    align-items: center;
  }

  .menu-logo .dskt-logo .ree-logo {
    max-height: 40px;
  }

  .mobile-menu2 {
    display: flex !important;
    align-items: center;
    height: 100%;
  }

  .mobile-menu2 .mob-nav2 {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .mobile-menu2 .mob-nav2 li {
    display: flex;
    align-items: center;
  }
}

/* ==========================================================================
   Announcement Bar - Social Icons (Right Side)
   ========================================================================== */
.mini-header-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 20px !important;
}

.mini-header-bar .sideone {
  display: flex;
  align-items: center;
}

.mini-header-bar .sidetwo {
  display: flex;
  align-items: center;
}

.mini-header-bar .mini-social {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 12px;
}

.mini-header-bar .mini-social li a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px;
  transition: color 0.2s ease;
}

.mini-header-bar .mini-social li a:hover {
  color: #fff !important;
}

@media (max-width: 767px) {
  .mini-header-bar .sidetwo {
    display: none;
  }
}

/* ==========================================================================
   SEO Sub-Footer
   ========================================================================== */
.sub-footer {
  background: #1a1a2e !important;
}

.sub-footer h5 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 8px;
}

.sub-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 20px;
}

.sub-footer-links a {
  color: #adb5bd !important;
  font-size: 12.5px !important;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.8;
}

.sub-footer-links a:hover {
  color: var(--primary) !important;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .sub-footer {
    padding: 25px 0 20px !important;
  }
  
  .sub-footer-links {
    gap: 4px 10px;
  }
  
  .sub-footer-links a {
    font-size: 11.5px !important;
  }
}