/* ==========================================================================
   Lab services page styles  (laboratories.html)

   This file is linked ONLY from laboratories.html, so nothing in it can
   reach any other page.

   Contents:
     1. Image gallery
     2. CTA section
     3. Feature list wrapping
     4. Sidebar contact image
     5. Facility cards
   ========================================================================== */


/* ==========================================================================
   5. FACILITY CARDS
   Captioned cards that replaced the mosaic gallery at the top of the right
   column. Used only by laboratories.html; the .lab-gallery rules above are
   still live on the other pages that link this file, so they stay as-is.
   ========================================================================== */

.lab-facility-head {
    margin: 0 auto 40px;
    text-align: center;
}

/* Held to one line from 576px up, where there is room for it. The size is tied
   to the viewport rather than fixed so the longest heading still fits at the
   narrow end of that range, and the cap keeps it at 40px on desktop.

   Below 576px it is allowed to wrap - see the media query at the end of this
   file. nowrap there overflowed the container (the laboratories heading needs
   ~313px at a 320px viewport, which gives ~296px) and that overflow showed up
   as horizontal scroll with dead space to the right of the page. */
.lab-facility-head h2 {
    font-size: clamp(20px, 3.2vw, 40px);
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
    white-space: nowrap;
}

/* The intro paragraph still wraps, so it keeps a readable measure. */
.lab-facility-head p {
    max-width: 720px;
    margin: 0 auto;
    color: #666;
    line-height: 1.8;
}

/* Slides are stretched to the tallest card in view so the row of 4 lines up
   even though the captions differ in length. */
.lab-facility-slider .swiper-slide {
    height: auto;
}

/* Static fallback used by imaging-center.html, which has too few distinct
   photos to fill a carousel. auto-fit keeps it sane at any card count. */
.lab-facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.lab-facility-card {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.lab-facility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
}

/* Fixed ratio keeps every card's image the same height regardless of the
   source file's native size - these photos range from 512x391 to 2560x1920. */
.lab-facility-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.lab-facility-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.lab-facility-card:hover .lab-facility-card__media img {
    transform: scale(1.06);
}

/* flex-grow lets the body absorb the extra height on stretched slides, so the
   card border ends flush instead of leaving a gap under a short caption. */
.lab-facility-card__body {
    flex: 1 0 auto;
    padding: 20px 22px 24px;
}

.lab-facility-card__body h5 {
    font-size: 18px;
    margin: 0 0 10px;
}

.lab-facility-card__body p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    color: #666;
    /* Limit the description to 3 lines, adding an ellipsis if it runs longer,
       so every card's copy occupies the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination sits below the cards; the slider needs the room reserved. */
.lab-facility-slider {
    padding-bottom: 50px;
}

.lab-facility-slider .swiper-pagination-bullet-active {
    background: var(--theme-color);
}

@media (max-width: 575px) {
    .lab-facility-head {
        margin-bottom: 30px;
    }

    /* Wrap instead of forcing one line. Holding nowrap this far down pushed the
       longest heading past the container and gave the page a horizontal
       scrollbar at 320px. Two readable lines beat one line plus dead space. */
    .lab-facility-head h2 {
        white-space: normal;
        font-size: 22px;
    }

    .lab-facility-card__body {
        padding: 18px 18px 20px;
    }
}


/* ==========================================================================
   1. GALLERY
   Layout: one large image on the left, 3 stacked down its right side,
   4 across the bottom.

   Scoping: every selector is a descendant of .lab-gallery, and the .lab-
   prefix is used nowhere else in this project.
   ========================================================================== */

.lab-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Large image: spans columns 1-3 and rows 1-3 */
.lab-gallery .lab-gallery-main {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
}

/* The main tile must take its height from the grid rows, never from its
   image's natural size. Taking the image out of flow leaves the tile with
   no intrinsic height, so rows 1-3 are sized purely by the 3 side tiles and
   the main tile then stretches to meet them exactly - whatever aspect ratio
   the main image happens to have.

   Without this, a portrait main image (hospitals-2 is 1920x2560) makes the
   tile taller than the side column, which stretches rows 1-3 and opens gaps
   between the side images. laboratories.html only escaped this because
   lab-1 is 512x391 - a ratio that nearly matches what the rows want.

   (aspect-ratio on the tile is NOT a substitute: it suppresses the default
   align-self:stretch, leaving the main tile ~5px short of the side column.) */
.lab-gallery .lab-gallery-main {
    position: relative;
    min-height: 0;
}

.lab-gallery .lab-gallery-main img {
    position: absolute;
    inset: 0;
}

/* The 3 right-side and 4 bottom tiles auto-place into the remaining cells.
   The 4/3 box sizes the grid rows, which in turn gives the main image a
   ~1.32 ratio - matching lab-1's native 512x391 so it crops cleanly. */
.lab-gallery .lab-gallery-side,
.lab-gallery .lab-gallery-bottom {
    aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   Variant: 3 across the bottom instead of 4 (hospitals.html)

   3 tiles don't divide into 4 columns, so this variant re-lays the grid on
   12 columns - divisible by both 3 and 4. A quarter-width tile spans 3,
   a third-width tile spans 4.

   This is scoped to the variant rather than applied to the base grid on
   purpose: re-tracking the base to 12 columns changes sub-pixel rounding
   and shifts the laboratories.html gallery by a pixel or two. Keeping the
   4-column base untouched leaves that page byte-for-byte as it was.

   16/9 on the bottom tiles keeps that row the same height as the 4-up
   version, so the gallery has the same overall proportions on both pages.
   -------------------------------------------------------------------------- */
.lab-gallery.lab-gallery-bottom-3 {
    grid-template-columns: repeat(12, 1fr);
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-main {
    grid-column: 1 / 10;
    grid-row: 1 / 4;
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-side {
    grid-column: span 3;
    aspect-ratio: 4 / 3;
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-bottom {
    grid-column: span 4;
    aspect-ratio: 16 / 9;
}

.lab-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .lab-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .lab-gallery .lab-gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    /* The 3-up variant collapses to the same 2-column grid as the 4-up one,
       so undo its 12-column spans - only 2 columns exist at this width. */
    .lab-gallery.lab-gallery-bottom-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-side,
    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-bottom {
        grid-column: span 1;
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   2. CTA SECTION

   Matches the CTA on about.html. That page gets its CTA styling from two
   files it links - home.css (the green box, icon size, and the overrides
   that strip the template's background image/overlay) and about.css (the
   vertical spacing). laboratories.html links neither, so the rules are
   reproduced here instead of linking those files in - linking them would
   drag ~1400 unrelated lines onto this page.

   Copied verbatim, in the same order about.html loads them (home.css rules
   first, then about.css), so the cascade resolves identically.

   Only .cta-section-2 + section / section:has(+ .cta-section-2) from
   home.css is deliberately left out: it zeroes the margin of NEIGHBOURING
   sections, not the CTA. It is inert on about.html (nothing follows the
   CTA there) but here it would hit the newsletter section below.
   ========================================================================== */

/* --- from home.css --- */
.cta-left-items .icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.cta-bg {
    background: #00984a;
    border-radius: 20px;
}

.cta-section-2 {
    background: transparent !important;
}

.cta-wrapper-2,
.zoom-effect-style {
    background-image: none !important;
    position: relative;
}

/* Strip the template's dark overlay pseudo-elements */
.cta-wrapper-2::before,
.cta-wrapper-2::after,
.zoom-effect-style::before,
.zoom-effect-style::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Fix black gap above CTA section */
.cta-section-2 {
    background-color: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 60px;
    overflow: hidden;
}

.cta-wrapper-2 {
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .cta-right-items .theme-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
    }
}

/* --- from about.css --- */
.cta-custom-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .cta-custom-spacing {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}


/* ==========================================================================
   3. FEATURE LIST WRAPPING

   Each <li> is "<i icon> text". As a plain block, text that wraps onto a
   second line returns to the <li>'s left edge - i.e. underneath the icon.
   Making the <li> a flex row puts the text in its own column, so wrapped
   lines align with the first line instead.

   The text is a bare text node; flex turns it into an anonymous flex item,
   which is what gives it its own wrapping box.

   Same selector as main.css uses, and this file loads after main.css, so
   these win on the cascade without needing !important.
   ========================================================================== */

.services-details-wrapper .services-details-right-items .list-box ul li {
    display: flex;
    align-items: baseline; /* keeps the icon on the first line's baseline */
}

.services-details-wrapper .services-details-right-items .list-box ul li i {
    flex-shrink: 0; /* never let the icon squash as the text wraps */
}


/* ==========================================================================
   3b. CONSULTANCY PAGE — EVEN LINE RHYTHM IN LIST BOXES

   The consultancy page reuses the two-column .list-box, but its columns hold
   unequal item counts and longer text that wraps. main.css sets
   .list-box { align-items:center }, which vertically centres the two columns
   so their rows stop lining up. Scoped to body.page-consultancy: top-align the
   columns and pin every line to the site's 30px line-height (matching body and
   the other service pages) so each line sits on the same rhythm. Every wrapped
   item is spaced consistently and both columns start at the same baseline.
   ========================================================================== */

.page-consultancy .services-details-wrapper .services-details-right-items .list-box {
    align-items: flex-start;
}

.page-consultancy .services-details-wrapper .services-details-right-items .list-box ul li {
    line-height: 30px;
    align-items: flex-start; /* icon on the first wrapped line, text flows evenly */
}

.page-consultancy .services-details-wrapper .services-details-right-items .list-box ul li i {
    line-height: 30px; /* icon shares the text line box so rows stay aligned */
}

.page-consultancy .services-details-wrapper .services-details-right-items p,
.page-consultancy .services-details-wrapper .services-details-right-items h5 {
    line-height: 30px;
    padding-top: 20px;
}


/* ==========================================================================
   3b-ii. CONSULTANCY PAGE — ROUTING NOTE TO HEALTHCARE TECHNOLOGY

   Consultancy is strategic and advisory support; hands-on software validation,
   India localization and implementation support lives on the Healthcare
   Technology page. This note sits under the intro so a healthtech visitor who
   landed here can route themselves before reading further. Dashed green
   outline matches the routing lines on the Healthcare Technology page.
   ========================================================================== */

.page-consultancy .services-details-right-items .btc-route-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0 8px;
    padding: 18px 22px;
    border-radius: 12px;
    background: #f5f8f6;
    border: 1px dashed rgba(0, 152, 74, .45);
}

.page-consultancy .services-details-right-items .btc-route-note > i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #00984a;
    font-size: 22px;
}

/* Override 3b's padding-top:20px for paragraphs - this one sits inside a box. */
.page-consultancy .services-details-wrapper .services-details-right-items .btc-route-note p {
    padding-top: 0;
    margin: 0;
    font-size: 16px;
    line-height: 27px;
}

.page-consultancy .services-details-right-items .btc-route-note strong {
    display: block;
    color: #1b1b1b;
    font-weight: 600;
}

.page-consultancy .services-details-right-items .btc-route-note a {
    color: #204066;
    font-weight: 700;
    white-space: nowrap;
    transition: color .3s ease;
}

.page-consultancy .services-details-right-items .btc-route-note a i {
    margin-left: 6px;
    transition: transform .3s ease;
}

.page-consultancy .services-details-right-items .btc-route-note a:hover {
    color: #00984a;
}

.page-consultancy .services-details-right-items .btc-route-note a:hover i {
    transform: translateX(4px);
}

@media (max-width: 575px) {
    .page-consultancy .services-details-right-items .btc-route-note {
        padding: 16px 18px;
    }
}


/* ==========================================================================
   3c. CONSULTANCY PAGE — COLLABORATION MODELS RESPONSIVE STACK

   Each Collaboration Models item is "Title — description". On desktop the
   title, em-dash and description sit inline. On tablet and mobile (<=1199px)
   the title moves to its own line above the description and the em-dash is
   dropped, so each item reads as a heading with its content underneath.
   ========================================================================== */

.page-consultancy .collab-box .collab-item {
    display: block; /* holds title / separator / description */
}

@media (max-width: 1199px) {
    .page-consultancy .collab-box ul li {
        align-items: flex-start;
    }

    .page-consultancy .collab-box .collab-item {
        display: flex;
        flex-direction: column;
    }

    .page-consultancy .collab-box .collab-sep {
        display: none; /* remove the em-dash once the title is stacked */
    }

    .page-consultancy .collab-box .collab-title {
        margin-bottom: 4px;
    }

    /* Indent the description under its heading (tab space) */
    .page-consultancy .collab-box .collab-desc {
        padding-left: 20px;
    }
}


/* ==========================================================================
   4. SIDEBAR CONTACT IMAGE

   The phone/email panel in the sidebar. main.css gives the image
   width:100% + height:100% with no object-fit, so it just scales with its
   column and keeps its source aspect ratio. The source is portrait (2:3),
   so the taller the column, the taller the image: fine at ~340px wide on
   desktop, but below the lg breakpoint the sidebar goes full width and the
   image balloons to ~774px tall - far more than the ~219px of text in it.

   Only these 4 services pages use .sidebar-widget-image, and this file is
   linked only from those 4, so nothing else is affected.
   ========================================================================== */

/* Dark gradient so the white phone/email text stays legible on the photo.
   Weighted to the bottom, where the text sits. */
.services-details-wrapper .services-details-sidebar .sidebar-widget-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.78) 100%
    );
    pointer-events: none;
}

/* The overlay is a generated last child, so it would paint over .content.
   Lift .content above it. */
.services-details-wrapper .services-details-sidebar .sidebar-widget-image .content {
    z-index: 1;
}

/* Below lg the sidebar goes full width - cap the height and crop instead of
   letting the portrait source stretch the panel. 340px comfortably clears
   the ~219px content block plus its 25px offset. */
@media (max-width: 991px) {
    .services-details-wrapper .services-details-sidebar .sidebar-widget-image img {
        height: 340px;
        object-fit: cover;
        object-position: center;
    }
}

/* --------------------------------------------------------------------------
   Fix right-side overflow from the contact panel's email address.

   .content is inset left:25px right:25px with a further 25px of padding, so
   inside a full-width sidebar at a 320px viewport it has ~196px of usable
   width. "info@bloodtestconsultancy.in" is 28 characters with no spaces, so
   at the h5 default of 20px it needs ~280px and cannot wrap. It overflowed
   the panel, and since nothing above it clips, that became horizontal scroll
   on the whole page - the dead space to the right.

   break-word is the actual fix and holds at any width; the smaller type and
   tighter insets below 576px just keep the address on one line instead of
   breaking it mid-word.

   This hits every page with .sidebar-widget-image. The one page that links
   this file without the panel (blood-test-consultancy-chennai.html) never
   had the overflow, which is what identified the panel as the cause.
   -------------------------------------------------------------------------- */
.services-details-wrapper .services-details-sidebar .sidebar-widget-image .content h5,
.services-details-wrapper .services-details-sidebar .sidebar-widget-image .content h5 a {
    overflow-wrap: break-word;
}

@media (max-width: 575px) {
    .services-details-wrapper .services-details-sidebar .sidebar-widget-image .content {
        left: 15px;
        right: 15px;
        padding: 18px;
    }

    /* ~230px of room at 320px; the address needs ~224px at 16px. */
    .services-details-wrapper .services-details-sidebar .sidebar-widget-image .content h5 {
        font-size: 16px;
    }

    .services-details-wrapper .services-details-sidebar .sidebar-widget-image .content .icon {
        font-size: 46px;
        margin-bottom: 18px;
    }
}


/* --------------------------------------------------------------------------
   Fix right-side overflow on small phones (<=575px).
   The services-details .row uses Bootstrap's g-5, which sets a 3rem
   horizontal gutter -> the row gets -24px side margins while the full-width
   container only pads 12px, so it spills ~12px past the viewport (a gap on
   the right). Above 576px the centered container absorbs it; below, it shows.
   Reset only the horizontal gutter so the row aligns with the container edges;
   the vertical gutter (spacing between stacked sidebar/content) is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .services-details-section .row {
        --bs-gutter-x: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Compact the CTA (cta-newsletter) card on tablet and mobile.
   The card's size is driven by .cta-wrapper-2 padding + the 124px logo
   circle + the h3, so we trim those down at smaller widths.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cta-newsletter-section .cta-wrapper-2 {
        padding: 32px 30px;
        gap: 24px;
    }
    .cta-newsletter-section .cta-left-items {
        gap: 24px;
    }
    .cta-newsletter-section .cta-left-items .icon {
        width: 84px;
        height: 84px;
        line-height: 84px;
    }
    .cta-newsletter-section .cta-left-items .icon img {
        max-width: 48px;
        vertical-align: middle;
    }
    .cta-newsletter-section .cta-left-items .content h3 {
        font-size: 22px;
    }
    .cta-newsletter-section .cta-right-items .theme-btn {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .cta-newsletter-section .cta-wrapper-2 {
        padding: 26px 22px;
        gap: 18px;
    }
    .cta-newsletter-section .cta-left-items .icon {
        width: 66px;
        height: 66px;
        line-height: 66px;
    }
    .cta-newsletter-section .cta-left-items .icon img {
        max-width: 38px;
    }
    .cta-newsletter-section .cta-left-items .content h3 {
        font-size: 19px;
    }
    .cta-newsletter-section .cta-left-items .content p {
        font-size: 14px;
    }
    .cta-newsletter-section .cta-right-items .theme-btn {
        margin-top: 16px;
    }
}


.faq-list {
    font-size: 18px; /* same as paragraph */
    line-height: 1.8;
   
}

.faq-list li {
    margin-bottom: 10px;
    padding-top: 10px;
}

.faq-question{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #1b1b1b;
    margin-bottom: 12px;
}


/* ===== Core Services ===== */

.btc-core-title{
    margin-bottom:25px;
    padding-top: 40px;
}

.btc-service-intro{
    margin-bottom:30px;
}

.btc-service-heading{
    font-size:20px;
  
    margin-bottom:12px;
}

.btc-service-intro p{
    margin-bottom:0;
    line-height:1.8;
}

.btc-service-wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.btc-service-box{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:16px;
    padding:28px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.btc-service-box ul{
    margin:0;
    padding:0;
    list-style:none;
}

.btc-service-box li{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.btc-service-box li:last-child{
    margin-bottom:0;
}

.btc-service-box i{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:#00984a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}

.btc-service-box span{
    flex:1;
    color:#555;
    font-size:16px;
    line-height:1.7;
}

@media (max-width:991px){

    .btc-service-wrapper{
        grid-template-columns:1fr;
    }

}



.diag-title{
    margin-bottom:15px;
}

.diag-desc{
    margin-bottom:30px;
    line-height:1.8;
}

.diag-services{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.diag-service{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border:1px solid #e7e7e7;
    border-radius:50px;
    background:#fff;
    transition:.3s;
}

.diag-service:hover{
    background:#00984a;
    border-color:#00984a;
    color:#fff;
}

.diag-service i{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#00984a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
}

.diag-service:hover i{
    background:#fff;
    color:#00984a;
}

.diag-service span{
    font-size:15px;
    font-weight:600;
}

@media(max-width:768px){
    .diag-service{
        width:100%;
    }
}




.hex-wrapper{
    position:relative;
    width:700px;
    height:520px;
    margin:60px auto;
}

.hex-card{
    position:absolute;
    width:150px;
    height:170px;
 
  clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0% 50%);
  
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    transition:.3s;
}

.hex-card:hover{
    background:#0aa34f;
    color:#fff;
    transform:translateY(-8px);
}

.hex-card i{
    font-size:28px;
    margin-bottom:12px;
    color:#0aa34f;
}

.hex-card:hover i{
    color:#fff;
}

.hex-card h6,
.hex-card span{
    font-size:15px;
    font-weight:600;
    line-height:1.4;
}

/* Center */
.center{
    top:175px;
    left:275px;
    background:#0aa34f;
    color:#fff;
}

.center i{
    color:#fff;
}

/* Around Center */
.top{
    top:0;
    left:275px;
}

.top-right{
    top:88px;
    right:90px;
}

.bottom-right{
    bottom:88px;
    right:90px;
}

.bottom{
    bottom:0;
    left:275px;
}

.bottom-left{
    bottom:88px;
    left:90px;
}

.top-left{
    top:88px;
    left:90px;
}

.ideal-tech{
    margin-top:20px;
    text-align:center;
}

.ideal-tech span{
    display:inline-block;
    padding:8px 18px;
    margin:6px;
    border-radius:30px;
    background:#f3f8fb;
    border:1px solid #ddd;
}


.hex-item{
    width: 145px;
    height: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hex-border{
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0% 50%
    );
    border: 2px solid #16a34a;
    background: transparent;
}

.hex-content{
    position: relative;
    z-index: 2;
    text-align: center;
}

.hex-content i{
    font-size: 28px;
    color: #16a34a;
    margin-bottom: 10px;
}

.hex-content h6{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}



.diag-title,
.hex-title{
    margin-top:5px;
}
.diagnostic-section .container{
        padding:0px 0px;
    }

/* ===========================
   TABLET (768px - 991px)
=========================== */

@media (max-width: 991px){

    .diagnostic-section{
        padding:0px 0px;
    }


    .diag-title,
    .hex-title{
        font-size:24px;
        margin-top:0px;
    }


    .diag-desc,
    .hex-desc{
        font-size:15px;
    }


    /* Service Cards */

    .diag-services{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }


    .diag-service{
        padding:20px;
        min-height:100px;
        gap:15px;
    }


    .diag-service i{
        width:45px;
        height:45px;
        font-size:18px;
    }


    .diag-service span{
        font-size:16px;
    }



    /* Hexagon */

    .hex-wrapper{
        width:450px;
        height:450px;
        margin:50px auto;
    }


    .hex-card{
        width:120px;
        height:120px;
    }


    .hex-card i{
        font-size:22px;
    }


    .hex-card span,
    .hex-card h6{
        font-size:12px;
    }


    .center{
        left:165px;
        top:165px;
    }


    .top{
        left:165px;
        top:10px;
    }


    .top-right{
        right:35px;
        top:85px;
    }


    .bottom-right{
        right:35px;
        bottom:85px;
    }


    .bottom{
        left:165px;
        bottom:10px;
    }


    .bottom-left{
        left:35px;
        bottom:85px;
    }


    .top-left{
        left:35px;
        top:85px;
    }


}



/* ===========================
   MOBILE (Below 767px)
=========================== */


@media (max-width:767px){


    .diagnostic-section{
        padding:40px 15px;
    }


    .diag-title,
    .hex-title{
        font-size:21px;
        line-height:1.5;
        margin-top:0px;
    }


    .diag-desc,
    .hex-desc{
        font-size:14px;
        line-height:1.7;
    }



    /* Services */

    .diag-services{
        grid-template-columns:1fr;
        gap:15px;
    }


    .diag-service{

        padding:18px;
        min-height:90px;

    }


    .diag-service i{

        width:42px;
        height:42px;
        font-size:16px;

    }


    .diag-service span{

        font-size:14px;
        line-height: 20px;

    }

    .services-details-wrapper .services-details-right-items h3 {
        margin-top: 20px !important;
    }



    /* Hexagon Mobile */

    .hex-wrapper{

        width:300px;
        height:380px;
        margin:50px auto;

    }



    .hex-card{

        width:85px;
        height:85px;

    }


    .hex-card i{

        font-size:16px;

    }


    .hex-card span,
    .hex-card h6{

        font-size:9px;
        line-height:1.2;

    }



    .center{

        left:108px;
        top:145px;

    }


    .top{

        left:108px;
        top:5px;

    }


    .top-right{

        right:5px;
        top:70px;

    }


    .bottom-right{

        right:5px;
        bottom:70px;

    }


    .bottom{

        left:108px;
        bottom:5px;

    }


    .bottom-left{

        left:5px;
        bottom:70px;

    }


    .top-left{

        left:5px;
        top:70px;

    }



    /* Ideal For */

    .ideal-tech{

        display:flex;
        justify-content:center;
        gap:8px;

    }


    .ideal-tech strong{

        width:100%;
        text-align:center;

    }


    .ideal-tech span{

        font-size:12px;
        padding:8px 12px;

    }

}



.services-details-wrapper .services-details-right-items .list-box ul li {
  color: #454E59;
  font-size: 16px;
  font-weight: 500;
}



.collab-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px 0px 0;
}

.collab-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    font-weight: 500;
   
}

.list-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eaf7ff;
    color: #00984a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}


.collab-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 16px;
    font-weight: 500;
   
    line-height: 1.6;
}

.list-number {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 50%;
    background: #0098491e;
    color: #00984a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    margin-top: 2px;
}


/* Tablet Responsive */
@media (max-width: 991px) {

    .diagnostic-section {
        padding: 0px 0;
    }

    .diag-title {
        font-size: 26px;
        line-height: 1.4;
    }

    .diag-desc {
        font-size: 15px;
        line-height: 1.7;
    }


    .diag-services {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    .diag-service {
        padding: 18px;
        gap: 12px;
    }


    .diag-service i {
        font-size: 22px;
    }


    .diag-service span {
        font-size: 15px;
    }

}


/* Mobile Responsive */
@media (max-width: 576px) {

    .diagnostic-section {
        padding: 35px 0;
    }


    .diag-block {
        width: 100%;
    }


    .diag-title {
        font-size: 22px;
        line-height: 1.35;
        text-align: left;
    }


    .diag-desc {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 25px;
    }


    .diag-services {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .diag-service {
        padding: 15px;
        display: flex;
        align-items: center;
        border-radius: 12px;
    }


    .diag-service i {
        font-size: 20px;
        min-width: 35px;
    }


    .diag-service span {
        font-size: 14px;
        line-height: 1.5;
    }

}