/* =========================================================
   Payloan theme — project-level overrides
   Fixes driven by review screenshots (2026-04-21..22)
   ========================================================= */

/* ---------- [1] Preloader off ---------- */
.preloader { display: none !important; }

/* ---------- [2] Header: shorter, cleaner ---------- */
.header_1 {
    top: 0;
    padding: 10px 0;
    background: #fff;
    position: relative; /* was absolute in template; keep content below it */
}
/* Row vertical centering at all breakpoints — logo / menu / Apply Now aligned */
.header_1 > .container > .row { align-items: center; }

.header_1 .logo { text-align: left; }
.header_1 .logo img { max-height: 44px; width: auto; }
.header_1 .logo .brand-text {
    display: inline-block;
    font-size: 28px;
    line-height: 44px;
    font-weight: 700;
    color: #7367f0;
    letter-spacing: -0.5px;
    font-family: 'Open Sans', sans-serif;
}
/* Apply Now: smaller so it sits next to menu links without towering over them */
.header_1 .navigator_btn a,
.header_1 .navigator_btn .common_btn {
    width: auto !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    display: inline-block;
    vertical-align: middle;
}
/* Menu items: match the 40px button height with symmetric vertical padding */
.header_1 .mainmenu ul li { padding: 6px 16px; }

/* ---------- [3] Hero: less top padding, size down illustrations ---------- */
.payloan_header_bg {
    position: relative;
    padding: 60px 0 80px;
    top: 0;
    overflow: hidden;
}
.payloan_header_bg::before {
    /* keep decorative background but shrink it */
    top: -40%;
}
.payloan_header_bg .welcome_text h1 {
    font-size: 52px;
    line-height: 1.15;
}
.payloan_header_bg .welcome_text p {
    font-size: 16px;
    max-width: 450px;
}
.payloan_header_bg .header_img { text-align: center; }
.payloan_header_bg .header_img img {
    max-width: 100%;
    height: auto;
}

/* ---------- [4] Loan cards: smaller icons, tighter layout ---------- */
.singleService_2 i,
.singleService_2 [class^="flaticon-"],
.singleService_2 [class*=" flaticon-"] {
    font-size: 42px !important;
    line-height: 1 !important;
}
.singleService_2 h1 { font-size: 34px; margin: 6px 0 4px; }
.singleService_2 h4 { font-size: 18px; }
.singleService_2 p { font-size: 13px; }
.singleService_2 h5 { font-size: 13px; }

/* ---------- [5] Team cards: real photos (template images used via seeder) ---------- */
.singleTeam img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: block;
}

/* ---------- [6] Testimonials: smaller avatars, breathe ---------- */
.singleCustomer { padding: 24px 28px; }
.singleCustomer img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}
.singleCustomer p { font-size: 14px; line-height: 1.6; }

/* ---------- [7] "Warm Content of Todays" — extra top breathing room ---------- */
.postTodaySec { padding-top: 140px; }

/* ---------- [7b] custome_sec_2 (testimonials on home) — balance right column ---------- */
.custome_sec_2 .customer_thumb {
    text-align: center;
    padding-top: 30px;
}
.custome_sec_2 .customer_thumb img {
    max-width: 80%;
    height: auto;
}
@media (max-width: 767.98px) {
    .custome_sec_2 .customer_thumb { display: none; }
}

/* ---------- [8] Footer contacts compact ---------- */
.footer { padding: 50px 0 30px; }
.footer .about_widgets img,
.footer .about_widgets .brand-text { margin-bottom: 14px; }
.footer .about_widgets p { margin-bottom: 6px; line-height: 1.5; font-size: 14px; }
.footer .about_widgets a { color: #7367f0; }
.footer .widget h3 { font-size: 18px; margin-bottom: 16px; }

/* ---------- [9] Single-blog / post: typography & layout ---------- */
.single-post, .single_blog_post, .blog-details {
    color: #222;
}
.single-post h1, .single-post h2, .single-post h3, .single-post h4,
.single_blog_post h1, .single_blog_post h2, .single_blog_post h3, .single_blog_post h4,
.blog-details h1, .blog-details h2, .blog-details h3, .blog-details h4,
.article h1, .article h2, .article h3, .article h4 {
    color: #000 !important;
    line-height: 1.25;
}
.single-post p, .single_blog_post p, .blog-details p, .article p {
    color: #333;
    font-size: 15px;
    line-height: 1.75;
}
/* Why-choose block: black text */
.why-choose, .why-choose p, .why-choose li { color: #000 !important; }
/* Remove social share buttons anywhere they appear */
.post-social-share, .share-buttons, .share-row,
.social-share, .single_blog_post .social, .blog-details .social-links,
.post-share, .post__share { display: none !important; }

/* ---------- [10] Related Post: full container width ---------- */
.related-post .row, .related_post .row {
    display: flex;
    flex-wrap: wrap;
}
.related-post .row > [class*="col-"],
.related_post .row > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
@media (max-width: 991.98px) {
    .related-post .row > [class*="col-"],
    .related_post .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575.98px) {
    .related-post .row > [class*="col-"],
    .related_post .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- [11] Sidebar (Recent News, Search, TOC): tight typography ---------- */
.blog-sidebar .widget, .sidebar .sidebar_widget { font-size: 14px; }
.blog-sidebar h3, .blog-sidebar h4,
.sidebar h3, .sidebar h4 { font-size: 15px; line-height: 1.35; margin-bottom: 8px; }
.blog-sidebar p, .sidebar p { font-size: 13px; line-height: 1.5; }
.blog-sidebar .widget-title, .sidebar .widget_title {
    font-size: 16px;
    margin-bottom: 12px;
    padding: 8px 14px;
}
.blog-sidebar ul li, .sidebar ul li { font-size: 13px; line-height: 1.5; padding: 6px 0; }

/* ---------- [12] Sub-menu ("Pages" dropdown): left-aligned ---------- */
.mainmenu ul li .sub-menu {
    text-align: left !important;
    min-width: 200px;
}
.mainmenu ul li .sub-menu li { text-align: left !important; }
.mainmenu ul li .sub-menu li a {
    text-align: left !important;
    padding: 8px 18px !important;
    display: block !important;
}

/* ---------- [13] Mobile menu polish — only visual tweaks ON TOP of the template ---------- */
/* Do NOT touch .mobilemenu or .mainmenu > ul display/positioning here — the template's
   responsive.css + theme.js handle open/close via jQuery slideToggle and must work natively. */
@media (min-width: 320px) and (max-width: 767px) {
    /* Template sets `top: -40px` — too aggressive on our shorter header, nudge down. */
    .mobilemenu { top: -32px !important; }

    /* Template turns spans white on .active/:hover — they vanish on our white header.
       Keep them purple so the hamburger stays visible after tapping. */
    .mobilemenu span,
    .mobilemenu.active span,
    .mobilemenu:hover span {
        background: #7367f0 !important;
    }
}

/* ---------- [14] Mobile hero: less top padding, smaller heading & image ---------- */
@media (max-width: 991.98px) {
    .payloan_header_bg { padding: 40px 0 50px; }
    .payloan_header_bg .welcome_text h1 { font-size: 36px; line-height: 1.2; }
    .payloan_header_bg .welcome_text p { font-size: 14px; max-width: 100%; }
    .payloan_header_bg .header_img {
        margin-top: 24px;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 575.98px) {
    .payloan_header_bg { padding: 20px 0 32px; }
    .payloan_header_bg .welcome_text { text-align: center; }
    .payloan_header_bg .welcome_text h1 { font-size: 26px; }
    .payloan_header_bg .welcome_text p { font-size: 13px; }
    .payloan_header_bg .welcome_button { text-align: center; }
    .payloan_header_bg .header_img { max-width: 55%; margin: 18px auto 0; }
}

/* ---------- [15] Mobile: centering consistency on common sections ---------- */
@media (max-width: 767.98px) {
    .commonSection { padding: 60px 0; }
    .commonSection .sec_title { font-size: 28px; line-height: 1.25; }
    .commonSection .sec_desc { font-size: 14px; }
    .homeService .mt176 { margin-top: 0; }
    .homeService .serviceArea { margin-top: 30px; text-align: left; }
    .singleTeam img { width: 140px; height: 140px; }
    .singleCustomer { padding: 18px; }
    /* Uniform left-align inside columns */
    .ab_section .singleAB, .serviceArea, .contactArea { text-align: left; }
}

/* ---------- [16] Mobile: article / post page padding + fonts ---------- */
@media (max-width: 767.98px) {
    .single_blog_post, .blog-details, .article, .post-content {
        padding: 30px 0 !important;
    }
    .pagebanner { padding: 60px 0 40px; }
    .pagebanner .bannerTitle h2 { font-size: 28px; }
    .pagebanner .bannerTitle p { font-size: 13px; }
    .singleService_2 h1 { font-size: 28px; }
    .singleService_2 h4 { font-size: 16px; }
    .blog-content h1, .article h1, .single_blog_post h1 { font-size: 24px; }
    .blog-content h2, .article h2, .single_blog_post h2 { font-size: 20px; }
    .blog-content h3, .article h3, .single_blog_post h3 { font-size: 18px; }
    .blog-content p, .article p, .single_blog_post p { font-size: 14px; }
}

/* ---------- [17] FAQ accordion polish ---------- */
.faqPage .card { border: 0; border-radius: 6px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.faqPage .card-header { background: #f7f7fc; border: 0; }
.faqPage .btn-link { color: #1d1c42; font-weight: 600; text-decoration: none; width: 100%; text-align: left; }
.faqPage .btn-link:hover { color: #7367f0; }
.faqPage .card-body { padding: 18px 20px; }

/* ---------- [18] Portfolio filters ---------- */
.portfolioPage .filter-buttons { margin-bottom: 30px; }
.portfolioPage .filter-buttons .btn {
    background: transparent;
    border: 1px solid #e5e5f3;
    padding: 8px 20px;
    margin: 0 4px 8px;
    border-radius: 24px;
    font-size: 13px;
    color: #1d1c42;
    cursor: pointer;
}
.portfolioPage .filter-buttons .btn.active,
.portfolioPage .filter-buttons .btn:hover {
    background: #7367f0;
    color: #fff;
    border-color: #7367f0;
}
.singleFolio { margin-bottom: 30px; }
.singleFolio .folioThumb img { width: 100%; height: auto; border-radius: 6px; }
.singleFolio .folioContent {
    padding: 16px 6px 6px;
}
.singleFolio .folioContent span { font-size: 12px; color: #7367f0; text-transform: uppercase; letter-spacing: 1px; }
.singleFolio .folioContent h4 { margin: 6px 0 0; font-size: 18px; }
.singleFolio .folioContent h4 a { color: #1d1c42; }

/* ---------- [19] Contact page: info cards ---------- */
.contactPage .singleInfo {
    background: #f7f7fc;
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 18px;
}
.contactPage .singleInfo i {
    font-size: 22px;
    color: #7367f0;
    margin-right: 10px;
}
.contactPage .singleInfo h5 { display: inline-block; margin: 0; }
.contactPage .singleInfo p { margin: 8px 0 0 34px; font-size: 14px; }
.contactPage .contactForm input,
.contactPage .contactForm textarea,
.applicationFormPage .applicationFrom input,
.applicationFormPage .applicationFrom select,
.applicationFormPage .applicationFrom textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e5f3;
    border-radius: 6px;
    margin-bottom: 14px;
    background: #fff;
    font-size: 14px;
}
.contactPage .contactForm textarea,
.applicationFormPage .applicationFrom textarea { min-height: 140px; }

/* ---------- [20] Page banner (shared): cleaner, not too tall ---------- */
.pagebanner {
    padding: 90px 0 60px;
    background: linear-gradient(135deg, #f7f7fc 0%, #fff 100%);
}
.pagebanner .bannerTitle h2 { color: #1d1c42; font-size: 38px; font-weight: 700; }
.pagebanner .bannerTitle p { color: #6e6d8a; }

/* ---------- [21] Back-to-top polish ---------- */
.copyright #backTo i { color: #7367f0; font-size: 22px; }