/* =============================
   Journey Interactive Styling
   ============================= */

/* Industry Selector Dropdown */
#industrySelector {
  animation: slowPulse 2s ease-in-out infinite;
  transition: all 0.2s ease-out;
  font-size: 14.4px;
  font-family: 'Roboto Condensed', Roboto, Arial, sans-serif;
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  border-radius: 20px;
  padding: 15px 30px;
  background: #fff;
  color: #404244;
  margin: 0;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
}

@keyframes slowPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Role Selector Dropdown */
#roleSelector {
  animation: slowPulse 2s ease-in-out infinite;
  transition: all 0.2s ease-out;
  font-size: 14.4px;
  font-family: 'Roboto Condensed', Roboto, Arial, sans-serif;
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  border-radius: 20px;
  padding: 15px 30px;
  background: #fff;
  color: #404244;
  margin: 0;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
}

/* Accent color for highlights */
.accent {
  color: #fe6220;
}


/* =============================
   Back To Top Button Styling
   ============================= */

.wpr-stt-btn {
  background-color: #fe6220 !important;
}

/* =============================
   Form flow height overwrite
   ============================= */

#formflow-embed iframe {
  min-height: unset !important;
}

.industryPopup #formflow-embed iframe {
  min-height: 500px !important;
  overflow: scroll !important;
}

.bookDemoPopup #formflow-embed iframe {
  min-height: 1000px !important;
  height: 100vh;
  overflow: scroll !important;
}

.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* =============================
   UGC Filter Button Active State
   ============================= */

.ugcFilterButton.active .elementor-button {
    background-color: #fff !important;
    color: var(--e-global-color-primary) !important;
}

/* =============================
   Laptop Buttons Styling
   ============================= */

.laptop-switch-btn {
    width: 65px;
    border: none;
    margin-right: 20px;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .divButtons button {
        margin-right: 0 !important;
    }
    .laptop-switch-btn {
        width: 50px;
    }
}

/* =============================
   Layout Utilities
   ============================= */

.hero-padding {
    padding: 68px 0 !important;
}

.hero-top-justify {
    margin-top: -5em !important;
}

.thin-row {
    padding: 0em !important;
}

.thick-row {
    padding: 3em 0 !important;
}

.default-section {
    padding: 2em 0em !important;
}

.standardsection {
    padding: 6em 0em !important;
}

.smallboxpadding {
    padding: 1VW 2VW 2VW 2VW !important;
}

.mediumboxpadding {
    padding: 5VW 3VW !important;
}

/* Remove all padding from a container */
.no-padding {
    padding: 0 !important;
}

.no-vertical-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-horizontal-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove padding from Elementor's auto-injected inner wrapper */
.no-padding > .e-con-inner {
    padding: 0 !important;
}

.textarea-global p {
    margin: 0;
}

.verticalmediummargin {
    margin: 5VW 0;
}

@media (max-width: 767px) {

    .smallboxpadding {
        padding: 3VW 5VW 5VW 5VW;
    }

    .sw-header {
        height: 48px !important;
    }

    .hero-padding {
        padding: 50px 0 !important;
    }

}

@media only screen and (max-width: 1068px) and (min-width: 735px) and (min-height: 734px) {

    .hero-padding {
        padding: 60px 0 !important;
    }

}

/* =============================
   Navbar 2026 Implementation
   ============================= */

.sw-header {
    height: 44px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transition: transform 0.35s ease !important;
    z-index: 9999 !important;
}

.sw-header .elementor-icon {
    display: flex !important;
}

.sw-header .elementor-icon i, .sw-header .elementor-icon svg {
    width: 15px !important;
    height: 44px !important;
}

.elementor-11809 .elementor-element.elementor-element-f1df1d0 .elementor-menu-toggle {
    z-index: 9999;
}

.elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: fixed !important;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 9997;
    padding: 50px 0px 0px 25px !important;
}

/* Smart sticky header */

.sw-header.header-hidden {
    transform: translateY(-100%) !important;
}

.sw-header .sw-cta-btn a.elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Push header below WP admin bar when logged in */
.admin-bar .sw-header {
    top: 32px !important;
}

.cal-button .elementor-button {
    cursor: pointer;
}

/* ============================================================
   INDUSTRY TILE HEADING — overlay
   ------------------------------------------------------------
   Reusable class for a heading widget centred vertically over
   an industry tile's video.
   USAGE: in Elementor, add the CSS class  industry-tile-heading
   to the heading widget (Advanced -> CSS Classes). The widget's
   parent container must be Position: Relative.
   Edit the values here ONCE to update every industry tile.
   ============================================================ */
.industry-tile-heading {
    position: absolute !important;
    inset: 0 !important;
    height: fit-content !important;
    margin: auto 20px !important;
    z-index: 1 !important;
}

/* ============================================================
   INDUSTRY POPUP — role selector
   ------------------------------------------------------------
   Styles the hard-coded <select> inside the industry popup
   (the HTML widget). The role-copy block is hidden until a
   role is chosen — custom.js reveals it on change.
   ============================================================ */
.popup-role-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    color: #404244;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    cursor: pointer;
}

.popup-role-select:focus {
    outline: none;
    border-color: #FE6220;
}

/* Role copy block (#popup-role-copy) is visible from the start — it holds a
   default placeholder; custom.js swaps in role-specific copy on role select
   and restores the placeholder when the selector is cleared. */

/* Each sentence of the role copy is a block-level line. The gap between
   lines is set here — tune the margin-top value to taste. */
.popup-role-line {
    display: block;
}
.popup-role-line + .popup-role-line {
    margin-top: 0.5em;
}

@media screen and (max-width: 782px) {
    .admin-bar .sw-header {
        top: 46px !important;
    }
}