/* Custom Styles for Top Bar and Navigation */

 /* Top Bar Styles */
 #topbar {
   background: #f8f9fa !important;
   padding: 8px 0;
   font-size: 13px;
   border-bottom: 1px solid #e9ecef;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
   height: 40px;
 }

 #topbar .container-fluid {
   padding: 0 15px;
 }

#topbar .contact-info {
  gap: 15px;
}

#topbar .contact-info a {
  color: #6c757d !important;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s;
}

#topbar .contact-info a:hover {
  color: #FAB05B !important;
}

#topbar .contact-info i {
  color: #6c757d !important;
  font-size: 14px;
  display: flex;
  align-items: center;
}

#topbar .contact-info i a {
  color: #6c757d !important;
  text-decoration: none;
  margin-left: 5px;
  transition: color 0.3s;
}

 #topbar .contact-info i a:hover {
   color: #FAB05B !important;
 }

 #topbar .contact-info a:hover {
   color: #FAB05B !important;
 }

 #topbar .contact-info a:hover i {
   color: #FAB05B !important;
 }

 /* Phone Contact Section */
#topbar .phone-contact {
  gap: 5px;
}

#topbar .phone-contact .phone-number {
  color: #6c757d;
  font-size: 13px;
  margin-right: 0;
}

#topbar .phone-contact .contact-icons {
  gap: 8px;
  padding-left: 6px;
  border-left: 1px solid #dee2e6;
}

 #topbar .phone-contact .phone-icon-link,
 #topbar .phone-contact .whatsapp-link {
   color: #6c757d !important;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   transition: all 0.3s;
 }

 #topbar .phone-contact .phone-icon-link:hover {
   color: #FAB05B !important;
   background-color: rgba(250, 176, 91, 0.1);
 }

 #topbar .phone-contact .phone-icon-link:hover i {
   color: #FAB05B !important;
 }

 #topbar .phone-contact .whatsapp-link:hover {
   color: #25D366 !important;
   background-color: rgba(37, 211, 102, 0.1);
 }

 #topbar .phone-contact .whatsapp-link:hover i {
   color: #25D366 !important;
 }

 #topbar .contact-info i span {
   margin-left: 6px;
   color: #6c757d !important;
 }

 #topbar .social-links a {
   color: #6c757d !important;
   padding: 0 8px;
   font-size: 16px;
   transition: color 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #topbar .social-links a:hover {
   color: #FAB05B !important;
 }

 /* Book a Call Button in Top Bar */
 #topbar .topbar-actions {
   gap: 15px;
 }

#topbar .book-call-btn {
  background: linear-gradient(135deg, #FAB05B 0%, #d89a4a 100%);
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(250, 176, 91, 0.3);
}

#topbar .book-call-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

#topbar .book-call-btn:hover::before {
  left: 100%;
}

#topbar .book-call-btn i {
  font-size: 12px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

#topbar .book-call-btn span {
  position: relative;
  z-index: 1;
}

#topbar .book-call-btn:hover {
  background: linear-gradient(135deg, #d89a4a 0%, #FAB05B 100%);
  color: #fff !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(250, 176, 91, 0.5);
}

#topbar .book-call-btn:hover i {
  transform: scale(1.2) rotate(5deg);
}

/* Pulsing animation for Book a Call button */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(250, 176, 91, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(250, 176, 91, 0.6);
  }
}

#topbar .book-call-btn {
  animation: pulse-glow 2s ease-in-out infinite;
}

 #topbar .social-links a svg {
   width: 18px;
   height: 18px;
   transition: fill 0.3s;
 }

 #topbar .social-links a:hover svg {
   fill: #FAB05B;
 }

 /* Footer social links X icon styling */
 .footer .social-links a svg {
   width: 18px;
   height: 18px;
   transition: fill 0.3s;
 }

 .footer .social-links a:hover svg {
   fill: currentColor;
 }

 .header {
   top: 40px;
 }

 .header.sticked {
   top: 40px;
 }

 /* Adjust hero section to account for top bar + header */
 #hero-static {
   margin-top: 0;
 }

 /* Navigation Menu Styling */
 .navbar ul {
   gap: 0;
 }

 .navbar a {
   text-transform: uppercase;
   font-weight: 500;
   font-size: 13px;
   letter-spacing: 0.8px;
   color: #6c757d;
   padding: 15px 20px !important;
   transition: all 0.3s;
   position: relative;
 }

 .navbar a:hover,
 .navbar .active {
   color: #FAB05B !important;
   background: transparent;
 }

 .navbar a.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 20px;
   right: 20px;
   height: 2px;
   background: #FAB05B;
 }

 .navbar a:before {
   display: none;
 }

 /* BLOG link highlighting when active */
 .navbar a[href*="medium.com"].active,
 .navbar a[href*="devputers.medium.com"].active {
   letter-spacing: 1.2px !important;
   color: #FAB05B !important;
 }

 .navbar a[href*="medium.com"].active::after,
 .navbar a[href*="devputers.medium.com"].active::after {
   height: 2px !important;
   background: #FAB05B !important;
 }

 /* Responsive adjustments */
 @media (max-width: 991px) {
   #topbar {
     display: none;
   }

   .header {
     top: 0;
   }
 }

 /* Tablet and Mobile Responsive Styles */
 @media (max-width: 991px) {
   /* Top Bar - Show but with better mobile styling */
   #topbar {
     position: relative;
     height: auto;
     padding: 10px 0;
   }

   #topbar .container-fluid {
     flex-direction: column;
     gap: 8px;
     padding: 0 10px;
   }

   #topbar .contact-info {
     width: 100%;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
   }

   #topbar .contact-info a {
     font-size: 12px;
     white-space: nowrap;
     font-weight: 500;
   }

   #topbar .phone-contact {
     margin: 0;
   }

   #topbar .topbar-actions {
     width: 100%;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
   }

   #topbar .book-call-btn {
     font-size: 11px;
     padding: 6px 12px;
     gap: 5px;
   }

   #topbar .book-call-btn span {
     display: inline; /* Show text on mobile */
   }

   #topbar .social-links {
     gap: 5px;
   }

   #topbar .social-links a {
     padding: 0 5px;
     font-size: 14px;
   }

   .header {
     top: 0;
   }

   /* Navigation adjustments */
   .navbar a {
     font-size: 12px;
     padding: 12px 15px !important;
   }

   .navbar a.active::after {
     left: 15px;
     right: 15px;
   }
 }

 /* Mobile Responsive Styles */
 @media (max-width: 768px) {
   /* Top bar mobile improvements */
   #topbar {
     padding: 8px 0;
   }

   #topbar .container-fluid {
     padding: 0 8px;
     gap: 6px;
   }

   #topbar .contact-info {
     gap: 8px;
     font-size: 11px;
   }

   #topbar .contact-info a {
     font-size: 11px;
     padding: 2px 0;
   }

   #topbar .topbar-actions {
     gap: 8px;
   }

   #topbar .book-call-btn {
     font-size: 10px;
     padding: 5px 10px;
   }

   #topbar .book-call-btn i {
     font-size: 11px;
   }

   #topbar .social-links a {
     font-size: 13px;
     padding: 0 4px;
   }

   /* Floating contact icons - larger for mobile */
   .floating-contact-icons {
     bottom: 80px;
     right: 12px;
   }

   .floating-contact-btn {
     width: 48px;
     height: 48px;
   }

   .floating-contact-btn i {
     font-size: 24px;
   }

   /* Navigation menu adjustments */
   .navbar a {
     font-size: 11px;
     padding: 10px 12px !important;
     letter-spacing: 0.5px;
   }

   .navbar a.active::after {
     left: 12px;
     right: 12px;
   }

   /* Contact section spacing */
   #team {
     padding-bottom: 30px !important;
   }

   #contact {
     padding-top: 30px !important;
   }

   /* Quick consult button */
   .quick-consult-btn {
     padding: 10px 20px !important;
     font-size: 14px !important;
   }
 }

 /* Small Mobile Devices */
 @media (max-width: 576px) {
   /* Top bar small mobile improvements */
   #topbar {
     padding: 6px 0;
   }

   #topbar .container-fluid {
     padding: 0 5px;
     gap: 5px;
   }

   #topbar .contact-info {
     gap: 6px;
     flex-direction: column;
     align-items: center;
   }

   #topbar .contact-info a {
     font-size: 10px;
     text-align: center;
   }

   #topbar .topbar-actions {
     gap: 6px;
   }

   #topbar .book-call-btn {
     font-size: 9px;
     padding: 4px 8px;
   }

   #topbar .book-call-btn span {
     display: none; /* Hide text on very small screens */
   }

   #topbar .social-links a {
     font-size: 12px;
     padding: 0 3px;
   }

   /* Floating contact icons */
   .floating-contact-icons {
     bottom: 70px;
     right: 10px;
     gap: 8px;
   }

   .floating-contact-btn {
     width: 44px;
     height: 44px;
   }

   .floating-contact-btn i {
     font-size: 20px;
   }

   /* Navigation - smaller text */
   .navbar a {
     font-size: 10px;
     padding: 8px 10px !important;
   }

   .navbar a.active::after {
     left: 10px;
     right: 10px;
   }
 }

 /* Contact Section Link Styling */
 .contact .info-item p a {
   color: #FAB05B;
   text-decoration: none;
   transition: color 0.3s;
 }

 .contact .info-item p a:hover {
   color: #d89a4a;
   text-decoration: underline;
 }

 /* Reduce spacing between Why Choose Us and Contact Us sections */
 #team {
   padding-bottom: 40px !important;
 }

 #contact {
   padding-top: 40px !important;
 }

 /* Quick Consult Button Styling */
 .quick-consult-button {
   width: 100%;
   margin-top: 10px;
 }

 .quick-consult-btn {
   background-color: #FAB05B !important;
   border-color: #FAB05B !important;
   color: #fff !important;
   padding: 12px 30px !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   border-radius: 5px !important;
   text-transform: uppercase !important;
   letter-spacing: 0.5px !important;
   transition: all 0.3s ease !important;
   display: inline-block !important;
   text-decoration: none !important;
 }

 .quick-consult-btn:hover {
   background-color: #d89a4a !important;
   border-color: #d89a4a !important;
   color: #fff !important;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(250, 176, 91, 0.3);
 }

 .quick-consult-btn:active,
 .quick-consult-btn:focus {
   background-color: #d89a4a !important;
   border-color: #d89a4a !important;
   color: #fff !important;
   box-shadow: 0 2px 4px rgba(250, 176, 91, 0.3);
 }

 /* Floating Contact Icons */
 .floating-contact-icons {
   position: fixed;
   right: 15px;
   bottom: 70px;
   z-index: 995;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .floating-contact-btn {
   width: 40px;
   height: 40px;
   border-radius: 4px;
   background: var(--color-primary);
   color: var(--color-white);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.4s;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 .floating-contact-btn i {
   font-size: 20px;
   color: var(--color-white);
   line-height: 0;
 }

 .floating-contact-btn:hover {
   background: rgba(var(--color-primary-rgb), 0.85);
   color: var(--color-white);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }

 .floating-contact-btn.whatsapp-btn:hover {
   background: #25D366;
 }

 .floating-contact-btn.whatsapp-btn:hover i {
   color: var(--color-white);
 }