/* HR Moving Stylesheet */
a{
  text-decoration: none !important;
}
/* HERO */
.hero{
  background-image:url(banner.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  background-position:right bottom, center;
  height:85vh;
  position:relative;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1;
}
.hero::after{
  /* removed PNG background in favor of inline SVG divider in HTML */
  display: none;
}

.hero{overflow:visible}

/* inner-banner (used on About page) */
.inner-banner{position:relative;display:flex;align-items:center;justify-content:center;min-height:60vh;overflow:visible}
.inner-banner::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.45);z-index:1}
.pill-cta{display:inline-block;background:#00b67a;color:#fff;padding:.45rem .9rem;border-radius:20px;font-weight:600;margin-bottom:12px}
.fs-65{font-size:44px}
@media(max-width:768px){.fs-65{font-size:28px}}

/* inline SVG divider styling */
.hero-divider{position:absolute;bottom:-6px;left:0;right:0;overflow:hidden;line-height:0;z-index:2}
.hero-divider svg{display:block;width:130%;height:180px;transform:translateX(-15%)}
.hero .position-relative{position:relative;z-index:3}

/* NAVBAR */
.top-nav-wrapper{position:relative;z-index:1000}
.nav-card{
  background:#fff;
  border-radius:8px;
  padding:18px 22px;
  box-shadow:0 8px 30px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1100px;
  margin:18px auto;
  /* fixed on desktop */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) !important;
  width: calc(100% - 40px);
  z-index: 1050;
}
.brand-left{font-weight:700;font-size:18px;color:#111;position:relative}
.brand-left:before{
  content:"";
  position:absolute;
  width:120px;height:36px;left:-21px;top:39px;
  background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 120 36\"><path fill=\"%23ffffff\" d=\"M0,0 Q20,14 40,10 T80,12 T120,4 L120,36 L0,36 Z\"></path></svg>') no-repeat;
  transform: rotateX(-140deg);
}
.nav-links{display:flex;gap:24px;align-items:center;justify-content:center;flex:1}
.nav-links .nav-link{color:#0b0b0b;font-weight:600;text-decoration:none}
.nav-links .nav-link:hover{color:#0a7f6b}
.get-quote-btn{background:#0b0b0b;color:#fff;border-radius:6px;padding:10px 16px;text-decoration:none;display:inline-block}

/* ABOUT US */
.about-section {
  background: rgb(233, 247, 246);
}
.about-sub{font-size:0.9rem;text-transform:uppercase;color:#6c757d}
.about-title{font-size:2rem;font-weight:700}
.service-box{
  background:#ffffff; /* revert box background to white */
  border-radius:12px;
  padding:25px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
  text-align:center;
  transition: transform 0.3s ease, color 0.25s ease;
  color: #0b0b0b;
}
.service-box:hover{
  transform:translateY(-5px);
}
.service-box i{
  color: #017B6E; /* icon color */
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
/* Only apply circle background to icons without inline fa-2x or fa-3x size */
.service-box i.fa-2x,
.service-box i.fa-3x {
  background: transparent !important;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: inline-block;
}
/* Circle icon treatment for icons in service boxes (without size classes) */
.service-box i:not(.fa-2x):not(.fa-3x){
  background:#E5F1F0; /* round circle default background */
  border-radius:50%;
  padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.service-box:hover i:not(.fa-2x):not(.fa-3x){
  background: #017B6E; /* round circle hover background */
  color: #ffffff; /* icon color on hover */
  transform: translateY(-3px);
}
/* Keep larger icons visible on hover */
.service-box:hover i.fa-2x,
.service-box:hover i.fa-3x {
  color: #017B6E !important;
  transform: scale(1.1);
}
/* contact */
.contact-card {
  background: #fff;
  padding: 50px 20px;
  border-radius: 12px;
}
/* FOOTER */
footer{
  background:#0c0c0c;
  color:#fff;
  padding:40px 0;
}

/* Gallery */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  padding: 15px;
  font-weight: 600;
  text-align: center;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 182, 122, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 182, 122, 0);
  }
}

/* Hamburger Menu Button */
.hamburger-menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1101;
  position: relative;
}

.hamburger-menu span {
  display: block;
  width: 28px;
  height: 3px;
  background: #0b0b0b;
  transition: all 0.3s ease;
  border-radius: 2px;
  pointer-events: none;
  transform-origin: center;
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px) !important;
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0 !important;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px) !important;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  z-index: 1090;
  overflow-y: auto;
}

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

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-close-btn {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1101;
  position: relative;
}

.mobile-close-btn span {
  display: block;
  width: 28px;
  height: 3px;
  background: #0b0b0b;
  transition: all 0.3s ease;
  border-radius: 2px;
  pointer-events: none;
  transform-origin: center;
}

/* Mobile close button always shows as X */
.mobile-close-btn span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.mobile-close-btn span:nth-child(2) {
  opacity: 0;
}

.mobile-close-btn span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.close-menu {
  background: none;
  border: none;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  color: #0b0b0b;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.close-menu:hover {
  transform: rotate(90deg);
}

.mobile-menu-content {
  padding: 20px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mobile-nav-link {
  color: #0b0b0b;
  font-weight: 600;
  padding: 15px 10px;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.3s ease, background 0.3s ease;
}

.mobile-nav-link:hover {
  color: #0a7f6b;
  background: #f8f9fa;
}

.mobile-quote {
  margin-top: 20px;
  text-align: center;
  display: block;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1089;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media(max-width:991px){
  /* make navbar static on mobile so it doesn't obscure content */
  .nav-card{
    padding:12px 16px; 
    position: static !important; 
    transform: none !important; 
    left: auto !important;
    width: auto; 
    margin: 10px;
    max-width: none;
    z-index: 1100;
  }
  .nav-links{display:none}
  .hamburger-menu{
    display:flex !important;
    position: relative;
    z-index: 1101;
  }
  .desktop-quote{display:none}
  body{padding-top:0}
  .brand-left{font-size:16px}
}

@media(min-width:992px){
  .mobile-menu{display:none}
  .mobile-quote{display:none}
  .hamburger-menu{display:none !important}
  /* Add top padding to body to account for fixed navbar */
  body{padding-top:100px}
}

/* Animations */
.animate{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.9,.2,1),transform .6s cubic-bezier(.2,.9,.2,1);transition-delay:var(--delay,0s);will-change:opacity,transform}
.animate.in-view{opacity:1;transform:none}
.fade-in{transition-duration:.75s}
.slide-up{transform:translateY(20px)}
.pill-cta.animate{transform:translateY(8px)}
.service-box.animate{transition-duration:.5s}
.contact-card.animate{transition-duration:.5s}
footer .col-md-4.animate{transform:translateY(8px)}
.nav-card.animate{opacity:0;transform:translateY(-6px)}
.nav-card.animate.in-view{opacity:1;transform:none}

/* subtle hover/interactive micro-animations */
.get-quote-btn{transition:transform .18s ease, box-shadow .18s ease}
.get-quote-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,11,11,0.12)}