.elementor-55 .elementor-element.elementor-element-39d8a1ab{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-55 .elementor-element.elementor-element-7d1ed825 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-55 .elementor-element.elementor-element-f2f5e7e{--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;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-55 .elementor-element.elementor-element-39d8a1ab{--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-55 .elementor-element.elementor-element-7d1ed825{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-55 .elementor-element.elementor-element-7d1ed825 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}}/* Start custom CSS for html, class: .elementor-element-7d1ed825 *//* Sticky Header */
.contact-strip {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 140px;
  background-color: transparent;
  color: white;
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  display: flex;
  align-items: center;
}

/* Inner Container */
.contact-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 2rem 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* Logo Area */
.contact-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 200px;
  margin-top: -50px;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease;
}

.logo-light {
  opacity: 1;
}

.logo-dark {
  opacity: 0;
}

/* On Scroll Logo Switch */
.contact-strip.scrolled .logo-light {
  opacity: 0;
}

.contact-strip.scrolled .logo-dark {
  opacity: 1;
}

/* Header Scrolled Background */
.contact-strip.scrolled {
  background-color: white;
  color: black;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Buttons (same before and after scroll) */
.contact-buttons {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.2rem;
  color: white !important;
  background-color: #2E82A3 !important;
  text-decoration: none;
  border: none;
  padding: 0.5rem 1rem;
  transition: background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  font-family: montserrat;
  border-radius: 4px;
}

.contact-button i {
  font-size: 1.2rem;
  margin: 0;
}

.contact-button:hover {
  background-color: #246785 !important;
  color: white !important;
}

/* Remove default overrides in scrolled state */
.contact-strip.scrolled .contact-button {
  background-color: #2E82A3;
  color: white;
}

.contact-strip.scrolled .contact-button:hover {
  background-color: #246785;
  color: white;
}
.social-icon {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.social-group {
  display: flex;
  gap: 1.5rem;
  margin-left: 2rem; /* 👈 Custom gap between email and icons */
}
.social-icon:hover {
  color: #2E82A3;
}
/* After scroll: change base color to lightblue */
.contact-strip.scrolled .social-icon {
  color: #2E82A3;
}

/* After scroll: hover is slightly darker blue */
.contact-strip.scrolled .social-icon:hover {
  color: #111;
}
#contact-us {
  scroll-margin-top: 4.7rem; /* Adjust this based on your header height */}/* End custom CSS */