:root {



    --ink: #17352d;

    --muted: #65736d;

    --surface: #ffffff;

    --surface-soft: #f5fbf7;

    --line: #dce8df;

    --brand: #126c52;

    --brand-dark: #0d4939;

    --accent: #e6503c;

    --shadow: 0 18px 45px rgba(22, 62, 48, 0.12);



}



* {



    box-sizing: border-box;



}



html {



    scroll-behavior: smooth;



}



body {



    background:



        radial-gradient(circle at top left, rgba(207, 246, 145, 0.22), transparent 34rem),



        linear-gradient(135deg, #fbfff4 0%, #eefbdc 42%, #ffffff 100%);

    background-attachment: fixed;

    color: var(--ink);

    font-family: 'Inter', 'Open Sans', Arial, sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

    padding-top: 69px;



}



body.page-health {



    background:



        radial-gradient(circle at top left, rgba(74, 164, 188, 0.18), transparent 34rem),



        linear-gradient(135deg, #f7fcff 0%, #edf8f6 44%, #ffffff 100%);

    background-attachment: fixed;



}



body.page-livinghealthy {



    background:



        radial-gradient(circle at top left, rgba(255, 209, 102, 0.22), transparent 32rem),



        linear-gradient(135deg, #fbfff4 0%, #eefbdc 46%, #fffaf0 100%);

    background-attachment: fixed;



}



a {



    color: var(--brand);

    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;



}



a:hover {



    color: var(--brand-dark);



}



.navbar-custom .navbar-brand,



.navbar-custom .navbar-text {



    color: #ffffff;

    font-family: 'Inter', sans-serif;

    font-weight: 700;

    letter-spacing: 0;



}



.navbar-custom .nav-item.active .nav-link,



.navbar-custom .nav-item:hover .nav-link {



    color: #ffffff;

    background-color: rgba(255,255,255,0.12);



}



.brand-mark {



    align-items: center;

    background: #ffffff;

    border-radius: 8px;

    display: inline-flex;

    height: 46px;

    justify-content: center;

    margin-right: 0.75rem;

    overflow: hidden;

    padding: 3px;

    box-shadow: 0 8px 18px rgba(7, 45, 35, 0.18);

    position: relative;

    transform-origin: center;

    transition: transform 0.18s ease, box-shadow 0.18s ease;

    width: 46px;

    z-index: 5;



}



.brand-mark img {



    height: 100%;

    object-fit: contain;

    width: 100%;



}



.brand-mark:hover,



.brand-mark:focus {



    box-shadow: 0 12px 28px rgba(7, 45, 35, 0.28);

    outline: none;

    transform: scale(1.18);



}



.brand-mark:focus-visible {



    outline: 3px solid rgba(255,255,255,0.82);

    outline-offset: 3px;



}



.nav-item--signin .nav-link {



    background: #ffffff;

    color: var(--brand) !important;

    margin-left: 0.45rem;



}



.site-hero {



    background:



        linear-gradient(90deg, rgba(11, 57, 45, 0.92), rgba(18, 108, 82, 0.72)),



        url('/images/slider/slider2.jpg') center/cover no-repeat;

    color: #ffffff;

    margin-top: -69px;

    min-height: 560px;

    padding: 170px 0 92px;



}



.site-hero__content {



    max-width: 720px;



}



.site-hero__layout {



    align-items: center;

    display: grid;

    gap: 2rem;

    grid-template-columns: minmax(0, 1fr) 300px;

    justify-content: space-between;



}



.site-hero-panel {



    background: rgba(255,255,255,0.94);

    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 8px;

    box-shadow: 0 22px 46px rgba(7, 45, 35, 0.24);

    color: var(--brand-dark);

    padding: 1.35rem;



}



.site-hero-panel strong {



    color: var(--brand-dark);

    display: block;

    font-size: 2rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.5rem;



}



.site-hero-panel span {



    color: var(--muted);

    display: block;

    font-weight: 700;



}



.site-hero-stats {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 18px 42px rgba(7, 45, 35, 0.2);

    display: grid;

    gap: 0;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 2rem;

    overflow: hidden;



}



.site-hero-stats div {



    border-right: 1px solid var(--line);

    padding: 1.25rem;

    text-align: center;



}



.site-hero-stats div:last-child {



    border-right: 0;



}



.site-hero-stats strong {



    color: var(--brand);

    display: block;

    font-size: 2rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.4rem;



}



.site-hero-stats span {



    color: var(--muted);

    display: block;

    font-weight: 700;



}



.eyebrow {



    color: var(--accent);

    display: inline-block;

    font-size: 0.92rem;

    font-weight: 800;

    letter-spacing: 0;

    margin-bottom: 0.8rem;

    text-transform: uppercase;



}



.site-hero .eyebrow {



    color: #ffd7cf;



}



.site-hero h1 {



    color: #ffffff;

    font-size: 3.5rem;

    font-weight: 800;

    line-height: 1.05;

    margin: 0 0 1.1rem;

    max-width: 680px;



}



.site-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.18rem;

    margin-bottom: 1.6rem;

    max-width: 620px;



}



.page-aboutus .site-hero {



    background:



        linear-gradient(90deg, rgba(7, 45, 35, 0.92) 0%, rgba(18, 108, 82, 0.68) 52%, rgba(216, 92, 72, 0.28) 100%),



        url('/images/aboutus.png') center/cover no-repeat;

    min-height: 0;

    padding: 112px 0 44px;



}



.page-aboutus .site-hero h1 {



    font-size: 3rem;

    margin-bottom: 0.85rem;



}



.page-aboutus .site-hero p {



    font-size: 1.08rem;

    margin-bottom: 1.15rem;



}



.page-aboutus .site-hero-stats {



    margin-top: 1.25rem;



}



.page-aboutus .site-hero-stats div {



    padding: 0.95rem 1.1rem;



}



.page-aboutus .site-hero-stats strong {



    font-size: 1.75rem;



}



.living-hero,

.health-hero {

    height: 520px;

    min-height: 0;

    padding-bottom: 0;

    padding-top: 69px;

}



.health-hero {



    background:



        linear-gradient(90deg, rgba(12, 47, 67, 0.9) 0%, rgba(14, 109, 107, 0.68) 52%, rgba(216, 92, 72, 0.28) 100%),



        url('/images/health_module_banner.png') center/cover no-repeat;



}



.health-hero .health-hero-panel {



    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0 !important;

    min-height: 0 !important;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;



}



.health-hero .health-siddha-triad {



    position: relative;

    top: 85px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    width: 100%;

    margin: 0;

    padding: 0;

    border: none;



}



.health-hero .triad-item {



    min-width: 0;

    width: 100%;



}



.health-hero .eyebrow {



    font-size: 0.92rem;

    font-weight: 800;

    color: #fff4c0;

    letter-spacing: 0.03em;

    text-shadow: 0 2px 5px rgba(0,0,0,0.35);



}



/* Health Hero - Language Switcher Top Left */



.health-hero .health-hero__meta-bar {



    display: flex;

    flex-direction: column-reverse;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 0.4rem;

    margin-bottom: 0.65rem;



}



.living-hero {



    background:



        linear-gradient(90deg, rgba(11, 57, 45, 0.94) 0%, rgba(47, 125, 50, 0.78) 48%, rgba(107, 151, 51, 0.52) 100%),



        url('/images/livinghealthy_module_banner.png') center/cover no-repeat;



}



.living-hero .container,



.health-hero .container,



.living-hero .site-hero__layout,



.health-hero .site-hero__layout {



    height: 100%;



}



.living-hero .site-hero__layout,



.health-hero .site-hero__layout {



    align-items: center;



}



.health-hero h1,



.living-hero h1 {



    font-size: 1.8rem;



}



.health-hero p,



.living-hero p {



    font-size: 1.08rem;

    margin-bottom: 1.2rem;



}



.living-hero .health-hero__meta-bar {



    display: flex !important;

    flex-direction: column-reverse !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    flex-wrap: nowrap !important;

    gap: 0.4rem !important;

    margin-bottom: 0.65rem !important;

    width: 100%;



}



.living-hero .hero-actions {



    gap: 0.6rem;

    margin-top: 0.75rem !important;



}



.living-hero .hero-actions .btn {



    font-size: 0.88rem;

    padding: 0.55rem 0.85rem;

    border-radius: 7px;



}



.page-livinghealthy .living-hero .hero-actions .btn {



    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;



}



.page-livinghealthy .living-hero .hero-actions .btn:nth-child(1) {



    min-width: 181px;



}



.page-livinghealthy .living-hero .hero-actions .btn:nth-child(2) {



    min-width: 189px;



}



.page-livinghealthydetail .living-side-nav {



    padding: 0 !important;

    border: 1px solid #cfe5d8;

    border-radius: 8px;

    overflow: hidden;

    background: transparent !important;

    box-shadow: none !important;

    margin-bottom: 0 !important;



}



.page-livinghealthydetail .living-side-nav__header {



    background: #126c52;

    color: #ffffff;

    padding: 14px 16px;

    margin-bottom: 0 !important;

    border-bottom: none !important;



}



.page-livinghealthydetail .living-side-nav__header .btn {



    background: transparent;

    border-color: rgba(255,255,255,0.6);

    color: #ffffff !important;



}



.page-livinghealthydetail .living-side-nav__header .btn:hover {



    background: rgba(255,255,255,0.12);



}



.page-livinghealthydetail .living-side-nav__header .text-muted {



    color: #d5eee5 !important;



}



.page-livinghealthydetail .living-side-nav__header h4 {



    color: #ffffff !important;



}



.page-livinghealthydetail .living-side-nav__header .border-bottom {



    border-color: rgba(255,255,255,0.25) !important;



}



.living-hero .site-hero__content h1 {



    margin-top: 0.75rem;



}



.health-hero__tagline {



    color: #fff4c0 !important;

    font-size: 1.18rem !important;

    font-weight: 800;

    margin-bottom: 0.55rem !important;



}



.health-hero__badge {



    background: #ffd166;

    border-radius: 8px;

    color: #4a3200;

    display: inline-flex;

    font-size: 0.78rem;

    font-weight: 800;

    line-height: 1;

    margin-left: 0.5rem;

    padding: 0.38rem 0.55rem;

    position: relative;

    top: -0.35rem;

    vertical-align: middle;

    white-space: nowrap;



}



.health-hero__subheading {



    color: rgba(255,255,255,0.94) !important;

    font-size: 0.75rem !important;

    font-weight: 700;

    margin-bottom: 0.75rem !important;

    max-width: 680px !important;



}



.health-hero__description {



    background: rgba(255,255,255,0.13);

    border-left: 4px solid #ffd166;

    border-radius: 8px;

    color: rgba(255,255,255,0.9) !important;

    font-size: 0.62rem !important;

    font-weight: 600;

    line-height: 1.55;

    margin-bottom: 0.95rem !important;

    max-width: 720px !important;

    padding: 0.75rem 0.9rem;



}



.living-hero .health-hero__description {



    background: rgba(7, 45, 35, 0.52);

    color: #ffffff !important;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);



}



.health-hero-panel,



.living-hero-panel {



    align-self: center;



}



.living-hero-panel {



    border-color: rgba(255, 244, 192, 0.68);

    box-shadow: 0 22px 46px rgba(77, 92, 22, 0.2);



}



.living-hero-count {



    border-top: 1px solid var(--line);

    margin-top: 1rem;

    padding-top: 1rem;



}



.living-hero-count strong {



    color: var(--accent);

    font-size: 2.25rem;



}



.living-hero-count span {



    color: var(--brand-dark);



}



.hero-actions {



    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;



}



.health-hero .hero-actions {



    gap: 0.6rem;

    margin-top: 0.75rem !important;



}



.health-hero .hero-actions .btn {



    font-size: 0.88rem;

    padding: 0.55rem 0.85rem;

    border-radius: 7px;



}



.btn {



    border-radius: 8px;

    font-weight: 700;

    padding: 0.75rem 1.1rem;



}



.btn-primary,



.btn-success {



    background-color: var(--accent);

    border-color: var(--accent);

    box-shadow: 0 10px 24px rgba(230, 80, 60, 0.24);



}



.btn-primary:hover,



.btn-success:hover {



    background-color: #c84232;

    border-color: #c84232;



}



.page-shell {



    padding: 36px 0 52px;



}



.site-hero + .page-shell {



    padding-top: 44px;



}



.page-home .page-shell,



.page-health .page-shell,



.page-livinghealthy .page-shell,



.page-aboutus .page-shell,



.page-productcategories .page-shell,



.page-agasthia-rathy-lekshmikanth .page-shell,



.page-brahma-sri-venkatesan-swamigal .page-shell,



.page-lekshmikanth .page-shell,



.page-sundara-meenal .page-shell,



.page-vikrama-pandiyan .page-shell {



    padding-top: 0;



}



.page-home .page-shell .site-hero,



.page-health .page-shell .site-hero,



.page-livinghealthy .page-shell .site-hero,



.page-aboutus .page-shell .site-hero,



.page-productcategories .page-shell .product-hero,



.page-agasthia-rathy-lekshmikanth .page-shell .doctor-profile-hero,



.page-brahma-sri-venkatesan-swamigal .page-shell .doctor-profile-hero,



.page-lekshmikanth .page-shell .doctor-profile-hero,



.page-sundara-meenal .page-shell .doctor-profile-hero,



.page-vikrama-pandiyan .page-shell .doctor-profile-hero {



    left: 50%;

    position: relative;

    transform: translateX(-50%);

    width: 100vw;



}



.page-home .page-shell .site-hero + .section-heading,



.page-health .page-shell .site-hero + .section-heading,



.page-livinghealthy .page-shell .site-hero + .section-heading,



.page-aboutus .page-shell .site-hero + .about-section {



    margin-top: 44px;



}



.page-productcategories .page-shell .product-hero + .product-assurance {



    margin-top: -34px;



}



.page-aboutsiddah .page-shell {



    padding-top: 0;



}



.page-productdetail .page-shell {



    padding-top: 12px;



}



.page-healthdetail .page-shell > .container {



    max-width: none;

    padding-left: 36px;

    padding-right: 36px;



}



.page-livinghealthydetail .page-shell > .container {



    max-width: none;

    padding-left: 36px;

    padding-right: 36px;



}



.section-heading {



    margin: 0 auto 1.4rem;

    max-width: 780px;

    text-align: center;



}



.section-heading h2 {



    color: var(--ink);

    font-size: 2.25rem;

    font-weight: 800;

    margin: 0 0 0.6rem;



}



.section-heading p {



    color: var(--muted);

    font-size: 1.02rem;

    margin: 0;



}



.siddha-intro {



    margin: -36px calc((100% - 100vw) / 2) 2.5rem;



}



.siddha-carousel {



    border-radius: 0;

    box-shadow: var(--shadow);

    overflow: hidden;



}



.siddha-carousel .carousel-item {



    background: var(--brand-dark);

    min-height: 520px;



}



.siddha-carousel .carousel-item::after {



    background: linear-gradient(90deg, rgba(7, 45, 35, 0.88), rgba(7, 45, 35, 0.38), rgba(7, 45, 35, 0.12));

    content: "";

    inset: 0;

    position: absolute;



}



.siddha-carousel > .carousel-inner > .carousel-item > img {



    height: 520px;

    object-fit: cover;



}



.siddha-slide-collage {



    display: grid;

    gap: 0;

    grid-template-columns: 1.25fr 1fr 1fr;

    height: 520px;

    width: 100%;



}



.siddha-slide-collage img {



    background: var(--surface-soft);

    height: 100%;

    object-fit: cover;

    width: 100%;



}



.siddha-slide-collage img:first-child {



    grid-row: span 2;



}



.siddha-slide-collage img:nth-child(2),



.siddha-slide-collage img:nth-child(3) {



    min-height: 260px;



}



.siddha-carousel .carousel-caption {



    bottom: auto !important;

    left: auto !important;

    max-width: 640px;

    padding: 0;

    right: 4% !important;

    text-align: left;

    top: 8% !important;

    transform: none !important;

    z-index: 2;



}



.siddha-carousel .carousel-caption h1 {



    color: #ffffff;

    font-size: 3rem;

    line-height: 1.08;

    margin: 0 0 1rem;



}



.siddha-carousel .carousel-caption p {



    color: rgba(255,255,255,0.9);

    font-size: 1.12rem;

    margin-bottom: 1.4rem;



}



.siddha-carousel .carousel-caption .eyebrow {



    background: rgba(255,255,255,0.92);

    border-radius: 8px;

    color: var(--brand-dark);

    padding: 0.35rem 0.65rem;



}



.siddha-carousel .carousel-indicators {



    bottom: 20px;



}



.siddha-carousel .carousel-indicators li {



    border-radius: 8px;

    height: 5px;

    width: 34px;



}



.siddha-image-credits {



    background: rgba(255,255,255,0.86);

    border: 1px solid var(--line);

    border-radius: 0 0 8px 8px;

    color: var(--muted);

    font-size: 0.78rem;

    margin: 0;

    padding: 0.45rem 1rem;

    text-align: center;



}



.siddha-image-credits a {



    color: var(--brand);

    font-weight: 700;



}



.siddha-story {



    padding-bottom: 1rem;



}



.siddha-feature {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(22, 62, 48, 0.08);

    color: inherit;

    overflow: hidden;



}



.siddha-feature-link:hover {



    box-shadow: var(--shadow);

    color: inherit;

    text-decoration: none;

    transform: translateY(-3px);



}



.siddha-feature img {



    aspect-ratio: 16 / 8;

    display: block;

    object-fit: cover;

    width: 100%;



}



.siddha-feature div {



    padding: 1.1rem;



}



.siddha-feature h3 {



    font-size: 1.08rem;

    margin-bottom: 0.45rem;



}



.siddha-feature p {



    font-size: 0.95rem;

    margin: 0;



}



.siddha-feature span {



    color: var(--brand);

    display: inline-block;

    font-weight: 800;

    margin-top: 0.75rem;



}



.siddha-article-hero {



    background:



        linear-gradient(90deg, rgba(7, 45, 35, 0.9), rgba(18, 108, 82, 0.68)),



        url('/images/slider/banner01.png') center/cover no-repeat;

    border-radius: 8px;

    color: #ffffff;

    margin-bottom: 2rem;

    min-height: 360px;

    padding: 72px 48px;



}



.siddha-article-hero__content {



    max-width: 760px;



}



.siddha-article-hero h1 {



    color: #ffffff;

    font-size: 3rem;

    line-height: 1.08;

    margin-bottom: 1rem;



}



.siddha-article-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.16rem;

    margin: 0;



}



.siddha-article {



    padding-bottom: 2rem;



}



.siddha-article-body,



.siddha-article-aside {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(22, 62, 48, 0.08);



}



.siddha-article-body {



    padding: 2rem;



}



.siddha-article-body h2 {



    font-size: 1.5rem;

    margin: 0 0 0.75rem;



}



.siddha-article-body p + h2 {



    margin-top: 1.8rem;



}



.siddha-article-body p {



    font-size: 1.02rem;



}



.siddha-article-actions {



    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 1.8rem;



}



.siddha-article-aside {



    overflow: hidden;



}



.siddha-article-aside img {



    aspect-ratio: 16 / 10;

    display: block;

    object-fit: cover;

    width: 100%;



}



.siddha-article-aside h3 {



    font-size: 1.2rem;

    margin: 1.2rem 1.2rem 0.7rem;



}



.siddha-article-aside ul {



    color: var(--muted);

    margin: 0;

    padding: 0 1.2rem 1.2rem 2.2rem;



}



.siddha-article-aside li {



    margin-bottom: 0.55rem;



}



.siddha-article-aside .siddha-topic-list {



    list-style: none;

    padding: 0 1.2rem 1.2rem;



}



.siddha-topic-list li {



    margin-bottom: 0.5rem;



}



.siddha-topic-list a {



    background: var(--surface-soft);

    border: 1px solid var(--line);

    border-radius: 8px;

    color: var(--ink);

    display: block;

    font-weight: 700;

    padding: 0.75rem 0.85rem;



}



.siddha-topic-list a:hover {



    background: var(--brand);

    border-color: var(--brand);

    color: #ffffff;

    text-decoration: none;



}



.card-grid {



    row-gap: 1.5rem;



}



.content-card {



    border: 1px solid var(--line) !important;

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(22, 62, 48, 0.08);

    height: 100%;

    overflow: hidden;



}



.content-card:hover {



    box-shadow: var(--shadow);

    transform: translateY(-3px);



}



.content-card .card-img-top,



.content-card > img {



    aspect-ratio: 16 / 10;

    height: auto;

    object-fit: cover;

    width: 100%;



}



.product-card .card-img-top,



.product-card > img {



    aspect-ratio: 1 / 1;

    object-fit: contain;

    padding: 1rem;



}



.content-card .card-body {



    display: flex;

    flex-direction: column;

    padding: 1.15rem;



}



.content-card .card-title {



    font-size: 1.12rem;

    font-weight: 800;

    line-height: 1.3;

    margin-bottom: 0.6rem;



}



.content-card .card-title a {



    color: var(--ink);



}



.content-card .card-title a:hover {



    color: var(--brand);

    text-decoration: none;



}



.content-card .card-text {



    color: var(--muted);

    font-size: 0.95rem;

    margin: 0;



}



.product-hero {



    background:



        linear-gradient(90deg, rgba(10, 58, 45, 0.92) 0%, rgba(92, 86, 29, 0.72) 52%, rgba(216, 92, 72, 0.32) 100%),



        url('/images/products.png') center/cover no-repeat;

    color: #ffffff;

    height: 559px;

    margin-top: -69px;

    min-height: 0;

    padding: 69px 0 0;



}



.product-hero .container,



.product-hero__grid {



    height: 100%;



}



.product-hero__grid {



    align-items: center;

    display: grid;

    gap: 2rem;

    grid-template-columns: minmax(0, 1fr) 300px;



}



.product-hero__content {



    max-width: 760px;



}



.product-hero .eyebrow {



    color: #fff4c0;



}



.product-hero h1 {



    color: #ffffff;

    font-size: 3rem;

    font-weight: 800;

    line-height: 1.05;

    margin: 0 0 1.1rem;

    max-width: 760px;



}



.product-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.08rem;

    margin-bottom: 1.2rem;



}



.product-hero__panel {



    border-color: rgba(255, 244, 192, 0.72);

    box-shadow: 0 22px 46px rgba(92, 86, 29, 0.24);



}



.product-hero .product-hero__description {



    background: rgba(52, 35, 12, 0.42);

    border-left-color: #ffd166;

    color: #ffffff !important;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);



}



.product-hero__count strong {



    color: #b94735;



}



.product-hero__count span {



    color: var(--brand-dark);



}



.product-assurance {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 18px 42px rgba(7, 45, 35, 0.14);

    display: grid;

    gap: 0;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-bottom: 3rem;

    overflow: hidden;

    position: relative;

    z-index: 2;



}



.product-assurance div {



    align-items: center;

    border-right: 1px solid var(--line);

    display: flex;

    gap: 0.75rem;

    min-height: 86px;

    padding: 1rem 1.2rem;



}



.product-assurance div:last-child {



    border-right: 0;



}



.product-assurance i {



    align-items: center;

    background: #e8f7ee;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    flex: 0 0 42px;

    height: 42px;

    justify-content: center;

    width: 42px;



}



.product-assurance span {



    color: var(--brand-dark);

    font-weight: 800;

    line-height: 1.25;



}



.product-category-header {



    align-items: end;

    display: grid;

    gap: 1.5rem;

    grid-template-columns: minmax(0, 1fr) 360px;

    margin-bottom: 1.5rem;



}



.product-category-header h2 {



    color: var(--ink);

    font-size: 2.15rem;

    font-weight: 800;

    line-height: 1.15;

    margin: 0 0 0.45rem;



}



.product-category-header p {



    color: var(--muted);

    margin: 0;

    max-width: 650px;



}



.product-search label {



    color: var(--brand-dark);

    display: block;

    font-size: 0.82rem;

    font-weight: 800;

    margin-bottom: 0.45rem;

    text-transform: uppercase;



}



.product-search div {



    align-items: center;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 24px rgba(22, 62, 48, 0.08);

    display: flex;

    gap: 0.7rem;

    padding: 0 0.95rem;



}



.product-search i {



    color: var(--brand);



}



.product-search input {



    border: 0;

    color: var(--ink);

    flex: 1;

    font: inherit;

    min-width: 0;

    outline: 0;

    padding: 0.95rem 0;



}



.product-category-grid {



    align-items: stretch;



}



.product-category-grid .content-card {



    background: linear-gradient(180deg, #ffffff 0%, #fbfff7 100%);

    border-color: #d4e5da !important;

    position: relative;



}



.product-category-grid .content-card:hover {



    border-color: #a9cfb7 !important;



}



.product-category-grid .content-card > .card-img-top,



.product-category-grid .content-card .card-img-top {



    background:



        radial-gradient(circle at 50% 30%, rgba(198, 236, 159, 0.28), transparent 48%),



        #f7fbf3;

    display: block;

    height: auto;

    width: 100%;



}



.product-category-grid .content-card .card-body {



    min-height: 210px;



}



.product-category-card__tag {



    align-self: flex-start;

    background: #e8f7ee;

    border: 1px solid #c7e8d3;

    border-radius: 8px;

    color: var(--brand-dark);

    display: inline-flex;

    font-size: 0.72rem;

    font-weight: 800;

    margin-bottom: 0.65rem;

    padding: 0.2rem 0.55rem;

    text-transform: uppercase;



}



.product-category-grid .content-card .card-text {



    flex: 1;



}



.product-category-card__cta {



    align-items: center;

    align-self: flex-start;

    background: var(--brand);

    border-radius: 8px;

    color: #ffffff;

    display: inline-flex;

    font-weight: 800;

    gap: 0.45rem;

    margin-top: 1rem;

    padding: 0.62rem 0.85rem;



}



.product-category-card__cta:hover {



    background: var(--brand-dark);

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);



}



.product-empty-state {



    background: #ffffff;

    border: 1px dashed #a9cfb7;

    border-radius: 8px;

    color: var(--muted);

    display: none;

    font-weight: 700;

    padding: 1.2rem;

    text-align: center;



}



.product-help-panel {



    align-items: center;

    background: linear-gradient(135deg, #e8f7ee 0%, #f9fff1 100%);

    border: 1px solid #cfe7d7;

    border-radius: 8px;

    box-shadow: 0 14px 34px rgba(22, 62, 48, 0.1);

    display: grid;

    gap: 1.5rem;

    grid-template-columns: minmax(0, 1fr) auto;

    margin-top: 1.5rem;

    padding: 1.5rem;



}



.product-help-panel h2 {



    color: var(--brand-dark);

    font-size: 1.65rem;

    font-weight: 800;

    line-height: 1.2;

    margin: 0 0 0.6rem;



}



.product-help-panel p {



    color: var(--muted);

    margin: 0;

    max-width: 760px;



}



.product-list-hero {



    align-items: center;

    background:



        linear-gradient(135deg, rgba(18, 108, 82, 0.95), rgba(112, 184, 91, 0.78)),



        url('/images/productcategory_2/rasam.jpg') center/cover no-repeat;

    border-radius: 8px;

    color: #ffffff;

    display: grid;

    gap: 1.5rem;

    grid-template-columns: minmax(0, 1fr) 210px;

    margin-bottom: 1.25rem;

    padding: 2.4rem;



}



.product-list-hero .eyebrow {



    color: #fff4c0;



}



.product-list-hero h1 {



    color: #ffffff;

    font-size: 2.65rem;

    font-weight: 800;

    line-height: 1.08;

    margin: 0 0 0.85rem;



}



.product-list-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.08rem;

    margin: 0;

    max-width: 720px;



}



.product-list-hero__summary {



    background: rgba(255,255,255,0.94);

    border-radius: 8px;

    box-shadow: 0 18px 38px rgba(7, 45, 35, 0.18);

    color: var(--brand-dark);

    padding: 1.2rem;

    text-align: center;



}



.product-list-hero__summary strong {



    display: block;

    font-size: 2.6rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.45rem;



}



.product-list-hero__summary span {



    color: var(--muted);

    font-weight: 800;



}



.product-list-toolbar {



    align-items: end;

    display: grid;

    gap: 1rem;

    grid-template-columns: minmax(180px, auto) minmax(280px, 420px);

    margin-bottom: 1.5rem;



}



.product-list-toolbar > a {



    align-items: center;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 24px rgba(22, 62, 48, 0.08);

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    gap: 0.5rem;

    justify-self: start;

    padding: 0.85rem 1rem;



}



.product-list-toolbar > a:hover {



    background: #e8f7ee;

    border-color: #b8ddc4;

    color: var(--brand-dark);

    text-decoration: none;



}



.product-search--compact {



    width: 100%;



}



.product-list-grid .product-card {



    background: linear-gradient(180deg, #ffffff 0%, #fbfff7 100%);

    border-color: #d4e5da !important;



}



.product-list-grid .product-card > .card-img-top,



.product-list-grid .product-card .card-img-top {



    aspect-ratio: 1 / 1;

    background:



        radial-gradient(circle at 50% 34%, rgba(198, 236, 159, 0.26), transparent 50%),



        #f7fbf3;

    object-fit: contain;

    object-position: center;

    padding: 0.85rem;



}



.product-list-grid .product-card .card-body {



    min-height: 250px;



}



.product-list-card__tag {



    align-self: flex-start;

    background: #fff3df;

    border: 1px solid #f1d8ac;

    border-radius: 8px;

    color: #8d5d1d;

    display: inline-flex;

    font-size: 0.72rem;

    font-weight: 800;

    margin-bottom: 0.65rem;

    padding: 0.2rem 0.55rem;

    text-transform: uppercase;



}



.product-list-grid .product-card .card-text {



    display: -webkit-box;

    flex: 1;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

    overflow: hidden;



}



.product-help-panel--list {



    margin-top: 0.5rem;



}



.product-breadcrumb-wrap {



    margin: -0.25rem 0 0.85rem;



}



.product-breadcrumb-wrap .breadcrumb {



    align-items: center;

    background: linear-gradient(90deg, #fff4df, #e7f7e6);

    border: 0;

    border-radius: 8px;

    box-shadow: 0 10px 24px rgba(7, 45, 35, 0.08);

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

    margin-bottom: 0;

    padding: 0.55rem 0.75rem;



}



.product-breadcrumb-wrap .breadcrumb-item {



    align-items: center;

    display: inline-flex;

    padding-left: 0;



}



.product-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {



    color: rgba(109, 90, 36, 0.62);

    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-size: 0.72rem;

    font-weight: 800;

    padding: 0 0.35rem 0 0.05rem;



}



.product-breadcrumb-wrap .breadcrumb-item a {



    background: rgba(255,255,255,0.84);

    border: 1px solid rgba(216, 92, 72, 0.18);

    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(109, 90, 36, 0.08);

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    line-height: 1.2;

    padding: 0.35rem 0.6rem;



}



.product-breadcrumb-wrap .breadcrumb-item a:hover {



    background: #b94735;

    border-color: #b94735;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);



}



.product-detail-hero {



    align-items: start;

    background:



        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(247, 251, 243, 0.98)) padding-box,



        linear-gradient(120deg, rgba(18, 108, 82, 0.28), rgba(255, 209, 102, 0.68), rgba(216, 92, 72, 0.24)) border-box;

    border: 1px solid transparent;

    border-radius: 8px;

    box-shadow: 0 18px 42px rgba(7, 45, 35, 0.1);

    display: grid;

    gap: 2rem;

    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);

    margin-bottom: 2rem;

    padding: 1.25rem;



}



.product-detail-media {



    align-items: center;

    background:



        radial-gradient(circle at 50% 32%, rgba(255, 209, 102, 0.24), transparent 52%),



        linear-gradient(180deg, #ffffff 0%, #f4fbef 100%);

    border: 1px solid #dcebdd;

    border-radius: 8px;

    display: flex;

    justify-content: center;

    min-height: 420px;

    overflow: hidden;

    padding: 1.25rem;



}



.product-detail-media img {



    display: block;

    height: auto;

    max-height: 390px;

    max-width: 100%;

    object-fit: contain;

    width: 100%;



}



.product-detail-summary {



    padding: 0 0.5rem 0.75rem 0;



}



.product-detail-back {



    align-items: center;

    color: var(--brand);

    display: inline-flex;

    font-size: 0.9rem;

    font-weight: 800;

    gap: 0.4rem;

    margin-bottom: 0.9rem;



}



.product-detail-back:hover {



    color: var(--brand-dark);

    text-decoration: none;



}



.product-detail-kicker {



    background: #fff3df;

    border: 1px solid #f1d8ac;

    border-radius: 8px;

    color: #9b4b1f;

    display: inline-flex;

    font-size: 0.78rem;

    font-weight: 900;

    letter-spacing: 0;

    margin-bottom: 0.95rem;

    padding: 0.35rem 0.65rem;

    text-transform: uppercase;



}



.product-detail-price {



    background:



        linear-gradient(135deg, #fff8e8 0%, #ffffff 52%, #eef9ef 100%) padding-box,



        linear-gradient(135deg, #d85c48, #ffd166, #126c52) border-box;

    border: 1px solid transparent;

    border-radius: 8px;

    box-shadow: 0 18px 34px rgba(109, 90, 36, 0.16);

    margin: 0 0 1rem;

    max-width: 520px;

    padding: 1rem 1.1rem;

    position: relative;



}



.product-detail-price::before {



    background: #d85c48;

    border-radius: 8px 0 8px 0;

    color: #ffffff;

    content: "Best to confirm";

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0;

    padding: 0.28rem 0.55rem;

    position: absolute;

    right: -1px;

    text-transform: uppercase;

    top: -1px;



}



.product-detail-price span {



    color: #9b4b1f;

    display: block;

    font-size: 0.78rem;

    font-weight: 900;

    margin-bottom: 0.25rem;

    text-transform: uppercase;



}



.product-detail-price strong {



    color: #07372b;

    display: block;

    font-family: 'Rubik', 'Inter', sans-serif;

    font-size: 2rem;

    font-weight: 900;

    line-height: 1.05;

    margin-bottom: 0.35rem;



}



.product-detail-price small {



    color: #5f6d43;

    display: block;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1.35;

    max-width: none;

    white-space: nowrap;



}



.product-detail-summary h1 {



    color: #07372b;

    font-family: 'Rubik', 'Inter', sans-serif;

    font-size: 2.25rem;

    font-weight: 800;

    letter-spacing: 0;

    line-height: 1.16;

    margin: 0 0 0.6rem;

    max-width: 760px;

    position: relative;

    text-shadow: 0 1px 0 rgba(255,255,255,0.8);



}



.product-detail-summary h1::after {



    background: linear-gradient(90deg, #d85c48 0%, #ffd166 48%, rgba(18, 108, 82, 0.22) 100%);

    border-radius: 999px;

    content: "";

    display: block;

    height: 5px;

    margin-top: 0.65rem;

    width: 132px;



}



.product-detail-lead {



    color: #52665c;

    font-size: 1.05rem;

    line-height: 1.7;

    margin-bottom: 1.1rem;



}



.product-detail-pills {



    display: flex;

    flex-wrap: wrap;

    gap: 0.6rem;

    margin-bottom: 1.2rem;



}



.product-detail-pills span {



    align-items: center;

    background: #eaf7ee;

    border: 1px solid #cce8d4;

    border-radius: 8px;

    color: var(--brand-dark);

    display: inline-flex;

    font-size: 0.88rem;

    font-weight: 800;

    gap: 0.45rem;

    padding: 0.48rem 0.7rem;



}



.product-detail-pills i {



    color: var(--accent);



}



.product-detail-actions {



    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 1rem;



}



.product-detail-note {



    background: #fff8e8;

    border-left: 4px solid #ffd166;

    border-radius: 8px;

    color: #6d5a24;

    font-size: 0.95rem;

    font-weight: 700;

    margin: 0;

    padding: 0.75rem 0.9rem;



}



.product-detail-sections {



    display: grid;

    gap: 1rem;

    margin-bottom: 2rem;



}



.product-detail-info-card {



    background: #ffffff;

    border: 1px solid #dcebdd;

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(7, 45, 35, 0.08);

    padding: 1.35rem;



}



.product-detail-info-card h2 {



    align-items: center;

    color: #07372b;

    display: block;

    font-family: 'Rubik', 'Inter', sans-serif;

    font-size: 1.48rem;

    font-weight: 900;

    line-height: 1.2;

    margin: 0 0 1.05rem;

    padding-bottom: 0.85rem;

    position: relative;



}



.product-detail-info-card h2::after {



    background: linear-gradient(90deg, rgba(216, 92, 72, 0.48), rgba(255, 209, 102, 0.55), rgba(18, 108, 82, 0.12));

    border-radius: 999px;

    bottom: 0;

    content: "";

    height: 3px;

    left: 0;

    position: absolute;

    width: min(260px, 100%);



}



.product-detail-info-card strong {



    color: var(--ink);

    display: block;

    margin: 0.75rem 0 0.35rem;



}



.product-detail-info-card p {



    color: var(--muted);

    line-height: 1.75;

    margin: 0;



}



.product-detail-richtext {



    color: var(--muted);

    line-height: 1.75;



}



.product-detail-richtext p,



.product-detail-richtext ol,



.product-detail-richtext ul {



    margin-bottom: 0.85rem;



}



.product-detail-richtext p:last-child,



.product-detail-richtext ol:last-child,



.product-detail-richtext ul:last-child {



    margin-bottom: 0;



}



.product-detail-richtext ol,



.product-detail-richtext ul {



    padding-left: 1.3rem;



}



.product-detail-richtext li {



    margin-bottom: 0.35rem;



}



.product-detail-richtext img {



    border-radius: 8px;

    display: block;

    height: auto;

    margin: 0.75rem auto;

    max-width: 100%;



}



.product-detail-video {



    background: #06261e;

    border-radius: 8px;

    overflow: hidden;



}



.product-detail-video iframe,



.videoouter iframe {



    aspect-ratio: 16 / 9;

    display: block;

    height: auto;

    width: 100%;



}



.product-detail-inline-media {



    background: #f7fbf3;

    border: 1px solid var(--line);

    border-radius: 8px;

    margin: 0 0 1rem;

    padding: 0.75rem;



}



.product-detail-inline-media img {



    border-radius: 8px;

    display: block;

    height: auto;

    max-width: 100%;

    width: 100%;



}



.product-detail-audio {



    width: 100%;



}



.product-detail-help,



.product-detail-empty {



    align-items: center;

    background: linear-gradient(135deg, #0b392d 0%, #126c52 70%);

    border-radius: 8px;

    color: #ffffff;

    display: grid;

    gap: 1rem;

    grid-template-columns: minmax(0, 1fr) auto;

    margin-bottom: 1.5rem;

    padding: 1.35rem;



}



.product-detail-help h2,



.product-detail-empty h1 {



    color: #ffffff;

    font-size: 1.65rem;

    margin: 0 0 0.5rem;



}



.product-detail-help p,



.product-detail-empty p {



    color: rgba(255,255,255,0.88);

    margin: 0;

    max-width: 760px;



}



.page-health .section-heading,



.page-home .section-heading,



.page-livinghealthy .section-heading {



    position: relative;



}



.page-health .section-heading::before,



.page-home .section-heading::before,



.page-livinghealthy .section-heading::before {



    background: radial-gradient(circle, rgba(230, 80, 60, 0.16), transparent 62%);

    content: "";

    height: 180px;

    left: 50%;

    pointer-events: none;

    position: absolute;

    top: -70px;

    transform: translateX(-50%);

    width: min(520px, 90vw);

    z-index: -1;



}



.health-card::before {



    background: var(--health-accent-soft, #8bd8bd);

    content: "";

    height: 4px;

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 1;



}



.health-card .card-img-top,



.health-card > img {



    filter: saturate(1.14) contrast(1.04);

    transition: filter 0.2s ease, transform 0.25s ease;



}



.health-card:hover .card-img-top,



.health-card:hover > img {



    filter: saturate(1.25) contrast(1.06);

    transform: scale(1.025);



}



.health-card .card-title a {



    align-items: center;

    display: inline-flex;

    gap: 0.45rem;



}



.health-card .card-title a::after {



    background: var(--health-accent-badge, #58bd99);

    border-radius: 8px;

    color: #ffffff;

    content: "Read";

    font-size: 0.72rem;

    font-weight: 800;

    padding: 0.18rem 0.45rem;



}



.health-topic-intro {



    align-items: center;

    background:



        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,251,247,0.96)) padding-box,



        linear-gradient(90deg, rgba(18, 108, 82, 0.34), rgba(255, 209, 102, 0.72), rgba(230, 80, 60, 0.28)) border-box;

    border: 1px solid transparent;

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    display: flex;

    flex-wrap: nowrap;

    gap: 1rem;

    justify-content: space-between;

    margin: 0.7rem 0 1rem;

    padding: 0.55rem 0.85rem;



}



.health-topic-intro > div:first-child {



    flex: 1;

    min-width: 0;



}



.health-topic-intro .health-section-heading {



    font-size: 1.55rem !important;

    line-height: 1.3;

    font-weight: 700;

    text-align: left;

    margin-bottom: 0.25rem !important;



}



.health-topic-intro p {



    color: var(--brand-dark);

    font-size: 0.82rem;

    font-weight: 600;

    line-height: 1.4;

    margin: 0;

    max-width: none;

    text-align: left;



}



.health-topic-intro span {



    color: var(--accent);



}



.health-topic-intro .health-filter-pills {



    display: flex;

    flex-shrink: 0;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: nowrap;

    white-space: nowrap;

    gap: 0.4rem;



}



.health-topic-intro .health-filter-pills .badge,



.health-topic-intro .health-filter-pills .badge span,



.health-topic-intro .health-filter-pills .badge i {



    color: #ffffff !important;



}



.page-livinghealthy .health-topic-intro span {



    color: #d85c48;



}



.card-grid > div:nth-child(5n + 1) .health-card {



    --health-accent: #18a678;

    --health-accent-soft: #8bd8bd;

    --health-accent-badge: #58bd99;



}



.card-grid > div:nth-child(5n + 2) .health-card {



    --health-accent: #e6503c;

    --health-accent-soft: #f1a79d;

    --health-accent-badge: #eb7d6e;



}



.card-grid > div:nth-child(5n + 3) .health-card {



    --health-accent: #d89c16;

    --health-accent-soft: #efd28a;

    --health-accent-badge: #dfb54e;



}



.card-grid > div:nth-child(5n + 4) .health-card {



    --health-accent: #2f8fbd;

    --health-accent-soft: #98cbe3;

    --health-accent-badge: #69afd0;



}



.card-grid > div:nth-child(5n + 5) .health-card {



    --health-accent: #7c9d1f;

    --health-accent-soft: #c5d684;

    --health-accent-badge: #a9bf4f;



}



.page-livinghealthy .living-card {



    background:



        linear-gradient(#ffffff, #ffffff) padding-box,



        linear-gradient(135deg, rgba(130, 184, 63, 0.34), rgba(255, 209, 102, 0.42)) border-box;



}



.page-livinghealthy .card-grid > div:nth-child(5n + 1) .living-card {



    --health-accent: #6fae35;

    --health-accent-soft: #c9e58b;

    --health-accent-badge: #78a832;



}



.page-livinghealthy .card-grid > div:nth-child(5n + 2) .living-card {



    --health-accent: #d89c16;

    --health-accent-soft: #efd28a;

    --health-accent-badge: #c69013;



}



.page-livinghealthy .card-grid > div:nth-child(5n + 3) .living-card {



    --health-accent: #2f9b72;

    --health-accent-soft: #9eddbb;

    --health-accent-badge: #288b66;



}



.page-livinghealthy .card-grid > div:nth-child(5n + 4) .living-card {



    --health-accent: #6f8f25;

    --health-accent-soft: #d7e39a;

    --health-accent-badge: #8aa53d;



}



.page-livinghealthy .card-grid > div:nth-child(5n + 5) .living-card {



    --health-accent: #d85c48;

    --health-accent-soft: #f3b3a9;

    --health-accent-badge: #cf4d38;



}



.breadcrumb {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;



}



.health-breadcrumb-wrap {



    flex: 0 0 100vw;

    left: 50%;

    margin: -36px 0 1.25rem;

    max-width: 100vw;

    padding: 0;

    position: relative;

    transform: translateX(-50%);

    width: 100vw;



}



.health-breadcrumb-wrap .breadcrumb {



    align-items: center;

    background: linear-gradient(90deg, #dff7e6, #c8efd8);

    border: 0;

    border-radius: 0;

    display: flex;

    gap: 0.45rem;

    margin-bottom: 0;

    padding: 0.9rem 24px;



}



.health-breadcrumb-wrap .breadcrumb-item {



    align-items: center;

    display: inline-flex;

    padding-left: 0;



}



.health-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {



    color: rgba(13, 73, 57, 0.55);

    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-size: 0.72rem;

    font-weight: 800;

    padding: 0 0.35rem 0 0.05rem;



}



.health-breadcrumb-wrap .breadcrumb-item a {



    background: rgba(255,255,255,0.8);

    border: 1px solid rgba(18, 108, 82, 0.18);

    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(18, 108, 82, 0.08);

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    line-height: 1.2;

    padding: 0.45rem 0.7rem;



}



.health-breadcrumb-wrap .breadcrumb-item a:hover {



    background: var(--brand);

    border-color: var(--brand);

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);



}



.nav-tabs {



    border-bottom: 1px solid var(--line);

    gap: 0.35rem;



}



.nav-tabs .nav-link {



    border: 0;

    border-radius: 8px;

    color: var(--brand);

    font-weight: 700;



}



.nav-tabs .nav-link.active {



    background: var(--brand);

    color: #ffffff;



}



.sidenav {



    border: 1px solid #cfe7d7;

    background: linear-gradient(180deg, #ffffff, #f5fbf7);

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(22, 62, 48, 0.06);

    padding: 0px;

    overflow: hidden;



}



.sidenav a {



    display: block;

    color: #17473a;

    padding: 14px 18px 14px 20px;

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    font-weight: 700;

    border-bottom: 1px solid #dceee3;

    position: relative;



}



.sidenav a:hover {



    display: block;

    padding: 14px 18px 14px 20px;

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    text-decoration: none;

    background: #e8f7ee;

    color: var(--brand-dark);



}



.sidenav .active {



    display: block;

    padding: 14px 18px 14px 20px;

    font-family: 'Inter', sans-serif;

    font-size: 15px;

    text-decoration: none;

    background: linear-gradient(90deg, #c9efd5, #e7f8d8);

    color: var(--brand-dark);

    font-weight: 800;



}



.sidenav .active::before {



    background: var(--brand);

    border-radius: 0;

    bottom: 0;

    content: "";

    left: 0;

    position: absolute;

    top: 0;

    width: 5px;



}



.sidenav p {



    background: #ffffff;

    border-bottom: 1px solid #dceee3;

    color: #5e756b;

    font-size: 0.9rem;

    line-height: 1.55;

    margin: 0;

    padding: 12px 18px 14px 20px;



}



.subnav {



    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 24px rgba(22, 62, 48, 0.08);

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    padding: 0.75rem;

    background-color: #ffffff;

    margin-bottom: 1rem;



}



.subnav a {



    background: var(--surface-soft);

    border: 1px solid var(--line);

    color: var(--brand-dark);

    border-radius: 8px;

    padding: 0.6rem 0.8rem;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 20px;

    display: inline-block;



}



.subnav a:hover {



    padding: 0.6rem 0.8rem;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    text-decoration: none;

    background-color: #e8f7ee;

    border-color: #9bd9b5;

    color: var(--brand-dark);

    transform: translateY(-1px);



}



.subnav a.active {



    background: linear-gradient(135deg, var(--brand), #20a36f);

    border-color: var(--brand);

    box-shadow: 0 10px 22px rgba(18, 108, 82, 0.2);

    color: #ffffff;



}



.form-group.required .control-label {



    content:"*";

    color: red;



}



.video_border,



#video_canvas {



    aspect-ratio: 16 / 9;

    border: 0;

    border-radius: 8px;

    box-shadow: var(--shadow);

    display: block;

    height: auto;

    margin: 0 auto 1rem;

    max-width: 100%;

    width: 760px;



}



.videoouter {



    text-align: center;



}



.page-healthdetail .videoouter {



    margin: 0 0 1.5rem;

    padding: 0;



}



.health-video {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 16px 34px rgba(22, 62, 48, 0.14);

    display: block;

    max-width: none;

    width: 100%;



}



.health-content {



    width: 100%;



}



.about-hospital-hero {



    align-items: center;

    background:



        linear-gradient(90deg, rgba(7, 45, 35, 0.92) 0%, rgba(18, 108, 82, 0.68) 52%, rgba(216, 92, 72, 0.28) 100%),



        url('/images/aboutus.png') center/cover no-repeat;

    border-radius: 8px;

    color: #ffffff;

    display: grid;

    gap: 2rem;

    grid-template-columns: minmax(0, 1fr) 300px;

    min-height: 520px;

    padding: 4.5rem 3rem;



}



.about-hospital-hero__content {



    max-width: 790px;



}



.about-hospital-hero h1 {



    color: #ffffff;

    font-size: 3.45rem;

    line-height: 1.05;

    margin-bottom: 1rem;



}



.about-hospital-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.18rem;

    max-width: 680px;



}



.about-hero-actions {



    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 1.5rem;



}



.about-hospital-hero__panel {



    background: rgba(255,255,255,0.94);

    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 8px;

    box-shadow: 0 22px 46px rgba(7, 45, 35, 0.24);

    color: var(--brand-dark);

    padding: 1.35rem;



}



.about-hospital-hero__panel strong {



    display: block;

    font-size: 2rem;

    line-height: 1;

    margin-bottom: 0.5rem;



}



.about-hospital-hero__panel span {



    color: var(--muted);

    font-weight: 700;



}



.about-stats {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 16px 36px rgba(22, 62, 48, 0.1);

    display: grid;

    gap: 0;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin: -44px 2rem 3rem;

    overflow: hidden;

    position: relative;

    z-index: 2;



}



.about-stats div {



    border-right: 1px solid var(--line);

    padding: 1.35rem;

    text-align: center;



}



.about-stats div:last-child {



    border-right: 0;



}



.about-stats strong {



    color: var(--brand);

    display: block;

    font-size: 2rem;

    line-height: 1;

    margin-bottom: 0.4rem;



}



.about-stats span {



    color: var(--muted);

    font-weight: 700;



}



.about-section {



    margin-bottom: 3.2rem;



}



.about-speciality-grid {



    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(3, minmax(0, 1fr));



}



.about-speciality-grid article,



.about-process div,



.about-leader,



.about-location-card,



.about-timeline {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);



}



.about-speciality-grid article {



    padding: 1.35rem;



}



.about-speciality-grid i {



    align-items: center;

    background: #e8f7ee;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    font-size: 1.25rem;

    height: 44px;

    justify-content: center;

    margin-bottom: 1rem;

    width: 44px;



}



.about-speciality-grid h3,



.about-process h3,



.about-leader h3 {



    font-size: 1.08rem;

    margin-bottom: 0.5rem;



}



.about-speciality-grid p,



.about-process p,



.about-leader p,



.about-split p {



    color: var(--muted);

    margin-bottom: 0;



}



.about-split {



    align-items: stretch;

    display: grid;

    gap: 1.5rem;

    grid-template-columns: minmax(0, 1fr) 420px;



}



.about-split > div:first-child {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    padding: 2rem;



}



.about-split h2 {



    font-size: 2.25rem;

    margin-bottom: 1rem;



}



.about-split p + p {



    margin-top: 1rem;



}



.about-timeline {



    padding: 1rem;



}



.about-timeline div {



    border-left: 4px solid #8bd8bd;

    padding: 0.25rem 0 1.25rem 1rem;



}



.about-timeline div:last-child {



    padding-bottom: 0.25rem;



}



.about-timeline strong {



    color: var(--brand-dark);

    display: block;

    font-size: 1.15rem;

    margin-bottom: 0.2rem;



}



.about-timeline span {



    color: var(--muted);



}



.about-approved-story {



    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(243,251,242,0.92));

    border: 1px solid var(--line);

    border-radius: 8px;

    padding: 2rem;



}



.about-story-grid {



    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));



}



.about-story-card {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    padding: 1.35rem;



}



.about-story-card--wide {



    grid-column: 1 / -1;



}



.about-story-card h3 {



    color: var(--brand-dark);

    font-size: 1.12rem;

    margin-bottom: 0.75rem;



}



.about-story-card p,



.about-story-card li {



    color: var(--muted);

    font-size: 0.98rem;

    line-height: 1.7;



}



.about-story-card p:last-child {



    margin-bottom: 0;



}



.about-story-card ul {



    margin: 0;

    padding-left: 1.15rem;



}



.about-story-card li + li {



    margin-top: 0.65rem;



}



.about-story-card--heritage {



    align-items: center;

    background:



        linear-gradient(135deg, #ffffff, #fffaf0);

    border: 1px solid #efd28a;

    display: grid;

    gap: 1.4rem;

    grid-template-columns: 150px minmax(0, 1fr);

    position: relative;



}



.about-story-card--heritage::before {



    border: 1px solid rgba(216, 156, 22, 0.24);

    border-radius: 8px;

    bottom: 10px;

    content: "";

    left: 10px;

    pointer-events: none;

    position: absolute;

    right: 10px;

    top: 10px;



}



.heritage-seal {



    align-items: center;

    background: #ffffff;

    border: 2px solid #d89c16;

    border-radius: 8px;

    box-shadow: 0 14px 30px rgba(111, 82, 13, 0.12);

    color: #6f520d;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 132px;

    position: relative;

    text-align: center;

    z-index: 1;



}



.heritage-seal strong {



    font-size: 3.8rem;

    line-height: 0.9;



}



.heritage-seal span {



    font-size: 0.9rem;

    font-weight: 900;

    letter-spacing: 0;

    margin-top: 0.35rem;

    text-transform: uppercase;



}



.about-story-card--heritage > div:last-child {



    position: relative;

    z-index: 1;



}



.about-story-card--heritage h3 {



    color: #6f520d;

    font-size: 1.45rem;



}



.about-story-card--timeline {



    background: linear-gradient(180deg, #ffffff, #f7fcf8);



}



.about-story-card--timeline ul {



    list-style: none;

    padding-left: 0;

    position: relative;



}



.about-story-card--timeline ul::before {



    background: #cfe7d7;

    bottom: 0.35rem;

    content: "";

    left: 0.45rem;

    position: absolute;

    top: 0.35rem;

    width: 3px;



}



.about-story-card--timeline li {



    padding-left: 2.1rem;

    position: relative;



}



.about-story-card--timeline li::before {



    background: var(--brand);

    border: 4px solid #e8f7ee;

    border-radius: 50%;

    box-shadow: 0 0 0 1px #b6dec4;

    content: "";

    height: 1rem;

    left: 0;

    position: absolute;

    top: 0.25rem;

    width: 1rem;



}



.about-story-card--timeline li strong {



    background: var(--brand);

    border-radius: 8px;

    color: #ffffff;

    display: inline-block;

    margin-bottom: 0.3rem;

    padding: 0.15rem 0.45rem;



}



.about-story-card--first-centre {



    background: linear-gradient(135deg, #126c52, #20a36f);

    color: #ffffff;

    overflow: hidden;

    position: relative;



}



.about-story-card--first-centre h3,



.about-story-card--first-centre p {



    color: #ffffff;

    position: relative;

    z-index: 1;



}



.about-story-card--first-centre p {



    color: rgba(255,255,255,0.9);



}



.first-centre-badge {



    background: rgba(255,255,255,0.94);

    border-radius: 8px;

    box-shadow: 0 14px 30px rgba(7, 45, 35, 0.2);

    color: var(--brand-dark);

    display: inline-block;

    margin: 0.35rem 0 1rem;

    padding: 0.85rem 1rem;

    position: relative;

    z-index: 1;



}



.first-centre-badge strong {



    display: block;

    font-size: 1.35rem;

    line-height: 1;



}



.first-centre-badge span {



    color: var(--muted);

    display: block;

    font-weight: 800;

    margin-top: 0.25rem;



}



.about-story-card--generation {



    display: grid;

    gap: 1rem;

    grid-template-columns: 140px minmax(0, 1fr);

    position: relative;



}



.about-story-card--generation h3 {



    grid-column: 1 / -1;



}



.generation-badge {



    align-items: center;

    align-self: start;

    background: linear-gradient(135deg, #e8f7ee, #f7fbef);

    border: 1px solid #cfe7d7;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 132px;

    padding: 1rem;

    text-align: center;



}



.generation-badge strong {



    color: var(--brand);

    font-size: 3rem;

    line-height: 0.9;



}



.generation-badge span {



    color: var(--brand-dark);

    font-size: 0.82rem;

    font-weight: 900;

    line-height: 1.25;

    margin-top: 0.55rem;

    text-transform: uppercase;



}



.about-story-card--generation p {



    border-left: 4px solid #8bd8bd;

    padding-left: 1rem;



}



.about-story-card--treatment {



    background:



        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(245,251,247,0.96)),



        linear-gradient(135deg, #8bd8bd, #e6503c);

    border-left: 6px solid #20a36f;

    display: grid;

    gap: 0.85rem 1.1rem;

    grid-template-columns: minmax(0, 1fr) 150px;



}



.about-story-card--treatment h3,



.about-story-card--treatment p {



    grid-column: 1;



}



.treatment-stat {



    align-self: center;

    background: #103f34;

    border-radius: 8px;

    box-shadow: 0 14px 30px rgba(7, 45, 35, 0.18);

    color: #ffffff;

    grid-column: 2;

    grid-row: 1 / span 2;

    padding: 1rem;

    text-align: center;



}



.treatment-stat strong {



    display: block;

    font-size: 3rem;

    line-height: 0.95;



}



.treatment-stat span {



    color: rgba(255,255,255,0.84);

    display: block;

    font-size: 0.82rem;

    font-weight: 800;

    line-height: 1.3;

    margin-top: 0.45rem;

    text-transform: uppercase;



}



.about-story-card--grains {



    background:



        radial-gradient(circle at top right, rgba(216, 156, 22, 0.16), transparent 42%),



        #ffffff;

    border-color: #ecd99e;



}



.about-story-card--grains h3 {



    color: #6f520d;



}



.grains-list {



    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin: 0.85rem 0 1rem;



}



.grains-list span {



    background: #fff8df;

    border: 1px solid #efd28a;

    border-radius: 8px;

    color: #6f520d;

    font-size: 0.82rem;

    font-weight: 800;

    padding: 0.38rem 0.55rem;



}



.about-story-card--holistic {



    background:



        radial-gradient(circle at top right, rgba(139, 216, 189, 0.28), transparent 48%),



        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(247,251,239,0.96));

    border-color: #bfe4cc;

    position: relative;



}



.about-story-card--holistic::before {



    display: none;



}



.holistic-pillars {



    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 1rem;



}



.holistic-pillars span {



    align-items: center;

    background: #ffffff;

    border: 1px solid #cfe7d7;

    border-radius: 8px;

    box-shadow: 0 8px 18px rgba(22, 62, 48, 0.06);

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    gap: 0.55rem;

    padding: 0.55rem 0.7rem;



}



.holistic-pillars i {



    align-items: center;

    background: #e8f7ee;

    border: 0;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    height: 32px;

    justify-content: center;

    width: 32px;



}



.about-story-card--team {



    background:



        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,248,252,0.96));

    border-color: #c8e3ef;



}



.about-story-card--team h3 {



    color: #1d5872;



}



.team-disciplines {



    display: grid;

    gap: 0.5rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0.85rem 0 1rem;



}



.team-disciplines span {



    align-items: center;

    background: #ffffff;

    border: 1px solid #c8e3ef;

    border-radius: 8px;

    color: #1d5872;

    display: inline-flex;

    font-size: 0.85rem;

    font-weight: 800;

    min-height: 42px;

    padding: 0.45rem 0.6rem;



}



.team-disciplines span::before {



    background: #2f8fbd;

    border-radius: 50%;

    content: "";

    flex: 0 0 auto;

    height: 8px;

    margin-right: 0.5rem;

    width: 8px;



}



.about-story-card--therapists {



    background:



        linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88)),



        url('/images/faqcategory_74/patru.jpg') right center/cover no-repeat;

    border-color: #cfe7d7;

    position: relative;



}



.about-story-card--therapists h3,



.about-story-card--therapists p,



.therapy-training-mark {



    max-width: 78%;



}



.therapy-training-mark {



    align-items: center;

    background: rgba(232, 247, 238, 0.96);

    border: 1px solid #cfe7d7;

    border-radius: 8px;

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    gap: 0.6rem;

    margin: 0.55rem 0 1rem;

    padding: 0.65rem 0.8rem;



}



.therapy-training-mark i {



    color: var(--brand);

    font-size: 1.1rem;



}



.about-story-card--rejuvenation {



    background:



        radial-gradient(circle at top left, rgba(47, 143, 189, 0.18), transparent 45%),



        linear-gradient(135deg, #ffffff, #f3fbf8);

    border-color: #c8e3ef;



}



.rejuvenation-focus {



    display: grid;

    gap: 0.65rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0.75rem 0 1rem;



}



.rejuvenation-focus span {



    align-items: center;

    background: rgba(255,255,255,0.9);

    border: 1px solid #c8e3ef;

    border-radius: 8px;

    color: #1d5872;

    display: inline-flex;

    font-weight: 800;

    gap: 0.55rem;

    justify-content: center;

    min-height: 54px;

    padding: 0.65rem;

    text-align: center;



}



.rejuvenation-focus i {



    color: #2f8fbd;

    font-size: 1.15rem;



}



.about-story-card--camps {



    background:



        linear-gradient(180deg, #ffffff, #f8fcf9);

    border-color: #cfe7d7;



}



.camp-calendar {



    display: grid;

    gap: 0.75rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0.85rem 0 1rem;



}



.camp-calendar div {



    background: #ffffff;

    border: 1px solid #cfe7d7;

    border-radius: 8px;

    box-shadow: 0 10px 22px rgba(22, 62, 48, 0.08);

    overflow: hidden;

    text-align: center;



}



.camp-calendar span {



    background: var(--brand);

    color: #ffffff;

    display: block;

    font-size: 0.78rem;

    font-weight: 900;

    padding: 0.45rem;

    text-transform: uppercase;



}



.camp-calendar strong {



    color: var(--brand-dark);

    display: block;

    font-size: 1.65rem;

    line-height: 1.05;

    padding: 0.85rem 0.6rem 0.2rem;



}



.camp-calendar small {



    color: var(--muted);

    display: block;

    font-weight: 800;

    padding: 0 0.6rem 0.85rem;



}



.about-story-card--global {



    background:



        radial-gradient(circle at top right, rgba(139, 216, 189, 0.28), transparent 44%),



        linear-gradient(135deg, #103f34, #126c52);

    color: #ffffff;

    overflow: hidden;

    position: relative;



}



.about-story-card--global::after {



    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    content: "";

    height: 220px;

    position: absolute;

    right: -60px;

    top: -60px;

    width: 220px;



}



.about-story-card--global h3,



.about-story-card--global p {



    color: #ffffff;

    position: relative;

    z-index: 1;



}



.about-story-card--global p {



    color: rgba(255,255,255,0.9);



}



.global-reach-header {



    align-items: center;

    background: rgba(255,255,255,0.11);

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 8px;

    display: flex;

    gap: 1rem;

    margin: 0.85rem 0 1rem;

    padding: 1rem;

    position: relative;

    z-index: 1;



}



.global-reach-header i {



    align-items: center;

    background: #ffffff;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    flex: 0 0 auto;

    font-size: 1.8rem;

    height: 58px;

    justify-content: center;

    width: 58px;



}



.global-reach-header strong {



    color: #ffffff;

    display: block;

    font-size: 1.15rem;

    margin-bottom: 0.25rem;



}



.global-reach-header span {



    color: rgba(255,255,255,0.78);

    font-weight: 700;



}



.about-leadership-grid {



    display: grid;

    gap: 1rem;

    grid-template-columns: 1.2fr 1fr 1fr;



}



.about-leadership-grid--doctors {



    grid-template-columns: repeat(3, minmax(0, 1fr));



}



.about-leader {



    background:



        linear-gradient(#ffffff, #ffffff) padding-box,



        linear-gradient(135deg, rgba(24, 166, 120, 0.28), rgba(139, 216, 189, 0.18)) border-box;

    border: 1px solid transparent;

    padding-top: 1.25rem;

    text-align: center;

    overflow: hidden;

    transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.about-leader img {



    aspect-ratio: auto;

    background: #fff4d8;

    border: 6px solid #ff5a5f;

    border-radius: 50%;

    box-shadow:



        0 0 0 7px rgba(255, 209, 102, 0.42),



        0 14px 30px rgba(7, 45, 35, 0.16);

    display: block;

    height: 148px;

    margin: 0 auto;

    object-fit: cover;

    object-position: center top;

    padding: 0;

    width: 148px;



}



.about-leader > a {



    display: inline-block;



}



.about-leader:hover {



    box-shadow: 0 18px 42px rgba(22, 62, 48, 0.14);

    transform: translateY(-4px);



}



.about-leader div {



    padding: 1rem 1.25rem 1.35rem;



}



.about-leader span {



    background: #ffd166;

    border: 1px solid rgba(255, 209, 102, 0.95);

    border-radius: 8px;

    box-shadow: 0 10px 22px rgba(64, 43, 4, 0.12);

    color: #4a3200;

    display: inline-block;

    font-size: 0.78rem;

    font-weight: 800;

    line-height: 1.35;

    margin-bottom: 0.75rem;

    padding: 0.35rem 0.55rem;

    text-transform: none;



}



.about-leader h3 {



    font-size: 1.15rem;

    margin-bottom: 0.55rem;



}



.about-leader h3 a {



    color: var(--ink);



}



.about-leader h3 a:hover {



    color: var(--brand);

    text-decoration: none;



}



.about-leader--placeholder {



    border-style: dashed;



}



.about-leader--placeholder img {



    object-fit: contain;

    padding: 0.65rem;

    opacity: 0.55;



}



.about-leader--row-start {



    grid-column-start: 1;



}



.about-care-model {



    background: linear-gradient(135deg, #f3fbf2, #ffffff);

    border: 1px solid var(--line);

    border-radius: 8px;

    padding: 2rem;



}



.about-process {



    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(4, minmax(0, 1fr));



}



.about-process div {



    padding: 1.25rem;



}



.about-process span {



    color: var(--brand);

    display: block;

    font-size: 0.85rem;

    font-weight: 900;

    margin-bottom: 0.75rem;



}



.about-location {



    display: grid;

    gap: 1rem;

    grid-template-columns: 420px minmax(0, 1fr);



}



.about-location-card {



    padding: 1.6rem;



}



.about-location-card h2 {



    font-size: 1.6rem;



}



.about-location-card address {



    color: var(--muted);

    line-height: 1.7;

    margin: 1rem 0;



}



.about-location-card a {



    color: var(--brand-dark);

    font-weight: 800;



}



.about-map {



    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    min-height: 360px;

    overflow: hidden;



}



.about-map iframe {



    display: block;

    height: 100%;

    min-height: 360px;

    width: 100%;



}



.doctor-profile-hero {



    align-items: center;

    background: linear-gradient(135deg, #0d4939 0%, #126c52 58%, #5da65a 100%);

    border-radius: 0;

    color: #ffffff;

    display: grid;

    gap: 2.5rem;

    grid-template-columns: minmax(0, 1fr) 280px;

    margin: -69px 0 0;

    min-height: 390px;

    padding: 108px max(3rem, calc((100vw - 1140px) / 2)) 3.4rem;



}



.doctor-profile-hero__content {



    max-width: 790px;



}



.doctor-profile-hero .eyebrow {



    color: #fff4c0;



}



.doctor-profile-hero h1 {



    color: #ffffff;

    font-size: 2.65rem;

    font-weight: 800;

    line-height: 1.05;

    margin: 0 0 1rem;

    white-space: nowrap;



}



.doctor-profile-hero p {



    color: rgba(255,255,255,0.9);

    font-size: 1.18rem;

    margin: 0;

    max-width: 680px;



}



.doctor-profile-actions {



    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 1.15rem;



}



.doctor-profile-avatar {



    align-items: center;

    display: flex;

    flex-direction: column;

    justify-self: end;

    max-width: 260px;

    text-align: center;

    transform: translateY(-18px);



}



.doctor-profile-avatar img {



    background: #ffffff;

    border: 7px solid rgba(255,255,255,0.92);

    border-radius: 50%;

    box-shadow: 0 22px 46px rgba(7, 45, 35, 0.3);

    display: block;

    height: 220px;

    object-fit: cover;

    object-position: center top;

    width: 220px;



}



.doctor-profile-avatar span {



    background: #ffd166;

    border: 1px solid rgba(255, 209, 102, 0.95);

    border-radius: 8px;

    box-shadow: 0 12px 26px rgba(64, 43, 4, 0.18);

    color: #4a3200;

    display: inline-block;

    font-size: 0.78rem;

    font-weight: 800;

    line-height: 1.25;

    margin-top: 0.55rem;

    max-width: 230px;

    padding: 0.42rem 0.65rem;



}



.doctor-profile-stats {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 18px 42px rgba(7, 45, 35, 0.12);

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin: -42px 2rem 3rem;

    overflow: hidden;

    position: relative;

    z-index: 2;



}



.doctor-profile-stats div {



    border-right: 1px solid var(--line);

    padding: 1.25rem;

    text-align: center;



}



.doctor-profile-stats div:last-child {



    border-right: 0;



}



.doctor-profile-stats strong {



    color: var(--brand);

    display: block;

    font-size: 1.85rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.45rem;



}



.doctor-profile-stats span {



    color: var(--muted);

    font-weight: 700;



}



.doctor-profile-section {



    margin-bottom: 3.2rem;



}



.doctor-profile-story {



    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));



}



.doctor-profile-story article {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    color: var(--muted);

    padding: 1.25rem;



}



.doctor-profile-story__lead,



.doctor-profile-story__wide {



    grid-column: span 2;



}



.doctor-profile-story__lead {



    align-items: center;

    background:



        linear-gradient(135deg, #1f5b49 0%, #126c52 52%, #f0b83b 100%) !important;

    border: 0 !important;

    box-shadow: 0 18px 42px rgba(7, 45, 35, 0.18) !important;

    color: #ffffff !important;

    display: grid;

    gap: 1.25rem;

    grid-template-columns: 150px minmax(0, 1fr);

    overflow: hidden;

    position: relative;



}



.doctor-profile-story__lead::after {



    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 8px;

    bottom: 12px;

    content: "";

    left: 12px;

    pointer-events: none;

    position: absolute;

    right: 12px;

    top: 12px;



}



.doctor-profile-story__mark {



    align-items: center;

    background: rgba(255,255,255,0.95);

    border-radius: 8px;

    color: var(--brand-dark);

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 130px;

    padding: 1rem;

    position: relative;

    z-index: 1;



}



.doctor-profile-story__mark strong {



    color: var(--accent);

    display: block;

    font-size: 3rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 0.35rem;



}



.doctor-profile-story__mark span {



    color: var(--brand-dark) !important;

    font-size: 0.82rem !important;

    margin: 0 !important;



}



.doctor-profile-story__lead > div:last-child {



    position: relative;

    z-index: 1;



}



.doctor-profile-story__lead span {



    color: #fff4c0;

    display: block;

    font-size: 0.82rem;

    font-weight: 800;

    margin-bottom: 0.45rem;

    text-transform: uppercase;



}



.doctor-profile-story__lead p {



    color: rgba(255,255,255,0.94);

    font-size: 1.18rem;

    font-weight: 700;

    line-height: 1.55;



}



.doctor-profile-story i {



    align-items: center;

    background: #e8f7ee;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    height: 42px;

    justify-content: center;

    margin-bottom: 0.85rem;

    width: 42px;



}



.doctor-profile-story h3 {



    color: var(--brand-dark);

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.25;

    margin: 0 0 0.6rem;



}



.doctor-profile-story p {



    margin: 0;



}



.doctor-timeline {



    display: grid;

    gap: 1.25rem 0;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    position: relative;



}



.doctor-timeline::before {



    background: linear-gradient(180deg, var(--brand), #70b85b, var(--accent));

    border-radius: 999px;

    bottom: 0;

    content: "";

    left: 50%;

    position: absolute;

    top: 0;

    transform: translateX(-50%);

    width: 4px;



}



.doctor-timeline div {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    margin-right: 2.2rem;

    padding: 1.25rem;

    position: relative;



}



.doctor-timeline div:nth-child(even) {



    grid-column: 2;

    margin-left: 2.2rem;

    margin-right: 0;



}



.doctor-timeline div:nth-child(odd) {



    grid-column: 1;



}



.doctor-timeline div::before {



    background: #ffffff;

    border: 4px solid var(--brand);

    border-radius: 50%;

    box-shadow: 0 0 0 5px rgba(18, 108, 82, 0.12);

    content: "";

    height: 18px;

    position: absolute;

    right: -2.2rem;

    top: 1.55rem;

    transform: translate(50%, 0);

    width: 18px;

    z-index: 2;



}



.doctor-timeline div:nth-child(even)::before {



    left: -2.2rem;

    right: auto;

    transform: translate(-50%, 0);



}



.doctor-timeline span {



    background: #e8f7ee;

    border: 1px solid #c7e8d3;

    border-radius: 8px;

    color: var(--brand-dark);

    display: inline-flex;

    font-weight: 800;

    margin-bottom: 0.75rem;

    padding: 0.25rem 0.65rem;



}



.doctor-timeline p {



    color: var(--muted);

    margin: 0;



}



.doctor-program-grid {



    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(3, minmax(0, 1fr));



}



.doctor-program-grid article {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);

    padding: 1.25rem;



}



.doctor-program-grid__wide {



    grid-column: span 3;



}



.doctor-program-grid i {



    align-items: center;

    background: #e8f7ee;

    border-radius: 8px;

    color: var(--brand);

    display: inline-flex;

    height: 44px;

    justify-content: center;

    margin-bottom: 0.85rem;

    width: 44px;



}



.doctor-program-grid h3,



.doctor-location-card h2 {



    color: var(--brand-dark);

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.25;

    margin: 0 0 0.6rem;



}



.doctor-program-grid p {



    color: var(--muted);

    margin: 0;



}



.doctor-location {



    display: grid;

    gap: 1rem;

    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);



}



.doctor-location-card,



.doctor-map {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 12px 30px rgba(22, 62, 48, 0.08);



}



.doctor-location-card {



    padding: 1.5rem;



}



.doctor-location-card p,



.doctor-location-card address {



    color: var(--muted);



}



.doctor-location-card address {



    font-style: normal;

    margin-bottom: 1rem;



}



.doctor-map {



    min-height: 360px;

    overflow: hidden;



}



.doctor-map iframe {



    display: block;

    height: 100%;

    min-height: 360px;

    width: 100%;



}



@media (max-width: 991.98px) {



    .about-hospital-hero,



    .about-split,



    .about-location,


    .doctor-profile-hero,



    .doctor-location {



        grid-template-columns: 1fr;

    }



    .about-hospital-hero {



        padding: 3.5rem 2rem;

    }



    .about-hospital-hero h1 {



        font-size: 2.55rem;

    }



    .about-stats,



    .about-speciality-grid,



    .about-story-grid,



    .about-leadership-grid,



    .about-leadership-grid--doctors,



    .about-process,



    .doctor-profile-stats,



    .doctor-profile-story,



    .doctor-program-grid {



        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .about-stats {



        margin-left: 0;

        margin-right: 0;

    }



}



@media (max-width: 767.98px) {



    .about-hospital-hero {



        padding: 2.5rem 1.25rem;

    }



    .doctor-profile-hero {



        margin-top: -66px;

        min-height: auto;

        padding: 95px 1.25rem 2.4rem;

    }



    .doctor-profile-avatar {



        justify-self: start;

        max-width: 240px;

        transform: none;

    }



    .doctor-profile-avatar img {



        height: 190px;

        width: 190px;

    }



    .about-hospital-hero h1 {



        font-size: 2.05rem;

    }



    .doctor-profile-hero h1 {



        font-size: 2.05rem;

        white-space: normal;

    }



    .about-stats,



    .about-speciality-grid,



    .about-story-grid,



    .about-leadership-grid,



    .about-leadership-grid--doctors,



    .about-process,



    .doctor-profile-stats,



    .doctor-profile-story,



    .doctor-timeline,



    .doctor-program-grid {



        grid-template-columns: 1fr;

    }



    .doctor-program-grid__wide {



        grid-column: auto;

    }



    .doctor-profile-story__lead,



    .doctor-profile-story__wide {



        grid-column: auto;

    }



    .doctor-profile-story__lead {



        grid-template-columns: 1fr;

    }



    .doctor-profile-story__mark {



        align-items: flex-start;

        min-height: auto;

    }



    .doctor-profile-stats {



        margin-left: 0;

        margin-right: 0;

    }



    .doctor-profile-stats div {



        border-bottom: 1px solid var(--line);

        border-right: 0;

    }



    .doctor-profile-stats div:last-child {



        border-bottom: 0;

    }



    .doctor-timeline::before {



        left: 9px;

        transform: none;

    }



    .doctor-timeline div,



    .doctor-timeline div:nth-child(even),



    .doctor-timeline div:nth-child(odd) {



        grid-column: 1;

        margin-left: 2rem;

        margin-right: 0;

    }



    .doctor-timeline div::before,



    .doctor-timeline div:nth-child(even)::before {



        left: -2rem;

        right: auto;

        transform: translate(-50%, 0);

    }



    .about-approved-story {



        padding: 1.25rem;

    }



    .about-stats div {



        border-right: 0;

        border-bottom: 1px solid var(--line);

    }



    .about-stats div:last-child {



        border-bottom: 0;

    }



    .about-care-model,



    .about-split > div:first-child {



        padding: 1.25rem;

    }



    .about-story-card--generation {



        grid-template-columns: 1fr;

    }



    .about-story-card--generation p {



        border-left: 0;

        padding-left: 0;

    }



    .about-story-card--treatment {



        grid-template-columns: 1fr;

    }



    .about-story-card--treatment h3,



    .about-story-card--treatment p,



    .treatment-stat {



        grid-column: auto;

        grid-row: auto;

    }



    .about-story-card--heritage {



        grid-template-columns: 1fr;

    }



}



.disclaimer {



    font-family: 'Inter', sans-serif;

    font-size: 14px;

    line-height: 1.7;



}



footer {



    position: relative;

    clear:both;

    margin-top: 2rem;

    padding: 48px 0;

    background: #103f34;

    border-top: 4px solid #8bd8bd;

    color: #FFFFFF;

    text-align: left;

    vertical-align: middle;



}



.footer-shell {



    padding-left: 0;

    padding-right: 0;



}



.footer-inner {



    max-width: 1440px;

    padding-left: 32px;

    padding-right: 32px;



}



.footer-content {



    align-items: flex-start;

    row-gap: 1.5rem;



}



.footer-brand h2,



.footer-contact h3,



.footer-social h3 {



    color: #ffffff;

    font-size: 0.95rem;

    letter-spacing: 0;

    margin-bottom: 0.85rem;

    text-transform: uppercase;



}



.footer-brand h2 {



    font-size: 1.15rem;

    text-transform: none;



}



.footer-brand p,



.footer-contact address,



.footer-contact p {



    color: rgba(255,255,255,0.86);

    margin-bottom: 0;



}



.footer-brand,



.footer-contact,



.footer-social {



    position: relative;



}



.footer-contact,



.footer-social {



    border-left: 1px solid rgba(255,255,255,0.16);

    padding-left: 2rem;



}



.footer-contact a {



    color: #ffffff;

    font-weight: 700;



}



.footer-contact a:hover {



    color: #d9f5c4;

    text-decoration: none;



}



.footer-social-links {



    display: grid;

    gap: 0.65rem;

    max-width: 260px;



}



.footer-social-links a {



    align-items: center;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 8px;

    color: #ffffff;

    display: inline-flex;

    font-weight: 700;

    gap: 0.65rem;

    padding: 0.7rem 0.85rem;



}



.footer-social-links a:hover {



    background: rgba(255,255,255,0.2);

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-2px);



}



.footer-social-links i {



    font-size: 1.1rem;

    width: 1.2rem;



}



@media (max-width: 991.98px) {



    .footer-inner {



        padding-left: 20px;

        padding-right: 20px;

    }



    .footer-contact,



    .footer-social {



        border-left: 0;

        padding-left: 15px;

    }



    .footer-social-links {



        max-width: none;

    }



}



h1, h2, h3, h4, h5 {



    color: var(--ink);

    font-family: 'Inter', sans-serif;

    font-weight: 800;

    letter-spacing: 0;



}



p {



    color: var(--muted);



}



.detail-layout {



    align-items: flex-start;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(22, 62, 48, 0.08);

    padding: 1rem;



}



.detail-media {



    background: var(--surface-soft);

    border-radius: 8px;

    overflow: hidden;



}



.detail-media img,



.thumbnail img,



.img-responsive {



    border-radius: 8px;

    display: block;

    height: auto;

    max-width: 100%;

    object-fit: contain;

    width: 100%;



}



.detail-content h1 {



    font-size: 2.35rem;

    margin-bottom: 0.8rem;



}



.detail-content h3 {



    border-top: 1px solid var(--line);

    font-size: 1.25rem;

    margin-top: 1.4rem;

    padding-top: 1.2rem;



}



/*



 * Used in Login Page



 */



.modal .modal-header {



    padding: 23px 26px;

    border-bottom: 1px solid transparent;

    background: var(--brand);

    color: #ffffff;



}



.modal .modal-footer {



    background-color: var(--surface-soft);



}



.inputWithIcon input[type="text"] {



    width: 100%;

    border: 1px solid var(--line);

    border-radius: 4px;

    margin: 8px 0;

    outline: none;

    padding: 8px;

    box-sizing: border-box;

    transition: 0.3s;

    padding-left: 50px;



}



.inputWithIcon input[type="text"]:focus {



    border-color: var(--brand);

    box-shadow: 0 0 0 3px rgba(18, 108, 82, 0.12);



}



.inputWithIcon input[type="password"] {



    width: 100%;

    border: 1px solid var(--line);

    border-radius: 4px;

    margin: 8px 0;

    outline: none;

    padding: 8px;

    box-sizing: border-box;

    transition: 0.3s;

    padding-left: 50px;



}



.inputWithIcon input[type="password"]:focus {



    border-color: var(--brand);

    box-shadow: 0 0 0 3px rgba(18, 108, 82, 0.12);



}



.inputWithIcon {



    position: relative;



}



.inputWithIcon i {



    position: absolute;

    left: 10px;

    top: 12px;

    padding: 9px 5px;

    color: #aaa;

    transition: 0.3s;



}



.inputWithIcon input[type="text"]:focus + i {



    color: var(--brand);



}



.inputWithIcon.inputIconBg i {



    background-color: #aaa;

    color: #fff;

    padding: 9px 4px;

    border-radius: 4px 0 0 4px;



}



.inputWithIcon.inputIconBg input[type="text"]:focus + i {



    color: #fff;

    background-color: var(--brand);



}



.error {



    color: red;



}



@media (max-width: 991.98px) {



    body {



        padding-top: 66px;

    }



    .navbar-custom .navbar-nav {



        padding-top: 0.75rem;

    }



    .nav-item--signin .nav-link {



        margin-left: 0;

        margin-top: 0.4rem;

        text-align: center;

    }



    .site-hero {



        margin-top: -66px;

        min-height: 500px;

        padding: 140px 0 70px;

    }



    .site-hero h1 {



        font-size: 2.5rem;

    }



    .product-hero {



        margin-top: -66px;

        min-height: 0;

        padding: 66px 0 0;

    }



    .product-hero__grid,



    .product-category-header,



    .product-help-panel,



    .product-list-hero,



    .product-list-toolbar {



        grid-template-columns: 1fr;

    }



    .product-hero h1 {



        font-size: 2.5rem;

    }



    .product-hero__panel {



        max-width: 620px;

    }



    .product-detail-hero,



    .product-detail-help,



    .product-detail-empty {



        grid-template-columns: 1fr;

    }



    .product-detail-summary {



        padding: 0;

    }



    .product-detail-media {



        min-height: 340px;

    }



    .product-assurance {



        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .product-assurance div:nth-child(2n) {



        border-right: 0;

    }



    .product-assurance div:nth-child(-n+2) {



        border-bottom: 1px solid var(--line);

    }



    .site-hero__layout {



        align-items: flex-start;

        grid-template-columns: 1fr;

    }



    .site-hero-panel {



        max-width: 620px;

        width: 100%;

    }



    .site-hero-stats {



        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .site-hero-stats div:nth-child(2n) {



        border-right: 0;

    }



    .site-hero-stats div:nth-child(-n+2) {



        border-bottom: 1px solid var(--line);

    }



    .siddha-carousel .carousel-item,



    .siddha-carousel > .carousel-inner > .carousel-item > img,



    .siddha-slide-collage {



        height: 460px;

        min-height: 460px;

    }



    .siddha-slide-collage img:nth-child(2),



    .siddha-slide-collage img:nth-child(3) {



        min-height: 230px;

    }



    .siddha-carousel .carousel-caption h1 {



        font-size: 2.35rem;

    }



    .siddha-article-hero {



        padding: 54px 32px;

    }



    .siddha-article-hero h1 {



        font-size: 2.35rem;

    }



    .siddha-article-aside {



        margin-top: 1rem;

    }



}



@media (max-width: 767.98px) {



    .site-hero h1 {



        font-size: 2.05rem;

    }



    .site-hero p,



    .product-hero p,



    .section-heading p {



        font-size: 1rem;

    }



    .product-hero h1 {



        font-size: 2.05rem;

    }



    .section-heading h2,



    .detail-content h1 {



        font-size: 1.8rem;

    }



    .hero-actions .btn {



        width: 100%;

    }



    .product-hero__actions .btn,



    .product-help-panel .btn {



        width: 100%;

    }



    .product-assurance {



        grid-template-columns: 1fr;

    }



    .product-assurance div,



    .product-assurance div:nth-child(2n),



    .product-assurance div:nth-child(-n+2) {



        border-bottom: 1px solid var(--line);

        border-right: 0;

    }



    .product-assurance div:last-child {



        border-bottom: 0;

    }



    .product-category-header h2 {



        font-size: 1.8rem;

    }



    .health-topic-intro p {



        text-align: center;

    }



    .product-list-hero {



        padding: 1.5rem;

    }



    .product-list-hero h1 {



        font-size: 2rem;

    }



    .product-detail-hero {



        padding: 0.9rem;

    }



    .product-detail-media {



        min-height: 260px;

        padding: 0.8rem;

    }



    .product-detail-summary h1 {



        font-size: 1.85rem;

    }



    .product-detail-actions .btn,



    .product-detail-help .btn,



    .product-detail-empty .btn {



        width: 100%;

    }



    .site-hero-stats {



        grid-template-columns: 1fr;

    }



    .site-hero-stats div,



    .site-hero-stats div:nth-child(2n) {



        border-bottom: 1px solid var(--line);

        border-right: 0;

    }



    .site-hero-stats div:last-child {



        border-bottom: 0;

    }



    .siddha-carousel .carousel-item,



    .siddha-carousel > .carousel-inner > .carousel-item > img,



    .siddha-slide-collage {



        height: 500px;

        min-height: 500px;

    }



    .siddha-slide-collage {



        grid-template-columns: 1fr;

    }



    .siddha-slide-collage img {



        height: 100%;

    }



    .siddha-slide-collage img:first-child {



        grid-row: auto;

    }



    .siddha-slide-collage img:nth-child(2),



    .siddha-slide-collage img:nth-child(3) {



        display: none;

    }



    .siddha-carousel .carousel-item::after {



        background: linear-gradient(180deg, rgba(7, 45, 35, 0.35), rgba(7, 45, 35, 0.92));

    }



    .siddha-carousel .carousel-caption {



        bottom: 58px;

        left: 18px;

        max-width: calc(100% - 36px);

        top: auto;

        transform: none;

    }



    .siddha-carousel .carousel-caption h1 {



        font-size: 1.85rem;

    }



    .siddha-carousel .carousel-caption p {



        font-size: 1rem;

    }



    .siddha-carousel .btn {



        width: 100%;

    }



    .siddha-article-hero {



        padding: 42px 22px;

    }



    .siddha-article-hero h1 {



        font-size: 2rem;

    }



    .siddha-article-body {



        padding: 1.2rem;

    }



    .siddha-article-actions .btn {



        width: 100%;

    }



    .detail-layout {



        padding: 0.75rem;

    }



    .sidenav {



        margin-bottom: 1rem;

    }



}



@media (max-width: 991.98px) {



    .page-aboutus .site-hero {



        padding: 100px 0 36px;

    }



    .page-aboutus .site-hero h1 {



        font-size: 2.5rem;

    }



}



@media (max-width: 767.98px) {



    .page-aboutus .site-hero {



        padding: 88px 0 30px;

    }



    .page-aboutus .site-hero h1 {



        font-size: 2.05rem;

    }



    .page-aboutus .site-hero-stats {



        margin-top: 1rem;

    }



}



/* ==========================================================================



   AGASTHIAR SIDDHA HEALTH MODULE MODERNIZED STYLING (SRS v1.3)



   ========================================================================== */



/* Tamil glyph typography support */



[lang="ta"], .health-tamil {



    font-family: 'Mukta Malar', 'Noto Sans Tamil', 'Inter', sans-serif;

    line-height: 1.75;



}



/* Health Hero Meta & Language Switcher */



.health-hero__meta-bar {



    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 0.75rem;



}



.health-lang-switcher {



    display: inline-flex;

    align-items: center;

    background: rgba(7, 45, 35, 0.45);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 15px;

    padding: 0.1rem 0.35rem;

	gap:0px;



}



.health-lang-btn {



    color: rgba(255, 255, 255, 0.85);

    font-size: 0.68rem;

    font-weight: 700;

    padding: 0.12rem 0.4rem;

    border-radius: 12px;

    text-decoration: none;

    transition: all 0.2s ease;



}



.health-lang-btn:hover {



    color: #ffffff;

    text-decoration: none;



}



.health-lang-btn.active {



    background: var(--brand);

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);



}



.health-lang-divider {



    color: rgba(255, 255, 255, 0.35);

    margin: 0 0.1rem;

    font-size: 0.65rem;



}



/* Prominent Public Search Bar */



.health-search-bar {



    max-width: 560px;

    margin: 0.85rem 0 0.4rem;



}



.health-search-bar .input-group {



    background: #ffffff;

    border-radius: 30px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);

    overflow: hidden;

    padding: 2px;



}



.health-search-bar .form-control {



    border: none;

    box-shadow: none;

    font-size: 0.88rem;

    padding: 0.2rem 0.5rem;

    height: auto;



}



.health-search-bar .input-group-text {



    background: transparent;

    border: none;

    color: var(--brand);

    font-size: 0.65rem;

    padding: 0.2rem 0.85rem;



}



.health-search-bar .btn-primary {



    border-radius: 25px;

    padding: 0.25rem 1.25rem;

    font-size: 0.88rem;

    font-weight: 700;



}



/* Siddha Triad Hero Badges */



.health-siddha-triad {



    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 1.2rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    width: 100%;



}



.triad-item {



    background: rgba(74, 111, 165, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 8px;

    padding: 0.45rem 0.2rem;

    text-align: center;

    min-width: 0;

    width: 100%;



}



.triad-item strong {



    display: block;

    color: #ffd166;

    font-size: 0.78rem;

    line-height: 1.2;

    white-space: nowrap;



}



.triad-item span {



    display: block;

    color: rgba(255, 255, 255, 0.85);

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0;

    line-height: 1.3;

    overflow-wrap: anywhere;

    margin-top: 4px;



}



/* Siddha Triad - Individual Colours */



.health-hero .triad-item:nth-child(1) {



    background: #477CBA;

    border-color: rgba(255,255,255,0.3);



}



.health-hero .triad-item:nth-child(2) {



    background: #D97732;

    border-color: rgba(255,255,255,0.3);



}



.health-hero .triad-item:nth-child(3) {



    background: #43845D;

    border-color: rgba(255,255,255,0.3);



}



/* Consistent text styling */



.health-hero .triad-item strong {



    color: #FFFFFF;



}



.health-hero .triad-item span {



    color: #FFFFFF;



}



/* Health Cards & Fallback Styling */



.health-card {

    background:



        linear-gradient(#ffffff, #ffffff) padding-box,



        linear-gradient(135deg, rgba(24, 166, 120, 0.36), rgba(230, 80, 60, 0.28)) border-box;

    border: 1px solid transparent !important;

    border-radius: 12px;

    box-shadow: 0 6px 20px rgba(18, 108, 82, 0.06);

    overflow: hidden;

    position: relative;

    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;



}



.health-card:hover {



    border-color: #a3d9be;

    box-shadow: 0 16px 36px rgba(18, 108, 82, 0.14);

    transform: translateY(-4px);



}



.health-card__media-wrap {



    height: 200px;

    overflow: hidden;

    position: relative;

    background: linear-gradient(135deg, #f0f8f3, #e1f2e8);



}



.health-card__img {



    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;

    width: 100%;



}



.health-card:hover .health-card__img {



    transform: scale(1.05);



}



.health-card__fallback-img {



    align-items: center;

    background: linear-gradient(135deg, #e4f5ec 0%, #c9ebd8 100%);

    display: flex;

    flex-direction: column;

    height: 100%;

    justify-content: center;

    width: 100%;



}



.fallback-icon-wrap {



    align-items: center;

    background: #ffffff;

    border-radius: 50%;

    box-shadow: 0 6px 18px rgba(18, 108, 82, 0.12);

    color: var(--brand);

    display: inline-flex;

    font-size: 2rem;

    height: 64px;

    justify-content: center;

    margin-bottom: 0.5rem;

    width: 64px;



}



.fallback-badge {



    color: var(--brand-dark);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;



}



.health-card__badge {



    background: rgba(18, 108, 82, 0.9);

    border-radius: 4px;

    color: #ffffff;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.5px;

    padding: 0.2rem 0.5rem;

    position: absolute;

    right: 12px;

    text-transform: uppercase;

    top: 12px;



}



.health-card__title {



    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.35;

    margin-bottom: 0.6rem;



}



.health-card__title a {



    color: var(--ink);

    text-decoration: none;



}



.health-card__title a:hover {



    color: var(--brand);



}



.health-card__text {



    color: var(--muted);

    font-size: 0.92rem;

    line-height: 1.6;



}



.health-card__footer {



    display: flex;

    align-items: center;

    justify-content: flex-end;



}



.health-card__link {



    color: var(--brand);

    font-size: 0.88rem;

    font-weight: 700;

    text-decoration: none;

    transition: transform 0.18s ease;



}



.health-card__link:hover {



    color: var(--brand-dark);

    text-decoration: none;

    transform: translateX(3px);



}



/* Category Hero & Detail View */



.category-hero-card {



    border-top: 4px solid var(--brand) !important;



}



.text-brand {



    color: var(--brand) !important;



}



.text-brand-dark {



    color: var(--brand-dark) !important;



}



.border-left-brand {



    border-left: 4px solid var(--brand);



}



.hover-elevate {



    transition: transform 0.2s ease, box-shadow 0.2s ease;



}



/* Sibling Sidenav Enhancements */



.sidenav__header {



    background: linear-gradient(135deg, var(--brand-dark), var(--brand));

    color: #ffffff;

    padding: 14px 18px;



}



.sidenav__header h4 {



    color: #ffffff;

    font-size: 1.05rem;

    font-weight: 700;

    margin: 0;



}



.sidenav-active-desc {



    background: #f7fdf9;

    border-bottom: 1px solid #dceee3;

    color: #557064;

    font-size: 0.85rem;

    line-height: 1.5;

    margin: 0;

    padding: 10px 18px 12px;



}



/* Health Nav Tabs */



.health-nav-tabs {



    border-bottom: 2px solid var(--line);

    gap: 0.4rem;



}



.health-nav-tabs .nav-link {



    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 8px 8px 0 0;

    color: var(--muted);

    font-weight: 700;

    padding: 0.65rem 1.1rem;

    transition: all 0.2s ease;



}



.health-nav-tabs .nav-link:hover {



    background: #eef8f2;

    color: var(--brand);

    border-color: #a8dfc2;



}



.health-nav-tabs .nav-link.active {



    background: var(--brand);

    border-color: var(--brand);

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(18, 108, 82, 0.18);



}



/* Paragraph Content Card */



.health-paragraph-card {



    border: 1px solid var(--line);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);



}



.paragraph-title {



    border-bottom: 1px solid #eef5f1;

    font-size: 1.45rem;

    padding-bottom: 0.65rem;



}



.paragraph-body {



    font-size: 1.02rem;

    line-height: 1.8;



}



.paragraph-body p {



    margin-bottom: 1.25rem;



}



.paragraph-body ul, .paragraph-body ol {



    margin-bottom: 1.25rem;

    padding-left: 1.5rem;



}



.paragraph-body li {



    margin-bottom: 0.4rem;



}



/* Video Wrapper */



.health-video-wrapper {



    background: #000000;

    border-radius: 10px;

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);

    overflow: hidden;



}



/* Public Search Results */



.search-result-item {



    border: 1px solid var(--line);

    transition: all 0.2s ease;



}



.search-result-snippet {



    line-height: 1.6;



}



.search-result-snippet mark {



    background-color: #fff3cd;

    border-radius: 3px;

    padding: 0.1rem 0.25rem;



}



/* Admin Utility Classes */



.btn-xs {



    font-size: 0.75rem;

    padding: 0.2rem 0.45rem;

    border-radius: 4px;



}



.max-w-md { max-width: 480px; }



.max-w-lg { max-width: 600px; }



.max-w-2xl { max-width: 720px; }



.max-w-3xl { max-width: 860px; }



.shadow-xs { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }



/* Responsive adjustments */



@media (max-width: 991.98px) {



    .health-hero {



        height: auto;

        min-height: 0;

        padding: 90px 0 40px;

    }



    .sidenav-column {



        margin-bottom: 2rem;

    }



}



@media (max-width: 767.98px) {



    .health-hero h1 {



        font-size: 2.1rem;

    }



    .health-card__media-wrap {



        height: 170px;

    }



    .health-hero-panel {



        margin-top: 1.5rem;

    }



}



/* ============================================================== */



/* LIVING HEALTHY MODULE STYLES (LHY-NFR-001, LHY-NFR-005, LHY-NFR-006) */



/* ============================================================== */



.living-card {



    transition: transform 0.22s ease, box-shadow 0.22s ease;

    border-radius: 10px;

    overflow: hidden;



}



.living-card:hover {



    transform: translateY(-4px);

    box-shadow: 0 12px 28px rgba(11, 57, 45, 0.12) !important;



}



.living-card-img {



    transition: transform 0.35s ease;



}



.living-card:hover .living-card-img {



    transform: scale(1.03);



}



.living-side-nav {



    border-radius: 10px;



}



.living-side-nav .hover-light:hover {



    background-color: #f1f8f4;

    color: var(--brand-dark) !important;



}



.living-menu-list .nav-link {



    font-size: 0.92rem;

    transition: background-color 0.18s ease;



}



.living-detail-header {



    border-left: 5px solid #2f7d32;

    border-radius: 10px;



}



.living-detail-description {



    line-height: 1.7;



}



.living-article-body {



    line-height: 1.85;

    font-family: 'Inter', 'Lato', sans-serif;

    color: #2c3e50;



}



.living-article-body[lang="ta"],



[lang="ta"] .living-article-body,



.living-article-body p:lang(ta) {



    line-height: 2.1;

    letter-spacing: 0.02em;



}



.living-article-body h2,



.living-article-body h3,



.living-article-body h4 {



    color: var(--brand-dark);

    margin-top: 1.5rem;

    margin-bottom: 0.8rem;

    font-weight: 700;



}



.living-article-body ul,



.living-article-body ol {



    padding-left: 1.5rem;

    margin-bottom: 1.25rem;



}



.living-article-body li {



    margin-bottom: 0.45rem;



}



.living-article-body blockquote {



    border-left: 4px solid #6fae35;

    background: #f8faf6;

    padding: 0.8rem 1.2rem;

    margin: 1.25rem 0;

    font-style: italic;

    border-radius: 0 6px 6px 0;



}



.hover-elevate:hover {



    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;



}



.shadow-2xs {



    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);



}



.font-size-12 { font-size: 0.75rem !important; }



.font-size-13 { font-size: 0.8125rem !important; }



.font-size-14 { font-size: 0.875rem !important; }



.font-size-16 { font-size: 1rem !important; }



@media (max-width: 991.98px) {



    .living-hero {



        height: auto;

        min-height: 0;

        padding: 90px 0 40px;

    }



}



@media (max-width: 767.98px) {



    .living-hero h1 {



        font-size: 2.1rem;

    }



    .living-hero-panel {



        margin-top: 1.5rem;

    }



    .living-side-nav {



        margin-bottom: 2rem;

    }



}



/* ==============================================================



   LIVING HEALTHY HERO + INTRO ALIGNMENT



   Mirrors the Health page layout while retaining Living Healthy content/colours.



   ============================================================== */



@media (min-width: 992px) {



    .page-livinghealthy .living-hero .site-hero__layout {



        grid-template-columns: minmax(0, 1fr) 300px;

        gap: 2rem;

    }



    .page-livinghealthy .living-hero .site-hero__content {



        max-width: 720px;

        width: 100%;

    }



}



/* Three compact highlights on the right, matching the Health Siddha triad position */



.page-livinghealthy .living-hero-highlights {



    align-self: center;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin: 0;

    padding: 0;

    position: relative;

    top: 85px;

    width: 100%;



}



.page-livinghealthy .living-highlight {



    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 8px;

    color: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 50px;

    min-width: 0;

    padding: 0.45rem 0.2rem;

    text-align: center;



}



.page-livinghealthy .living-highlight strong {



    color: #ffffff;

    display: block;

    font-size: 0.72rem;

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;



}



.page-livinghealthy .living-highlight span {



    color: rgba(255, 255, 255, 0.92);

    display: block;

    font-size: 0.58rem;

    font-weight: 700;

    line-height: 1.3;

    margin-top: 4px;

    text-transform: uppercase;



}



.page-livinghealthy .living-highlight--food {



    background: #477c65;



}



.page-livinghealthy .living-highlight--habits {



    background: #b17a2d;



}



.page-livinghealthy .living-highlight--prevention {



    background: #43845d;



}



/* Intro panel now uses the same two-column content structure as Health */



.page-livinghealthy .health-topic-intro {



    background:



        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,250,240,0.96)) padding-box,



        linear-gradient(90deg, rgba(130, 184, 63, 0.38), rgba(255, 209, 102, 0.76), rgba(47, 125, 50, 0.22)) border-box;

    box-shadow: 0 12px 30px rgba(77, 92, 22, 0.09);

    min-height: 74px !important;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 1rem;

    padding: 0.55rem 0.85rem;

    margin-top: 0.7rem !important;

    margin-bottom: 1rem;



}



.page-livinghealthy .health-topic-intro > div:first-child {



    flex: 1;

    min-width: 0;



}



.page-livinghealthy .health-topic-intro .health-section-heading {



    color: var(--brand-dark);

    font-size: 1.55rem !important;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 0.25rem !important;

    text-align: left;



}



.page-livinghealthy .health-topic-intro p {



    color: #4d5c16;

    font-size: 0.82rem;

    font-weight: 600;

    line-height: 1.4;

    margin: 0;

    max-width: none;

    text-align: left;



}



.page-livinghealthy .health-topic-intro p strong {



    color: inherit;

    display: inline;

    font-size: inherit;

    font-weight: 800;



}



.page-livinghealthy .health-topic-intro .health-filter-pills {



    display: flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: nowrap;

    gap: 0.4rem;

    white-space: nowrap;



}



.page-livinghealthy .health-topic-intro .health-filter-pills .badge {



    color: #ffffff !important;



}



/* Tablet and mobile: place highlights below the hero copy instead of squeezing columns */



@media (max-width: 991.98px) {



    .page-livinghealthy .living-hero {



        height: auto;

        min-height: 460px;

        padding: 90px 0 40px;

    }



    .page-livinghealthy .living-hero .container,



    .page-livinghealthy .living-hero .site-hero__layout {



        height: auto;

    }



    .page-livinghealthy .living-hero .site-hero__layout {



        grid-template-columns: minmax(0, 1fr);

        gap: 1rem;

    }



    .page-livinghealthy .living-hero-highlights {



        margin-top: 0.5rem;

        max-width: 360px;

        top: 0;

    }



}



@media (max-width: 767.98px) {



    .page-livinghealthy .living-hero {



        min-height: 0;

        padding: 90px 0 32px;

    }



    .page-livinghealthy .living-hero .site-hero__content h1 {



        font-size: 1.8rem;

    }



    .page-livinghealthy .living-hero-highlights {



        max-width: 100%;

    }



    .page-livinghealthy .living-highlight strong {



        font-size: 0.66rem;

    }



    .page-livinghealthy .health-topic-intro {



        align-items: flex-start;

        flex-direction: column;

        min-height: 74px;

    }



}



/* Living Healthy Detail - Sidebar Navigation Links */



.page-livinghealthydetail .living-side-nav > .nav-link {



    display: block;

    border-radius: 0 !important;

    font-size: 0.92rem;

    font-weight: 700;

    padding: 0.65rem 0.85rem !important;

    margin-bottom: 0 !important;

    min-height: 43px;

    text-decoration: none;



}



.page-livinghealthydetail .living-side-nav .living-menu-list .nav-link {



    display: block;

    border-radius: 5px;

    font-size: 0.9rem;

    padding: 0.55rem 0.85rem !important;

    margin-bottom: 0.2rem;

    text-decoration: none;



}



.page-livinghealthydetail .living-side-nav .living-menu-list .nav-link:not(.bg-success):hover,



.page-livinghealthydetail .living-side-nav > .nav-link:not(.bg-success):hover {



    background: #eaf5ee;

    color: #126c52 !important;



}



.page-livinghealthydetail .living-side-nav .living-menu-list .nav-link.bg-success,



.page-livinghealthydetail .living-side-nav > .nav-link.bg-success {



    background: #28a745 !important;

    color: #ffffff !important;



}



/* Living Healthy Detail - Subtopic Row Separators */



.page-livinghealthydetail .living-menu-list {



    margin-bottom: 0;



}



.page-livinghealthydetail .living-menu-list .nav-item {



    border-bottom: 1px solid #dce8df;

    margin-bottom: 0 !important;



}



.page-livinghealthydetail .living-menu-list .nav-item:last-child {



    border-bottom: none;



}



.page-livinghealthydetail .living-menu-list .nav-link {



    border-radius: 0 !important;

    padding: 0.65rem 0.85rem !important;

    min-height: 43px;



}



/* Living Healthy Detail - Overview Card */



/* ==========================================



   LIVING HEALTHY - CATEGORY INTRODUCTION



   ========================================== */



.page-livinghealthydetail .living-detail-header {



    position: relative;

    background: linear-gradient(135deg, #ffffff 0%, #f5fcf7 100%) !important;

    border: 1px solid #cfe5d8 !important;

    border-top: 5px solid #08775c !important;

    border-radius: 10px !important;

    padding: 28px 26px !important;

    margin-bottom: 22px !important;

    box-shadow: 0 8px 22px rgba(13, 73, 57, 0.10) !important;



}



/* Category title */



.page-livinghealthydetail .living-detail-header h1 {



    color: #08775c !important;

    font-size: 2.5rem !important;

    font-weight: 800 !important;

    line-height: 1.2;

    margin-bottom: 0 !important;



}



/* Category description */



.page-livinghealthydetail .living-detail-description {



    color: #526b62 !important;

    font-size: 1.2rem !important;

    line-height: 1.7 !important;

    margin-top: 14px !important;

    padding-top: 0 !important;

    border-top: none !important;



}



/* Divider inside the category introduction */



.page-livinghealthydetail .living-detail-divider {



    width: 100%;

    border: 0;

    border-top: 1px solid #cfe2d7;

    margin: 22px 0 0;



}



/* ==========================================



   AGASTHIAR - MAIN NAVIGATION ENHANCEMENT



   ========================================== */



.navbar-custom {



    background: linear-gradient(110deg, #075c46, #14795e, #08664e) !important;

    min-height: 70px;

    padding: 0.65rem 1.5rem;

    backdrop-filter: blur(14px);

    border-bottom: 2px solid rgba(255, 255, 255, 0.22);

    box-shadow: 0 5px 20px rgba(5, 55, 42, 0.25);



}



/* Main navigation links */



.navbar-custom .navbar-nav .nav-link {



    position: relative;

    color: #ffffff !important;

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.1px;

    padding: 0.65rem 0.9rem;

    margin: 0 0.15rem;

    border-radius: 6px;

    transition: all 0.25s ease;



}



/* Animated underline */



.navbar-custom .navbar-nav .nav-link::after {



    content: "";

    position: absolute;

    left: 50%;

    bottom: 3px;

    width: 0;

    height: 3px;

    background: #c9f27b;

    border-radius: 3px;

    transform: translateX(-50%);

    transition: width 0.25s ease;



}



/* Hover state - subtle */



.navbar-custom .navbar-nav .nav-item:not(.active) .nav-link:hover {



    background: rgba(255, 255, 255, 0.13);

    color: #ffffff !important;



}



.navbar-custom .navbar-nav .nav-item:not(.active) .nav-link:hover::after {



    width: 65%;



}



/* Active state - clearly distinguished */



.navbar-custom .navbar-nav .nav-item.active .nav-link {



    background: #dff2c5 !important;

    color: #075c46 !important;

    font-weight: 800;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);



}



.navbar-custom .navbar-nav .nav-item.active .nav-link::after {



    width: 65%;

    background: #075c46;



}



/* Sign In button */



.navbar-custom .nav-item--signin .nav-link {



    background: #ffffff !important;

    color: #08775c !important;

    font-weight: 800;

    padding: 0.65rem 1.2rem;

    margin-left: 0.6rem;

    border-radius: 9px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);

    transition: all 0.25s ease;



}



.navbar-custom .nav-item--signin .nav-link::after {



    display: none;



}



.navbar-custom .nav-item--signin .nav-link:hover {



    background: #dff5ce !important;

    color: #075c46 !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);



}



/* Keyboard accessibility */



.navbar-custom .nav-link:focus-visible {



    outline: 2px solid #c9f27b;

    outline-offset: 3px;



}



/* ==========================================



   LIVING HEALTHY - RECURSIVE SIDEBAR TREE



   ========================================== */



.living-health-reference-sidenav .living-tree-overview {



    display: flex;

    align-items: center;

    padding: 10px 14px;

    color: #164f42;

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid #dcebe3;



}



.living-health-reference-sidenav .living-tree-overview.active {



    background: #d9f2df;

    color: #075c46;



}



.living-health-reference-sidenav .living-category-tree {



    list-style: none;

    padding-left: 0;

    margin: 0;



}



.living-health-reference-sidenav .living-tree-item {



    list-style: none;

    border-bottom: 1px solid #e4eee8;



}



.living-health-reference-sidenav .living-tree-row {



    display: block;

    position: relative;



}



.living-health-reference-sidenav .living-tree-link {



    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

    gap: 12px;

    padding: 10px 12px;

    color: #174d40;

    font-weight: 600;

    text-decoration: none;



}



.living-health-reference-sidenav .living-tree-link:hover {



    background: #eaf5ee;

    color: #08775c;



}



.living-health-reference-sidenav .living-tree-link.active {



    background: #d9f2df;

    color: #075c46;

    font-weight: 800;

    border-left: 4px solid #08775c;



}



.living-health-reference-sidenav .living-tree-icon {



    color: #71877d;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 16px;

    width: 16px;

    margin: 0 !important;

    font-size: 14px;

    line-height: 1;



}



.living-health-reference-sidenav .living-tree-branch {



    position: relative;

    margin: 0;



}



.living-health-reference-sidenav .living-tree-branch > summary {



    position: absolute;

    top: -35px;

    right: 5px;

    z-index: 2;



}



.living-health-reference-sidenav .living-tree-branch summary {



    cursor: pointer;

    list-style: none;

    width: 28px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #587b6b;



}



.living-health-reference-sidenav .living-tree-branch summary::-webkit-details-marker {



    display: none;



}



.living-health-reference-sidenav .living-tree-branch summary::before {



    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    font-size: 11px;



}



.living-health-reference-sidenav .living-tree-branch[open] > summary::before {



    content: "\f078";



}



.living-health-reference-sidenav .living-tree-children {



    padding-left: 10px;

    border-left: none;

    margin-left: 15px;



}



/* ==========================================



   LIVING HEALTHY TREE - FIXED HOVER DIMENSIONS



   ========================================== */



.living-health-reference-sidenav .living-tree-link,



.living-health-reference-sidenav .living-tree-link:hover,



.living-health-reference-sidenav .living-tree-link:focus {



    display: flex;

    align-items: center;

    box-sizing: border-box;

    min-height: 43px;

    height: 43px;

    padding: 10px 12px !important;

    margin: 0 !important;

    line-height: 21px;

    text-decoration: none;

    transition: background-color 0.18s ease, color 0.18s ease;



}



/* Fix Group Overview hover height and spacing */



.living-health-reference-sidenav .living-tree-overview,



.living-health-reference-sidenav .living-tree-overview:hover,



.living-health-reference-sidenav .living-tree-overview:focus {



    display: flex;

    align-items: center;

    box-sizing: border-box;

    height: 43px;

    min-height: 43px;

    padding: 10px 14px !important;

    margin: 0 !important;

    line-height: 21px;

    text-decoration: none;

    transition: background-color 0.18s ease, color 0.18s ease;



}



.living-health-reference-sidenav .living-tree-overview:hover {



    background-color: #eaf5ee;

    color: #08775c;



}



.living-health-reference-sidenav .living-tree-children > .living-category-tree > .living-tree-item:last-child {



    border-bottom: none !important;



}



/* Remove duplicate bottom borders in the expanded tree */



/* Last nested topic */



.living-health-reference-sidenav



.living-tree-children > .living-category-tree > .living-tree-item:last-child {



    border-bottom: none !important;



}



/* Last parent category */



.living-health-reference-sidenav



> .living-category-tree > .living-tree-item:last-child {



    border-bottom: none !important;



}



/* ========================================================================== */



/* AGASTHIAR ABOUT SIDDHA & SIDDHA WRITEUPS MODERNIZED STYLING (SRS v1.0)     */



/* ========================================================================== */



.siddha-top-toolbar {



    background: #fbfbf9;

    border: 1px solid #e9ecef;

    border-radius: 8px;

    padding: 0.6rem 1rem;

    margin-bottom: 1.25rem;



}



.siddha-lang-switcher {



    display: inline-flex;

    align-items: center;

    background: #ffffff;

    border: 1px solid #ced4da;

    border-radius: 20px;

    padding: 2px 10px;

    font-size: 0.85rem;



}



.siddha-lang-btn {



    color: #495057;

    text-decoration: none !important;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 12px;

    transition: all 0.2s ease-in-out;



}



.siddha-lang-btn:hover {



    color: #08775c;



}



.siddha-lang-btn.active {



    background-color: #08775c;

    color: #ffffff !important;



}



.siddha-lang-divider {



    color: #ced4da;

    margin: 0 4px;



}



/* Four Section Enhancements */



.aboutsiddah-container .section-heading h2 {



    font-weight: 800;

    color: #1a3328;

    letter-spacing: -0.02em;



}



.siddha-feature-grid {



    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1.75rem;

    margin-top: 1.5rem;



}



.siddha-feature-link {



    background: #ffffff;

    border: 1px solid #e4ece7;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;



}



.siddha-feature-link:hover,



.siddha-feature-link:focus {



    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(8, 119, 92, 0.12) !important;

    border-color: #08775c;



}



.siddha-feature-link img {



    height: 200px;

    width: 100%;

    object-fit: cover;

    background-color: #f1f5f3;



}



.the-siddha-view-section {



    background-color: #f3f8f5 !important;

    border: 1px solid #dcebe2;



}



.the-siddha-view-section .content-card {



    transition: transform 0.2s ease, box-shadow 0.2s ease;

    border-top: 4px solid #08775c !important;



}



.the-siddha-view-section .content-card:hover {



    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;



}



.siddha-writeup-card {



    background: #ffffff;

    border: 1px solid #e3ebe6 !important;

    border-radius: 8px;

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;



}



.siddha-writeup-card:hover {



    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(8, 119, 92, 0.1) !important;

    border-color: #08775c !important;



}



.siddha-blog-card {



    transition: transform 0.2s ease, box-shadow 0.2s ease;

    border: 1px solid #e2ece6 !important;



}



.siddha-blog-card:hover {



    transform: translateY(-4px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;



}



/* Tamil Typography Enhancement */



[lang="ta"], body.lang-ta, .siddha-article-body[lang="ta"] {



    line-height: 1.85 !important;

    font-family: -apple-system, BlinkMacSystemFont, "Latha", "Vijaya", "Mukta Malar", "Tamil Sangam MN", sans-serif;



}



/* Keyboard accessibility & Focus state */



a:focus, button:focus, input:focus, select:focus, textarea:focus {



    outline: 2px solid #08775c !important;

    outline-offset: 2px;



}



/* =========================================================



   ABOUT SIDDHA – WIDER CONTENT LAYOUT



   ========================================================= */



.page-aboutsiddah .page-shell > .container {



    width: 100%;

    max-width: none;

    padding-left: 40px;

    padding-right: 40px;



}



/* Keep section content aligned */



.page-aboutsiddah .siddha-story,



.page-aboutsiddah .the-siddha-view-section,



.page-aboutsiddah .siddha-writeups-section {



    width: 100%;



}



/* Tablet */



@media (max-width: 991.98px) {



    .page-aboutsiddah .page-shell > .container {



        padding-left: 24px;

        padding-right: 24px;

    }



}



/* Mobile */



@media (max-width: 575.98px) {



    .page-aboutsiddah .page-shell > .container {



        padding-left: 15px;

        padding-right: 15px;

    }



}



/* =========================================================



   ABOUT SIDDHA – SECTION 2 SPACING & HEADING



   ========================================================= */



/* Reduce gap below the image carousel */



.page-aboutsiddah .siddha-intro {



    margin-top: 0;

    margin-bottom: 12px;



}



/* Reduce top spacing before About Siddha content */



.page-aboutsiddah .siddha-story {



    padding-top: 12px !important;

    padding-bottom: 16px !important;



}



/* Make ABOUT SIDDHA label bigger */



.page-aboutsiddah .siddha-story .eyebrow {



    font-size: 1.2rem;

    font-weight: 800;

    margin-bottom: 0.5rem;



}



/* Slightly tighten heading spacing */



.page-aboutsiddah .siddha-story .section-heading {



    margin-bottom: 1.5rem;



}



/* =========================================================



   ABOUT SIDDHA DETAIL PAGE – FULL WIDTH LAYOUT



   Match the About Siddha landing page



   ========================================================= */



.siddha-detail-wrapper {



    width: calc(100vw - 8px);

    max-width: none;

    position: relative;

    left: 50%;

    transform: translateX(-50%);

    box-sizing: border-box;

    padding-left: 40px;

    padding-right: 40px;



}



/* Hero should occupy the available content width */



.siddha-detail-wrapper .siddha-article-hero {



    width: 100%;

    max-width: none;

    margin-left: 0;

    margin-right: 0;



}



/* Main article and right navigation */



.siddha-detail-wrapper .siddha-article {



    width: 100%;

    max-width: none;

    margin-left: 0;

    margin-right: 0;



}



/* Keep Bootstrap columns aligned */



.siddha-detail-wrapper .siddha-article .row {



    margin-left: 0;

    margin-right: 0;



}



/* Tablet */



@media (max-width: 991.98px) {



    .siddha-detail-wrapper {



        padding-left: 24px;

        padding-right: 24px;

    }



}



/* Mobile */



@media (max-width: 575.98px) {



    .siddha-detail-wrapper {



        padding-left: 15px;

        padding-right: 15px;

    }



}



/* =========================================================



   SIDDHA DETAIL – RIGHT SIDE CATEGORY NAVIGATION



   ========================================================= */



.siddha-detail-wrapper .siddha-topic-list li a {



    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;



}



/* Slightly smaller heading above the category list */



.siddha-detail-wrapper .siddha-article-aside h3 {



    font-size: 17px;

    font-weight: 600;



}



/* Category spacing */



.siddha-detail-wrapper .siddha-topic-list li {



    margin-top: 6px !important;

    margin-bottom: 6px !important;



}



/* Siddha Detail – Subcategory Hover Styling */



.siddha-detail-wrapper .siddha-topic-list li a:hover,



.siddha-detail-wrapper .siddha-topic-list li a:focus {



    background-color: #08734f !important;

    color: #ffffff !important;

    text-decoration: none;



}



/* Change arrow icon to white on hover */



.siddha-detail-wrapper .siddha-topic-list li a:hover i,



.siddha-detail-wrapper .siddha-topic-list li a:focus i {



    color: #ffffff !important;



}



/* Responsive layout: stack Siddha feature cards on narrow screens. */

@media (max-width: 767.98px) {



    .siddha-feature-grid {



        grid-template-columns: 1fr;

    }



}



/* Responsive adjustments consolidated after the base component rules. */

@media (max-width: 991.98px) {



    .navbar-custom {



        padding: 0.55rem 1rem;

    }



}