/********** Template CSS **********/
:root {
    --primary: #13C5DD;
    --secondary: #354F8E;
    --light: #EFF5F9;
    --dark: #005386;
}

.btn {
    font-weight: 700;
    transition: .5s;
}

.btn:hover {
    -webkit-box-shadow: 0 8px 6px -6px #555555;
    -moz-box-shadow: 0 8px 6px -6px #555555;
    box-shadow: 0 8px 6px -6px #555555;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 0;
    border-radius: 50% 50% 0 0;
    z-index: 99;
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Jost', sans-serif;
    position: relative;
    margin-left: 30px;
    padding: 30px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 5px;
        bottom: 0;
        left: 50%;
        background: var(--primary);
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }
}



.service-item {
    position: relative;
    height: 350px;
    padding: 0 30px;
    transition: .5s;
}

.service-item .service-icon {
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    transform: rotate(-14deg);
}

.service-item .service-icon i {
    transform: rotate(15deg);
}

.service-item a.btn {
    position: absolute;
    width: 60px;
    bottom: -48px;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
}

.service-item:hover a.btn {
    bottom: -24px;
    opacity: 1;
}

.price-carousel::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    background: var(--primary);
    border-radius: 8px 8px 50% 50%;
    z-index: -1;
}

.price-carousel .owl-nav {
    margin-top: 35px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.price-carousel .owl-nav .owl-prev,
.price-carousel .owl-nav .owl-next{
    position: relative;
    margin: 0 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #FFFFFF;
    font-size: 22px;
    border-radius: 45px;
    transition: .5s;
}

.price-carousel .owl-nav .owl-prev:hover,
.price-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}

@media (min-width: 576px) {
    .team-item .row {
        height: 350px;
    }
}

.team-carousel .owl-nav {
    position: absolute;
    padding: 0 45px;
    width: 100%;
    height: 45px;
    top: calc(50% - 22.5px);
    left: 0;
    display: flex;
    justify-content: space-between;
}

.team-carousel .owl-nav .owl-prev,
.team-carousel .owl-nav .owl-next {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover {
    background: var(--dark);
}

.testimonial-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: 20px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 40px;
    height: 40px;
    background: var(--primary);
}

.testimonial-carousel .owl-item img {
    width: 150px;
    height: 150px;
}


/*=======================
      TOP BAR
=======================*/

.jhTopbarSection {
    width: 100%;
    background: #a6e9e7;
    padding: 5px 0;
}

.jhTopbarWrapper{
    width:92%;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.jhTopbarContactArea{
    display:flex;
    align-items:center;
    gap:30px;
}

.jhTopbarContactLink {
    color: #0b6e77;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.jhTopbarIcon{
    font-size:15px;
}

.jhTopbarSocialArea{
    display:flex;
    gap:10px;
}

.jhTopbarSocialLink {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0b6e77;
    text-decoration: none;
    transition: 0.3s;
}

.jhTopbarContactlLink a:hover { 
    color:#005386 !important;
}

.jhTopbarSocialLink:hover{
    background:#ffffff;
    color:#19c2d1;
}
.jhMenuLink
@media screen and (max-width:991px) {
    .jhNavbarWrapper{
        flex-direction:column;
        padding:20px 0;
        gap:20px;
    }

    .jhMenuList{
        flex-wrap:wrap;
        gap:20px;
    }

    .jhButtonSection{
        justify-content:center;
    }

}


/* ================= 
NAVBAR SECTION MOBILE TOGGLER
================= */

.jhNavbarSection {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 15px rgba(0,0,0,0.08);

    background: rgba(255,255,255,0.75); /* 75% opacity */
    backdrop-filter: blur(12px);
    position: sticky;

    top: 0;
    z-index: 999;
}

.jhNavbarWrapper{
    width: 95%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 12px;
    min-height:90px;
}

.jhLogoSection {
    flex: 0 0 350px; /* Increase this value */
    display: flex;
    align-items: center;
}

.jhLogoLink{
    display:inline-block;
    text-decoration:none;
}

.jhLogoImage {
    height: 122px;
    width: auto;
    display: block;
    margin: 0 0 0 62px;
}

.jhMenuSection{
    flex:1;

    display:flex;
    justify-content:flex-end;
}

.jhMenuList{
    list-style:none;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:35px;

    margin:0;
    padding:0;
}

.jhMenuItem{
    position:relative;
}

.jhMenuLink{
    display:flex;
    align-items:center;
    gap:8px;

    text-decoration:none;

    color:#005386;
    font-size:16px;
    font-weight:600;

    transition:0.3s ease;
}

.jhMenuLink:hover{
    color:#fff;
    background:#03b8b3;
    border-radius:50px;
    padding:5px 8px;
}


.jhMenuIcon{
    font-size:14px;
}

.jhMenuActive{
    color:#000;
}

.jhMenuActive::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-12px;

    width:100%;
    height:3px;

    background:#19c2d1;

    border-radius:50px;
}

.jhButtonIcon{
    font-size:15px;
}

@media screen and (max-width:991px){

   

        .jhNavbarWrapper {
            width: 100%;
            padding: 10px 15px;
            display: flex;
            flex-direction: row; /* Keep everything in one row */

            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap; /* Prevent wrapping */

            min-height: 70px;
        }

        .jhLogoSection {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .jhLogoImage {
            height: 55px;
            width: auto;
        }
    
}

/*MOBILE / TABLET NAVIGATION*/

.jhMobileToggle {
    display: none;
}

.jhMenuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 9998;
}

    .jhMenuOverlay.active {
        opacity: 1;
        visibility: visible;
    }

/*SIDE MENU*/

.jhMobileMenu {
    position: fixed;
    top: 79px;
    right: -100%;
    width: 330px;
    max-width: 86%;
    height: 100vh;
    background: #005a94;
    z-index: 9999;
    transition: right .4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

    /* OPEN */

    .jhMobileMenu.active {
        right: 0;
    }



/*MENU*/

.jhMobileMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jhMobileMenu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* MAIN ITEMS */

.jhMobileMenu > ul > li {
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .jhMobileMenu > ul > li > a,
    .jhMobileDropdownLink {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 0 28px;
        color: #fff;
        text-decoration: none;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .3px;
        transition: .3s;
    }

        .jhMobileMenu > ul > li > a:hover,
        .jhMobileDropdownLink:hover {
            background: rgba(255,255,255,.08);
        }

        /*DROPDOWN*/

        .jhMobileDropdownLink span {
            flex: 1;
        }

        .jhMobileDropdownLink i {
            font-size: 15px;
            transition: .35s;
        }

.jhMobileDropdown.active .jhMobileDropdownLink i {
    transform: rotate(180deg);
}

/*SUB MENU*/

.jhMobileSubMenu {
    display: none;
    background: #0b679f;
}

    .jhMobileSubMenu li {
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .jhMobileSubMenu a {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 12px 25px 12px 45px;
        color: #fff;
        font-size: 14px;
        line-height: 1.5;
        text-decoration: none;
        transition: .3s;
    }

        .jhMobileSubMenu a:hover {
            background: rgba(255,255,255,.08);
        }

/*BODY LOCK*/

html.menu-open,
body.menu-open {
    overflow: hidden;
    height: 100%;
}

/*TABLET + MOBILE*/

@media(max-width:991px) {

    .jhMenuSection,
    .jhButtonSection {
        display: none !important;
    }

    .jhMobileToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border: none;
        background: transparent;
        color: #005a94;
        font-size: 28px;
        cursor: pointer;
        margin-left: auto;
    }

    .jhNavbarWrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px;
    }

    .jhLogoImage {
        height: 65px;
        width: auto;
    }
}

/*MOBILE*/

@media(max-width:767px) {

    .jhTopbarSection {
        display: none;
    }

    .jhLogoImage {
        height: 58px;
        margin: 0;
    }
}

/*DESKTOP*/

@media(min-width:992px) {

    .jhMobileToggle,
    .jhMobileMenu,
    .jhMenuOverlay {
        display: none !important;
    }
}
@media(min-width:992px) {
   .jhMobileMenu {
       top:124px;
}
}

/*==================================================
    OUR SPECIALITIES - FIXED UNIFORM CARDS
==================================================*/
.jhSpecialitiesSection {
    padding: 40px 0;
    background: #f7fbff;
    overflow: hidden;
}

.jhSpecialitiesContainer {
    width: 92%;
    max-width: 1500px;
    margin: auto;
}

/*SECTION HEADING*/
.jhSectionHeading {
    text-align: center;
    margin-bottom: 50px;
}

.jhSectionTitle {
    font-size: 42px;
    font-weight: 700;
    color: #0f3d6d;
    margin-bottom: 15px;
}

.jhSectionDescription {
    max-width: 760px;
    margin: auto;
    font-size: 17px;
    line-height: 1.8;
    color: #666;
}

/*CARD TRACK AREA*/
.jhSpecialitiesCards {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* Removed 'gap' entirely to avoid conflicts */
    width: max-content !important;
    padding-top: 30px;
    padding-bottom: 50px;
    position: relative;
}

/* CARD OVERRIDES - UNIFORM HEIGHT FIX */
.jhSpecialityCard {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 310px;
    height: 480px;
    margin-right: 35px !important; /* THE BULLETPROOF FIX: Forces space between cards */
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    transition: box-shadow .4s ease, transform .4s ease;
    transform: none !important;
}

    .jhSpecialityCard:hover {
        transform: translateY(-10px) !important;
        box-shadow: 0 35px 80px rgba(0,0,0,.18);
        z-index: 10;
    }

    /* IMAGE */
    .jhSpecialityCard img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        flex-shrink: 0; /* Prevents the image from being squished */
    }

/* CONTENT CONTAINER */
.jhSpecialityContent {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Automatically expands to fill all remaining card space */
}

    .jhSpecialityContent h3 {
        font-size: 22px;
        color: #0f3d6d;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .jhSpecialityContent p {
        color: #666;
        line-height: 1.6;
        font-size: 14px;
        margin-bottom: 20px;
        /* Truncates text with '...' if it ever exceeds 3 lines, keeping design perfectly aligned */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* READ MORE BUTTON */
.jhReadMoreBtn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 40px;
    background: #03b8b385;
    color: #000000ba;
    text-decoration: none;
    transition: .3s;
    font-weight: 600;
    margin-top: auto; /* THE MAGIC FIX: Pushes the button perfectly to the bottom of the card */
    align-self: flex-start; /* Keeps the button wrapped tight to its text */
}

    .jhReadMoreBtn:hover {
        background: #005386de;
        color: #fff;
    }



/* RESPONSIVE LAYOUT SCALING */
@media (max-width: 991px) {
    /* Removed the container gap rule from here */

    .jhSpecialityCard {
        width: 260px;
        height: 450px;
        margin-right: 35px !important; /* Explicitly keep the 35px margin */
    }

    .jhSectionTitle {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    /* Removed the container gap rule from here */

    .jhSpecialityCard {
        width: 220px;
        height: 420px;
        margin-right: 20px !important; /* CRITICAL: Reduces margin to match JS math on mobile */
    }

        .jhSpecialityCard img {
            height: 160px;
        }

    .jhSpecialityContent {
        padding: 20px;
    }

        .jhSpecialityContent h3 {
            font-size: 18px;
        }

        .jhSpecialityContent p {
            font-size: 13px;
            -webkit-line-clamp: 4;
        }

    .jhSectionTitle {
        font-size: 28px;
    }
}


/* Dropdown */

.jhDropdown {
    position: relative;
}

.jhDropdownMenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 285px;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    z-index: 999;
}

.jhDropdown:hover .jhDropdownMenu {
    display: block;
}

.jhDropdownMenu li {
    border-bottom: 1px solid #eee;
}

    .jhDropdownMenu li:last-child {
        border-bottom: none;
    }

    .jhDropdownMenu li a {
        display: block;
        padding: 5px 20px;
        color: #333;
        text-decoration: none;
        font-size: 15px;
        transition: .3s;
    }

        .jhDropdownMenu li a:hover {
            background: #005386;
            color: #fff;
            padding:10px;
        }

.jhMobileSubMenu {
    display: none;
    background: #0a4cb5;
}

    .jhMobileSubMenu li a {
        padding: 14px 35px;
        display: block;
        color: #fff;
        text-decoration: none;
        border-top: 1px solid rgba(255,255,255,.1);
    }
.jhMobileDropdownLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: .3s;
}

    .jhMobileDropdownLink:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }
    .jhMobileDropdownLink i {
        font-size: 14px;
        transition: .3s;
    }

    .jhMobileDropdownLink.active i {
        transform: rotate(180deg);
    }


/* ==========================================
   GALLERY SECTION
========================================== */
.jhGallerySection {
    padding: 90px 0;
    background: #ffffff;
}

.jhGalleryContainer {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* FILTER BUTTONS */

.jhGalleryFilterWrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

.jhGalleryFilterBtn {
    border: none;
    background: #03b8b31a;
    color: #03b8b3;
    padding: 12px 24px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}

    .jhGalleryFilterBtn.active {
        background: #03b8b3;
        color: #ffffff;
        border-left: 4px solid #e91e63;
    }

    .jhGalleryFilterBtn:hover {
        background: #005386;
        color: #ffffff;
    }

/* GALLERY GRID */

.jhGalleryGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

/* CARD */

.jhGalleryCard {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* IMAGE */

.jhGalleryImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

/* OVERLAY */

.jhGalleryOverlay {
    position: absolute;
    inset: 0;
    background: #03b8b333;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.4s ease;
}

.jhGalleryCard:hover .jhGalleryOverlay {
    opacity: 1;
}

.jhGalleryCard:hover .jhGalleryImage {
    transform: scale(1.08);
}

/* ICON */

.jhGalleryIcon {
    width: 55px;
    height: 55px;
    background: #005386;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
}

/* RESPONSIVE */

@media (max-width: 992px) {

    .jhGalleryGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .jhGalleryGrid {
        grid-template-columns: 1fr;
    }

    .jhGalleryFilterWrapper {
        flex-wrap: wrap;
    }
}


/* ==========================================
   HERO SECTION
========================================== */
.jhHeroSection {
    position: relative;
}

.jhHeroSlide {
    position: relative;
    height: 85vh;
    min-height: 650px;
}

    .jhHeroSlide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.jhHeroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
}

.jhHeroContent {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    max-width: 700px;
    z-index: 2;
}

.jhHeroTitle {
    font-size: 62px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.jhHeroText {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.jhHeroButtons {
    display: flex;
    gap: 15px;
}

.jhHeroBtnPrimary {
    background: #218076;
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px;
    transition: .3s;
}

    .jhHeroBtnPrimary:hover {
        background: #16645c;
        color: #fff;
    }

.jhHeroBtnSecondary {
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px;
    transition: .3s;
}

.jhHeroBtnSecondary:hover {
    background: #fff;
    color: #218076;
}

.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.owl-prev,
.owl-next {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50% !important;
    background: rgba(3,184,179,.2) !important;
    color: #ffffffbd !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    transition: .3s ease;
    pointer-events: auto;
}

    

.owl-prev {
    left: 25px;
}

.owl-next {
    right: 25px;
}

    /* Font Awesome Icons */

    .owl-prev i,
    .owl-next i {
        font-size: 18px;
        line-height: 1;
    }

.jhHeroCarousel .owl-dots {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
}

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

@media (max-width:991px) {

    .jhHeroSlide {
        height: 420px;
        min-height: auto;
    }

        .jhHeroSlide img {
            object-fit: contain;
            background: #fff;
        }


    .jhHeroContent {
        left: 6%;
        right: 6%;
        max-width: 100%;
    }

    .jhHeroTitle {
        font-size: 42px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .jhHeroText {
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .jhHeroButtons {
        gap: 12px;
    }

    .jhHeroBtnPrimary,
    .jhHeroBtnSecondary {
        padding: 12px 28px;
        font-size: 15px;
    }

    .owl-prev,
    .owl-next {
        width: 45px;
        height: 45px;
    }

    .owl-prev {
        left: 15px;
    }

    .owl-next {
        right: 15px;
    }
}


/*MOBILE (Up to 767px)*/

@media (max-width:767px) {

    .jhHeroSlide {
        height: 300px;
        min-height: auto;
    }

        .jhHeroSlide img {
            object-fit: cover;
            background: #fff;
        }

    .jhHeroOverlay {
        background: rgba(0,0,0,0.45);
    }

    .jhHeroContent {
        left: 20px;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 100%;
    }

    .jhHeroTagline {
        font-size: 11px;
        letter-spacing: 1px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }

    .jhHeroTitle {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .jhHeroText {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .jhHeroButtons {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .jhHeroBtnPrimary,
    .jhHeroBtnSecondary {
        width: 100%;
        max-width: 240px;
        text-align: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    .owl-prev,
    .owl-next {
        width: 38px;
        height: 38px;
        font-size: 14px !important;
    }

    .owl-prev {
        left: 10px;
    }

    .owl-next {
        right: 10px;
    }

    .jhHeroCarousel .owl-dots {
        bottom: 15px;
    }
}


/*SMALL MOBILE (Up to 480px)*/

@media (max-width:480px) {

    .jhHeroSlide {
        height: 55vh;
        min-height: 330px;
    }

    .jhHeroTitle {
        font-size: 24px;
    }

    .jhHeroText {
        font-size: 14px;
    }

    .jhHeroBtnPrimary,
    .jhHeroBtnSecondary {
        max-width: 210px;
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* ==========================================
   WELCOME SECTION
========================================== */

.jhWelcomeSection {
    padding: 20px 0;
    background: #ffffff;
}

.jhWelcomeContainer {
    width: 95%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    gap: 44px;
}

.jhWelcomeImageArea {
    flex: 1;
}

.jhWelcomeImage {
    width: 100%;
    display: block;
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

.jhWelcomeContentArea {
    flex: 1;
}

.jhWelcomeTag {
    color: #218076;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.jhWelcomeTitle {
    font-size: 45px;
    line-height: 1.2;
    color: #005386;
    font-weight: 800;
    margin: 15px 0 25px;
}

.jhWelcomeText {
    color: #6b7280;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 20px;
    text-align:justify;
}

 

.jhWelcomeFeature {
    display: flex;
    gap: 20px;
    
}

.jhFeatureIcon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #e8f8f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #03B8B3;
    font-size: 28px;
    flex-shrink: 0;
}

.jhWelcomeFeature h4 {
    margin-bottom: 8px;
    color: #005386;
    font-size: 24px;
    font-weight: 700;
}

.jhWelcomeFeature p {
    color: #6b7280;
    line-height: 1.8;
}

.jhWelcomeButton {
    display: inline-block;
    margin-top: 25px;
    background: #218076;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px;
    transition: 0.3s;
}

    .jhWelcomeButton:hover {
        background: #145e57;
        color: #ffffff;
    }

@media(max-width:991px) {

    .jhWelcomeContainer {
        flex-direction: column;
    }

    .jhWelcomeTitle {
        font-size: 40px;
    }
}

.jhWelcomeHeading {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 1.2;
}

.jhWelcome {
    color: #03B8B3;
    font-size: 34px;
     
}

.jhHospitalText {
    color: #005386;
    font-size: 42px;
}

/* ABOUT SECTION ANIMATION CSS */

/* Left Image */
.jhWelcomeImageArea {
    opacity: 0;
    transform: translateX(-120px);
}

/* Right Content */
.jhWelcomeContentArea {
    opacity: 0;
    transform: translateX(80px);
}

/* Heading 
.jhWelcomeHeading {
    opacity: 0;
    transform: translateY(40px);
}  */

/* Title */
.jhWelcomeTitle {
    opacity: 0;
    transform: translateY(40px);
}

/* Paragraphs */
.jhWelcomeText {
    opacity: 0;
    transform: translateY(40px);
}

/* Features */
.jhWelcomeFeature {
    opacity: 0;
    transform: translateY(50px);
}

/* Icons */
.jhFeatureIcon {
    opacity: 0;
    transform: scale(.6);
}

/* Smooth Rendering */
.jhWelcomeSection * {
    will-change: transform, opacity;
    backface-visibility: hidden;
}


/* ==========================================
   WHY CHOOSE US SECTION
========================================== */
.jhWhyChooseSection {
    background-image: url('/websiteUI/img/about.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 30px 0;
    position: relative;
}

    .jhWhyChooseSection::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.35);
    }

.jhWhyChooseOverlay {
    width: 92%;
    max-width: 1400px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.jhWhyChooseContent {
    
    background: rgb(255 255 255 / 74%);
    padding: 60px;
    border-radius: 20px;
    margin-left: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
}

.jhWhyChooseSubTitle {
    color: #136a68;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.jhWhyChooseTitle {
    font-size: 48px;
    color: #005386;
    font-weight: 800;
    margin-bottom: 20px;
}

.jhWhyChooseText {
    color: #666;
    line-height: 1.9;
    margin-bottom: 40px;
}

.jhWhyChooseGrid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
}

.jhWhyChooseItem {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .jhWhyChooseItem i {
        width: 70px;
        height: 70px;
        background: #e9f8f6;
        color: #03B8B3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
    }

    .jhWhyChooseItem h4 {
        color: #005386;
        font-size: 22px;
        font-weight: 700;
        margin: 0;
    }

@media (max-width:767px) {

    .jhWhyChooseSection {
        padding: 15px;
    }

    .jhWhyChooseOverlay {
        width: 100%;
        padding: 0;
    }

    .jhWhyChooseContent {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 25px 20px !important;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .jhWhyChooseTitle {
        font-size: 32px;
        line-height: 1.2;
    }

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

/* ==========================================
   Testimonial SECTION
========================================== */
.jhTestimonialSection {
    position: relative;
    overflow: hidden;
    padding: 35px 0;
}

    .jhTestimonialSection::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/websiteUI/img/blog-1.jpg') center center/cover no-repeat;
        filter: blur(8px);
        transform: scale(1.08);
        z-index: 1;
    }

    .jhTestimonialSection::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 35, 70, 0.55);
        z-index: 2;
    }


.jhTestimonialOverlay {
    position: relative;
    z-index: 3;
}

.jhTestimonialItem {
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    margin: auto;
}

.jhTestimonialSubTitle {
    color: #FFFF;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 35px;
    text-align:center;
}

.jhTestimonialAvatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 30px auto;
}

.jhTestimonialText {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.jhTestimonialName {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

.jhTestimonialCarousel .owl-dots {
    position: relative;
    margin-top: 35px;
    text-align: center;
}

.jhTestimonialCarousel .owl-dot {
    display: inline-block;
}

    .jhTestimonialCarousel .owl-dot span {
        width: 14px;
        height: 14px;
        margin: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,.5);
        display: block;
    }

    .jhTestimonialCarousel .owl-dot.active span {
        background: #03B8B3;
    }

.jhTestimonialAvatar {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    margin: 0 auto 30px auto;
}

.owl-carousel .owl-item .jhTestimonialAvatar {
    width: 110px !important;
    height: 110px !important;
}


/* ==========================================
   FOOTER SECTION
========================================== */
.jhFooterSection {
    background: #0b4162;
    position: relative;
    overflow: hidden;
}

    .jhFooterSection::before {
        content: "";
        position: absolute;
        left: -100px;
        top: 0;
        width: 500px;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: .08;
    }

.jhFooterContainer {
    width: 80%;
    margin: 0 auto;
    padding: 35px 0;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.jhFooterLogo {
    max-width: 322px;
    display: block;
    margin: 0 auto 25px;
}

.jhFooterDescription {
    color: #f3f3f3;
    font-size: 18px;
    line-height: 1.9;
    text-align: justify;
}

.jhFooterHeading {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
}

    .jhFooterHeading::after {
        content: "";
        width: 70px;
        height: 3px;
        background: #03B8B3;
        position: absolute;
        left: 0;
        bottom: -10px;
    }

.jhFooterMenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .jhFooterMenu li {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .jhFooterMenu li a {
            display: block;
            color: #f5f5f5;
            text-decoration: none;
            padding: 5px 0;
            transition: .3s;
        }

            .jhFooterMenu li a:hover {
                color: #03b8b3;
                padding-left: 10px;
            }

.jhFooterContactList {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .jhFooterContactList li {
        color: #f5f5f5;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        line-height: 1.8;
    }

    .jhFooterContactList i {
        color: #03B8B3;
        margin-right: 12px;
    }

.jhFooterSocial {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    text-align:center;
}

    .jhFooterSocial a {
        width: 48px;
        height: 48px;
        background: #03B8B3;
        color: #fff;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        transition: .3s;
    }

        .jhFooterSocial a:hover {
            background: #218076;
            transform: translateY(-4px);
        }

@media(max-width:991px) {

    .jhFooterContainer {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}
/*TABLET RESPONSIVE*/

@media (max-width: 991px) {

    .jhFooterContainer {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        width: 92%;
        padding: 60px 0;
    }

    .jhFooterAbout {
        grid-column: 1 / -1;
    }

    .jhFooterLogo {
        max-width: 220px;
    }

    .jhFooterDescription {
        font-size: 16px;
        line-height: 1.8;
    }

    .jhFooterHeading {
        font-size: 24px;
    }
}
/* MOBILE RESPONSIVE */

@media (max-width: 767px) {

    .jhFooterContainer {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 92%;
        padding: 50px 0;
    }

    .jhFooterAbout,
    .jhFooterLinks,
    .jhFooterContact {
        width: 100%;
    }

    .jhFooterLogo {
        max-width: 180px;
        display: block;
        margin: 0 auto 20px;
    }

    .jhFooterDescription {
        font-size: 15px;
        line-height: 1.8;
        text-align: justify;
    }

    .jhFooterHeading {
        font-size: 22px;
        text-align: left;
    }

.jhFooterHeading::after {
    left: 10%;
    transform: translateX(-50%);
 }

    .jhFooterMenu {
        text-align: center;
    }

        .jhFooterMenu li a {
            padding: 12px 0;
        }

    .jhFooterContactList {
        text-align: center;
    }

        .jhFooterContactList li {
            padding: 12px 0;
        }

    .jhFooterSocial {
        justify-content: center;
    }

        .jhFooterSocial a {
            width: 45px;
            height: 45px;
            font-size: 16px;
        }

}

/* Quick Links */
.jhFooterLinks {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.jhFooterLinks li {
    text-align: left;
}

.jhFooterLinks li a {
    display: block;
    text-align: left;
    padding: 12px 0;
}

/* Quick Contact */
.jhFooterContact {
    text-align: left;
}

.jhFooterContact li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 12px 0;
}

.jhFooterContact li i {
    margin-top: 4px;
    flex-shrink: 0;
}
.jhFooterAbout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .jhFooterAbout .jhFooterDescription {
        width: 100%;
        text-align: justify;
    }
.jhFooterContact li span,
.jhFooterContact li a {
    text-align: left;
}

.jhFooterAbout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .jhFooterAbout .jhFooterDescription {
        width: 100%;
        text-align: justify;
    }

.jhFooterBottom {
    background: #03B8B3;
    color: #ffffff;
    text-align: center;
    padding: 15px; /* Increased height */
    font-size: 18px;
    line-height: 1.8;
}

.jhFooterDeveloperLink {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

    .jhFooterDeveloperLink:hover {
        color: #f52323;
        text-decoration: underline;
    }

.jhLoginButton {
    display: inline-block;
    
    color: #cb5505 !important;
   
   
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .jhLoginButton:hover {
        
        color: #fff !important;
    }

.jhFooterContactList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jhFooterContactItem {
    margin-bottom: 16px;
}

    .jhFooterContactItem:last-child {
        margin-bottom: 0;
    }

.jhFooterContactLink {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: 0.3s ease;
}

    .jhFooterContactLink:hover {
        color: #03b8b3;
    }

.jhFooterContactIcon {
    font-size: 18px;
    color: #03b8b3;
    min-width: 20px;
    margin-top: 3px;
}

/* ==========================================
  ABOUT HERO IMAGE SECTION
========================================== */
.jhHero {
    height: 285px;
    background: url('/websiteUI/img/about/wh 1.jpg.jpeg') center center/cover no-repeat;
    position: relative;
}

.jhHeroOverlay {
    position: absolute;
    inset: 0;
    background: rgb(0 40 100 / 0%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}

.jhHeroOverlay h1 {
    font-size: 55px;
    font-weight: 700;
}

.jhHeroOverlay p {
    font-size: 20px;
}



/* ==========================================
   ABOUT SECTION
========================================== */

.jhAboutSection {
    padding: 25px 0;
    background: #fff;
}

.jhAboutContainer {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.jhAboutContent {
    flex: 1;
}

.jhAboutImage {
    flex: 1;
}

.jhAboutImage img {
    width: 100%;
    height:415px;
    display: block;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.jhSectionTag {
    position: relative;
    display: inline-block;
    color: #03b8b3;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    padding-bottom: 12px;
}

.jhSectionTag::after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: 6px;
    width: 55px;
    height: 3px;
    background: #005386;
    border-radius: 10px;
}

.jhAboutContent h2 {
    font-size: 48px;
    line-height: 1.2;
    color: #005386;
    margin-bottom: 25px;
}

.jhAboutContent p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

/*TABLET RESPONSIVE*/
@media screen and (max-width: 991px) {

    .jhAboutSection {
        padding: 70px 0;
    }

    .jhAboutContainer {
        gap: 40px;
    }

    .jhAboutContent h2 {
        font-size: 38px;
    }

    .jhAboutContent p {
        font-size: 16px;
    }
}

/*MOBILE RESPONSIVE*/
@media screen and (max-width: 767px) {

    .jhAboutSection {
        padding: 50px 0;
    }

    .jhAboutContainer {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .jhAboutContent {
        order: 2;
    }

    .jhAboutImage {
        order: 1;
    }

    .jhAboutContent h2 {
        font-size: 30px;
    }

    .jhAboutContent p {
        font-size: 15px;
        line-height: 1.8;
        text-align:justify;
    }

    .jhSectionTag {
        font-size: 16px;
    }

    .jhAboutImage img {
        border-radius: 15px;
    }
}

@media (max-width: 991px) {
    .jhSectionTag {
        font-size: 14px;
        letter-spacing: 4px;
    }
}

@media (max-width: 767px) {
    .jhSectionTag {
        font-size: 13px;
        letter-spacing: 3px;
        padding-bottom: 10px;
    }

        .jhSectionTag::after {
            width: 50px;
            height: 2px;
        }
}

/* ABOUT SECTION ANIMATION */

.jhAboutContent {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease;
}

.jhAboutImage {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s ease;
}

/* Active State */

.jhAboutSection.active .jhAboutContent {
    opacity: 1;
    transform: translateX(0);
}

.jhAboutSection.active .jhAboutImage {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .4s;
}

/* ===================================
   VISION MISSION QUALITY SECTION
=================================== */

.vmqSection {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}

.vmqContainer {
    display: flex;
    min-height: 765px;
}

/* ===================================
   LEFT IMAGE
=================================== */

.vmqImageArea {
    width: 50%;
    position: relative;
}

.vmqMainImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===================================
   RIGHT CONTENT
=================================== */

.vmqContentArea {
    width: 50%;
    padding: 80px 80px 80px 180px;
    display: flex;
    flex-direction: column;
    /*    justify-content: space-around;   */
}

.vmqItem {
    position: relative;
    min-height: 200px;
}

/* ===================================
   OVERLAY ICON CIRCLES
=================================== */

.vmqIconCircle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -250px; /* Overlaps image */
    top: 26%;
    transform: translateY(-50%);
    z-index: 10;
}

.vmqGreenCircle {
    background: #48b6a8;
}

.vmqBlueCircle {
    background: #072f98;
}

.vmqIconCircle i {
    color: #ffffff;
    font-size: 65px;
}

/* ===================================
   TEXT
=================================== */

.vmqHeading {
    font-size: 28px;
    font-weight: 700;
    color: #003b9a;
    margin-bottom: 15px;
}

.vmqDescription {
    font-size: 18px;
    line-height: 1.9;
    color: #555555;
    margin: 0;
}

/* ===================================
   RESPONSIVE
=================================== */

@media (max-width: 991px) {

    .vmqContainer {
        flex-direction: column;
    }

    .vmqImageArea,
    .vmqContentArea {
        width: 100%;
    }

    .vmqImageArea {
        height: 400px;
    }

    .vmqContentArea {
        padding: 50px 30px;
        gap: 60px;
    }

    .vmqItem {
        text-align: center;
        min-height: auto;
    }

    .vmqIconCircle {
        position: static;
        transform: none;
        margin: 0 auto 20px;
        width: 120px;
        height: 120px;
    }

        .vmqIconCircle i {
            font-size: 45px;
        }

    .vmqHeading {
        font-size: 24px;
    }

    .vmqDescription {
        font-size: 16px;
    }
}

@media (max-width: 576px) {

    .vmqImageArea {
        height: 300px;
    }

    .vmqHeading {
        font-size: 22px;
    }

    .vmqDescription {
        font-size: 15px;
        line-height: 1.8;
    }
}

/*body vmq animation*/
/* Initial hidden state */
.vmqItem {
    opacity: 0;
    transform: translateX(120px);
    transition: all 0.9s ease;
}

    /* Visible state */
    .vmqItem.show {
        opacity: 1;
        transform: translateX(0);
    }

    /* Optional stagger delay */
    .vmqItem:nth-child(1) {
        transition-delay: 0.1s;
    }

    .vmqItem:nth-child(2) {
        transition-delay: 0.3s;
    }

    .vmqItem:nth-child(3) {
        transition-delay: 0.5s;
    }


/* ==========================================
   CONTACT SECTION
========================================== */

.jhContactSection {
    padding: 60px 0;
    background: #f8f8f8;
}

.jhContactContainer {
    max-width: 1400px;
    margin: auto;
    padding: 0 65px;
}

/* Heading */

.jhContactHeading {
    margin-bottom: 50px;
}

    .jhContactHeading h2 {
        font-size: 48px;
        color: #005386;
        font-weight: 700;
        margin-top: 15px;
    }

/* Layout */

.jhContactWrapper {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.jhContactInfo {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.jhContactMap {
    .jhDropdownMenu width: 65%;
    border-radius: 0px;
}

.jhContactMap iframe {
    width: 262%;
    height: 100%;
    min-height: 570px;
    border: none;
    
}

/* Contact Cards */

.jhContactCard {
    background: #03b8b33b;
    color: #000;
    display: flex;
    align-items: center;
    padding: 35px;
    min-height: 170px;
    transition: .4s;
}

    .jhContactCard:hover {
        transform: translateY(-8px);
    }

.jhContactIcon {
    width: 90px;
    min-width: 90px;
    font-size: 45px;
    color: #005386;
}

.jhContactText h4 {
    color: #000;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 700;
}

.jhContactText p {
    color: #000;
    margin: 0;
    line-height: 1.8;
    font-size: 17px;
}

@media (max-width:991px) {

    .jhContactWrapper {
        flex-direction: column;
    }

    .jhContactInfo,
    .jhContactMap {
        width: 100%;
    }

        .jhContactMap iframe {
            min-height: 500px;
        }

    .jhContactHeading h2 {
        font-size: 38px;
    }
}

@media (max-width:767px) {

    .jhContactSection {
        padding: 60px 0;
    }

    .jhContactHeading h2 {
        font-size: 30px;
    }

    .jhContactCard {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        min-height: auto;
    }

    .jhContactIcon {
        margin-bottom: 20px;
        width: auto;
        min-width: auto;
    }

    .jhContactText h4 {
        font-size: 20px;
    }

    .jhContactText p {
        font-size: 15px;
    }

    .jhContactMap iframe {
        min-height: 350px;
    }
}

.jhPhoneLink {
    color: inherit;
    text-decoration: none;
    transition: .3s;
    font-weight: 500;
}

    .jhPhoneLink:hover {
        color: #03b8b3;
        text-decoration: underline;
    }

.jhEmailLink {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
    font-weight: 500;
}

    .jhEmailLink:hover {
        color: #03b8b3;
        text-decoration: underline;
    }

/*==================================================
            FACILITIES SECTION
==================================================*/

.jhFacilitiesSection {
    padding: 35px 0;
    background: #f6fbff;
}

.jhFacilitiesContainer {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}

/* Heading */

.jhFacilitiesHeading {
    text-align: center;
    margin-bottom: 28px;
}

    .jhFacilitiesHeading span {
        color: #03B8B3;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 6px;
        text-transform: uppercase;
    }

    .jhFacilitiesHeading h2 {
        margin: 12px 0 18px;
        font-size: 40px;
        color: #005386;
        font-weight: 800;
    }

    .jhFacilitiesHeading p {
        width: 65%;
        margin: auto;
        color: #666;
        line-height: 1.8;
    }

/* White Panel */

.jhFacilitiesBox {
    background: #fff;
    border-radius: 22px;
    padding: 55px;
    display: flex;
    gap: 60px;
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

/* Left */

.jhFacilitiesLeft {
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 45px;
    column-gap: 35px;
    border-right: 1px solid #e8eef5;
    padding-right: 50px;
}

.jhFacilityItem {
    display: flex;
    align-items: center;
    gap: 18px;
}

.jhFacilityIcon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg,#005386,#03B8B3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}

.jhFacilityItem:hover .jhFacilityIcon {
    transform: translateY(-5px);
}

.jhFacilityIcon i {
    color: #fff;
    font-size: 28px;
}

.jhFacilityItem span {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Right */

.jhFacilitiesRight {
    width: 50%;
}

    .jhFacilitiesRight h3 {
        font-size: 34px;
        color: #005386;
        margin-bottom: 35px;
        font-weight: 800;
    }

.jhServiceItem {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 35px;
}

    .jhServiceItem:last-child {
        margin-bottom: 0;
    }

    .jhServiceItem i {
        font-size: 28px;
        color: #03B8B3;
        margin-top: 5px;
        width: 30px;
    }

    .jhServiceItem h4 {
        margin: 0 0 6px;
        color: #005386;
        font-size: 22px;
        font-weight: 700;
    }

    .jhServiceItem p {
        margin: 0;
        color: #666;
        line-height: 1.8;
    }

/* Responsive */

@media(max-width:991px) {

    .jhFacilitiesBox {
        flex-direction: column;
        padding: 40px;
    }

    .jhFacilitiesLeft,
    .jhFacilitiesRight {
        width: 100%;
    }

    .jhFacilitiesLeft {
        border-right: none;
        border-bottom: 1px solid #e8eef5;
        padding-right: 0;
        padding-bottom: 40px;
    }
}

@media(max-width:768px) {

    .jhFacilitiesLeft {
        grid-template-columns: 1fr;
    }

    .jhFacilitiesHeading h2 {
        font-size: 34px;
    }

    .jhFacilitiesHeading p {
        width: 100%;
    }
}

/*==================================================
        DOCTORS SECTION
==================================================*/

.jhDoctorsSection {
    padding: 35px 0;
    background: #f5f8fc;
}

.jhDoctorsContainer {
    width: 92%;
    max-width: 1500px;
    margin: auto;
}

/*SECTION HEADING*/

.jhDoctorsHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhDoctorsHeading span {
        color: #03b8b3;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 7px;
        text-transform: uppercase;
    }

    .jhDoctorsHeading h2 {
        font-size: 42px;
        color: #005386;
        margin: 12px 0;
        font-weight: 700;
    }

    .jhDoctorsHeading p {
        color: #6f7f92;
        max-width: 700px;
        margin: auto;
        line-height: 28px;
    }

/*DEPARTMENT*/

.jhDepartment {
    margin-top: 60px;
}

.jhDepartmentHeading {
    margin-bottom: 35px;
}

    .jhDepartmentHeading h3 {
        color: #0b2f65;
        font-size: 30px;
        font-weight: 700;
    }

    .jhDepartmentHeading i {
        color: #0d6efd;
        margin-right: 12px;
    }

    .jhDepartmentHeading p {
        margin-top: 8px;
        color: #6f7f92;
    }

/*GRID*/

.jhDoctorsGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
}

/*CARD*/

.jhDoctorCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
    transition: .4s;
    position: relative;
    min-height: 434px;
}

    .jhDoctorCard:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 55px rgba(0,0,0,.15);
    }

/*BLUE TOP*/

.jhDoctorTop {
    height: 100px;
    background: linear-gradient(135deg,#1d5fd3,#0d48c4);
    position: relative;
}

/*DOCTOR IMAGE*/

.jhDoctorImage {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    border: 6px solid #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

    .jhDoctorImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/*CONTENT*/

.jhDoctorContent {
    padding: 65px 28px 35px;
    text-align: center;
}

    .jhDoctorContent h3 {
        font-size: 18px;
        font-weight: 700;
        color: #03b8b3;
        text-transform: uppercase;
        line-height: 36px;
    }

/*BADGE*/

.jhDoctorBadge {
    display: inline-block;
    padding: 10px 22px;
    background: #eaf3ff;
    color: #005386;
    border-radius: 30px;
    font-weight: 600;
    font-size: 12px;
}

/*DIVIDER*/

.jhDoctorDivider {
    width: 70px;
    height: 4px;
    background: linear-gradient(to right,#005386,#03b8b3);
    margin: 6px auto;
    border-radius: 50px;
}

/*DEGREE*/

.jhDoctorDegree {
    color: #6d7b8c;
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 2px;
}

/*CONSULTANT*/

.jhDoctorContent h4 {
    color: #005386;
    font-size: 18px;
    font-weight: 700;
   }

/*SERVICES*/

.jhDoctorServices {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .jhDoctorServices li {
        padding: 8px 0;
        color: #56677b;
        font-size: 16px;
        border-bottom: 1px solid #edf2f8;
    }

        .jhDoctorServices li:last-child {
            border: none;
        }

        .jhDoctorServices li::before {
            color: #0d6efd;
            font-weight: bold;
            margin-right: 10px;
        }

/* HOVER */

.jhDoctorCard:hover .jhDoctorImage {
    transform: translateX(-50%) scale(1.08);
}

.jhDoctorCard:hover .jhDoctorDivider {
    width: 100px;
}

/*RESPONSIVE DESIGN*/

@media (max-width:1400px) {

    .jhDoctorsGrid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:992px) {

    .jhDoctorsSection {
        padding: 70px 0;
    }

    .jhDoctorsGrid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .jhDoctorsHeading h2 {
        font-size: 36px;
    }

    .jhDepartmentHeading h3 {
        font-size: 26px;
    }
}

@media (max-width:768px) {

    .jhDoctorsGrid {
        grid-template-columns: 1fr;
    }

    .jhDoctorCard {
        max-width: 420px;
        margin: auto;
    }

    .jhDoctorsHeading h2 {
        font-size: 30px;
    }
}

@media (max-width:576px) {

    .jhDoctorsSection {
        padding: 50px 0;
    }

    .jhDoctorContent {
        padding: 80px 22px 30px;
    }

        .jhDoctorContent h3 {
            font-size: 22px;
        }

        .jhDoctorContent h4 {
            font-size: 18px;
        }

    .jhDoctorDegree {
        font-size: 15px;
    }
}

/*CARD ENTRY ANIMATION*/

.jhDoctorCard {
    animation: jhFadeUp .8s ease both;
}

    .jhDoctorCard:nth-child(2) {
        animation-delay: .15s;
    }

    .jhDoctorCard:nth-child(3) {
        animation-delay: .30s;
    }

    .jhDoctorCard:nth-child(4) {
        animation-delay: .45s;
    }

@keyframes jhFadeUp {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

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

/*IMAGE HOVER*/

.jhDoctorImage {
    transition: .45s;
}

.jhDoctorCard:hover .jhDoctorImage {
    transform: translateX(-50%) scale(1.12);
}

/*CONTENT HOVER*/

.jhDoctorContent h3 {
    transition: .3s;
}

.jhDoctorCard:hover h3 {
    color: #005386;
}

.jhDoctorBadge {
    transition: .3s;
}

.jhDoctorCard:hover .jhDoctorBadge {
    background: #03b8b3;
    color: #fff;
}

.jhDoctorServices li {
    transition: .3s;
}



/*PREMIUM SHADOW*/

.jhDoctorCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    border: 1px solid rgba(13,110,253,.08);
    pointer-events: none;
}

/*BLUE HEADER PATTERN*/

.jhDoctorTop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#03b8b3 2px, #005386 2px);
    background-size: 28px 28px;
    opacity: .5;
}

.jhDoctorTop::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    right: -70px;
    top: -90px;
}

/*DEPARTMENT HEADING*/

.jhDepartmentHeading {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 45px;
}

    .jhDepartmentHeading::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100px;
        height: 4px;
        border-radius: 30px;
        background: linear-gradient(to right,#0d6efd,#4da4ff);
    }

/*SECTION BACKGROUND*/

.jhDoctorsSection {
    position: relative;
    overflow: hidden;
}

    .jhDoctorsSection::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: #eaf3ff;
        top: -180px;
        left: -180px;
    }

    .jhDoctorsSection::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: #edf6ff;
        bottom: -150px;
        right: -120px;
    }

.jhDoctorsContainer {
    position: relative;
    z-index: 2;
}



.jhDoctorServices {
    margin-top: 18px 0 0;
    padding: 0;
    list-style: none;
}

    .jhDoctorServices li {
        text-align: center;
        font-size: 13px;
        line-height: 1.8;
        color: #666;
        font-weight: 500;
    }

        .jhDoctorServices li span {
            color: #1d6ef5;
            font-weight: 700;
            margin: 0 8px;
        }

/* READ MORE BUTTON */

.jhReadMoreBtn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 26px;
    background: #03b8b3;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .35s ease;
}

    .jhReadMoreBtn:hover {
        background: #005386;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
    }

/* ==========================================
   DOCTOR MODAL
========================================== */

.jhDoctorModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.jhDoctorModalContent {
    background: #fff;
    width: 100%;
    max-width: 700px;
    border-radius: 15px;
    padding: 35px;
    position: relative;
    animation: jhModalZoom .35s ease;
}

.jhDoctorModalClose {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    cursor: pointer;
    color: #005386;
    transition: .3s;
}

    .jhDoctorModalClose:hover {
        color: #03b8b3;
        transform: rotate(90deg);
    }

.jhDoctorModalContent h2 {
    color: #005386;
    margin-bottom: 15px;
    font-size: 32px;
}

.jhDoctorModalContent h4 {
    color: #03b8b3;
    margin-bottom: 20px;
    font-size: 20px;
}

.jhDoctorModalContent p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

.jhDoctorModalContent ul {
    padding-left: 20px;
}

.jhDoctorModalContent li {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.7;
}

/* Animation */

@keyframes jhModalZoom {

    from {
        transform: scale(.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media(max-width:767px) {

    .jhDoctorModalContent {
        padding: 25px;
    }

        .jhDoctorModalContent h2 {
            font-size: 24px;
        }

        .jhDoctorModalContent h4 {
            font-size: 18px;
        }

    .jhDoctorModalClose {
        font-size: 28px;
    }

    .jhReadMoreBtn {
        width: 37%;
        margin-top: 18px;
    }
}

/* ==========================================
   PEDIATRICS SECTION
========================================== */
.jhPediatricsSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhPediatricsContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align:justify;
}

.jhPediatricsTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhPediatricsSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhPediatricsDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
    
}

.jhServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhSectionHeading {
    text-align: center;
    margin-bottom: 10px;
}

    .jhSectionHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhSectionHeading p {
        font-size: 20px;
        color: #666;
    }

.jhServiceGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
}

.jhServiceCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .3s;
}

    .jhServiceCard:hover {
        transform: translateY(-8px);
    }

.jhServiceImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhServiceCard:hover .jhServiceImage {
    transform: scale(1.08);
}

.jhServiceContent {
    padding: 20px 30px;
}

    .jhServiceContent h3 {
        font-size:20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhServiceContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align:justify;
    }

@media(max-width:991px) {

    .jhServiceGrid {
        grid-template-columns: 1fr;
    }

    .jhPediatricsTitle {
        font-size: 36px;
    }

    .jhSectionHeading h2 {
        font-size: 32px;
    }
}

/* PEDIATRICS PAGE ANIMATIONS */

/* Title */

.jhPediatricsTitle {
    opacity: 0;
    animation: jhPediatricsTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhPediatricsSubtitle {
    opacity: 0;
    animation: jhPediatricsSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraph 1 */

.jhPediatricsDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhPediatricsTextRight 1s ease forwards;
    animation-delay: .6s;
}

/* Paragraph 2 */

.jhPediatricsDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhPediatricsTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhSectionHeading {
    opacity: 0;
    animation: jhPediatricsZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhServiceCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhPediatricsCardAnimation .8s ease forwards;
}

    .jhServiceCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhServiceCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhServiceCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhServiceCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhServiceCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhServiceCard:nth-child(6) {
        animation-delay: 2.4s;
    }

/*KEYFRAMES */

@keyframes jhPediatricsTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhPediatricsSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhPediatricsTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhPediatricsTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhPediatricsZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhPediatricsCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   OBG SECTION
========================================== */

.jhOBGSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhOBGContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhOBGTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhOBGSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhOBGDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}

/* OBG SERVICES */

.jhOBGServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhOBGServicesContainer {
    width: 95%;
    max-width: 1700px;
    margin: auto;
}

.jhOBGHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhOBGHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhOBGHeading p {
        font-size: 20px;
        color: #666;
    }

.jhOBGGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

.jhOBGCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .3s;
}

    .jhOBGCard:hover {
        transform: translateY(-8px);
    }

.jhOBGImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition:.5s;
}

.jhOBGCard:hover .jhOBGImage {
    transform: scale(1.08);
}

.jhOBGContent {
    padding: 20px 30px;
}

    .jhOBGContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhOBGContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align:justify;
    }

/* RESPONSIVE */

@media(max-width:991px) {

    .jhOBGGrid {
        grid-template-columns: 1fr;
    }

    .jhOBGTitle {
        font-size: 36px;
    }

    .jhOBGSubtitle {
        font-size: 24px;
    }

    .jhOBGDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhOBGHeading h2 {
        font-size: 32px;
    }

    .jhOBGHeading p {
        font-size: 18px;
    }

    .jhOBGContent h3 {
        font-size: 24px;
    }

    .jhOBGContent p {
        font-size: 17px;
        line-height: 30px;
    }
}

/* OBG PAGE ANIMATIONS */

/* Title */
.jhOBGTitle {
    opacity: 0;
    animation: jhOBGTitleAnimation .9s ease forwards;
}

/* Subtitle */
.jhOBGSubtitle {
    opacity: 0;
    animation: jhOBGSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */
.jhOBGDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhOBGTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhOBGDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhOBGTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */
.jhOBGHeading {
    opacity: 0;
    animation: jhOBGZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */
.jhOBGCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhOBGCardAnimation .8s ease forwards;
}

    .jhOBGCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhOBGCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhOBGCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhOBGCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhOBGCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhOBGCard:nth-child(6) {
        animation-delay: 2.4s;
    }


/* KEYFRAMES */

@keyframes jhOBGTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhOBGSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhOBGTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhOBGTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhOBGZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhOBGCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   ENDOCRINOLOGY SECTION
========================================== */

.jhEndocrinologySection {
    padding: 35px 0;
    background: #ffffff;
}

.jhEndocrinologyContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhEndocrinologyTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhEndocrinologySubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhEndocrinologyDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}


/*ENDOCRINOLOGY SERVICES */

.jhEndocrinologyServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhEndocrinologyServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhEndocrinologyHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhEndocrinologyHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhEndocrinologyHeading p {
        font-size: 20px;
        color: #666;
    }


/* GRID */

.jhEndocrinologyGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 70px;
}


/*CARD */

.jhEndocrinologyCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .4s ease;
}

    .jhEndocrinologyCard:hover {
        transform: translateY(-10px);
        box-shadow: 0 18px 40px rgba(0,0,0,.15);
    }

.jhEndocrinologyImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhEndocrinologyCard:hover .jhEndocrinologyImage {
    transform: scale(1.08);
}

.jhEndocrinologyContent {
    padding: 25px 30px;
}

    .jhEndocrinologyContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
        transition: .3s;
    }

    .jhEndocrinologyContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align: justify;
    }


/*RESPONSIVE */

@media(max-width:991px) {

    .jhEndocrinologyGrid {
        grid-template-columns: 1fr;
    }

    .jhEndocrinologyTitle {
        font-size: 36px;
    }

    .jhEndocrinologySubtitle {
        font-size: 24px;
    }

    .jhEndocrinologyDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhEndocrinologyHeading h2 {
        font-size: 32px;
    }

    .jhEndocrinologyHeading p {
        font-size: 18px;
    }

    .jhEndocrinologyContent h3 {
        font-size: 24px;
    }

    .jhEndocrinologyContent p {
        font-size: 17px;
        line-height: 30px;
    }
}

/*ENDOCRINOLOGY PAGE ANIMATIONS*/

/* Title */
.jhEndocrinologyTitle {
    opacity: 0;
    animation: jhEndocrinologyTitleAnimation .9s ease forwards;
}

/* Subtitle */
.jhEndocrinologySubtitle {
    opacity: 0;
    animation: jhEndocrinologySubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */
.jhEndocrinologyDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhEndocrinologyTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhEndocrinologyDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhEndocrinologyTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */
.jhEndocrinologyHeading {
    opacity: 0;
    animation: jhEndocrinologyZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */
.jhEndocrinologyCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhEndocrinologyCardAnimation .8s ease forwards;
}

    .jhEndocrinologyCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhEndocrinologyCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhEndocrinologyCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhEndocrinologyCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhEndocrinologyCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhEndocrinologyCard:nth-child(6) {
        animation-delay: 2.4s;
    }

/*KEYFRAMES */

@keyframes jhEndocrinologyTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhEndocrinologySubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhEndocrinologyTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhEndocrinologyTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhEndocrinologyZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhEndocrinologyCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   GASTROENTEROLOGY SECTION
========================================== */

.jhGastroSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhGastroContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhGastroTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhGastroSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhGastroDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}


/* GASTRO SERVICES */

.jhGastroServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhGastroServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhGastroHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhGastroHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhGastroHeading p {
        font-size: 20px;
        color: #666;
    }

.jhGastroGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 70px;
}

.jhGastroCard {
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
}

    .jhGastroCard:hover {
        transform: translateY(-10px);
    }

.jhGastroImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhGastroCard:hover .jhGastroImage {
    transform: scale(1.08);
}

.jhGastroContentCard {
    padding: 25px 30px;
}

    .jhGastroContentCard h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhGastroContentCard p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align: justify;
    }


/* RESPONSIVE */

@media(max-width:991px) {

    .jhGastroGrid {
        grid-template-columns: 1fr;
    }

    .jhGastroContainer {
        width: 90%;
    }

    .jhGastroTitle {
        font-size: 36px;
    }

    .jhGastroSubtitle {
        font-size: 24px;
    }

    .jhGastroDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhGastroHeading h2 {
        font-size: 32px;
    }

    .jhGastroHeading p {
        font-size: 18px;
    }

    .jhGastroContentCard h3 {
        font-size: 24px;
    }

    .jhGastroContentCard p {
        font-size: 17px;
        line-height: 30px;
    }
}


/* GASTROENTEROLOGY PAGE ANIMATIONS */

/* Title */

.jhGastroTitle {
    opacity: 0;
    animation: jhGastroTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhGastroSubtitle {
    opacity: 0;
    animation: jhGastroSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraph 1 */

.jhGastroDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhGastroTextRight 1s ease forwards;
    animation-delay: .6s;
}

/* Paragraph 2 */

.jhGastroDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhGastroTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhGastroHeading {
    opacity: 0;
    animation: jhGastroZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhGastroCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhGastroCardAnimation .8s ease forwards;
}

    .jhGastroCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhGastroCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhGastroCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhGastroCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhGastroCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhGastroCard:nth-child(6) {
        animation-delay: 2.4s;
    }


/* KEYFRAMES */

@keyframes jhGastroTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhGastroSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhGastroTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhGastroTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhGastroZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhGastroCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   NEUROSURGERY SECTION
========================================== */

.jhNeuroSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhNeuroContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhNeuroTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhNeuroSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhNeuroDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}


/*NEUROSURGERY SERVICES */

.jhNeuroServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhNeuroServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhNeuroHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhNeuroHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhNeuroHeading p {
        font-size: 20px;
        color: #666;
    }

.jhNeuroGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 70px;
}

.jhNeuroCard {
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
}

    .jhNeuroCard:hover {
        transform: translateY(-10px);
    }

.jhNeuroImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhNeuroContentCard {
    padding: 25px 30px;
}

.jhNeuroCard:hover .jhNeuroImage{
    transform: scale(1.08);
}

.jhNeuroContentCard h3 {
    font-size: 20px;
    color: #000;
    margin-bottom: 10px;
}

    .jhNeuroContentCard p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align:justify;
    }


/*RESPONSIVE */

@media(max-width:991px) {

    .jhNeuroContainer {
        width: 90%;
    }

    .jhNeuroGrid {
        grid-template-columns: 1fr;
    }

    .jhNeuroTitle {
        font-size: 36px;
    }

    .jhNeuroSubtitle {
        font-size: 24px;
    }

    .jhNeuroDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhNeuroHeading h2 {
        font-size: 32px;
    }

    .jhNeuroHeading p {
        font-size: 18px;
    }

    .jhNeuroContentCard h3 {
        font-size: 24px;
    }

    .jhNeuroContentCard p {
        font-size: 17px;
        line-height: 30px;
    }
}


/*NEUROSURGERY PAGE ANIMATIONS */

/* Title */

.jhNeuroTitle {
    opacity: 0;
    animation: jhNeuroTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhNeuroSubtitle {
    opacity: 0;
    animation: jhNeuroSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraph 1 */

.jhNeuroDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhNeuroTextRight 1s ease forwards;
    animation-delay: .6s;
}

/* Paragraph 2 */

.jhNeuroDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhNeuroTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhNeuroHeading {
    opacity: 0;
    animation: jhNeuroZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhNeuroCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhNeuroCardAnimation .8s ease forwards;
}

    .jhNeuroCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhNeuroCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhNeuroCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhNeuroCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhNeuroCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhNeuroCard:nth-child(6) {
        animation-delay: 2.4s;
    }


/*KEYFRAMES */

@keyframes jhNeuroTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhNeuroSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhNeuroTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhNeuroTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhNeuroZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhNeuroCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   ANAESTHESIA SECTION
========================================== */

.jhAnaesthesiaSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhAnaesthesiaContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhAnaesthesiaTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhAnaesthesiaSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhAnaesthesiaDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}


/* ANAESTHESIA SERVICES */

.jhAnaesthesiaServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhAnaesthesiaServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhAnaesthesiaHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhAnaesthesiaHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhAnaesthesiaHeading p {
        font-size: 20px;
        color: #666;
    }

.jhAnaesthesiaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 70px;
}

.jhAnaesthesiaCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
    opacity: 0;
    transform: translateY(40px);
}

    .jhAnaesthesiaCard:hover {
        transform: translateY(-8px);
    }

.jhAnaesthesiaImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhAnaesthesiaCard:hover .jhAnaesthesiaImage {
    transform: scale(1.08);
}

.jhAnaesthesiaContent {
    padding: 25px 30px;
}

    .jhAnaesthesiaContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhAnaesthesiaContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align: justify;
    }


/* RESPONSIVE */

@media(max-width:991px) {

    .jhAnaesthesiaGrid {
        grid-template-columns: 1fr;
    }

    .jhAnaesthesiaTitle {
        font-size: 36px;
    }

    .jhAnaesthesiaSubtitle {
        font-size: 24px;
    }

    .jhAnaesthesiaDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhAnaesthesiaHeading h2 {
        font-size: 32px;
    }

    .jhAnaesthesiaHeading p {
        font-size: 18px;
    }

    .jhAnaesthesiaContent h3 {
        font-size: 24px;
    }

    .jhAnaesthesiaContent p {
        font-size: 17px;
        line-height: 30px;
    }
}


/* ANAESTHESIA ANIMATIONS */

/* Title */

.jhAnaesthesiaTitle {
    opacity: 0;
    animation: jhAnaesthesiaTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhAnaesthesiaSubtitle {
    opacity: 0;
    animation: jhAnaesthesiaSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */

.jhAnaesthesiaDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhAnaesthesiaTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhAnaesthesiaDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhAnaesthesiaTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhAnaesthesiaHeading {
    opacity: 0;
    animation: jhAnaesthesiaZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhAnaesthesiaCard:nth-child(1) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 1.4s;
}

.jhAnaesthesiaCard:nth-child(2) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 1.6s;
}

.jhAnaesthesiaCard:nth-child(3) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 1.8s;
}

.jhAnaesthesiaCard:nth-child(4) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 2s;
}

.jhAnaesthesiaCard:nth-child(5) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 2.2s;
}

.jhAnaesthesiaCard:nth-child(6) {
    animation: jhAnaesthesiaCardAnimation .8s ease forwards;
    animation-delay: 2.4s;
}


/*KEYFRAMES */

@keyframes jhAnaesthesiaTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhAnaesthesiaSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhAnaesthesiaTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhAnaesthesiaTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhAnaesthesiaZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhAnaesthesiaCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   NEURO DEVELOPMENTAL PAEDIATRICS SECTION
========================================== */

.jhNeuroPediatricsSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhNeuroPediatricsContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhNeuroPediatricsTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhNeuroPediatricsSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhNeuroPediatricsDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}

/* NEURO DEVELOPMENTAL SERVICES */

.jhNeuroPediatricsServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhNeuroPediatricsServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhNeuroPediatricsHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhNeuroPediatricsHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhNeuroPediatricsHeading p {
        font-size: 20px;
        color: #666;
    }

.jhNeuroPediatricsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 70px;
}

.jhNeuroPediatricsCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
    opacity: 0;
    transform: translateY(40px);
}

    .jhNeuroPediatricsCard:hover {
        transform: translateY(-8px);
    }

.jhNeuroPediatricsImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhNeuroPediatricsCard:hover .jhNeuroPediatricsImage{
    transform: scale(1.08);
}

.jhNeuroPediatricsContent {
    padding: 25px 30px;
}

    .jhNeuroPediatricsContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhNeuroPediatricsContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align: justify;
    }


/* RESPONSIVE */

@media(max-width:991px) {

    .jhNeuroPediatricsGrid {
        grid-template-columns: 1fr;
    }

    .jhNeuroPediatricsTitle {
        font-size: 36px;
    }

    .jhNeuroPediatricsSubtitle {
        font-size: 24px;
    }

    .jhNeuroPediatricsDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhNeuroPediatricsHeading h2 {
        font-size: 32px;
    }

    .jhNeuroPediatricsHeading p {
        font-size: 18px;
    }

    .jhNeuroPediatricsContent h3 {
        font-size: 24px;
    }

    .jhNeuroPediatricsContent p {
        font-size: 17px;
        line-height: 30px;
    }
}


/* NEURO DEVELOPMENTAL PAEDIATRICS ANIMATIONS */

/* Title */

.jhNeuroPediatricsTitle {
    opacity: 0;
    animation: jhNeuroPediatricsTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhNeuroPediatricsSubtitle {
    opacity: 0;
    animation: jhNeuroPediatricsSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */

.jhNeuroPediatricsDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhNeuroPediatricsTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhNeuroPediatricsDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhNeuroPediatricsTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhNeuroPediatricsHeading {
    opacity: 0;
    animation: jhNeuroPediatricsZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhNeuroPediatricsCard:nth-child(1) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 1.4s;
}

.jhNeuroPediatricsCard:nth-child(2) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 1.6s;
}

.jhNeuroPediatricsCard:nth-child(3) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 1.8s;
}

.jhNeuroPediatricsCard:nth-child(4) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 2s;
}

.jhNeuroPediatricsCard:nth-child(5) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 2.2s;
}

.jhNeuroPediatricsCard:nth-child(6) {
    animation: jhNeuroPediatricsCardAnimation .8s ease forwards;
    animation-delay: 2.4s;
}


/* KEYFRAMES */

@keyframes jhNeuroPediatricsTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhNeuroPediatricsSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhNeuroPediatricsTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhNeuroPediatricsTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhNeuroPediatricsZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhNeuroPediatricsCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   VASCULAR SURGERY SECTION
========================================== */

.jhVascularSection {
    padding: 35px 0;
    background: #ffffff;
}

.jhVascularContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhVascularTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhVascularSubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhVascularDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}


/* VASCULAR SERVICES */

.jhVascularServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhVascularServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhVascularHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhVascularHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhVascularHeading p {
        font-size: 20px;
        color: #666;
    }

.jhVascularGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 70px;
}

.jhVascularCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
    opacity: 0;
    transform: translateY(40px);
}

    .jhVascularCard:hover {
        transform: translateY(-8px);
    }

.jhVascularImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhVascularCard:hover .jhVascularImage {
    transform: scale(1.08);

}

.jhVascularContent {
    padding: 25px 30px;
}

    .jhVascularContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhVascularContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align: justify;
    }


/* RESPONSIVE */

@media(max-width:991px) {

    .jhVascularGrid {
        grid-template-columns: 1fr;
    }

    .jhVascularTitle {
        font-size: 36px;
    }

    .jhVascularSubtitle {
        font-size: 24px;
    }

    .jhVascularDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhVascularHeading h2 {
        font-size: 32px;
    }

    .jhVascularHeading p {
        font-size: 18px;
    }

    .jhVascularContent h3 {
        font-size: 24px;
    }

    .jhVascularContent p {
        font-size: 17px;
        line-height: 30px;
    }
}


/*VASCULAR SURGERY ANIMATIONS */

/* Title */

.jhVascularTitle {
    opacity: 0;
    animation: jhVascularTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhVascularSubtitle {
    opacity: 0;
    animation: jhVascularSubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */

.jhVascularDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhVascularTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhVascularDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhVascularTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Services Heading */

.jhVascularHeading {
    opacity: 0;
    animation: jhVascularZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhVascularCard:nth-child(1) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 1.4s;
}

.jhVascularCard:nth-child(2) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 1.6s;
}

.jhVascularCard:nth-child(3) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 1.8s;
}

.jhVascularCard:nth-child(4) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 2s;
}

.jhVascularCard:nth-child(5) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 2.2s;
}

.jhVascularCard:nth-child(6) {
    animation: jhVascularCardAnimation .8s ease forwards;
    animation-delay: 2.4s;
}


/* KEYFRAMES */

@keyframes jhVascularTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhVascularSubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhVascularTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhVascularTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhVascularZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhVascularCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ==========================================
   RHEUMATOLOGY SECTION
========================================== */

.jhRheumatologySection {
    padding: 35px 0;
    background: #ffffff;
}

.jhRheumatologyContainer {
    width: 70%;
    max-width: 1400px;
    margin: auto;
    text-align: justify;
}

.jhRheumatologyTitle {
    font-size: 48px;
    font-weight: 700;
    color: #005386;
    margin-bottom: 15px;
}

.jhRheumatologySubtitle {
    font-size: 28px;
    color: #03b8b3;
    margin-bottom: 25px;
}

.jhRheumatologyDescription {
    font-size: 20px;
    line-height: 36px;
    color: #555;
}

/* SERVICES */

.jhRheumatologyServicesSection {
    padding: 30px 0;
    background: #f5f8fc;
}

.jhRheumatologyServicesContainer {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.jhRheumatologyHeading {
    text-align: center;
    margin-bottom: 60px;
}

    .jhRheumatologyHeading h2 {
        font-size: 42px;
        color: #005386;
        margin-bottom: 10px;
    }

    .jhRheumatologyHeading p {
        font-size: 20px;
        color: #666;
    }

.jhRheumatologyGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    gap: 70px;
}

.jhRheumatologyCard {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: .35s;
}

    .jhRheumatologyCard:hover {
        transform: translateY(-8px);
    }

.jhRheumatologyImage {
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition: .5s;
}

.jhRheumatologyCard:hover .jhRheumatologyImage {
    transform: scale(1.08);
}

.jhRheumatologyContent {
    padding: 25px 30px;
}

    .jhRheumatologyContent h3 {
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
    }

    .jhRheumatologyContent p {
        font-size: 15px;
        line-height: 23px;
        color: #666;
        text-align:justify;
    }

/* RESPONSIVE */

@media(max-width:991px) {

    .jhRheumatologyGrid {
        grid-template-columns: 1fr;
    }

    .jhRheumatologyTitle {
        font-size: 36px;
    }

    .jhRheumatologySubtitle {
        font-size: 24px;
    }

    .jhRheumatologyDescription {
        font-size: 18px;
        line-height: 32px;
    }

    .jhRheumatologyHeading h2 {
        font-size: 32px;
    }

    .jhRheumatologyHeading p {
        font-size: 18px;
    }

    .jhRheumatologyContent h3 {
        font-size: 24px;
    }

    .jhRheumatologyContent p {
        font-size: 17px;
        line-height: 30px;
    }
}

/*ANIMATIONS*/

/* Title */

.jhRheumatologyTitle {
    opacity: 0;
    animation: jhRheumatologyTitleAnimation .9s ease forwards;
}

/* Subtitle */

.jhRheumatologySubtitle {
    opacity: 0;
    animation: jhRheumatologySubtitleAnimation .9s ease forwards;
    animation-delay: .3s;
}

/* Paragraphs */

.jhRheumatologyDescription:nth-of-type(1) {
    opacity: 0;
    animation: jhRheumatologyTextRight 1s ease forwards;
    animation-delay: .6s;
}

.jhRheumatologyDescription:nth-of-type(2) {
    opacity: 0;
    animation: jhRheumatologyTextLeft 1s ease forwards;
    animation-delay: .9s;
}

/* Heading */

.jhRheumatologyHeading {
    opacity: 0;
    animation: jhRheumatologyZoom .8s ease forwards;
    animation-delay: 1.2s;
}

/* Cards */

.jhRheumatologyCard {
    opacity: 0;
    transform: translateY(40px);
    animation: jhRheumatologyCardAnimation .8s ease forwards;
}

    .jhRheumatologyCard:nth-child(1) {
        animation-delay: 1.4s;
    }

    .jhRheumatologyCard:nth-child(2) {
        animation-delay: 1.6s;
    }

    .jhRheumatologyCard:nth-child(3) {
        animation-delay: 1.8s;
    }

    .jhRheumatologyCard:nth-child(4) {
        animation-delay: 2s;
    }

    .jhRheumatologyCard:nth-child(5) {
        animation-delay: 2.2s;
    }

    .jhRheumatologyCard:nth-child(6) {
        animation-delay: 2.4s;
    }

/* KEYFRAMES */

@keyframes jhRheumatologyTitleAnimation {

    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes jhRheumatologySubtitleAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes jhRheumatologyTextRight {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

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

@keyframes jhRheumatologyTextLeft {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

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

@keyframes jhRheumatologyZoom {

    from {
        opacity: 0;
        transform: scale(.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jhRheumatologyCardAnimation {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

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