* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
 
	
    

    /* CARD CONTAINER */
    .cards {
        height: 480px;
        display: flex;
        gap: 12px;
        width: 100%;
    }

    /* INDIVIDUAL CARD */
    .card {
        position: relative;
        height: 100%;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        border-radius: 24px;

        background-size: cover;
        background-position: center;

        cursor: pointer;

        transition:
            flex 0.65s cubic-bezier(.22,.61,.36,1),
            transform 0.4s ease,
            filter 0.4s ease;
			border: 0px;
    }
	

    /* DARK OVERLAY */
    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.78) 0%,
                rgba(0,0,0,.30) 45%,
                rgba(0,0,0,.08) 100%
            );
        transition: background .5s ease;
        z-index: 1;
    }

 

    /* CARD CONTENT */
    .content {
        position: absolute;
        left: 28px;
        right: 22px;
        bottom: 28px;
        z-index: 3;

        opacity: 0;
        transform: translateY(20px);

        transition:
            opacity .35s ease,
            transform .5s ease;
    }

    .content h2 {
        font-size: 26px;
        line-height: 1.05;
        margin-bottom: 14px;
        color: #fff;
        white-space: normal;
    }

    .content p {
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 1.45;
        max-width: 310px;
        color: rgba(255,255,255,.92);
        margin-bottom: 22px;
    }

    .learn {
        display: inline-block;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 14px;
        color: white;
    }

    /* EXPAND CARD */
    .card.active {
        flex: 3.1;
    }

    .card.active .content {
        opacity: 1;
        transform: translateY(0);
        transition-delay: .18s;
    }

    /* NARROW CARD TITLE */
    .small-title { color:#fff;
        position: absolute;
        z-index: 3;
        left: 25px;
        bottom: 28px;

        font-size: 20px;
        line-height: 1.05;

        opacity: 1;
        transition: opacity .25s ease;
		 font-family: "Orbitron", sans-serif;
    }

    .card.active .small-title {
        opacity: 0;
    }

    /* PLUS BUTTON */
    .plus {
        position: absolute;
        right: 25px;
        bottom: -40px;

        width: 38px;
        height: 38px;

        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.35);

        background: rgba(255,255,255,.12);
        backdrop-filter: blur(8px);

        color: white;
        font-family: Arial, sans-serif;
        font-size: 25px;

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

        z-index: 5;

        transition:
            transform .4s ease,
            background .3s ease;
    }

    .card:hover .plus { bottom: 28px;
        background: rgba(255,255,255,.22);
    }

    .card.active .plus {
        transform: rotate(45deg);
    }

    /* HOVER EFFECT */
    .card:hover {
        transform: translateY(-2px);
    }

    .card:not(.active) {
        filter: brightness(.92);
    }

    .card.active {
        filter: brightness(1);
    }

    /* BACKGROUND IMAGES */
    .general { background-image: url(../images/service1.jpg)    }

    .pediatrics {background-image: url(../images/service2.jpg)    }

    .behavioral {background-image: url(../images/service3.jpg)    }

    .obgyn {background-image: url(../images/service4.jpg)    }

    .physio {background-image: url(../images/service5.jpg)    }

    .additional {background-image: url(../images/service6.jpg)    }

    /* BOTTOM LABEL */
    .ask {
        position: fixed;
        bottom: 0;
        left: 0;

        padding: 10px 24px;

        background: #00504d;
        border-radius: 0 25px 0 0;

        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;

        color: white;
    }

    .ask::before {
        content: "";
        display: inline-block;

        width: 8px;
        height: 8px;

        margin-right: 8px;

        border-radius: 50%;
        background: #4ad79a;
    }

    /* TABLET */
    @media (max-width: 900px) {
        .cards {
            height: 420px;
            gap: 8px;
        }

        .content h2 {
            font-size: 22px;
        }

        .content p {
            font-size: 12px;
        }

        .small-title {
            font-size: 17px;
        }
    }

    /* MOBILE */
    @media (max-width: 650px) {
        body {
            overflow-y: auto;
        }

        .wrapper {
            padding: 10px;
        }

        .cards {
            height: auto;
            min-height: 700px;
            flex-direction: column;
        }

        .card,
        .card.active {
            flex: none;
            height: 100px;
            width: 100%;

            transition:
                height .55s cubic-bezier(.22,.61,.36,1);
        }

        .card.active {
            height: 360px;
        }

        .small-title {
            left: 25px;
            bottom: 22px;
        }

        .content {
            left: 25px;
            bottom: 25px;
        }

        .content h2 {
            font-size: 25px;
        }

        .content p {
            font-size: 13px;
        }
    }
	
/*************Team Start************/	

.team-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px 0px 0px 0px;
        }

        .team-container { 
            max-width: 100%;
            display: grid;
            grid-template-columns: 430px 1fr;
            gap: 70px;
            align-items: center;
        }

        /* Main member photo */
        .main-photo {
            width: 416px;
            height: 452px;
            overflow: hidden;
            background: #222;
			border-radius: 25px;
        }

        .main-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
			border-radius: 25px;
        }

        /* Right content */
        .team-info {
            text-align: center;
        }

        .member-name { text-align:right;
            font-size: 20px;
            font-weight: 500;
            letter-spacing: 1px;
            margin-bottom: 22px; color:#fff;
        }

        .member-role {text-align:right;
            font-size: 14px;
            color: #fff;
            margin-bottom: 26px;
        }

        .social {text-align:right;
            display: flex;
            justify-content: right;
            gap: 13px;
            margin-bottom: 38px;
        }

        .social a {
            width: 31px;
            height: 31px;
            border: 1px solid #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
            transition: 0.3s;
        }

        .social a:hover {
            background: #fff;
            color: #000;
        }

        .description {text-align:right; 
            margin:  0px 0px 20px 0px;
            font-size: 14px;
            line-height: 24px;
            color: #fff;
        }

        /* Team thumbnails */
        .members {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 28px;
        }

        .member-thumb {
            width: 110px;
            height: 110px;
            overflow: hidden;
            cursor: pointer;
            transition: 0.3s;
			border-radius: 20px;
        }

        .member-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
			border-radius: 20px;
        }

        .member-thumb:hover {
            transform: scale(1.05);
        }

        .member-thumb.active {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

        /* Arrows */
        .arrows {
            margin-top: 24px;
            display: flex;
            justify-content: center;
            gap: 18px;
            font-size: 24px;
        }

        .arrow {
            cursor: pointer;
            transition: 0.2s;
        }

        .arrow:hover {
            color: #00aeef;
        }

        /* Mobile */
        @media (max-width: 900px) {

            .team-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .main-photo {
                width: 100%;
                max-width: 416px;
                margin: auto;
            }

            .team-info {
                width: 100%;
            }
        }

        @media (max-width: 600px) {

            .team-section {
                padding: 20px;
            }

            .main-photo {
                height: 400px;
            }

            .members {
                gap: 10px;
                flex-wrap: wrap;
            }

            .member-thumb {
                width: 75px;
                height: 75px;
            }

            .description {
                font-size: 13px;
                line-height: 21px;
            }
        }
	
	
/************Services Start	**************/	
 
.services-header {
    max-width: 750px;
    margin-bottom: 30px;
}

 
/* COLLAGE */
.services-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 170px;
    gap: 14px;
}

/* IMAGE BOX */
.service-image {
    position: relative;
    overflow: hidden;
    background: #111;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}

.service-image:hover img {
    transform: scale(1.08);
}

.service-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent 55%
    );
    pointer-events: none;
}

/* DIFFERENT SIZES */
.image-1 {
    grid-column: span 6;
    grid-row: span 2;
}

.image-2 {
    grid-column: span 3;
    grid-row: span 2;
}

.image-3 {
    grid-column: span 3;
    grid-row: span 2;
}

.image-4 {
    grid-column: span 3;
    grid-row: span 3;
}

.image-5 {
    grid-column: span 3;
    grid-row: span 2;
}

.image-6 {
    grid-column: span 6;
    grid-row: span 2;
}

.image-7 {
    grid-column: span 6;
    grid-row: span 2;
}

.image-8 {
    grid-column: span 3;
    grid-row: span 2;
}

/* SERVICE LABEL */
.service-label {
    position: absolute;
    z-index: 2;
    left: 22px;
    bottom: 20px;
}

.service-label h3 { color:#fff;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.service-label span {
    color: #e2a750;
    font-size: 12px;
    letter-spacing: 2px;
}

/* SERVICE LIST */
.service-list {
    margin-top: 80px;
    border-top: 1px solid #292929;
}

.service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 10px;
    border-bottom: 1px solid #292929;
    transition: .3s ease;
}

.service-item:hover {
    padding-left: 25px;
    background: #0d0d0d;
}

.service-item h3 {
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 500;
}

.service-number {
    color: #65ff6a;
    font-size: 13px;
    letter-spacing: 2px;
}

/* BUTTON */
.services-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
    padding: 17px 27px;
    border: 1px solid #65ff6a;
    color: #65ff6a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    transition: .3s;
}

.services-button:hover {
    background: #65ff6a;
    color: #000;
}

/* MOBILE */
@media (max-width: 800px) {

    .services {
        padding: 70px 5%;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .image-1,
    .image-6,
    .image-7 {
        grid-column: span 2;
    }

    .image-2,
    .image-3,
    .image-4,
    .image-5,
    .image-8 {
        grid-column: span 1;
    }

    .services-header h1 {
        letter-spacing: -2px;
    }
}

@media (max-width: 500px) {

    .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 230px;
    }

    .services-grid > * {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .image-1,
    .image-4,
    .image-6,
    .image-7 {
        height: 300px;
    }
}

	
/************Slider Start************/
.slider {
        position: relative;
        width: 100%;
        height: 610px;
        overflow: hidden;
    }

    .slides {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.7s ease;
    }

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

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

    /* Dark/light overlay */
    .slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.22);
    }

    .slide-content {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 900px;
        text-align: center;
        color: #fff;
    }

    .slide-content h1 {
        font-size: clamp(38px, 5vw, 54px);
        font-weight: 300;
        margin-bottom: 14px;
        text-shadow: 0 1px 3px rgba(0,0,0,.25);
    }

    .slide-content p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .slide-content .stats {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .slide-content .btn {
        display: inline-block;
        padding: 7px 13px;
        background: #0da9d3;
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        border-radius: 2px;
        transition: background .2s ease;
    }

    .slide-content .btn:hover {
        background: #078db3;
    }

    /* Arrows */
    /*.arrow {
        position: absolute;
        z-index: 5;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255,255,255,.9);
        border-radius: 50%;
        background: rgba(0,0,0,.08);
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        transition: background .2s ease;
    }

    .arrow:hover {
        background: rgba(0,0,0,.35);
    }

    .arrow.prev {
        left: 28px;
    }

    .arrow.next {
        right: 28px;
    }*/

    /* Pagination */
    .dots {
        position: absolute;
        z-index: 5;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #f5c18c;
        cursor: pointer;
        transition: background .3s ease, transform .3s ease;
    }

    .dot.active {
        background: #f47c20;
        transform: scale(1.05);
    }

    @media (max-width: 600px) {
        .slider {
            height: 350px;
        }

        .slide-content h1 {
            font-size: 34px;
        }

        .slide-content .stats {
            font-size: 15px;
        }

        .arrow.prev {
            left: 12px;
        }

        .arrow.next {
            right: 12px;
        }
    }