.popup-menu {
background: #D8F1F6;
position: relative;
position: absolute;
top: -10rem;
left: 0;
width: 100%;
max-height: 0;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: max-height 0.3s ease;
z-index: 1000;
margin-top: 1rem;
}
.no-scroll {
overflow: hidden !important;
}
.popup-menu.active {
max-height: 100vh; overflow: auto; padding-bottom: 6rem;
position: fixed;
top: 1rem;
}
@media (max-width:768px) {
.popup-menu.active{
top: -1rem;
}
}
.popup-menu__headline-title {
font-weight: 400;
color: #252525;
font-size: 3.375rem;
}
.popup-menu.active .popup-menu__wrapper{
padding-bottom: 3.125rem;
}
.popup-menu .close-menu{
position: absolute;
right: 0;
top: 1rem;
cursor: pointer;
}
.popup-menu__navigation {
margin-top: 40px;
display: flex;
align-items: center;
cursor: pointer;
display: none;
}
.popup-menu__navigation span {
color: #252525;
font-size: 16px;
padding-left: .5rem;
}
.popup-menu__headline {
margin-top: 20px;
color: #000;
font-weight: 400;
text-transform: capitalize;
}
.popup-menu__services {
max-width: 676px;
width: 100%;
}
.popup-menu__content {
display: flex;
flex-direction: column;
gap: 60px;
}
.popup-menu__wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
.popup-menu__services-list {
margin-top: 24px;
gap: 12px;
}
.popup-menu__services-list--variety {
display: grid;
grid-template-columns: repeat(3, 200px);
}
.popup-menu__services-list--services {
display: grid;
grid-template-columns: repeat(2, 296px);
}
.popup-menu__services-list--brands {
display: grid;
grid-template-columns: repeat(5, 125px);
}
.popup-menu__services-list--doctors {
display: grid;
grid-template-columns: repeat(2, 322px);
}
.popup-menu__search-btn{
padding: 1rem 1.875rem;
background-color: #2173A4;
border-radius: 1rem;
color: white;
font-size: .75rem;
font-weight: 400;
}
.popup-menu__headline-title.mob{
display: none;
margin-top: 2rem;
}
.popup-menu__services-title{
font-weight: 400;
color: #252525;
font-size: 2.25rem;
}
.popup-menu__search-title{
font-size: 2.25rem;
font-weight: 400;
color: #252525;
}
@media (min-width:1163px) {
.popup-menu.active .popup-menu__search{
right: 3rem;
}
}
@media (min-width:1360px) {
.popup-menu.active .popup-menu__search{
position: fixed;
top: 13.3rem;
height: fit-content;
right: 17vw;
}
}
@media (max-width:768px) {
.popup-menu__headline-logo{
max-width: 52vw;
}
.popup-menu__navigation{
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
}
.popup-menu__search-title{
font-size: 1rem;
}
.popup-menu__content{
gap: 2rem;
}
.popup-menu__services-title{
font-size: 1.5rem;
}
.popup-menu__services-list--variety,
.popup-menu__services-list--brands,
.popup-menu__services-list--doctors{
grid-template-columns: repeat(2, 1fr);
}
.popup-menu__headline-title{
font-size: 2rem;
display: none;
}
.popup-menu__headline-title.mob{
display: block;
}
.popup-menu__wrapper{
flex-direction: column-reverse;
flex-wrap: inherit;
}
.popup-menu__services-list--services{
grid-template-columns: repeat(1, auto);
}
.popup-menu__search-btn{
padding: 0.563rem 2rem;
border-radius: .25rem;
}
}
.popup-menu__services-card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 12px;
padding: 16px 28px 34px;
background: linear-gradient(0deg, #3BC3F3, #2399D2);
border-radius: 10px;
box-shadow: 0 7px 20px 0 rgba(39, 68, 88, 0.15);
position: relative;
}
.popup-menu__services-card p {
display: block;
font-size: 16px;
color: #fff;
letter-spacing: 0;
font-weight: 400;
}
.popup-menu__services-card a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup-menu__services-card--service {
flex-direction: row;
padding: 17px 29px;
justify-content: start;
}
.popup-menu__services-card--brands {
padding: 0;
min-height: 100px;
background: #fff;
}
.popup-menu__services-doctor {
padding: 20px;
background-color: #2AA4DB;
border-radius: 16px;
position: relative;
min-height: 218px;
box-shadow: 0 7px 20px 0 rgba(39, 68, 88, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
}
.popup-menu__services-doctor h3 {
color: #fff;
font-size: 22px;
font-weight: 400;
max-width: 198px;
position: relative;
text-transform: capitalize;
margin: 0;
}
.popup-menu__services-doctor span {
padding: 4px 8px;
background-color: #BEEEFF;
border-radius: 8px;
font-size: 12px;
color: #000;
width: fit-content;
}
.popup-menu__services-doctor img {
position: absolute;
bottom: 0;
right: -1.25rem;
height: 90%;
}
.popup-menu__search-wrapper {
margin-top: 32px;
display: flex;
gap: 8px;
align-items: stretch;
position: relative;
}
.popup-menu__search-wrapper svg{
position: absolute;
left: 0.688rem;
top: 0.688rem;
}
.popup-menu__search-input {
margin: 0 !important;
min-height: 54px;
width: 354px !important;
border-radius: .25rem !important;
border: .5px solid #2173A433 !important;
background-color: #D8F1F6 !important;
}
.popup-menu__search-list {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.popup-menu__search-item {
}
.popup-menu__search-item a {
font-size: 20px;
color: #97a9ac;
line-height: 120%;
transition: color 0.2s ease-in-out;
}
.popup-menu__search-item a:hover {
color: #3bc3f3;
}
.hidden {
display: none;
}
.popup-menu__search-input:focus + #search-icon,
.popup-menu__search-input:not(:placeholder-shown) + #search-icon {
display: none;
}
.popup-menu__services-card--service img{
max-width: 3.75rem;
width: 100%;
aspect-ratio: 1;
min-width: 2.5rem;
}
.pt-05{
padding-top: .5rem;
}
@media (max-width:768px) {
.popup-menu__search-input{
padding: 6px !important;
min-height: 2rem;
}
.popup-menu__search-wrapper svg{
width: 1.188rem;
height: 1.188rem;
}
.popup-menu__search-wrapper{
margin-top: .5rem;
}
.popup-menu__services-doctor h3{
font-size: .875rem;
font-weight: 400;
max-width: 69%;
line-height: 110.00000000000001%;
}
.popup-menu__services-doctor span{
font-size: .625rem;
padding: .25rem;
}
.popup-menu__services-doctor{
min-height: 7.5rem;
padding: .5rem;
}
.popup-menu__search-list{
display: none;
}
.popup-menu__services-card--brands{
min-height: 5rem;
}
.popup-menu__services-doctor img{
position: absolute;
bottom: -1rem;
right: -1rem;
height: 100%;
object-fit: contain;
}
.popup-menu__services-card p{
font-size: .875rem;
text-align: center;
}
.popup-menu__services-card{
padding: 1rem;
}
.popup-menu__services-card--service p{
max-width: 11.25rem;
text-align: left;
}
.popup-menu__services-card--service img{
width: 12%;
}
}