.elementor-1344 .elementor-element.elementor-element-416867d{--display:flex;}.elementor-1344 .elementor-element.elementor-element-3a7e5b0{--spacer-size:84px;}.elementor-1344 .elementor-element.elementor-element-d6fe3b3{--display:flex;--min-height:119px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1344 .elementor-element.elementor-element-eebed05.elementor-element{--align-self:center;}.elementor-1344 .elementor-element.elementor-element-eebed05{text-align:center;}.elementor-1344 .elementor-element.elementor-element-eebed05 .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-size:89px;font-weight:600;color:#FFFFFF7A;}.elementor-1344 .elementor-element.elementor-element-2308693{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1344 .elementor-element.elementor-element-383e2a7{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1344 .elementor-element.elementor-element-ddc4a98{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1344 .elementor-element.elementor-element-ddc4a98.e-con{--align-self:center;}.elementor-1344 .elementor-element.elementor-element-d42e086{--display:flex;}.elementor-1344 .elementor-element.elementor-element-d568c56{--display:flex;}.elementor-1344 .elementor-element.elementor-element-d568c56:not(.elementor-motion-effects-element-type-background), .elementor-1344 .elementor-element.elementor-element-d568c56 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #2D4F44 0%, #1A3D32 90%);}.elementor-1344 .elementor-element.elementor-element-d568c56.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1344 .elementor-element.elementor-element-2ef0bfb.elementor-element{--align-self:center;}.elementor-1344 .elementor-element.elementor-element-2ef0bfb{text-align:center;}.elementor-1344 .elementor-element.elementor-element-1e57c7f{text-align:center;}.elementor-1344 .elementor-element.elementor-element-1e57c7f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:26px;font-weight:600;text-transform:uppercase;line-height:12px;color:#F1F1F1;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1344 .elementor-element.elementor-element-4832548{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;text-transform:lowercase;line-height:5px;color:#C1C1C1;}.elementor-1344 .elementor-element.elementor-element-df9531a{--display:flex;}.elementor-1344 .elementor-element.elementor-element-df9531a:not(.elementor-motion-effects-element-type-background), .elementor-1344 .elementor-element.elementor-element-df9531a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #2D4F44 0%, #1A3D32 90%);}.elementor-1344 .elementor-element.elementor-element-be22e34.elementor-element{--align-self:center;}.elementor-1344 .elementor-element.elementor-element-0d03b95{text-align:center;}.elementor-1344 .elementor-element.elementor-element-0d03b95 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:26px;font-weight:600;text-transform:uppercase;line-height:4px;color:#F1F1F1;}.elementor-1344 .elementor-element.elementor-element-c957251{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;text-transform:lowercase;line-height:6px;color:#ABABAB;}.elementor-1344 .elementor-element.elementor-element-80fe2b3{--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-1344 .elementor-element.elementor-element-1824b0c{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:36px;--grid-column-gap:40px;--grid-row-gap:0px;}.elementor-1344 .elementor-element.elementor-element-1824b0c .elementor-social-icon{background-color:#E501597D;}.elementor-1344 .elementor-element.elementor-element-1824b0c .elementor-social-icon i{color:#FFFFFFCF;}.elementor-1344 .elementor-element.elementor-element-1824b0c .elementor-social-icon svg{fill:#FFFFFFCF;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1344 .elementor-element.elementor-element-ddc4a98{--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;--justify-content:center;--align-items:center;}.elementor-1344 .elementor-element.elementor-element-d42e086{--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1344 .elementor-element.elementor-element-1e57c7f .elementor-heading-title{font-size:17px;line-height:0.9em;}.elementor-1344 .elementor-element.elementor-element-4832548{font-size:13px;line-height:1.1em;}.elementor-1344 .elementor-element.elementor-element-0d03b95 .elementor-heading-title{font-size:17px;line-height:0.2em;}.elementor-1344 .elementor-element.elementor-element-c957251{font-size:13px;line-height:0.1em;}.elementor-1344 .elementor-element.elementor-element-1824b0c{--grid-column-gap:23px;--grid-row-gap:0px;}}@media(max-width:767px){.elementor-1344 .elementor-element.elementor-element-3a7e5b0{--spacer-size:0px;}.elementor-1344 .elementor-element.elementor-element-eebed05 .elementor-heading-title{font-size:53px;}.elementor-1344 .elementor-element.elementor-element-ddc4a98{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1344 .elementor-element.elementor-element-1e57c7f .elementor-heading-title{font-size:20px;line-height:0.1em;}.elementor-1344 .elementor-element.elementor-element-4832548{line-height:0.1em;}.elementor-1344 .elementor-element.elementor-element-0d03b95 .elementor-heading-title{font-size:22px;line-height:0em;}body.elementor-page-1344{margin:2px 2px 2px 2px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-1344 .elementor-element.elementor-element-d6fe3b3{--content-width:100%;}.elementor-1344 .elementor-element.elementor-element-383e2a7{--width:50%;}.elementor-1344 .elementor-element.elementor-element-ddc4a98{--width:50%;}.elementor-1344 .elementor-element.elementor-element-d568c56{--width:100%;}}/* Start custom CSS for heading, class: .elementor-element-eebed05 *//* ===========================
   OPTION 2: NEON/GLOWING STYLE (Stands out more) ⭐ RECOMMENDED
   Add class "neon-heading" to the heading
   =========================== */

.neon-heading {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.5rem, 8vw, 5rem) !important;
  letter-spacing: clamp(3px, 0.5vw, 8px) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #E50159 !important;
  
  text-shadow:
    0 0 10px #E50159,
    0 0 20px #E50159,
    0 0 30px #E50159,
    0 0 40px #E50159,
    0 0 70px #E50159,
    0 0 80px #E50159,
    0 0 100px #E50159,
    0 0 150px #E50159,
    /* Outline for readability */
    -2px -2px 0 rgba(0,0,0,0.8),
    2px -2px 0 rgba(0,0,0,0.8),
    -2px 2px 0 rgba(0,0,0,0.8),
    2px 2px 0 rgba(0,0,0,0.8);
  
  margin-bottom: clamp(20px, 3vw, 40px);
  animation: neon-flicker 3s infinite alternate;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 10px #E50159,
      0 0 20px #E50159,
      0 0 30px #E50159,
      0 0 40px #E50159,
      0 0 70px #E50159,
      0 0 80px #E50159,
      0 0 100px #E50159,
      0 0 150px #E50159,
      -2px -2px 0 rgba(0,0,0,0.8),
      2px -2px 0 rgba(0,0,0,0.8),
      -2px 2px 0 rgba(0,0,0,0.8),
      2px 2px 0 rgba(0,0,0,0.8);
  }
  20%, 24%, 55% {
    text-shadow:
      0 0 5px #E50159,
      0 0 10px #E50159,
      -2px -2px 0 rgba(0,0,0,0.8),
      2px -2px 0 rgba(0,0,0,0.8),
      -2px 2px 0 rgba(0,0,0,0.8),
      2px 2px 0 rgba(0,0,0,0.8);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ddc4a98 *//* ===========================
   TEXT HEADING AS STREET SIGN (NON-CLICKABLE) - IMPROVED RESPONSIVE VERSION
   Use this CSS in Elementor → Advanced → Custom CSS
   Add CSS class "street-sign-heading" to your heading widget
   =========================== */

/* STREET SIGN HEADING STYLE - BASE (DESKTOP) */
.street-sign-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  
  /* RESPONSIVE SIZING */
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: clamp(50px, 6vw, 62px);
  padding: clamp(12px, 1.8vw, 18px) clamp(16px, 2.5vw, 24px);
  margin: 0 auto;
  box-sizing: border-box;
  
  /* TYPOGRAPHY */
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: clamp(1.5px, 0.2vw, 2.5px) !important;
  text-transform: uppercase !important;
  color: #f2f2f2 !important;
  line-height: 1.2 !important;
  
  /* BACKGROUND - FIXED TO MATCH HOMEPAGE BUTTONS */
  background-image:
    url("https://theetraperinna.com/wp-content/uploads/2025/10/Metal056B_8K-JPG_Color-scaled.jpg"),
    linear-gradient(to bottom, #2d4f44 0%, #1a3d32 90%) !important;
  background-blend-mode: overlay, normal;
  background-size: cover;
  background-position: center;
  
  /* BORDER & SHADOW */
  border: 2.5px solid #c4c4c4 !important;
  border-radius: 3px !important;
  
  box-shadow:
    0 10px 22px rgba(0,0,0,0.75),
    0 5px 11px rgba(0,0,0,0.55),
    inset 0 2px 5px rgba(255,255,255,0.12),
    inset 0 -3px 5px rgba(0,0,0,0.45) !important;
  
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

/* RUST/WEAR TEXTURE */
.street-sign-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.35) 0%, transparent 6%),
    radial-gradient(circle at 78% 68%, rgba(0,0,0,0.3) 0%, transparent 5%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15) 0%, transparent 10%),
    linear-gradient(97deg, transparent 48%, rgba(255,255,255,0.08) 50%, transparent 52%),
    linear-gradient(to bottom, rgba(139,69,19,0.16) 0%, transparent 100%);
  background-blend-mode: multiply, overlay, multiply, overlay, multiply;
  opacity: 0.92;
  pointer-events: none;
  border-radius: 3px;
  z-index: 1;
}

/* Ensure text is above texture */
.street-sign-heading .elementor-heading-title {
  position: relative;
  z-index: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #f2f2f2 !important;
}

/* ===========================
   RESPONSIVE BREAKPOINTS - OPTIMIZED FOR YOUR LAYOUT
   =========================== */

/* LARGE TABLETS & SMALL DESKTOPS (1024px - 1280px) */
@media (max-width: 1280px) {
  .street-sign-heading {
    min-height: clamp(48px, 5.5vw, 58px);
    padding: clamp(10px, 1.5vw, 16px) clamp(14px, 2.2vw, 20px);
    letter-spacing: clamp(1.2px, 0.18vw, 2px) !important;
  }
}

/* TABLETS (768px - 1024px) - Based on your screenshot */
@media (max-width: 1024px) {
  .street-sign-heading {
    min-height: 52px;
    padding: 12px 18px;
    letter-spacing: 1.5px !important;
    border: 2.2px solid #c4c4c4 !important;
    
    /* Slightly reduced shadow for tablets */
    box-shadow:
      0 8px 18px rgba(0,0,0,0.7),
      0 4px 9px rgba(0,0,0,0.5),
      inset 0 2px 4px rgba(255,255,255,0.12),
      inset 0 -3px 5px rgba(0,0,0,0.45) !important;
  }
  
  /* For the main "HIT ME UP" sign on tablets */
  .street-sign-heading.hero-sign,
  .street-sign-heading.large {
    min-height: 60px;
    padding: 14px 24px;
    letter-spacing: 2px !important;
    max-width: 400px;
  }
  
  /* For the contact info signs */
  .street-sign-heading.contact-sign {
    min-height: 50px;
    padding: 12px 16px;
    margin-bottom: 12px;
  }
}

/* LARGE PHONES / SMALL TABLETS (481px - 768px) */
@media (max-width: 768px) {
  .street-sign-heading {
    min-height: 48px;
    padding: 10px 16px;
    letter-spacing: 1.2px !important;
    border: 2px solid #c4c4c4 !important;
    
    box-shadow:
      0 6px 14px rgba(0,0,0,0.65),
      0 3px 7px rgba(0,0,0,0.45),
      inset 0 1.5px 3px rgba(255,255,255,0.1),
      inset 0 -2px 4px rgba(0,0,0,0.4) !important;
  }
  
  /* Main sign scales better */
  .street-sign-heading.hero-sign,
  .street-sign-heading.large {
    width: 90%;
    max-width: 350px;
    min-height: 56px;
    padding: 13px 20px;
    letter-spacing: 1.8px !important;
    margin: 0 auto 20px;
  }
  
  /* Contact signs optimized for stacked layout */
  .street-sign-heading.contact-sign {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    letter-spacing: 1px !important;
    margin-bottom: 10px;
  }
}

/* MOBILE PHONES (320px - 480px) - Based on your screenshot */
@media (max-width: 480px) {
  .street-sign-heading {
    min-height: 44px;
    padding: 9px 12px;
    letter-spacing: 1px !important;
    border: 1.8px solid #c4c4c4 !important;
    
    /* Lighter shadows for mobile performance */
    box-shadow:
      0 5px 12px rgba(0,0,0,0.6),
      0 2px 6px rgba(0,0,0,0.4),
      inset 0 1px 2px rgba(255,255,255,0.08),
      inset 0 -2px 3px rgba(0,0,0,0.35) !important;
  }
  
  /* Main "HIT ME UP" sign for mobile */
  .street-sign-heading.hero-sign,
  .street-sign-heading.large {
    width: 92%;
    max-width: 280px;
    min-height: 52px;
    padding: 12px 16px;
    letter-spacing: 1.5px !important;
    margin: 0 auto 16px;
  }
  
  /* Contact section signs for mobile */
  .street-sign-heading.contact-sign {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    letter-spacing: 0.8px !important;
    margin-bottom: 8px;
  }
  
  /* Email text wrapping improvement */
  .street-sign-heading .elementor-heading-title {
    font-size: inherit !important;
    line-height: 1.3 !important;
  }
}

/* EXTRA SMALL PHONES (< 375px) */
@media (max-width: 375px) {
  .street-sign-heading {
    min-height: 42px;
    padding: 8px 10px;
    letter-spacing: 0.8px !important;
  }
  
  .street-sign-heading.hero-sign,
  .street-sign-heading.large {
    min-height: 48px;
    padding: 11px 14px;
    letter-spacing: 1.2px !important;
  }
  
  .street-sign-heading.contact-sign {
    min-height: 40px;
    padding: 9px 10px;
    letter-spacing: 0.7px !important;
  }
}

/* ===========================
   SPECIFIC VARIATIONS FOR YOUR LAYOUT
   =========================== */

/* For the main "HIT ME UP" hero heading at top */
.street-sign-heading.hero-sign {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .street-sign-heading.hero-sign {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .street-sign-heading.hero-sign {
    margin-bottom: 16px;
  }
}

/* Full-width option for contact sections */
.street-sign-heading.full-width {
  width: 100%;
  max-width: 100%;
}

/* Compact inline heading option */
.street-sign-heading.compact {
  width: auto;
  min-width: clamp(100px, 15vw, 180px);
  padding: clamp(8px, 1vw, 12px) clamp(12px, 2vw, 20px);
}

@media (max-width: 768px) {
  .street-sign-heading.compact {
    min-width: 120px;
    padding: 9px 14px;
  }
}

/* ===========================
   CONTAINER ADJUSTMENTS
   =========================== */

/* If your container needs spacing adjustments */
.contact-container .street-sign-heading {
  margin-bottom: clamp(12px, 2vw, 20px);
}

@media (max-width: 768px) {
  .contact-container .street-sign-heading {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .contact-container .street-sign-heading {
    margin-bottom: 8px;
  }
}

/* ===========================
   OPTIONAL: HOVER EFFECTS
   =========================== */

/* Disable hover on mobile for better performance */
@media (hover: hover) and (pointer: fine) {
  .street-sign-heading:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.15) contrast(1.1);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.8),
      0 0 25px rgba(255,105,180,0.35),
      inset 0 2px 5px rgba(255,255,255,0.15),
      inset 0 -4px 7px rgba(0,0,0,0.5);
    border-color: #ff69b4;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Remove hover effects on touch devices */
@media (hover: none) {
  .street-sign-heading:hover {
    transform: none;
    filter: none;
  }
}/* End custom CSS */
/* Start custom CSS *//* ===========================
   REFINED DESIGN - FIXES FOR "OFF" FEELING
   
   ISSUES FIXED:
   1. Pole moved to side (or removed completely)
   2. Better spacing and flow
   3. Tighter, more cohesive layout
   4. Added content to boxes so they don't look empty
   5. Better visual balance
   =========================== */

/* ===========================
   OPTION A: STREET SIGN WITH POLE ON LEFT SIDE
   Add class "street-sign-side-pole" to your heading
   =========================== */

.street-sign-side-pole {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: clamp(20px, 3vw, 40px) auto clamp(30px, 4vw, 50px) auto;
  padding-left: clamp(35px, 4vw, 60px); /* Space for side pole */
}

/* THE STREET SIGN */
.street-sign-side-pole .elementor-heading-title {
  position: relative;
  z-index: 10;
  display: inline-block;
  padding: clamp(16px, 2.2vw, 26px) clamp(30px, 4.5vw, 55px);
  
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  
  letter-spacing: clamp(4px, 0.6vw, 10px) !important;
  text-transform: uppercase !important;
  color: #f2f2f2 !important;
  line-height: 1 !important;
  white-space: nowrap;
  
  background-image:
    url("https://theetraperinna.com/wp-content/uploads/2025/10/Metal056B_8K-JPG_Color-scaled.jpg"),
    linear-gradient(to bottom, #2d4f44 0%, #1a3d32 90%) !important;
  background-blend-mode: overlay, normal !important;
  background-size: cover !important;
  background-position: center !important;
  
  border: 3px solid #c4c4c4 !important;
  border-radius: 5px !important;
  
  box-shadow:
    0 12px 30px rgba(0,0,0,0.8),
    0 6px 15px rgba(0,0,0,0.6),
    inset 0 3px 8px rgba(255,255,255,0.15),
    inset 0 -4px 10px rgba(0,0,0,0.5);
}

/* Rust/Wear texture */
.street-sign-side-pole .elementor-heading-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.4) 0%, transparent 6%),
    radial-gradient(circle at 78% 68%, rgba(0,0,0,0.35) 0%, transparent 5%),
    radial-gradient(circle at 30% 80%, rgba(139,69,19,0.25) 0%, transparent 8%),
    linear-gradient(97deg, transparent 48%, rgba(255,255,255,0.1) 50%, transparent 52%),
    linear-gradient(to bottom, rgba(139,69,19,0.2) 0%, transparent 100%);
  opacity: 0.95;
  pointer-events: none;
  border-radius: 5px;
  z-index: 1;
}

.street-sign-side-pole .elementor-heading-title span {
  position: relative;
  z-index: 2;
}

/* POLE ON LEFT SIDE */
.street-sign-side-pole::after {
  content: '';
  position: absolute;
  left: clamp(10px, 1.5vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(10px, 1.2vw, 18px);
  height: 150%; /* Extends above and below sign */
  
  background: 
    linear-gradient(
      to right,
      #2a2a2a 0%,
      #4a4a4a 15%,
      #606060 30%,
      #707070 45%,
      #606060 60%,
      #4a4a4a 80%,
      #2a2a2a 100%
    );
  
  border-radius: clamp(5px, 0.6vw, 9px);
  
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,0.5),
    inset 3px 0 6px rgba(255,255,255,0.25),
    3px 0 12px rgba(0,0,0,0.6);
  
  z-index: 1;
}

/* Mounting bracket */
.street-sign-side-pole::before {
  content: '';
  position: absolute;
  left: clamp(5px, 1vw, 15px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(24px, 3vw, 40px);
  height: clamp(14px, 1.8vw, 24px);
  
  background: linear-gradient(to bottom, #505050 0%, #3a3a3a 40%, #2a2a2a 100%);
  border-radius: 3px;
  border: 1px solid #1a1a1a;
  
  box-shadow:
    0 3px 6px rgba(0,0,0,0.7),
    inset 0 2px 3px rgba(255,255,255,0.2);
  
  z-index: 11;
}


/* ===========================
   OPTION B: STREET SIGN - NO POLE (CLEANER)
   Add class "street-sign-clean" to your heading
   =========================== */

.street-sign-clean {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: clamp(20px, 3vw, 40px) auto clamp(30px, 4vw, 50px) auto;
}

.street-sign-clean .elementor-heading-title {
  position: relative;
  z-index: 10;
  display: inline-block;
  padding: clamp(16px, 2.2vw, 26px) clamp(30px, 4.5vw, 55px);
  
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: clamp(4px, 0.6vw, 10px) !important;
  text-transform: uppercase !important;
  color: #f2f2f2 !important;
  line-height: 1 !important;
  white-space: nowrap;
  
  background-image:
    url("https://theetraperinna.com/wp-content/uploads/2025/10/Metal056B_8K-JPG_Color-scaled.jpg"),
    linear-gradient(to bottom, #2d4f44 0%, #1a3d32 90%) !important;
  background-blend-mode: overlay, normal !important;
  background-size: cover !important;
  background-position: center !important;
  
  border: 3px solid #c4c4c4 !important;
  border-radius: 5px !important;
  
  box-shadow:
    0 12px 30px rgba(0,0,0,0.8),
    0 6px 15px rgba(0,0,0,0.6),
    inset 0 3px 8px rgba(255,255,255,0.15),
    inset 0 -4px 10px rgba(0,0,0,0.5);
  
  transform: rotate(-1deg); /* Slight tilt for character */
}

.street-sign-clean .elementor-heading-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.4) 0%, transparent 6%),
    radial-gradient(circle at 78% 68%, rgba(0,0,0,0.35) 0%, transparent 5%),
    radial-gradient(circle at 30% 80%, rgba(139,69,19,0.25) 0%, transparent 8%),
    linear-gradient(97deg, transparent 48%, rgba(255,255,255,0.1) 50%, transparent 52%),
    linear-gradient(to bottom, rgba(139,69,19,0.2) 0%, transparent 100%);
  opacity: 0.95;
  pointer-events: none;
  border-radius: 5px;
  z-index: 1;
}

.street-sign-clean .elementor-heading-title span {
  position: relative;
  z-index: 2;
}


/* ===========================
   OPTION C: JUST NEON TEXT (NO STREET SIGN) ⭐ RECOMMENDED
   Add class "neon-title" to your heading
   This might actually look best - clean and modern!
   =========================== */

.neon-title {
  position: relative;
  text-align: center;
  margin: clamp(20px, 3vw, 40px) auto clamp(30px, 4vw, 50px) auto;
}

.neon-title .elementor-heading-title {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 900 !important;

  letter-spacing: clamp(4px, 0.8vw, 12px) !important;
  text-transform: uppercase !important;
  color: #E50159 !important;
  line-height: 1 !important;
  
  text-shadow:
    /* Pink glow */
    0 0 15px rgba(229, 1, 89, 0.9),
    0 0 30px rgba(229, 1, 89, 0.7),
    0 0 45px rgba(229, 1, 89, 0.5),
    0 0 60px rgba(229, 1, 89, 0.3),
    /* Black outline */
    -2px -2px 0 rgba(0,0,0,0.9),
    2px -2px 0 rgba(0,0,0,0.9),
    -2px 2px 0 rgba(0,0,0,0.9),
    2px 2px 0 rgba(0,0,0,0.9),
    /* Depth */
    3px 3px 6px rgba(0,0,0,0.8);
  
  filter: brightness(1.1);
}


/* ===========================
   IMPROVED CONTACT BOXES
   Add class "contact-box-v2" to your containers
   Fixes: Empty space, better content layout
   =========================== */

.contact-box-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(35px, 4.5vw, 55px) clamp(30px, 4vw, 50px);
  min-height: clamp(200px, 22vw, 280px);
  
  background: linear-gradient(
    135deg,
    rgba(25, 35, 33, 0.92) 0%,
    rgba(35, 50, 47, 0.85) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  border: 2.5px solid #E50159;
  border-radius: 10px;
  
  box-shadow:
    0 10px 45px rgba(0,0,0,0.65),
    0 0 0 1px rgba(229, 1, 89, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 50px rgba(229, 1, 89, 0.35),
    0 0 90px rgba(229, 1, 89, 0.18);
  
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top accent line - thicker and brighter */
.contact-box-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(229, 1, 89, 0.4) 5%,
    #E50159 50%,
    rgba(229, 1, 89, 0.4) 95%,
    transparent 100%
  );
}

/* Subtle animated gradient */
.contact-box-v2::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: radial-gradient(
    circle at center,
    rgba(229, 1, 89, 0.08) 0%,
    transparent 60%
  );
  animation: subtle-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes subtle-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Hover effect - more pronounced */
.contact-box-v2:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #ff1470;
  
  box-shadow:
    0 18px 60px rgba(0,0,0,0.75),
    0 0 0 1px rgba(229, 1, 89, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 60px rgba(229, 1, 89, 0.55),
    0 0 120px rgba(229, 1, 89, 0.3);
}

/* Title styling */
.contact-box-v2 h2,
.contact-box-v2 h3,
.contact-box-v2 .elementor-heading-title {
  position: relative;
  z-index: 2;
  font-weight: 800 !important;
  letter-spacing: clamp(2.5px, 0.35vw, 4.5px) !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-bottom: clamp(20px, 2.5vw, 30px) !important;
  
  text-shadow:
    0 0 25px rgba(229, 1, 89, 0.7),
    0 3px 6px rgba(0, 0, 0, 0.9);
}

/* Email/contact styling - larger, more prominent */
.contact-box-v2 p,
.contact-box-v2 a {
  position: relative;
  z-index: 2;
  font-weight: 500;
  color: #e8e8e8;
  letter-spacing: clamp(0.5px, 0.12vw, 1.2px);
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.contact-box-v2 a:hover {
  color: #E50159 !important;
  text-shadow: 0 0 15px rgba(229, 1, 89, 0.6);
  transform: scale(1.05);
}

/* Icon styling */
.contact-box-v2 img {
  filter: drop-shadow(0 0 10px rgba(229, 1, 89, 0.5));
  transition: all 0.35s ease;
  margin-bottom: clamp(10px, 1.5vw, 18px);
}

.contact-box-v2:hover img {
  filter: drop-shadow(0 0 20px rgba(229, 1, 89, 0.8));
  transform: scale(1.15) rotate(5deg);
}


/* ===========================
   IMPROVED LAYOUT WRAPPER
   Add class "contact-layout" to parent section
   =========================== */

.contact-layout {
  display: flex;
  flex-direction: row;
  gap: clamp(25px, 3.5vw, 45px);
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(15px, 2vw, 30px);
}

.contact-layout > * {
  flex: 1;
  min-width: 0;
  max-width: 500px; /* Prevents boxes from getting too wide */
}


/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 1024px) {
  .street-sign-side-pole .elementor-heading-title,
  .street-sign-clean .elementor-heading-title {
    font-size: clamp(1.7rem, 5vw, 3.2rem) !important;
  }
  
  .neon-title .elementor-heading-title {
    font-size: clamp(2.2rem, 6.5vw, 4rem) !important;
  }
  
  .contact-box-v2 {
    padding: clamp(30px, 4vw, 45px) clamp(25px, 3.5vw, 40px);
  }
}

@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
    gap: clamp(22px, 3vw, 32px);
  }
  
  .contact-layout > * {
    max-width: 100%;
  }
  
  .street-sign-side-pole,
  .street-sign-clean,
  .neon-title {
    margin: clamp(15px, 2.5vw, 30px) auto clamp(25px, 3.5vw, 40px) auto;
  }
  
  .contact-box-v2 {
    min-height: clamp(180px, 20vw, 220px);
  }
}

@media (max-width: 480px) {
  .street-sign-side-pole .elementor-heading-title,
  .street-sign-clean .elementor-heading-title {
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    padding: clamp(12px, 2vw, 18px) clamp(20px, 3.8vw, 35px);
  }
  
  .neon-title .elementor-heading-title {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
  }
  
  .contact-box-v2 h2,
  .contact-box-v2 h3 {
    font-size: clamp(1rem, 2.5vw, 1.4rem) !important;
  }
  
  .contact-box-v2 p,
  .contact-box-v2 a {
    font-size: clamp(0.88rem, 2.2vw, 1.05rem) !important;
  }
}


/* ===========================
   USAGE GUIDE
   =========================== */

/*
CHOOSE YOUR HEADING STYLE:

⭐ OPTION C - Neon Text (RECOMMENDED - cleanest look):
   Add class: neon-title
   Result: Just glowing pink text, no sign

OPTION A - Street Sign with Side Pole:
   Add class: street-sign-side-pole
   Result: Sign with pole on left side

OPTION B - Street Sign No Pole:
   Add class: street-sign-clean
   Result: Floating street sign, slight tilt

FOR THE CONTACT BOXES:
   Remove: modern-contact-box
   Add: contact-box-v2
   Result: Improved spacing, better glow, smoother hover

FOR PARENT CONTAINER:
   Remove: contact-grid
   Add: contact-layout
   Result: Better spacing and max-width control

*//* End custom CSS */