.left-section, .right-section {
transition: all 0.4s ease;
}
.flexPsection{
display: flex;
max-width: 1300px;
margin: auto;
position: relative;
justify-content: space-between;
}
.left-section {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
width: 100%;
max-width: 100%;
}
.card {
background: #fff;
border: 7px solid #0060a500;
border-radius: 12px;
width: 32%;
padding: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
outline: 1px solid #0060A5;
} .card.active {
width: 100%;
border: 5px solid #0060A5;
}
.card.inactive {
width: 100%;
margin-bottom: 20px;
}
.clinic-info {
display: none;
margin-top: 20px;
animation: fadeIn 0.3s ease;
}
.card.active .clinic-info {
display: block;
}
.location {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.see-more {
margin-top: 15px;
color: #0060a5;
text-decoration: none;
font-size: 16px;
text-align: center;
font-family: "Manrope", sans-serif !important;
position: absolute;
left:0;
right:0;
bottom: 20px;
}
.card_left {
margin-bottom: 0 !important;
}
.right-image {
width: 50%;
display: flex;
justify-content: center;
align-items: flex-end;
margin-left: 20px;
}
.right-image img {
max-width: 100%;
border-radius: 12px;
}
.vertical-right {
display: flex;
flex-direction: column;
gap: 20px;
width: 40%;
overflow-y: scroll !important;
max-height: 720px;
height: auto;
min-height: 100% !important;
overflow-x: hidden;
margin: auto;
padding-left: 20px;
padding-top: 1px;
padding-right: 15px;
margin-top: 0 !important;
}
.card_p_title {
margin-top: 15px;
} .clinic-info p strong {
margin-bottom: 5px;
display: inline-block;
}
.clnic_img img {
height: 150px;
width: 100%;
object-fit: cover;
} .card.active .see-more{display:none;}
.card_btn{
display:none;
}
.card.active .card_btn{
display:block;
}
.card_btn a {
display: inline-block;
width: 100%;
text-align: center;
margin-top: 20px;
}
.card.active .card_inner_content {
display: flex;
gap: 50px;
flex-wrap:wrap;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.service-item.homeServiceBG.serviceRow.new-desc.textCenter.gap36 {
width: 31%;
}
@media screen and (max-width: 1024px){
.container.flexPsection {
min-width: 100%;
width: 100%;
}
.card {
width: 48%;
}
.left-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
max-width: 100%;
justify-content: center;
}
.card.inactive {
width: 100%;
min-width: 100%;
}
div#rightImage {
width: 100%;
}
.container.flexPsection {
display: inline-block;
max-width: 100%;
}
.active .card_inner_content { width: 100%;
}
.vertical-right .card {
width: 31% !important;
min-width: 31%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.vertical-right {
display: flex !important;
flex-direction: row !important;
gap: 20px;
width: 100%;
overflow-y: scroll !important;
max-height: 700px;
height: auto;
min-height: 100% !important;
overflow-x: hidden;
margin: auto;
padding-left: 0px;
padding-top: 1px;
}
}
@media screen and (max-width: 767px){
.card.active .card_inner_content .card_left {
flex: 0 0 auto;
width: 100% !important;
}
.card_right {
flex: 0 0 auto;
width: 100% !important;
}
.card {
width: 100%;
}
div#rightCards {
width: 100%;
max-height: 100% !important;
overflow: unset;
padding: 1px;
margin-top: 35px;
}
.card.inactive {
width: 100%;
}
div#rightImage {
width: 100%;
}
.card_right strong {
margin-bottom: 10px !important;
margin-top: 15px;
}
.container.flexPsection {
display: inline-block;
max-width: 100%;
}
.active .card_inner_content {
display: inline-block !important;
}
.vertical-right {
display: flex !important;
flex-direction: column !important;
gap: 20px;
width: 100%;
overflow-y: scroll !important;
max-height: 600px;
height: auto;
min-height: 100% !important;
overflow-x: hidden;
margin: auto;
padding-left: 0px;
padding-top: 1px;
}
.vertical-right .card {
width: 100% !important;
min-width: 100%;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
}
}