* {margin: 0px; padding: 0px;}
html, body {height: 100%; width: 100%;}
body{ font-family: 'Maven Pro',sans-serif; font-size:18px; color:#000; line-height: 1.2;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td, figure { border: 0; margin: 0; padding: 0; font-family:'Maven Pro',sans-serif; font-weight: normal;}
img, fieldset, abbr, acronym { border: 0;}
article, aside, figure, figcaption, hgroup, footer, header, nav, section, video, object {display: block;}
audio, canvas, video { display: inline-block;
display: inline;
zoom: 1;}
h1, h2, h3, h4, h5, h6 { font-family: 'Maven Pro',sans-serif; font-size: 100%; font-weight: normal;}
ul li, ol li {list-style: none;}
img { border: none; display: block; max-width:100%;}
a, a:link, a:focus { color: #575766 ; text-decoration: none; outline: none; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
a:hover { color: #359fa7; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}@font-face { font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;}
.fa-twitter:before { content: "\f099";}.fa-facebook:before { content: "\f09a";}.fa-youtube::before {
content: "\f167";}.fa-instagram::before { content: "\f16d";} .fa-angle-right:before { content: "\f105";}
.fa-phone-square:before {
content: "\f098";
}.fa-user:before {
content: "\f007";
}
.fa-angle-double-right:before { content: "\f101";}.fa-angle-left:before { content: "\f104";}.fa-arrow-right:before { content: "\f061";}.fa-clock-o:before { content: "\f017";}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto;
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .fa-phone:before { content: "\f095";}
.fa-map-marker:before {
content: "\f041";}.fa-envelope-o:before { content: "\f003";}.fa-envelope:before { content: "\f0e0";} .fa-clock:before { content: "\f017";}
.fa-instagram:before { content: "\f16d";}.fa-arrow-circle-right:before { content: "\f0a9";} .fa-calendar:before{content:"\f073"} .fa-linkedin:before { content: "\f0e1";}
.container-area{ max-width:1280px; width:100%; margin:0 auto}
.clear{ clear:both}
.header-banner-area{ background:#d5c7b8 url(../images/background_07.jpg) center top no-repeat; position:relative}
.logo-area{ padding:20px 0 15px; float:left}
.cbtn{ background:#e9582a; color:#fff !important; border-radius:25px; padding:16px 20px !important; box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%), 0px 2px 0px 0px rgb(255 255 255 / 30%) inset, 0px -2px 0px 0px rgb(0 0 0 / 10%) inset;} .cbtn:hover{background:#191919}
.fa-home:before{content:"\f015"}
.nav-area{ float:right; }
.header-banner-bottom-area{ position:absolute; bottom:0px; border-bottom:30px solid #fff ;}
.bannerimg{ width:50%; float:right ;margin-top: 30px;}
.slider-two_content{ width:52%}
.slider-two_content h1{ font-size:3.8em; font-weight:500; line-height:1.2; padding-bottom:20px;}
.slider-two_content h1 span{ color:#f05423; font-weight:700; }
.slider-two_content p{ font-size:1.125rem; line-height:28px; margin-bottom:25px;}
.slider-two_content h4{ border-left:solid 2px #ef5e31; padding-left:10px; font-size:18px; margin-bottom:10px;}
.btn1 { font-weight:600; box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%), 0px 2px 0px 0px rgb(255 255 255 / 30%) inset, 0px -2px 0px 0px rgb(0 0 0 / 10%) inset; padding:1.275em 2.115em; border-radius:50px; background: #191919; color: #fff !important; }
.btn1:hover { background:#ef5e31}
.treatment-area{ padding:70px 0 90px 0; background:url(../images/dental-clinic.jpg) center top no-repeat fixed}
.treatment-area h2{ font-size:3.051875em; line-height:1.1em; margin-bottom:50px; text-align:center} .treatment-area h2 span{ font-weight:700; color:#ef5e31;}
.tratment-box{ float:left; width:22%; margin:15px 1.5%}
.tratment-box img{ width:100%}
.tratment-box h3{ font-size:1.3625em; padding:25px 0 12px 0} .tratment-box h3 a{ font-weight:600; color:#000 } .tratment-box h3 a:hover{ color:#ef5e31;}
.tratment-box p{ line-height:24px; padding-bottom:15px;} .tratment-box p a{ color:#ef5e31; position:relative; font-weight:600; } .tratment-box p a:hover{ color:#000}
.btn-2{color: #fff !important; font-weight:600;
background: #eb5a2c; box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%), 0px 2px 0px 0px rgb(255 255 255 / 30%) inset, 0px -2px 0px 0px rgb(0 0 0 / 10%) inset; padding:1.275em 2.615em; border-radius:50px;}
.btn-2:hover{ background: #191919;}
.btn-3{color: #fff !important; font-weight:600;
background: #eb5a2c; box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 10%), 0px 2px 0px 0px rgb(255 255 255 / 30%) inset, 0px -2px 0px 0px rgb(0 0 0 / 10%) inset; padding:1em 2em; border-radius:50px;}
.btn-3:hover{ background: #191919;}
.text-center{ text-align:center}
.mtop30{ margin-top:30px;}
.welcome-area{ padding-bottom:80px; padding-top:70px;}
.welcome-left{ float:left; width:47.5%} .welcome-right{ float:right; width:47.5%; padding-top:20px;}
.welcome-right h2{ font-size:3.051875em; line-height:1.3em; margin-bottom:20px; } .welcome-right h2 span{ font-weight:700; color:#ef5e31;}
.welcome-right p{ font-size:18px; line-height:26px; margin-bottom:20px;}
.footer-area{ background:#d5c7b8 url(../images/background_footer.jpg) center top no-repeat; position:relative}
.footer-area-top{ position:absolute; top:0;}
.footer-main{ padding:150px 0 0px 0}
.footer-col-2{ float:left; width:20%; margin:0 2%}
.footer-col-1{ float:left; width:23%; margin:0 4% 0 0} .footer-area p{ margin-bottom:20px; line-height:24px;} .clist{ margin-top:25px;}
.clist li{ margin-bottom:20px;}.clist li span {
float: right;
width: 91%;
} .clist li a { color:#000} .clist li a:hover { color:#ef5e31}
.footer-area h6{ font-size:1.5625em; font-weight:600; padding-bottom:20px; }
.footerlist li {
display: block;
margin-bottom: 11px;
}.footerlist li a { background:url(../images/arrow2.png) left 4px no-repeat; padding-left:15px;
color: #000;
font-size: 16px;
text-decoration: none;
display: block;} .footerlist li a:hover {color:#ef5e31}
.footer-s {
margin-top:20px;
}.footer-s a {
margin-right: 10px;
color: #fff;
font-size: 18px;
display: inline-block;
text-align: center;
background: #f05423;
text-align: center;
border-radius: 100%;
width: 38px;
height: 38px;
}
.footer-s a:hover { background:#191919}
.footer-s i {
vertical-align: text-bottom; line-height:38px;}
.emergency-n{ margin-bottom:20px;}
.emergency-n-left{ float:left; color:#f05423; font-size:32px;} .emergency-n-right{ float:right; width:81%} .emergency-n-right a{ color:#000; font-weight:600; font-size:16px; }
.emergency-n-right a:hover{ color:#f05423;}
.footer-bottom{ border-top:solid 1px #bfafa1; padding:30px 0; margin-top:50px;}
.footer-left{ float:left}
.footer-right{ float:right;} .footer-right a{ font-weight:600; color:#f05423} .footer-right a:hover{ color:#000}
.blog-area{ padding:70px 0}
.blog-area h2{ font-size:3.051875em; line-height:1.2em; margin-bottom:15px; text-align:center } .blog-area h2 span{ font-weight:700; color:#ef5e31;}
.blog-box{ float:left; width:30%; margin:10px 1.5%; border-radius:32px; background:#fff; box-shadow:0px 0px 25px 0px rgb(0 0 0 / 10%); } .blog-img{border-bottom-left-radius:150px; border-top-left-radius:32px; border-top-right-radius:32px; overflow:hidden; position:relative}
.blogdes{ padding:30px 30px 40px 30px; position:relative} .blogdes h3{ margin-bottom:10px; } .blogdes h3 a{ color:#000; font-weight:600; font-size:1.5625em} .blogdes h3 a:hover{ color:#f05423} .blogdes h4{ color:#f05423; font-weight:600; margin-top:20px;}
.blogdes p{ line-height:24px;}
.datebox {
position: absolute;
top: -63px;
left: 25px;
width: 4em;
height: 4em;
background: #f05423;
border-radius: 100%;
text-align: center;
color: #fff;
}.datebox h5 {
font-weight: 700;
font-size: 24px;
line-height: 24px;
padding-top: 10px;
}
.doctor-area{ background:#d5c7b8 url(../images/background_07.jpg) center top no-repeat; position:relative}
.doctor-area-top{ position:absolute; top:0}
.doctor-area-bottom{ position:absolute; bottom:0}
.drmain{ padding:120px 0 60px 0}
.drmain h2{ font-size:3.051875em; line-height:1.2em; margin-bottom:10px; text-align:center} .drmain h2 span{font-weight:700; color:#ef5e31;} .drmain p{ line-height:24px;}
.dr-box{ float:left; width:22%; margin:15px 1.5%}
.dr-box h3{ font-size:1.4625em; padding:25px 0 5px 0} .dr-box h3 a{ font-weight:600; color:#000 } .dr-box h3 a:hover{ color:#ef5e31;} .dr-box h4{ padding-bottom:12px; color:#f05423}
.dr-box p{ line-height:22px; padding-bottom:15px;} .dr-box p a{ color:#ef5e31; position:relative } .dr-box p a:hover{ color:#000}
.dr-box p a:after{ content: "";
font-size: 1em;
height: 2px;
width: 2.5em;
display: inline-block;
vertical-align: middle;
margin-left: 0.8em;
backface-visibility: hidden;
pointer-events: none;
animation: underline 0.4s ease-in-out forwards;
transition: transform 0.4s ease-in-out;
animation: none;
transform-origin: left;
z-index: 1;
order: 2; background:#ef5e31;
}.shadowbox {
width: 100%;
position: relative;
z-index: 99;}
.fixed {
background: #fff; -webkit-box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 10%);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 10%);
position: fixed; top: 0; left: 0;
width: 100%;}
.testimonial-box{ float:left; width:47%; margin:0 1.5%}
.testimonial-img{ float:left; width:15%; padding-top:130px;} .testimonial-img img{ border-radius:100%} .testimonial-txt{ float:right; width:80%} .testimonial-txt p{ font-weight:600; color:#fff; padding:20px 0; font-size:21px; line-height:28px;} .testimonial-txt h5{ font-size:20px; font-weight:600; padding-bottom:18px;}
.orange-bg{ background:#e84719; padding:30px 0}
.obgbox{ float:left; width:23%; margin:0 1%; color:#fff; text-align:center} .obgbox h3{ font-size:50px; font-weight:900; } .obgbox p{ font-size:18px;}
.drsection{ padding:80px 0}
.drsection h2 {font-size:3.051875em; line-height:1.2em; margin-bottom:20px; text-align:center} .drsection h2 span{font-weight:700; color:#ef5e31;}
.drtwobox{ float:left; width:46%; margin:10px 2%; background:#fff; box-shadow:0px 0px 25px 0px rgb(0 0 0 / 10%); border-radius:32px;}
.drtwobox-img{
border-top-left-radius: 32px;
border-top-right-radius: 32px;
overflow: hidden;
position: relative;}
.drtwobox-txt{ padding:30px 30px 45px 30px}
.drtwobox-txt h3{ font-size:1.7625em; padding:0px 0 5px 0} .drtwobox-txt h3 a{ font-weight:600; color:#000 } .drtwobox-txt h3 a:hover{ color:#ef5e31;} .drtwobox-txt h4{ padding-bottom:12px; color:#f05423}
.drtwobox-txt p{ line-height:22px; padding-bottom:5px;} .drtwobox-txt p a{ color:#ef5e31; position:relative } .drtwobox-txt p a:hover{ color:#000}
.patients-testimonial-area{ background:#e84719; padding:70px 0} .patients-testimonial-area h2{font-size:3.051875em; line-height:1.2em; margin-bottom:20px; text-align:center; color:#fff}
.patients-testimonial-area h2 span{ font-weight:600}
.container-area1{ max-width:1180px; width:100%; margin:0 auto}
.header-area{ background:#fff}
.top-bar {
padding: 5px 0 5px 0;
background: #191919;
position: relative;
z-index: 1;
}
.top-bar::after {
content: '';
position: absolute;
top: 0;
left: -15px;
width: 54%;
height: 100%;
z-index: -1;
transform: skew(-26deg);
padding-left: 20px;
background: #191919;
}.clearfix {
clear:both;
display: block;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix:before {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.top-bar li { display:inline-block;margin:0 0px 0 0px; padding:0 4px 0 0px; line-height:15px;}
.top-bar ul { padding:0px 0px 0px 0px;}
.top-bar li a { color:#fff; font-size:15px; line-height:24px; padding:0px 0px 0px 0px; display:inline-block; }
.top-bar li a:hover { color:#e9582a;}
.top-bar li:first-child { border:none; background-image:none;}
.top-bar li ul { display:none; position:absolute; width:150px; background:#303d45; top:54px; padding:0px; margin:0px; box-shadow:0px 0px 23px 0px rgb(0 0 0 / 5%);}
.top-bar li:hover ul { display:block; text-align:left;}
.top-bar li:hover ul li { text-align:left; border:none; border-bottom:1px solid #7d8081; display:block; background-image:none; margin:0px; padding:0px;}
.top-bar li:hover ul li:last-child { border-bottom:none;}
.top-bar li:hover ul li a { color:#fff; display:block; padding:9px 10px;}
.top-bar li:hover ul li a:hover { background:#cd3727; color:#fff;}
.top-l { float:left; width:56%; text-align:left; color:#fff; font-size:15px; padding-top:2px;}
.top-r { float:right; width:41%; text-align:right;}
.top-r a{ color:#fff; font-size:24px; margin-left:20px;}
.top-r a:hover{ color:#e9582a;}
.top-l a { font-size:15px; padding:0px 18px 0px 18px; margin:0px 10px 0px 0px; color:#FFFFFF; display:inline-block; border-radius:30px;}
.top-l a:hover { color:#e9582a;}
.mtop50{ margin-top:50px;}
.dr-about{
overflow: hidden;
}
.dr-lift{
width: 47% !important;
float: left;
}
.dr-right{
width: 47%;
float: right;
padding-bottom: 30px;
}
.dr-left img {
width: 100%;
height: auto;
border-radius: 20px;
}
.dr-right h2 {
font-size: 2.051875em;
line-height: 1.3em;
margin-bottom: 20px;
text-align: left;
}
.dr-right p {
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
.our-result{
padding: 0px 10px 80px;
overflow: hidden;
}
.result-text-center{
text-align: center;
}
.result-text-center h2 span{
font-size: 56px;
font-weight: 700;
color: #ef5e31;
}
.result-text-center h2 {
font-size: 56px;
margin-bottom: 25px;
color:#000;
line-height: 1.0;
}
.result-text-center p{
font-size: 18px;
color:#000;
margin-bottom: 25px;
line-height: 1.6;
}
.result-box {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.result-cart {
width: 48%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.img-split {
position: relative;
width: 100%;
display: flex;
height: 100%;
}
.img-split img {
width: 50%;
height: auto;
display: block;
object-fit: cover;
}
.img-split .before {
border-right: none;
}
.img-split .after {
border-left: none;
}
/* Vertical line between images */
.split-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: #0072ff;
z-index: 2;
}
.befor-main-box{
display: flex;
gap: 30px;
}
#after-befor-box {
position: relative;
display: flex;
width: clamp(20rem, 100vw, 50rem);
max-height: 95vh;
aspect-ratio: 3 / 2;
}
.img-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-wrapper:nth-child(2) {
clip-path: inset(0px 0px 0px 50%);
}
.img-wrapper img {
width: 100%;
height: 100%;
background-size: cover;
}
#line-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: .2rem;
height: 100%;
background-color: #FAFAFA;
}
#after-befor-box input {
/* reset */
appearance: none;
-webkit-appearance: none;
background-color: transparent;
/* custom */
position: absolute;
width: calc(100% + 2.25rem);
height: 100%;
left: -1.125rem;
}
#after-befor-box input::-webkit-slider-thumb {
/* reset */
-webkit-appearance: none;
appearance: none;
/* custom */
height: 2.25rem;
width: 2.25rem;
border: .25rem solid #fff;
border-radius: 50%;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1);
background-color: #fff;
background-image: url('../images/after-before.svg');
background-size: cover;
cursor: grab;
}
#after-befor-box input::-moz-range-thumb {
height: 2.25rem;
width: 2.25rem;
border: .25rem solid #fff;
border-radius: 50%;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.1);
background-color: #fff;
background-image: url('../images/after-before.svg');
background-size: cover;
cursor: grab;
}
#after-befor-box input:active::-webkit-slider-thumb {
cursor: grabbing;
}
#after-befor-box input:active::-moz-slider-thumb {
cursor: grabbing;
}
.hero-banner-2{
border-radius: 100%; margin: 100px 50px 50px; border: 10px solid #fff; }
@media only screen and (max-width : 768px) {
.hero-banner-2{
margin:5px;
width: 95%;
border: 10px solid #fff;
}
.bannerimg{ margin-top: 0px;}
.welcome-left, .welcome-right {
float: none;
width: 95%;
padding: 10px;
}
.tratment-box {
float: none;
width: 95%;
margin: 15px 1.5%;
text-align: center;
}
.dr-lift, .dr-right{
width: 95% !important;
float: none;
padding: 10px;
}
.obgbox {
float: none;
width: 95%;
padding: 10px;
}
.blog-box {
float: none;
width: 95%;
margin: 10px 0%;
border-radius: 32px;
background: #fff;
box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 10%);
padding: 10px;
}
.footer-col-1 {
float: none;
width: 95%;
margin: 0 4% 0 0;
padding: 10px;
}
.footer-col-2 {
float: none;
width: 95%;
margin: 0 4% 0% 0;
padding:0px 10px;
}
.mtop50 {
margin-top: 0px;
}
.top-bar {
padding: 5px 10px 5px;
}
.top-l {
float: left;
width: 76%;}
.top-r {
float: right;
width: 23%;
text-align: right;
}
.testimonial-box {
float: none;
width: 95%;
margin: 0%;
padding: 10px;
}
.bannerimg {
width: 95%;
float: none;
padding: 10px;
}
.slider-two_content h1 {
font-size: 2em;
font-weight: 500;
line-height: 1.2;
padding-bottom: 10px;
}
.slider-two_content p {
font-size: 1.125rem;
line-height: 28px;
margin-bottom: 10px;
}
.slider-two_content {
width: 95%;
padding: 10px;
}
.bannerimg {
width: 95%;
float: none;
padding: 10px;
}
.welcome-right h2 {
font-size: 2em;
}
.welcome-area {
padding-bottom: 20px;
}
.treatment-area h2 {
font-size: 2em;
padding: 0 10px;}
.drsection {
padding: 20px 0;
}
.drsection h2 {
font-size: 2em;
line-height: 1.2em;
margin-bottom: 10px;
text-align: center;
}
.result-text-center h2 {
font-size: 2em;
}
.result-text-center h2 span {
font-size: 2em;
font-weight: 700;
color: #ef5e31;
}
.logo-area {
padding: 20px 0 12px;
float: left;
width: 80%;
}
.footer-right,.footer-left{
float: none;
}
.footer-area h6 {
padding-top: 30px;
}
.emergency-n-right {
float: right;
width: 87%;
}
}
@media only screen and (max-width : 469px) {
.top-l a {margin: 0;}
.top-bar li a {
font-size: 14px;}
.top-bar li {padding: 0;}
}
.inner-banner {
background:
linear-gradient(
rgba(193, 168, 142, 0.219),
rgba(198, 166, 131, 0.229),
rgba(212, 155, 95, 0.14)
),
url('../images/smiling-clinic.jpg') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
.inner-banner h1 {
font-size: 40px;
margin-bottom: 10px;
}
.bredcom-baground{
background-color: #ffffffd2;
max-width: 350px;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.breadcrumb {
font-size: 18px;
padding: 10px 0;
}
.breadcrumb a {
color:#000;
text-decoration: none;
}
.separator {
margin: 0 5px;
}
.current {
color: #e84719;
}
.breadcrumb a:hover {
color: #e84719;
}
.cotact-box{
padding: 60px 20px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 0 auto;
}
.contact-area {
padding: 60px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.form-area {
width: 53%;
float: left;
padding-left: 30px;
}
.form-area h2 {
margin-bottom: 30px;
font-size: 35px;
font-weight: 600;
}
.form-area p{
font-size: 16px;
padding-bottom: 30px;
}
.form-group {
margin-bottom: 15px;
}
.form-group input,
.form-group textarea {
width: 97%;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
transition: border 0.3s ease;
margin: 0 auto;
}
input, textarea {
padding: 20px
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #000;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.btn-submit {
width: 40%;
padding: 14px;
font-size: 18px;
background: #cd3727;
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s ease;
}
.btn-submit:hover {
background: #000;
}
.form-info{
width: 40%;
float: right;
}
.form-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.info-cart {
display: flex;
align-items: center;
gap: 15px;
flex: 1 1 45%;
padding: 15px;
border-radius: 8px;
}
.info-icon {
width: 40px;
height: 40px;
background-color: #cd3727;
border-radius: 10px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-icon i {
font-size: 24px;
color: #fff;
}
.info-icon:hover {
background-color: #000;
}
.info-text {
flex: 1;
padding-left: 10px;
}
.info-text h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.info-text p {
margin: 5px 0 0;
}
.info-text a{
margin: 5px 0 0;
color:#000;
}
.info-text a:hover{
color: #cd3727;
}
.dr-profle-area {
padding: 60px 0;
}
.dr-profile {
align-items: center;
overflow: hidden;
background: #fff;
border-radius: 12px;
padding: 50px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.dr-profile-left {
width: 47%;
float: left;
}
.dr-profile-left img {
width: 100%;
border-radius: 12px;
object-fit: cover;
}
.dr-profile-right {
width: 49%;
float: right;
}
.dr-profile-right h2 {
font-size: 56px;
margin-bottom: 25px;
color: #000;
line-height: 1.0;
}
.dr-profile-right span {
font-size: 56px;
font-weight: 700;
color: #ef5e31;
}
.dr-profile-right p {
font-size: 18px;
line-height: 26px;
margin-bottom: 30px;
padding-bottom: 10px;
}
.dr-profile-right strong {
color: #000;
}
.dr-profile-right a {
text-decoration: none;
}
.dr-profile-right a:hover {
color:#cd3727
}
.social-icons {
margin-top: 15px;
}
.social-icons a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin-right: 10px;
border-radius: 50%;
background: #cd3727;
color: #fff;
font-size: 18px;
transition: all 0.3s ease;
}
.social-icons a:hover {
background: #333;
color: #fff;
}
.biogarphy-area {
padding: 0px 0 60px;
}
.biygrphy h2 {
font-size: 45px;
color: #333;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.biygrphy h2::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 3px;
background: #cd3727;
}
.biygrphy p {
font-size: 18px;
line-height: 1.8;
color: #555;
margin: 0;
}
.service-area{
padding: 20px 0 60px;
}
.service{
border-bottom: 1px solid #c0bebe;
padding-bottom: 40px;
overflow: hidden;
padding-top: 50px;
}
.service h2{
font-size: 56px;
color: #e84719;
padding-bottom: 20px;
font-weight: 700;
}
.liststyle li {
background: url(../images/arrow01.png) no-repeat left 7px;
padding: 0 0 10px 15px;
}
.list50 {
float: left;
width:30%;
}
.service h3{
font-size: 35px;
line-height: 40px;
padding-bottom: 20px;
}
.service p{
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
.service img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.right-img {
width: 300px;
float: right;
margin-left: 30px;
margin-bottom: 20px;
}
.img-left {
width: 300px;
float: left;
margin-right: 30px;
margin-bottom: 20px;
}
.testimonials-area{
padding: 60px 10px;
overflow: hidden;
}
.testimonials-area {
padding: 60px 10px;
overflow: hidden;
background: #f9f9f9;
margin: 60px 0;
}
.testimonial-page-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review-img {
display: flex;
justify-content: center;
align-items: center; padding-bottom: 40px;
}
.testimoniyal-cart {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 30%;
float: left;
margin: 20px;
}
.patient{
padding: 30px;
}
.testimoniyal-cart:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}
/* Title Section (icon + title + g-icon inline) */
.testimoniyal-title {
display: flex;
align-items: center;
margin-bottom: 15px;
justify-content: center;
justify-items: auto;
}
/* Left icon */
.icon-img img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
/* Title text (middle) */
.test-title h3 {
font-size: 25px;
font-weight: 500;
margin: 0 10px;
flex: 1;
color: #000;
}
/* Right icon */
.g-icon img {
width: 20px;
height: 20px;
margin-left: 20px;
}
/* Card content paragraph styling */
.testimoniyal-cart p {
font-size: 18px;
font-weight: 26px;
margin-bottom: 10px;
}
@media (max-width: 992px) {
.testimonial-page-box {
grid-template-columns: repeat(2, 1fr);
}
}
.gallery-area{ padding:70px 10px;
overflow: hidden;}
.portfolio_filter li {
display: inline-block;
}
.portfolio_filter li a {
border-bottom: 1px solid transparent;
padding: 5px 25px;
display: block;
font-size: 16px;
text-transform: capitalize;
}
.portfolio_filter li a.current,
.portfolio_filter li a:hover {
border-color: #0e93d8;
color: #0e93d8;
}
.portfolio_container,
.portfolio_gallery
{
list-style: none; margin-top:15px;
}
.gutter_small {
margin: 0 -7.5px -15px -7.5px;
}
.work_col2 > li {
width: 50%;
float: left;
}
.work_col3 > li {
width: 31%;
float: left;
}
.work_col4 > li {
width: 25%;
float: left;
}
.work_col5 > li {
width: 20%;
float: left;
}
.portfolio_item img,
.portfolio-item img {
width: 100%;
transition: all 0.5s ease-in-out;
}
.portfolio_hide {
opacity: 0;
visibility: hidden;
height: 0;
padding-top:0 !important;
padding-bottom:0 !important
}
.gutter_small > li {
padding: 0 7.5px 15px 7.5px;
}
.gutter_medium > li {
padding: 0px 1% 22px 1%;
}
.portfolio_content {
padding: 15px;
}
.portfolio_item {
overflow: hidden;
position: relative;
}
.portfolio_item a {
display: block;
overflow: hidden;
}
.portfolio_style1 .portfolio_content {
bottom: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 60px;
opacity: 0;
visibility: hidden;
right: 0;
left: 0;
text-align: center;
transition: all 0.5s ease-in-out;
z-index: 3;
}
.portfolio_style1 .portfolio_item::before {
background-color: rgba(14,147,216,0.80);
content: "";
position: absolute;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
top: 0;
bottom: 0;
transition: all 0.5s ease-in-out;
z-index: 2;
}
.portfolio_style1 .portfolio_item:hover .portfolio_content {
top: 0;
opacity: 1;
visibility: visible;
}
.portfolio_style2 .portfolio_content {
background-color: rgba(14,147,216,0.80);
bottom: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 0px;
opacity: 0;
visibility: hidden;
right: 0;
left: 0;
text-align: center;
transition: all 0.5s ease-in-out;
}
.portfolio_style1 .portfolio_item:hover:before,
.portfolio_style2 .portfolio_item:hover .portfolio_content,
.portfolio_style3 .portfolio_item:hover .portfolio_content {
opacity: 1;
visibility: visible;
}
.portfolio_style2 .portfolio_item:hover img,
.portfolio_style4 .portfolio_item:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.portfolio_style3 .portfolio_content {
background-color: rgba(14,147,216,0.80);
bottom: 10px;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 10px;
opacity: 0;
visibility: hidden;
right: 10px;
left: 10px;
text-align: center;
transition: all 0.5s ease-in-out;
}
.portfolio_style4 .portfolio_item .image_link {
display: block;
overflow: hidden;
}
.portfolio_style4 .portfolio_content {
background-color: #0e93d8;
transition: all 0.5s ease-in-out;
}
.portfolio_style5 .portfolio_content {
background-color: rgba(14,147,216,0.80);
bottom: 10px;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 10px;
opacity: 0;
visibility: hidden;
right: 10px;
left: 10px;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
transition: all 0.5s ease-in-out;
}
.portfolio_style5 .portfolio_item:hover .portfolio_content {
opacity: 1;
visibility: visible;
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.link_container a {
background-color: #fff;
border: 2px solid #fff;
color: #0e93d8;
font-size: 22px;
width: 45px;
height: 45px;
display: inline-block;
border-radius: 100%;
line-height: 45px;
margin: 0 2px;
text-align: center;
}
.link_container a .ion-ios-play {
position: relative;
left: 2px;
}
.link_container a:hover {
background-color: transparent;
color: #fff;
}
.link_container {
margin-bottom: 10px;
}
.portfolio_content h5 a,
.portfolio_content p {
color: #fff;
}
.portfolio_content p {
margin: 0;
min-height: 50px;
overflow: hidden;
max-height: 50px;
}
.work_col5.portfolio_style3 .portfolio_content,
.work_col5.portfolio_style5 .portfolio_content {
padding: 5px;
bottom: 5px;
top: 5px;
right: 5px;
left: 5px;
}
.work_col5.portfolio_style3 .link_container a,
.work_col5.portfolio_style5 .link_container a {
font-size: 18px;
width: 35px;
height: 35px;
line-height: 35px;
}
.work_col5.portfolio_style3 .portfolio_content p,
.work_col5.portfolio_style5 .portfolio_content p {
min-height: 40px;
max-height: 40px;
font-size: 14px;
}
.portfolio_slider.owl-carousel.owl-theme .owl-dots,
.blog_post .owl-carousel.owl-theme .owl-dots {
margin: 0 !important;
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
}
.portfolio_slider.owl-carousel.owl-theme .owl-dots span,
.blog_post .owl-carousel.owl-theme .owl-dots span {
margin: 5px 2px;
}
.portfolio_slider.owl-carousel {
z-index: inherit;
}
.portfolio_slider.owl-carousel.owl-drag .owl-item {
overflow: hidden;
}
.single_post .owl-carousel.owl-theme .owl-dots {
margin: 0 !important;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.portfolio-item .owl-carousel {
display: block;
}
.portfolio-item .owl-carousel a:nth-child(1n+2) {
display: none;
}
.loading {
font-size: 0 !important;
background-color: #000 !important;
border: 0;
height: 48px;
width: 50px;
}
#load-more {
transition: none;}.image_gallery_item {
position: relative; max-height:246px;}
.gallary_hover_box {
background:linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 57.04%);
bottom: 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 0px;
opacity: 0;
visibility: hidden;
right: 0px;
left: 0px;
text-align: center;
transition: all 0.5s ease-in-out;
}
.gallary_hover_box i { background:#09afca; width:60px; height:43px; padding-top:17px; margin:0 auto; border-radius:100%;
color: #fff;
font-size: 25px;
}
.image_gallery_item:hover .gallary_hover_box {
opacity: 1;
visibility: visible;
}
.gallery_img img {
transition: all 0.5s ease;
}
.gallery_hover_style1 .image_gallery_item,
.gallery_hover_style2 .image_gallery_item {
overflow: hidden;
}
.gallery_hover_style2 .gallary_hover_box {
top: 15px;
left: 15px;
bottom: 15px;
right: 15px;}
.gallery_hover_style2 .image_gallery_item:hover .gallery_img img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);}
.gallery_hover_style3 .gallary_hover_box::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0px;
border: 2px solid rgba(255,255,255,0.5);
margin: 10px;}.ti-zoom-in::before {
content: "\e61a";}@font-face {
font-family: 'themify';
src:url('../fonts/themify9f24.eot?-fvbane');
src:url('../fonts/themifyd41d.eot?#iefix-fvbane') format('embedded-opentype'),
url('../fonts/themify9f24.woff?-fvbane') format('woff'),
url('../fonts/themify9f24.ttf?-fvbane') format('truetype'),
url('../fonts/themify9f24.svg?-fvbane#themify') format('svg');
font-weight: normal;
font-style: normal;}
[class^="ti-"], [class*=" ti-"] {
font-family: 'themify';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
.gallery-item {
display: flex;
flex-direction: row-reverse; /* Keep tab buttons on the right */
gap: 20px;
}
/* Responsive: 1 card per row on mobile */
@media (max-width: 768px) {
.inner-banner {
height:250px;
}
.dr-profile {
flex-direction: column;
text-align: center;
}
.dr-profile-left, .dr-profile-right {
width: 100%;
float: none;
padding: 20px 0;
}
.dr-profile {
padding: 10px 10px 30px;
}
.dr-profile .btn-2 {
padding: 15px 20px;
}
.dr-profile .btn1 {
padding: 15px 20px;
}
.biogarphy-area {
padding: 0px 10px 60px;
}
.dr-profile-right h2 {
font-size: 40px;
}
.dr-profile-right h2 span {
font-size: 40px;
}
h2{
font-size: 40px;
}
.patients-testimonial-area h2 {
font-size: 40px;
}
.blog-area h2{
font-size: 40px;
}
h2 span{
font-size: 40px !important;
}
.service-area {
padding: 0px 10px;
}
.service img{
padding-bottom: 20px;
}
.service br{
display: none;
}
.form-area, .form-info {
width: 90%;
float: none;
padding: 10px;
}
.form-info {
padding: 30px 10px 10px;
}
.btn-submit {
width: 70%;}
.cotact-box{
padding: 30px 0px;
}
.info-cart {
gap: 0px;
padding: 15px 0 0;
}
.info-text a {
font-size: 16px;
}
.breadcrumb {
padding: 10px;
}
.service h2 {
font-size: 40px;}
.testimoniyal-cart {
width: 95%;
float: none;
margin: 10px;
}
.bredcom-baground {
max-width: 100% ;
background-color: #ffffffa3;
}
.form-group input, .form-group textarea {
width: 93%;}
.work_col3 > li {
width: 100%;
float: none;
}
.form-info {
display: block;
flex-wrap: wrap;
gap: 20px;
}
.right-img,.img-left {
margin: 10px;
float:none;
max-width: 95%;
}
.list50 {
float: none;
width: 80%;
}
.result-box {
display: block;
margin-top: 20px;
}
.befor-main-box {
display: block;
margin-top: 20px;
max-height: 90vh;
}
.img-wrapper {
position: absolute;
width: 100%;
height: 92%;
overflow: hidden;
}
.testimonial-txt {
float: right;
width: 95%;
}
.testimonial-img {
display: none;
}
.footer-main {
padding: 50px 0 0px 0;
}
}