.elementor-22280 .elementor-element.elementor-element-28d93ea{--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-22280 .elementor-element.elementor-element-15c9225 .elementor-search-form__container{min-height:50px;}.elementor-22280 .elementor-element.elementor-element-15c9225 .elementor-search-form__submit{min-width:50px;}body:not(.rtl) .elementor-22280 .elementor-element.elementor-element-15c9225 .elementor-search-form__icon{padding-left:calc(50px / 3);}body.rtl .elementor-22280 .elementor-element.elementor-element-15c9225 .elementor-search-form__icon{padding-right:calc(50px / 3);}.elementor-22280 .elementor-element.elementor-element-15c9225 .elementor-search-form__input, .elementor-22280 .elementor-element.elementor-element-15c9225.elementor-search-form--button-type-text .elementor-search-form__submit{padding-left:calc(50px / 3);padding-right:calc(50px / 3);}.elementor-22280 .elementor-element.elementor-element-15c9225:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-radius:3px;}.elementor-22280 .elementor-element.elementor-element-15c9225.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-radius:3px;}.elementor-22280 .elementor-element.elementor-element-dd1a170{--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-22280 .elementor-element.elementor-element-9aa7c45{--display:flex;}.elementor-22280 .elementor-element.elementor-element-7a42b93{--display:flex;}.elementor-22280 .elementor-element.elementor-element-4d73c8a{--display:flex;}.elementor-22280 .elementor-element.elementor-element-6d71406{--display:flex;}.elementor-22280 .elementor-element.elementor-element-677b0b6{--display:flex;}/* Start custom CSS for search-form, class: .elementor-element-15c9225 *//* === Transparent Search Box Style === */
.elementor-search-form__container {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0px;
  background: transparent !important;
  transition: all 0.3s ease;
}

.elementor-search-form__input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  width: 100%;
  padding: 10px 12px !important;
  font-size: 16px;
  outline: none !important;
}

.elementor-search-form__input::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* On focus, make the border glow slightly */
.elementor-search-form__container:focus-within {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* === Search Button (Icon) === */
.elementor-search-form__submit {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  padding: 0 15px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.elementor-search-form__submit:hover {
  color: #ddd !important;
}



document.addEventListener("DOMContentLoaded", function() {
  const input = document.querySelector(".elementor-search-form__input");
  const placeholders = ["Search Polo", "Search T-shirt", "Search Shorts", "Search Jeans"];
  let i = 0;
  setInterval(() => {
    input.setAttribute("placeholder", placeholders[i]);
    i = (i + 1) % placeholders.length;
  }, 1500);
});/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-28d93ea *//* ensure hero can be overlapped */
.hero-section {
  position: relative;
  z-index: 1;
}

/* search section over hero */
.search-overlay {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 5%; /* higher position (was 12%) */
  display: flex;
  justify-content: center;
  z-index: 9999 !important;
  width: 100%;
  pointer-events: auto;
  transform: none !important;
}

/* inner container — fully transparent and extra slim */
.search-overlay .elementor-search-form__container {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0px;
  padding: 3px 8px;
  width: 90vw !important; /* wider — takes 90% of viewport */
  max-width: none !important; /* remove width limit */
  margin: 0 auto;
  box-shadow: none !important;
}


/* input field style */
.search-overlay .elementor-search-form__input {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  font-size: 15px;
  padding: 6px 35px !important; /* reduced padding */
  height: 22px !important; /* control input height */
  line-height: 1.2em;
}

/* placeholder text */
.search-overlay .elementor-search-form__input::placeholder {
  color: rgba(255,255,255,0.6);
}

/* search icon */
.search-overlay .elementor-search-form__submit {
  color: #fff !important;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  font-size: 16px;
}
.search-overlay .elementor-search-form__submit:hover {
  opacity: 1;
}


.search-overlay {
  top: 3%; /* move slightly higher */
}

.search-overlay .elementor-search-form__input {
  padding: 4px 35px !important; /* even slimmer */
  height: 20px !important; /* reduced height */
}
/* Hide this header section on all pages except homepage */
/* Hide this header section on all pages except the homepage */
body:not(.home) .elementor-22280 .elementor-element.elementor-element-28d93ea{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Ensure it is visible on the homepage (restore layout) *//* End custom CSS */