/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 

/* --------------------------------------------------------
   1. The Container
   Must be set to relative for the SVG positioning to work. 
   Apply this class to the parent Row or Column that contains the SVG module.
   -------------------------------------------------------- */
.hero-one-overlay {
    position: relative; 
    overflow: hidden;
}

/* --------------------------------------------------------
   2. The SVG Positioning and Sizing
   -------------------------------------------------------- */
.svg-one-overlay {
    /* Critical positioning properties */
    position: absolute; 
    z-index: 5; /* Ensures it sits above other content */
    pointer-events: none; /* Allows clicks/interaction with the content underneath */

    /* Sizing (Use vh/vw to make it responsive) */
    width: 35vw;
    height: 60vh; 

    /* Positioning (Adjust these values to place it where you like) */
    bottom: -60px;
    left: 89vw; 

    /* Translate back 50% of its own height/width to center it better */
    transform: translate(-90%, 0); 
    
    /* Optional: Rotate/Transform for style */
    /* transform: translate(0, -50%) rotate(-5deg); */
}

@media (max-width: 1440px) {
	.svg-one-overlay {
		width: 50%;
		height: auto;
		left: 100%;
		transform: translate(-70%, 0);
	}
}

@media (max-width: 1220px) {
	.svg-one-overlay {
		width: 100%;
		height: auto;
		left: 100%;
		transform: translate(-50%, 0);
	}
}

/* --------------------------------------------------------
   3. The Main Heading Style
   -------------------------------------------------------- */
.hero-text-container h1 {
    /* Use the largest size and weight you need */
    font-size: 10vw; 
    font-weight: 900; 
    line-height: 0.9; /* Important: Tighten line height to bring lines closer */
    color: #ffffff;
    /* You may need 'position: relative;' on the H1 if the span positioning is tricky */
    position: relative; 
}

.hero-text-container h1 .red-header {
    color: #FF0000;
}

@media (min-width: 1920px) {
	.hero-text-container h1 {
    /* Use the largest size and weight you need */
		font-size: 192px;
	}
}

/* --------------------------------------------------------
   4. The Nested Smaller Text (The Key)
   -------------------------------------------------------- */
.hero-text-container .nested-text {
    /* Break it out of the flow */
    position: absolute; 
    
    /* Font style for the smaller text */
    font-size: 1.5vw; /* Much smaller size, scales responsively */
    font-weight: 400; /* Use your 'regular' (SemiBold) weight */
    line-height: 1.2;
    
    /* Positioning Adjustments (The key to placement) */
    top: 5%;    /* Adjust vertical position (e.g., 30% down from the top of the H1) */
    left: 50vw;   /* Adjust horizontal position */
    
    /* Ensure it stays on top of the main text */
    z-index: 10; 
    
    /* Force line breaks if the text is long */
    display: inline-block;
    width: 250px; /* Give it a set width to control wrapping */
}

@media (min-width: 1920px) {
	.hero-text-container .nested-text {
		font-size: 28.8px;
		left: 960px;
}