/* ==========================================
   RESET
========================================== */



@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

h1,h2,h3{
    font-family:'Montserrat',sans-serif;
}

p{
    font-family:'Open Sans',sans-serif;
}
.content h4 {
    font-family:'Open Sans',sans-serif;
}
.content p {
   font-family:'Open Sans',sans-serif;
}

.clinic-title span {
    font-family:'Open Sans',sans-serif;
}

.clinic-title h2 {
    font-family:'Open Sans',sans-serif;
}

.btn {
     font-family:'Open Sans',sans-serif;
}



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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f7f9fc;
    color:#222;
    overflow-x:hidden;
}




/* ==========================================
   CONTAINER
========================================== */

.page{

    position:relative;

    width:100%;
    min-height:100vh;

    padding:50px 70px 30px;

    overflow:hidden;

    background:#fff;

}

/* ==========================================
   DECORATIVE SHAPES
========================================== */

.shape{

    position:absolute;

    border-radius:50%;

    z-index:0;

}

.shape.blue{

    width:650px;
    height:650px;

    background:#0d5fa8;

    left:-260px;
    top:-280px;

}

.shape.gold {
    width: 455px;
    height: 380px;
    background: #d7a03b;
    right: -280px;
    bottom: -320px;
}

/* ==========================================
   HEADER
========================================== */

.header{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.logo-left img{

    height:78px;

}

.logo-right img{

    height:74px;

}

/* ==========================================
   MAIN GRID
========================================== */

.clinic-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:42px;

    align-items:start;

}

/* ==========================================
   CARD
========================================== */

.clinic{

    background:#fff;

    border-radius:34px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    transition:.35s;

}

.clinic:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.blue-theme{

    border-top:8px solid #0b67b0;

}

.gold-theme{

    border-top:8px solid #c9922f;

}

/* ==========================================
   TITLE
========================================== */

.clinic-title{

    padding:28px 32px 10px;

}

.blue-theme h2{

    color:#0b67b0;

}

.gold-theme h2{

    color:#b78325;

}

.clinic-title h2{

    font-size:27px;

    line-height:1.15;

    font-weight:700;
	text-transform:uppercase;

}

.clinic-title span{

    display:inline-block;

    margin-top:8px;

    font-size:15px;

    color:#666;

}


.clinic-title span a{


    color:#666;
	text-decoration:none;

}


/* ==========================================
   CLINIC IMAGE
========================================== */

.clinic-image{
    position:relative;
    overflow:hidden;
}

.clinic-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: .5s;
}

.clinic:hover .clinic-image img{
    transform:scale(1.05);
}

/* ==========================================
   IMAGE OVERLAY
========================================== */

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,0)
    );
}

.overlay-box{
    color:#fff;
    padding:28px;
}

.overlay-box h3{
    font-size:26px;
    font-weight:700;
    margin-bottom:8px;
}

.overlay-box p{
    font-size:15px;
    line-height:1.6;
}

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

.content{
    padding:30px;
}

.content h4 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 100;
}

.content p{
    color:#666;
    font-size:15px;
    line-height:23px;
    margin-bottom:28px;
}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-block;

    padding:14px 34px;

    border-radius:50px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.blue-btn{
    background:#0b67b0;
}

.gold-btn{
    background:#c9932f;
}

.blue-btn:hover{
    background:#094f86;
    transform:translateY(-3px);
}

.gold-btn:hover{
    background:#a87620;
    transform:translateY(-3px);
}

/* ==========================================
   FEATURES
========================================== */

.features{

    margin-top:50px;

    display:grid;

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

    gap:25px;

}

.feature{

    background:#fff;

    padding:28px;

    text-align:center;

    border-radius:20px;

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

    transition:.35s;

}

.feature:hover{

    transform:translateY(-8px);

}

.icon{

    width:72px;
    height:72px;

    margin:auto;

    margin-bottom:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eef5fc;

}

.icon img{

    width:34px;

}

.feature h5{

    font-size:18px;

    font-weight:600;

}

/* ==========================================
   FOOTER
========================================== */

footer{

    margin-top:55px;

    background:#0d5fa8;

    color:#fff ;

    border-radius:24px;

    padding:22px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

footer a{
	    color:#fff ;
		text-decoration:none;
		    font-family:'Open Sans',sans-serif;

}


footer p {
	    font-family:'Open Sans',sans-serif;
}
footer div{

    display:flex;

    align-items:center;

    gap:12px;

}

footer span{

    font-size:22px;

}

footer p{

    font-size:15px;

}

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

@media(max-width:1200px){

.page{

padding:40px;

}

.clinic-wrapper{

grid-template-columns:1fr;

}

.features{

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

}

}

@media(min-width:769px){
	
	.showimgdesk{
		
		display:block;
	}
	
	.showimgmob{
		display:none;
	}
}

.content p {
    color: #666;
    font-size: 13px;
    line-height: 23px;
    margin-bottom: 25px;
}


@media(max-width:768px){
	
	
.content h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 100;
    line-height: 23px;
}

.content p {
    color: #666;
    font-size: 13px;
    line-height: 23px;
    margin-bottom: 20px;
    font-weight: 100;
}
	
	.showimgdesk{
		
		display:none;
	}
	
	.showimgmob{
		display:block;
	}

.header{

flex-direction:column;

gap:5px;
margin-bottom:-30px !important;

}

.logo-left img,
.logo-right img{

height:60px;

}

.clinic-title h2{

font-size:28px;

}

.clinic-image img{

height:auto;

}

.features{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:5px;

text-align:center;

}

.page{

padding:25px;

}

}

@media(max-width:480px){
	
	
	.clinic-title span {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}
	

.clinic-title{

padding:20px;

}

.content{

padding:20px;

}

.overlay-box{

padding:20px;

}

.overlay-box h3{

font-size:22px;

}

.btn{

width:100%;

text-align:center;

}

}