#top-bar {
   transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
   opacity: 1;
   height: auto;
   overflow: hidden;
   position: relative;
   z-index: 51;
}
.nav-link { position: relative; }
.nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 0;
   left: 50%;
   background-color: #F2A65A;
   transition: all 0.3s ease;
   transform: translateX(-50%);
}
.nav-link:hover::after { width: 70%; }
a, button { transition: all 0.3s ease; }
a:focus, button:focus, input:focus, textarea:focus {
   outline: 2px solid #F2A65A;
   outline-offset: 2px;
}
.hero-gradient {
   background: linear-gradient(90deg, rgba(15,61,62,0.95) 0%, rgba(15,61,62,0.7) 50%, rgba(15,61,62,0.4) 100%);
}

.banner-scroll {
   animation: scroll 25s linear infinite;
}
@keyframes scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}
.review-card {
   transition: all 0.3s ease;
}
.review-card:hover {
   transform: translateY(-10px);
}

.service-image {
   max-height: 400px;
   object-fit: cover;
   width: 100%;
}

.service-intro {
   margin-bottom: 8px !important;
}
.badge-shine {
   position: relative;
   overflow: hidden;
}
.badge-shine::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
   transform: rotate(45deg);
   animation: shine 3s infinite;
}
@keyframes shine {
   0% { left: -50%; }
   100% { left: 150%; }
}
.fadeIn {
   opacity: 0;
   animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

#mobile-menu {
   background: linear-gradient(135deg, #0F3D3E, #3A6351);
   box-shadow: 0 0 20px rgba(0,0,0,0.2);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100%;
   z-index: 100;
   display: flex;
   flex-direction: column;
}

#mobile-menu .flex-1 {
   padding: 1rem;
   overflow-y: auto;
}

#mobile-menu a {
   position: relative;
   padding: 0.5rem 0.75rem;
   margin: 0.125rem 0;
   width: 100%;
   text-align: left;
   color: white;
   border-radius: 0.5rem;
   display: flex;
   align-items: center;
   font-size: 0.9rem;
}

#mobile-menu a:not(.bg-sunlight):hover {
   background-color: rgba(255,255,255,0.1);
}

#mobile-menu a:before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 2px;
   height: 0;
   background-color: #F2A65A;
   transition: height 0.3s ease;
}

#mobile-menu a:hover:before {
   height: 70%;
}

#mobile-menu .text-sunlight {
   background-color: rgba(242,166,90,0.2);
}

#mobile-menu .text-sunlight:before {
   height: 70%;
}

#mobile-menu .text-forest {
   color: white;
}

#mobile-menu [class*="text-forest/"] {
   color: rgba(255,255,255,0.8);
}

#mobile-menu .pt-8 {
   border-top: 1px solid rgba(255,255,255,0.1);
   margin-top: 0.5rem;
   padding-top: 1rem !important;
}

#mobile-menu .bg-sunlight {
   background: #F2A65A;
   color: #0F3D3E;
}

.mobile-submenu {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding-left: 1rem;
}

.mobile-submenu.active {
   max-height: 200px;
}

.mobile-submenu a {
   padding: 0.5rem 1rem !important;
   margin: 0.125rem 0 !important;
   font-size: 0.9rem !important;
}

.instagram-follow-btn {
   margin-top: 2rem;
   margin-bottom: 2rem;
   display: inline-block;
}

body {
   overflow-x: hidden;
   width: 100%;
   position: relative;
}

@media (max-width: 768px) {
   #hem {
       background-position: center;
   }
   .hero-gradient {
       background: linear-gradient(90deg, rgba(15,61,62,0.95) 0%, rgba(15,61,62,0.85) 100%);
   }
   #main-header {
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
   }
   .review-card {
       margin-bottom: 1rem;
   }
   .banner-scroll {
       animation: scroll 15s linear infinite;
   }
   .container {
       max-width: 100%;
       width: 100%;
       overflow-x: hidden;
   }
   body, html {
       max-width: 100vw;
   }
}
@media print {
   header, .mobile-menu, footer, #top-bar { display: none !important; }
   body {
       color: #000;
       background: #fff;
   }
   a {
       text-decoration: underline;
       color: #000;
   }
   .container {
       width: 100%;
       max-width: 100%;
   }
   section {
       page-break-inside: avoid;
       margin-bottom: 2cm;
   }
}