/* ===== INDEX PAGE CSS START ===== */

/* --- INDEX: CONFIGURATION & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-blue: #05559F;
    --dark-blue: #05559F;
    --primary-light: #00A6A6;
    --teal-accent: #00A6A6;
    --text-slate: #5a6b7c;
    --body-dark: #2d3748;
    --topbar-bg: #e9ecef;
    --bg-cream-fade: #fcf8f4;
    --font-body: 'Jost', sans-serif;
    /* Hover system tokens */
    --hover-lift: 0 -4px 20px rgba(5, 85, 159, 0.15);
    --hover-scale: scale(1.02);
    --hover-shadow-md: 0 12px 35px rgba(5, 85, 159, 0.12);
    --hover-shadow-lg: 0 20px 50px rgba(5, 85, 159, 0.18);
    --hover-blue-bg: rgba(0, 166, 166, 0.08);
    --hover-border-glow: rgba(0, 166, 166, 0.4);
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- INDEX: GLOBAL HOVER PRESETS --- */

/* Smooth everything transition */
a,
button,
.btn,
.card,
.nav-link,
.social-icon-link,
.feature-image-wrapper,
.process-capsule-card,
.care-segment-card,
.practice-glass-card,
.faq-custom-accordion .accordion-item,
.floating-stat-badge,
.learn-arrow-circle,
.consultation-icon-circle,
.btn-arrow-circle,
.explore-arrow-wrap,
.footer-calendar-circle,
.footer-pill-cta,
.capsule-num-circle,
.segment-icon-circle {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- INDEX: HERO SECTION (VIDEO WRAPPER) --- */
.hero-master-wrapper {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #1a202c;
}

.hero-content-container {
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(112, 120, 153, 0) 0%, rgba(186, 200, 255, 0.73) 100%);

    z-index: 1;
}

/* --- INDEX: HERO BLUE GLASSMORPHISM CARD --- */
.hero-blue-glass-card {
    background: #05559F85;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 50px 45px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Text styles inside the blue card */
.badge-decor-line-white {
    display: inline-block;
    width: 30px;
    height: 1.5px;
    background-color: rgba(255, 255, 255, 0.6);
}

.badge-tech-text-white {
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    font-size: 16px;
    font-weight: 500;
}

.hero-subtitle-white {
    font-family: var(--font-body);
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 18px;
    line-height: 1.4;
}

.hero-main-title-white {
    font-family: var(--font-body);
    color: #ffffff;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.hero-description-text-white {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 35px;
    font-weight: 300;
    max-width: 95%;
}

/* --- INDEX: HERO TEAL CTA BUTTON --- */
.btn-hero-consultation-teal {
    background-color: #00A6A6;
    color: #ffffff;
    border-radius: 30px;
    padding: 8px 8px 8px 24px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #00A6A6;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-consultation-teal:hover {
    background-color: #05559F;
    border-color: #05559F;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 166, 166, 0.4);
}

.consultation-icon-circle-teal {
    background-color: #ffffff;
    color: #00A6A6;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-hero-consultation-teal:hover .consultation-icon-circle-teal {
    color: #05559F;
    transform: rotate(-10deg) scale(1.05);
}

/* --- INDEX: HERO MOBILE RESPONSIVE --- */
@media (max-width: 991.98px) {
    .hero-blue-glass-card {
        padding: 40px 30px;
    }

    .hero-main-title-white {
        font-size: 36px;
    }

    .hero-subtitle-white {
        font-size: 20px;
    }
}

@media (max-width: 575.98px) {
    .hero-blue-glass-card {
        padding: 30px 20px;
    }

    .hero-main-title-white {
        font-size: 30px;
    }

    .hero-subtitle-white {
        font-size: 18px;
    }

    .hero-description-text-white {
        font-size: 14px;
    }
}

:root {
    --marquee-speed: 30s;
}

.marquee-wrapper {
    width: 100%;
    background: #EFF5FF;
    padding: 10px 0;
    position: relative;
    overflow: hidden;

}

.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, transparent 100%);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(90deg, transparent 0%, #ffffff 100%);
}

.marquee-header {
    text-align: center;
    position: relative;
    z-index: 1;
}

.marquee-header .marquee-label {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #00A6A6;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: inline-block;
    padding: 6px 20px;
    background: rgba(0, 166, 166, 0.08);
    border-radius: 20px;
    margin-bottom: 12px;
}



.marquee-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll var(--marquee-speed) linear infinite;
    gap: 0;
}

.marquee-track .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 60px;
    margin: 0 20px;
    padding: 0 15px;
    flex-shrink: 0;
    background: #F9FBFF !important;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.marquee-track .logo-item:hover {
    border-color: rgba(0, 166, 166, 0.2);
    box-shadow: 0 8px 25px rgba(0, 166, 166, 0.1);
    transform: translateY(-2px) scale(1.02);
    background: #ffffff;
}

.marquee-track .logo-item img {
    max-width: 120px;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.3s ease;

}

.marquee-track .logo-item:hover img {
    filter: grayscale(0%) opacity(1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .marquee-wrapper {
        padding: 40px 0 30px;
    }

    .marquee-track .logo-item {
        width: 140px;
        height: 56px;
        margin: 0 12px;
        padding: 0 10px;
    }

    .marquee-track .logo-item img {
        max-width: 90px;
        max-height: 28px;
    }

    .marquee-wrapper::before,
    .marquee-wrapper::after {
        width: 50px;
    }

    .marquee-header h3 {
        font-size: 18px;
    }
}

.logo {
    width: 40px;
}

.text-brand {
    color: #05559F !important;
}

svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Bottom C (Static) */
.c-logo {
    transform: none;
}

/* Middle Square */
.middle-square {
    transform-box: fill-box;
    transform-origin: center;
    animation: middlePulse 2s infinite ease-in-out;
}

/* Top Square - animation handled by GSAP */
.top-square {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes middlePulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(5, 85, 159, 0));
    }

    25% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 8px rgba(5, 85, 159, .45));
    }

    40% {
        transform: scale(.97);
    }

    55% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(1);
    }
}

.top-square {
    z-index: 10;
}

/* --- INDEX: HEADER / TOP BAR --- */
.custom-header-card {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* --- HEADER: FIXED NAV ON SCROLL --- */
.header-section-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.header-section-container .custom-header-card {
    overflow: visible !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state: top bar hidden with smooth slide-up, nav gets shadow */
.header-section-container.header-scrolled .header-top-bar {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    border: none !important;
    margin: 0 !important;
    visibility: hidden !important;
}

.header-section-container.header-scrolled .custom-header-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 0;
}

.header-top-bar {
    background-color: #F8FAFD;
    font-size: 16px;
    height: auto;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-bar-link {
    color: var(--dark-blue);
    text-decoration: none;
    font-size: 16px;
}

.top-bar-link:hover {
    color: var(--primary-blue);
    transform: translateY(-1px);
}

.follow-us-text {
    color: var(--dark-blue);
    font-weight: 500;
    font-size: 16px;
}

.social-icon-link {
    color: var(--dark-blue);
    font-size: 14px;
    text-decoration: none;
}

.social-icon-link:hover {
    color: var(--primary-light);
    transform: scale(1.2) translateY(-2px);
}

.main-navbar-layer {
    background-color: #ffffff;
    font-family: var(--font-body);
}

.navbar-nav .nav-link {
    font-size: 18px;
    color: var(--dark-blue);
    font-weight: 400;
    transition: color 0.2s ease;
    padding: 0.5rem 0;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-blue);
}

.navbar-nav .nav-link.active-nav {
    color: var(--dark-blue);
    font-weight: 700;
    position: relative;
}

.logo-text-brand {
    font-size: 22px;
    color: var(--dark-blue);
}

.logo-text-bold {
    font-weight: 600;
}

/* --- INDEX: HEADER CTA BUTTONS --- */
.btn-custom-signin-outline {
    font-size: 14px;
    color: #00A6A6;
    border: 1px solid #00A6A6;
    border-radius: 25px;
    padding: 6px 22px;
    background-color: transparent;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-custom-signin-outline:hover {
    background-color: #00A6A6;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 166, 166, 0.2);
}

.btn-custom-explore {
    font-size: 14px;
    color: #ffffff;
    background-color: var(--primary-light);
    border: none;
    border-radius: 25px;
    padding: 6px 6px 6px 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-custom-explore:hover {
    background-color: var(--dark-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(32, 94, 146, 0.3);
    gap: 14px;
}

.btn-arrow-circle {
    background-color: #ffffff;
    color: var(--primary-blue);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.btn-custom-explore:hover .btn-arrow-circle {
    background-color: var(--primary-blue);
    color: #ffffff;
    transform: rotate(90deg);
}

/* --- INDEX: DROPDOWN MENU --- */
.navbar-nav .dropdown {
    position: relative;
}

.navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: 0.175em;
    content: "";
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-bottom: 0;
    border-left: 0.35em solid transparent;
}

.navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 220px;
    padding: 0.5rem 0;
    margin-top: 0;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    animation: fadeInDown 0.3s ease-out;
    padding-top: 0.5rem;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-nav .dropdown {
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.navbar-nav .dropdown:hover>.dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-toggle::after {
    margin-top: 0.15rem;
}

.navbar-nav .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: var(--dark-blue);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 16px;
    transition: all 0.25s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: rgba(0, 166, 166, 0.08);
    color: var(--primary-blue);
    padding-left: 2rem;
}

.navbar-nav .dropdown-item.active {
    background-color: rgba(0, 166, 166, 0.12);
    color: var(--primary-blue);
    font-weight: 600;
}

/* --- INDEX: MOBILE NAVIGATION --- */
.navbar-toggler {
    border: none;
    padding: 0;
    font-size: 1.25rem;
    color: var(--dark-blue);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231b4b72' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.mobile-nav-dropdown {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-link {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--dark-blue);
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
    font-weight: 400;
}

.mobile-nav-link:hover {
    color: var(--primary-blue);
}

.mobile-nav-link.active-nav {
    font-weight: 700;
    color: var(--dark-blue);
}

/* --- INDEX: HERO CORE BODY --- */
.hero-content-container {
    flex: 1;
    display: flex;
    align-items: center;
}

.content-column-z {
    z-index: 5;
}

/* Italic Subtitle */
.hero-top-italic-sub {
    font-family: var(--font-heading);
    color: var(--primary-blue);
    line-height: 1.3;
}

/* Divider with technical text badge */
.badge-tech-text {
    color: var(--primary-blue);
    letter-spacing: 0.5px;
}

.badge-decor-line {
    display: inline-block;
    width: 45px;
    height: 1.5px;
    background-color: var(--primary-blue);
}

/* Core Title */
.hero-main-title {
    font-family: var(--font-heading);
    color: var(--primary-blue);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

/* Description Text */
.hero-description-text {
    line-height: 1.65;
    color: var(--body-dark);
    max-width: 700px;
    margin-bottom: 35px;
}

.primary-light {
    color: var(--primary-light);
}

/* Consultation Action CTA Button */
.btn-hero-consultation {
    background-color: var(--primary-blue);
    color: #ffffff;
    border-radius: 30px;
    padding: 10px 10px 10px 32px;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-consultation:hover {
    background-color: var(--dark-blue);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(32, 94, 146, 0.3);
    gap: 25px;
}

.consultation-icon-circle {
    background-color: #ffffff;
    color: var(--primary-blue);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.btn-hero-consultation:hover .consultation-icon-circle {
    background-color: var(--primary-blue);
    color: #ffffff;
    transform: rotate(-10deg) scale(1.1);
}



/* --- INDEX: TABLETS/MOBILES RESPONSIVE --- */
@media (max-width: 991.98px) {
    .hero-content-container {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .content-column-z {
        padding: 30px 20px;
        background-color: rgba(252, 248, 244, 0.9);
        border-radius: 12px;
        margin-top: 20px;
    }

    /* --- MOBILE HEADER SPACING FIXES --- */
    .custom-header-card {
        border-radius: 12px;
    }

    .header-top-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 16px !important;
    }

    .top-bar-left {
        flex-wrap: wrap;
        gap: 10px !important;
        font-size: 12px;
    }

    .top-bar-right {
        gap: 8px !important;
    }

    .top-bar-link {
        font-size: 12px;
    }

    .follow-us-text {
        font-size: 12px;
    }

    .social-icon-link {
        font-size: 12px;
    }

    .navbar {
        padding: 10px 16px !important;
    }

    .navbar-nav {
        gap: 4px !important;
        padding: 8px 0;
    }

    .navbar-nav .nav-link {
        font-size: 14px;
        padding: 8px 12px;
    }

    .navbar-brand-center {
        margin: 0 auto;
    }

    .action-buttons-group {
        gap: 8px !important;
    }

    .btn-custom-signin-outline {
        font-size: 16px;
        padding: 5px 16px;
    }

    .btn-custom-explore {
        font-size: 16px;
        padding: 5px 5px 5px 16px;
    }
}

@media (max-width: 575.98px) {
    .header-top-bar {
        padding: 8px 12px !important;
        flex-direction: column;
        align-items: center !important;
        gap: 4px;
    }

    .top-bar-left {
        font-size: 11px;
        gap: 6px !important;
        justify-content: center;
        width: 100%;
    }

    .top-bar-right {
        gap: 6px !important;
        justify-content: center;
        width: 100%;
    }

    .top-bar-link {
        font-size: 10px;
    }

    .follow-us-text {
        font-size: 10px;
    }

    .social-icon-link {
        font-size: 11px;
    }

    .navbar {
        padding: 8px 12px !important;
    }

    .btn-custom-signin-outline {
        font-size: 12px;
        padding: 4px 12px;
    }

    .btn-custom-explore {
        display: none;
    }

    .content-column-z {
        padding: 24px 16px;
    }
}

/* --- INDEX: SECTION SPACING UTILITY --- */
.section-space {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* --- INDEX: SECTION HEADING MAX-WIDTH --- */
.section-heading-max {
    max-width: 800px;
}

.section-heading-max-sm {
    max-width: 750px;
}

.section-heading-max-md {
    max-width: 650px;
}

/* --- INDEX: SECTION HEADING TEXT STYLES --- */
.section-sub-text {
    color: #4A5568;
    font-weight: 300;
    line-height: 1.6;
}

.section-sub-text-dark {
    color: #2d3748;
    font-weight: 400;
}

/* --- INDEX: CARE CORNER CTA BUTTON --- */
.btn-care-corner {
    background-color: #00A6A6 !important;
}

.btn-care-corner .learn-arrow-circle {
    color: #00A6A6 !important;
}

@media (max-width: 991.98px) {
    .section-space {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .section-space {
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }

    /* Technology section padding fix */
    .technology-section {
        padding-top: 1.8rem !important;
        padding-bottom: 1.8rem !important;
    }

    /* Practices section padding fix */
    .practices-section {
        padding: 30px 10px !important;
    }

    .practices-master-box {
        padding: 25px 18px 50px 18px !important;
    }

    /* Care corner padding fix */
    .care-corner-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Animated process section */
    .animated-process-section.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* FAQ section */
    .faq-tabs-section.section-space {
        padding-top: 1.8rem !important;
        padding-bottom: 1.8rem !important;
    }

    /* Footer padding */
    .light-theme-footer {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }

    /* Marquee padding */
    .marquee-wrapper {
        padding: 20px 0 !important;
    }

    /* Featured blog, case study sections */
    .exact-premium-section-bg {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .development-premium-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .marketing-exact-outer-wrap {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* About page sections */
    .about-values-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .partner-tech-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .core-principles-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .team-showcase-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .compliance-banner-section .container.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* --- INDEX: DIAGRAM / SVG COMPONENT --- */

.bg-diagram {
    background-image: url('../images/bg-diagram.webp');
    background-position: center;
    background-size: cover;
}

/* Top Heading Section */
.heading-section {
    text-align: center;
}

/* Unified Section Heading */
.main-heading {
    color: var(--primary-blue);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.sub-heading {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    color: #333333;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Diagram Container */
.diagram-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hide SVG on mobile, show cards */
.diagram-wrapper svg {
    display: block;
}

.diagram-mobile-cards {
    display: none;
}

@media (max-width: 767.98px) {
    .diagram-wrapper svg {
        display: none;
    }

    .diagram-mobile-cards {
        display: flex;
    }
}

/* Diagram Mobile Cards Styling */
.diagram-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.diagram-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(32, 94, 146, 0.12) !important;
    border-color: rgba(0, 166, 166, 0.3) !important;
}

.diagram-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(5, 85, 159, 0.08);
    color: #05559F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 10px;
}

.diagram-card-title {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #05559F;
}

.diagram-card-sub {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #5a6b7c;
    line-height: 1.3;
}

/* Node Typography inside SVG */
.node-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    fill: #05559F;
}

.node-subtitle {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 300;
    fill: #5a6b7c;
}


/* --- INDEX: SVG VIDEO ANIMATION --- */

/* Dot smoothly changes from blue to green when reaching the node */
@keyframes pulseDotColor {

    0%,
    88% {
        stroke: #05559F;
    }

    92%,
    96% {
        stroke: #10B981;
    }

    100% {
        stroke: #05559F;
    }
}

/* Reversed keyframe: Single dot radiates outward from central logo to each node */
@keyframes pulseToCenterHub {
    0% {
        stroke-dashoffset: -342;
        /* Dot starts at end of path (center logo) */
        opacity: 0;
    }

    8% {
        opacity: 1;
        /* Smooth entry fade */
    }

    92% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        /* Dot moves to start of path (node) */
        opacity: 0;
        /* Clean disappearing effect */
    }
}

/* Ambient video rectangle pulse glow around your central logo image */
@keyframes videoAmbientGlow {

    0%,
    100% {
        opacity: 0.03;
        transform: scale(1);
    }

    50% {
        opacity: 0.1;
        transform: scale(1.02);
    }
}

.center-video-glow {
    transform-origin: 600px 120px;
    animation: videoAmbientGlow 4s ease-in-out infinite;
}

/* Brand icon gradient glow pulse animation */
@keyframes brandGlowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform-origin: 600px 120px;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform-origin: 600px 120px;
        transform: scale(1.15);
    }
}

.brand-glow-pulse {
    transform-origin: 600px 120px;
    animation: brandGlowPulse 3s ease-in-out infinite;
}

.brand-glow-outer {
    transform-origin: 600px 120px;
    animation: brandGlowPulse 4s ease-in-out infinite;
}

/* Node circle glow - smoothly glows green when dot touches, smoothly fades out */
@keyframes nodeTouchGlow {

    0%,
    86% {
        stroke: #A8D8D8;
        stroke-width: 1.5;
        fill: #ffffff;
        filter: drop-shadow(0 0 0px rgba(16, 185, 129, 0));
    }

    89% {
        stroke: #10B981;
        stroke-width: 2.5;
        fill: rgba(16, 185, 129, 0.04);
        filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
    }

    92%,
    96% {
        stroke: #10B981;
        stroke-width: 3;
        fill: rgba(16, 185, 129, 0.1);
        filter: drop-shadow(0 0 18px rgba(16, 185, 129, 1));
    }

    99% {
        stroke: #A8D8D8;
        stroke-width: 1.5;
        fill: #ffffff;
        filter: drop-shadow(0 0 0px rgba(16, 185, 129, 0));
    }

    100% {
        stroke: #A8D8D8;
        stroke-width: 1.5;
        fill: #ffffff;
        filter: drop-shadow(0 0 0px rgba(16, 185, 129, 0));
    }
}

/* Icon inside node - smoothly turns green when dot touches */
@keyframes iconTouchGlow {

    0%,
    86% {
        stroke: #00A6A6;
    }

    89% {
        stroke: #10B981;
    }

    92%,
    96% {
        stroke: #10B981;
    }

    99%,
    100% {
        stroke: #00A6A6;
    }
}

/* Each node synced with its pulse-path delay - same 4.5s cycle */
.n1 {
    animation: nodeTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 0s;
}

.n2 {
    animation: nodeTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 0.9s;
}

.n3 {
    animation: nodeTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 1.8s;
}

.n4 {
    animation: nodeTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 2.7s;
}

.n5 {
    animation: nodeTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 3.6s;
}

/* Icon glow synced with node */
.i1 {
    animation: iconTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 0s;
}

.i2 {
    animation: iconTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 0.9s;
}

.i3 {
    animation: iconTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 1.8s;
}

.i4 {
    animation: iconTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 2.7s;
}

.i5 {
    animation: iconTouchGlow 4.5s ease-in-out infinite;
    animation-delay: 3.6s;
}

/* Active line overlay forming a perfect rounded single dot */
.pulse-path {
    stroke-dasharray: 8 350;
    /* 8px length ensures it stays a circle dot */
    animation: pulseToCenterHub 4.5s linear infinite,
        pulseDotColor 4.5s linear infinite;
}

/* Staggered sequential delay to let dots flow one after another */
.p1 {
    animation-delay: 0s, 0s;
}

.p2 {
    animation-delay: 0.9s, 0.9s;
}

.p3 {
    animation-delay: 1.8s, 1.8s;
}

.p4 {
    animation-delay: 2.7s, 2.7s;
}

.p5 {
    animation-delay: 3.6s, 3.6s;
}

/* --- INDEX: STATS BANNER --- */
.stats-banner {
    background: #F9FBFF;
    border-radius: 18px;
    padding: 24px 20px;
    width: 100%;
    margin: 40px auto 0 auto;
    border: 0.5px solid #00A6A6;
    overflow: hidden;
}

.stat-item {
    text-align: center;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.stat-number {
    font-family: var(--font-body), sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #05559F;
    line-height: 1.1;
}

.stat-label {
    font-family: var(--font-body), sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #05559F;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
}

@media (max-width: 575.98px) {
    .stats-banner {
        padding: 18px 10px;
        margin: 25px auto 0 auto;
        border-radius: 14px;
    }

    .stat-number {
        font-size: 22px;
    }

    .stat-label {
        font-size: 9px;
        letter-spacing: 0.5px;
        margin-top: 4px;
    }
}


.node-title {
    fill: #05559F;
    font-size: 20px;
}

.node-subtitle {
    fill: #666666;
    font-size: 16px;
}

/* --- INDEX: CENTER MAIN HUB --- */
.hub-main-icon {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid var(--dark-blue);
}

/* --- INDEX: DIAGRAM GEOMETRY --- */
.diagram-container {
    max-width: 1140px;
    margin: 0 auto;
}

.connecting-lines-wrapper {
    position: absolute;
    top: 40px;
    /* Aligns exactly with the bottom center of the main hub icon */
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 1;
    pointer-events: none;
}

/* --- INDEX: BOTTOM FLOW NODES --- */
.node-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #dbe3eb;
    transition: transform 0.3s ease;
}

.node-item-box:hover .node-icon-circle {
    transform: translateY(-3px);
    border-color: var(--primary-blue);
}

.node-item-box h3 {
    font-weight: 400;
}

/* --- INDEX: DIAGRAM MOBILE RESPONSIVE --- */
@media (max-width: 991.98px) {

    /* Resets the curved layout structure to regular clean grid columns on mobiles/tablets */
    .node-item-box {
        margin-top: 0 !important;
        padding: 15px;
        background-color: #fcfbf9;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.03);
    }
}

/* --- INDEX: PALETTE UTILITY CLASSES --- */




.font-body {
    font-family: var(--font-body) !important;
}

.text-dark-blue {
    color: #05559F !important;
}

.text-teal {
    color: #00A6A6 !important;
}

.text-slate {
    color: var(--text-slate) !important;
}

.leading-normal {
    line-height: 1.65;
}

/* --- INDEX: FEATURE IMAGE WITH BADGE --- */
.feature-image-wrapper {
    border-radius: 32px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-image-wrapper:hover {
    transform: scale(1.015);
}

.main-feature-img {
    min-height: 400px;
    max-height: 480px;
}

.floating-stat-badge {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    height: 64px;
    border-radius: 35px;
    background: linear-gradient(147.42deg, rgba(0, 166, 166, 0.2) -9.31%, rgba(250, 242, 234, 0.2) 46.38%, rgba(18, 59, 93, 0.2) 111.32%);
    color: #05559F;
    border-color: rgba(0, 0, 0, 0.06) !important;
    z-index: 10;
}

/* --- INDEX: FEATURE CONTENT & CTA --- */
.feature-content-box h2 {
    letter-spacing: -0.5px;
}

.btn-custom-learn-more {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    background-color: var(--primary-blue);
    border: none;
    border-radius: 25px;
    padding: 7px 7px 7px 24px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-custom-learn-more:hover {
    background-color: var(--dark-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(32, 94, 146, 0.25);
    gap: 20px;
}

.learn-arrow-circle {
    background-color: #ffffff;
    color: var(--primary-blue);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.btn-custom-learn-more:hover .learn-arrow-circle {
    background-color: var(--primary-blue);
    color: #ffffff;
    transform: rotate(90deg);
}

/* --- INDEX: FEATURE MOBILE RESPONSIVE --- */
@media (max-width: 991.98px) {
    .feature-image-wrapper {
        border-radius: 24px;
        margin-bottom: 15px;
    }

    .main-feature-img {
        min-height: 300px;
    }

    .floating-stat-badge {
        bottom: 15px;
    }
}

/* --- INDEX: CUSTOM FEATURES BLUE BOX --- */
.custom-features-container {
    /* Image ka exact matching primary blue code */
    border-radius: 20px;
    /* Image ke mutabik minimal radius */
    padding: 20px;
}

/* Icons styling inside the box */
.feature-img-icon-wrap {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff;
}

/* Subtle border dividers between rows */
.feature-border-bottom {
    border-bottom: 1px solid rgb(177 177 177 / 25%);
}

/* Exact text color contrast for descriptions inside blue block */
.text-white-muted {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive spacing tweaks */
@media (max-width: 991px) {
    .feature-img-icon-wrap {
        font-size: 1.5rem;
        width: 35px;
    }

    .custom-features-container {
        padding: 1.5rem !important;
    }
}

/* --- INDEX: CURTAIN MASK REVEAL ENGINE --- */

/* Main Section background design stays original (#00A6A6) */
.custom-features-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 20px;
    color: #05559F;
}

/* Clear parent row constraints */
.custom-features-container .row {
    position: relative;
    overflow: hidden;
    /* Restricts masking layers within row boundaries */
    z-index: 2;
    background-color: transparent !important;
}

/* Subtle border dividers between rows */
.feature-border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Exact text color contrast for descriptions inside blue block */
.text-white-muted {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.5;
}

/* Icons styling inside the box */
.feature-img-icon-wrap {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #00A6A6;
}

/* Inner text and icons placement layer rules */
.custom-features-container .feature-img-icon-wrap,
.custom-features-container h3,
.custom-features-container .text-white-muted {
    position: relative;
    z-index: 4;
    /* Dynamic curtain ke upar text visibility ensure karne ke liye */
}

/* Responsive spacing tweaks */
@media (max-width: 991px) {
    .feature-img-icon-wrap {
        font-size: 1.5rem;
        width: 35px;
    }

    .custom-features-container {
        padding: 1.5rem !important;
    }
}

/* --- INDEX: CARE SEGMENT CARDS --- */
.care-segment-card {
    background-color: #ffffff;
    border-radius: 16px;
    /* Smooth card curves matching design */
    border-color: rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Icon Circle Setup */
.care-segment-card .segment-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(0, 166, 166, 0.08);
    color: #05559F;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

/* Hover effects for premium feeling */
.care-segment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 3rem rgba(32, 94, 146, 0.1) !important;
    border-color: rgba(0, 166, 166, 0.3) !important;
}

/* On hover, all cards get the blue icon background (previously only active-variant) */
.care-segment-card:hover .segment-icon-circle {
    background-color: #00A6A6;
    color: #ffffff;
}

/* --- SECTION: FOUR PRACTICES --- */
:root {
    --dark-blue: #0F5A9A;
    --teal: #00A6A6;
    --border-blue: #A9C2D9;
    --card-border: #BDE0E0;
    --text-gray: #4A5568;
}

.practices-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: "Jost", sans-serif;
}

/* Main Container */
.practices-master-box {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-blue);
    border-radius: 16px;
    padding: 40px 40px 50px 40px;
    margin: 0 auto;
}

/* Header & Controls Alignment */
.practices-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.practices-main-heading {
    color: var(--dark-blue);
    /* Updated to match original */
    font-weight: 500;
    /* Matched original weight */
    margin: 0;
    letter-spacing: -0.5px;
    /* Matched original letter-spacing */
}

.text-teal {
    color: var(--teal);
}

/* Slider Controls */
.slider-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.swiper-btn {
    width: 34px;
    /* Matched original size */
    height: 34px;
    /* Matched original size */
    border-radius: 50%;
    border: 1px solid var(--teal);
    background: transparent;
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.swiper-btn:hover {
    background: var(--teal);
    color: #ffffff;
}

.swiper-dots {
    display: flex;
    gap: 10px;
    /* Matched original gap */
    align-items: center;
}

.swiper-dots .dot {
    width: 8px;
    /* Matched original */
    height: 8px;
    /* Matched original */
    border-radius: 50%;
    background-color: #A3C0D4;
    opacity: 0.6;
}

.swiper-dots .dot.active {
    background-color: var(--dark-blue);
    opacity: 1;
    width: 10px;
    /* Matched original */
    height: 10px;
    /* Matched original */
}

/* Cards Grid */
.practices-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Individual Card */
.practice-card {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 30px 24px;
    /* Slightly adjusted to match new proportions */
    text-align: left;
}

.card-title {
    color: var(--dark-blue);
    font-size: 19px;
    /* Updated to match original */
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 12px;
}

.card-desc {
    color: var(--text-gray);
    font-size: 1rem;
    /* Updated to match original list size */
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Custom Bullet List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Matched original gap */
}

.feature-list li {
    font-size: 16px;
    /* Updated to match original */
    color: #2D3748;
    /* Matched original color */
    display: flex;
    align-items: center;
    gap: 12px;
    /* Matched original gap */
}

/* Exact Double-Circle Icon Matching Mockup */
.feature-list li .bullet {
    width: 12px;
    /* Matched original */
    height: 12px;
    /* Matched original */
    min-width: 12px;
    border-radius: 50%;
    background-color: var(--teal);
    border: 3px solid #DCE7F0;
    /* Matched original border style */
    box-sizing: border-box;
}

/* Overlapping Button CTA */
.explore-btn-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.explore-services-btn {
    background-color: var(--teal);
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    /* Updated to match original */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Matched original */
    padding: 6px 6px 6px 24px;
    /* Matched original */
    border-radius: 40px;
    box-shadow: 0 8px 20px rgba(0, 166, 166, 0.2);
    transition: all 0.3s ease;
}

.explore-services-btn:hover {
    background-color: var(--dark-blue);
    /* Matched original hover color */
    transform: translateY(-2px);
}

.arrow-circle {
    background-color: #ffffff;
    color: var(--teal);
    width: 28px;
    /* Matched original */
    height: 28px;
    /* Matched original */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.explore-services-btn:hover .arrow-circle {
    transform: translateX(2px);
}

/* Basic Responsiveness for Mobile */
@media (max-width: 992px) {
    .practices-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .practices-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   EXPANDABLE PROCESS SLIDER (Horizontal Cards)
   ========================================================================== */

.processSwiper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0 60px 0;
}

.processSwiper .swiper-wrapper {
    align-items: stretch;
}

.processSwiper .swiper-slide {
    height: auto;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.processSwiper .anim-process-card {
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Collapsed state - show only left side */
.processSwiper .anim-process-card .anim-card-right {
    width: 0;
    opacity: 0;
    padding: 0;
    border-left: none;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.5s ease;
}

/* Expanded state - show both sides */
.processSwiper .anim-process-card.active-state {
    flex: 2.5;
    border-color: #0C529C;
    box-shadow: 0 10px 30px rgba(12, 82, 156, 0.08);
    cursor: default;
}

.processSwiper .anim-process-card.active-state .anim-card-left {
    width: 50%;
    min-width: 280px;
}

.processSwiper .anim-process-card.active-state .anim-card-right {
    width: 50%;
    opacity: 1;
    padding: 24px 24px 24px 30px;
    border-left: 1px solid #E2EAF1;
    white-space: normal;
    overflow-y: auto;
}

/* Slider Navigation Buttons */
.btn-wrap-arrow {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 45px;
}

.swiper-button-next,
.swiper-button-prev {
    position: static !important;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1e1e2f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease;
    cursor: pointer;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #007aff;
    transform: translateY(-3px);
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .processSwiper {
        padding-bottom: 80px;
    }

    .processSwiper .anim-process-card.active-state .anim-card-left,
    .processSwiper .anim-process-card.active-state .anim-card-right {
        width: 100%;
    }

    .processSwiper .anim-process-card.active-state .anim-card-right {
        border-left: none;
        border-top: 1px solid #E2EAF1;
    }
}

@media (max-width: 480px) {
    .btn-wrap-arrow {
        gap: 15px;
        margin-top: 30px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* --- INDEX: PROCESS TIMELINE --- */
.process-timeline-section {
    background-color: #ffffff;
    overflow: hidden;
}

.process-title-text {
    color: #05559F;
    font-family: 'Baskervville', serif;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.process-subtitle-text {
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.process-tree-container {
    max-width: 1000px;
    padding: 30px 0;
}

/* Central vertical gray timeline path */
.timeline-center-spine {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    background-color: #cbd5e1;
    /* Clean gray stroke matching mockup */
    transform: translateX(-50%);
    z-index: 1;
}

/* Row wrapper adjustments for exact vertical staggering pacing */
.process-step-row {
    position: relative;
    margin-bottom: 20px;
    /* Exact compact margin to match layout */
    z-index: 2;
}

/* Capsule Structure matching image curves */
.process-capsule-card {
    background-color: #DDFFFF;
    /* Exact cream fade tint background code */
    border: 0.5px solid var(--New-blue, #05559F);
    /* Muted thin gray-blue outline boundary */
    border-radius: 50px;
    /* Sleek pill shape styling */
    padding: 8px 30px 8px 10px;
    width: 100%;
    max-width: 440px;
    min-height: 74px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-capsule-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(32, 94, 146, 0.15);
    border-color: var(--primary-blue);
    background-color: #F5EDE3;
}

/* Circle Number Block Typography */
.capsule-num-circle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #05559F;
    /* Direct brand blue code stroke */
    color: #05559F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-style: italic;
    font-size: 26px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.capsule-content {
    padding-left: 18px;
}

.capsule-content h4 {
    font-family: 'Jost', sans-serif;
    color: #05559F;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 2px;
}

.capsule-content p {
    font-family: 'Jost', sans-serif;
    color: #5a6b7c;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.35;
}

/* Horizontal Connector Branches */
.connector-branch {
    position: absolute;
    top: 50%;
    width: 25px;
    height: 1.5px;
    background-color: #cbd5e1;
    z-index: 1;
    transform: translateY(-50%);
}

.left-branch {
    right: 0;
}

.right-branch {
    left: 0;
}

/* --- MOBILE LAYOUT REALIGNMENT --- */
@media (max-width: 991.98px) {
    .timeline-center-spine {
        display: none;
    }

    .process-capsule-card {
        max-width: 100%;
        border-radius: 24px;
        /* Slightly softer for full width on mobile */
    }

    .process-step-row {
        margin-bottom: 16px;
        padding: 0 15px;
    }
}

/* ==========================================================================
           PROCESS TIMELINE ANIMATED CARDS (Custom Scoped to avoid conflicts)
           ========================================================================== */

.animated-process-section {
    background-color: #ffffff;
    font-family: 'Jost', sans-serif;
}

/* Typography & Colors specifically scoped */
.animated-process-section .anim-text-blue {
    color: #0C529C;
}

.animated-process-section .anim-text-teal {
    color: #00A6A6;
}

.animated-process-section .anim-text-muted {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.animated-process-section .anim-section-heading {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Cards Container */
.anim-process-wrapper {
    display: flex;
    gap: 20px;
    height: 520px;
    /* Fixed height to keep layout stable */
    margin-top: 40px;
}

/* Individual Card Default (Collapsed State) */
.anim-process-card {
    flex: 1;
    /* Default equal width */
    border: 1px solid #BDE0E0;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Active Card (Expanded State) */
.anim-process-card.active-state {
    flex: 2.5;
    /* Takes up more space */
    border-color: #0C529C;
    box-shadow: 0 10px 30px rgba(12, 82, 156, 0.08);
    cursor: default;
}

/* Left Side (Always Visible) */
.anim-card-left {
    min-width: 280px;
    width: 100%;
    /* Fills card when collapsed */
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: width 0.6s ease;
}

/* Right Side (Details - Hidden by default) */
.anim-card-right {
    width: 0;
    opacity: 0;
    padding: 24px 0;
    border-left: 1px solid transparent;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;
}

/* Right Side Details Animation Trigger */
.anim-process-card.active-state .anim-card-left {
    width: 40%;
    /* Adjusts when expanded */
}

.anim-process-card.active-state .anim-card-right {
    width: 60%;
    opacity: 1;
    padding: 24px 24px 24px 30px;
    border-left: 1px solid #E2EAF1;
    white-space: normal;
    overflow-y: auto;
    /* Enable scrolling if content is long */
}

/* Card Content Styling */
.anim-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
}

.anim-card-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #2D3748;
    margin-bottom: 12px;
}

.anim-card-img-box {
    margin-top: auto;
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
}

.anim-card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Side Lists */
.anim-focus-title {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1rem;
}

.anim-focus-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    margin-top: 0;
}

.anim-focus-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #2D3748;
    margin-bottom: 12px;
}

.anim-icon-sq {
    background-color: #F0F6FB;
    color: #0C529C;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
}

.anim-deliverables-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.anim-deliverables-list li {
    position: relative;
    padding-left: 15px;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
}

.anim-deliverables-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #00A6A6;
}

/* Bottom Pagination Track */
.anim-step-track {
    display: inline-flex;
    align-items: center;
    border: 1px solid #BDE0E0;
    border-radius: 50px;
    padding: 4px;
    background: #ffffff;
    margin-top: 40px;
}

.anim-step-pill {
    padding: 6px 16px;
    color: #0C529C;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 40px;
}

.anim-step-pill:hover {
    background-color: #F0F6FB;
}

.anim-step-pill.active-pill {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(12, 82, 156, 0.15);
    border: 1px solid #E2EAF1;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .anim-process-wrapper {
        flex-direction: column;
        height: auto;
    }

    .anim-process-card {
        flex-direction: column;
    }

    .anim-process-card.active-state .anim-card-left,
    .anim-process-card.active-state .anim-card-right {
        width: 100%;
    }

    .anim-process-card.active-state .anim-card-right {
        border-left: none;
        border-top: 1px solid #E2EAF1;
    }
}

/* --- INDEX: FAQ TABS SECTION --- */
.faq-tabs-section {
    background-color: #ffffff;
}

/* Header Badge Design Elements */
.faq-top-badge {
    background-color: #E6F4FE;
    color: #00A6A6;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 20px;
}

.faq-main-heading {
    font-weight: 600;
    letter-spacing: -0.5px;
}

.faq-sub-text {
    font-family: 'Jost', sans-serif;
    color: #5a6b7c;
    font-size: 15px;
    line-height: 1.6;
}

/* Left Sidebar Navigation Elements Layout */
.sidebar-meta-title {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #a0aec0;
    letter-spacing: 0.5px;
}

.faq-sidebar-wrapper .nav-pills .nav-link {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5a6b7c;
    background-color: transparent;
    text-align: left;
    padding: 10px 16px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
}

.faq-sidebar-wrapper .nav-pills .nav-link:hover {
    color: #05559F;
    background-color: rgba(0, 166, 166, 0.05);
}

/* Active Pill Design Matching Mockup Left Side Blue Notch */
.faq-sidebar-wrapper .nav-pills .nav-link.active {
    color: #05559F !important;
    background-color: #E6F4FE !important;
    border-left: 3px solid #05559F;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
}

/* Sidebar Callout Block Layout */
.sidebar-cta-block h5 {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5a6b7c;
    margin-bottom: 6px;
}

.sidebar-cta-block p {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    color: #a0aec0;
    line-height: 1.5;
    margin-bottom: 12px;
}

.talk-sales-btn {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #05559F;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.talk-sales-btn:hover {
    color: #00A6A6;
}

/* RIGHT COLUMN ACCORDION HOUSING STYLING */
.faq-custom-accordion .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 16px;
    overflow: hidden;
    background-color: #ffffff;
}

.faq-custom-accordion .accordion-button {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #2d3748;
    padding: 20px 24px;
    background-color: #ffffff !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Left Accent Indicator Sync When Accordion Is Active */
.faq-custom-accordion .accordion-item:has(.show) {
    border-left: 3px solid #05559F !important;
}

/* Q-Text Styling */
.faq-q-text {
    flex: 1;
}

/* Colorful Custom Icon Square Bases Matching Mockup */
.faq-icon-square {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.gen-bg {
    background-color: #E6F4FE;
    color: #05559F;
}

.shield-bg {
    background-color: #EBFBF5;
    color: #10B981;
}

.team-bg {
    background-color: #F3E8FF;
    color: #8B5CF6;
}

.link-bg {
    background-color: #FEF3C7;
    color: #D97706;
}

.web-bg {
    background-color: #FCE7F3;
    color: #EC4899;
}

/* Custom Accordion Chevron Rotator Styling Track */
.faq-custom-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234A5568'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-size: 12px;
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

/* Inner Body Content Parameters */
.faq-custom-accordion .accordion-body {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #4A5568;
    line-height: 1.65;
    padding: 0 24px 24px 76px;
    /* Perfect left alignment lining up under text title */
    font-weight: 300;
}

/* Grid Checklist Item Details */
.list-item-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4A5568;
    font-weight: 400;
}

.list-item-tick i {
    color: #00A6A6;
    font-size: 14px;
}

/* RESPONSIVE FLUID REALIGNMENT */
@media(max-width: 767.98px) {
    .faq-sidebar-wrapper {
        margin-bottom: 24px;
    }

    .faq-sidebar-wrapper .nav-pills {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .faq-sidebar-wrapper .nav-pills .nav-link.active {
        border-left: transparent;
        border-bottom: 3px solid #05559F;
        border-radius: 8px 8px 0 0;
    }

    .sidebar-cta-block {
        display: none;
        /* Hide sidebar banner on compact devices */
    }

    .faq-custom-accordion .accordion-body {
        padding: 0 20px 20px 20px;
        /* Collapse fluid padding margins */
    }
}

/* ==========================================================================
   ANIMATED PROCESS GRID (3 cards per page with expand/collapse)
   ========================================================================== */

.anim-process-grid-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto 0;
}

/* Flex row so active card can expand width like the demo */
.anim-process-grid {
    display: flex;
    gap: 20px;
    height: 520px;
    margin-top: 40px;
    text-align: left;
}

.anim-process-grid-item {
    flex: 1;
    min-width: 0;
    display: flex;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Active item grows; siblings stay collapsed */
.anim-process-grid-item:has(.anim-process-card.active-state) {
    flex: 2.5;
}

.anim-process-card {
    flex: 1;
    width: 100%;
    border: 1px solid #BDE0E0;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.anim-process-card:hover {
    border-color: #0C529C;
    box-shadow: 0 8px 25px rgba(12, 82, 156, 0.08);
}

.anim-process-card.active-state {
    border-color: #0C529C;
    box-shadow: 0 10px 30px rgba(12, 82, 156, 0.08);
    cursor: default;
}

/* Left side always visible */
.anim-card-left {
    min-width: 0;
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: width 0.6s ease;
}

/* Right side hidden until expanded */
.anim-card-right {
    width: 0;
    opacity: 0;
    padding: 24px 0;
    border-left: 1px solid transparent;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;
}

/* Expanded: split left/right panels */
.anim-process-card.active-state .anim-card-left {
    width: 50%;
    min-width: 240px;
}

.anim-process-card.active-state .anim-card-right {
    width: 50%;
    opacity: 1;
    padding: 24px 24px 24px 30px;
    border-left: 1px solid #E2EAF1;
    white-space: normal;
    overflow-y: auto;
}

/* Page pagination numbers (keep existing UI) */
.anim-page-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.anim-page-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #D1D5DB;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anim-page-num:hover {
    border-color: #0C529C;
    color: #0C529C;
}

.anim-page-num.active {
    background-color: #0C529C;
    border-color: #0C529C;
    color: #fff;
}

@media (max-width: 991px) {
    .anim-process-grid {
        flex-direction: column;
        height: auto;
    }

    .anim-process-grid-item {
        flex: none !important;
        width: 100%;
    }

    .anim-process-grid-item:has(.anim-process-card.active-state) {
        flex: none !important;
    }

    .anim-process-card {
        flex-direction: column;
        min-height: auto;
    }

    .anim-process-card.active-state .anim-card-left,
    .anim-process-card.active-state .anim-card-right {
        width: 100%;
        min-width: 0;
    }

    .anim-process-card.active-state .anim-card-right {
        border-left: none;
        border-top: 1px solid #E2EAF1;
    }
}

@media (max-width: 576px) {
    .btn-wrap-arrow {
        gap: 15px;
        margin-top: 25px;
    }

    .hero-master-wrapper {
        min-height: 65vh;
    }

    .anim-prev-btn,
    .anim-next-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .anim-card-left {
        padding: 18px;
    }

    .anim-process-card.active-state .anim-card-right {
        padding: 18px;
    }
}

/* ==========================================================================
   SEVEN-STEP PROCESS SECTION - ULTRA-PROFESSIONAL ENHANCEMENTS
   ========================================================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .animated-process-section {
        padding: 50px 15px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .animated-process-section .seven-step-heading {
        font-size: 2.2rem !important;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .animated-process-section .seven-step-heading br {
        display: none;
    }

    .animated-process-section p.mt-3 {
        padding: 0 10px;
        font-size: 0.95rem !important;
        color: #4a5568;
        font-weight: 400;
    }

    .anim-process-grid-wrapper {
        margin: 30px auto 0;
    }

    .anim-process-grid {
        margin-top: 30px;
        height: auto;
        gap: 16px;
    }

    .anim-process-grid-item {
        flex: none !important;
        width: 100%;
    }

    .anim-process-grid-item:has(.anim-process-card.active-state) {
        flex: none !important;
    }

    .anim-process-card {
        flex-direction: column;
        min-height: auto;
        height: auto;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .anim-process-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(5, 85, 159, 0.12);
        border-color: #00A6A6;
    }

    .anim-process-card.active-state {
        border-color: #05559F;
        box-shadow: 0 16px 48px rgba(5, 85, 159, 0.18);
        cursor: default;
    }

    .anim-process-card.active-state .anim-card-left,
    .anim-process-card.active-state .anim-card-right {
        width: 100%;
        min-width: 0;
    }

    .anim-process-card.active-state .anim-card-right {
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding: 20px 24px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    .anim-process-card:not(.active-state) {
        flex-direction: row;
        min-height: 90px;
        align-items: center;
        cursor: pointer;
    }

    .anim-process-card:not(.active-state) .anim-card-left {
        flex-direction: row;
        align-items: center;
        padding: 16px 20px;
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .anim-process-card:not(.active-state) .anim-card-title {
        font-size: 1.15rem;
        margin-bottom: 0;
        margin-right: 8px;
        white-space: nowrap;
        font-weight: 600;
        color: #05559F;
    }

    .anim-process-card:not(.active-state) .anim-card-subtitle {
        font-size: 0.85rem;
        margin-bottom: 0;
        white-space: nowrap;
        color: #5a6b7c;
        font-weight: 400;
    }

    .anim-process-card:not(.active-state) .anim-text-muted,
    .anim-process-card:not(.active-state) .anim-card-img-box {
        display: none;
    }

    .anim-card-left {
        padding: 20px;
        width: 100%;
        min-width: 0;
    }

    .anim-card-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #05559F;
        margin-bottom: 6px;
        letter-spacing: -0.01em;
    }

    .anim-card-subtitle {
        font-size: 0.95rem;
        color: #5a6b7c;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .anim-card-img-box {
        height: 180px;
        margin-top: 16px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        position: relative;
    }

    .anim-card-img-box::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.02) 100%);
        pointer-events: none;
    }

    .anim-card-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .anim-process-card:hover .anim-card-img-box img {
        transform: scale(1.05);
    }

    .anim-card-right {
        width: 0;
        opacity: 0;
        padding: 18px 0;
    }

    .anim-focus-title {
        font-weight: 700;
        margin-bottom: 16px;
        font-size: 1.05rem;
        color: #05559F;
        letter-spacing: -0.01em;
    }

    .anim-focus-list li {
        font-size: 0.85rem;
        margin-bottom: 10px;
        color: #2d3748;
        font-weight: 500;
    }

    .anim-icon-sq {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        min-width: 28px;
        background: linear-gradient(135deg, #e6f4fe 0%, #f0f9ff 100%);
        color: #05559F;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(5, 85, 159, 0.08);
    }

    .anim-deliverables-list li {
        font-size: 0.85rem;
        margin-bottom: 8px;
        color: #4a5568;
        font-weight: 400;
    }

    .anim-page-numbers {
        margin-top: 24px;
        gap: 8px;
    }

    .anim-page-num {
        width: 36px;
        height: 36px;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid #e2e8f0;
        background: #ffffff;
        transition: all 0.3s ease;
    }

    .anim-page-num:hover {
        border-color: #00A6A6;
        background: #f0f9ff;
        transform: translateY(-2px);
    }

    .anim-page-num.active {
        background: linear-gradient(135deg, #05559F 0%, #00A6A6 100%);
        border-color: #05559F;
        color: #fff;
        box-shadow: 0 4px 12px rgba(5, 85, 159, 0.25);
    }

    .process-tree-container {
        padding: 20px 0;
    }
}

/* Small Mobile (576px and below) */
@media (max-width: 576px) {
    .animated-process-section {
        padding: 35px 8px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .animated-process-section .seven-step-heading {
        font-size: 1.6rem !important;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .animated-process-section p.mt-3 {
        font-size: 0.9rem !important;
        padding: 0 8px;
        color: #4a5568;
    }

    .anim-process-grid {
        gap: 12px;
        margin-top: 20px;
    }

    .anim-process-card {
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .anim-process-card:not(.active-state) .anim-card-left {
        padding: 14px 16px;
    }

    .anim-process-card:not(.active-state) .anim-card-title {
        font-size: 1rem;
        margin-right: 6px;
        font-weight: 600;
    }

    .anim-process-card:not(.active-state) .anim-card-subtitle {
        font-size: 0.75rem;
    }

    .anim-card-left {
        padding: 16px;
    }

    .anim-process-card.active-state .anim-card-left {
        padding: 16px;
    }

    .anim-process-card.active-state .anim-card-right {
        padding: 16px 18px !important;
    }

    .anim-card-title {
        font-size: 1.15rem;
        font-weight: 700;
    }

    .anim-card-subtitle {
        font-size: 0.85rem;
    }

    .anim-text-muted {
        font-size: 0.85rem !important;
        line-height: 1.6;
    }

    .anim-card-img-box {
        height: 150px;
        border-radius: 12px;
        margin-top: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    }

    .anim-focus-title {
        font-size: 0.9rem !important;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .anim-focus-list li {
        font-size: 0.8rem;
        gap: 10px;
        margin-bottom: 8px;
    }

    .anim-icon-sq {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
        min-width: 24px;
        border-radius: 7px;
    }

    .anim-deliverables-list li {
        font-size: 0.8rem;
        margin-bottom: 6px;
        padding-left: 14px;
    }

    .anim-deliverables-list li::before {
        top: 6px;
        width: 5px;
        height: 5px;
    }

    .anim-page-num {
        width: 30px;
        height: 30px;
        font-size: 12px;
        font-weight: 600;
    }

    .anim-page-numbers {
        gap: 6px;
        margin-top: 18px;
    }
}

/* Extra Small (400px and below) */
@media (max-width: 400px) {
    .animated-process-section .seven-step-heading {
        font-size: 1.4rem !important;
        font-weight: 700;
    }

    .animated-process-section p.mt-3 {
        font-size: 0.85rem !important;
    }

    .anim-process-card:not(.active-state) .anim-card-left {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 14px;
    }

    .anim-process-card:not(.active-state) .anim-card-title {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .anim-process-card:not(.active-state) .anim-card-subtitle {
        font-size: 0.7rem;
    }

    .anim-card-img-box {
        height: 120px;
        border-radius: 10px;
    }

    .anim-card-left {
        padding: 14px;
    }

    .anim-card-title {
        font-size: 1.05rem;
    }

    .anim-process-card.active-state .anim-card-right {
        padding: 14px 16px !important;
    }

    .anim-focus-list {
        margin-bottom: 15px;
    }

    .anim-focus-list li {
        font-size: 0.75rem;
    }

    .anim-icon-sq {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }
}

/* ==========================================================================
   MOBILE CAROUSEL FOR PROCESS STEPS (Shown only on mobile, hidden on desktop)
   ========================================================================== */

/* Desktop grid hidden on mobile by default - shown above 991px */
.process-mobile-carousel-wrapper {
    display: none;
}

.process-desktop-grid {
    display: block;
}

@media (max-width: 991px) {
    .process-desktop-grid {
        display: none;
    }

    .process-desktop-pagination {
        display: none;
    }

    .process-mobile-carousel-wrapper {
        display: block;
        position: relative;
        margin: 20px -8px 0;
        padding: 0 48px;
    }

    .process-mobile-carousel {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
    }

    .process-mobile-slide {
        display: none;
        width: 100%;
    }

    .process-mobile-slide.active-slide {
        display: block;
        animation: mobileFadeIn 0.35s ease;
    }

    @keyframes mobileFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ===== PRESERVE ORIGINAL CARD DESIGN ===== */
    /* The cards already have perfect expanded state via active-state class */
    .process-mobile-slide .anim-process-card {
        /* Keep original styles - only force expanded column layout */
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        cursor: default;
    }

    .process-mobile-slide .anim-process-card .anim-card-left,
    .process-mobile-slide .anim-process-card.active-state .anim-card-left {
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
    }

    .process-mobile-slide .anim-process-card .anim-card-right,
    .process-mobile-slide .anim-process-card.active-state .anim-card-right {
        width: 100% !important;
        min-width: 0 !important;
        opacity: 1 !important;
        padding: 24px 24px 24px 30px !important;
        border-left: none !important;
        border-top: 1px solid #E2EAF1 !important;
        white-space: normal !important;
        overflow: visible !important;
        display: flex !important;
        height: auto !important;
    }

    /* Navigation Controls */
    .mobile-carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 24px;
    }

    .mobile-carousel-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1.5px solid #00A6A6;
        background: #ffffff;
        color: #00A6A6;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        flex-shrink: 0;
    }

    .mobile-carousel-btn:hover {
        background: #00A6A6;
        color: #ffffff;
        transform: scale(1.05);
    }

    .mobile-carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

    .mobile-carousel-btn:disabled:hover {
        background: #ffffff;
        color: #00A6A6;
        transform: none;
    }

    .mobile-carousel-dots {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-carousel-dots .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #D1D5DB;
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .mobile-carousel-dots .carousel-dot.active-dot {
        width: 28px;
        border-radius: 4px;
        background-color: #0C529C;
    }
}

/* Smaller mobile adjustments */
@media (max-width: 576px) {
    .process-mobile-carousel-wrapper {
        padding: 0 0px;
        margin: 15px -5px 0;
    }

    .mobile-carousel-btn {
        width: 34px;
        height: 34px;
    }

    .mobile-carousel-btn svg {
        width: 14px;
        height: 14px;
    }

    .mobile-carousel-dots .carousel-dot.active-dot {
        width: 22px;
    }
}

@media (max-width: 400px) {
    .process-mobile-carousel-wrapper {
        padding: 0 30px;
    }
}

.legal-links a:hover {
    color: #05559F;
}

.legal-dot {
    font-size: 9px;
    color: #CBD5E1;
    align-self: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
    .tagline-flex-box .divider-line {
        display: none;
        /* Hide lines on mobile for cleaner look */
    }

    .tagline-flex-box {
        text-align: center;
    }

    .footer-contact-info .address-para {
        margin: 0 auto;
    }

    .footer-quick-links {
        margin-top: 15px;
    }
}

/* ==========================================================================
   LIGHT THEME FOOTER STYLES (Matching Image Exact)
   ========================================================================== */

.light-theme-footer {
    background-color: #F9FBFF;
    /* Very light subtle blue/gray matching the image */
    padding: 70px 0 30px 0;
    font-family: 'Jost', sans-serif;
    color: #2D3748;
}

/* --- Animated Logo Section --- */
.animated-logo-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User's Image Placeholder Layer */
.brand-logo-img {
    position: relative;
    z-index: 10;
    width: 90px;
    /* Adjust size based on your actual logo */
    height: auto;
    object-fit: contain;
}

/* Continuous Ripple Waves Animation */
.ripple-circle {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #00A6A6;
    /* Teal color for the wave lines */
    opacity: 0;
    animation: wave-animation 3.5s linear infinite;
}

/* Staggering the animation for multiple rings */
.ripple-1 {
    animation-delay: 0s;
}

.ripple-2 {
    animation-delay: 1.1s;
}

.ripple-3 {
    animation-delay: 2.2s;
}

@keyframes wave-animation {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* --- Tagline with Dividers --- */
.tagline-flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    max-width: 800px;
    margin: 0 auto;
}

.tagline-flex-box .divider-line {
    height: 1px;
    background-color: #CBD5E1;
    /* Light gray lines */
    flex-grow: 1;
}

.tagline-flex-box .tagline-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #4A5568;
}

/* --- Headings & Typography --- */
.footer-heading-blue {
    color: #05559F;
    font-family: var(--font-body), sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
}

.footer-contact-info p,
.footer-contact-info a,
.footer-quick-links a {
    font-size: 14px;
    color: #2D3748;
    text-decoration: none;
    line-height: 1.6;
    font-weight: 400;
    transition: color 0.2s ease;
}

.footer-contact-info i {
    color: #4A5568;
    font-size: 16px;
}

.footer-contact-info .address-para {
    max-width: 250px;
}

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

.footer-quick-links a:hover,
.footer-contact-info a:hover {
    color: #00A6A6;
}

/* --- Teal Call to Action Button --- */
.footer-teal-cta {
    background-color: #00A6A6 !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px !important;
    padding: 6px 6px 6px 26px !important;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 166, 166, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-teal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 166, 166, 0.3);
}

.cta-icon-circle {
    background-color: #ffffff;
    color: #00A6A6;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* --- Social Icons --- */
.footer-social-links a {
    color: #05559F;
    font-size: 17px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-social-links a:hover {
    color: #00A6A6;
    transform: scale(1.1);
}

/* --- Bottom Legal Bar --- */
.footer-bottom-legal {
    border-top: 1px solid #CBD5E1;
}

.legal-text,
.legal-links a {
    font-size: 11px;
    color: #718096;
    text-decoration: none;
    font-weight: 400;
}

.legal-links a:hover {
    color: #05559F;
}

.legal-dot {
    font-size: 9px;
    color: #CBD5E1;
    align-self: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
    .tagline-flex-box .divider-line {
        display: none;
        /* Hide lines on mobile for cleaner look */
    }

    .tagline-flex-box {
        text-align: center;
    }

    .footer-contact-info .address-para {
        margin: 0 auto;
    }

    .footer-quick-links {
        margin-top: 15px;
    }
}

/* ===== INDEX PAGE CSS END ===== */

/* ===== INTEGRATION PAGE CSS START ===== */

/* --- INTEGRATION: HERO SECTION --- */
.integration-hero-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: #1a202c;
}

.integration-hero-section .hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
}

.integration-hero-section .hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(112, 120, 153, 0) 0%, rgba(186, 200, 255, 0.73) 100%);
    z-index: 1;
}

.integration-hero-section .hero-content-container {
    padding-top: 80px;
    padding-bottom: 80px;
}

.integration-hero-section .hero-blue-glass-card {
    background: #FFFFFF1A;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 50px 45px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Integration Hero Content Styling */
.integration-hero-section .live-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: #00A6A6;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid rgba(0, 166, 166, 0.3);
    box-shadow: 0 4px 15px rgba(0, 166, 166, 0.15);
}

.integration-hero-section .live-badge-pill i {
    font-size: 8px;
    color: #10B981;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Grid Layout */
.integration-hero-section .int-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 600px;
    margin: 0 auto;
}

/* Card Container */
.integration-hero-section .int-card-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* Icon Box */
.integration-hero-section .icon-wrap {
    width: 85px;
    height: 85px;
    background: #ffffff;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.integration-hero-section .icon-wrap img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

/* Text */
.integration-hero-section .int-card-hero span {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
}

/* Hover Physics */
.integration-hero-section .int-card-hero:hover .icon-wrap {
    transform: translateY(-6px) scale(1.05);
}

/* Responsive Overrides */
@media (max-width: 576px) {
    .integration-hero-section .int-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .integration-hero-section .icon-wrap {
        width: 65px;
        height: 65px;
        border-radius: 18px;
    }

    .integration-hero-section .icon-wrap img {
        width: 35px;
        height: 35px;
    }

    .integration-hero-section .int-card-hero span {
        font-size: 12px;
    }
}

.integration-hero-section .core-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    margin-top: 40px;
    background: #05559F;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(5, 85, 159, 0.25);
}

.integration-hero-section .core-footer-bar .fw-bold {
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.integration-hero-section .core-footer-bar .small {
    font-size: 12px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.8);
}

.integration-hero-section .core-footer-bar .tech-standards {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* Integration Hero Responsive */
@media (max-width: 991.98px) {
    .integration-hero-section {
        min-height: 70vh;
    }

    .integration-hero-section .hero-content-container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .integration-hero-section .hero-blue-glass-card {
        padding: 40px 30px;
    }

    .integration-hero-section .integration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .integration-hero-section .core-footer-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .integration-hero-section {
        min-height: 65vh;
    }

    .integration-hero-section .hero-blue-glass-card {
        padding: 30px 20px;
    }

    .integration-hero-section .integration-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .integration-hero-section .int-item {
        flex-direction: row;
        justify-content: center;
    }

    .integration-hero-section .int-item img {
        width: 48px;
        height: 48px;
    }

    .integration-hero-section .int-item span {
        font-size: 12px;
    }
}

/* ===== INTEGRATION PAGE CSS END ===== */

/* ===== SERVICES PAGE CSS START ===== */

/* ==========================================================================
   SERVICES LANDING CORE SPECIFIC HOVER & LAYOUT TOKENS
   ========================================================================== */

.services-hero-master-wrapper {
    position: relative;
    width: 100%;
    /* Soft premium fluid blue radial background to match layout image exact depth */
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, #DCE7F0 0%, #F4F7FA 50%, #ffffff 100%);

    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-direction: column;
}

.services-hero-content-container {
    padding-top: 50px;
    padding-bottom: 70px;
}

/* Meta Text Badge Tuning Parameters */
.services-badge-meta-wrap .meta-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #05559F;
    letter-spacing: 0.8px;
}

.services-badge-meta-wrap .meta-line {
    display: inline-block;
    width: 35px;
    height: 1px;
    background-color: #05559F;
    opacity: 0.7;
}

/* Main Display Title Elements Blueprint */
.services-core-title {
    color: #05559F;
    font-size: 3rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    font-weight: 700;
}

/* Central Description Typography Parameters */
.services-core-description {
    max-width: 630px;
    color: #5A6B7C;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

/* Premium Filter Capsules Micro-Interactions Framework */
.service-capsule-btn {
    font-size: 14px;
    font-weight: 400;
    color: #05559F;
    background-color: transparent;
    text-decoration: none !important;
    border: 1px solid #B2C4D4;
    border-radius: 30px;
    padding: 8px 24px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active Highlight Pill Mapping Style */
.service-capsule-btn.active-capsule {
    background-color: #DDFFFF;
    border-color: #05559F;
    font-weight: 500;
}

/* Hover Physics */
.service-capsule-btn:hover {
    color: #05559F;
    background-color: #DDFFFF;
    border-color: #05559F;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 94, 146, 0.08);
}

/* Fluid Viewport Adaptability Control Blocks */
@media (max-width: 767.98px) {
    .services-core-title {
        font-size: 2.15rem;
        line-height: 1.3;
    }

    .services-core-description {
        font-size: 15px;
        padding: 0 10px;
    }

    .services-interactive-pills-row {
        gap: 10px !important;
    }

    .service-capsule-btn {
        padding: 7px 18px;
        font-size: 16px;
        flex: 0 0 calc(100% - 10px);
        text-align: center;
        max-width: calc(100% - 10px);
    }
}

/* ==========================================================================
   HEALTHCARE INTEGRATION REUSABLE ROW TOKENS (image_7d309c.png)
   ========================================================================== */

/* Meta Technology Pill Shape Parameters */
.tech-inline-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: #00A6A6;
    border: 1px solid #B2C4D4;
    padding: 5px 16px;
    border-radius: 20px;
    background-color: transparent;
    letter-spacing: 0.5px;
}

/* Feature Grid Capsules Blocks Blueprint */
.integration-capsule-pill {
    background-color: transparent;
    border: 1px solid #D9E3ED;
    border-radius: 30px;
    padding: 8px 16px;
    min-height: 48px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.integration-capsule-pill .pill-icon-circle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: rgba(0, 166, 166, 0.06);
    color: #00A6A6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid rgba(0, 166, 166, 0.12);
    transition: all 0.3s ease;
}

.integration-capsule-pill .pill-text {
    font-size: 14px;
    font-weight: 400;
    color: #2D3748;
}

/* Capsule Row Micro-hover Physics */
.integration-capsule-pill:hover {
    border-color: #00A6A6;
    background-color: rgba(0, 166, 166, 0.02);
    transform: translateY(-1px);
}

.integration-capsule-pill:hover .pill-icon-circle {
    background-color: #00A6A6;
    color: #ffffff;
}

/* Benefits Checklist Typography Track */
.key-benefits-block .benefits-title {
    font-size: 15px;
    color: #05559F;
    letter-spacing: -0.2px;
}

.benefits-bullet-list li {
    font-size: 14px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-weight: 300;
}

.benefits-bullet-list .bullet-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background-color: #00A6A6;
    display: inline-block;
}

/* Isometric Card Housing Premium Soft Glow */
.integration-isometric-wrapper .shadow-premium-blur {
    /* Soft glowing drop shadow matching mockup container drop boundary layer */
    box-shadow: 0 30px 70px rgba(0, 166, 166, 0.12);
    transition: transform 0.5s ease;
}

.integration-isometric-wrapper:hover .shadow-premium-blur {
    transform: scale(1.01) translateY(-4px);
}

/* Responsive Fluid Adjustments */
@media (max-width: 991.98px) {
    .integration-isometric-wrapper {
        max-width: 550px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .integration-capsule-pill {
        padding: 6px 12px;
    }

    .integration-capsule-pill .pill-text {
        font-size: 16px;
    }
}

/* ============================================
   TECHNOLOGY SECTION STYLES
   ============================================ */
.technology-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #ffffff;
    overflow: hidden;
}

/* Image Column & Wrappers */
.tech-image-wrapper {
    position: relative;
    background-color: #F1F5F9;
    border-radius: 24px;
    padding: 24px;
    display: inline-block;
    width: 100%;
}

.tech-main-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(5, 85, 159, 0.15);
}

/* Floating Badge: Top Right */
.floating-badge-top {
    position: absolute;
    top: 50px;
    right: -20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 166, 166, 0.15);
    border-radius: 50px;
    padding: 10px 24px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 30px rgba(5, 85, 159, 0.08);
    z-index: 2;
}

.floating-badge-top .icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #E6F6F6;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.floating-badge-top .text-box {
    display: flex;
    flex-direction: column;
}

.floating-badge-top .text-box h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-blue);
    line-height: 1.2;
}

.floating-badge-top .text-box span {
    font-size: 10px;
    color: var(--text-slate);
    font-weight: 400;
}

/* Floating Badge: Bottom Center */
.floating-badge-bottom {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 15px 35px rgba(5, 85, 159, 0.12);
    z-index: 2;
    white-space: nowrap;
}

.badge-stat {
    text-align: center;
}

.badge-stat h5 {
    margin: 0;
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
}

.badge-stat span {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-slate);
    font-weight: 600;
    letter-spacing: 1px;
}

.badge-divider {
    width: 1px;
    height: 35px;
    background-color: #E2E8F0;
}

/* Right Column Content Typography */
.tech-heading {
    color: var(--dark-blue);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.tech-text-primary {
    color: #334155;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}

.tech-text-secondary {
    color: var(--text-slate);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 300;
}

/* Feature Pills Grid */
.feature-pill {
    border: 1px solid #E2E8F0;
    border-radius: 50px;
    padding: 10px 18px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    transition: all 0.3s ease;
    height: 100%;
}

.feature-pill:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 15px rgba(0, 166, 166, 0.08);
    transform: translateY(-2px);
}

.feature-pill .pill-icon {
    color: var(--dark-blue);
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFD;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
}

.feature-pill span {
    font-size: 16px;
    color: #334155;
    font-weight: 500;
}

/* Action Buttons */
.tech-btn-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.btn-solid-teal {
    background-color: var(--primary-light);
    color: #ffffff;
    border-radius: 30px;
    padding: 8px 8px 8px 24px;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    border: 1px solid var(--primary-light);
}

.btn-solid-teal .icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.btn-solid-teal:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 166, 166, 0.3);
}

.btn-solid-teal:hover .icon-circle {
    color: var(--dark-blue);
    transform: translateX(2px);
}

.btn-light-teal {
    background-color: #E6F6F6;
    color: var(--primary-light);
    border-radius: 30px;
    padding: 8px 8px 8px 24px;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-light-teal .icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.btn-light-teal:hover {
    background-color: var(--primary-light);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 166, 166, 0.2);
}

.btn-light-teal:hover .icon-circle {
    background-color: #ffffff;
    color: var(--primary-light);
    transform: translateX(2px);
}

/* Responsive Overrides */
@media (max-width: 991.98px) {
    .floating-badge-top {
        right: 10px;
        top: 20px;
    }

    .tech-heading {
        font-size: 36px;
    }
}

@media (max-width: 767.98px) {
    .floating-badge-bottom {
        width: 85%;
        gap: 20px;
        padding: 12px 20px;
    }
}

@media (max-width: 575.98px) {
    .tech-heading {
        font-size: 30px;
    }

    .tech-btn-group {
        justify-content: center;
    }

    .btn-solid-teal,
    .btn-light-teal {
        justify-content: space-between;
    }
}

/* ==========================================================================
   PIXEL-PERFECT ARCHITECTURE FOR HEALTHCARE WEBSITE DESIGN (image_7da4a0.png)
   ========================================================================== */

/* Outer Section Ambient Space Background Token */
.exact-premium-section-bg {
    background-color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Identical Dual White Panel Cards Constraints System */
.exact-white-panel-card {
    background-color: #ffffff;
    border-radius: 32px !important;
    box-shadow: 0px 4px 19.1px 0px #00000026;

    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    height: fit-content;

}

/* Graphics Card Canvas Panel Background Tuning Parameters */
.exact-graphics-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%);

}

/* Interactive Pill Badge Formatting Elements */
.exact-meta-pill {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #00A6A6;
    background-color: transparent;
    border: 1px solid #C8D7E3;
    border-radius: 30px;
    padding: 6px 20px;
    letter-spacing: 0.3px;
}

.exact-meta-pill i {
    font-size: 12px;
}

/* Core Content Headings & Typography System */
.exact-section-title {
    color: #05559F;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.exact-section-desc {
    color: #4A5568;
    font-size: 15px;
    line-height: 1.6;
    max-width: 580px;
    font-weight: 400;
}

/* 2x2 Feature Highlights List System Row Elements Blueprint */
.exact-features-grid .exact-grid-item {
    padding: 2px 0;
}

.exact-features-grid .exact-badge-icon-wrap {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    color: #00A6A6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-color: #ffffff;
}

.exact-features-grid .exact-item-label {
    font-size: 14px;
    color: #2D3748;
    font-weight: 400;
}

/* Key Benefits Bottom Layout Row Parameter Tokens */
.exact-key-benefits-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.exact-key-benefits-footer .exact-benefits-title {
    font-size: 15px;
    color: #3A7CA5;
}

.exact-benefit-bullet {
    font-size: 12.5px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    font-weight: 400;
}

.exact-benefit-bullet .exact-bullet-dot {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background-color: #3A7CA5;
    display: inline-block;
}



.exact-laptop-base-frame {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
}

/* Asymmetric Floating Mockup Placement Specs matching layout proportions precisely */
.exact-floating-dashboard-layer {
    width: 65%;
    top: -25px;
    left: -55px;
    z-index: 3;
    transform: rotate(-10deg);
}

.exact-floating-mid-layer {
    width: 60%;
    top: 25px;
    left: -15px;
    z-index: 2;
    transform: rotate(-6deg);
}

/* Interactive Hover Feedback Engine */
.exact-white-panel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(148, 163, 184, 0.12) !important;
}

/* Dynamic Entrance Viewport Controls adaptation */
@media (max-width: 991.98px) {
    .exact-white-panel-card {
        border-radius: 24px !important;
    }

    .exact-graphics-panel {
        min-height: 400px;
    }

    .exact-floating-dashboard-layer {
        left: -25px;
    }
}

@media (max-width: 575.98px) {
    .exact-benefit-bullet {
        font-size: 12px;
    }
}

/* ==========================================================================
   EXACT BLUEPRINT ARCHITECTURE FOR HEALTHCARE DEVELOPMENT (image_7e0dbf.png)
   ========================================================================== */

.development-premium-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Headings Container Constraint Track */
.development-heading-box {
    max-width: 780px;
}

.exact-centered-desc {
    color: #4A5568;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

/* Column 1: HUD Interactive Graphic Box Framework */
.dev-large-hud-wrapper {
    box-shadow: 0 20px 50px rgba(32, 94, 146, 0.08);
    max-height: 380px;
}

.hud-main-graphic {
    min-height: 340px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-large-hud-wrapper:hover .hud-main-graphic {
    transform: scale(1.02);
}

/* Column 2: Center Dual Cards Mechanics Stack */
.bg-light-fade {
    background-color: #DDFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.dev-center-stack-card {
    min-height: 180px;
    transition: all 0.35s ease;
}

.stack-laptop-img {
    transition: transform 0.4s ease;
    height: 210px;
}

/* Counter Solid Metric Layout Token */
.dev-metrics-stat-card {
    background-color: #00A6A6 !important;
    /* Image exact solid matching background brand blue */
    height: 136px;
    min-height: 136px;
    box-shadow: 0 15px 35px rgba(0, 166, 166, 0.2);
    transition: all 0.35s ease;
}

.dev-metrics-stat-card .stat-count {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 4px;
}

.dev-metrics-stat-card .stat-label {
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Micro-hover Responses for Center Components Stack */
.dev-center-stack-card:hover,
.dev-metrics-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(32, 94, 146, 0.12);
}

.dev-center-stack-card:hover .stack-laptop-img {
    transform: scale(1.03);
}

/* Typography Extensions Track */
.tracking-wider {
    letter-spacing: 0.5px !important;
}

/* Responsive Adaptive Layer configurations */
@media (max-width: 991.98px) {
    .dev-large-hud-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }

    .dev-center-stack-card,
    .dev-metrics-stat-card {
        height: 160px;
        min-height: 160px;
    }
}

@media (max-width: 767.98px) {
    .development-premium-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ==========================================================================
   HEALTHCARE DIGITAL MARKETING EXACT TOKENS (image_86259f.png)
   ========================================================================== */

.marketing-exact-outer-wrap {
    background-color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Master Centered Panel Card With Premium Radial Ambient Glow Layer Gradient */
.marketing-gradient-panel-card {
    background: linear-gradient(96.46deg, #CFE0EB -1.09%, #FFFFFF 54.55%, #C0D7E5 100%);
    border-radius: 36px !important;
    border: 1px solid rgba(178, 196, 212, 0.25) !important;
    box-shadow: 0 30px 80px rgba(32, 94, 146, 0.04) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.marketing-gradient-panel-card:hover {
    transform: translateY(-2px);
}


/* Centered Body Blueprint Description Block Tracking */
.marketing-exact-desc {
    max-width: 680px;
    color: #4A5568;
    font-size: 15.5px;
    line-height: 1.65;
    font-weight: 400;
}

/* Row Structure Overrides for exact alignment inside the horizontal layer flow */
.marketing-capsules-flex-row .integration-capsule-pill {
    padding: 10px 20px;
    min-height: 52px;
}

/* Row Components Custom Shadows Sync */
.marketing-capsules-flex-row .integration-capsule-pill.shadow-sm {
    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.05) !important;
}

/* Micro Interaction responses update */
.marketing-capsules-flex-row .integration-capsule-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(32, 94, 146, 0.1) !important;
    background-color: #ffffff !important;
}

/* Bottom Inline Benefits Spacing Metrics Alignment */
.marketing-inline-benefits {
    border-top: 1px solid rgba(178, 196, 212, 0.2);
    width: 100%;
    max-width: 820px;
}

.marketing-inline-benefits .exact-benefit-bullet {
    font-size: 16px;
    color: #5A6B7C;
    font-weight: 400;
}

/* Responsive Grid Adaptation Breakpoints Track Overrides */
@media (max-width: 1199.98px) {
    .marketing-capsules-flex-row .col-md-6 {
        display: d-flex;
    }
}

@media (max-width: 991.98px) {
    .marketing-gradient-panel-card {
        border-radius: 24px !important;
    }
}

@media (max-width: 767.98px) {
    .marketing-inline-benefits {
        flex-direction: column;
        align-items: center;
        gap: 12px !important;
    }
}

/* ===== SERVICES PAGE CSS END ===== */

/* ===== ABOUT US PAGE CSS START ===== */

/* ==========================================================================
   ABOUT CURA SQUARE: OVERLAPPING HERO CARD STYLES
   ========================================================================== */

.about-cura-hero-section {
    background-color: #ffffff;
    font-family: 'Jost', sans-serif;
    /* Extra padding top to leave space for the head popping out */
    padding-top: 80px !important;
    padding-left: 0;
    padding-right: 0;
}

/* 1. Master Card Housing */
.about-cura-master-card {
    position: relative;
    background-image: url('../images/about-banner-bg.webp');
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    min-height: 650px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    margin-right: 15px;
    /* DO NOT set overflow: hidden here, or the head will be cut off */
}

/* 2. Background Ghost Layer (Clipped strictly inside card) */
.about-cura-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    /* Only clips the ghost image */
    z-index: 1;
}

.ghost-doctor-img {
    position: absolute;
    bottom: 0;
    right: 25%;
    /* Adjust this based on your specific ghost image position */
    height: 90%;
    /* Keeps it inside the card */
    opacity: 0.25;
    /* Fades the image */
    mix-blend-mode: multiply;
    /* Blends nicely with the light blue background */
    object-fit: cover;
}

/* 3. Text Content Container */
.about-cura-content-layer {
    position: relative;
    z-index: 10;
    padding: 60px 60px 60px 70px;
    max-width: 60%;
    /* Prevents text from overlapping the girl */
}

/* Meta Badge Styling */
.about-meta-badge .meta-line {
    display: inline-block;
    width: 35px;
    height: 2px;
    background-color: #05559F;
}

.about-meta-badge .meta-text {
    font-family: var(--font-body), 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #05559F;
    letter-spacing: 0.3px;
}

/* Typography Tuning */
.about-main-heading {
    color: #05559F;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0;
}

.about-main-desc {
    color: #2D3748;
    font-size: 15.5px;
    line-height: 1.65;
    font-weight: 400;
    max-width: 540px;
    margin-bottom: 0;
}

/* 4. Overlapping Main Front Image */
.about-cura-front-image {
    position: absolute;
    bottom: 0;
    right: 0;
    /* Aligned to the right edge */
    height: 120%;
    /* Crucial: 120% height makes it pop out of the top */
    z-index: 5;
    display: flex;
    align-items: flex-start;
    /* Keeps image grounded to the bottom */
}

.front-model-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Perfectly rounds the bottom right corner of the image to match the card */
    border-bottom-right-radius: 32px;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS FOR MOBILES & TABLETS
   ========================================================================== */

@media (max-width: 1199.98px) {
    .about-main-heading {
        font-size: 2rem;
    }

    .about-cura-content-layer {
        padding: 50px 40px;
        max-width: 65%;
    }
}

@media (max-width: 991.98px) {
    .about-cura-master-card {
        flex-direction: column;
        border-radius: 24px;
        padding-top: 40px;
    }

    .about-cura-content-layer {
        max-width: 100%;
        padding: 40px 30px 20px 30px;
        text-align: center;
    }

    .about-meta-badge {
        justify-content: center;
    }

    .about-main-desc {
        margin-left: auto;
        margin-right: auto;
    }

    /* Change image flow on smaller screens so it doesn't break layout */
    .about-cura-front-image {
        position: relative;
        height: auto;
        width: 100%;
        justify-content: center;
        margin-top: 20px;
    }

    .front-model-img {
        max-height: 400px;
        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 24px;
    }

    .ghost-doctor-img {
        right: 0;
        opacity: 0.15;
    }
}

@media (max-width: 575.98px) {
    .about-cura-hero-section {
        padding-top: 40px !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .about-cura-master-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 20px;
        min-height: auto;
        padding-top: 30px;
        padding-bottom: 0;
    }

    .about-main-heading {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .about-main-heading br {
        display: none;
    }

    .about-cura-content-layer {
        padding: 25px 18px 10px 18px;
        max-width: 100%;
    }

    .about-main-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .about-cura-front-image {
        position: relative;
        height: auto;
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }

    .front-model-img {
        max-height: 300px;
        width: 100%;
        object-fit: cover;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .about-meta-badge {
        justify-content: center;
    }

    .about-meta-badge .meta-text {
        font-size: 12px;
    }
}

/* ==========================================================================
   STORY, MISSION, VISION CARDS SECTION (image_dcac25.png)
   ========================================================================== */

.about-values-section {
    background-color: #ffffff;
}

/* Premium Card Structural Baseline */
.value-premium-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 28px;
    /* Clean matching curvature */
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Minimal Hover Physics */
.value-premium-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(32, 94, 146, 0.08);
    border-color: rgba(0, 166, 166, 0.25);
}

/* Gray Round Icon Wrappers */
.value-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f1f3f5;
    /* Light subtle gray base */
    color: #5a6b7c;
    /* Text slate tone */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

/* Section Meta Tag */
.value-meta-tag {
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    letter-spacing: 1px;
}

/* Baskervville Headings Typography */
.value-card-title {
    color: #05559F;
    /* Deep Brand Blue */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

/* Jost Descriptions Typography */
.value-card-desc {
    color: #5a6b7c;
    /* Text slate */
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

/* Responsive Micro-Tuning */
@media (max-width: 1199.98px) {
    .value-premium-card {
        border-radius: 20px;
    }

    .value-card-title {
        font-size: 1.45rem;
    }
}

@media (max-width: 575.98px) {
    .about-values-section .row>div {
        padding-left: 8px;
        padding-right: 8px;
    }

    .value-premium-card {
        border-radius: 18px;
        padding: 1.5rem !important;
    }

    .value-card-title {
        font-size: 1.25rem;
    }

    .value-card-desc {
        font-size: 13px;
    }
}

/* ==========================================================================
   MODERN PARTNER TECH FEATURE SECTION (image_dcafe6.png)
   ========================================================================== */

.partner-tech-section {
    background-color: #ffffff;
}

.tech-main-title {
    color: #05559F;
    /* Core brand blue */
    font-size: 2.85rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.tech-main-desc {
    color: #4a5568;
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 540px;
}

/* 2x2 Minimal Outlined Cards */
.exact-features-grid .exact-grid-item {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    height: 100%;
    transition: all 0.3s ease;
}

.exact-features-grid .exact-grid-item:hover {
    border-color: rgba(0, 166, 166, 0.3);
    background-color: rgba(0, 166, 166, 0.01);
    transform: translateY(-2px);
}

.exact-features-grid .exact-badge-icon-wrap {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background-color: rgba(0, 166, 166, 0.06);
    color: #00A6A6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.exact-features-grid .exact-item-label {
    font-size: 16px;
    font-weight: 500;
    color: #2d3748;
}

/* --- MODERN GRAPHICS INTERACTIVE CANVAS ENGINE --- */
.tech-graphics-canvas {
    width: 100%;
    height: 520px;
}

/* Reusable Glassmorphism White Dashboard Block Standard */
.panel-dashboard-card {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    position: absolute;
    transition: transform 0.4s ease;
}

.shadow-premium-blur {
    box-shadow: 0 30px 60px rgba(32, 94, 146, 0.08),
        inset 0 2px 8px rgba(255, 255, 255, 0.6);
}

.panel-meta-title {
    font-size: 11px;
    font-weight: 600;
    color: #a0aec0;
    letter-spacing: 0.8px;
}

/* Layer 1: Timeline Setup */
.timeline-card {
    width: 380px;
    top: 20px;
    right: 15%;
    z-index: 2;
}

.timeline-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.timeline-row:last-child {
    border-bottom: none;
}

.timeline-row .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.timeline-row .blue-dot {
    background-color: #00A6A6;
}

.timeline-row .green-dot {
    background-color: #10B981;
}

.timeline-row .time {
    font-size: 12px;
    color: #a0aec0;
    font-weight: 500;
}

.timeline-row .label {
    font-size: 14px;
    font-weight: 500;
}

.timeline-row .status-check {
    color: #10B981;
    font-size: 14px;
}

/* Layer 2: PHI Encryption Capsule */
.encryption-badge {
    left: 5%;
    bottom: 160px;
    width: auto;
    max-width: 260px;
    border-radius: 24px;
    z-index: 4;
}

.encryption-badge .lock-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #05559F;
    font-size: 16px;
}

.encryption-badge .badge-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.encryption-badge .badge-sub {
    font-size: 9px;
    font-weight: 500;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

/* Layer 3: Quality Analytics Score Card */
.chart-analytics-card {
    width: 250px;
    bottom: 20px;
    right: 5%;
    z-index: 3;
    border-radius: 24px;
}

.chart-growth-pill {
    font-size: 10px;
    font-weight: 700;
    color: #10B981;
    background-color: #EBFBF5;
    padding: 3px 8px;
    border-radius: 12px;
}

.chart-main-score {
    font-size: 2.25rem;
    font-weight: 700;
    color: #05559F;
    line-height: 1;
}

.chart-sub-label {
    font-size: 9px;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

/* CSS Miniature Micro-Bars setup */
.mini-bar-graph-wrapper {
    width: 100%;
}

.graph-bar {
    width: 8px;
    border-radius: 4px;
    background-color: #CEE3F2;
    /* Standard layout accent blue fade */
}

.graph-bar.active-bar {
    background-color: #00A6A6;
    /* Active highlighted metric */
}

/* Graphic Canvas Hover Multi-Layer Physics */
.tech-graphics-canvas:hover .timeline-card {
    transform: translateY(-5px) scale(1.01);
}

.tech-graphics-canvas:hover .encryption-badge {
    transform: translate(-3px, -2px) scale(1.02);
}

.tech-graphics-canvas:hover .chart-analytics-card {
    transform: translateY(4px) scale(1.01);
}

/* --- RESPONSIVE SCREEN HORIZONS --- */
@media (max-width: 1199.98px) {
    .tech-main-title {
        font-size: 2.35rem;
    }

    .timeline-card {
        right: 5%;
    }
}

@media (max-width: 991.98px) {
    .tech-graphics-canvas {
        height: auto;
        min-height: 460px;
        margin-bottom: 30px;
    }

    .timeline-card {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .encryption-badge {
        bottom: 20px;
        left: 10%;
    }

    .chart-analytics-card {
        bottom: -20px;
        right: 10%;
    }
}

@media (max-width: 575.98px) {
    .tech-main-title {
        font-size: 1.85rem;
    }

    .tech-main-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .exact-features-grid .exact-item-label {
        font-size: 14px;
    }

    .tech-graphics-canvas {
        height: auto;
        min-height: auto;
        flex-direction: column;
        gap: 16px;
        padding: 0 10px;
    }

    .panel-dashboard-card {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .timeline-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .encryption-badge {
        max-width: 100% !important;
    }

    .chart-analytics-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   CORE PRINCIPLES GRID SECTION (image_dcb3ab.png)
   ========================================================================== */

.core-principles-section {
    background-color: #ffffff;
}

/* Master Section Title */
.principles-master-title {
    color: #05559F;
    /* Direct brand deep blue */
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* The subtle light blue outer capsule housing the grid row */
.principles-cards-outer-panel {
    background-color: #f4f8fb;
    /* Extremely subtle ice blue tint background */
    border-radius: 36px;
    border: 1px solid rgba(32, 94, 146, 0.03);
}

/* Individual Minimal Card Design */
.principle-minimal-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px;
    /* Soft smooth corner bounding curves */
    min-height: 220px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ultra-Clean Micro-hover Response */
.principle-minimal-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 166, 166, 0.2);
    box-shadow: 0 12px 30px rgba(32, 94, 146, 0.06);
}

/* Circular Icon Base Shape Parameters */
.principle-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(0, 166, 166, 0.07);
    /* Faded brand blue code backdrop */
    color: #05559F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Headings Typography Tracking */
.principle-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #2d3748;
    /* Dark body slate/charcoal */
    letter-spacing: -0.1px;
}

/* Sub-description Text Track */
.principle-card-desc {
    font-size: 16px;
    font-weight: 400;
    color: #5a6b7c;
    /* Text slate standard */
    line-height: 1.45;
}

/* --- RESPONSIVE MEDIA TRACK OVERRIDES --- */
@media (max-width: 1199.98px) {
    .principles-master-title {
        font-size: 2.15rem;
    }
}

@media (max-width: 991.98px) {
    .principles-cards-outer-panel {
        background-color: transparent;
        /* Fluid padding reset for vertical viewports */
        padding: 0 !important;
        border: none;
    }

    .principle-minimal-card {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .principles-master-title {
        font-size: 1.75rem;
    }

    .principles-cards-outer-panel {
        background-color: transparent;
        padding: 0 !important;
        border: none;
    }

    .principle-minimal-card {
        min-height: auto;
        padding: 1.25rem !important;
        border-radius: 18px;
    }

    .principle-card-title {
        font-size: 14px;
    }

    .principle-card-desc {
        font-size: 14px;
    }
}

/* ==========================================================================
   TEAM MEMBER SHOWCASE SECTION (image_dcb72b.jpg)
   ========================================================================== */

.team-showcase-section {
    background-color: #ffffff;
}

/* Master Core Heading Tracking */
.team-master-title {
    color: #05559F;
    /* Core brand blue */
    font-size: 2.85rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
    max-width: 780px;
}

/* Individual Premium Frame Housing */
.team-profile-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    /* Soft card border radius matching mockup */
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(32, 94, 146, 0.08);
    border-color: rgba(0, 166, 166, 0.25);
}

/* Avatar Image Rounded Inner Mask Container */
.member-image-frame {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Standard square avatar view canvas box */
    background-color: #f8fafc;
}

.member-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.team-profile-card:hover .member-avatar {
    transform: scale(1.03);
}

/* FloatingInitials Core Positioning Overlay Engine */
.member-initials {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    /* Sharp clear dark grey/black look */
    z-index: 5;
    pointer-events: none;
    line-height: 1;
}

/* Metadata Footer Text Elements */
.member-name {
    font-size: 17px;
    font-weight: 600;
    color: #00A6A6;
    /* Layout specific blue tone for the names */
}

.member-role {
    font-size: 11px;
    font-weight: 500;
    color: #a0aec0;
    /* Subdued dark slate text tracking */
    letter-spacing: 0.3px;
}

/* --- FLUID VIEWPORT SCREEN HORIZONS --- */
@media (max-width: 1199.98px) {
    .team-master-title {
        font-size: 2.35rem;
    }
}

@media (max-width: 991.98px) {
    .team-master-title {
        font-size: 2rem;
    }

    .team-profile-card {
        border-radius: 20px;
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .team-master-title {
        font-size: 1.65rem;
    }

    .team-master-title br {
        display: none;
    }

    .team-profile-card {
        max-width: 280px;
        margin: 0 auto;
        border-radius: 18px;
    }

    .member-name {
        font-size: 15px;
    }

    .member-role {
        font-size: 10px;
    }
}

/* ==========================================================================
   CERTIFICATIONS & COMPLIANCE BANNER SECTION (image_dcbad1.png)
   ========================================================================== */

.compliance-banner-section {
    background-color: #ffffff;
}

/* Master Outlined Outer Board Wrapper Panel */
.compliance-master-panel-card {
    background: #ffffff;
    border: 1px solid #b2c4d4;
    /* Faded blue gray thin line outline matching template architecture */
    border-radius: 36px;
    /* Smooth large border corners */
}

/* Baseline Typography Parameters */
.compliance-main-title {
    color: #05559F;
    /* Direct brand deep blue */
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.compliance-main-desc {
    color: #2d3748;
    /* Dark gray charcoal look */
    font-size: 15px;
    line-height: 1.6;
    max-width: 440px;
}

/* 3x2 Matrix Soft Capsule Items Blueprint */
.compliance-badge-item {
    background: #ffffff;
    border: 1px solid rgba(178, 196, 212, 0.35);
    border-radius: 20px;
    /* Softer container curves for small cards */
    min-height: 106px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-hover Responses */
.compliance-badge-item:hover {
    transform: translateY(-3px);
    background-color: rgba(0, 166, 166, 0.02);
    border-color: #00A6A6;
}

/* Minimal Icons setup */
.badge-shield-icon {
    color: #05559F;
    font-size: 16px;
}

.compliance-badge-item:hover .badge-shield-icon {
    transform: scale(1.1);
    color: #00A6A6;
}

/* Badges Labels */
.compliance-badge-item .badge-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #2d3748;
    letter-spacing: -0.1px;
}

/* --- FLUID VIEWPORT SCREEN MEDIA TRACK --- */
@media (max-width: 1199.98px) {
    .compliance-main-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 991.98px) {
    .compliance-master-panel-card {
        border-radius: 24px;
        padding: 2.5rem 1.75rem !important;
    }

    .compliance-main-desc {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px) {
    .compliance-main-title {
        font-size: 1.85rem;
    }

    .compliance-main-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .compliance-badge-item {
        min-height: 80px;
        padding: 0.75rem !important;
    }

    .compliance-badge-item .badge-title {
        font-size: 11px;
    }

    .compliance-master-panel-card {
        border-radius: 20px;
        padding: 1.5rem 1rem !important;
    }
}

/* ===== ABOUT US PAGE CSS END ===== */
/* ==========================================================================
   BLOG PAGE CSS START 
   ========================================================================== */

/* Main Hero Wrapper */
.blog-hero-section {
    background: linear-gradient(180deg, #F8FAFD 0%, #ffffff 100%);
    min-height: 65vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Custom Pill Badge */
.blog-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border: 1px solid rgba(0, 166, 166, 0.3);
    border-radius: 50px;
    color: var(--primary-light);
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.blog-hero-badge i {
    font-size: 13px;
}

.blog-hero-badge:hover {
    background-color: rgba(0, 166, 166, 0.05);
    border-color: var(--primary-light);
}

/* Typography Tuning */
.blog-hero-title {
    color: var(--dark-blue);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.blog-hero-desc {
    color: var(--text-slate);
    font-size: 17px;
    line-height: 1.6;
    max-width: 90%;
    font-weight: 400;
}

/* Floating Animation for the 3D Image */
.blog-floating-img {
    animation: floatUpDown 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(5, 85, 159, 0.08));
}

@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Responsive Adjustments for Mobile & Tablets */
@media (max-width: 991.98px) {
    .blog-hero-section {
        padding-top: 60px;
        text-align: center;
        min-height: auto;
    }

    .blog-hero-desc {
        max-width: 100%;
        margin: 0 auto;
    }

    .blog-hero-title {
        font-size: 2.8rem;
    }

    .blog-hero-badge {
        margin-top: 30px;
    }

    .blog-floating-img {
        margin-top: 40px;
        max-height: 400px !important;
    }
}

@media (max-width: 575.98px) {
    .blog-hero-title {
        font-size: 2.2rem;
        letter-spacing: -0.5px;
    }

    .blog-hero-desc {
        font-size: 15px;
    }
}

/* ===== FEATURED BLOG SECTION CSS ===== */

.featured-blog-card {
    background-color: #F8FBFF;
    /* Very light blue background matching screenshot */
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.featured-img-wrapper {
    position: relative;
    padding: 30px;
}

.featured-badge {
    position: absolute;
    top: 50px;
    left: 50px;
    background: #05559F;
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
}

.featured-img-wrapper img {
    border-radius: 24px;
    width: 100%;
}

.featured-excerpt {
    font-size: 13px;
    color: #5a6b7c;
    margin-top: 15px;
    padding: 0 10px;
}

.featured-content-wrapper {
    padding: 60px 50px;
}

.category-pill {
    color: #05559F;
    font-weight: 600;
    font-size: 14px;
}

.date-read {
    color: #718096;
    font-size: 14px;
}

.featured-title {
    color: #05559F;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.featured-desc {
    color: #4A5568;
    font-size: 16px;
    line-height: 1.6;
}

.author-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
}

.author-info h6 {
    color: #2D3748;
    font-weight: 600;
}

.author-info span {
    font-size: 13px;
    color: #718096;
}

/* Responsive */
@media (max-width: 991px) {
    .featured-content-wrapper {
        padding: 30px;
    }

    .featured-title {
        font-size: 1.8rem;
    }
}

/* Tabs Styling */
#blogTabs .nav-link {
    background-color: #F8FAFD;
    color: #4A5568;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 500;
    transition: 0.3s;
}

#blogTabs .nav-link.active {
    background-color: #05559F !important;
    color: #ffffff !important;
}

/* Card Styling */
.blog-card {
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    transition: all 0.4s ease;
    background: #fff;
    height: 100%;
}

.blog-card img {
    border-radius: 15px 15px 0px 0px;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(5, 85, 159, 0.1);
}

.category-tag {
    color: #00A6A6;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.text-dark-blue {
    color: #05559F;
}

.text-slate {
    color: #5a6b7c;
}

/* Master Container Styling */
.master-container-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 36px;
    /* Rounded corners for the container */
    overflow: hidden;
    /* Ensures the blue background doesn't overflow corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.newsletter-inner-section {
    padding: 60px 40px;
}

.blue-cta-inner-section {
    background-color: #05559F;
    /* Brand Deep Blue */
    padding: 60px 40px;
}

/* Specific elements within container */
.newsletter-inner-section .icon-box {
    width: 45px;
    height: 45px;
    background: #eef6ff;
    color: #05559F;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.input-group .form-control {
    border: 1px solid #e2e8f0;
    padding: 12px 20px;
}

.btn-teal {
    background-color: #00A6A6;
    color: white;
    font-weight: 500;
}

.btn-white {
    background: #ffffff;
    color: #05559F;
    font-weight: 500;
}

.btn-outline-white {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-weight: 500;
}

/* Responsive Fix for Input */
@media (max-width: 767px) {
    .input-group {
        flex-direction: column;
        gap: 10px;
    }

    .input-group .form-control {
        border-radius: 50px !important;
    }

    .input-group .btn {
        border-radius: 50px !important;
        margin-left: 0 !important;
    }
}

/* Blog Detail Specific */
.badge-pill {
    background: #eef6ff;
    color: #05559F;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.blog-content-area p {
    font-size: 18px;
    line-height: 1.8;
    color: #4A5568;
}

.badge-tag {
    background: #f1f5f9;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}

.bg-light-blue {
    background-color: #F8FBFF;
    border: 1px solid #E2E8F0;
}

.text-dark-blue {
    color: #05559F;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.5rem;
    }
}

/* ===== BLOG PAGE CSS END ===== */
/* ==========================================================================
   PROFESSIONAL MODERN BUTTON SYSTEM - CLEAN & MINIMAL
   ========================================================================== */

/* --- Base Professional Button Reset --- */
.btn-hero-consultation-teal,
.btn-hero-consultation,
.btn-custom-signin-outline,
.btn-custom-explore,
.btn-custom-learn-more,
.btn-solid-teal,
.btn-light-teal,
.footer-teal-cta,
.btn-teal,
.btn-white,
.btn-outline-white,
.service-capsule-btn,
.explore-services-btn,
.btn-care-corner,
.btn-custom-signin-outline {
    border-radius: 4px !important;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: none;
    padding: 10px 24px !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
    border: none;
    position: relative;
}

/* Remove all icon wrappers from inside buttons (except consultation/hero CTAs) */
.btn-custom-explore .btn-arrow-circle,
.btn-custom-learn-more .learn-arrow-circle,
.btn-solid-teal .icon-circle,
.btn-light-teal .icon-circle,
.footer-teal-cta .cta-icon-circle,
.explore-services-btn .arrow-circle,
.btn-care-corner .learn-arrow-circle {
    display: none !important;
}

/* --- Professional Consultation CTA Icons --- */
.btn-hero-consultation,
.btn-hero-consultation-teal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 10px 10px 24px !important;
}

.btn-hero-consultation .consultation-icon-circle,
.btn-hero-consultation-teal .consultation-icon-circle-teal {
    display: inline-flex !important;
    border-radius: 4px !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease !important;
    border: none !important;
}

.btn-hero-consultation .consultation-icon-circle {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.btn-hero-consultation-teal .consultation-icon-circle-teal {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.btn-hero-consultation:hover .consultation-icon-circle,
.btn-hero-consultation-teal:hover .consultation-icon-circle-teal {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: translateX(2px) !important;
}

/* --- Solid Button Styles --- */
.btn-hero-consultation,
.btn-custom-learn-more {
    background-color: #05559F !important;
    color: #ffffff !important;
    gap: 0 !important;
}

.btn-hero-consultation-teal,
.btn-custom-explore,
.btn-solid-teal,
.footer-teal-cta,
.btn-teal,
.explore-services-btn,
.btn-care-corner {
    background-color: #00A6A6 !important;
    color: #ffffff !important;
    gap: 0 !important;
}

/* --- Light/Outline Button Styles --- */
.btn-light-teal {
    background-color: #E6F6F6 !important;
    color: #00A6A6 !important;
}

.btn-custom-signin-outline {
    background-color: transparent !important;
    color: #00A6A6 !important;
    border: 1.5px solid #00A6A6 !important;
}

.btn-white {
    background-color: #ffffff !important;
    color: #05559F !important;
}

.btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

/* --- Professional Hover Effects --- */
.btn-hero-consultation:hover,
.btn-custom-learn-more:hover {
    background-color: #003d7a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(5, 85, 159, 0.25) !important;
}

.btn-hero-consultation-teal:hover,
.btn-custom-explore:hover,
.btn-solid-teal:hover,
.footer-teal-cta:hover,
.btn-teal:hover,
.explore-services-btn:hover,
.btn-care-corner:hover {
    background-color: #008f8f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 166, 0.25) !important;
}

.btn-light-teal:hover {
    background-color: #d4f0f0 !important;
    color: #008f8f !important;
    transform: translateY(-1px) !important;
}

.btn-custom-signin-outline:hover {
    background-color: #00A6A6 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 166, 0.2) !important;
}

.btn-white:hover {
    background-color: #f0f4ff !important;
    transform: translateY(-1px) !important;
}

.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px) !important;
}

/* --- Pill/Filter Buttons (keep slightly softer but not pill) --- */
.service-capsule-btn {
    border-radius: 8px !important;
    padding: 10px 24px;
    font-size: 14px;
}

.service-capsule-btn.active-capsule {
    border-radius: 8px !important;
}

/* --- Blog Tabs --- */
#blogTabs .nav-link {
    border-radius: 6px !important;
}

/* --- Newsletter Input Group Buttons --- */
.input-group .btn-teal,
.input-group .btn-white {
    border-radius: 0 6px 6px 0 !important;
}

@media (max-width: 767px) {

    .input-group .btn-teal,
    .input-group .btn-white {
        border-radius: 6px !important;
    }
}

/* --- Swiper Navigation Buttons (keep circular for UX) --- */
.swiper-btn,
.swiper-button-next,
.swiper-button-prev,
.mobile-carousel-btn {
    border-radius: 50% !important;
}

/* --- Page Number Buttons (keep circular) --- */
.anim-page-num {
    border-radius: 50% !important;
}

/* --- Blog Badge Pills (keep as is) --- */
.badge-pill,
.blog-hero-badge,
.category-pill {
    border-radius: 6px !important;
}

/* ===== Study Card PAGE CSS START ===== */
/* Master Case Study Grid Styling */
.case-bg {
    background-image: url('../images/case_study-bg.webp');
    background-size: cover;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-study-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 28px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.case-study-card:hover {
    box-shadow: 0 20px 40px rgba(5, 85, 159, 0.08);
    border-color: #00A6A6;
}

.case-study-card .img-box {
    position: relative;
    padding: 24px 24px 0 24px;
}

.case-study-card .img-box img {
    border-radius: 16px;
    width: 100%;
    transition: transform 0.4s ease;
}

.case-study-card:hover .img-box img {
    transform: scale(1.02);
}

/* Arrow Icon Overlay */
.overlay-arrow {
    position: absolute;
    top: 40px;
    right: 40px;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Card Typography */
.case-study-card h5 {
    font-size: 18px;
    line-height: 1.5;
    color: #05559F;
    /* Brand Blue */
    margin: 0;
}

.text-teal {
    color: #00A6A6;
}

.case-study-card .text-teal {
    font-size: 22px;
}

.case-study-card small {
    font-size: 13px;
    color: #2d3748;
}

.integration-dashboard {
    background: #fff;
    border-radius: 32px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 600px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.live-status-pill {
    background: #e6f6f0;
    color: #10b981;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}



.dashboard-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 32px;
    padding: 30px;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.live-badge-pill {
    background: #e6f6f0;
    color: #10B981;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 20px 0;
}

.int-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #05559F;
    font-weight: 600;
    font-size: 13px;
}

.core-footer-bar {
    background: #05559F;
    border-radius: 16px;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tech-standards {
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

@media (max-width: 768px) {
    .integration-grid {
        gap: 20px;
    }

    .dashboard-container {
        padding: 20px;
    }
}

/* Typography tweak */
.hero-main-title {
    letter-spacing: -1px;
}

.integration-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 50px;
    padding: 8px 20px;
    margin: 0 10px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.marquee-track {
    display: flex;
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Reverse animation for second row */
#marquee-row-2 {
    animation-direction: reverse;
}

.btn-outline-teal {
    border: 1px solid #E2E8F0;
    color: #4A5568;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-outline-teal.active,
.btn-outline-teal:hover {
    background: #00A6A6;
    color: #fff;
    border-color: #00A6A6;
}

.int-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 25px;
    transition: all 0.3s ease;
}

.int-card:hover {
    border-color: #00A6A6;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.ready-badge {
    color: #10B981;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.int-category {
    font-size: 9px;
    color: #A0AEC0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.border-y {
    border-top: 1px solid #05559F;
    border-bottom: 1px solid #05559F;
}

/* Stat Boxes */
.stat-box {
    background: #F8FAFD;
    border-radius: 16px;
    padding: 30px 20px;
    height: 100%;
    transition: 0.3s;
}

.stat-box h4 {
    color: #05559F;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-box small {
    font-size: 9px;
    font-weight: 800;
    color: #5a6b7c;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.stat-box:hover {
    background: #00A6A6;
}

.stat-box:hover h4,
.stat-box:hover small {
    color: #ffffff;
}

/* Industry Pills */
.industry-pill {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #4A5568;
    transition: 0.3s;
}

.industry-pill:hover {
    background: #00A6A6;
    color: #ffffff;
    border-color: #00A6A6;
}

/* ===== TEST COMPLIANCE STATS SECTION ===== */
.section-space {
    padding: 80px 0;
}

.bg-light {
    background-color: #f8fafc;
}

.stats-counter-card {
    background: linear-gradient(135deg, #05559F, #00A6A6);
    border-radius: 16px;
    padding: 50px 20px;
    color: white;
    box-shadow: 0 12px 35px rgba(5, 85, 159, 0.15);
    margin-bottom: 40px;
}

.counter-number {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
    font-family: 'Jost', sans-serif;
}

.counter-label {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.95;
    font-family: 'Jost', sans-serif;
}

.stats-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(5, 85, 159, 0.12);
}

.stats-card-success {
    border-top: 4px solid #198754;
}

.stats-card-warning {
    border-top: 4px solid #ffc107;
}

.stats-card-danger {
    border-top: 4px solid #dc3545;
}

.stats-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.stats-card-success .stats-icon {
    background: rgba(25, 135, 84, 0.08);
    color: #198754;
}

.stats-card-warning .stats-icon {
    background: rgba(255, 193, 7, 0.1);
    color: #cc9a06;
}

.stats-card-danger .stats-icon {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.stats-number {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Jost', sans-serif;
}

.stats-card-success .stats-number {
    color: #198754;
}

.stats-card-warning .stats-number {
    color: #cc9a06;
}

.stats-card-danger .stats-number {
    color: #dc3545;
}

.stats-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 6px;
    font-family: 'Jost', sans-serif;
}

.stats-description {
    font-size: 0.85rem;
    color: #5a6b7c;
    margin-bottom: 16px;
    font-family: 'Jost', sans-serif;
}

.stats-progress {
    margin-top: auto;
}

.stats-progress .progress {
    height: 10px;
    border-radius: 8px;
    background: #e9ecef;
    overflow: hidden;
}

.stats-progress .progress-bar {
    border-radius: 8px;
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-breakdown-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.breakdown-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #5a6b7c;
    font-family: 'Jost', sans-serif;
}

.breakdown-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #05559F;
    font-family: 'Jost', sans-serif;
}

@media (max-width: 768px) {
    .section-space {
        padding: 50px 0;
    }

    .counter-number {
        font-size: 2.5rem;
    }

    .stats-number {
        font-size: 2.2rem;
    }

    .stats-card {
        padding: 20px;
    }
}