/* ========= ROOT + GLOBAL ========= */
:root {
  --rhino-red: #ff0019;
  --rhino-dark: #000000;
  --rhino-accent: #c21021;
  --rhino-light: #f8f9fa;
  --navbar-height: 80px;
}


html,
body {
  scroll-behavior: smooth;
}

/* iOS status bar background color fix */
html {
  background-color: #212529; /* same as navbar bg-dark */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  scroll-padding-top: var(--navbar-height);
}



body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #ffffff;
  color: #212529;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}


* {
  box-sizing: border-box;
}



/* ========= NAVBAR ========= */

.nav-title {
color: #d6d6d6;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-right: 1rem;
  padding-top: 15px;
  transition: color .25s ease;
  flex-wrap:nowrap;  
}

.nav-brand{
display:flex;
align-items:center;
gap:12px;

text-decoration:none;
color:inherit;
}

.navbar .nav-item {
  display: flex;
  align-items: center;

}

.navbar{
position:relative;
top:25px;

left:50%;
transform:translateX(-50%);

width:1300px;
max-width:92%;

height:var(--navbar-height);

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

background:linear-gradient(
180deg,
#34393e 0%,
#1f2327 100%
);

border-radius:14px;

box-shadow:
0 20px 60px rgba(0,0,0,.55),
0 2px 8px rgba(0,0,0,.35);

border:1px solid rgba(255,255,255,.06);

z-index:10000;
}



/* ==========================
   PRECISION METAL SHINE
========================== */
.navbar::after {
  content: "";
  position: absolute;
  inset: 0;                 /* 🔥 lock to navbar bounds */
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;

  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.05) 35%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.18) 52%,
    rgba(255,255,255,0.05) 65%,
    transparent 100%
  );

  /* 🔥 CRITICAL CHANGE */
  background-size: 200% 100%;
  background-position: -120% 0;

  animation: navbarShimmerFixed 8s linear infinite;
}



.nav-container{

display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;

height:100%;
margin: auto;

max-width:1300px;

padding:0 30px;
}


.navbar-nav .nav-link {
  color: #d6d6d6;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-left: 18px;
  padding-right: 18px;
  transition: color .25s ease;
}

.navbar-nav .nav-link:hover {
  color: #ffffff;
}


/* NAV LINKS */

.nav-links{
display:flex;
gap:40px;
list-style:none;
margin:0;
padding-right:10px;
flex:1;
justify-content:center;
flex-wrap:nowrap;   /* important */
}

.nav-links a,
.navbar-nav .nav-link,
.nav-item{
white-space: nowrap;
}

.nav-item{
position:static;
padding: 20px  0;
color:white;
cursor:pointer;
flex-shrink:0;
font-weight:600;
}


.arrow{
font-size:10px;
margin-left:6px;
opacity:.75;

display:inline-block;

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
opacity .2s ease;
}

/* Arrow flip animation */

.nav-item:hover .arrow,
.nav-item:focus-within .arrow{
transform: rotate(180deg) translateY(-1px);
opacity:1;
}

.dropdown-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}

.simple-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}



/* ===============================
   MEGA MENU STRUCTURE
=============================== */

.mega-menu{

position:absolute;
top:100%;
left:0;
right:0;
margin:auto;


width:1200px;
max-width:95vw;

background:linear-gradient(
180deg,
#2b3035 0%,
#1b1f23 100%
);

border-radius:14px;

opacity:0;
visibility:hidden;

transition:
opacity .25s ease,
transform .35s cubic-bezier(.22,.61,.36,1);

box-shadow:0 40px 80px rgba(0,0,0,.55);

border:1px solid rgba(255,255,255,.06);


z-index:9999;

display:grid;

overflow: hidden;

/* THIS CREATES THE HORIZONTAL COLUMNS */


padding:40px 50px;

grid-template-columns:
220px
260px
260px
260px;

gap:40px;

}

/* ==========================
   MEGA MENU METAL SHINE
========================== */

.mega-menu::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
115deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.04) 35%,
rgba(255,255,255,0.18) 45%,
rgba(255,255,255,0.35) 50%,
rgba(255,255,255,0.18) 55%,
rgba(255,255,255,0.04) 65%,
rgba(255,255,255,0) 100%
);

background-size:200vw 100%;
background-position:-110vw 0;

animation:navbarShimmer 9s linear infinite;

pointer-events:none;
border-radius:inherit;

}


/* SHOW MENU */

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.mega-menu:hover {
  opacity:1;
  visibility:visible;
  transform: translateX(4%) translateY(0);
  pointer-events:auto;
}


.mega-grid{
pointer-events:none;
}

.nav-link-trigger{
display:flex;
align-items:center;
cursor:pointer;

padding:0 6px; /* extend hover area downward */
position:relative;
}


.nav-link-trigger::after{
content:"";
position:absolute;

left:0;
right:0;
bottom:-40px;   /* extends hover downward */

height:40px;

}

/* ===============================
   COLUMN STRUCTURE
=============================== */

.mega-column{
display:flex;
flex-direction:column;
gap:12px;
}

/* COLUMN DIVIDERS */

.mega-column:not(:last-child){
border-right:1px solid rgba(255,255,255,.08);
padding-right:30px;
}

/* ===============================
   CATEGORY COLUMN
=============================== */

.category{

padding:12px 14px;

cursor:pointer;

font-weight:600;

color:#d6d6d6;

transition:.2s;

border-radius:6px;

}

.category:hover{

background:rgba(255,255,255,.05);

}

.category.active{

background:rgba(255,255,255,.08);

border-left:4px solid var(--rhino-red);

color:white;

}

/* ===============================
   SUB LINKS
=============================== */

.mega-menu a{

text-decoration:none;

color:#cfd4d9;

font-weight:500;

padding:6px 0;

display:block;

transition:.2s;

}

.mega-menu a:hover{

color:var(--rhino-red);

}

/* ===============================
   DYNAMIC CONTENT PANELS
=============================== */

.content{

display:none;
flex-direction:column;
gap:10px;

}

.content.active{

display:flex;

}

/* ===============================
   MEGA MENU ARROW INDICATORS
=============================== */

.mega-column-arrow a{
position:relative;

display:block;
width:100%;

padding:8px 32px 8px 8px; /* gives room for arrow */

border-radius:6px;
}

.mega-column-arrow a::after{

content:"›";

position:absolute;

right:10px;   /* move arrow inside highlight */

top:50%;

transform:translateY(-50%);

font-size:14px;
font-weight:600;

color:#9aa3ab;

transition:transform .2s ease, color .2s ease;

}

.mega-column-arrow a:hover::after{
transform:translateY(-50%) translateX(3px);
color:var(--rhino-red);
}

/* ===============================
   ACTIVE PATH HIGHLIGHT
=============================== */

/* box highlight for all */
.mega-column a.active{
background:rgba(255,255,255,.05);
border-radius:6px;
padding-left:8px;
}

/* red text only for columns 2+ */
.mega-column:nth-child(n+2) a.active{
color:var(--rhino-red);
font-weight:600;
}


/* ===============================
   PROGRESSIVE MEGA MENU COLUMNS
=============================== */

.mega-column.column-3,
.mega-column.column-4{
opacity:0;
transform:translateX(12px);
pointer-events:none;
transition:
opacity .2s ease,
transform .2s cubic-bezier(.2,.8,.2,1);
}

.mega-column.visible{
opacity:1;
transform:none;
pointer-events:auto;
}

/* RIGHT SIDE */

.nav-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-actions input {
  width: 180px;
  min-width: 160px;
  background: #2a2e32;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  color: #fff;
}

.nav-actions input::placeholder {
  color: #9ca3af;
}



.call-btn{
  display:inline-flex;   /* 🔥 important for anchor buttons */
  align-items:center;
  justify-content:center;

  height:42px;

  background:var(--rhino-red);
  color:white;

  font-size:12px;
  font-weight:700;

  border-radius:10px;

   padding:0 16px;

  text-decoration:none;  /* 🔥 removes underline */

  border:none;

  transition:.25s;

  box-shadow:0 6px 18px rgba(255,0,25,.35);
}

.call-btn:hover{
background:#c80014;
transform:translateY(-2px);
box-shadow:0 10px 26px rgba(255,0,25,.45);
}

/* SIMPLE DROPDOWN */

.simple-dropdown {
  position: relative;
}

.simple-dropdown::after {

  content: "";

  position: absolute;
  left: 0;
  right: 0;

  top: 100%;        /* start directly under navbar */
  height: 30px;     /* 🔑 bridge gap */

}

.simple-dropdown .simple-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  margin-top: 0;          

  background: linear-gradient(
    180deg,
    #2b3035 0%,
    #1b1f23 100%
  );

  border-radius: 14px;

  box-shadow:
    0 40px 80px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.35);

  border: 1px solid rgba(255,255,255,.06);

  opacity: 0;
  visibility: hidden;

  transition: opacity .2s ease, transform .25s ease;

  z-index: 9999;
}


.simple-dropdown .simple-dropdown-menu::after {

  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.18) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.04) 65%,
    rgba(255,255,255,0) 100%
  );

  background-size:200vw 100%;
  background-position:-110vw 0;

  animation:navbarShimmer 9s linear infinite;
  animation-delay:-6.9s;

  pointer-events:none;
  border-radius:inherit;
}



.simple-dropdown:hover .simple-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* keep locked */
}

/* LINKS */
.simple-dropdown .simple-dropdown-menu a {
  position: relative;
  display: block;

  padding: 10px 14px;
  border-radius: 8px;

  color: #cfd4d9;
  text-decoration: none;
  font-weight: 500;

  transition: all 0.2s ease;
}


.simple-dropdown .simple-dropdown-menu a:hover {

  color: var(--rhino-red);

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );

  box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.06),
  0 6px 18px rgba(0,0,0,0.35);

}

.simple-dropdown .simple-dropdown-menu a::before {

  content:"";

  position:absolute;
  left:0;
  top:50%;

  transform:translateY(-50%);

  width:3px;
  height:70%;

  background:var(--rhino-red);

  border-radius:2px;

  opacity:0;
  transition:opacity 0.2s ease;

}

.simple-dropdown .simple-dropdown-menu a:hover::before {
  opacity:1;
}




/* NAVBAR LOGO */


.logo{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
white-space:nowrap;
}

.logo img{
height:100px;
width:auto;
display:block;
padding-right: 20px;
}


.logo-img2 {
  padding-top: 5.5rem;
  height: 450px;
  width: auto;
  margin-bottom: -60px;
  margin-left: -20px;
}

.logo-img3 {
  height: 400px;
  width: auto;
  margin-top: -150px;
  margin-bottom: -100px;
}

.logo-img4 {
  height: 160px;
  width: auto;
  margin-bottom: -20px;
}

.logo-img5 {
  height: 450px;
  width: auto;
  margin-top: -1.25in;
  margin-left: -60px;
}


.brand-text {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9rem;
  white-space:nowrap;
display:inline-block;
}

/* Accent text */
.text-accent {
  color: var(blue) !important;
}

.text-accent-price {
  color: var(--rhino-accent);
}

.text-accent-35 {
  color: var(--rhino-red);
}





/* ===============================
   SERVICE PAGE HERO BACKGROUNDS
   =============================== */

.hero-roofing {
  background: url("../img/roofinghero.jpg") center/cover no-repeat;
}

.hero-siding {
  background: url("../img/sidinghero.jpg") center/cover no-repeat;
}

.hero-windows {
  background: url("../img/windowhero.jpg") center/cover no-repeat;
}


/* ========= HERO MAIN PAGE========= */

.hero {
  position: relative;
  background: url("../img/Home\ Page/hero.jpg") center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  margin-top: -80px;
  padding-bottom: 1in;
}


/* Dark overlay for hero section */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);  /* adjust opacity as needed */
  z-index: 1;

}



/* Ensure hero content sits on top of overlay */
.hero .container {
  position: relative;
  z-index: 2;
}


.hero-half-container {
  transform: translateY(100px);
  padding-left: 1in;
  z-index: 2;
}

.hero h1 {
  margin: 0;
  
}

.hero h2 {
  margin: 0;
  transform: translateY(-20px);
}

.roof-h3 {
  margin-top: -100px;
  margin-left: -25px
}

.roof-lead {
  margin: 0;
  margin-left: -25px
}



.hero-card {
  /* Size */
  width: auto;
  height: 100%;

  /* Layout */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;

  /* Spacing */
  padding: 2rem;

  
  margin-top: -150px;

  /* Glass styling */
  background-color: rgba(46, 49, 51, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

  /* Layer safety */
  position: relative;
  z-index: 2;
  isolation: isolate;

  /* Remove problematic rules */
 margin-bottom: 0;
}



.card-body {
  display: flex;
  flex-direction: column;
}


/* ========= SERVICE SECTION ========= */

.section-title {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 2.1rem;
}

.cost-card {
  background: #1f1f1f;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.4);
}


.text-hero-funfacts {
  position: relative;
  margin-top: 0.5in; /* ≈ 28.8px */
  list-style-position: inside;
  padding-left: 0;
  text-align: left;
  
}

.text-hero-funfacts li {
  padding-left: 0.25rem;
  margin-bottom: .5rem;
}

.glass-card-hero {
  position: relative;
  list-style-position: inside;
  padding-left: 0;
  text-align: left;
}

.glass-card-hero li {
  padding-left: 0.25rem;
  margin-bottom: .5rem;
}


.glass-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}


/* ========= SECRET LOGIN TO RHINO CRM ========= */

.mhr-leads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 🔑 3 per row */
  gap: 16px; /* tighter spacing */
}

@media (max-width: 1200px) {
  .mhr-leads-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mhr-leads-grid {
    grid-template-columns: 1fr;
  }
}


.mhr-lead-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: visible;
}



.mhr-lead-card .dropdown-menu {
  top: 0;
  right: 100%;
  margin-right: 8px;
  left: auto !important;
  transform: none !important;
}

.pipeline-bar {
  border-bottom: 2px solid #444;
  padding-bottom: 10px;
  font-weight: 600;
  font-size: 1rem;
}

.pipeline-stage {
  flex: 1;
  padding: 10px;
  position: relative;
  color: #888;
}

.pipeline-stage.active {
  color: #fff;
}

.pipeline-stage::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 25%;
  width: 50%;
  height: 3px;
  background: #dc3545;
  opacity: 0;
}

.pipeline-stage.active::after {
  opacity: 1;
}

/* Progress Button */
.progress-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* +$200 badge */
.demo-bonus {
  margin-left: 10px;
  color: #00ff88;
  font-weight: bold;
}

/* Sales Inputs */
.sales-box {
  background: rgba(255,255,255,0.05);
  padding: 10px;
  margin-top: 15px;
  border-radius: 8px;
}

/* Confetti */
.confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  background: red;
  animation: fall 2s linear infinite;
  opacity: 0.8;
}

@keyframes fall {
  0% { transform: translateY(-20px); }
  100% { transform: translateY(120px); }
}



/* Contractors section – increase bullet spacing */
#contractors ul li {
  margin-bottom: 0.75rem; /* adjust as needed */
  line-height: 1.6;
}



/* ========= MATERIAL SAMPLES MAIN PAGE ========= */

.material-sample-wrapper-MAIN {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-MAIN {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* ========= MATERIAL SAMPLES ROOFING PAGE ========= */

.material-sample-wrapper-ROOFING {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-ROOFING {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* ========= MATERIAL SAMPLES SIDING PAGE ========= */

.material-sample-wrapper-SIDING {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-SIDING {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* ========= MATERIAL SAMPLES WINDOW PAGE ========= */

.material-sample-wrapper-WINDOWS {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-WINDOWS {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* ========= MATERIAL SAMPLES SOLAR PAGE ========= */

.material-sample-wrapper-SOLAR {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-SOLAR {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* ========= MATERIAL SAMPLES LAWNCARE PAGE ========= */

.material-sample-wrapper-LAWNCARE {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.material-sample-img-LAWNCARE {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* ========= FAQ / ICON BULLETS ========= */

.faq-item {
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.06);
}

.faq-item2 {
  width: 4in;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.06);
}

.faq-item3 {
  width: 5in;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.06);
}

.icon-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: green;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--rhino-red);
  color: #fff;
  font-size: 0.75rem;
}

/* ========= TIPS SECTION ========= */

.tips-section {
  background: url("../img/Home\ Page/roofing-bg.jpg") center/cover no-repeat, #111;
}

.tips-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.tip-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(109, 46, 46, 0.15);
  background: linear-gradient(145deg, rgba(136, 20, 20, 0.9), rgba(94, 1, 1, 0.5));
}

.tip-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* ========= SLOT MACHINE BANNER ========= */

/* ================= SLOT MACHINE BANNER ================= */

.slot-banner-section{
  background: linear-gradient(
    180deg,
    #1b1f23 0%,
    #000000 100%
  );

  padding: 80px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* subtle metal shimmer like your navbar */
.slot-banner-section::after{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.05) 45%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.05) 55%,
    transparent 100%
  );

  background-size:200% 100%;
  animation: slotShimmer 8s linear infinite;

  pointer-events:none;
}

@keyframes slotShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}

/* LAYOUT */
.slot-banner-container{
  max-width:1200px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* LEFT TEXT */
.slot-left h2{
  font-size:32px;
  font-weight:900;
  line-height:1.3;
}

/* DIVIDER */
.slot-divider{
  width:2px;
  height:100px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rhino-red),
    transparent
  );
}

/* RIGHT */
.slot-right{
  min-width:200px;
  text-align:center;
}

.slot-sub{
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#aaa;
  padding-top: 10px;
}

/* ================= SLOT MACHINE ================= */

.slot-inline{
  display:inline-block;
  margin: 0 8px;
}

.slot-machine{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* DIGITS */
.digit{
  width:34px;
  height:48px;
  overflow:hidden;

  background:#000;
  border-radius:8px;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.6);
}

/* number reel */
.digit-inner{
  display:flex;
  flex-direction:column;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.digit-inner span{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;
  font-weight:900;
  color:#fff;
}

/* comma styling */
.digit.comma{
  width:auto;
  background:transparent;
  box-shadow:none;
  font-size:28px;
  font-weight:900;
  color:#fff;
}

/* ACTIVE GLOW */
.digit.active{
  box-shadow:
    0 0 15px rgba(255,0,25,.8),
    inset 0 0 10px rgba(255,255,255,.1);
}

/* ================= RESPONSIVE ================= */

@media (max-width:768px){
  .slot-banner-container{
    flex-direction:column;
    text-align:center;
  }

  .slot-divider{
    width:80%;
    height:2px;
  }

  .slot-left h2{
    font-size:24px;
  }
}

/* ========= REVIEWS ========= */

.review-card {
  max-width: 640px;
  height: 2in;
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem 2rem;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.15);
}


.review-stars {
  color: #f5c518;             /* Gold star color */
  font-size: 1rem;
  letter-spacing: 4px;
  font-weight: 600;
}

/* ==================== STAR RATER FOR REVIEWS ==================== */

.star-rating {
  font-size: 2rem;
  cursor: pointer;
}

.star {
  color: #ccc;
  transition: color 0.2s ease, transform 0.1s ease;
  margin: 0 4px;
}

.star.hovered,
.star.selected {
  color: #f5c518;
}

.star:hover {
  transform: scale(1.15);
}

.review-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #374151;
}

.review-author {
  margin-top: 1.5rem;
  font-weight: 600;
  color: #111827;
}

.review-badge {
  height: 52px;
  margin: 0 0.25rem;
  object-fit: contain;
}

/* ========= TOASTS GLOBAL ========= */

/* Hide all toasts by default; Bootstrap will handle .show */
.toast.hide {
  opacity: 0;
}

/* Custom Rhino toast styling for inspection form */
.rhino-toast {
  background: var(--rhino-red);
  color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
  border: 2px solid var(--rhino-dark);
  padding: 0.75rem 1rem;
}

.rhino-toast .toast-body {
  font-size: 0.95rem;
}

.rhino-toast .btn-close {
  filter: invert(1);
}

/* ========= INSPECTION FORMS ========= */

#inspection-form .form-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

#inspection-form {
  scroll-margin-top: calc(var(--navbar-height) + 10px);
}

/* ========= BUTTONS ========= */

.btn-primary {
  background-color: var(--rhino-red);
  border-color: var(--rhino-red);
  
}


.btn-primary:hover,
.btn-primary:focus {
  background-color: #fa011a;
  border-color: #f4051d;
}


/* ===== SERVICE MAP SECTION ===== */

#service-map h2 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.instruction-list {
  list-style-type: disc;
  padding-left: 1.25rem;
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
}

#rhinoMap {
  width: 100%;
  height: 450px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.15);
}

#rhinoMapIN {
  width: 75%;
  height: 800px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.15);
  margin: 0 auto;
}

#rhinoMapMI{
  width: 75%;
  height: 800px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.15);
  margin: 0 auto;
}

#rhinoMapOH {
  width: 75%;
  height: 800px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.15);
  margin: 0 auto;
}


/* =========================
   RHINO MEGA FOOTER
========================= */

.rhino-footer{

background:linear-gradient(
180deg,
#34393e 0%,
#1f2327 100%
);
color:#ffffff;

padding:70px 0 30px;

}

/* ==========================
   FOOTER METAL SHIMMER
========================== */

.rhino-footer{
  position: relative; /* REQUIRED for overlay */
  overflow: hidden;
}

/* shimmer layer */
.rhino-footer::after{

  content:"";
  position:absolute;

  top:-20%;              /* 🔥 extend beyond top */
  left:-50%;             /* 🔥 start further off screen */

  width:200%;            /* 🔥 wider beam = smoother gradient */
  height:140%;           /* 🔥 ensures full vertical coverage */

  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.08) 42%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.18) 52%,
    rgba(255,255,255,0.08) 58%,
    rgba(255,255,255,0.02) 70%,
    rgba(255,255,255,0) 100%
  );

  transform: translateX(-100%);
  animation: shimmerMove 8s linear infinite;

  pointer-events:none;
  border-radius:inherit;

  will-change: transform;
}



/* ensure content stays above shimmer */
.footer-container,
.footer-bottom {
  position: relative;
  z-index: 2;
}

.rhino-footer::before{

  content:"";

  position:absolute;
  inset:0;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(0,0,0,0.25)
  );

  pointer-events:none;
  z-index:1;
}

.footer-container{

max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:
1.5fr
1fr
1fr
1fr;

gap:60px;

padding:0 40px;

}

.footer-logo{

height:320px;
margin-top:-100px;
margin-left: -25px;

}

.footer-description{

max-width:320px;
line-height:1.6;
margin-bottom:25px;

}


.social-icons {
  display: flex;
  gap: 20px;
  padding-bottom: 10px;
}

.social-btn {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f1f1f1;
  border-radius: 14px;

  text-decoration: none;

  transition: all 0.25s ease;
}

.social-btn i {
  font-size: 24px;
  color: #111;
}

/* 🔥 HOVER (optional but recommended) */
.social-btn:hover {
  background: var(--rhino-red);
  transform: translateY(-4px);
}

.social-btn:hover i {
  color: white;
}


.footer-socials a{

display:inline-block;
margin-right:15px;
font-weight:600;
color:#fffefe;
text-decoration:none;

}

.footer-col h3{

font-size:16px;
font-weight:800;
margin-bottom:14px;

}

.footer-col h4{
font-size:14px;
margin-top:20px;
margin-bottom:8px;
font-weight:700;

}

.footer-col a{
font-size: 12px;
display:block;
color:#e2dbdb;
text-decoration:none;
margin-bottom:6px;

transition:opacity .2s;

}

.footer-col a:hover{

opacity:.6;

}

.footer-bottom{

max-width:1300px;
margin:40px auto 0;

border-top:1px solid rgba(0,0,0,.2);

padding-top:20px;

display:flex;
justify-content:space-between;
align-items:center;

font-size:14px;

}

/* =========================================
   PREMIUM FINANCING BANNER (BOTTOM)
   ========================================= */

.financing-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55px;
  background: linear-gradient(90deg, #3d2a2a, #ff0101);
  color: #000;
  overflow: hidden;
  z-index: 11000;
  display: flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}

/* Shine overlay */
.financing-banner::before {
  content:"";
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 100%
  );

  transform: translateX(-100%);
  animation: shimmerMove 6s linear infinite;

  pointer-events:none;
  border-radius:inherit;

  will-change: transform; /* 🔥 GPU optimization */
}

@keyframes shineMove {
  0% { left: -75%; }
  100% { left: 125%; }
}

.financing-link{
  position:absolute;
  inset:0;              /* fills entire banner */
  display:flex;
  align-items:center;

  text-decoration:none;
  color:inherit;

  z-index:2;            /* above shimmer */
}


.financing-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: tickerMove 30s linear infinite;
}

.financing-white {
  color: #ffffff;
}

.ticker-item {
  padding-right: 120px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Animate exactly one content width */
@keyframes tickerMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Close button */
.financing-close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.2);
  border: none;
  color: #000;
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 11001;
}

.financing-close:hover {
  background: rgba(0,0,0,0.35);
}

/* Prevent page overlap */
body {
  padding-bottom: 55px;
}

/* =========================================
   SERVICE PAGE HERO SLIDER (PREMIUM)
   ========================================= */

.service-hero-slider-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 1.75rem;
  padding-top: .25in;
  padding-bottom: .75in;
  overflow: hidden;
}

.service-hero-slider {
  display: flex;
  transition: transform 0.9s cubic-bezier(.77,0,.18,1);
}

.service-hero-slide {
  min-width: 100%;
  display: flex;
  gap: 22px;
  justify-content: center;
}

.service-hero-slide img {
  width: 32%;
  height: 240px;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 
    0 20px 45px rgba(0,0,0,0.5),
    0 8px 20px rgba(0,0,0,0.35);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-hero-slide img:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 
    0 28px 60px rgba(0,0,0,0.65),
    0 12px 28px rgba(0,0,0,0.45);
}

/* Responsive */
@media (max-width: 992px) {
  .service-hero-slide img {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .service-hero-slide {
    flex-direction: column;
  }

  .service-hero-slide img {
    width: 100%;
    height: 220px;
  }
}

/* ===============================
   OUR PROCESS SECTION RHINO ROOFING
   =============================== */

.process-section {
  position: relative;
}

.process-line-wrapper {
  position: relative;
}

.process-line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--rhino-red),
    #8b0000
  );
  z-index: 1;
}

.process-step {
  position: relative;
  z-index: 2;
}

.process-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  background: var(--rhino-red);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border: 3px solid #ffffff;
}

.process-step h5 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.process-step p {
  max-width: 200px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 992px) {
  .process-line {
    display: none;
  }

  .process-step {
    margin-bottom: 2rem;
  }
}

/* ===============================
   CONTRACTING SECTION RHINO ROOFING
   =============================== */

.contracting-section {
  background: #ffffff;
}

.contracting-section .section-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.contracting-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #212529;
  margin-bottom: 1.5rem;
}

.contracting-section p {
  color: #555;
  line-height: 1.7;
}

.contracting-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}

.contracting-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.contracting-image:hover {
  transform: scale(1.03);
}

/* Outline button styled to your brand */
.contracting-outline {
  border: 2px solid var(--rhino-red);
  color: var(--rhino-red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contracting-outline:hover {
  background-color: var(--rhino-red);
  color: #ffffff;
}


/* ============================= */
/* SUPPLIERS SECTION */
/* ============================= */

.suppliers-section {
  padding: 80px 0;
  background: #f5f5f5; /* adjust to your theme */
}

.suppliers-title {
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.suppliers-subtitle {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.suppliers-list {
  font-size: 1.2rem;
  margin-bottom: 40px;
  font-weight: 500;
}

/* LOGO ROW */
.supplier-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* LOGO STYLE */
.supplier-logos img {
  max-height: 140px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.supplier-logos img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* WARRANTIES */

.warranty-img {
  height: 225px;
  width: auto;
  padding-bottom: .5rem;
}

/* LOGO ROW */
.warranty-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  padding-top: .5in;
  padding-bottom: .5in;
}

/* LOGO STYLE */
.warranty-logos img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.warranty-logos img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.repair-text{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* ========= COST BACKGROUND ========= */

#costs {
  background: url("../img/Home\ Page/section-bg.jpg") center/cover no-repeat !important;
  color: #fff;
  position: relative;
}

#costs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* dark overlay for readability */
  z-index: 0;
}

/* Ensure text and cards appear above overlay */
#costs > .container,
#costs * {
  position: relative;
  z-index: 1;
}


/* ===============================
   ROOF REPLACEMENT CONTENT SECTIONS
=============================== */

.roof-section {
  padding: 80px 0;
  background: #ffffff;
  
}

.roof-section.alt {
  background: #f5f5f5;
}

.roof-content {
  max-width: 900px;
}

.roof-content p {
  color: #555;
  line-height: 1.7;
}

.roof-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 25px;
}

.roof-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.roof-item strong {
  color: #111;
}

/* CTA BUTTON (matches your system but slightly larger) */
.roof-btn {
  display: inline-block;
  margin-top: 25px;

  background: var(--rhino-red);
  color: #fff !important;            /* 🔥 force white text */
  font-weight: 700;

  padding: 12px 22px;
  border-radius: 10px;

  text-decoration: none;
  letter-spacing: 0.05em;

  transition: transform .25s ease, box-shadow .25s ease;

  box-shadow: 0 10px 25px rgba(255,0,25,.25);
}

/* 🔥 FIXED HOVER */
.roof-btn:hover,
.roof-btn:focus,
.roof-btn:active {
  color: #fff !important;            /* 🔥 prevent blue */
  text-decoration: none;

  background: var(--rhino-red);      /* 🔥 NO darkening */
  
  transform: translateY(-2px);

  box-shadow: 0 14px 35px rgba(255,0,25,.35);
}

/* IMAGE STYLE (matches your existing contracting + slider look) */
.roof-img-wrap {
  width: 500px;
  height: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.45),
    0 10px 25px rgba(0,0,0,0.25);
}

.roof-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .5s ease;
}

.roof-img-wrap:hover img {
  transform: scale(1.04);
}

.section-img {
  width: 500px;
  height: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.45),
    0 10px 25px rgba(0,0,0,0.25);
}


.section-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .5s ease;
}

.section-img:hover img {
  transform: scale(1.04);
}


.material-card {
  border-radius: 1.5rem;
  overflow: hidden;
  background: #ffffff;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    0 8px 20px rgba(0,0,0,0.2);

  transition: transform .4s ease, box-shadow .4s ease;
}

.material-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.5),
    0 12px 30px rgba(0,0,0,0.3);
}

.material-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* 🔴 replaces yellow */
.material-card-body {
  background: var(--rhino-red);
  color: #fff;
  padding: 25px;
  text-align: left;
}

.material-card-body h4 {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.material-card-body p {
  opacity: 0.9;
}


/* ===== RHINO TIMELINE TABLE ===== */

.timeline-table {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;

  background: #ffffff;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.25),
    0 10px 25px rgba(0,0,0,0.15);
}

/* ROW STRUCTURE */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 18px 24px;
  font-size: 0.95rem;

  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 🔴 HEADER (THIS IS THE BIG CHANGE) */
.timeline-row.header {
  background: linear-gradient(
    135deg,
    var(--rhino-red),
    #8b0000
  );

  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.1);
}

/* ROW STRIPING */
.timeline-row:nth-child(even):not(.header) {
  background: #f6f6f6;
}

/* HOVER EFFECT (SUBTLE PREMIUM TOUCH) */
.timeline-row:not(.header):hover {
  background: rgba(255, 0, 25, 0.04);
  transition: background 0.2s ease;
}

/* LEFT COLUMN (WHEN) */
.timeline-row div:first-child {
  font-weight: 700;
  color: #111;
}

/* RIGHT COLUMN (DESCRIPTION) */
.timeline-row div:last-child {
  color: #555;
}

.section-block {
  padding: 90px 20px;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split.reverse {
  direction: rtl;
}

.split.reverse > * {
  direction: ltr;
}

.section-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}

.section-content h2 {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.section-content p {
  color: #555;
  line-height: 1.6;
}


.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.feature-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.feature-card-content {
  background: var(--rhino-red);
  color: white;
  padding: 20px;
}

.feature-card h4 {
  margin-bottom: 10px;
}

.image-col img {
  max-width: 500px;
  max-height: 600px;
  margin-bottom: -100px;
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
}

.image-3 img {
  max-width: 500px;
  max-height: 600px;
  border-radius: 1.5rem;
  width: 100%;
  height: auto;
}

.image-2 img {
  padding-top: .5in;
  max-width: 500px;
  border-radius: 1.5rem;
  max-height: 600px;
  width: 100%;
  height: 100%;
}

/* ========= RESPONSIVE ========= */

@media (max-width: 767.98px) {
  .hero {
    text-align: center;
  }

@media (max-width: 767.98px) {
  .hero-card {
    margin-top: 0;
    margin-bottom: 2rem;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767.98px) {
  .review-card {
    height: 2in;
  }
}


  .review-card {
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .hero {
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 767.98px) {
  .hero {
    padding-bottom: 6vh;
  }
}

@media (max-width: 300px) {
  .navbar-brand span {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

/* ===============================
   NAVBAR DROPDOWN HOVER (DESKTOP)
   =============================== */

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .navbar .dropdown-menu {
    margin-top: 0;
  }
}


@keyframes shimmerMove{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(100%);
  }
}





/* =========================
   MOBILE NAV SYSTEM (FIXED)
========================= */

@media (max-width: 992px){

  .nav-links{
    display:none !important;
  }

  .nav-actions{
    display:none !important;
  }

  .navbar{
    width:95%;
    height:70px;
  }

}

@media (max-width: 992px){
  .nav-title{
    display: none !important;
  }
}

/* HAMBURGER */

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:26px;
  height:2px;
  background:#fff;
  display:block;
  transition:.3s;
}

@media (max-width: 992px){
  .hamburger{
    display:flex;
  }
}

/* MOBILE MENU PANEL */

.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;

  width:88%;
  max-width:420px;

  height:100vh;

  background:linear-gradient(
    180deg,
    #34393e 0%,
    #1f2327 100%
  );

  z-index:999999;

  transition:right .45s cubic-bezier(.77,0,.18,1);

  padding-top:90px;

  box-shadow:
    -20px 0 60px rgba(0,0,0,.65),
    -4px 0 20px rgba(0,0,0,.35);

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-menu.active{
  right:0;
}

/* OVERLAY */

.mobile-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:.3s ease;

  z-index:999998;
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* INNER */

.mobile-menu-inner{
  padding:20px;
}

/* ITEM */

.mobile-item{
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:18px 0;
}

/* TITLE */

.mobile-title{
  display:flex;
  justify-content:space-between;
  align-items:center;

  font-weight:700;
  letter-spacing:.05em;
  color:#fff;

  cursor:pointer;
}

/* PLUS ROTATION */

.mobile-title span{
  transition:.3s;
}

.mobile-item.open .mobile-title span{
  transform:rotate(45deg);
}

/* SUB MENU */

.mobile-sub {
  max-height: 0;               /* 🔥 start CLOSED */
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 0;               /* remove spacing when closed */

  transition: 
    max-height 0.35s ease,
    margin-top 0.25s ease;
}

/* OPEN STATE */
.mobile-item.open .mobile-sub {
  max-height: 1000px;          /* 🔥 large enough for content */
  margin-top: 10px;
}

/* LINKS */

.mobile-sub a{
  color:#cfd4d9;
  text-decoration:none;
  font-weight:500;
}

/* CLOSE BUTTON */

.mobile-close{
  position:absolute;
  top:22px;
  right:20px;

  font-size:32px;
  color:#fff;

  cursor:pointer;
  z-index:100000;

  transition:.25s;
}

.mobile-close:hover{
  transform:scale(1.15);
  color:var(--rhino-red);
}

/* SEARCH */

.mobile-search{
  position:absolute;
  top:20px;
  left:20px;
  right:70px;

  display:flex;
  align-items:center;
  gap:10px;

  background:#2a2e32;
  border-radius:10px;

  padding:12px 14px;

  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.mobile-search i{
  color:#9ca3af;
}

.mobile-search input{
  width:100%;
  border:none;
  outline:none;

  background:transparent;
  color:#fff;

  font-size:14px;
}

.mobile-search input::placeholder{
  color:#9ca3af;
}

/* ✅ FIXED SCROLL LOCK (NO CLICK BUGS) */

body.menu-open{
  overflow:hidden;
  height:100vh;
}


/* MOBILE ACTIONS */
.mobile-nav-actions{
  display:none;
}

.mobile-nav-actions{
  position: relative;   /* 🔥 REQUIRED */
}



/* SEARCH ICON */
.mobile-search-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.05);
  color:#fff;
  cursor:pointer;
  transition:.25s;
}

.mobile-search-icon:hover{
  background:rgba(255,255,255,0.1);
}

/* SEARCH BAR */
.mobile-search-bar{
  position:relative;

  top:50%;
  left:-240px;   /* 🔥 start AFTER logo */
  margin-bottom: -45px;

  transform: translateY(-50%) scaleX(0);
  transform-origin:right;

  opacity:0;
  pointer-events:none;

  transition:
    transform .35s cubic-bezier(.77,0,.18,1),
    opacity .25s ease;

  z-index:10001;
}


.mobile-search-bar.active{
  transform: translateY(-50%) scaleX(1);
  opacity:1;
  pointer-events:auto;
}





.mobile-search-bar input{
  width:100%;
  padding:10px 14px;
  border:none;
  outline:none;
  border-radius:10px;
  background:#2a2e32;
  color:#fff;
}

.mobile-search-bar input::placeholder{
  color:#9ca3af;
}


.mobile-search{
  position: relative;
 
}


.search-wrapper{
  position: relative;
  width: 160px;
  padding-right: 20px;
}

.search-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;

  background: linear-gradient(
    180deg,
    #2b3035 0%,
    #1b1f23 100%
  );

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 20px 50px rgba(0,0,0,.55);

  overflow: hidden;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;

  transition: .25s ease;

  z-index: 10001;
}

.search-dropdown.active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-item{
  padding: 10px 14px;
  color: #cfd4d9;
  cursor: pointer;
  font-weight: 500;
  transition: .2s;
}

.search-item:hover{
  background: rgba(255,255,255,0.05);
  color: var(--rhino-red);
}


@media (max-width: 992px){

  .mobile-nav-actions{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 135px;   /* 🔥 tight + clean */
  }

/* HIDE TITLE ON MOBILE */
@media (max-width: 992px){
  .nav-title{
    display:none !important;
  }
}

@media (max-width: 992px){
  .call-btn{
    display: none !important;
  }
}

  .logo img{
    margin-left: -20px;
  }
}


@keyframes navbarShimmerFixed {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (max-width: 992px){

  .mobile-search{
    position: absolute;   /* 🔥 key change */
    top: 20px;            /* 🔥 move near X button */
    left: 20px;
    right: 70px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #2a2e32;
    border-radius: 10px;

    padding: 12px 14px;

    box-shadow: 0 6px 18px rgba(0,0,0,.35);

    z-index: 100000;
  }

}


@media (max-width: 768px){

  .roof-img-wrap{
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto;            /* 🔥 centers horizontally */

    display: flex;
    justify-content: center;   /* 🔥 ensures centering inside grid */

    border-radius: 1.25rem;    /* slightly tighter for mobile */
  }

  .roof-img-wrap img{
    width: 100%;
    height: auto;

    object-fit: contain;       /* 🔥 ensures full image visible */
    display: block;
  }

}





@media (max-width: 768px){

  /* 🔴 CENTER HERO LOGO */
  .logo-img5{
    display: block;
    margin-top: -60px;
    margin-left: 25px;   /* centers horizontally + adds spacing below */
    max-width: 80%;             /* prevents oversized logo on small screens */
    height: auto;
    padding-bottom: 50px;
  }

  /* 🔴 CENTER HERO CONTENT (text + logo together) */
  .hero-half-container{
    text-align: center;
  }

  /* 🔴 FIX HERO BACKGROUND SCALING */
  .hero{
    background-size: cover !important;     /* fills screen properly */
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

}

/* 🔴 FIX HERO LOGO & HEADER POSITIONING */

@media (max-width: 768px){

.roof-h3 {
  margin-bottom: -0px;
  margin-left: -90px
}

.roof-lead {
  position: relative;
  margin-right: -20px;
}
}




/* =========================================
   GLOBAL FADE-IN ON SCROLL
   ========================================= */

.fade-in-section{
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.fade-in-section.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Slightly faster utility if needed later */
.fade-in-fast{
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(.22,.61,.36,1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-in-section{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* =========================================
   RHINO 3D OFFSET HEADINGS (GLOBAL)
   ========================================= */

/* Base heading upgrade */ /* MAIN TEXT LAYER */
h1{
  font-weight: 900;              /* 🔥 thicker */
  font-size: 40px;
  letter-spacing: 0.04em;
  position: relative;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 2px 0 rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.55);
}


/* =========================================
   ACCENT WORD (FIRST WORD ONLY) HERO HEADERS
   ========================================= */

.hero-accent{
  position: relative;
  display: inline;
  color: #ffffff;
  z-index: 2;
}

/* 🔴 FIXED OFFSET SYSTEM */
.hero-accent::before{
  content: attr(data-text);

  position: absolute;
  inset: 0; /* 🔥 THIS is the key */

  color: var(--rhino-red);

  z-index: -1;

  /* 🔥 multi-line safe offset */
  transform: translate(3px, 3px);

  white-space: pre-wrap; /* 🔥 allows wrapping */

  text-shadow:
    1px 1px 0 #ff001e,
    2px 2px 0 #db001a,
    3px 3px 0 #ac0000,
    4px 4px 10px rgba(0,0,0,0.6);
}




/* =========================================
   EXTRA DEPTH OPTION (applies to all headings)
   ========================================= */

h1{
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 4px 0 rgba(0,0,0,0.35),
    0 12px 30px rgba(0,0,0,0.6);
}

.hero-rest{
  display: inline;
  position: relative;
  z-index: 2; /* keeps it above red offset */
}



@media (max-width: 768px){

  .hero-accent{
    display: inline-block;   /* 🔥 CRITICAL FIX */
  }

  .hero-accent::before{
    transform: translate(2px, 2px); /* 🔥 slightly tighter for small screens */
  }

}



/* =========================================
   MOBILE HERO CENTERING FIX (GLOBAL)
   ========================================= */

@media (max-width: 768px){

  /* 🔴 FULL HERO CENTER CONTROL */
  .hero.d-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    padding: 0 20px; /* breathing room */
  }

  /* 🔴 REMOVE DESKTOP OFFSETS */
  .hero-half-container {
    transform: none !important;        /* kills 100px drop */
    padding-left: 0 !important;        /* removes left push */
    margin-bottom: -60px;
    max-width: 600px;
  }

  /* 🔴 TYPOGRAPHY BALANCE */
  .hero h1,
  .hero h2,
  .hero h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 🔴 BUTTON CENTERING */
  .hero .btn {
    display: inline-block;
    margin: 0 auto;
  }

}










/* =========================================
   MOBILE FOOTER FIX (STACK + CLEAN SPACING)
   ========================================= */

@media (max-width: 768px){

  .footer-container{
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
  }

  /* 🔴 CENTER BRAND BLOCK */
  .footer-brand{
    text-align: center;
  }

  .footer-logo{
    margin: 0 auto 20px auto;
    height: 180px;
  }

  .footer-description{
    margin: 0 auto 20px auto;
  }

  .social-icons{
    justify-content: center;
  }

  /* 🔴 MAKE ALL LINK COLUMNS CLEAN */
  .footer-col{
    text-align: left;
    width: 100%;
  }

  .footer-col h3{
    font-size: 14px;
    margin-bottom: 10px;
  }

  .footer-col h4{
    font-size: 13px;
    margin-top: 16px;
    margin-bottom: 6px;
  }

  .footer-col a{
    font-size: 13px;
    padding: 4px 0;
  }

  /* 🔴 STACK SECTIONS NICELY */
  .footer-col:not(:last-child){
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 20px;
  }

  /* 🔴 BOTTOM BAR FIX */
  .footer-bottom{
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 20px;
  }

}








/* =========================================
   GLOBAL HERO OVERLAY SYSTEM
   ========================================= */

.hero {
  position: relative;
  overflow: hidden;
}

/* 🔴 UNIVERSAL DARK OVERLAY */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.65)
  );

  z-index: 1;
  pointer-events: none;
}

/* 🔴 ENSURE CONTENT SITS ABOVE OVERLAY */
.hero > * {
  position: relative;
  z-index: 2;
}


/* =========================================
   MOBILE TEXT SAFE MARGINS (.15in GUARANTEE)
   ========================================= */

@media (max-width: 768px){

  .roof-lead{
    padding-left: 0.15in;
    padding-right: 0.15in;

    margin-left: 0 !important;
    margin-right: 0 !important;

    max-width: 100%;
  }

}





/* =========================================
   PROCESS TIMELINE (MOBILE + TABLET)
   ========================================= */

@media (max-width: 1024px){

  /* 🔴 TURN GRID INTO VERTICAL STACK */
  .process-line-wrapper .row{
    display: flex !important;
    flex-direction: column !important;
    gap: 60px;

    position: relative;
    padding-left: 50px; /* space for timeline */
  }

  /* 🔴 FORCE COLUMNS FULL WIDTH (kills bootstrap behavior) */
  .process-step{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* 🔴 VERTICAL LINE */
  .process-line{
    display: block !important;

    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;

    width: 4px;
    height: auto;

    background: linear-gradient(
      to bottom,
      var(--rhino-red),
      #8b0000
    );
  }

  /* 🔴 STEP LAYOUT */
  .process-step{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    position: relative;
  }

  /* 🔴 ICON CONNECTED TO LINE */
  .process-icon{
    position: absolute;
    left: -50px;
    top: 0;

    margin: 0;
  }

  /* 🔴 TEXT CLEANUP */
  .process-step h5{
    margin-top: 0;
    font-size: 18px;
  }

  .process-step p{
    max-width: 100%;
    margin: 0;
    font-size: 14px;
  }

}



/* =========================================
   SCROLL TO TOP BUTTON
   ========================================= */

#scrollTopBtn {
  position: fixed;
  right: 25px;

  /* 🔥 sits ABOVE your 55px financing banner */
  bottom: 70px;

  width: 55px;
  height: 55px;

  border-radius: 50%;
  border: none;

  background: var(--rhino-red);
  color: #fff;

  font-size: 28px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 10px 25px rgba(255,0,25,.35),
    0 4px 10px rgba(0,0,0,.3);

  opacity: 0;
  visibility: visible;

  transform: translateY(20px) scale(0.9);

  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.25s ease;

  z-index: 20000; /* above everything */
}

/* SHOW STATE */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* HOVER EFFECT (premium feel) */
#scrollTopBtn:hover {
  transform: translateY(-4px) scale(1.05);

  box-shadow:
    0 18px 40px rgba(255,0,25,.45),
    0 6px 18px rgba(0,0,0,.4);

  background: #e00017;
}

/* MOBILE SIZE ADJUSTMENT */
@media (max-width: 768px){
  #scrollTopBtn {
    width: 55px;
    height: 55px;
    font-size: 22px;
    right: 15px;
    bottom: 75px;
  }
}