.elementor-7 .elementor-element.elementor-element-be406fe{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-12a6351 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-58e4aaf{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-7 .elementor-element.elementor-element-0a32cca.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-7 .elementor-element.elementor-element-0a32cca.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-7 .elementor-element.elementor-element-0a32cca.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-7 .elementor-element.elementor-element-0a32cca > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-4819286 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-733860c */:root {
    --font-heading: 'Merriweather', serif;
    --font-body: 'Roboto', sans-serif;
    --color-heading: #070B47; /* Dark Blue */
    --color-text: #646A29;    /* Olive Green */
    --color-background-hero-content: #F8F6F0; /* Off-white from image */
    --color-white: #FFFFFF;
    --color-button-solid-bg: #070B47;
    --color-button-solid-text: #FFFFFF;
    --color-button-outline-border: #070B47;
    --color-button-outline-text: #070B47;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.maintext {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white); /* Default background */
}

.container {
    max-width: 1440px; /* Adjusted for content width */
    margin: 0 auto;
}

/* --- Hero Section --- */
.hero-section {
    /* The off-white background for the content area below the image */
    background-color: var(--color-background-hero-content); 
}

.hero-image-container {
    background-image: url('https://leadforwardnow.org/wp-content/uploads/2025/05/Download-premium-image-scaled.png');
    background-size: cover;
    
    height: 810px; /* Adjust as needed, this matches the image's bottom edge closely */
    position: relative; /* Crucial for absolute positioning of overlays */
    display: flex; /* To align child .hero-text-overlay */
    align-items: flex-end; /* Align text overlay to bottom */
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://leadforwardnow.org/wp-content/uploads/2025/05/Rectangle-1-scaled.png');
    background-size: cover; /* Stretches the gradient to cover the area */
    background-position: center; /* Center the gradient image */
    background-repeat: no-repeat;
    z-index: 1; /* Sits above the container's background-image */
}

.hero-text-overlay {
    position: relative; /* To enable z-index and ensure it's above the gradient */
    z-index: 2; /* Sits on top of the gradient overlay */
    width: 100%;
    padding: 0 0.5% 5px; /* Adjust padding as needed for text positioning */
}

.hero-text-overlay h1 {
    font-family: 'Inter';
    /*font-size: clamp(12rem, 10vw, 7rem);*/
    font-size: clamp(9rem, 10vw, 2rem);
    color: var(--color-heading);
    font-weight: 600;
    line-height: 0.66;
    margin: 0;
    text-align:center;
    vertical-align: middle;
    white-space: nowrap;

}

.forward{
    font-family: 'Inter'!important;
    font-style: italic;
}

.hero-content-wrapper {
    padding: 50px 0; /* Spacing for the content below image */
    background: #f2f0e3;
}

.hero-content {
    /* max-width: 1140px; */
    margin: 0 auto;
    padding: 0 64px 0;
    display: flex
;
    justify-content: space-between;
    align-items: center;
    gap: 38px;
}

.hero-content-text {
    flex-basis: 55%; /* Give more space to the heading */
    padding-top:165px;
    min-width:20%;
    padding-bottom:131px;
}

.hero-content-text h2 {
    color: #070B47;
    font-family: Roboto;
    font-size: 71.375px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 78.512px */
    margin-bottom: 0; 
}

.hero-content-text h2 em {
    color: #070B47;
    font-family: Merriweather;
    font-size: 71.375px;
    font-style: italic;
    font-weight: 700;
    line-height: 110%;
}

.hero-content-text .highlight-italic {
    font-style: italic;
    font-weight: 700; /* Merriweather regular italic for "Thrive" and "Succeed" */
}

.hero-content-cta {
    flex-basis: 40%; /* Remaining space */
     /* CTA paragraph text color */
    color: var(--Navy, #070B47);
    /* Text/Medium/Normal */
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    padding-left:-100px;
    font-weight: 400;
    line-height: 150%; /* 27px */
}

.hero-content-cta p {
    margin-bottom: 25px;
    margin-top:-40px;
    color: var(--Navy, #070B47);
    /* Text/Medium/Normal */
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}

.buttons {
    display: flex;
    gap: 15px;
    width: 356px;
}

.btn {
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 25px; /* Pill shape */
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-button-outline-border);
    color: var(--color-button-outline-text);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.btn-outline:hover {
    background-color: var(--color-button-outline-border);
    color: var(--color-white);
}

.btn-solid {
    background-color: var(--color-button-solid-bg);
    color: var(--color-button-solid-text);
    border-color: var(--color-button-solid-bg);
    color: var(--Color, #F2F0E3);
    /* Text/Regular/Normal */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.btn-solid:hover {
    background-color: #05083a; /* Slightly darker shade for hover */
    border-color: #05083a;
}

/* --- Services Snapshot Section --- */
.services-snapshot {
    padding-left:64px;
    padding-top:112px;
    text-align: center;
    background-color: var(--color-white); /* White background for this section */
}

.section-subtitle {
    color: #646A29;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    letter-spacing: 2.24px;
    text-transform: uppercase;
    padding-bottom:57.78px;
    
}

.section-title {
    color: #070B47;
    font-family: Roboto;
    font-size: 64.221px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 77.065px */
     text-align: left;
     padding-bottom:76.2px;
}

.section-title em , 
.section-title  i  {
    color: #070B47;
    font-family: Merriweather;
    font-size: 64.221px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.services-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: left; /* Align text within cards to the left */
}

.service-card {
    flex: 1; /* Each card takes equal width */
    padding: 20px; /* Optional: add padding if cards have borders/backgrounds */
    padding-bottom:94px;
}

.service-card img {
    margin-bottom: 20px;
    width: 62px;
    height: 61.851px;
    flex-shrink: 0;
    aspect-ratio: 62.00/61.85;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text); /* Card titles use the olive green */
    font-weight: 700; /* Merriweather bold */
    margin-bottom: 10px;
    line-height: 1.4;
}

.service-card p {
    font-size: 0.9rem;
    color: #070B47; /* Card paragraph text color */
    margin-bottom: 20px;
    line-height: 1.6;
    font-weight: 500;
    font-family: 'Roboto';
}

.get-started-link {
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-decoration: none;
    font-weight: 700; /* Bold */
    padding-left: 62%;
    color: var(--green, #646A29);
}

.first {
    padding-top:29.5px;
}
.third {
    padding-top:26.5px;
}

.get-started-link .arrow {
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

.get-started-link:hover .arrow {
    margin-left: 10px;
}


/* --- Responsive Adjustments --- */

/* Tablet and larger mobile landscape */
@media (max-width: 992px) {
    
    .hero-content-text {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .services-snapshot {
      padding-left: 24px;
      padding-top: 112px;
    }
    
    .hero-content {
        flex-direction: column;
        align-items: center; /* Center content when stacked */
        text-align: center; /* Center text when stacked */
    }
    
    .hero-content-text, .hero-content-cta {
        flex-basis: 100%;
        max-width: 600px; /* Limit width for better readability when stacked */
    }
    
    .hero-content-cta {
        margin-top: 30px;
    }
    
    .buttons {
        justify-content: center;
    }

    .services-grid {
        justify-content: center; /* Center cards when they start to wrap */
        gap: 25px;
    }
    
    .service-card h3 {
        font-size: 1.15rem;
    }
}

/* Smaller tablets and mobile landscape */
@media (max-width: 768px) {
    .hero-image-container {
        height: 450px; /* Slightly shorter hero image on smaller screens */
    }
    .services-snapshot{
        padding-left:12px;
    }
    
    .hero-text-overlay h1 {
        padding: 0 5% 15px; /* Adjust padding for smaller screens */
        font-size: clamp(2.5rem, 8vw, 5rem);
    }
    
    .hero-content-text h2 {
        font-size: clamp(1.8rem, 4.5vw, 2.8rem);
    }
    
    .section-title {
        font-size: clamp(1.6rem, 3.5vw, 2.2rem);
        margin-bottom: 0px;
    }

    .services-grid {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards when stacked */
    }
    .service-card {
        max-width: 400px; /* Limit card width when stacked */
        padding:0;
        width: 90%; /* Ensure it doesn't always take 400px if screen is smaller */
        text-align: center; /* Center text within cards */
        margin-bottom: 30px;
        flex-basis: auto; /* Reset flex-basis when stacking */
    }
    .service-card:last-child {
        margin-bottom: 0;
    }
    .service-card img {
        margin-left: auto;
        margin-right: auto; /* Center icon */
    }
    
    .hero-content {
    gap: 0px;
    padding: 0 0px; 
    
}
}

/* Mobile portrait */
@media (max-width: 480px) {
     .hero-content {
    padding: 0 0px; 
    gap: 0px;
    }
    .hero-image-container {
        height: 350px; /* Even shorter hero */
    }
    .hero-text-overlay h1 {
        font-size: clamp(2rem, 7vw, 4rem); /* Further reduce for very small screens */
    }
    .hero-content-text h2 {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }
    .section-title {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
        margin-bottom: 30px;
    }
    .section-title em{
        font-size: clamp(3.5rem, 3.5vw, 2rem);
        margin-bottom: 30px;
    }
    .buttons {
        flex-direction: column; /* Stack buttons */
        align-items: center;
        gap: 10px;
    }
    .btn {
        width: 80%; /* Make buttons take more width */
        max-width: 280px;
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    .service-card {
        width: 100%; /* Allow cards to take full width of container padding */
    }
    .service-card h3 {
        font-size: 1.1rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4819286 */.bottom_block {
            font-family: 'Roboto';
            margin: 0; /* Remove default body margin */
            background-color: #f0f0f0; /* A neutral background for the page */
            /* Styles for centering the component within the viewport are removed
               as the component will now manage its own max-width and centering.
               Add padding to body if you want space around the component when
               the viewport is wider than 1440px and the component is centered.
               e.g., padding-top: 20px; padding-bottom: 20px; */
        }
        
.image-column img {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

       .about-ari-container {
            display: flex;
            width: 100%;
            margin: 0 auto;
            background-color: #F9F7EF;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            /* align-items: stretch; is the default, ensuring columns match height */
        }

        .text-content {
            flex: 0 0 55%;
            padding: 0px 200px 70px 64px; /* Increased top/bottom padding */
            box-sizing: border-box;
            color: #3A3A3A;
            display: flex; /* Added for vertical centering */
            flex-direction: column; /* Added for vertical centering */
            justify-content: center; /* Added for vertical centering */
            color: #070B47;
            margin-bottom:-10px;
        }

        .preview-label {
            padding-top:100px;
            font-family: 'Roboto';
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 24px;
            text-transform: capitalize;
            color: var(--green, #646A29);
            /* Heading/Desktop/Tagline */
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%; /* 24px */
        }

        .main-heading {
            color: var(--navy, #070B47);
            /* Heading/Desktop/H3 */
            font-family: Roboto;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%; /* 48px */
            margin-top: 0;
            margin-bottom: 25px;
        }

        .main-heading em {
            font-style: italic;
            font-weight: 700;
            color: var(--navy, #070B47);
            font-family: Merriweather;
            font-size: 40px;
            font-style: italic;
            font-weight: 700;
            line-height: 120%;
        }
        
        .main-heading i {
            color: var(--navy, #070B47);
            font-family: Merriweather;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
        }
        

        .intro-paragraph {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 35px;
        }

        .details-grid {
            display: flex;
            gap: 40px;
            margin-top: 30px;
        }

        .detail-item {
            flex: 1;
        }

        .detail-item h2 {
            font-family: 'Roboto';
            margin-top: 0;
            margin-bottom: 10px;
            color: var(--green, #646A29);
            font-family: Merriweather;
            font-size: 20px;
            font-style: italic;
            font-weight: 700;
            line-height: 140%; /* 28px */
            width: 270px;
        }

        .detail-item p {
            font-size: 15px;
            line-height: 1.6;
            margin: 0;
        }

        .image-column {
            flex: 0 0 45%;
        }

        .image-column img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Responsive adjustments */
        @media (max-width: 900px) {
            .about-ari-container {
                flex-direction: column;
            }

            .text-content {
                flex-basis: auto;
                padding: 60px 30px; /* Adjust padding for stacked view */
                order: 1;
                /* justify-content: center; will still apply which is good */
            }

            .image-column {
                flex-basis: auto;
                order: 2;
                width: 100%;
                height: 400px;
            }
            
            .main-heading {
                font-size: 32px;
            }
            .detail-item h2 {
                font-size: 18px;
            }
        }

        @media (max-width: 600px) {
            .text-content {
                padding: 40px 20px; /* Further adjust padding */
            }
            .main-heading {
                font-size: 28px;
            }
            .intro-paragraph {
                font-size: 15px;
            }
            .details-grid {
                flex-direction: column;
                gap: 25px;
            }
             .detail-item p {
                font-size: 14px;
            }
             .image-column {
                height: 300px;
            }
        }/* End custom CSS */