/* layout.css - one spacing system for every page (2026-11-05). Loaded after typography.css.
   Card gap 24px, card padding 24px, card text 15px/1.6, cards in a row share one height,
   no mid-word hyphenation. Sections: 80 / 64 / 48px (desktop / tablet / phone). */
:root { --vt-gap: 24px; --vt-card-pad: 24px; }

/* ---------- 0. No mid-word hyphen splits anywhere ---------- */
html body p, html body li, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
    -webkit-hyphens: manual; hyphens: manual;
}

/* ---------- 1. Header: the menu never touches the logo ---------- */
@media (min-width: 992px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav { margin-left: 28px; }
}
@media (min-width: 1400px) and (max-width: 1679.98px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav li { font-size: 15px; }
    .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a { font-size: 15px !important; }
}

/* ---------- 2. Card text: compact, not article-sized ---------- */
html body :is(.service-para, .pro_subtitle p, .Smart-para, .service_card_bg .content p, .helthcare_shadow p) { font-size: 15px; line-height: 1.6; }

/* ---------- 3. Product cards (home, products, service pages): equal height, nothing spills ---------- */
.Ready-Made-Software-carousel .owl-stage { display: flex; }
.Ready-Made-Software-carousel .owl-item { display: flex; }
.Ready-Made-Software-carousel .owl-item > div { display: flex; width: 100%; }
html body .Ready-Made-area { height: auto; min-height: 0; width: 100%; padding: var(--vt-card-pad); margin: 10px 4px; }
/* grid version (/products): card fills its column so a row lines up */
html body [class*="col-"] > .margin-bottom-20:has(> .Ready-Made-area) { height: calc(100% - 20px); display: flex; }
.Ready-Made-area .ready_made_text { margin-bottom: 12px !important; }
.Ready-Made-area .pro_subtitle { margin-bottom: 14px; }
.Ready-Made-area .pro_subtitle h5 { margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.Ready-Made-area .pro_subtitle p { margin-bottom: 0; }

/* ---------- 4. Home service grid: even 24px gaps, compact tiles ---------- */
html body .service_card_bg .content { width: 100%; padding: var(--vt-card-pad); border-radius: 16px; }
.service_card_bg { height: 100%; }
:is(.col-lg-3, .col-lg-4, .col-md-6):has(> a > .service_card_bg) { margin-bottom: var(--vt-gap) !important; }

/* ---------- 7. Section rhythm: no stacked dead space ---------- */
/* carousel arrows / dots sat 50-62px below the cards, on top of the section padding */
html body .owl-carousel .owl-controls, html body .global-carousel-init .owl-controls { margin-top: 28px !important; }
html body .owl-carousel .owl-dots { margin-top: 24px !important; }
/* listing pages (services, industries, hire...) used 120px top+bottom */
@media (min-width: 992px) { html body .padding-120 { padding-top: 80px; padding-bottom: 80px; } }
@media (min-width: 768px) and (max-width: 991.98px) { html body .padding-120 { padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 767.98px) { html body .padding-120 { padding-top: 48px; padding-bottom: 48px; } }

/* ---------- 6. FAQ accordions: no grey Bootstrap header showing in the rounded corners ---------- */
html body .card:has(.btn-header-link) { isolation: isolate; background-clip: padding-box; }
html body .card:has(.btn-header-link) > .card-header { background: transparent !important; border: 0 !important; }
html body .card:has(.btn-header-link) .btn-header-link { border-radius: 0 !important; }

/* ---------- 5. Delivery framework: wave without the dead space under it ---------- */
@media (min-width: 992px) {
    .creative-agency-work-process-area { padding-bottom: 110px; background-size: 100% 100%; }
}

/* ---------- 8. Headings never grow on smaller screens (responsive.css forces h2 = 26px at 768-1024) ---------- */
@media (min-width: 768px) and (max-width: 1024.98px) {
    html body h2:is(.banner-text, .Smart-text) , html body .asdf > h2, html body .sol-form-card h2, html body .sol-cta h2 { font-size: 22px !important; line-height: 1.35 !important; }
    html body h2.banner-text { font-size: 24px !important; }
    html body .navtitle h4 { font-size: 26px !important; line-height: 1.3 !important; }
}
@media (max-width: 767.98px) {
    html body .navtitle h4 { font-size: 22px !important; line-height: 1.3 !important; }
    html body .we_hiring-text { font-weight: 600; }
}
@media (max-width: 767.98px) { html body .tech_inner h6, html body .tech_borer h6 { font-size: 16px !important; } }
/* page-intro paragraph under the hero title: 20 desktop / 18 tablet / 16 phone */
@media (min-width: 768px) and (max-width: 991.98px) { html body .breadcrumb-inner-para { font-size: 18px !important; } }
@media (max-width: 767.98px) { html body :is(.breadcrumb-inner-para, .We-create-software .create-para) { font-size: 16px !important; line-height: 1.6 !important; } }

/* ---------- 9. Oversized one-offs from the theme, put on the same ladder ---------- */
/* "Empowering Growth with Vriksha Techno Solutions": was 44px / 800 at every width */
html body .empower_content h4 { font-size: 36px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.015em; }
html body .empower_content h4 span { font-size: inherit !important; font-weight: inherit !important; }
@media (max-width: 1199.98px) { html body .empower_content h4 { font-size: 32px !important; } }
@media (max-width: 991.98px)  { html body .empower_content h4 { font-size: 28px !important; } }
@media (max-width: 767.98px)  { html body .empower_content h4 { font-size: 24px !important; } }
/* counter numbers (21+, 500+): 38 desktop / 32 tablet / 28 phone */
@media (max-width: 991.98px) { html body :is(.asdf, .case_count) .counter-number { font-size: 32px !important; } }
@media (max-width: 767.98px) { html body :is(.asdf, .case_count) .counter-number { font-size: 28px !important; }
                               html body .banner-text span { font-size: inherit !important; } }

/* ---------- 10. Desktop header polish (2026-11-05; phones/tablet menu untouched) ---------- */
@media (min-width: 992px) {
    /* (1) menu, CTA and search sit level with the VRIKSHA wordmark, not the logo box centre */
    .navbar-area .nav-container .navbar-collapse,
    .navbar-area .nav-container .nav-right-content { position: relative; top: 6px; }
    /* (2) calmer menu: semibold soft-black, so the blue CTA is the one thing that stands out */
    html body .navbar-area .nav-container .navbar-collapse .navbar-nav > li { font-weight: 600; }
    html body .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a:not(.btn):not([class*="btn"]) {
        font-weight: 600; color: #1F2937 !important;
        /* (3) underline that slides in on hover and marks the current page */
        background-image: linear-gradient(#105BAB, #105BAB); background-repeat: no-repeat;
        background-position: left bottom; background-size: 0% 2px;
        transition: background-size .25s ease, color .2s ease; padding-bottom: 4px;
    }
    html body .navbar-area .nav-container .navbar-collapse .navbar-nav > li:hover > a:not(.btn):not([class*="btn"]),
    html body .navbar-area .nav-container .navbar-collapse .navbar-nav > li:is(.current-menu-item, .vt-current) > a:not(.btn):not([class*="btn"]) {
        color: #105BAB !important; background-size: 100% 2px;
    }
    /* (4) crisp hairline instead of the grey drop shadow */
    html body .navbar.navbar-area { box-shadow: none !important; border-bottom: 1px solid #E6EAF0; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    html body .navbar-area .navbar-nav > li > a { transition: none; }
}

/* ---------- 11. Readability: left-aligned text and healthy leading everywhere (2026-11-05) ---------- */
/* Justified text made word "rivers" (worst on phones). Was fixed only by JS at page load on phones -
   switching width in place, or a tablet, still showed it. Now CSS, every width. */
html body :is(.Ecosystem-para, .Fully_Customizable_para, .Mobile-App-text1, .Mobile-App-text2,
              .Mobile-Application-text .information-para, .Mobile-Application-text p, .Procedure-para, .Procedure-para1,
              .Related-services-para p, .Roots-para, .Vriksha-para, .about_area_description, .about_area_description div,
              .basic-text, .cagency-single-testimonial-item .description, .case-right-para, .e-commerce_text,
              .industries-heading, .product-text1, .product-text2, .standalone-odd-text, .standalone-odd-text p,
              .standalone-text p, .testimonial_para_text p, [style*="justify"]),
html body :is(.standalone-text, .standalone-odd-text, .about_area_description) [style*="justify"] {
    text-align: left !important;
}
/* grey text cards: same space above and below the text */
html body :is(.Mobile-App-text1, .Mobile-App-text2) { padding: var(--vt-card-pad) !important; }
html body :is(.Mobile-App-text1, .Mobile-App-text2) > :last-child,
html body .service_card_bg .content > p:last-child, html body .Ready-Made-area .pro_subtitle:last-of-type p { margin-bottom: 0 !important; }

/* page intro under the hero title, hero description, section subtitles */
html body :is(.breadcrumb-inner-para, .header-inner .description, .header-inner .description p) { line-height: 1.6 !important; }
html body .section-title .subtitle { line-height: 1.6 !important; }
/* FAQ questions and blog card titles: a touch more air between lines */
html body .btn-header-link { line-height: 1.45 !important; }
html body :is(.blog-heading, .blog-top-heading, .blog-heading a, .blog-top-heading a) { line-height: 1.4 !important; }

/* counter cards (Projects Delivered / Years of Expertise): the description was 16px / 1.2 / medium black */
html body .asdf .counter-title { line-height: 1.3 !important; margin-bottom: 6px; }
html body .asdf h6 { font-size: 15px !important; line-height: 1.55 !important; font-weight: 400 !important; color: var(--vt-body, #4B5563) !important; margin-bottom: 16px !important; }
html body .asdf .counter-number { line-height: 1.2 !important; }

/* responsive.css gave headings fixed 30-50px line-heights on tablet/phone (22px title on a 38px line) */
@media (max-width: 1024.98px) {
    html body :is(h1, h2) { line-height: 1.28 !important; }
    html body :is(h3, h4, h5, h6) { line-height: 1.35 !important; }
    html body :is(.banner-text, .banner-text span) { line-height: 1.4 !important; }
    html body .asdf h6 { line-height: 1.55 !important; }
}

/* ---------- 12. Phone rhythm: app-tight spacing (<=767px) ---------- */
@media (max-width: 767.98px) {
    /* desktop section paddings (40-120px) stacked to 70-170px gaps on phones */
    html body :is(.padding-top-40, .padding-top-50, .padding-top-60, .padding-top-80, .padding-top-100, .padding-top-120) { padding-top: 24px !important; }
    html body :is(.padding-bottom-40, .padding-bottom-50, .padding-bottom-60, .padding-bottom-80, .padding-bottom-100, .padding-bottom-120) { padding-bottom: 24px !important; }
    html body :is(.padding-top-30) { padding-top: 16px !important; }
    html body :is(.padding-bottom-30) { padding-bottom: 16px !important; }
    html body :is(.section-title, .margin-bottom-50, .margin-bottom-60) { margin-bottom: 20px !important; }
    html body .margin-bottom-30 { margin-bottom: 16px !important; }
    html body .breadcrumb-area .breadcrumb-inner { padding-bottom: 32px !important; }
    /* carousel arrows/dots: close to the cards they belong to */
    html body .owl-carousel .owl-controls, html body .global-carousel-init .owl-controls { margin-top: 8px !important; }
    html body .owl-carousel .owl-dots, html body .app-dots { margin-top: 8px !important; }
    /* grey text cards */
    html body :is(.Mobile-App-text1, .Mobile-App-text2) { margin-bottom: 12px !important; }
    /* card title -> text: 8px, not 40px */
    html body .app-swipe :is(h3, h4, h5, h6) ~ p { margin-top: 8px !important; }

    /* promo banner (service/industry pages): was full-bleed, right-aligned text over the illustration */
    html body .long_banner { position: relative; height: auto !important; min-height: 0; margin: 0 15px; border-radius: 16px; overflow: hidden;
                             padding: 28px 4px; background-position: left center !important; }
    html body .long_banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(16, 91, 171, .92), rgba(91, 33, 182, .88)); }
    html body .long_banner > .container { position: relative; z-index: 1; }
    html body .long_banner .text-right { text-align: left !important; transform: none !important; }
    html body .long_banner .banner-text, html body .long_banner .banner-text :is(h2, h3, span, p) { text-align: left !important; color: #fff !important; font-size: 20px !important; line-height: 1.35 !important; }
    html body .long_banner .success-btn { margin-top: 14px; }

    /* counters (Projects Delivered / Years of Expertise): compact app cards, 1.5 visible */
    html body .row.app-swipe:has(.asdf) > * { flex: 0 0 64% !important; max-width: 260px !important; margin: 0 !important; scroll-snap-align: start; }
    html body .app-counter .project-bg { height: 100%; }
    html body .app-counter .asdf { height: 100%; }
    html body .asdf { padding: 14px 14px 12px !important; border-radius: 14px; background: #F7F9FC; }
    html body .asdf .counter-title { font-size: 16px !important; }
    html body .asdf h6 { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
    html body .asdf .counter-number { font-size: 24px !important; }
    html body .asdf p { font-size: 13px !important; margin-top: 2px; }
}
@media (max-width: 767.98px) {
    /* more 40-50px desktop spacings that stacked on phones */
    html body :is(.Subscribe-area, .service-cta-section) { padding-top: 28px !important; padding-bottom: 28px !important; }
    html body .empower_section { padding-top: 24px !important; padding-bottom: 24px !important; }
    html body :is(.you-looking-area, .download_banner, .verticalslider) { padding-bottom: 24px !important; }
    html body .padding-top-70 { padding-top: 24px !important; }
    html body .vriksha-right-area { padding-top: 12px !important; }
    html body .home_cooks_right_area { margin-top: 20px !important; }
    html body :is(.cont-img, .cf-card + .cf-card) { margin-top: 16px !important; }
    html body :is(.mt-5) { margin-top: 24px !important; }
    html body :is(.mb-5, .margin-bottom-50) { margin-bottom: 24px !important; }
    html body [style*="margin-top: 50px"], html body [style*="margin-top:50px"] { margin-top: 24px !important; }
    html body [style*="margin-bottom: 50px"], html body [style*="margin-bottom:50px"] { margin-bottom: 24px !important; }
    /* stacked product cards (/products grid): 54px between cards -> 16px */
    html body [class*="col-"] > .margin-bottom-20:has(> .Ready-Made-area) { margin-bottom: 0 !important; height: auto; }
    html body [class*="col-"]:has(> .margin-bottom-20 > .Ready-Made-area) { margin-bottom: 16px !important; }
    html body .Ready-Made-area { margin: 0 !important; }
    html body .owl-item .Ready-Made-area { margin: 6px 2px !important; }
}

/* ---------- 13. Footer artwork (trees + hill) ----------
   One 1920x538 SVG with background-size:cover anchored right: when the footer grew taller than 538px
   (18 industries) it was scaled up and ~500px of the left side (left trees) was cropped off.
   Always draw it full-width, sitting on the bottom edge. */
@media (min-width: 768px) {
    html body .footer-area .footer-top { background-size: 100% auto !important; background-position: center bottom !important; background-repeat: no-repeat !important; }
}

/* ---------- 14. Footer: six columns (Solutions added, Industries trimmed to 8) ---------- */
@media (min-width: 1200px) {
    html body .footer-top .row:has(> .ft-col-solutions) > .col-xl-33 { flex: 0 0 15% !important; max-width: 15% !important; }
    html body .footer-top .row:has(> .ft-col-solutions) > .col-xl-33:nth-child(2) { flex-basis: 19.5% !important; max-width: 19.5% !important; }
    html body .footer-top .row:has(> .ft-col-solutions) > .col-xl-33.ft-col-solutions { flex-basis: 17% !important; max-width: 17% !important; }
    html body .footer-top .row:has(> .ft-col-solutions) > .col-xl-33:last-child { flex-basis: 18.5% !important; max-width: 18.5% !important; }
}
html body .footer-atag.ft-all { color: #105BAB !important; font-weight: 600; }
html body .footer-atag.ft-all::after { content: " \2192"; }
/* the tree artwork is 28% of the footer width tall and its trees fill the lower half: keep link text above them */
@media (min-width: 992px) { html body .footer-area .footer-top { padding-bottom: 13vw !important; } }