.elementor-68 .elementor-element.elementor-element-4baa578d{--display:flex;--position:fixed;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--overlay-opacity:0;--margin-top:0px;--margin-bottom:-80px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:3px;--padding-right:3px;top:0px;--z-index:9999;}.elementor-68 .elementor-element.elementor-element-4baa578d:not(.elementor-motion-effects-element-type-background), .elementor-68 .elementor-element.elementor-element-4baa578d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0000007A;}.elementor-68 .elementor-element.elementor-element-4baa578d::before, .elementor-68 .elementor-element.elementor-element-4baa578d > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-4baa578d > .e-con-inner > .elementor-background-video-container::before, .elementor-68 .elementor-element.elementor-element-4baa578d > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-4baa578d > .e-con-inner > .elementor-background-slideshow::before, .elementor-68 .elementor-element.elementor-element-4baa578d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#363537;--background-overlay:'';}.elementor-68 .elementor-element.elementor-element-6a1feea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-68 .elementor-element.elementor-element-6a1feea.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-68 .elementor-element.elementor-element-209973af{width:var( --container-widget-width, 1.632% );max-width:1.632%;--container-widget-width:1.632%;--container-widget-flex-grow:0;}.elementor-68 .elementor-element.elementor-element-209973af.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-68 .elementor-element.elementor-element-79ebf405{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-68 .elementor-element.elementor-element-79ebf405.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-68 .elementor-element.elementor-element-6a1feea{--width:12%;}.elementor-68 .elementor-element.elementor-element-79ebf405{--width:85%;}}/* Start custom CSS */<style>
  /* --- Header Background Styling --- */
  
  .elementor-element-b6dd984 {
    transition: background-color 0.3s ease;
  }
  
  .transparent-header {
    background-color: transparent;
  }
  
  .solid-header {
    background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
  }

  /* --- Logo Styling --- */
  
  /* This hides your second logo (logo-2) by default */
  .logo-2 {
    display: none;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    
    // Select the elements using the classes you assigned
    var header = document.querySelector('.elementor-element-b6dd984');
    var logo1 = document.querySelector('.logo-1');
    var logo2 = document.querySelector('.logo-2');

    // Check if all elements were found
    if (header && logo1 && logo2) {
      
      // Set initial state on page load
      header.classList.add('transparent-header');
      logo2.style.display = 'none';
      logo1.style.display = ''; // Make sure logo 1 is visible

      // Add scroll event listener
      window.addEventListener('scroll', function() {
        // Check if the scroll position is greater than 100px
        if (window.scrollY > 100) {
          // --- Scrolled State ---
          header.classList.add('solid-header');
          header.classList.remove('transparent-header');
          logo1.style.display = 'none';  // Hide logo 1
          logo2.style.display = '';    // Show logo 2
        } else {
          // --- Top of Page State ---
          header.classList.remove('solid-header');
          header.classList.add('transparent-header');
          logo1.style.display = '';    // Show logo 1
          logo2.style.display = 'none'; // Hide logo 2
        }
      });

    } else {
      // This will help you troubleshoot if the classes are wrong
      console.warn("Header or logo elements not found. Check your CSS classes.");
    }
  });
</script>/* End custom CSS */