/* Header Dropdown Styles */
.header-nav-item.dropdown {
  position: relative;
}

.header-nav-link.dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.header-nav-link.dropdown-toggle:hover {
  text-decoration: none;
}

.header-nav-link.dropdown-toggle i {
  transition: transform 0.3s ease;
  font-size: 10px;
  margin-left: 5px;
}

.header-nav-item.dropdown:hover .dropdown-toggle i,
.header-nav-item.dropdown.show .dropdown-toggle i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  background: white !important;
  min-width: 220px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 99999 !important;
  list-style: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Show dropdown on hover OR when has 'show' class */
.header-nav-item.dropdown:hover .dropdown-menu,
.header-nav-item.dropdown.show .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dropdown-link {
  display: block !important;
  padding: 12px 20px !important;
  color: #4a5568 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.dropdown-link:hover {
  background: rgba(72, 219, 216, 0.1) !important;
  color: #48DBD8 !important;
  text-decoration: none !important;
  padding-left: 25px !important;
}

/* Arrow indicator */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}

/* Mobile styles */
@media (max-width: 991px) {
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(248, 250, 252, 0.95) !important;
    border-radius: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    margin: 0 !important;
  }

  .dropdown-menu::before {
    display: none !important;
  }

  .header-nav-item.dropdown:hover .dropdown-menu,
  .header-nav-item.dropdown.show .dropdown-menu {
    max-height: 400px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dropdown-link {
    padding: 10px 30px !important;
    font-size: 13px !important;
  }

  .dropdown-link:hover {
    padding-left: 35px !important;
  }
}

/* Header Logo Size - Make it twice as large */
.header-brand-logo img {
  height: auto !important;
  max-height: 80px !important; /* Double the typical size */
  width: auto !important;
}

.header-brand-logo .header-logo-normal,
.header-brand-logo .header-logo-sticky {
  height: auto !important;
  max-height: 80px !important;
  width: auto !important;
}

/* Adjust header container to accommodate larger logo */
.header-inner-wrapper {
  align-items: center;
  padding: 10px 0;
}

/* Ensure logo maintains aspect ratio */
.header-brand-logo {
  display: flex;
  align-items: center;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .header-brand-logo img {
    max-height: 60px !important; /* Slightly smaller on mobile but still larger than original */
  }
  
  .header-brand-logo .header-logo-normal,
  .header-brand-logo .header-logo-sticky {
    max-height: 60px !important;
  }
}

/* Sticky Header Functionality */
.main-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  transition: all 0.3s ease;
  background: transparent;
}

/* Sticky state styles */
.main-header.sticky {
  background: white !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.main-header.sticky .header-nav-link {
  color: #333 !important;
}

.main-header.sticky .header-nav-link:hover {
  color: #48DBD8 !important;
}

.main-header.sticky .dropdown-toggle {
  color: #333 !important;
}

.main-header.sticky .header-demo-btn {
  color: #333 !important;
  border-color: #48DBD8 !important;
}

.main-header.sticky .header-demo-btn:hover {
  background: #48DBD8 !important;
  color: white !important;
}

/* Hide offer banner when sticky */
.main-header.sticky .header-offer-banner {
  display: none;
}

/* Adjust header height when sticky */
.main-header.sticky .header-navigation-area {
  padding: 10px 0;
}

/* Body padding to account for fixed header */
body {
  padding-top: 0;
}

body.header-sticky-active {
  padding-top: 80px;
}

/* Mobile hamburger menu color change */
.main-header.sticky .header-mobile-toggle span {
  color: #333 !important;
}

/* Logo visibility control */
.header-brand-logo .header-logo-normal {
  display: block;
}

.header-brand-logo .header-logo-sticky {
  display: none;
}

/* Show appropriate logo in sticky mode */
.main-header.sticky .header-brand-logo .header-logo-normal {
  display: none;
}

.main-header.sticky .header-brand-logo .header-logo-sticky {
  display: block;
}

/* Logo positioning and size in sticky mode */
.main-header.sticky .header-brand-logo img {
  max-height: 100px !important; /* Doble del tamaño anterior (50px -> 100px) */
}

/* Adjust header height in sticky mode for larger logo */
.main-header.sticky .header-navigation-area {
  padding: 15px 0; /* Increased padding to accommodate larger logo */
}

/* Ensure logo container has proper alignment */
.main-header.sticky .header-brand-logo {
  display: flex;
  align-items: center;
}

/* Section Spacing */
.section-spacing {
  padding: 80px 0;
  min-height: 400px;
}

/* Section styling */
section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #333;
}

section p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}

/* Smooth scroll offset adjustment */
html {
  scroll-behavior: smooth;
}

/* Ensure sections are properly spaced from sticky header */
@media (max-width: 991px) {
  .section-spacing {
    padding: 60px 0;
    min-height: 300px;
  }
  
  section h2 {
    font-size: 2rem;
  }
}