:root{
	--primary-page-color:#66C7CC;
	--secondary-page-color:#091c47;
	--red-page-color:#c71e1e;
}
main{
    margin-top:40px;
}

.sec_4{
	padding:4rem 0 1rem;
}


.neuro_specialist{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:2rem;
}
.inner_specialist{
	background-image:url(../img/bg-pattern.png);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	background-size:cover;
	z-index:1;
	position:relative;
	padding:4rem 1rem;
	cursor:pointer;
	border-radius:10px;
	overflow: hidden;
}

.inner_specialist span{
	background:url(../img/specialist.jpeg);
	background-size:cover;
	background-position:center;
	position:absolute;
	inset:0;
	opacity:0.5;
	z-index:-1;
	width:0;
	transition:0.8s ease;
	border-radius:10px;
	
}

.inner_specialist:hover span{
	width:100%;
}

.inner_content{
	color:var(--primary-page-color);
	text-align:left;
	font-weight:500;
}

.neuro_blue{
	position:absolute;
	width:45px;
	height:45px;
	top: 15px;
    right: 10px;
}
.neuro_white{
	display:block;
	position:absolute;
	width:45px;
	height:45px;
	top: -50px;
}
.inner_specialist:hover .inner_content{
	position:relative;
	z-index:1;
	color:var(--secondary-page-color);
}

.inner_specialist:hover .neuro_white{
	display:block;
}

.inner_specialist:hover .neuro_blue{
	display:none;
}
@media(max-width:767px){
	/* Stack elements vertically */
    .neuro_specialist {
        flex-direction: column;
		padding:0 2rem;
    }
}



/* For Tab */
@media (min-width: 768px) and (max-width: 1024px) {	
	/* Display neuro specialist section in two columns */
    .neuro_specialist {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }  
}