/* Banner Container */
.hero-banner {
    position: relative;
    width: 100%;
    min-height: 260px;
    background: url('your-hospital-image.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* Semi-transparent Dark Blue Overlay */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 54, 116, 0.75); /* Dark Blue Overlay */
    z-index: 1;
}

/* Content Container */
.banner-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    padding: 20px;
}

/* Page Title Styling */
.banner-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

/* Breadcrumb Layout */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    
}


.breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Breadcrumb Links */
.breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Separator Chevron '>' */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    padding: 0 8px;
    color: #ffffff;
    font-size: 0.85rem;
}

/* Active Item (Matching Coral Pink color in image) */
.breadcrumb-item.active {
    color: #e56d6d;
}




        /* ========================================
           GLOBAL
        ======================================== */


        html {
            scroll-behavior: smooth;
        }

        

        button,
        a {
            font-family: inherit;
        }


        /* ========================================
           MAIN SECTION
        ======================================== */

        .gyn-section {
            width: 100%;
            padding: 50px 30px;
        }

        /*
            DESKTOP LAYOUT

            LEFT  = SECTION
            RIGHT = ASIDE
        */

        .gyn-container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;

            display: grid;

            /*
                Left section = flexible
                Right aside   = 225px
            */
            grid-template-columns: minmax(0, 1fr) 345px;

            gap: 28px;

            align-items: start;
        }


        /* ========================================
           LEFT CONTENT - SECTION
        ======================================== */

        .gyn-content {
            width: 100%;
            min-width: 0;
        }


        /* ========================================
           IMAGE GRID
        ======================================== */

        .image-grid {
            width: 100%;

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

            gap: 10px;

            margin-bottom: 14px;
        }

        .image-box {
            width: 100%;
            height: 350px;

            overflow: hidden;

            border-radius: 10px;

            background: #eeeeee;
        }

        .image-box img {
            width: 100%;
            height: 100%;

            display: block;

            object-fit: cover;

            transition: transform 0.4s ease;
        }

        .image-box:hover img {
            transform: scale(1.04);
        }


        /* ========================================
           DESCRIPTION
        ======================================== */

        .description1 {
            color: #555555;

            font-size: 16px;
            line-height: 1.65;

            text-align: left;

            margin-bottom: 14px;
        }

        .description p {
            margin-bottom: 16px;
        }

        .description p:last-child {
            margin-bottom: 0;
        }


        /* ========================================
           FAQ SECTION
        ======================================== */

        .faq-section {
            width: 100%;
        }

        .faq-section h2 {
            color: #142c6d;

            font-size: 30px;
            line-height: 1;

            font-weight: 600;

            margin-bottom: 15px;
        }


        /* ========================================
           FAQ ITEM
        ======================================== */

        .faq-item {
            width: 100%;

            margin-bottom: 11px;

            border-radius: 4px;

            overflow: hidden;

            background: #fceff0;
        }


        /*
            FAQ COLORS

            nth-of-type counts only DIV elements,
            so the colors apply correctly.
        */

        .faq-item:nth-of-type(2) {
            background: #eeeeff;
        }

        .faq-item:nth-of-type(3) {
            background: #edf7df;
        }

        .faq-item:nth-of-type(4) {
            background: #faeee4;
        }

        .faq-item:nth-of-type(5) {
            background: #fff0f5;
        }


        /* ========================================
           FAQ QUESTION
        ======================================== */

        .faq-question {
            width: 100%;

            border: none;
            outline: none;

            background: transparent;

            color: #142c6d;

            padding: 14px 16px;

            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 10px;

            text-align: left;

            cursor: pointer;

            font-size: 18px;
            line-height: 1.4;

            font-weight: 600;
        }

        .faq-question:hover {
            background: rgba(20, 44, 109, 0.04);
        }

        .faq-question:focus-visible {
            outline: 2px solid #142c6d;
            outline-offset: -2px;
        }


        /* ========================================
           FAQ ICON
        ======================================== */

        .faq-icon {
            flex: 0 0 auto;

            font-size: 15px;

            font-weight: 400;

            line-height: 1;
        }


        /* ========================================
           FAQ ANSWER
        ======================================== */

        .faq-answer {
            display: grid;

            grid-template-rows: 0fr;

            transition: grid-template-rows 0.3s ease;
        }

        .faq-answer-inner {
            overflow: hidden;
        }

        .faq-answer p {
            color: #555555;

            font-size: 16px;

            line-height: 1.65;

            padding: 0 16px;
        }


        /* ========================================
           ACTIVE FAQ
        ======================================== */

        .faq-item.active .faq-answer {
            grid-template-rows: 1fr;
        }

        .faq-item.active .faq-answer p {
            padding-bottom: 14px;
        }


        /* ========================================
           RIGHT SIDEBAR - ASIDE
        ======================================== */

        .gyn-sidebar {
            width: 100%;

            background: #f2f2f2;

            border-radius: 4px;

            padding: 14px 11px;

            display: flex;

            flex-direction: column;

            gap: 10px;

            height: max-content;
        }


        /* ========================================
           SIDEBAR BUTTON
        ======================================== */

        .sidebar-btn {
            width: 100%;

            min-height: 58px;

            background: #ff0909;

            color: #ffffff;

            border-radius: 9px;

            text-decoration: none;

            display: flex;

            align-items: center;
            justify-content: center;

            text-align: center;

            padding: 8px 12px;

            font-size: 17px;

            line-height: 1.2;

            font-weight: 600;

            transition:
                background 0.2s ease,
                transform 0.2s ease;
        }

        .sidebar-btn:hover {
            background: #dc0000;

            transform: translateY(-1px);
        }

        .sidebar-btn:focus-visible {
            outline: 3px solid #142c6d;

            outline-offset: 2px;
        }


        /* ========================================
           TABLET
        ======================================== */

        @media (min-width: 768px) and (max-width: 1023px) {

            .gyn-section {
                padding: 35px 30px;
            }

            .gyn-container {

                max-width: 900px;

                /*
                    LEFT SECTION
                    RIGHT ASIDE
                */
                grid-template-columns: minmax(0, 1fr) 190px;

                gap: 22px;
            }

            /* Sidebar */

            .gyn-sidebar {
                padding: 14px 10px;

                gap: 10px;
            }

            .sidebar-btn {
                min-height: 31px;

                font-size: 9px;

                padding: 7px 10px;

                border-radius: 9px;
            }


            /* Images */

            .image-grid {
                gap: 9px;
            }

            .image-box {
                height: 175px;
            }


            /* Description */

            .description {
                font-size: 8px;

                line-height: 1.55;

                margin-bottom: 14px;
            }

            .description p {
                margin-bottom: 10px;
            }


            /* FAQ */

            .faq-section h2 {
                font-size: 28px;

                margin-bottom: 14px;
            }

            .faq-item {
                margin-bottom: 10px;
            }

            .faq-question {
                font-size: 8px;

                padding: 14px 15px;
            }

            .faq-icon {
                font-size: 14px;
            }

            .faq-answer p {
                font-size: 7.5px;

                padding-left: 15px;
                padding-right: 15px;
            }

            .faq-item.active .faq-answer p {
                padding-bottom: 14px;
            }
        }


        /* ========================================
           MOBILE
        ======================================== */

        @media (max-width: 767px) {

            .gyn-section {
                padding: 20px 15px;
            }

            /*
                On mobile:

                SECTION
                   ↓
                ASIDE
            */

            .gyn-container {

                display: flex;

                flex-direction: column;

                max-width: 600px;

                gap: 18px;
            }


            /* LEFT SECTION */

            .gyn-content {
                order: 1;
            }


            /* RIGHT ASIDE */

            .gyn-sidebar {
                order: 2;

                width: 100%;

                display: grid;

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

                gap: 8px;

                padding: 10px;
            }

            .sidebar-btn {
                min-height: 42px;

                font-size: 10px;

                padding: 7px 8px;
            }


            /* Images */

            .image-grid {
                gap: 8px;
            }

            .image-box {
                height: 160px;
            }


            /* Description */

            .description {
                font-size: 9px;

                line-height: 1.7;
            }


            /* FAQ */

            .faq-section h2 {
                font-size: 27px;

                margin-bottom: 14px;
            }

            .faq-question {
                font-size: 9px;

                padding: 14px;
            }

            .faq-answer p {
                font-size: 8px;

                line-height: 1.6;
            }

            .faq-item.active .faq-answer p {
                padding-bottom: 14px;
            }
        }


        /* ========================================
           SMALL MOBILE
        ======================================== */

        @media (max-width: 480px) {

            .gyn-section {
                padding: 15px 12px;
            }


            /* Sidebar becomes one column */

            .gyn-sidebar {
                grid-template-columns: 1fr;
            }

            .sidebar-btn {
                min-height: 38px;

                font-size: 10px;
            }


            /* Images */

            .image-box {
                height: 125px;
            }


            /* Description */

            .description {
                font-size: 8px;
            }


            /* FAQ */

            .faq-section h2 {
                font-size: 25px;
            }

            .faq-question {
                font-size: 8px;

                padding: 12px;
            }

            .faq-answer p {
                font-size: 7.5px;

                padding-left: 12px;
                padding-right: 12px;
            }
        }


        /* ========================================
           EXTRA SMALL MOBILE
        ======================================== */

        @media (max-width: 360px) {

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

            .image-box {
                height: 180px;
            }
        }