*{
box-sizing: border-box;
}
@font-face {
font-family: 'Urbanist';
src: url(//dentalcare.ciirs.com/wp-content/themes/astra-child/fonts/Urbanist-SemiBold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(//dentalcare.ciirs.com/wp-content/themes/astra-child/fonts/Roboto-Regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.entry-content[data-ast-blocks-layout] > *{
margin: 0 !important;
max-width: 100% !important;
}
h1,h2,h3,h4,h5,h6{
font-family: "Urbanist", sans-serif !important;
}
.page-title-container{
width: fit-content;
}
.page-title{
margin: 0;
color: #4A7CD2;
font-weight: 600;
}
.page-title + span{
display: block;
width: 100%;
height: 1px;
background-color: #DAE2E9;
margin-top: 2px;
}
a{
text-decoration: none !important;
}
p, ul{
margin: 0 !important;
}
li::marker{
font-size: 0 !important;
}
.active-tab{
background-color: #4255FF !important;
}
.active-tab a{
color: white !important;
}
.ast-container{
margin: 0px !important;
padding: 0px !important;
max-width: 100vw !important;
}
.e-con-inner{
margin: 0px !important;
max-width: 100% !important;
}
#ast-scroll-top{
background-color: #4A7CD2;
}
#main-header-content-wrapper{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 15px;
background-color: rgb(240, 250, 255);
font-size: 16px;
height: 90px;
width: 100%;
position: fixed;
top: 0;
transition: all 0.3s linear;
}
#main-header-content-wrapper .menu-header-menu-container{
display: flex;
width: 50%;
}
#menu-header-menu{
display: flex;
justify-content: space-between;
width: 100%;
}
#menu-header-menu li{
position: relative;
}
#menu-header-menu li a{
color: #10244b;
font-weight: 600;
}
#menu-header-menu li a span{
display: inline-block;
height: 12px;
width: 12px;
border: 2px solid transparent;
position: relative;
margin-left: 5px;
}
#menu-header-menu li a span::before, #menu-header-menu li a span::after{
content: '';
position: absolute;
top: 50%;
width: 60%;
height: 1.5px;
background-color: rgba(0,0,0,.5);
transition: all 0.1s linear;
}
#menu-header-menu li a span::before{
left: 0;
transform: rotate(40deg);
}
#menu-header-menu li a span::after{
right: 0;
transform: rotate(-40deg);
}
#menu-header-menu li:hover a span::before{
left: 0;
transform: rotate(-40deg);
}
#menu-header-menu li:hover a span:after{
right: 0;
transform: rotate(40deg);
}
#menu-header-menu li .sub-menu{
margin: 30px 0 0 0 !important;
min-width: 190px;
position: absolute;
top: 100%;
left: 0;
background-color: white;
box-shadow: 0 10px 30px rgba(0,0,0,9%);
border-radius: 3px;
visibility: hidden;
opacity: 0;
transition: all 0.2s linear;
}
#menu-header-menu li .sub-menu li a.menu-link{
display: block !important;
width: 100%;
height: 100%;
padding: 5px 15px 5px 15px;
color: #10244b;
font-size: 14px;
font-weight: 400;
border-bottom: solid 1px rgba(255,255,255,.5);
}
#menu-header-menu li:hover .sub-menu{
visibility: visible;
opacity: 1;
}
#menu-header-menu li .sub-menu li:hover a.menu-link{
background-color: #4A7CD2;
color: white;
}
#main-header-content-wrapper > div:last-of-type{
width: 17%;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-sidebar-open-btn{
background-color: transparent;
color: black;
height: 12px;
width: 25px;
padding: 0 !important;
font-size: larger;
margin-right: 15px;
cursor: pointer;
}
.main-sidebar-open-btn ul{
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}
.main-sidebar-open-btn ul li{
position: absolute;
height: 2px;
width: 100%;
background-color: black;
transition: width 0.2s linear;
}
.main-sidebar-open-btn ul li:first-of-type{
top: 0;
left: 0;
}
.main-sidebar-open-btn ul li:last-of-type{
bottom: 0;
right: 0;
}
.main-sidebar-open-btn ul:hover li{
width: 70%;
}
#main-sidebar{
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
display: none;
}
#main-sidebar.active-main-sidebar{
display: block;
}
#main-sidebar-content{
width: 500px;
height: 100%;
background-color: #000a5bbf;
backdrop-filter: blur(10px);
position: absolute;
top: 0;
right: -500px;
padding: 50px;
overflow-y: scroll;
transition: right 0.2s linear;
}
#main-sidebar-content.active-main-sidebar-content{
right: 0;
}
#main-sidebar-content h5{
color: white;
height: 30px;
font-size: 18px;
}
#main-sidebar-content p{
color: #ffffff99;
}
#main-sidebar-content .menu-link:hover{
color: white;
}
#main-sidebar-content > div:first-of-type{
padding-bottom: 30px;
border-bottom: 1px solid #FFFFFF4D;
}
#main-sidebar-content > div:nth-of-type(2){
padding: 30px 0 30px 0;
}
#main-sidebar-content > div:nth-of-type(2) h5,
#main-sidebar-content > div:nth-of-type(3) h5{
margin-bottom: 5px;
}
#main-sidebar-content > div:nth-of-type(3){
padding: 30px 0 30px 0;
border-top: 1px solid #FFFFFF4D;
border-bottom: 1px solid #FFFFFF4D;
}
#main-sidebar-content .sidebar-contect-detail{
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-contect-detail p{
color: white !important;
}
#main-sidebar-content > div:nth-of-type(4){
padding-top: 30px;
}
#main-sidebar-content .main-sidebar-close-btn{
height: 26px;
width: 26px;
position: absolute;
right: 50px;
cursor: pointer;
z-index: 999;
}
.main-sidebar-close-btn::before, .main-sidebar-close-btn::after{
content: "";
position: absolute;
top: 50%;
height: 2px;
width: 100%;
background-color: white;
transition: transform 0.2s linear;
}
.main-sidebar-close-btn::before{
transform: rotate(40deg);
}
.main-sidebar-close-btn::after{
transform: rotate(-40deg);
}
.main-sidebar-close-btn:hover::before, .main-sidebar-close-btn:hover::after{
transform: rotate(0);
}
#mobile-header-content-wrapper{
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
padding: 0 15px 0 15px;
box-shadow: 0 3px 18px rgba(2, 21, 78, 9%);
background-color: white;
transition: top 0.5s linear;
display: none;
}
#mobile-header-content-wrapper.mobile-header-fixed{
position: fixed;
top: 0;
left: 0;
animation: header-slide-down 0.5s linear forwards;
}
@keyframes header-slide-down{
from{
transform: translateY(-100%);
}
to{
transform: translateY(0);
}
}
#mobile-menu-open-btn{
background-color: transparent;
padding: 0;
width: 34px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
#mobile-menu-open-btn span{
height: 2px;
width: 100%;
background-color: black;
display: block;
}
#mobile-menu-open-btn span:nth-of-type(1), #mobile-menu-open-btn span:nth-of-type(3){
width: 80%;
}
#mobile-header-sidebar-backdrop{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,.6);
z-index: 998;
display: none;
}
#mobile-header-sidebar{
background-color: white;
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
height: 100vh;
width: 350px;
padding: 50px 25px 40px 25px;
overflow-y: auto;
scrollbar-gutter: stable overlay;
z-index: 999;
transition: transform 0.3s linear;
visibility: none;
}
#mobile-header-sidebar.active-header-sidebar{
visibility: visible;
transform: translateX(0);
}
#mobile-header-sidebar.active-header-sidebar + #mobile-header-sidebar-backdrop{
display: block;
}
#mobile-header-sidebar::-webkit-scrollbar{
background-color: transparent;
position: absolute;
width: 4px;
}
#mobile-header-sidebar::-webkit-scrollbar-thumb{
background-color: rgb(194, 194, 194);
}
#mobile-menu-close-btn{
border: 1px solid black;
height: 36px;
width: 36px;
color: #777;
background-color: #4A7CD2;
border: 6px solid transparent;
display: flex;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
#mobile-menu-close-btn::before, #mobile-menu-close-btn::after{
content: '';
position: absolute;
top: 50%;
left: 0;
height: 2px;
width: 100%;
background-color: white;
}
#mobile-menu-close-btn::before{
transform: rotate(45deg);
}
#mobile-menu-close-btn::after{
transform: rotate(-45deg);
}
#mobile-header-sidebar .site-logo{
margin-bottom: 30px;
}
#mobile-header-sidebar #menu-header-menu-1 > li a{
position: relative;
line-height: 50px;
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid rgba(223,223,223,.31);
color: #10244b;
display: block;
}
#mobile-header-sidebar #menu-header-menu-1 > li a span{
display: block;
height: 28px;
width: 28px;
text-align: center;
background-color: #4A7CD2;
position: absolute;
top: 10px;
right: 0;
border: 7px solid transparent;
}
#mobile-header-sidebar #menu-header-menu-1 > li a span::before, 
#mobile-header-sidebar #menu-header-menu-1 > li a span::after{
content: '';
position: absolute;
top: 50%;
height: 2px;
width: 65%;
background-color: white;
transition: all 0.2s linear;
}
#mobile-header-sidebar #menu-header-menu-1 > li a span::before{
left: 0;
transform: rotate(40deg);
}
#mobile-header-sidebar #menu-header-menu-1 > li a span::after{
right: 0;
transform: rotate(-40deg);
}
#mobile-header-sidebar #menu-header-menu-1 > li a span.dropdown-open::before, 
#mobile-header-sidebar #menu-header-menu-1 > li a span.dropdown-open::after{
content: '';
position: absolute;
top: 50%;
height: 2px;
width: 65%;
background-color: white;
transition: all 0.2s linear;
}
#mobile-header-sidebar #menu-header-menu-1 > li a span.dropdown-open::before{
left: 0;
transform: rotate(-40deg);
}
#mobile-header-sidebar #menu-header-menu-1 > li a span.dropdown-open::after{
right: 0;
transform: rotate(40deg);
}
#mobile-header-sidebar #menu-header-menu-1 .sub-menu{
max-height: 0;
overflow: hidden;
transition: all 0.5s linear;
margin-left: 15px !important;
}
#mobile-header-sidebar #menu-header-menu-1 .sub-menu.show{
opacity: 1;
}
#footer-content-wrapper{
background-color: #071630;
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
padding: 100px 50px 100px 50px;
}
#footer-content-wrapper h5{
color: white;
height: 35px;
font-size: 18px;
margin-bottom: 8px;
}
#footer-content-wrapper .widget_block{
margin: 0 !important;
}
#footer-content-wrapper > div:first-of-type{
width: 32%;
color: #93A0AF;
line-height: 1.8em;
}
#footer-content-wrapper > div:nth-of-type(2){
display: flex;
width: 30%;
justify-content: space-between;
flex-wrap: wrap;
}
#footer-content-wrapper > div:nth-of-type(2) > div{
width: 50%;
}
#menu-footer-menu-1 li, #menu-footer-menu-3 li{
margin: 0 0 2px 0;
height: 30px;
}
#menu-footer-menu-1 li a, #menu-footer-menu-3 li a{
display: block;
width: 100%;
color: #93A0AF;
font-size: 16px;
}
#footer-content-wrapper li a:hover{
text-decoration: underline !important;
}
#footer-content-wrapper > div:nth-of-type(3){
width: 20%;
}
#footer-content-wrapper > div:nth-of-type(3) > div{
height: 80px;
}
#footer-content-wrapper > div:nth-of-type(3) .footer-info-title{
color: white;
font-weight: 700;
display: flex;
gap: 5px;
}
#footer-content-wrapper > div:nth-of-type(3) .footer-info-icon{
display: flex;
align-items: center;
}
#footer-content-wrapper > div:nth-of-type(3) p{
color: #93A0AF;
}
.wp-social-link a{
height: 36px;
width: 36px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.wp-social-link svg{
fill: rgba(255,255,255,.6) !important;
height: 20px !important;
width: 20px !important;
}
.wp-social-link a:hover svg{
fill: #071630 !important;
}
.wp-social-link a:hover{
background-color: white;
}
#copyright-policy-div{
border-top: 1px solid gray;
background-color: #071630;
display: flex;
flex-wrap: wrap;
padding: 20px 15px 20px 15px;
}
#copyright-policy-div p , a{
color: #93A0AF;
}
#copyright-policy-div a:hover{
color: white;
}
#copyright-policy-div div{
text-align: center;
display: flex;
width: 50%;
}
#copyright-policy-div ul.menu{
display: flex;
flex-wrap: wrap;
gap: 35px;
}
#copyright-policy-div div:last-of-type{
justify-content: end;
}
.my-btn{
position: relative;
overflow: hidden;
padding: 0.8rem 1.2rem;
background-color: #4A7CD2;
border-radius: 10px;
font-size: 90%;
min-height: 35px;
}
.my-btn a{
display: block;
height: 100%;
width: 100%;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
.my-span{
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
overflow: hidden;
row-gap: 10px;
justify-content: center;
align-items: center;
}
.my-span span{
line-height: normal;
}
.my-span span:last-of-type{
position: absolute;
top: -100%;
}
.my-btn:hover{
background-color: #032869;
}
.my-btn:hover .my-span span:first-of-type{
transition: transform 0.2s linear;
transform: translateY(100%);
}
.my-btn:hover .my-span span:last-of-type{
transition: transform 0.2s linear;
transform: translateY(100%);
}
.my-btn .my-span{
transition: transform 0.2s linear;
transform: translateY(0);
}
.my-span span:first-of-type,
.my-span span:last-of-type {
transition: transform 0.2s linear;
}
@media (width <= 1200px){
#main-header-content-wrapper{
display: none;
}
#mobile-header-content-wrapper{
display: flex;
}
}
@media (width <= 1024px){
#main{
padding: 0 15px 0 15px;
}
#footer-content-wrapper{
row-gap: 20px;
column-gap: 0;
}
#footer-content-wrapper > div:first-of-type{
width: 100% !important;
}
#footer-content-wrapper .footer-menu-container, 
#footer-content-wrapper .footer-info-container{
width: 50% !important;
}
}
@media (width <= 768px){
#footer-content-wrapper > .footer-menu-container{
gap: 0px;
width: 70% !important;
}
#footer-content-wrapper .footer-info-container{
width: 30% !important;
}
#copyright-policy-div div{
width: 100%;
justify-content: center !important;
}
#mobile-header-sidebar{
width: 100%;
}
}
@media (width <= 570px){
#footer-content-wrapper{
padding: 100px 15px;
}
#footer-content-wrapper .footer-menu-container,
#footer-content-wrapper .footer-info-container{
width: 100% !important;
}
#footer-content-wrapper .footer-menu-container{
gap: 20px;
}
#footer-content-wrapper .footer-menu-container > div{
width: 100% !important;
}
}
@media (width <= 370px){
#copyright-policy-div ul.menu{
gap: 15px;
justify-content: center;
}
}