/* ===================================
   SERVICE INTRO TWO BLOCK STYLES
   =================================== */

/* Main block container */
.service-intro-two-section {
    /* Inherit theme container styles */
    width: 100%;
    max-width: 100vw; /* Prevent horizontal overflow */
    margin: 0 auto;
    padding: 80px 20px 0px 20px; /* Top: 10px, Right: 20px, Bottom: 30px, Left: 40px */ /* Main padding for the entire block */
    display: flex;
    flex-direction: column;
    gap: 54px; /* Gap between hero and content sections */
    overflow-x: hidden; /* Prevent horizontal scroll */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* First section: Hero area */
.service-intro-two-hero {
    background: white;
    text-align: center;
    width: 100%;
}

/* Responsive container with theme variables - Hero section */
.service-intro-two-hero-container {
    max-width: var(--container-width, 1200px);
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* Unified gap between hero elements */
    padding: 0; /* No side padding - main container handles it */
    box-sizing: border-box;
}

/* Responsive container with theme variables - Content section */
.service-intro-two-content-container {
    max-width: var(--container-width, 1200px);
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 0; /* No side padding - main container handles it */
    box-sizing: border-box;
}

/* Main service title - H1 Montserrat Bold 48px */
.service-intro-two-title {
    font-size: 48px;
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: var(--primary-color, #354477);
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word; /* Prevent long words from overflowing */
    hyphens: auto; /* Enable automatic hyphenation */
}

/* Service description - Montserrat Bold 16px */
.service-intro-two-description {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* No margin - gap handles spacing */
    padding: 0; /* No side padding - main container handles it */
    box-sizing: border-box;
}

.service-intro-two-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary-color, #354477);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

/* Call-to-action button */
.service-intro-two-cta {
    margin: 0; /* No margin - gap handles spacing */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Button styling now handled by global .atax-button component */
/* The .service-cta-button class is passed as a custom class to maintain specific styling if needed */

/* Second section: Image and content side by side */
.service-intro-two-content {
    background: white;
    width: 100%;
}

/* Image on the left */
.service-intro-two-image {
    flex: 1;
    max-width: 500px;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.service-image {
    width: 100%;
    height: auto;
    border-radius: 160px 0 160px 0; /* Top left and bottom right rounded */
    display: block;
    max-width: 100%; /* Ensure image doesn't exceed container */
}

/* Content on the right */
.service-intro-two-text {
    flex: 1;
    max-width: 600px;
    min-width: 0; /* Allow flex item to shrink below content size */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Unified gap between main text sections */
}

/* Title container - no gap needed since note was removed */
.service-intro-two-title-note {
    margin: 0;
}

/* Section title - H2 Montserrat Bold 32px */
.service-intro-two-section-title {
    font-size: 32px;
    font-weight: 700; /* Bold */
    line-height: 1.3;
    color: var(--primary-color, #354477);
    margin: 0; /* No margin - gap handles spacing */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word; /* Prevent long words from overflowing */
    hyphens: auto; /* Enable automatic hyphenation */
}



/* Section description paragraph */
.service-intro-two-section-description {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #354477;
}

.service-intro-two-section-description p {
    font-size: 16px;
    line-height: 1.6;
    color: #354477;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium weight for regular text */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

/* Bold text within the paragraph */
.service-intro-two-section-description strong {
    font-weight: 700; /* Bold weight for emphasized text */
}

/* ===================================
   ADDITIONAL CONTENT SECTION
   =================================== */

/* Additional content container */
.service-intro-two-additional {
    background: white;
    width: 100%;
}

.service-intro-two-additional-container {
    max-width: 855px; /* As requested - max width 855px */
    width: 100%;
    margin: 0 auto;
    padding: 0; /* No side padding - main container handles it */
    box-sizing: border-box;
}

/* Additional paragraph styling */
.service-intro-two-additional-paragraph {
    margin: 0 0 32px 0; /* Bottom margin for spacing before list */
    font-family: 'Montserrat', sans-serif;
    color: #354477;
}

.service-intro-two-additional-paragraph p {
    font-size: 16px;
    line-height: 1.6;
    color: #354477;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium weight for regular text */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

/* Checkmark list styling */
.service-intro-two-checkmark-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between list items */
}

.service-intro-two-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Space between checkmark and text */
}

/* Checkmark icon styling */
.service-intro-two-checkmark-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-top: 2px; /* Slight top alignment adjustment */
}

/* List item text styling */
.service-intro-two-list-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary-color, #354477);
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium weight for regular text */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

/* ===================================
   OVERFLOW PROTECTION & TEXT HANDLING
   =================================== */

/* Prevent text overflow on all screen sizes */
.service-intro-two-title,
.service-intro-two-section-title,
.service-intro-two-description p,
.service-intro-two-section-description p,
.service-intro-two-additional-paragraph p,
.service-intro-two-list-text {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Ensure containers don't cause horizontal scroll */
.service-intro-two-hero,
.service-intro-two-content,
.service-intro-two-additional {
    max-width: 100%;
    overflow: hidden;
}

/* Handle very long words or URLs */
.service-intro-two-description,
.service-intro-two-section-description {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Ensure flex containers don't overflow */
.service-intro-two-hero-container,
.service-intro-two-content-container {
    min-width: 0; /* Allow flex items to shrink */
    flex-shrink: 1; /* Allow containers to shrink */
}

/* Image overflow protection */
.service-intro-two-image {
    overflow: hidden; /* Prevent image from causing overflow */
}


/* ===================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ===================================
   
   BREAKPOINT STRATEGY:
   - 1600px+: Desktop default (full layout)
   - 1151px-1600px: Laptop (reduced gaps only, same fonts)
   - 768px-1150px: Tablet (columns stack, mobile layout)
   - 0px-767px: Mobile (stacked layout, reduced padding)
   =================================== */

/* Laptop - Reduced gaps and spacing only */
@media (max-width: 1600px) {
    .service-intro-two-content-container {
        gap: 60px; /* Reduce gap for smaller screens */
    }
}

/* Tablet - Columns stack and mobile layout begins at 1150px */
@media (max-width: 1150px) {
    .service-intro-two-hero-container {
        max-width: var(--wide-width, 1280px);
        padding: 0; /* No side padding - main container handles it */
    }
    
    .service-intro-two-content-container {
        max-width: var(--wide-width, 1280px);
        gap: 50px; /* Further reduce gap */
        padding: 0; /* No side padding - main container handles it */
        flex-direction: column; /* Stack columns on tablet */
        text-align: center;
    }
    
    .service-intro-two-image {
        max-width: 450px; /* Slightly smaller image */
        order: 1; /* Move image to top on tablet */
    }
    
    .service-intro-two-text {
        order: 2; /* Move text below image on tablet */
        max-width: 800px; /* Full width on tablet */
    }
    
    /* Additional content tablet adjustments */
    .service-intro-two-additional-container {
        padding: 0 20px; /* Add side padding on tablet */
    }
}

/* Mobile - Optimized for small screens */
@media (max-width: 767px) {
    .service-intro-two-section {
        padding: 60px 16px 30px 16px; /* Top: 60px, Right: 16px, Bottom: 30px, Left: 16px */
        gap: 40px; /* Scaled down from 54px for mobile */
    }
    
    .service-intro-two-hero-container {
        padding: 0; /* No side padding needed - main container handles it */
    }
    
    .service-intro-two-content-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 0; /* No side padding needed - main container handles it */
    }
    
    .service-intro-two-title {
        font-size: 36px;
        padding: 0; /* No side padding - main container handles it */
    }
    
    .service-intro-two-section-title {
        font-size: 24px;
        padding: 0; /* No side padding - main container handles it */
    }
    
    .service-intro-two-description {
        padding: 0; /* No side padding - main container handles it */
    }
    
    .service-intro-two-description p {
        font-size: 16px;
    }
    
    .service-intro-two-image {
        max-width: 100%; /* Full width on mobile */
        order: 1; /* Move image to top on mobile */
    }
    
    .service-intro-two-text {
        order: 2; /* Move text below image on mobile */
        max-width: 100%; /* Full width on mobile */
    }
    
    /* Additional content mobile adjustments */
    .service-intro-two-additional {
        margin-top: 30px; /* Slightly reduced spacing on mobile */
    }
    
    .service-intro-two-additional-container {
        padding: 0 16px; /* Add side padding on mobile for better readability */
    }
    
    .service-intro-two-checkmark-list {
        gap: 14px; /* Slightly reduced gap on mobile */
    }
}

/* ===================================
   ALIGNMENT SUPPORT
   =================================== */

/* Wide alignment support */
.service-intro-two-section.alignwide {
    max-width: var(--wide-width, 1280px);
}

/* Full width alignment support */
.service-intro-two-section.alignfull {
    max-width: 100%;
}