html {
    scroll-behavior: smooth;
}
/* Styling Rules and Variables Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #131111;
    overflow-x: hidden;
}

/* Header & Navigation Elements */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    background-color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 10;
    min-height: 120px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon {
    width: 160px !important;
    height: 160px !important;
}

.navbar-logo-img {
    width: 180px;
    height: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0e0d0d;
    letter-spacing: 1px;
    line-height: 1.1;
}

.brand-sub {
    font-size: 0.55rem;
    font-weight: 600;
    color: #044056;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-item {
    text-decoration: none;
    color: #111010c6;
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 4px;
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: #044c64;
}

/* Underline marking the current active page matching the screenshot */
.nav-item.active {
    color: #006687;
    border-bottom: 2px solid #006687;
}

/* Fullscreen Immersive Hero Section */
.hero-section {
    position: relative;
    height: calc(100vh - 75px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Clean fallback building background placeholder simulation using medical color schemes */
    background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
}

/* Deep blue/grey overlay layer filtering the background picture tint */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(115, 131, 140, 0.755), rgba(7, 7, 7, 0.8));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rounded Core Category Badge */
.category-badge {
    background-color: rgba(250, 251, 252, 0.85);
    color: #0f0d0d;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    display: inline-block;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 300;
    max-width: 720px;
}

/* Call To Action Interactivity Formats */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filled {
    background-color: #e0e6e8;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filled:hover {
    background-color: #d9e2e4;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: #ffffff;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.btn-outline:hover {
    background-color: #ffffff;
    color: #111111;
    transform: translateY(-2px);
}

.arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-filled:hover .arrow {
    transform: translateX(4px);
}

/* Fixed Center Scroll Prompt Layout */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Responsive Structural Optimizations */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 5%;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-description {
        font-size: 1rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    .btn {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   ABOUT US SECTION STYLING (MATCHING SCREENSHOT)
   ========================================== */

.about-section {
    padding: 100px 10%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    align-items: center;
}

/* Left Typography Styling Column */
.section-tag {
    color: #075c6f;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
}

.about-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.25;
    margin-bottom: 30px;
    max-width: 500px;
}

.about-paragraph {
    font-size: 1.05rem;
    color: #333333;
    line-height: 1.65;
    margin-bottom: 24px;
    font-weight: 400;
}

.discover-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #085e7d;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 10px;
    transition: color 0.2s ease;
}

.discover-link:hover {
    color: #085e7d;
}

.link-arrow {
    transition: transform 0.2s ease;
}

.discover-link:hover .link-arrow {
    transform: translateX(5px);
}

/* Right Infographic Card Component */
.about-visual-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.infographic-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 340px;
    background: radial-gradient(circle at center, #ffffff 30%, #e6f4fa 100%);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

/* Abstract background styling representing the mapped nodes structure */
.map-bg-placeholder {
    width: 180px;
    height: 180px;
    border: 1px dashed rgba(26, 98, 150, 0.25);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-shield-bubble {
    width: 70px;
    height: 70px;
    background-color: #0b6d77;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(26, 98, 150, 0.3);
}

.center-vector {
    width: 35px;
    height: 35px;
    filter: brightness(0) invert(1);
}

/* absolute positions tracking circular floating infographic labels */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Force control over the logo image dimensions */
.navbar-logo-img {
    height: 80px !important;  /* Change this number directly to resize your logo */
    width: auto !important;   /* Prevents distortion stretching */
    object-fit: contain;
    display: inline-block;
}

.node-icon {
    width: 36px;
    height: 36px;
    background-color:#006687
    border: 1px solid rgba(17, 98, 152, 0.947);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Absolute orientation anchors matching image placement layout mapping */
.node-top { top: 20px; left: 50%; transform: translateX(-50%); }
.node-right { right: 25px; top: 40%; }
.node-bottom-right { right: 60px; bottom: 20px; }
.node-bottom-left { left: 60px; bottom: 20px; }
.node-left { left: 15px; top: 40%; }

/* Mobile Adaptability Viewport Rules */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .about-title {
        margin: 0 auto 20px auto;
    }
    .about-visual-container {
        width: 100%;
    }
    .infographic-card {
        max-width: 100%;
        height: 380px;
    }
}
/* ==========================================
   OUR DIVISIONS / TWO PILLARS SECTION STYLING
   ========================================== */

.divisions-section {
    padding: 90px 10%;
    background-color: #f4f7f9; /* Light grey block layer styling matching screenshot */
    width: 100%;
}

.divisions-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.divisions-header {
    text-align: center;
    margin-bottom: 55px;
}

.divisions-header .sub-tag {
    color: #0f1211;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.divisions-header .main-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.5px;
}

/* Flex layout mapping to maintain clean layout distributions */


.pillars-grid {
    display: flex;
    flex-direction: row;       /* Forces cards to sit side-by-side horizontally */
    justify-content: center;
    align-items: center;      /* Keeps both card heights perfectly matched */
    gap: 35px;                 /* Layout separation gap */
}

.pillar-card {
    background-color: #ffffff;
    border-radius: 16px;
    flex: 1;                   /* Spreads both cards out 50/50 evenly */
    max-width: 540px;          /* Restricts max width limits */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;    /* Vertically aligns text contents inside card */
}

.pillar-card:hover {
    transform: black;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
/* Image blocks with a gentle gradient overlay simulating image loading states */
.card-image-box {
    position: relative; /* Keeps the absolute absolute-positioned pills inside the box */
    width: 100%;
    height: 250px;       /* Set a uniform height for both logo sections */
    padding: 20px;       /* Gives breathing room so the logos don't hit the edges */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Ensures a clean white background behind the logos */
    overflow: hidden;
}
.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Shrinks the logo to fit entirely inside the padding bounds */
    object-position: center; /* Keeps the logo dead-center */
}

.image-one {
    background-image: lin.pillars-grid {
    display: flex;
    flex-direction: row;       /* Forces them to stay side-by-side in a row */
    justify-content: center;
    align-items: stretch;      /* Makes sure both cards are always the exact same height */
    gap: 35px;                 /* Matches your original 35px spacing gap */
}

.pillar-card {
    background-color: #ffffff;
    border-radius: 16px;
    flex: 1;                   /* Tells both cards to share the screen width equally 50/50 */
    max-width: 300px;          /* Preserves your original upper sizing cap limit */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;    /* Keeps internal elements inside the card organized */
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
ear-gradient(to bottom, rgba(230,240,245,0.4), rgba(130,145,155,0.7)),
                      url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?auto=format&fit=crop&w=600&q=80');
}

.image-two {
    background-image: linear-gradient(to bottom, rgba(230,245,235,0.4), rgba(125,145,135,0.7)),
                      url('https://images.unsplash.com/photo-1579152183423-aa1541570ff1?auto=format&fit=crop&w=600&q=80');
}

/* Float overlay tag badge items wrapper */
.image-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.pill-blue { background-color: #0a627f; }
.pill-green { background-color: #044c51; }

.pill-icon {
    font-size: 0.9rem;
}

/* Description Details Configuration layout */
.card-body-content {
    padding: 35px 30px;
}

.card-body-content h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
}

.card-body-content p {
    font-size: 0.98rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 75px; /* Ensures layout symmetry even if descriptions vary slightly */
}

.pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0b627d;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    transition: color 0.2s ease;
}

.pillar-link:hover {
    color: #095c72;
}

.arrow-symbol {
    transition: transform 0.2s ease;
}

.pillar-link:hover .arrow-symbol {
    transform: translateX(4px);
}

/* Responsive Viewports Adjustments */
@media (max-width: 768px) {
    .divisions-section {
        padding: 60px 6%;
    }
    .divisions-header .main-heading {
        font-size: 2rem;
    }
    .pillar-card {
        width: 100%;
    }
    .card-body-content p {
        min-height: auto;
    }
}
/* ==========================================
   TESTIMONIALS SLIDER SECTION STYLING
   ========================================== */

.testimonials-section {
    padding: 90px 8%;
    background-color: #ffffff;
    width: 100%;
}

.testimonials-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-header .sub-tag {
    color: #0f7bb6;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 12px;
}

.testimonials-header .main-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
}

.testimonials-header .highlight-blue {
    color: #0d6c8f;
}

/* Slider Track Infrastructure Layout */
.slider-outer-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.slider-viewport {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

/* Card Geometry Details */
.testimonial-card {
    background-color: #ffffff;
    border-radius: 20px;
    min-width: calc(33.333% - 20px); /* Displays 3 cards cleanly on desktop */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.client-image {
    height: 180px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-size: cover;
    background-position: center;
}

/* Injecting images using matching medical environment graphics */
.img-one { background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=400&q=80'); }
.img-two { background-image: url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?auto=format&fit=crop&w=400&q=80'); }
.img-three { background-image: url('https://images.unsplash.com/photo-1579152183423-aa1541570ff1?auto=format&fit=crop&w=400&q=80'); }
.img-four { background-image: url('https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=400&q=80'); }

/* Circle Initials Badges Overlapping the Images */
.initial-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 158px; /* Perfectly centers badge over the image border seam line */
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #ffffff;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.badge-purple { background-color: #8e44ad; }
.badge-blue { background-color: #1a6296; }
.badge-green { background-color: #c4ccc7; }
.badge-orange { background-color: #e67e22; }

.card-body {
    padding: 40px 25px 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.quote {
    font-size: 0.95rem;
    color: #555555;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 70px;
}

.client-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px;
}

.client-role {
    font-size: 0.82rem;
    color: #888888;
    font-weight: 500;
}

/* Circular UI Navigation Controls */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #0b667f;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.slider-arrow:hover {
    background-color: #0a6394;
    color: #ffffff;
}

.arrow-left { left: 0; padding-right: 3px; }
.arrow-right { right: 0; padding-left: 3px; }

/* Responsive Adjustments for Sliders */
@media (max-width: 992px) {
    .testimonial-card {
        min-width: calc(50% - 15px); /* Shows 2 cards on tablet layouts */
    }
}

@media (max-width: 680px) {
    .testimonial-card {
        min-width: 100%; /* Shows 1 card on mobile devices */
    }
    .slider-outer-container {
        padding: 0 10px;
    }
    .arrow-left { left: -5px; }
    .arrow-right { right: -5px; }
}
/* ==========================================
   CALL TO ACTION BANNER & FOOTER LAYOUT STYLING
   ========================================== */

/* Blue CTA Area Layout */
.cta-banner {
    background-color: #06699b; /* Vivid royal blue matching screenshot */
    padding: 70px 10%;
    text-align: center;
    width: 100%;
}

.cta-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    color: #ffffff;
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.cta-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.btn-cta-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    color: #111111;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-cta-contact:hover {
    background-color: #f4f7f9;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.cta-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-cta-contact:hover .cta-arrow {
    transform: translateX(4px);
}

/* Deep Navy Footer Area Layout */
.main-footer {
    background-color: #05343f; /* Deep matte navy background setup */
    color: #ffffff;
    padding: 60px 10% 30px 10%;
    width: 100%;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

/* Brand Column Details */
.footer-logo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
   
}

.f-logo-icon {
    width: 32px;
    height: 32px;
    
}

.f-brand-text {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.f-brand-desc {
    color: #a3b8cc;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 340px;
}

/* Title Configurations inside footer nodes */
.column-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0c6490; /* Light blue structural title accent */
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.footer-list {
    list-style: none;
}

.footer-list li {
    margin-bottom: 12px;
}

.footer-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-list a:hover {
    color: #065a71;
}

/* Social Icon Bubble Containers Wrapper */
.social-icon-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.social-bubble {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.social-bubble:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.social-svg {
    width: 16px;
    height: 16px;
}

.footer-email {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.footer-email:hover {
    opacity: 0.8;
}

/* Separator Bottom Layout Line Component */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    font-size: 0.88rem;
    color: #a3b8cc;
}

.footer-legal-links {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.2);
}

.footer-legal-links a {
    color: #0f719e;
    text-decoration: none;
    margin: 0 4px;
    transition: underline 0.2s ease;
}

.footer-legal-links a:hover {
    text-decoration: underline;
}

/* Responsive Adaptive Viewports Queries */
@media (max-width: 850px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }
    .cta-title {
        font-size: 1.8rem;
    }
}
/* ==========================================
   OUR ORGANIZATION BLUE HEADER BANNER STYLING
   ========================================== */

.org-header-banner {
    position: relative;
    background-color: #0c618c; /* Soft ocean blue tone matching your screenshot */
    padding: 80px 10%;
    text-align: center;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.org-banner-content {
    position: relative;
    z-index: 3;
    max-width: 850px;
    margin: 0 auto;
}

.org-mini-tag {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}

.org-main-title {
    color: #ffffff;
    font-size: 3.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.org-lead-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 725px;
    margin: 0 auto;
}

/* Subtle corner overlay background circles from the screenshot */
.decorative-circle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 1;
}

.circle-bottom-left {
    width: 260px;
    height: 260px;
    bottom: -130px;
    left: -60px;
}

.circle-top-right {
    width: 320px;
    height: 320px;
    top: -100px;
    right: -50px;
}

/* Responsive Scaling adjustments for smaller devices */
@media (max-width: 768px) {
    .org-header-banner {
        padding: 60px 6%;
    }
    .org-main-title {
        font-size: 2.4rem;
    }
    .org-lead-text {
        font-size: 0.98rem;
    }
}
/* ==========================================
   HEALTHYSTAN INNER-PAGE SUBSECTION STYLING
   ========================================== */

.healthystan-detail-section {
    padding: 60px 10% 100px 10%;
    background-color: #0b0909;
    width: 100%;
}

.hs-section-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Alignment with the Thick Left Blue Bar Accent */
.hs-section-header {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
}

.blue-indicator-bar {
    width: 4px;
    background-color: #0d688f;
    border-radius: 2px;
}

.header-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hs-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #99D5A4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hs-main-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #FF8A00;
    line-height: 1.1;
    margin-top: 2px;
}

.hs-section-subtitle {
    font-size: 1.1rem;
    color: #dbcf88;
    line-height: 1.5;
    margin-bottom: 45px;
    max-width: 750px;
}

/* Three Grid Structure Column Mapping */
.hs-initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.hs-card {
    background: #141111;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.hs-card:hover {
    transform: translateY(-4px);
}

.hs-card-img-box {
    height: 210px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Using distinct workplace graphics to populate matching image placeholders */
.hs-img-media {
    background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=500&q=80');
}

.hs-img-house {
    background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=500&q=80');
}

.hs-img-unplugged {
    background-image: url('https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=500&q=80');
}

/* Dark Floating Pill Tag for Upcoming Content */
.hs-badge-coming-soon {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(17, 17, 17, 0.85);
    color: #ded28f;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
}

.hs-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hs-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color:  #FF8A00;
    margin-bottom: 12px;
}

.hs-card-body p {
    font-size: 0.92rem;
    color: #dbcf88;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Keeps alignment clean and uniform */
}

/* Call To Action Custom Buttons Layout */
.hs-btn {
    width: fit-content;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-instagram, .btn-visit {
    background-color: #0c5179;
    color: #ffffff;
}

.btn-instagram:hover, .btn-visit:hover {
    background-color: #0a4e75;
}

.btn-disabled {
    background-color: #e1e8ed;
    color: #8899a6;
    cursor: not-allowed;
}

.hs-btn-icon {
    font-size: 1rem;
}

/* Responsive Grid Adaptation Rules */
@media (max-width: 992px) {
    .hs-initiatives-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .hs-card-body p {
        flex-grow: auto;
    }
}
/* ==========================================
   ONCOLOGY INNER-PAGE SUBSECTION STYLING
   ========================================== */

.oncology-detail-section {
    padding: 20px 10% 100px 10%; /* Reduced top padding to balance distance from HealthyStan */
    background-color: #ffffff;
    width: 100%;
}

.onc-section-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Alignment with Left Solid Black Indicator Bar */
.onc-section-header {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
}

.black-indicator-bar {
    width: 4px;
    background-color: #111111; /* Solid dark bar accent matching screenshot */
    border-radius: 2px;
}

.onc-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555555;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.onc-main-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.1;
    margin-top: 2px;
}

.onc-section-subtitle {
    font-size: 1.1rem;
    color: #444444;
    line-height: 1.5;
    margin-bottom: 45px;
    max-width: 750px;
}

/* 3-Column Grid Distribution */
.onc-initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.onc-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.onc-card:hover {
    transform: translateY(-4px);
}

.onc-card-img-box {
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #f8fafc; /* Fallback crisp background color */
    border-radius: 50%;
}

/* Graphic Mapping from Screenshot */
.onc-img-care {
    background-image: url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?auto=format&fit=crop&w=500&q=80');
}

.onc-img-sure {
    background-image: url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=500&q=80');
}

.onc-img-sethu {
    background-size: contain;
    background-repeat: no-repeat;
    /* Clean representation layout for the vector nodes graphic */
    background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=500&q=80');
}

.onc-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.onc-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
}

.onc-card-body p {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Call to Action Pill Buttons */
.onc-btn {
    width: fit-content;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0a4b73;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.onc-btn:hover {
    background-color: #024d78;
}

.onc-btn-icon {
    font-size: 1rem;
}

/* Empty structural placeholder height to make the third card line up with cards 1 and 2 */
.onc-placeholder-space {
    height: 38px;
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
    .onc-initiatives-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .onc-card-body p {
        flex-grow: auto;
    }
    .onc-placeholder-space {
        display: none;
    }
}
/* ==========================================
   CONTACT US PAGE SPECIFIC STYLING
   ========================================== */

/* Blue Hero Banner Frame Layout */
.contact-page-hero {
    background-color: #054970; /* Light corporate blue matching screenshot */
    padding: 80px 20px;
    text-align: center;
    width: 100%;
}

.contact-hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.contact-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.contact-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

/* Contact Details Page Grid Layout */
.contact-content-section {
    padding: 80px 8%;
    background-color: #f8fafc;
}

.contact-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
}

.contact-form-card, 
.contact-details-card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.contact-form-card h2, 
.contact-details-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 25px;
}

/* Form Styling Rules */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #444444;
    margin-bottom: 8px;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    color: #111111;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: #0a527c;
}

.contact-submit-btn {
    background-color: #094c72;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-submit-btn:hover {
    background-color: #085582;
}

/* Details Panel Information Blocks */
.contact-details-card p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.info-block {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.3rem;
    background-color: #eef7fc;
    color: #0e4c70;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.info-block h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px;
}

.info-block p, 
.info-block a {
    font-size: 0.92rem;
    color: #555555;
    text-decoration: none;
}

.info-block a:hover {
    color: #0b5a87;
}

/* Portable Media Queries Breakpoints */
@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .contact-hero-title {
        font-size: 2.2rem;
    }
}
/* ==========================================
   EXPLICIT NAVBAR LOGO IMAGE SCROLL SCALING
   ========================================== */

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Smooth professional distance between logo emblem and text */
}

.navbar-logo-img {
    /* Adjust these two numbers below to make your logo exactly the size you want! */
    height: 42px;         
    width: auto;          
    
    object-fit: contain;  /* Safeguards image from stretching distortion */
    display: block;       /* Removes baseline inline layout spacing bugs */
}
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Existing CSS */

/* Contact Form Styles */
.contact-form-card {
   ...
}

.contact-submit-btn {
   ...
}

/* -------------------------------- */
/* WhatsApp Button Styles */
/* -------------------------------- */

html {
    scroll-behavior: smooth;
}
/* Styling Rules and Variables Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #131111;
    overflow-x: hidden;
}

/* Header & Navigation Elements */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    background-color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 10;
    min-height: 120px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon {
    width: 160px !important;
    height: 160px !important;
}

.navbar-logo-img {
    width: 180px;
    height: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0e0d0d;
    letter-spacing: 1px;
    line-height: 1.1;
}

.brand-sub {
    font-size: 0.55rem;
    font-weight: 600;
    color: #044056;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-item {
    text-decoration: none;
    color: #111010c6;
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 4px;
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: #044c64;
}

/* Underline marking the current active page matching the screenshot */
.nav-item.active {
    color: #006687;
    border-bottom: 2px solid #006687;
}

/* Fullscreen Immersive Hero Section */
.hero-section {
    position: relative;
    height: calc(100vh - 75px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Clean fallback building background placeholder simulation using medical color schemes */
    background: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
}

/* Deep blue/grey overlay layer filtering the background picture tint */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(115, 131, 140, 0.755), rgba(7, 7, 7, 0.8));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rounded Core Category Badge */
.category-badge {
    background-color: rgba(250, 251, 252, 0.85);
    color: #0f0d0d;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    display: inline-block;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 300;
    max-width: 720px;
}

/* Call To Action Interactivity Formats */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filled {
    background-color: #e0e6e8;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filled:hover {
    background-color: #d9e2e4;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: #ffffff;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.btn-outline:hover {
    background-color: #ffffff;
    color: #111111;
    transform: translateY(-2px);
}

.arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-filled:hover .arrow {
    transform: translateX(4px);
}

/* Fixed Center Scroll Prompt Layout */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Responsive Structural Optimizations */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 5%;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-description {
        font-size: 1rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    .btn {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   ABOUT US SECTION STYLING (MATCHING SCREENSHOT)
   ========================================== */

.about-section {
    padding: 100px 10%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    align-items: center;
}

/* Left Typography Styling Column */
.section-tag {
    color: #075c6f;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
}

.about-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.25;
    margin-bottom: 30px;
    max-width: 500px;
}

.about-paragraph {
    font-size: 1.05rem;
    color: #333333;
    line-height: 1.65;
    margin-bottom: 24px;
    font-weight: 400;
}

.discover-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #085e7d;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 10px;
    transition: color 0.2s ease;
}

.discover-link:hover {
    color: #085e7d;
}

.link-arrow {
    transition: transform 0.2s ease;
}

.discover-link:hover .link-arrow {
    transform: translateX(5px);
}

/* Right Infographic Card Component */
.about-visual-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.infographic-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 340px;
    background: radial-gradient(circle at center, #ffffff 30%, #e6f4fa 100%);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

/* Abstract background styling representing the mapped nodes structure */
.map-bg-placeholder {
    width: 180px;
    height: 180px;
    border: 1px dashed rgba(26, 98, 150, 0.25);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-shield-bubble {
    width: 70px;
    height: 70px;
    background-color: #0b6d77;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(26, 98, 150, 0.3);
}

.center-vector {
    width: 35px;
    height: 35px;
    filter: brightness(0) invert(1);
}

/* absolute positions tracking circular floating infographic labels */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Force control over the logo image dimensions */
.navbar-logo-img {
    height: 80px !important;  /* Change this number directly to resize your logo */
    width: auto !important;   /* Prevents distortion stretching */
    object-fit: contain;
    display: inline-block;
}

.node-icon {
    width: 36px;
    height: 36px;
    background-color:#006687
    border: 1px solid rgba(17, 98, 152, 0.947);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Absolute orientation anchors matching image placement layout mapping */
.node-top { top: 20px; left: 50%; transform: translateX(-50%); }
.node-right { right: 25px; top: 40%; }
.node-bottom-right { right: 60px; bottom: 20px; }
.node-bottom-left { left: 60px; bottom: 20px; }
.node-left { left: 15px; top: 40%; }

/* Mobile Adaptability Viewport Rules */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .about-title {
        margin: 0 auto 20px auto;
    }
    .about-visual-container {
        width: 100%;
    }
    .infographic-card {
        max-width: 100%;
        height: 380px;
    }
}
/* ==========================================
   OUR DIVISIONS / TWO PILLARS SECTION STYLING
   ========================================== */

.divisions-section {
    padding: 90px 10%;
    background-color: #f4f7f9; /* Light grey block layer styling matching screenshot */
    width: 100%;
}

.divisions-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.divisions-header {
    text-align: center;
    margin-bottom: 55px;
}

.divisions-header .sub-tag {
    color: #0f1211;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.divisions-header .main-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.5px;
}

/* Flex layout mapping to maintain clean layout distributions */


.pillars-grid {
    display: flex;
    flex-direction: row;       /* Forces cards to sit side-by-side horizontally */
    justify-content: center;
    align-items: center;      /* Keeps both card heights perfectly matched */
    gap: 35px;                 /* Layout separation gap */
}

.pillar-card {
    background-color: #ffffff;
    border-radius: 16px;
    flex: 1;                   /* Spreads both cards out 50/50 evenly */
    max-width: 540px;          /* Restricts max width limits */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;    /* Vertically aligns text contents inside card */
}

.pillar-card:hover {
    transform: black;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
/* Image blocks with a gentle gradient overlay simulating image loading states */
.card-image-box {
    position: relative; /* Keeps the absolute absolute-positioned pills inside the box */
    width: 100%;
    height: 250px;       /* Set a uniform height for both logo sections */
    padding: 20px;       /* Gives breathing room so the logos don't hit the edges */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Ensures a clean white background behind the logos */
    overflow: hidden;
}
.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Shrinks the logo to fit entirely inside the padding bounds */
    object-position: center; /* Keeps the logo dead-center */
}

.image-one {
    background-image: lin.pillars-grid {
    display: flex;
    flex-direction: row;       /* Forces them to stay side-by-side in a row */
    justify-content: center;
    align-items: stretch;      /* Makes sure both cards are always the exact same height */
    gap: 35px;                 /* Matches your original 35px spacing gap */
}

.pillar-card {
    background-color: #ffffff;
    border-radius: 16px;
    flex: 1;                   /* Tells both cards to share the screen width equally 50/50 */
    max-width: 300px;          /* Preserves your original upper sizing cap limit */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;    /* Keeps internal elements inside the card organized */
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
ear-gradient(to bottom, rgba(230,240,245,0.4), rgba(130,145,155,0.7)),
                      url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?auto=format&fit=crop&w=600&q=80');
}

.image-two {
    background-image: linear-gradient(to bottom, rgba(230,245,235,0.4), rgba(125,145,135,0.7)),
                      url('https://images.unsplash.com/photo-1579152183423-aa1541570ff1?auto=format&fit=crop&w=600&q=80');
}

/* Float overlay tag badge items wrapper */
.image-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.pill-blue { background-color: #0a627f; }
.pill-green { background-color: #044c51; }

.pill-icon {
    font-size: 0.9rem;
}

/* Description Details Configuration layout */
.card-body-content {
    padding: 35px 30px;
}

.card-body-content h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
}

.card-body-content p {
    font-size: 0.98rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 75px; /* Ensures layout symmetry even if descriptions vary slightly */
}

.pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0b627d;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    transition: color 0.2s ease;
}

.pillar-link:hover {
    color: #095c72;
}

.arrow-symbol {
    transition: transform 0.2s ease;
}

.pillar-link:hover .arrow-symbol {
    transform: translateX(4px);
}

/* Responsive Viewports Adjustments */
@media (max-width: 768px) {
    .divisions-section {
        padding: 60px 6%;
    }
    .divisions-header .main-heading {
        font-size: 2rem;
    }
    .pillar-card {
        width: 100%;
    }
    .card-body-content p {
        min-height: auto;
    }
}
/* ==========================================
   TESTIMONIALS SLIDER SECTION STYLING
   ========================================== */

.testimonials-section {
    padding: 90px 8%;
    background-color: #ffffff;
    width: 100%;
}

.testimonials-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-header .sub-tag {
    color: #0f7bb6;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 12px;
}

.testimonials-header .main-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
}

.testimonials-header .highlight-blue {
    color: #0d6c8f;
}

/* Slider Track Infrastructure Layout */
.slider-outer-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.slider-viewport {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

/* Card Geometry Details */
.testimonial-card {
    background-color: #ffffff;
    border-radius: 20px;
    min-width: calc(33.333% - 20px); /* Displays 3 cards cleanly on desktop */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.client-image {
    height: 180px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-size: cover;
    background-position: center;
}

/* Injecting images using matching medical environment graphics */
.img-one { background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=400&q=80'); }
.img-two { background-image: url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?auto=format&fit=crop&w=400&q=80'); }
.img-three { background-image: url('https://images.unsplash.com/photo-1579152183423-aa1541570ff1?auto=format&fit=crop&w=400&q=80'); }
.img-four { background-image: url('https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=400&q=80'); }

/* Circle Initials Badges Overlapping the Images */
.initial-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 158px; /* Perfectly centers badge over the image border seam line */
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #ffffff;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.badge-purple { background-color: #8e44ad; }
.badge-blue { background-color: #1a6296; }
.badge-green { background-color: #c4ccc7; }
.badge-orange { background-color: #e67e22; }

.card-body {
    padding: 40px 25px 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.quote {
    font-size: 0.95rem;
    color: #555555;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 70px;
}

.client-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px;
}

.client-role {
    font-size: 0.82rem;
    color: #888888;
    font-weight: 500;
}

/* Circular UI Navigation Controls */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #0b667f;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.slider-arrow:hover {
    background-color: #0a6394;
    color: #ffffff;
}

.arrow-left { left: 0; padding-right: 3px; }
.arrow-right { right: 0; padding-left: 3px; }

/* Responsive Adjustments for Sliders */
@media (max-width: 992px) {
    .testimonial-card {
        min-width: calc(50% - 15px); /* Shows 2 cards on tablet layouts */
    }
}

@media (max-width: 680px) {
    .testimonial-card {
        min-width: 100%; /* Shows 1 card on mobile devices */
    }
    .slider-outer-container {
        padding: 0 10px;
    }
    .arrow-left { left: -5px; }
    .arrow-right { right: -5px; }
}
/* ==========================================
   CALL TO ACTION BANNER & FOOTER LAYOUT STYLING
   ========================================== */

/* Blue CTA Area Layout */
.cta-banner {
    background-color: #06699b; /* Vivid royal blue matching screenshot */
    padding: 70px 10%;
    text-align: center;
    width: 100%;
}

.cta-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    color: #ffffff;
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.cta-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.btn-cta-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    color: #111111;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 36px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-cta-contact:hover {
    background-color: #f4f7f9;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.cta-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-cta-contact:hover .cta-arrow {
    transform: translateX(4px);
}

/* Deep Navy Footer Area Layout */
.main-footer {
    background-color: #05343f; /* Deep matte navy background setup */
    color: #ffffff;
    padding: 60px 10% 30px 10%;
    width: 100%;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

/* Brand Column Details */
.footer-logo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
   
}

.f-logo-icon {
    width: 32px;
    height: 32px;
    
}

.f-brand-text {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.f-brand-desc {
    color: #a3b8cc;
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 340px;
}

/* Title Configurations inside footer nodes */
.column-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0c6490; /* Light blue structural title accent */
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.footer-list {
    list-style: none;
}

.footer-list li {
    margin-bottom: 12px;
}

.footer-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-list a:hover {
    color: #065a71;
}

/* Social Icon Bubble Containers Wrapper */
.social-icon-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.social-bubble {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.social-bubble:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.social-svg {
    width: 16px;
    height: 16px;
}

.footer-email {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.footer-email:hover {
    opacity: 0.8;
}

/* Separator Bottom Layout Line Component */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    font-size: 0.88rem;
    color: #a3b8cc;
}

.footer-legal-links {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.2);
}

.footer-legal-links a {
    color: #0f719e;
    text-decoration: none;
    margin: 0 4px;
    transition: underline 0.2s ease;
}

.footer-legal-links a:hover {
    text-decoration: underline;
}

/* Responsive Adaptive Viewports Queries */
@media (max-width: 850px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }
    .cta-title {
        font-size: 1.8rem;
    }
}
/* ==========================================
   OUR ORGANIZATION BLUE HEADER BANNER STYLING
   ========================================== */

.org-header-banner {
    position: relative;
    background-color: #0c618c; /* Soft ocean blue tone matching your screenshot */
    padding: 80px 10%;
    text-align: center;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.org-banner-content {
    position: relative;
    z-index: 3;
    max-width: 850px;
    margin: 0 auto;
}

.org-mini-tag {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
}

.org-main-title {
    color: #ffffff;
    font-size: 3.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.org-lead-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 725px;
    margin: 0 auto;
}

/* Subtle corner overlay background circles from the screenshot */
.decorative-circle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 1;
}

.circle-bottom-left {
    width: 260px;
    height: 260px;
    bottom: -130px;
    left: -60px;
}

.circle-top-right {
    width: 320px;
    height: 320px;
    top: -100px;
    right: -50px;
}

/* Responsive Scaling adjustments for smaller devices */
@media (max-width: 768px) {
    .org-header-banner {
        padding: 60px 6%;
    }
    .org-main-title {
        font-size: 2.4rem;
    }
    .org-lead-text {
        font-size: 0.98rem;
    }
}
/* ==========================================
   HEALTHYSTAN INNER-PAGE SUBSECTION STYLING
   ========================================== */

.healthystan-detail-section {
    padding: 60px 10% 100px 10%;
    background-color: #0b0909;
    width: 100%;
}

.hs-section-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Alignment with the Thick Left Blue Bar Accent */
.hs-section-header {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
}

.blue-indicator-bar {
    width: 4px;
    background-color: #0d688f;
    border-radius: 2px;
}

.header-text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hs-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #99D5A4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hs-main-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #FF8A00;
    line-height: 1.1;
    margin-top: 2px;
}

.hs-section-subtitle {
    font-size: 1.1rem;
    color: #dbcf88;
    line-height: 1.5;
    margin-bottom: 45px;
    max-width: 750px;
}

/* Three Grid Structure Column Mapping */
.hs-initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.hs-card {
    background: #141111;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.hs-card:hover {
    transform: translateY(-4px);
}

.hs-card-img-box {
    height: 210px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Using distinct workplace graphics to populate matching image placeholders */
.hs-img-media {
    background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=500&q=80');
}

.hs-img-house {
    background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=500&q=80');
}

.hs-img-unplugged {
    background-image: url('https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=500&q=80');
}

/* Dark Floating Pill Tag for Upcoming Content */
.hs-badge-coming-soon {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(17, 17, 17, 0.85);
    color: #ded28f;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
}

.hs-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hs-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color:  #FF8A00;
    margin-bottom: 12px;
}

.hs-card-body p {
    font-size: 0.92rem;
    color: #dbcf88;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Keeps alignment clean and uniform */
}

/* Call To Action Custom Buttons Layout */
.hs-btn {
    width: fit-content;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-instagram, .btn-visit {
    background-color: #0c5179;
    color: #ffffff;
}

.btn-instagram:hover, .btn-visit:hover {
    background-color: #0a4e75;
}

.btn-disabled {
    background-color: #e1e8ed;
    color: #8899a6;
    cursor: not-allowed;
}

.hs-btn-icon {
    font-size: 1rem;
}

/* Responsive Grid Adaptation Rules */
@media (max-width: 992px) {
    .hs-initiatives-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .hs-card-body p {
        flex-grow: auto;
    }
}
/* ==========================================
   ONCOLOGY INNER-PAGE SUBSECTION STYLING
   ========================================== */

.oncology-detail-section {
    padding: 20px 10% 100px 10%; /* Reduced top padding to balance distance from HealthyStan */
    background-color: #ffffff;
    width: 100%;
}

.onc-section-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Alignment with Left Solid Black Indicator Bar */
.onc-section-header {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
}

.black-indicator-bar {
    width: 4px;
    background-color: #111111; /* Solid dark bar accent matching screenshot */
    border-radius: 2px;
}

.onc-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555555;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.onc-main-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #111111;
    line-height: 1.1;
    margin-top: 2px;
}

.onc-section-subtitle {
    font-size: 1.1rem;
    color: #444444;
    line-height: 1.5;
    margin-bottom: 45px;
    max-width: 750px;
}

/* 3-Column Grid Distribution */
.onc-initiatives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.onc-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.onc-card:hover {
    transform: translateY(-4px);
}

.onc-card-img-box {
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #f8fafc; /* Fallback crisp background color */
    border-radius: 50%;
}

/* Graphic Mapping from Screenshot */
.onc-img-care {
    background-image: url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?auto=format&fit=crop&w=500&q=80');
}

.onc-img-sure {
    background-image: url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=500&q=80');
}

.onc-img-sethu {
    background-size: contain;
    background-repeat: no-repeat;
    /* Clean representation layout for the vector nodes graphic */
    background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=500&q=80');
}

.onc-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.onc-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
}

.onc-card-body p {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Call to Action Pill Buttons */
.onc-btn {
    width: fit-content;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0a4b73;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.onc-btn:hover {
    background-color: #024d78;
}

.onc-btn-icon {
    font-size: 1rem;
}

/* Empty structural placeholder height to make the third card line up with cards 1 and 2 */
.onc-placeholder-space {
    height: 38px;
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
    .onc-initiatives-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .onc-card-body p {
        flex-grow: auto;
    }
    .onc-placeholder-space {
        display: none;
    }
}
/* ==========================================
   CONTACT US PAGE SPECIFIC STYLING
   ========================================== */

/* Blue Hero Banner Frame Layout */
.contact-page-hero {
    background-color: #054970; /* Light corporate blue matching screenshot */
    padding: 80px 20px;
    text-align: center;
    width: 100%;
}

.contact-hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.contact-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.contact-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

/* Contact Details Page Grid Layout */
.contact-content-section {
    padding: 80px 8%;
    background-color: #f8fafc;
}

.contact-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
}

.contact-form-card, 
.contact-details-card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.contact-form-card h2, 
.contact-details-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 25px;
}

/* Form Styling Rules */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #444444;
    margin-bottom: 8px;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    color: #111111;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: #0a527c;
}

.contact-submit-btn {
    background-color: #094c72;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-submit-btn:hover {
    background-color: #085582;
}

/* Details Panel Information Blocks */
.contact-details-card p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.info-block {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.3rem;
    background-color: #eef7fc;
    color: #0e4c70;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.info-block h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 4px;
}

.info-block p, 
.info-block a {
    font-size: 0.92rem;
    color: #555555;
    text-decoration: none;
}

.info-block a:hover {
    color: #0b5a87;
}

/* Portable Media Queries Breakpoints */
@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .contact-hero-title {
        font-size: 2.2rem;
    }
}
/* ==========================================
   EXPLICIT NAVBAR LOGO IMAGE SCROLL SCALING
   ========================================== */

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Smooth professional distance between logo emblem and text */
}

.navbar-logo-img {
    /* Adjust these two numbers below to make your logo exactly the size you want! */
    height: 42px;         
    width: auto;          
    
    object-fit: contain;  /* Safeguards image from stretching distortion */
    display: block;       /* Removes baseline inline layout spacing bugs */
}
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Existing CSS */


/* Button Container */
.button-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Both buttons take equal width */
.contact-submit-btn,
.whatsapp-btn {
    flex: 1;
}

/* WhatsApp Button */
.whatsapp-btn {
    background: #25D366 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    background: #1EBE5D !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:active {
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
    }

    .contact-submit-btn,
    .whatsapp-btn {
        width: 100%;
    }
}