/* Announcement Bar */
.announcement-bar {
	background-color: #a63308;
}

.announcement-bar p {
	font-size: 14px;
}

/* Mobile hero fix - ensure buttons are clickable */
@media (max-width: 767px) {
    /* Reduce map opacity and ensure it doesn't block clicks */
    .slider-element .img-map {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    /* Clouds don't block clicks */
    .cloud-wrap {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    /* Ensure button is on top */
    .slider-element .button {
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* Ensure text container is on top */
    .vertical-middle.container.dark {
        position: relative !important;
        z-index: 50 !important;
    }
}

/* Fix for "Start Your Project" and "Free Consultation" buttons - keep them horizontal */

@media (max-width: 768px) {
  
  /* Target the specific CTA section container */
  section.bg-color.dark .col-md-8:last-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
  }
  
  /* Ensure the buttons stay side by side */
  section.bg-color.dark .button.button-large {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  
  /* Adjust button sizes for mobile */
  section.bg-color.dark .button.button-large {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  
  /* Smaller buttons on very small screens but keep horizontal */
  section.bg-color.dark .button.button-large {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  /* Reduce gap between buttons */
  section.bg-color.dark .col-md-8:last-child {
    gap: 10px !important;
  }
}

@media (max-width: 360px) {
  
  /* Even smaller on tiny screens */
  section.bg-color.dark .button.button-large {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  section.bg-color.dark .col-md-8:last-child {
    gap: 8px !important;
  }
}

/* Navigation Fix - Logo sizing and Hamburger menu alignment */

@media (max-width: 768px) {
  
  /* Logo sizing */
  #logo {
    max-width: 500px;
  }
  
  #logo img {
    max-height: 200px;
    height: auto;
    width: auto;
    object-fit: contain;
  }
  
  /* Schedule Consultation CTA Button in header */
  #header a[href*="contact"],
  #header .button[href*="contact"],
  #header .btn[href*="contact"] {
    font-size: 13px;
    padding: 8px 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* Hamburger Menu Alignment Fix */
  #primary-menu-trigger {
    display: inline-block;
    float: right;
    margin-left: 10px;
    clear: none;
  }
  
  /* Header container adjustments */
  #header .container {
    overflow: visible;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Ensure header elements don't wrap */
  #header .container::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (max-width: 480px) {
  
  /* Logo size for smaller screens */
  #logo {
    max-width: 450px;
  }
  
  #logo img {
    max-height: 175px;
  }
  
  /* More compact CTA button */
  #header a[href*="contact"],
  #header .button[href*="contact"],
  #header .btn[href*="contact"] {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  /* Tighter spacing */
  #header .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 360px) {
  
  /* Logo size for very small screens */
  #logo {
    max-width: 400px;
  }
  
  #logo img {
    max-height: 150px;
  }
  
  /* Compact CTA for tiny screens */
  #header a[href*="contact"],
  #header .button[href*="contact"],
  #header .btn[href*="contact"] {
    font-size: 11px;
    padding: 6px 8px;
  }
}


/* Portrait tablets - hide hero images, full-width text */
@media (min-width: 768px) and (max-width: 1280px) and (orientation: portrait) {
    .slider-element .col-md-5 {
        display: none !important;
    }
    
    .slider-element .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile hero - FORCE content closer to navbar */
@media (max-width: 767px) {
    section#slider.slider-element {
        min-height: 400px !important;
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
    
    section#slider .vertical-middle {
        transform: translateY(-60px) !important;
    }
    
    section#slider .img-map {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    section#slider .cloud-wrap {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    section#slider .slider-title,
    section#slider .button {
        position: relative !important;
        z-index: 100 !important;
    }
}

/* Mobile hero - ONLY for industry landing pages */
@media (max-width: 767px) {
    section#slider.industry-page {
        min-height: 200px !important;  /* Reduced from 400px */
        max-height: 500px !important;  /* Cap the height */
        padding-top: 50px !important;
        padding-bottom: 0px !important;  /* Reduce bottom padding */
    }
    
    section#slider.industry-page .vertical-middle {
        transform: translateY(-100px) !important;
    }
    
    /* Remove extra spacing */
    section#slider.industry-page .container {
        padding-bottom: 0 !important;
    }
    
    section#slider.industry-page .img-map {
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    section#slider.industry-page .cloud-wrap {
        pointer-events: none !important;
        min-height: 200px !important;
        z-index: 0 !important;
    }
    
    section#slider.industry-page .slider-title,
    section#slider.industry-page .button {
        position: relative !important;
        z-index: 100 !important;
    }
}

/* Instructions:
   - Adjust the translateY values to move content up more (-70px) or less (-30px)
   - If transform causes issues, uncomment the alternative method and remove transform
   - The alternative method uses negative margin-top instead of transform
*/