/* ================================
   HAD CONSULTANTS - CLEAN BRANDING
   ================================
   
   Minimal, clean CSS that provides HAD branding without breaking
   the original template design. Only changes what's necessary.
   
   HAD Brand Colors:
   - Primary Orange: #FF6600
   - Primary Blue: #1E5F99
   - Secondary Blue: #2E9BD8
   ================================ */

:root {
  /* HAD Brand Colors */
  --had-orange: #FF6600;
  --had-blue: #1E5F99;
  --had-light-blue: #2E9BD8;
  --had-white: #FFFFFF;
  --had-gray: #6B6B6B;
  
  /* Override template purple colors with HAD orange */
  --vtc-bg-main10: linear-gradient(90deg, #FF6600 0%, #FF8533 100%);
  --vtc-bg-main11: linear-gradient(90deg, #FF8533 0%, #CC5200 100%);
  --vtc-bg-main12: #FF6600;
  --vl-theme-orange: #FF6600;
}

/* Hero section - use HAD blue gradient */
.hero5 {
  background: linear-gradient(135deg, #1E5F99 0%, #2E9BD8 100%) !important;
}

/* Buttons - use HAD orange */
.theme-btn7::after {
  background: var(--vtc-bg-main10) !important;
}

/* .theme-btn6 {
  color: var(--had-white) !important;
} */

.theme-btn6::after {
  background: var(--had-white) !important;
}

.theme-btn6::before {
  background: var(--vtc-bg-main11) !important;
}

/* Service numbers - HAD orange */
.service5-box .number.green5 {
  background: var(--had-orange) !important;
  color: var(--had-white) !important;
}

/* Check marks - HAD orange */
.check.theme-bg5 {
  background: var(--had-orange) !important;
  color: var(--had-white) !important;
}

/* Sub-titles - HAD orange */
.sub-title5 {
  color: var(--had-orange) !important;
}

/* Counter numbers - HAD orange */
.counter.blue5 {
  color: var(--had-orange) !important;
}

/* CTA section - HAD blue */
.cta5 {
  background: linear-gradient(135deg, #1E5F99 0%, #2E9BD8 100%) !important;
}

.cta5::before {
  background: rgba(30, 95, 153, 0.9) !important;
}

/* Learn more links */
.learn1:hover {
  color: var(--had-orange) !important;
}

/* Navigation hover states */
.vl-header-area5 .vl-main-menu ul > li:hover a {
  color: var(--had-white) !important;
}

/* Make sure text is readable */
.hero5 .main-heading h1,
.hero5 .main-heading p,
.hero5 .main-heading .sub-title {
  color: var(--had-white) !important;
}

/* Keep original template styling intact - just change colors */
.body5 {
  /* Let template handle all the styling */
}

/* Logo sizing fix - ALL logos - ULTRA AGGRESSIVE */
.vl-logo img.had-logo,
.search__logo img.had-logo,
.main-load,
#loading-icon img,
img[src*="hadlogo"],
img[src*="preloader"],
.loading-container img,
.had-logo,
img.had-logo,
*[class*="had-logo"],
*[class*="logo"] img,
.vl-logo img,
.search__logo img {
  max-height: 50px !important;
  width: auto !important;
  max-width: 200px !important;
  height: 50px !important;
  min-height: unset !important;
  min-width: unset !important;
}

/* Override any background images that might show logos */
*[style*="background-image"] {
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Force override any large logo classes */
.had-logo,
img.had-logo {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
}

/* If logo is in a container, limit container size too */
.vl-logo,
.search__logo,
.logo-container {
  max-height: 50px !important;
  overflow: hidden !important;
}

/* Force hide preloader immediately */
.preloader,
.loading-container,
#loading-icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Additional safety - hide any element that might show a large logo */
.paginacontainer,
.progress-wrap,
.theme-toggle-container {
  position: fixed;
  z-index: 9999;
}

/* Search popup - hidden by default */
.search__popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.search__popup.search-opened {
  opacity: 1;
  visibility: visible;
}

/* Fix header background and text visibility */
.vl-header-area5 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: transparent;
}

/* Header5-bg should be transparent with backdrop blur */
.header5-bg {
  background: transparent !important;
  padding: 15px 25px !important;
}

.header5-bg::before {
  background: transparent !important;
}

.header5-bg::after {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* Navbar layout optimization */
.vl-header-area5 .row {
  align-items: center !important;
}

.vl-header-area5 .col-lg-2 {
  flex: 0 0 auto !important;
  width: auto !important;
}

.vl-header-area5 .col-lg-7 {
  flex: 1 !important;
  text-align: center !important;
}

.vl-header-area5 .col-lg-3 {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Make navigation menu more compact */
.vl-main-menu ul > li {
  margin: 0 10px !important;
}

.vl-main-menu ul > li > a {
  padding: 0 8px !important;
  font-size: 15px !important;
}

/* Navigation text should be white and visible */
.vl-header-area5 .vl-main-menu ul > li > a {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.vl-header-area5 .vl-main-menu ul > li > a:hover {
  color: var(--had-orange) !important;
}

/* Dropdown/Submenu styling - comprehensive fix */
.vl-main-menu ul li .sub-menu {
  background: white !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 15px 0 !important;
  margin-top: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  min-width: 250px !important;
}

/* Submenu arrow indicator */
.vl-main-menu ul li .sub-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  left: 30px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid white !important;
  z-index: 10 !important;
}

/* Submenu links */
.vl-main-menu ul li .sub-menu li {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.vl-main-menu ul li .sub-menu li:last-child {
  border-bottom: none !important;
}

.vl-main-menu ul li .sub-menu li a {
  color: #333 !important;
  padding: 12px 25px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: block !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

.vl-main-menu ul li .sub-menu li a:hover {
  color: #333 !important;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.1), rgba(255, 102, 0, 0.05)) !important;
  padding-left: 35px !important;
  transform: translateX(5px) !important;
}

/* Submenu link hover indicator */
.vl-main-menu ul li .sub-menu li a:hover::before {
  content: '→' !important;
  position: absolute !important;
  left: 15px !important;
  color: var(--had-orange) !important;
  font-weight: bold !important;
}

/* Active submenu state */
.vl-main-menu ul li .sub-menu li a.active {
  color: var(--had-orange) !important;
  background: rgba(255, 102, 0, 0.1) !important;
  font-weight: 600 !important;
}

/* Submenu positioning and visibility */
.vl-main-menu ul li:hover .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  transition: all 0.3s ease !important;
}

.vl-main-menu ul li .sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) scale(0.95) !important;
  transition: all 0.3s ease !important;
}

/* Additional submenu enhancements - removed the ::after content that was causing issues */

/* Submenu for mobile - if needed */
@media (max-width: 991px) {
  .vl-main-menu ul li .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 10px 0 !important;
  }
  
  .vl-main-menu ul li .sub-menu li a {
    padding: 10px 30px !important;
  }
}

/* Ensure mobile menu functionality */
.vl-offcanvas-toggle {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

.vl-offcanvas-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* JavaScript will handle the menu functionality */
.vl-main-menu ul li:hover .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  top: 100% !important;
}

/* Ensure proper menu positioning */
.vl-main-menu ul li {
  position: relative;
}

.vl-main-menu ul li .sub-menu {
  position: absolute;
  top: 150%;
  left: 0;
  z-index: 999;
}

/* Mobile offcanvas menu styling */
.vl-offcanvas {
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  height: 100vh;
  background: white;
  z-index: 9999;
  transition: all 0.3s ease;
  overflow-y: auto;
}

.vl-offcanvas.active {
  right: 0;
}

.vl-offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.vl-offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Sticky header styling */
.vl-header-area5.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--had-orange) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  animation: fadeInDown 0.3s ease;
}

.vl-header-area5.header-sticky .header5-bg {
  margin-top: 0;
  padding: 10px 38px;
  background: none;
}

.vl-header-area5.header-sticky .header5-bg::before,
.vl-header-area5.header-sticky .header5-bg::after {
  display: none;
}

/* Mobile menu button visibility */
.vl-offcanvas-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

.vl-offcanvas-toggle:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Header right section styling */
.vl-header5-right .search-open-btn {
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  padding: 12px !important;
  margin-right: 20px !important;
}

.vl-header5-right .search-open-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Header social icons - horizontal alignment */
.header5-social-wedget {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 15px !important;
}

.header5-social-wedget a {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.header5-social-wedget a:hover {
  background: var(--had-orange) !important;
  border-color: var(--had-orange) !important;
  transform: translateY(-2px) !important;
}

/* Header right section - better spacing */
.vl-header5-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.vl-header5-right .search-open-btn {
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  padding: 8px !important;
  margin-right: 15px !important;
  width: 35px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.vl-header5-right .search-open-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) !important;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* NUCLEAR OPTION - Force all images in header/navbar to be small */
.vl-header-area5 img,
.header5-bg img,
.vl-logo img,
.navbar img,
header img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* Force hide any large elements that might contain logos */
.hero5 img[src*="logo"],
.main img[src*="logo"],
body > img[src*="logo"],
.container > img[src*="logo"] {
  max-height: 50px !important;
  height: 50px !important;
  width: auto !important;
}

/* Clean logo containers - no debugging borders */
*[class*="logo"]:not(.vl-logo):not(.search__logo) {
  max-height: 50px !important;
  overflow: hidden !important;
}

/* Hide any potential large logo from appearing */
body > .container > img,
.hero5 > .container > img,
.main > .container > img {
  max-height: 200px !important;
}

/* Fix purple backgrounds in sections */
.service5,
.service5.shape-bg5 {
  background: linear-gradient(135deg, #1E5F99 0%, #2E9BD8 100%) !important;
}

.service5 .container {
  position: relative;
  z-index: 2;
}

/* Service section text colors */
.service5 h2 {
  color: white !important;
}

.service5 .sub-title5 {
  color: var(--had-orange) !important;
}

.service5 p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Featured Project Highlights section - WHITE background */
.achievements,
.achievements.shape-bg5 {
  background: white !important;
  padding: 100px 0 !important;
}

.achievements .container {
  position: relative;
  z-index: 2;
}

/* Featured Project Highlights text colors - BLACK titles */
.achievements h2 {
  color: #333 !important;
}

.achievements .sub-title5 {
  color: var(--had-orange) !important;
}

.achievements p {
  color: #666 !important;
}

/* Service boxes - keep them white with good contrast */
.service5-box {
  background: white !important;
  color: #333 !important;
}

.service5-box h3,
.service5-box h3 a {
  color: #333 !important;
}

.service5-box p {
  color: #666 !important;
}

.service5-box .number {
  background: var(--had-orange) !important;
  color: white !important;
}

.service5-box .learn-more4 {
  color: #666 !important;
}

.service5-box .learn-more4:hover {
  color: var(--had-orange) !important;
}

/* Blog/Project boxes styling */
.vl-blog-5-item {
  background: white !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.vl-blog-5-item:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.vl-blog-5-item h4 a {
  color: #333 !important;
}

.vl-blog-5-item .learn1 {
  color: #666 !important;
}

.vl-blog-5-item .learn1:hover {
  color: var(--had-orange) !important;
}

/* View All buttons */
.service5 .theme-btn7 {
  background: var(--had-orange) !important;
  color: white !important;
  border: 2px solid var(--had-orange) !important;
}

.service5 .theme-btn7:hover {
  background: transparent !important;
  color: var(--had-orange) !important;
  border-color: var(--had-orange) !important;
}

/* Featured Projects section button - for white background */
.achievements .theme-btn7 {
  background: var(--had-orange) !important;
  color: white !important;
  border: 2px solid var(--had-orange) !important;
}

.achievements .theme-btn7:hover {
  background: transparent !important;
  color: var(--had-orange) !important;
  border-color: var(--had-orange) !important;
}

/* Footer padding fix */
.vl-footer-area1 {
  padding-top: 100px !important;
}

/* Hide specific hero shapes */
img[src*="hero5-shape4.png"],
img[src*="hero5-shape2.png"],
.hero5 img[src*="hero5-shape4.png"],
.hero5 img[src*="hero5-shape2.png"],
.shape1 img[src*="hero5-shape2.png"],
.shape3 img[src*="hero5-shape4.png"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide the container divs for these shapes as well */
.hero5 .shape1:has(img[src*="hero5-shape2.png"]),
.hero5 .shape3:has(img[src*="hero5-shape4.png"]) {
  display: none !important;
}

/* Fallback - hide by class if :has is not supported */
.hero5 .shape1,
.hero5 .shape3 {
  display: none !important;
}

/* Fix image proportions on all pages */
img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Specific fixes for stretched images */
.about-image img,
.service-image img,
.team-image img,
.project-image img,
.blog-image img,
.main img,
.content img,
.single-about-image img,
.about-thumb img,
.service-thumb img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Fix hero sections on inner pages - apply HAD colors */
.hero1,
.hero2,
.hero3,
.hero4,
.hero6,
.about-hero,
.service-hero,
.team-hero,
.project-hero,
.contact-hero,
.breadcrumb-area,
.page-header,
.inner-hero {
  background: linear-gradient(135deg, #1E5F99 0%, #2E9BD8 100%) !important;
}

/* Inner page hero text colors */
.hero1 h1,
.hero2 h1,
.hero3 h1,
.hero4 h1,
.hero6 h1,
.about-hero h1,
.service-hero h1,
.team-hero h1,
.project-hero h1,
.contact-hero h1,
.breadcrumb-area h1,
.page-header h1,
.inner-hero h1 {
  color: white !important;
}

/* Breadcrumb styling */
.breadcrumb-area .breadcrumb a,
.breadcrumb-area .breadcrumb span,
.breadcrumb-area nav a,
.breadcrumb-area nav span {
  color: rgba(255, 255, 255, 0.8) !important;
}

.breadcrumb-area .breadcrumb a:hover,
.breadcrumb-area nav a:hover {
  color: var(--had-orange) !important;
}

/* Fix progress bars to use HAD colors */
.progress-bar,
.skill-bar,
.progress-fill {
  background: var(--had-orange) !important;
}

.progress,
.skill-progress {
  background: rgba(255, 102, 0, 0.1) !important;
}

/* Fix any remaining purple buttons */
.btn-primary,
.theme-btn,
.theme-btn1,
.theme-btn2,
.theme-btn3,
.theme-btn4,
.theme-btn5,
.theme-btn6,
.theme-btn7,
.primary-btn,
.main-btn {
  background: var(--had-orange) !important;
  border-color: var(--had-orange) !important;
  color: white !important;
}

.btn-primary:hover,
.theme-btn:hover,
.theme-btn1:hover,
.theme-btn2:hover,
.theme-btn3:hover,
.theme-btn4:hover,
.theme-btn5:hover,
.theme-btn6:hover,
.theme-btn7:hover,
.primary-btn:hover,
.main-btn:hover {
  background: transparent !important;
  border-color: var(--had-orange) !important;
  color: var(--had-orange) !important;
}

/* Fix section backgrounds */
.about-section,
.service-section,
.team-section,
.project-section,
.contact-section {
  background: white !important;
}

/* Fix alternating section backgrounds */
.about-section:nth-child(even),
.service-section:nth-child(even),
.team-section:nth-child(even) {
  background: #f8f9fa !important;
}

/* Fix icon colors */
.icon,
.service-icon,
.feature-icon {
  color: var(--had-orange) !important;
}

/* Fix link colors */
a {
  color: var(--had-blue) !important;
}

a:hover {
  color: var(--had-orange) !important;
}

/* Fix headings to use proper colors */
/* h1, h2, h3, h4, h5, h6 {
  color: #333 !important;
} */

/* Fix text colors */
/* p, span, div {
  color: #666 !important;
} */

/* Only override what's absolutely necessary for HAD branding */