/*
Theme Name: Hello Biz Child
Theme URI: https://elementor.com/products/hello-biz/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-biz
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Biz is a free, user-friendly Hybrid WordPress Theme that was crafted for seamless integration with the Elementor site builder and tailored specifically for business websites. Perfect for beginners, but far from limited to just them, it features a dedicated beginner-oriented “Home” screen to simplify and streamline the web-building process. Hello Biz also integrates with Elementor’s premium features, giving you access to tools like AI, and accessibility enhancements in one place. Whether launching a startup site or refining a company portfolio, Hello Biz offers a solid, responsive foundation for all web creators. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here: https://patchstack.com/database/wordpress/theme/hello-biz/vdp.
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready,style-variations
Version: 1.2.1.1775825855
Updated: 2026-04-10 12:57:35

*/

/* Nav Bugs */
.elementor-nav-menu--dropdown .menu-item-has-children > a::after {
    content: none !important;
}

.elementor-nav-menu {
    position: relative !important;
    z-index: 99999 !important;
}


.elementor-widget-nav-menu {
    position: relative !important;
    z-index: 99999 !important;
}



.elementor-397:not(.elementor-motion-effects-element-type-background),
.elementor-397 > .elementor-motion-effects-layer {
  background-color: #000 !important;
}


/* Base canvas */
html, body,
.elementor,
.elementor-location-body {
  background-color: #000 !important;
}




@font-face {
    font-family: 'Oswald Stencil Bold';
    src: url('fonts/oswald-stencil-bold.woff2') format('woff2'),
         url('fonts/oswald-stencil-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

h1, h2, h3, h5, h6, .site-title, .entry-title {
  font-family: 'Oswald Stencil Bold', sans-serif !important;
}

h1 {
  -webkit-text-stroke: .75px #000;
  text-stroke: .75px #000; /* Fallback for older implementations */
}


h2 {
    font-size: 52px;
}

/* Mobile-specific heading size */
@media (max-width: 767px) {
  h1,
  .elementor-widget-heading h1 {
    font-size: 48px !important;

  }

h2,
.elementor-widget-heading h2 {
    font-size: 40px!important;
}
}


/* Override Elementor heading fonts */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  font-family: 'Oswald Stencil Bold', sans-serif !important; /* Add Important to apply */
}




a {
    color: #9f2024;
    text-decoration: underline; 
}

a:hover {
    color: #fff; 
    text-decoration: none; 
}





@media (max-width: 1024px) {
  .elementor-cta_description.elementor-cta__content-item.elementor-content-item.elementor-animated-item--grow {
    font-size: 16px !important;
    line-height: 16px !important;
  }
}



/* Force the line height to fix Elementor px typo */
.elementor-widget-call-to-action.ctaname .elementor-cta__title {
    line-height: 1.2 !important;
}

/* Force long emails/URLs to wrap inside the CTA description */
.elementor-widget-call-to-action .elementor-cta__description,
.elementor-widget-call-to-action .elementor-cta__description p {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Centered red title box */
.ctamash .elementor-cta__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: auto;
  max-width: calc(100% - 40px);
  text-align: center;
  line-height: 1.2;
  z-index: 2;
}



/* Compact red box styling */
.ctamash .elementor-cta__title,
.ctamash .elementor-cta__title *,
.ctamash .elementor-cta__title span,
.ctamash .elementor-cta__title-text {
  display: inline-block;
  background-color: #9f2024;
  color: #fff;
  padding: 19px 20px;
  border-radius: 0px;
  white-space: wrap;
}

/* Instantly hide the title on hover (no transition, no jump) */
.ctamash:hover .elementor-cta__title {
  display: none;
}

/* Keep hover content on top */
.ctamash .elementor-cta__content {
  position: relative;
  z-index: 3;
}



.elementor-widget-call-to-action .elementor-cta__description {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show it when hovering over the CTA */
.elementor-widget-call-to-action:hover .elementor-cta__description {
  opacity: 1;
}

.elementor-widget-call-to-action a {
  color:#fff!important;  
}

.elementor-widget-call-to-action a:hover {
  font-weight: 700;
}



/* Make the CTA a positioning context */
.ctaname .elementor-cta {
  position: relative;
  overflow: hidden;
}

/* FULL-WIDTH RED BAR, pinned to bottom */
.ctaname .elementor-cta__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                 /* stick to bottom */
  z-index: 3;
  margin: 0;                 /* remove default h3 margins */
  background: #9f2024;       /* put the red on the h3 itself */
  color: #fff;
  text-align: center;
  display: flex;             /* center text nicely */
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* bar height (adjust) */
  padding: 10px 16px;        /* inner spacing */
  line-height: 1.2;
  transform: none;           /* cancel any previous transforms */
  white-space: normal;       /* allow wrapping on long names */
  word-break: break-word;
}

/* Ensure inner spans don’t override the bar’s background/padding */
.ctaname .elementor-cta__title *,
.ctaname .elementor-cta__title span,
.ctaname .elementor-cta__title-text {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit;
}

/* Reserve vertical space so the bar doesn’t overlap/hide content */
.ctaname .elementor-cta__content {
  position: relative;
  z-index: 2;
  padding-bottom: 56px;      /* a bit larger than min-height above */
}

.ctaname .elementor-cta__bg-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
}

/* Mobile fine-tuning */
@media (max-width: 767px) {
  .ctaname .elementor-cta__title { min-height: 44px; padding: 8px 12px; }
  .ctaname .elementor-cta__content { padding-bottom: 50px; }
}



/* Smooth transition */
.ctaname .elementor-cta__title {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Hide bar + text on hover */
.ctaname:hover .elementor-cta__title,
.ctaname:hover .elementor-cta__title * {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  visibility: hidden !important;
}


/* Fix for CTA name overlap on mobile */
@media (max-width: 767px) {
  .elementor-widget-call-to-action.ctaname .elementor-cta__title {
    font-size: 24px !important;
    line-height: 24px!important; /* Use a unitless line-height for proper scaling */
  }
}


/* Fix for CTA name overlap on mobile */
@media (max-width: 1680px) {
  .elementor-widget-call-to-action.ctaname .elementor-cta__title {
    line-height: 24px!important; /* Use a unitless line-height for proper scaling */
  }
}




@media (max-width: 767px) {
  .elementor-widget-call-to-action.ctaname .elementor-cta__title {
    font-size: 24px !important;
    line-height: 28px !important; 
  }
}

.elementor-widget-call-to-action.ctamash .elementor-cta__title {
  line-height: 28px !important; 
}


/* Tablet & down */
@media (max-width: 1024px) {
  /* Description copy inside your CTA boxes */
  .ctamash .elementor-cta_description,
  .ctaname .elementor-cta_description,
  .ctamash .elementor-cta__description,
  .ctaname .elementor-cta__description,
  .ctamash .elementor-cta_description p,
  .ctaname .elementor-cta_description p,
  .ctamash .elementor-cta__description p,
  .ctaname .elementor-cta__description p {
    font-size: 18px !important;
    line-height: 18px !important;
  }
}


/* Tablet & down */
@media (max-width: 767px) {
  /* Description copy inside your CTA boxes */
  .ctamash .elementor-cta_description,
  .ctaname .elementor-cta_description,
  .ctamash .elementor-cta__description,
  .ctaname .elementor-cta__description,
  .ctamash .elementor-cta_description p,
  .ctaname .elementor-cta_description p,
  .ctamash .elementor-cta__description p,
  .ctaname .elementor-cta__description p {
    font-size: 15px !important;
    line-height: 15px !important;
  }
}


@media (max-width: 1024px) {
  /* CTA title override */
  .ctamash .elementor-cta_title,
  .ctaname .elementor-cta_title,
  .ctamash .elementor-cta__title,
  .ctaname .elementor-cta__title,
  .ctamash .elementor-cta__title h3,
  .ctaname .elementor-cta__title h3,
  .ctamash .elementor-cta_title h3,
  .ctaname .elementor-cta_title h3 {
    font-size: 20px !important;
  }
}


















header .elementor-menu-toggle svg {
  width: 32px !important;  
  height: 32px !important;
  stroke-width: 1.5;
margin-top:-15px;
}



header .elementor-widget-button .elementor-button {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  text-align: center;
  justify-content: center;
}





header .elementor-menu-toggle {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Optional: remove background on hover/focus too */
header .elementor-menu-toggle:hover,
header .elementor-menu-toggle:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}






/* Global button sizing for Elementor buttons */
.elementor-button {
  min-width: 180px;   /* minimum width so smaller text still looks consistent */
  max-width: 300px;   /* prevents long labels from getting too wide */
  text-align: center; /* keeps text centered */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Optional: make sure spacing and padding stay uniform */
.elementor-button .elementor-button-text {
  white-space: wrap;
}

.elementor-button-content-wrapper {
  width: 100%; /* makes sure content fills the button */
}

/* Collapse all submenus by default on mobile */
/* --- Collapse submenus by default --- */
.elementor-nav-menu--dropdown .sub-menu {
  display: none;
}

/* --- When user clicks the built-in toggle button --- */
.elementor-nav-menu--dropdown .menu-item-has-children > .elementor-item-active + .sub-menu,
.elementor-nav-menu--dropdown .menu-item-has-children.elementor-item-active > .sub-menu {
  display: block;
}

/* --- Mobile adjustments --- */
@media (max-width: 1024px) {
  .elementor-button {
    min-width: 20px; /* much smaller minimum width for mobile */
  }
}







/* Show + icon only below 1690px */
@media (max-width: 1690px) {
  .elementor-nav-menu--dropdown .menu-item-has-children > a::after {
    content: "+"; 
    float: right;
    font-size: 28px;        
    font-weight: 900;
    line-height: 1;     
    transition: transform 0.2s ease;
  }
}

/* Hide the + icon at larger breakpoints */
@media (min-width: 1691px) {
  .elementor-nav-menu--dropdown .menu-item-has-children > a::after {
    content: none !important;
  }
}








/* --- Optional spacing + clarity --- */
.elementor-nav-menu--dropdown .menu-item-has-children > a {
  position: relative;
  cursor: pointer;
}


/* === Submenu Styling (2nd level and deeper) === */

/* Target submenus inside other submenus */
.elementor-nav-menu--dropdown .sub-menu .sub-menu {
  background: #fff !important;      /* white background */
  color: #000 !important;           /* default black text */
  border-top: 1px solid #ddd;       /* optional subtle divider */
  padding: 0 !important;
}

/* Make submenu links black by default */
.elementor-nav-menu--dropdown .sub-menu .sub-menu a {
  color: #000 !important;
  background: #fff !important;
  padding: 12px 20px !important;
  font-weight: 600;
  text-transform: none;
}

/* Hover or active state: inverse for contrast */
.elementor-nav-menu--dropdown .sub-menu .sub-menu a:hover,
.elementor-nav-menu--dropdown .sub-menu .sub-menu a.elementor-item-active {
  color: #fff !important;
  background: #9f2024 !important; /* your brand red */
}

/* Optional: adjust dropdown arrow color inside white submenus */
.elementor-nav-menu--dropdown .sub-menu .sub-menu .menu-item-has-children > a::after {
  color: #000 !important;
}

/* === Style all dropdowns (1st level and deeper) === */
.elementor-nav-menu--dropdown .sub-menu {
  background: #fff !important;          /* white background */
  border-top: 1px solid #ddd;           /* optional subtle divider */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* optional soft shadow */
  padding: 0 !important;
}

/* All submenu links: black text on white */
.elementor-nav-menu--dropdown .sub-menu a {
  color: #000 !important;
  background: #fff !important;
  padding: 12px 20px !important;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}