/* =============================================
   SEWA FORMS PORTAL — Header Full-Width Fix
   ============================================= */
.zpdark-header-portion.theme-header,
.zpdark-header-portion .theme-navigation-and-icons,
.theme-responsive-dark.zpdark-header-portion,
.zpdark-header-portion,
.zpdark-header-portion .zpcontainer,
.zpdark-header-portion .theme-menu-area,
.theme-header-navigation-style {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.zpdark-header-portion.theme-header {
    background: radial-gradient(
        ellipse at 30% 50%,
        #393668,
        #393668 40%,
        #2a2550 70%,
        #121230
    ) !important;
    width: 100% !important;
}

/* =============================================
   SEWA FORMS PORTAL — Hero Banner Gradient
   ============================================= */
.sewa-hero-gradient,
.sewa-hero-gradient > div,
.sewa-hero-gradient .zs-slide,
.sewa-hero-gradient .zs-slide-bg {
    background: radial-gradient(
        ellipse at 70% 40%,
        #393668,
        #393668 35%,
        #2a2550 65%,
        #121230
    ) !important;
}

/* =============================================
   SEWA FORMS PORTAL — Footer Gradient
   ============================================= */
.theme-footer-area,
.theme-footer-area .zpcontent-container.footer-container,
.theme-footer-area .zpsection.zpdefault-section-bg,
.theme-footer-area .zpdefault-section-bg {
    background: transparent !important;
}

.theme-footer-area.zpdark-section.zpdark-section-bg {
    background: radial-gradient(
        ellipse at 50% 60%,
        #393668,
        #393668 35%,
        #2a2550 65%,
        #121230
    ) !important;
}



/* =============================================
   SEWA FORMS PORTAL — Card Hover Effects
   Lift + subtle zoom on hover for form cards.
   ============================================= */

/* --- Base card transition --- */
.zpbox-container.zplight-section-bg {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border-radius: 12px !important;
    cursor: pointer !important;
}

/* --- Card hover: lift + shadow --- */
.zpbox-container.zplight-section-bg:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 32px rgba(57, 54, 104, 0.18) !important;
}

/* --- Button hover: subtle pop --- */
.zpbutton-container .zpelem-button:hover {
    opacity: 0.85 !important;
    transform: scale(1.05) !important;
    transition: all 0.2s ease !important;
}



/* =============================================
   SEWA FORMS PORTAL — Button Styling + Hover
   Rounded corners and pop effect on hover.
   ============================================= */

/* --- Base button: rounded edges --- */
.zpbutton.zpbutton-type-primary,
button.zpbutton-type-primary,
input[type=submit].zpbutton-type-primary,
input[type=button].zpbutton-type-primary {
    border-radius: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* --- Button hover: pop + glow --- */
.zpbutton.zpbutton-type-primary:hover,
button.zpbutton-type-primary:hover,
input[type=submit].zpbutton-type-primary:hover,
input[type=button].zpbutton-type-primary:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(57, 54, 104, 0.3) !important;
    background: #FD5808 !important;
}

/* --- Button active: press down --- */
.zpbutton.zpbutton-type-primary:active,
button.zpbutton-type-primary:active {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 3px 10px rgba(57, 54, 104, 0.2) !important;
}


/* =============================================
   SEWA FORMS PORTAL — Text Wrap Fix (All Elements)
   Prevents words from breaking mid-character on
   narrow viewports. Applies to headings, paragraphs,
   and all text elements site-wide. Includes mobile
   heading sizing for better readability.
   ============================================= */

/* --- Universal text wrap rules --- */
.zpheading,
.zpheading-text,
.zpelem-heading,
.zpelem-iconheadingtext,
.zpelement,
.zpelem-text,
.zpelem-paragraph,
.zptext,
.zptext p,
.zpelement p,
.zpelement span,
.zpparagraph,
h1, h2, h3, h4, h5, h6,
p, span, div {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
}

/* --- Mobile-specific heading sizing --- */
@media (max-width: 768px) {
    .zpheading,
    .zpelem-heading h1,
    .zpelem-heading h2,
    .zpelem-iconheadingtext h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
}