/* Custom fixes for form elements */

/* Fix select dropdown color when option is selected */
/* Using attribute selector to override inline styles */
select.mf-input[style*="color"],
select.attr-form-control[style*="color"],
select[style*="color"] {
    color: #000 !important; /* Black color for selected option */
}

select.mf-input,
select.attr-form-control,
select {
    color: #000 !important; /* Black color for selected option */
}

/* Placeholder color for select (when no option is selected) */
select.mf-input option[value=""],
select.mf-input option:disabled,
select.attr-form-control option[value=""],
select.attr-form-control option:disabled {
    color: #999 !important; /* Gray color for placeholder */
}

/* All other options should be black */
select.mf-input option:not([value=""]):not(:disabled),
select.attr-form-control option:not([value=""]):not(:disabled),
select option {
    color: #000 !important;
}

/* When select has a value selected (not empty), text should be black */
select.mf-input:not(:invalid),
select.attr-form-control:not(:invalid) {
    color: #000 !important;
}

/* Metform specific selects */
.mf-input-wrapper select,
.metform-form-content select {
    color: #000 !important;
}

.mf-input-wrapper select option,
.metform-form-content select option {
    color: #000 !important;
}

/* Force black color on select when it has a valid value selected */
select.mf-input:valid {
    color: #000 !important;
}

/* ===========================
   TESTIMONIALS PAGE FIX
   Fix container cutoff and stars overlapping text
   =========================== */

/* Fix container overflow - prevent cutoff */
.jkit-testimonials.style-2 .tns-ovh,
.jkit-testimonials.style-2 .tns-outer,
.jkit-testimonials.style-2 .tns-inner,
.jkit-testimonials.style-2 .testimonials-list {
    overflow: visible !important;
}

/* Ensure testimonial box has enough height and respects border-radius on hover */
.jkit-testimonials.style-2 .testimonial-box {
    overflow: hidden !important; /* IMPORTANT: clips hover background to border-radius */
    height: auto !important;
    min-height: auto !important;
    padding: 30px !important;
    border-radius: 10px !important;
}

/* Fix content margin - remove the 30px top margin that causes overlap */
.jkit-testimonials.style-2 .testimonial-box .comment-content {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

.jkit-testimonials.style-2 .testimonial-box .comment-content p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #4A4A4A !important;
}

/* Fix stars - ensure they appear BELOW the text */
.jkit-testimonials.style-2 .testimonial-box .comment-header {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    z-index: 1 !important;
}

/* CRITICAL: Override the -180px negative margin from post-16.css */
.jkit-testimonials.style-2 .testimonial-box .comment-header .rating-stars,
.elementor-16 .rating-stars,
.testimonial-box .rating-stars,
.rating-stars {
    position: relative !important;
    display: flex !important;
    gap: 5px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important; /* Override -180px margin-top */
    justify-content: flex-start !important;
}

.jkit-testimonials.style-2 .testimonial-box .comment-header .rating-stars li {
    display: inline-flex !important;
    align-items: center !important;
}

.jkit-testimonials.style-2 .testimonial-box .comment-header .rating-stars li i {
    color: #f5a623 !important;
    font-size: 16px !important;
}

/* Profile section styling */
.jkit-testimonials.style-2 .testimonial-box .comment-bio {
    position: relative !important;
    z-index: 1 !important;
}

.jkit-testimonials.style-2 .testimonial-box .comment-bio .profile-name {
    color: #2C2C2C !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.jkit-testimonials.style-2 .testimonial-box .comment-bio .profile-des {
    color: #4E612C !important;
    font-size: 13px !important;
    transition: color 0.3s ease !important;
}

/* Hover state - change text to beige when green background is active */
.jkit-testimonials.style-2 .testimonial-box:hover .comment-content p {
    color: #E8E0BF !important;
}

.jkit-testimonials.style-2 .testimonial-box:hover .comment-bio .profile-name {
    color: #E8E0BF !important;
}

.jkit-testimonials.style-2 .testimonial-box:hover .comment-bio .profile-des {
    color: #E8E0BF !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .jkit-testimonials.style-2 .testimonial-box {
        padding: 20px !important;
    }

    .jkit-testimonials.style-2 .testimonial-box .comment-content {
        margin-bottom: 15px !important;
    }

    .jkit-testimonials.style-2 .testimonial-box .comment-header {
        margin-bottom: 15px !important;
    }
}

/* Fix blog title alignment and size - MAYOR ESPECIFICIDAD */
.elementor-widget-ha-post-title .ha-post-title.elementor-size-default,
.elementor-element-abcfaf1 h2.ha-post-title.elementor-size-default,
h2.ha-post-title.elementor-size-default {
    text-align: left !important;
    font-size: 36px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important; /* Ocupar todo el ancho disponible */
}

/* Forzar alineación y ancho del contenedor del título - ELIMINAR PADDING AMARILLO */
.elementor-element-abcfaf1 .elementor-widget-container,
.elementor-widget-ha-post-title .elementor-widget-container {
    text-align: left !important;
    display: block !important;
    width: 100% !important; /* Ocupar todo el ancho */
    max-width: 100% !important;
    padding: 0 !important; /* Eliminar padding que causa áreas amarillas */
    margin: 0 !important;
}

/* Forzar ancho completo del widget del título - ELIMINAR PADDING AMARILLO */
.elementor-element-abcfaf1.elementor-widget-ha-post-title,
.elementor-widget-ha-post-title {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; /* Eliminar padding lateral */
    margin: 0 !important;
}

/* Ajustar padding del contenedor rojo del título - ESTE controla el espacio interno */
.elementor-element.elementor-element-7077973.e-con-full,
.elementor-element-7077973 {
    padding: 40px 50px !important; /* Padding del contenedor rojo */
}

/* Asegurar que el elemento padre también usa todo el ancho */
.elementor-element-abcfaf1 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix Randy's message - aprovechar todo el ancho disponible CON padding interno */
.elementor-element-d7eacd2 .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 40px !important; /* Padding interno para que el texto respire */
    margin: 0 !important;
    box-sizing: border-box !important; /* Incluir padding en el ancho total */
}

.elementor-element-d7eacd2.elementor-widget-text-editor {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   BLOG CONTENT STYLES - Mejorar legibilidad
   ============================================ */

/* Estilos para H2 dentro del contenido del blog */
.ha-post-excerpt h2,
.elementor-widget-ha-post-excerpt h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid #4E612C !important; /* Línea verde BHI para destacar */
}

/* Primer H2 sin margin-top */
.ha-post-excerpt h2:first-of-type,
.elementor-widget-ha-post-excerpt h2:first-of-type {
    margin-top: 20px !important;
}

/* Estilos para H3 dentro del contenido del blog */
.ha-post-excerpt h3,
.elementor-widget-ha-post-excerpt h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #2c2c2c !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    padding-left: 15px !important;
    border-left: 4px solid #4E612C !important; /* Barra verde BHI a la izquierda */
}

/* Espaciado mejorado para párrafos */
.ha-post-excerpt p,
.elementor-widget-ha-post-excerpt p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4a4a4a !important;
    margin-bottom: 16px !important;
}

/* Párrafos con bullets - estilo especial */
.ha-post-excerpt p:has(> :first-child:is(•)),
.elementor-widget-ha-post-excerpt p:has(> :first-child:is(•)),
.ha-post-excerpt p[style*="•"],
.elementor-widget-ha-post-excerpt p[style*="•"] {
    padding-left: 25px !important;
    margin-bottom: 12px !important;
    position: relative !important;
}

/* Mejorar espaciado después de H2 */
.ha-post-excerpt h2 + p,
.elementor-widget-ha-post-excerpt h2 + p {
    margin-top: 20px !important;
}

/* Mejorar espaciado después de H3 */
.ha-post-excerpt h3 + p,
.elementor-widget-ha-post-excerpt h3 + p {
    margin-top: 15px !important;
}

/* ============================================
   HOMEPAGE BLOG CARDS - Force show images on mobile
   ============================================ */

@media (max-width: 767px) {
    /* Force blog cards to display as column */
    .elementor-11 .elementor-element.elementor-element-038079b .jkit-posts {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Force each card to display as column */
    .elementor-11 .elementor-element.elementor-element-038079b .jkit-post {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Force thumbnail to show */
    .elementor-11 .elementor-element.elementor-element-038079b .jkit-thumb {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .elementor-11 .elementor-element.elementor-element-038079b .jkit-thumb a {
        display: block !important;
        width: 100% !important;
    }

    .elementor-11 .elementor-element.elementor-element-038079b .jkit-thumb .thumbnail-container {
        display: block !important;
        width: 100% !important;
        min-height: 200px !important;
    }

    .elementor-11 .elementor-element.elementor-element-038079b .jkit-thumb img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        object-fit: cover !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Red content section */
    .elementor-11 .elementor-element.elementor-element-038079b .jkit-postblock-content {
        position: relative !important;
        width: 100% !important;
        min-height: 120px !important;
        overflow: visible !important;
    }

    /* Button positioning */
    .elementor-11 .elementor-element.elementor-element-038079b .jkit-post-meta-bottom {
        position: absolute !important;
        bottom: -3px !important;
        right: -5px !important;
        z-index: 100 !important;
    }
}

/* ============================================
   BLOGS PAGE - Fix responsive display and button position
   ============================================ */

/* MOBILE ONLY: Force show images and fix layout */
@media (max-width: 767px) {
    /* Force blog cards to display as column */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-posts {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Force each card to display as column */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-post {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Force thumbnail to show */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-thumb {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-thumb a {
        display: block !important;
        width: 100% !important;
    }

    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-thumb .thumbnail-container {
        display: block !important;
        width: 100% !important;
        min-height: 200px !important;
    }

    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-thumb img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        object-fit: cover !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Red content section */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-postblock-content {
        position: relative !important;
        width: 100% !important;
        min-height: 120px !important;
        overflow: visible !important;
    }

    /* Button positioning */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jkit-post-meta-bottom {
        position: absolute !important;
        bottom: -3px !important;
        right: -5px !important;
        z-index: 100 !important;
    }

    /* ============================================
       FOOTER - Fix responsive layout (2 columns)
       ============================================ */

    /* Footer main container - force flex wrap and use actual width values */
    footer .elementor-119 .elementor-element.elementor-element-1f39b3f .e-con-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    /* Logo section - full width at top */
    footer .elementor-119 .elementor-element.elementor-element-1155b95 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* About Us column - 50% width, force display */
    footer .elementor-119 .elementor-element.elementor-element-eee411c {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
    }

    /* Services column - 50% width, force display */
    footer .elementor-119 .elementor-element.elementor-element-9eac861 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
    }

    /* Newsletter - full width below */
    footer .elementor-119 .elementor-element.elementor-element-ec58974 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Contact info section (email, phone, location) - ensure it's fully visible */
    footer .elementor-119 .elementor-element.elementor-element-c2281da {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 60px !important;
    }

    footer .elementor-119 .elementor-element.elementor-element-c2281da .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        min-height: 400px !important;
        padding-bottom: 60px !important;
    }

    /* Individual contact items - force full display */
    footer .elementor-119 .elementor-element.elementor-element-dda0c8b,
    footer .elementor-119 .elementor-element.elementor-element-d73a317,
    footer .elementor-119 .elementor-element.elementor-element-30d7534 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-height: 100px !important;
        margin-bottom: 20px !important;
    }

    /* Ensure footer itself doesn't cut content */
    footer {
        overflow: visible !important;
        min-height: auto !important;
    }

    footer .elementor-119 {
        overflow: visible !important;
        min-height: auto !important;
    }

    /* Blog card content wrapper - must be relative for absolute positioning */
    .jkit-postblock-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* Meta bottom section (contains readmore button) */
    .jkit-post-meta-bottom {
        position: absolute !important;
        bottom: 8px !important;
        right: -5px !important;
        z-index: 100 !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        justify-content: flex-end !important;
    }

    /* Readmore button positioning */
    .jkit-meta-readmore {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
    }

    /* Button circle */
    .jkit-meta-readmore a.jkit-readmore {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background-color: #1e3a5f !important;
        color: white !important;
        transition: all 0.3s ease !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    .jkit-meta-readmore a.jkit-readmore:hover {
        background-color: #3a4821 !important; /* Verde oscuro BHI para hover */
        transform: scale(1.1) !important;
    }

    /* Icon inside button */
    .jkit-meta-readmore a.jkit-readmore i {
        font-size: 18px !important;
        color: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Additional mobile-specific adjustments */
@media (max-width: 767px) {
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jeg-elementor-kit.jkit-postblock .jkit-postblock-content {
        padding: 15px 15px 15px 15px !important; /* Equal padding all around */
        min-height: 150px !important; /* Enough height for content + button */
        overflow: visible !important; /* Allow button to extend beyond bounds */
    }

    .elementor-18 .elementor-element.elementor-element-5732cf3 .jeg-elementor-kit.jkit-postblock .jkit-post-title {
        margin: 5px 0px 0px 0px !important; /* Remove negative margins */
    }

    /* Position button so it overlaps the corner of red section */
    .elementor-18 .elementor-element.elementor-element-5732cf3 .jeg-elementor-kit.jkit-postblock .jkit-post-meta-bottom {
        bottom: 8px !important; /* Position inside red section with small margin */
        right: -5px !important; /* Extend slightly beyond right edge */
        z-index: 100 !important; /* Ensure button is above everything */
    }

    /* Ensure button is correct size */
    .jkit-meta-readmore {
        width: 50px !important;
        height: 50px !important;
    }

    .jkit-meta-readmore a.jkit-readmore {
        width: 50px !important;
        height: 50px !important;
        background-color: #1e3a5f !important; /* Dark blue button */
    }
}

.elementor-element-d7eacd2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Responsive: títulos más pequeños en móvil */
@media (max-width: 768px) {
    .elementor-widget-ha-post-title .ha-post-title.elementor-size-default,
    .elementor-element-abcfaf1 h2.ha-post-title.elementor-size-default,
    h2.ha-post-title.elementor-size-default {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }

    .elementor-element.elementor-element-7077973.e-con-full,
    .elementor-element-7077973 {
        padding: 30px 40px !important;
    }
}

/* Fix FAQs - aprovechar todo el ancho disponible */
/* Preguntas del accordion */
.e-n-accordion-item-title-text {
    width: 100% !important;
    max-width: none !important; /* Quitar cualquier límite de ancho */
    padding: 0 !important;
    padding-left: 45px !important; /* Espacio para el número "01. ", "02. ", etc. */
    text-indent: -45px !important; /* Hanging indent - primera línea vuelve atrás */
    margin: 0 !important;
}

/* Asegurar que el DIV interno también ocupe todo el ancho */
summary.e-n-accordion-item-title span.e-n-accordion-item-title-header div.e-n-accordion-item-title-text {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.e-n-accordion-item-title-text > div {
    width: 100% !important;
    max-width: none !important;
}

/* Selector súper específico con elemento span */
summary.e-n-accordion-item-title span.e-n-accordion-item-title-header {
    /* Usar flex-basis en lugar de width para ganarle al JavaScript */
    flex-grow: 999 !important; /* Muy alto para dominar el espacio */
    flex-shrink: 1 !important;
    flex-basis: 100% !important; /* Esto sobrescribe width en contextos flex */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 20px 30px !important;
    box-sizing: border-box !important;
    display: block !important;
}

.e-n-accordion-item-title-header {
    width: 100% !important;
    max-width: none !important; /* Quitar límite de ancho */
    padding: 20px 30px !important; /* Padding interno para que el texto de la pregunta respire */
    box-sizing: border-box !important;
    flex-grow: 1 !important; /* Crecer para ocupar todo el espacio disponible */
    display: block !important; /* SPAN necesita ser block para ocupar ancho completo */
}

/* Usar selectores de atributo para mayor especificidad */
summary.e-n-accordion-item-title[data-accordion-index] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    display: flex !important; /* Hacer flex para distribuir el espacio */
    justify-content: space-between !important; /* Separar texto y flecha */
    align-items: center !important; /* Alinear verticalmente */
}

.e-n-accordion-item-title {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    display: flex !important; /* Hacer flex para distribuir el espacio */
    justify-content: space-between !important; /* Separar texto y flecha */
    align-items: center !important; /* Alinear verticalmente */
}

/* Evitar que el ícono crezca */
.e-n-accordion-item-title-icon {
    flex-shrink: 0 !important; /* No reducir el tamaño del ícono */
    flex-grow: 0 !important; /* No crecer el ícono */
}

/* Selector súper específico para forzar el ancho completo */
.e-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-header {
    min-width: 0 !important; /* Permitir que el texto se expanda */
    flex: 1 1 auto !important; /* Flex basis auto para crecer */
}

.e-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
    min-width: 100% !important;
    width: 100% !important;
}

/* Forzar con selectores extremadamente específicos */
.e-n-accordion .e-n-accordion-item .e-n-accordion-item-title .e-n-accordion-item-title-header {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 0% !important;
}

.e-n-accordion .e-n-accordion-item .e-n-accordion-item-title .e-n-accordion-item-title-header .e-n-accordion-item-title-text,
.e-n-accordion .e-n-accordion-item .e-n-accordion-item-title .e-n-accordion-item-title-header .e-n-accordion-item-title-text div {
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
}

/* Respuestas del accordion */
.e-n-accordion-item .elementor-widget-text-editor .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 80px 20px 80px !important; /* Padding izquierdo 80px, derecho 50px */
    margin: 30px 0 0 0 !important; /* Espacio superior para separar de la pregunta */
    box-sizing: border-box !important;
}

.e-n-accordion-item .elementor-widget-text-editor .elementor-widget-container p {
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin: 0 !important; /* Eliminar margin del <p> */
}

.e-n-accordion-item .elementor-widget-text-editor {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10 !important;
    margin: 0 !important;
}

/* Contenedores internos del accordion */
.e-n-accordion-item .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   MOBILE MENU OVERLAY FIX
   ============================================ */

/* Overlay para el menú móvil */
.jkit-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Just below menu wrapper */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay when menu is active */
.jkit-menu-wrapper.active ~ .jkit-overlay {
    display: block;
    opacity: 1;
}

/* Ensure menu wrapper has higher z-index */
@media (max-width: 1024px) {
    .jkit-menu-wrapper {
        z-index: 999 !important;
    }
    
    /* Smooth transitions for menu */
    .jkit-menu-wrapper {
        transition: left 0.3s cubic-bezier(0.6, 0.1, 0.68, 0.53) !important;
    }
    
    /* Ensure menu is on top when active */
    .jkit-menu-wrapper.active {
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Fix for body scroll when menu is open */
body.menu-open {
    overflow: hidden !important;
}

/* ============================================
   FORCE RESPONSIVE BEHAVIOR FIX
   ============================================ */

/* Force mobile viewport behavior - override any min-width constraints */
@media (max-width: 767px) {
    body, html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Reset any fixed or min-width containers */
    .elementor, .elementor-section, .e-con, .elementor-container {
        max-width: 100% !important;
        min-width: auto !important;
        width: 100% !important;
    }

    /* Ensure proper box sizing */
    * {
        box-sizing: border-box !important;
    }
}

/* Force tablet viewport behavior */
@media (min-width: 768px) and (max-width: 1024px) {
    body, html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .elementor, .elementor-section, .e-con, .elementor-container {
        max-width: 100% !important;
        min-width: auto !important;
    }

    /* Override elementor-kit-6 fixed widths */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }

    .e-con {
        --container-max-width: 100% !important;
    }
}

/* CRITICAL FIX: Override Elementor's bad max-width values for mobile */
@media (max-width: 767px) {
    /* Force containers to use full viewport width, not fixed 767px */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }

    .e-con {
        --container-max-width: 100% !important;
        max-width: 100% !important;
    }

    /* Force all elementor containers to respect viewport */
    .elementor-container,
    .e-con-inner {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - Scale down on mobile
   ============================================ */
@media (max-width: 767px) {
    :root {
        --e-global-typography-563cf5e-font-size: 28px;
        --e-global-typography-913eed8-font-size: 18px;
        --e-global-typography-text-font-size: 15px;
    }
}

@media (max-width: 480px) {
    :root {
        --e-global-typography-563cf5e-font-size: 24px;
        --e-global-typography-913eed8-font-size: 16px;
        --e-global-typography-text-font-size: 14px;
    }

    /* Logo size on very small screens */
    .elementor-44 .elementor-element.elementor-element-49e9add .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-nav-site-title .jkit-nav-logo img {
        max-width: 180px !important;
    }
}

/* ============================================
   FOOTER RESPONSIVE FIXES
   ============================================ */

/* Newsletter form - stack on mobile */
@media (max-width: 767px) {
    .elementor-119 .elementor-element.elementor-element-a09da4e {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .elementor-119 .elementor-element.elementor-element-005ff34,
    .elementor-119 .elementor-element.elementor-element-d095a0e {
        width: 100% !important;
    }

    .elementor-119 .elementor-element.elementor-element-e51ba49 .mf-input {
        width: 100% !important;
    }
}

/* Footer columns - stack to full width on mobile */
@media (max-width: 767px) {
    .elementor-119 .elementor-element.elementor-element-1155b95,
    .elementor-119 .elementor-element.elementor-element-eee411c,
    .elementor-119 .elementor-element.elementor-element-9eac861,
    .elementor-119 .elementor-element.elementor-element-ec58974 {
        --width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* Social icons larger for touch */
    .elementor-element-9ec5a65 {
        --icon-size: 22px !important;
    }
}

/* ============================================
   HOMEPAGE RESPONSIVE FIXES
   ============================================ */

/* Hero section padding on mobile */
@media (max-width: 767px) {
    .elementor-11 .elementor-element.elementor-element-13b20cc {
        --padding-top: 300px !important;
        --padding-bottom: 25px !important;
        --padding-left: 15px !important;
        --padding-right: 15px !important;
    }
}

/* Service cards - force stack on small mobile */
@media (max-width: 480px) {
    .elementor-11 .elementor-element .e-con {
        width: 100% !important;
        --width: 100% !important;
    }
}

/* Tab navigation - wrap on mobile */
@media (max-width: 767px) {
    .elementor-11 .elementor-element.elementor-element-b2916ec .jeg-elementor-kit.jkit-tabs .tab-nav-list {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .elementor-11 .elementor-element.elementor-element-b2916ec .jeg-elementor-kit.jkit-tabs .tab-nav-list .tab-nav {
        margin: 5px !important;
        padding: 10px 15px !important;
    }
}

/* ============================================
   CONTACT PAGE RESPONSIVE FIXES
   ============================================ */

/* Form fields full width on mobile */
@media (max-width: 767px) {
    .mf-input-wrapper input,
    .mf-input-wrapper textarea,
    .mf-input-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   TOUCH TARGET SIZES - Minimum 44x44px
   ============================================ */

@media (max-width: 767px) {
    /* Ensure all interactive elements meet touch target minimum */
    a, button, input[type="submit"], input[type="button"],
    .elementor-button, .jkit-button-wrapper {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Exception for text links in paragraphs */
    p a, .elementor-widget-text-editor a {
        min-height: auto !important;
        min-width: auto !important;
    }
}

/* ============================================
   BLOG CARDS - Title truncation
   ============================================ */

@media (max-width: 767px) {
    .jkit-post-title a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Blog detail - even smaller title on tiny screens */
@media (max-width: 375px) {
    .ha-post-title.elementor-size-default {
        font-size: 26px !important;
    }
}

/* ============================================
   FAQ PAGE - Answer padding fix
   ============================================ */

@media (max-width: 767px) {
    .e-n-accordion-item .elementor-widget-text-editor .elementor-widget-container {
        padding: 20px 30px 20px 50px !important;
    }
}

/* ============================================
   SERVICES PAGE RESPONSIVE FIXES
   ============================================ */

/* Services page - Force proper responsive behavior */
@media (max-width: 767px) {
    /* CRITICAL FIX: Override Elementor's hardcoded max-width: 1140px */
    /* This is THE KEY FIX - Elementor's frontend.min.css sets .elementor-section-boxed > .elementor-container { max-width: 1140px } */
    /* which causes the page to appear as a centered miniature on mobile */

    /* Ultra-specific selector to override Elementor's boxed container max-width */
    body .elementor.elementor-14 .elementor-section.elementor-section-boxed > .elementor-container,
    body .elementor-14.elementor .elementor-section.elementor-section-boxed > .elementor-container,
    body .elementor-14 .e-con-boxed > .e-con-inner,
    body .elementor-14 .e-con.e-con-boxed > .e-con-inner {
        max-width: none !important;
        width: 100% !important;
    }

    /* Force body, html and main container to full viewport width */
    body.page-id-14,
    html {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Force main Elementor wrapper to full width */
    .elementor.elementor-14 {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* CRITICAL: Force ALL Elementor boxed containers to full width on mobile */
    .elementor-14 .e-con-boxed,
    .elementor-14 .e-con-boxed > .e-con-inner,
    .elementor-14 .elementor-section.elementor-section-boxed > .elementor-container,
    .elementor-14 .elementor-section,
    .elementor-14 .e-con,
    .elementor-14 .e-con-full,
    .elementor-14 .elementor-container {
        max-width: 100% !important;
        width: 100% !important;
        min-width: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Override Elementor's default boxed container max-width variables */
    .elementor-14 .e-con-boxed > .e-con-inner,
    .elementor-14 .e-con.e-parent {
        --container-max-width: 100% !important;
        --container-widget-width: 100% !important;
    }

    /* Services page tabs - wrap on mobile */
    .elementor-14 .elementor-element.elementor-element-2d75366 .jeg-elementor-kit.jkit-tabs .tab-nav-list {
        flex-wrap: wrap !important;
        justify-content: center !important;
        max-width: 100% !important;
    }

    .elementor-14 .elementor-element.elementor-element-2d75366 .jeg-elementor-kit.jkit-tabs .tab-nav-list .tab-nav {
        flex: 1 1 100% !important;
        margin: 0 0 12px 0 !important;
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Services stats section - stack vertically */
    .elementor-14 .elementor-element.elementor-element-2b92dda {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .elementor-14 .elementor-element.elementor-element-7bf237a,
    .elementor-14 .elementor-element.elementor-element-ebe21cf,
    .elementor-14 .elementor-element.elementor-element-85c863a {
        width: 100% !important;
        --width: 100% !important;
        border-width: 0px !important;
        border-bottom: 1px solid var(--e-global-color-bd59079) !important;
        padding: 25px 0px !important;
    }

    /* Last stat item - no bottom border */
    .elementor-14 .elementor-element.elementor-element-85c863a {
        border-bottom: 0px !important;
    }
}

/* Tablet-specific fixes for services page */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-14 .elementor-element.elementor-element-2d75366 .jeg-elementor-kit.jkit-tabs .tab-nav-list .tab-nav {
        margin: 0 6px 6px 6px !important;
        flex: 1 1 calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
    }
}

/* ============================================
   HOMEPAGE - Fix signature "M" size and layout on mobile
   ============================================ */

@media (max-width: 767px) {
    /* Keep horizontal layout for Max Benjamin + signature */
    .elementor-11 .elementor-element.elementor-element-6adf628 {
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Don't wrap - keep in same row */
        align-items: flex-start !important;
        gap: 0px !important;
    }

    /* Max Benjamin info container - reduce width to fit signature */
    .elementor-11 .elementor-element.elementor-element-9a9171c {
        flex: 0 0 auto !important;
        max-width: 65% !important; /* Enough width for name on one line + space for signature */
        min-width: 0 !important;
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        padding-right: 5px !important; /* Small padding between name and signature */
    }

    /* Signature container - fixed size */
    .elementor-11 .elementor-element.elementor-element-0bd3bb6 {
        flex: 0 0 70px !important;
        width: 70px !important;
        margin-left: 10px !important;
    }

    /* Logo image size on mobile - 60x60 */
    .elementor-11 .elementor-element.elementor-element-1b1a561 img {
        max-width: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* Padding top for Trusted Home Inspection Experts section */
.elementor-element-28af35e {
    padding-top: 50px !important;
}

/* ===========================
   BUTTON STATE FIXES
   Fix colors on Get Started button hover, active, and focus states
   Override Bootstrap and Elementor default colors
   =========================== */

/* Hover state - keep text white */
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover,
.header-cta .btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--brand-green-dark, #3a4821) !important;
    border-color: var(--brand-green-dark, #3a4821) !important;
    color: #ffffff !important;
}

/* Active state - fix red flash */
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.header-cta .btn-primary:active,
a.btn-primary:active {
    background-color: var(--brand-green-dark, #3a4821) !important;
    border-color: var(--brand-green-dark, #3a4821) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Focus state - keep consistent */
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):focus,
.header-cta .btn-primary:focus,
a.btn-primary:focus {
    background-color: var(--brand-green, #4E612C) !important;
    border-color: var(--brand-green-dark, #3a4821) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 97, 44, 0.25) !important;
}

/* ============================================
   ABOUT PAGE - Remove padding before footer
   ============================================ */

/* Remove bottom margin from "Reason People Choose" section (last section before footer) */
.elementor-element.elementor-element-5ed47dc {
    --margin-bottom: 0px !important;
    margin-bottom: 0px !important;
}

/* Add moderate bottom padding to FAQs section in About */
.elementor-element.elementor-element-1e2d4ee,
.elementor-element.elementor-element-1e2d4ee.e-con {
    --padding-bottom: 50px !important;
    padding-bottom: 50px !important;
}

/* Also target with higher specificity for About page */
.e-con.e-parent.elementor-element-1e2d4ee {
    padding-bottom: 50px !important;
}

/* Remove padding before footer (white space fix) */
.site-footer {
    padding-block-start: 0 !important;
}

/* ============================================
   ABOUT PAGE - Fix signature "M" size and layout on mobile
   ============================================ */

@media (max-width: 767px) {
    /* Keep horizontal layout for Randy info + signature */
    .elementor-13 .elementor-element.elementor-element-ef14c44 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Randy info container (photo + name) - control width */
    .elementor-13 .elementor-element.elementor-element-7175fad {
        flex: 0 0 auto !important;
        max-width: 70% !important;
        min-width: 0 !important;
    }

    /* Signature container - fixed size */
    .elementor-13 .elementor-element.elementor-element-6834702 {
        flex: 0 0 60px !important;
        width: 60px !important;
        max-width: 60px !important;
    }

    /* Limit signature image size on mobile */
    .elementor-13 .elementor-element.elementor-element-78d3437 img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }
}

/* ===========================
   CONTACT PAGE STYLES
   =========================== */

/* Icon boxes - Address, Phone, Email */
.elementor-25 .jkit-icon-box .icon-box > .icon {
    background-color: #f5f1e5 !important;
    border-color: #4E612C !important;
    color: #4E612C !important;
}

.elementor-25 .jkit-icon-box .icon-box > .icon i {
    color: #4E612C !important;
}

.elementor-25 .jkit-icon-box:hover .icon-box > .icon {
    background-color: #4E612C !important;
    border-color: #4E612C !important;
    color: #f5f1e5 !important;
}

.elementor-25 .jkit-icon-box:hover .icon-box > .icon i {
    color: #f5f1e5 !important;
}

/* Icon box titles */
.elementor-25 .jkit-icon-box .title {
    color: #4E612C !important;
    font-weight: 600 !important;
}

/* Icon box description */
.elementor-25 .jkit-icon-box .icon-box-description {
    color: #4A4A4A !important;
}

/* Contact Form - "Get in touch" section */
.elementor-25 .elementor-1399 .elementor-heading-title {
    color: #4E612C !important;
}

/* Form inputs */
.elementor-25 .mf-input,
.elementor-25 .mf-textarea {
    border: 1px solid #d4ccaa !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    background-color: #faf8f0 !important;
    color: #2C2C2C !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor-25 .mf-input:focus,
.elementor-25 .mf-textarea:focus {
    border-color: #4E612C !important;
    box-shadow: 0 0 0 3px rgba(78, 97, 44, 0.1) !important;
    outline: none !important;
}

.elementor-25 .mf-input::placeholder,
.elementor-25 .mf-textarea::placeholder {
    color: #8F8F8F !important;
}

/* Submit button */
.elementor-25 .metform-btn,
.elementor-25 .metform-submit-btn {
    background-color: #4E612C !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 30px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.elementor-25 .metform-btn:hover,
.elementor-25 .metform-submit-btn:hover {
    background-color: #3a4821 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(78, 97, 44, 0.3) !important;
}

/* Google Maps container */
.elementor-25 .elementor-custom-embed {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Contact Information section title */
.elementor-25 .elementor-element-200494d .elementor-heading-title {
    color: #4E612C !important;
}

/* Contact page responsive */
@media (max-width: 767px) {
    .elementor-25 .jkit-icon-box .icon-box > .icon {
        width: 50px !important;
        height: 50px !important;
        line-height: 60px !important;
    }

    .elementor-25 .jkit-icon-box .icon-box > .icon i {
        font-size: 22px !important;
    }

    .elementor-25 .mf-input,
    .elementor-25 .mf-textarea {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    .elementor-25 .metform-btn,
    .elementor-25 .metform-submit-btn {
        padding: 12px 24px !important;
        font-size: 13px !important;
    }
}

/* ===========================
   RANDY GRAJEDA PROFILE IMAGE - Fix size and shape
   =========================== */

/* Profile image - circular 60x60 */
.elementor-element-323d056 img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Logo/signature image - 60x60 */
.elementor-element-1b1a561 img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
}

/* Logo container - add left spacing from pipeline */
.elementor-element-1b1a561 {
    padding-left: 15px !important;
    margin-left: 10px !important;
}

/* Override Elementor's widget-container margin/padding for logo */
.elementor-11 .elementor-element.elementor-element-1b1a561 > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive - override Elementor's mobile margin/padding for logo */
@media (max-width: 767px) {
    .elementor-11 .elementor-element.elementor-element-1b1a561 > .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* Randy name - add spacing from photo */
.elementor-element-4219979 {
    margin-left: 10px !important;
}

/* Randy Grajeda name - Bold */
.elementor-element-4219979 .heading-title {
    font-weight: 700 !important;
    font-family: 'Gotham', 'Poppins', sans-serif !important;
}

/* CEO & Founder subtitle - Regular */
.elementor-element-4219979 .heading-section-subtitle {
    font-weight: 500 !important;
    font-family: 'Gotham', 'Poppins', sans-serif !important;
}

/* ============================================
   ABOUT PAGE - Randy Grajeda Section (Clean HTML)
   ============================================ */

.randy-profile-section {
    display: flex;
    align-items: flex-start; /* Align all items at the TOP */
    gap: 15px;
    margin: 20px 0;
}

.randy-photo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

.randy-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60px; /* Match photo height for vertical centering of text */
}

.randy-name {
    font-family: 'Gotham', 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.randy-title {
    font-family: 'Gotham', 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #4E612C !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
}

.randy-divider {
    width: 1px;
    height: 60px; /* Match photo height */
    background-color: #d4d4d4;
    flex-shrink: 0;
    margin: 0 10px;
}

.randy-logo {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    flex-shrink: 0;
    align-self: flex-start; /* Align logo at the TOP */
}

/* Mobile responsive */
@media (max-width: 480px) {
    .randy-profile-section {
        gap: 10px;
    }

    .randy-photo {
        width: 50px;
        height: 50px;
    }

    .randy-info {
        min-height: 50px;
    }

    .randy-divider {
        height: 50px;
        margin: 0 5px;
    }

    .randy-logo {
        width: 50px;
        height: 50px;
    }

    .randy-name {
        font-size: 16px;
    }

    .randy-title {
        font-size: 12px;
    }
}

/* ============================================
   HOMEPAGE TESTIMONIALS - Fix stars overlapping with profile
   ============================================ */

/* Stars container - add margin bottom to separate from profile */
.elementor-11 .jkit-testimonials.style-2 .testimonial-box .comment-header {
    margin-bottom: 35px !important;
}

/* Rating stars - ensure proper spacing */
.elementor-11 .jkit-testimonials.style-2 .testimonial-box .comment-header .rating-stars {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
}

/* Profile bio section - add top margin for spacing */
.elementor-11 .jkit-testimonials.style-2 .testimonial-box .comment-bio {
    margin-top: 20px !important;
}

/* ============================================
   FAQ PAGE - Clean Accordion Component
   Replaces complex Elementor accordion
   ============================================ */

.bhi-faq-section {
    width: 100%;
    padding: 0;
}

/* Individual FAQ item */
.bhi-faq-item {
    margin-bottom: 15px;
    border: 1px solid #1A1A1A;
    border-radius: 40px;
    overflow: hidden;
    background: #fff;
}

/* Question/Summary styling */
.bhi-faq-question {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 30px;
    cursor: pointer;
    list-style: none;
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #1A1A1A;
    background: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove default marker */
.bhi-faq-question::-webkit-details-marker {
    display: none;
}

.bhi-faq-question::marker {
    display: none;
    content: '';
}

/* Question text */
.bhi-faq-text {
    text-align: left;
    font-weight: 700 !important;
    font-family: 'Gotham', 'Poppins', sans-serif !important;
}

/* Icon styling */
.bhi-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.bhi-faq-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Open state - green background */
.bhi-faq-item[open] .bhi-faq-question {
    background-color: #4E612C;
    color: #E8E0BF;
    border-radius: 40px 40px 0 0;
}

.bhi-faq-item[open] .bhi-faq-icon {
    transform: rotate(180deg);
}

/* Hover state (when closed) */
.bhi-faq-item:not([open]) .bhi-faq-question:hover {
    background-color: #4E612C;
    color: #E8E0BF;
}

/* Answer area */
.bhi-faq-answer {
    padding: 25px 30px 30px 30px;
    border-top: 1px solid #4E612C;
    background: #fff;
    border-radius: 0 0 40px 40px;
}

.bhi-faq-answer p {
    margin: 0;
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #1A1A1A;
}

/* Category header for multiple categories */
.bhi-faq-category {
    margin-top: 50px;
    margin-bottom: 25px;
    padding: 20px 30px;
    background-color: #4E612C;
    border-radius: 10px;
}

.bhi-faq-category:first-child {
    margin-top: 0;
}

.bhi-faq-category h3 {
    margin: 0;
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #E8E0BF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .bhi-faq-section {
        padding: 0;
    }

    .bhi-faq-question {
        padding: 15px 20px;
        font-size: 16px;
        gap: 15px;
    }

    .bhi-faq-answer {
        padding: 20px;
    }

    .bhi-faq-answer p {
        font-size: 15px;
    }

    .bhi-faq-item {
        border-radius: 25px;
    }

    .bhi-faq-item[open] .bhi-faq-question {
        border-radius: 25px 25px 0 0;
    }

    .bhi-faq-answer {
        border-radius: 0 0 25px 25px;
    }

    .bhi-faq-category {
        padding: 15px 20px;
    }

    .bhi-faq-category h3 {
        font-size: 16px;
    }
}

/* ============================================
   CLIENT ONBOARDING FORM
   ============================================ */

.bhi-onboarding-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.bhi-onboarding-form {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Form Sections */
.bhi-form-section {
    padding: 30px 40px;
    border-bottom: 1px solid #eee;
}

.bhi-form-section:last-of-type {
    border-bottom: none;
}

.bhi-form-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #4E612C;
    margin: 0 0 25px 0;
}

.bhi-form-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #4E612C;
    border-radius: 10px;
    color: #E8E0BF;
}

.bhi-form-section-icon svg,
.bhi-form-section-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

.bhi-optional {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

/* Form Rows */
.bhi-form-row {
    margin-bottom: 20px;
}

.bhi-form-row:last-child {
    margin-bottom: 0;
}

.bhi-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bhi-form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Form Groups */
.bhi-form-group {
    display: flex;
    flex-direction: column;
}

.bhi-form-group label {
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.bhi-form-group label .required {
    color: #c0392b;
}

.bhi-form-group input,
.bhi-form-group select,
.bhi-form-group textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #333;
    transition: all 0.3s ease;
}

.bhi-form-group input:focus,
.bhi-form-group select:focus,
.bhi-form-group textarea:focus {
    outline: none;
    border-color: #4E612C;
    box-shadow: 0 0 0 4px rgba(78, 97, 44, 0.1);
}

.bhi-form-group input::placeholder,
.bhi-form-group textarea::placeholder {
    color: #aaa;
}

.bhi-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 45px;
}

.bhi-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Submit Section */
.bhi-form-submit {
    padding: 30px 40px 40px;
    background: #f8f8f8;
    text-align: center;
}

.bhi-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Gotham', 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #E8E0BF;
    background: #4E612C;
    padding: 18px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bhi-submit-btn:hover {
    background: #3d4d22;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(78, 97, 44, 0.3);
}

.bhi-submit-btn svg,
.bhi-submit-btn i {
    width: 20px;
    height: 20px;
    font-size: 18px;
}

.bhi-form-disclaimer {
    font-size: 13px;
    color: #888;
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .bhi-onboarding-container {
        padding: 0 15px;
    }

    .bhi-form-section {
        padding: 25px 20px;
    }

    .bhi-form-section-title {
        font-size: 18px;
    }

    .bhi-form-row-2,
    .bhi-form-row-3 {
        grid-template-columns: 1fr;
    }

    .bhi-form-submit {
        padding: 25px 20px 30px;
    }

    .bhi-submit-btn {
        width: 100%;
        padding: 16px 30px;
    }
}

/* ============================================
   Client Onboarding - Page Hero (Box Style like Contact Us)
   ============================================ */

.bhi-page-hero-wrapper {
    margin-top: 80px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.bhi-page-hero {
    background-color: #4E612C;
    padding: 100px 0;
    text-align: center;
    border-radius: 40px;
    max-width: 1140px;
    width: 100%;
}

.bhi-page-hero-title {
    color: #F5F1E5 !important;
    font-size: 50px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    line-height: 60px;
    font-family: "Gotham", Arial, sans-serif;
}

/* Description Section Below Hero */
.bhi-page-description {
    padding: 50px 20px;
    max-width: 1140px;
    margin: 0 auto;
}

.bhi-page-description-title {
    color: #4E612C !important;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    font-family: "Gotham Bold", "Gotham", Arial, sans-serif;
}

.bhi-page-description-text {
    color: #666 !important;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   Client Onboarding - Form Wrapper
   ============================================ */

.bhi-form-wrapper {
    background-color: #f8f8f8;
    padding: 60px 20px 80px;
}

/* Responsive for Page Hero - Tablet */
@media screen and (max-width: 1024px) {
    .bhi-page-hero {
        padding: 80px 0;
    }
}

/* Responsive for Page Hero - Mobile */
@media screen and (max-width: 768px) {
    .bhi-page-hero-wrapper {
        margin-top: 60px;
        padding: 0 15px;
    }

    .bhi-page-hero {
        padding: 70px 20px;
        border-radius: 30px;
    }

    .bhi-page-hero-title {
        font-size: 32px;
        line-height: 40px;
    }

    .bhi-page-description {
        padding: 30px 15px;
    }

    .bhi-page-description-title {
        font-size: 26px;
    }

    .bhi-page-description-text {
        font-size: 15px;
    }

    .bhi-form-wrapper {
        padding: 40px 15px 60px;
    }
}

/* ============================================
   Testimonial Avatar Initials (Google-style)
   ============================================ */

.testimonial-avatar-initial {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Roboto', 'Arial', sans-serif;
}

/* Color variations for different initials */
.testimonial-avatar-initial.bg-green { background-color: #4E612C; }
.testimonial-avatar-initial.bg-blue { background-color: #1a73e8; }
.testimonial-avatar-initial.bg-red { background-color: #ea4335; }
.testimonial-avatar-initial.bg-orange { background-color: #fa7b17; }
.testimonial-avatar-initial.bg-purple { background-color: #a142f4; }
.testimonial-avatar-initial.bg-teal { background-color: #12b5cb; }
.testimonial-avatar-initial.bg-pink { background-color: #f538a0; }
.testimonial-avatar-initial.bg-brown { background-color: #795548; }

/* Override the profile-image to work with divs */
.comment-bio .profile-image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-right: 15px;
}

.comment-bio .profile-image .testimonial-avatar-initial {
    width: 100%;
    height: 100%;
}

/* Fix vertical alignment of avatar and name */
.comment-bio .bio-details,
.jkit-testimonials .comment-bio .bio-details,
.jkit-testimonials.style-2 .testimonial-box .comment-bio .bio-details,
.jeg-elementor-kit.jkit-testimonials .testimonials-track .testimonial-item .testimonial-box .comment-bio .bio-details {
    display: flex !important;
    align-items: center !important;
}

.comment-bio .profile-info,
.jkit-testimonials .comment-bio .profile-info,
.jkit-testimonials.style-2 .testimonial-box .comment-bio .profile-info,
.jeg-elementor-kit.jkit-testimonials .testimonials-track .testimonial-item .testimonial-box .comment-bio .profile-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Remove margins from profile name and description for proper vertical alignment */
.comment-bio .profile-info .profile-name,
.comment-bio .profile-info .profile-des,
.jkit-testimonials .profile-info .profile-name,
.jkit-testimonials .profile-info .profile-des {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ============================================
   Form Success/Error Messages
   ============================================ */
.bhi-form-message {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    margin-top: 20px;
}

.bhi-form-message i {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

.bhi-form-message h3 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}

.bhi-form-message p {
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
}

.bhi-form-success {
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
}

.bhi-form-success i {
    color: #4caf50;
}

.bhi-form-success h3 {
    color: #2e7d32;
}

.bhi-form-error {
    background-color: #ffebee;
    border: 1px solid #f44336;
}

.bhi-form-error i {
    color: #f44336;
}

.bhi-form-error h3 {
    color: #c62828;
}

.bhi-form-error a {
    color: #c62828;
    font-weight: 600;
}

/* ===========================
   FOOTER LINKS
   =========================== */

/* Privacy Policy link in footer */
.elementor-icon-list-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.elementor-icon-list-item a:hover {
    color: var(--brand-green, #4E612C);
}

.elementor-icon-list-item a .elementor-icon-list-text {
    color: inherit;
}