@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body { margin: 0; padding: 0;  font-family: "Work Sans", sans-serif; overflow-x: hidden;}
p, li {color: #131313;font-size: 15px;line-height: 1.6;margin: 0 0 15px 0;font-family: "Work Sans", sans-serif;}
.main-table li {color: #131313;font-size: 16px; line-height: 1.6;margin: 0 0 10px 0; font-family: "Work Sans", sans-serif;}
a { text-decoration: none !important; font-family: "Work Sans", sans-serif;}
h1, h2, h3, h4 { font-family: "Noto Sans Arabic", sans-serif;}

.main-table { text-align: left; padding: 4% 0; background: #f0eddc;}
.main-table ul { list-style-image: url(image/angle-double-right.png);}

#widgetsControl_C, #widgetsControl{ height: auto !important;}
#Div_body .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #fff;font-size: 15px; padding: 15px}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%;}

#HomepagecontentControl_C { margin-top: -21px}



.heading { color: #505437; font-size: 42px; font-weight: 700; margin: 0 0 30px 0;}
.sub-heading { color: #505437; font-size: 30px; font-weight: 700; margin: 0 0 20px 0; border-bottom: 1px dashed #a5a5a5;}
.title { color: #505437; font-size: 20px; font-weight: 600; margin: 0 0 30px 0;}
.custom-btn { display: inline-block; background: #505437; color: #fff; padding: 14px 34px; font-size: 16px; letter-spacing: .5px; margin: 0 10px 0 0;}
.custom-btn:hover { background: #131313; color: #fff;}

header .logo {padding: 10px 0;width: 230px;}

.banner-section { position: relative; background: #f0eddc;}
.banner-section video{ width: 100%; height: 100vh; object-fit: cover;}
.banner-section::after {content: '';position: absolute;width: 100%; height: 99%;background: rgb(51 54 33 / 24%);top: 0;left: 0;}
.banner-section .text { position: absolute; z-index: 3; left: 10%; top: 40%; width: 50%;}
.banner-section .text h1 { color: #fff; font-size: 52px; font-weight: 800; letter-spacing: 1px;}
.banner-section .text p { color: #fff; font-size: 21px; margin: 0 0 30px 0;}
.banner-section .text .btn1 { display: inline-block; background: #f0eddc; color: #505437; padding: 16px 34px; font-size: 16px; letter-spacing: .5px; margin: 0 10px 0 0;}
.banner-section .text .btn2 { display: inline-block; background: #505437; color: #fff; padding: 16px 34px; font-size: 16px; letter-spacing: .5px; margin: 0 10px 0 0;}

.chief-dentist { padding: 7% 0; background: #f0eddc;}
.chief-dentist .heading span { font-size: 24px;}
.chief-dentist .left-img { position: relative;}
.chief-dentist .left-img .text { position: absolute; background: #fff; padding:25px 30px; bottom: 30px; left: 0; border-radius: 10px;}
.chief-dentist .left-img .text h4 { color: #505437; font-size: 21px; font-weight: 600; border-bottom: 4px solid #888a71; line-height: 1.7;}
.chief-dentist .left-img .text h2 { color: #505437; font-size: 27px; font-weight: 600; margin: 0;}
.chief-dentist .left-img img { width: 90%; margin-left: 8%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 10px;} 

.service-section { padding: 7% 0; background: #888a71;}
.service-section .ser-card {padding: 50px;background: #fff;margin: 15px 0 0 0;min-height: 320px;}
.service-section .ser-card img { margin: 0 0 20px 0;}
.service-section .ser-card h4 {font-size: 20px;color: #505437;font-weight: 600;}
.service-section .ser-card p { margin: 0;}
.service-section .ser-card p a { color: #505437; font-size: 15px; font-weight: 500;}

.choose-us { background: #f0eddc; position: relative; overflow: hidden;}
/* .choose-us::after {content: '';position: absolute;height: 240px;width: 55%;background: #888a71;bottom: -160px;right: -40px;transform: rotate(-10deg);opacity: .7;} */
.choose-us .text { background: #f0eddc; padding: 0 6%;}
.choose-us .text ul { list-style-image: url('image/angle-double-right.png');}

.contact-section { padding: 7% 0 0 0; position: relative; background: #e7e4d1; position: relative; overflow: hidden} 
/* .contact-section::after {content: '';position: absolute;height: 240px;width: 55%;background: #888a71;top: -160px;right: -40px;transform: rotate(10deg);opacity: .7;} */
.contact-section h3 { color: #505437; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;}

footer {background: #505437;padding: 5% 0 0 0;margin: -20px 0 0 0;}
footer h4 { color: #fff; font-size: 16px; letter-spacing: 2px; margin: 0 0 15px 0; text-transform: uppercase;}
footer p, footer p a { color: #f1f1f1; font-size: 14px; letter-spacing: .5px; margin: 0 0 5px 0;}
footer p a:hover { color: #fff;}
footer .footer-bottom { padding: 15px 0; margin: 4% 0 0 0; border-top: 1px solid rgba(255, 255, 255, .2);}
footer .footer-bottom p {margin: 0;}
footer .footer-bottom .social-icon a {  display: inline-block; background: #fff; color: #505437; width: 30px; height: 30px; text-align: center; border-radius: 50%; margin: 0 2px; line-height: 2; font-size: 14px;}

.heading-innerpage { padding: 5% 0; background-image: linear-gradient(22deg, #505437, #888a71);}
.heading-innerpage h2 { color: #fff; font-size: 45px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 2px; text-align: center; position: relative;}
.heading-innerpage h2::after { position: absolute; content: ''; background: #ffff; width: 140px; height: 2px; top: 60px; left: 0; right: 0; margin: 0 auto;} 

.ser-card1 {padding: 50px;background: #fff;margin: 15px 0 0 0;min-height: 390px;}
.ser-card1 img { margin: 0 0 20px 0;}
.ser-card1 h4 { font-size: 23px; color: #505437; font-weight: 600;}
.ser-card1 p { margin: 0;}

.contact-info { background: #505437; padding: 30px; margin: 10px 0;}
.contact-info i { color: #e4e4e4; font-size: 30px;}
.contact-info h5 {color: #fff; text-transform: uppercase; font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.contact-info p, .contact-info p a { color: #e0e0e0; margin: 0;}


@media (min-width: 769px)  {
    #HeaderControl { position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 40%;
        text-align: center;
      }
    
    #MenuControl { position: absolute;
        right: 0;
        top:0;
        z-index: 8 !important; width: 60%;}
}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter,
#HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
    height: 100%;
}
#MenuControl.RadDock_Default .rdMiddle .rdCenter,
#MenuControl.RadDock_Default .rdBottom .rdCenter {
    background-color: transparent !important;
}


center #form1 #HeaderControl, center #form1 #MenuControl {
    position: relative;
    top: -1px;
    background: #505437;
    border-top: 1px solid #fff;
}

.navbar-nav { background: #00000094; margin: 0 5% 0 0}
 center #form1 #MenuControl .navbar-nav { background: transparent}
#HeaderControl, #MenuControl, #MenuControl_C { height: 90px !important}

@media (min-width: 320px) and (max-width: 768px ){
    .navbar-toggler { position: absolute; right: 15px; top: -60px; background: #fff}
    #MenuControl, #MenuControl_C { height: 0 !important;}
    #HeaderControl, #HeaderControl_C {height: 75px !important;background: #505437;}
    .navbar-collapse { background: #002346; margin-top: -10px}
}