/* Header Styles */
.sbr-header {
   background: #333;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   transition: all 0.3s ease;
}

.sbr-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 2rem;
   max-width: 1200px;
   margin: 0 auto;
}


/* Logo Styles */
.sbr-logo {
   text-decoration: none;
   display: flex;
   align-items: center;
   transition: opacity 0.3s ease;
}

.sbr-logo img {
   height: 50px;
   width: auto;
   transition: opacity 0.3s ease;
}

.sbr-logo:hover img {
   opacity: 0.8;
}


/* Navigation Menu Styles */
.sbr-nav-menu {
   display: flex;
   list-style: none;
   gap: 2rem;
   align-items: center;
}

.sbr-nav-item {
   position: relative;
}

.sbr-nav-link {
   text-decoration: none;
   color: #fff;
   font-weight: 500;
   font-size: 1rem;
   padding: 0.5rem 0;
   transition: color 0.3s ease;
}

.sbr-nav-link:hover {
   color: #52a842;
}

.sbr-nav-link.active {
   color: #52a842;
   font-weight: 600;
}

.sbr-nav-link.active::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   right: 0;
   height: 2px;
   background: #6acc5b;
}


/* Phone Navigation Styles */
.sbr-phone-nav {
   background: #6acc5b;
   color: white;
   padding: 0.75rem 1.5rem;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 600;
   transition: background 0.3s ease;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.sbr-phone-nav:hover {
   background: #52a842;
}


/* Mobile Menu Toggle Styles */
.sbr-mobile-menu-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 1.5rem;
   color: #fff;
   cursor: pointer;
   padding: 0.5rem;
   z-index: 1001;
   position: relative;
   transition: transform 0.3s ease;
}

.sbr-mobile-menu-toggle:hover {
   transform: scale(1.1);
}


/* Mobile Menu Overlay */
.sbr-mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #333;
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sbr-mobile-menu.active {
   opacity: 1;
   visibility: visible;
   display: flex;
   align-items: center;
   justify-content: center;
}

.sbr-mobile-menu-content {
   text-align: center;
   width: 100%;
   max-width: 400px;
   padding: 2rem;
   transform: translateY(30px);
   transition: transform 0.4s ease;
}

.sbr-mobile-menu.active .sbr-mobile-menu-content {
   transform: translateY(0);
}

.sbr-mobile-logo {
   margin-bottom: 3rem;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.sbr-mobile-menu.active .sbr-mobile-logo {
   opacity: 1;
   transform: translateY(0);
}

.sbr-mobile-logo img {
   height: 60px;
   width: auto;
}

.sbr-mobile-nav-menu {
   list-style: none;
   padding: 0;
   margin: 0;
}

.sbr-mobile-nav-item {
   margin-bottom: 1rem;
   opacity: 0;
   transform: translateX(-20px);
   transition: opacity 0.4s ease, transform 0.4s ease;
   position: relative;
}

.sbr-mobile-menu.active .sbr-mobile-nav-item {
   opacity: 1;
   transform: translateX(0);
}

.sbr-mobile-menu.active .sbr-mobile-nav-item:nth-child(1) { transition-delay: 0.3s; }
.sbr-mobile-menu.active .sbr-mobile-nav-item:nth-child(2) { transition-delay: 0.4s; }
.sbr-mobile-menu.active .sbr-mobile-nav-item:nth-child(3) { transition-delay: 0.5s; }
.sbr-mobile-menu.active .sbr-mobile-nav-item:nth-child(4) { transition-delay: 0.6s; }
.sbr-mobile-menu.active .sbr-mobile-nav-item:nth-child(5) { transition-delay: 0.7s; }

.sbr-mobile-nav-item::after {
   content: '';
   position: absolute;
   bottom: 0.25rem;
   left: 50%;
   transform: translateX(-50%);
   width: 50px;
   height: 2px;
   background: #6acc5b;
}

.sbr-mobile-nav-item:last-child::after {
   display: none;
}

.sbr-mobile-nav-link {
   display: block;
   padding: 1.25rem 2rem;
   text-decoration: none;
   color: #fff;
   font-weight: 500;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   border-radius: 8px;
}

.sbr-mobile-nav-link:hover {
   background: #52a842;
   transform: translateY(-2px);
}

.sbr-mobile-phone {
   display: inline-flex;
   padding: 1rem 1.5rem;
   text-decoration: none;
   color: #fff;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   border-radius: 8px;
   background: #6acc5b;
   margin-top: 1.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
}

.sbr-mobile-phone:hover {
   background: #52a842;
   transform: translateY(-2px);
}


/* Responsive Design */

/* Tablet Styles */
@media (max-width: 1024px) {
   .sbr-nav {
       padding: 1rem 1.5rem;
   }
   
   .sbr-nav-menu {
       gap: 1.5rem;
   }
   
   .sbr-logo img {
       height: 45px;
   }
   
   .sbr-nav-link {
       font-size: 0.95rem;
   }
}

/* Mobile Styles */
@media (max-width: 768px) {
   .sbr-nav {
       padding: 1rem;
   }
   
   .sbr-logo img {
       height: 40px;
   }
   
   .sbr-nav-menu {
       display: none;
   }
   
   .sbr-mobile-menu-toggle {
       display: block;
   }
   
   .sbr-logo.hidden {
       opacity: 0;
       pointer-events: none;
   }
}