@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --themeColor: #003a5d;
  --themeRed: #16b8cd;
}

body {font-family: 'Poppins', sans-serif;}
* {margin: 0; padding: 0; box-sizing: border-box;}
img {max-width: 100%;}

.container {width: 90%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}

.pt0 {padding-top: 0 !important;}

.sec {padding: 80px 0;}
.sec h2 {font-size: 32px; margin-bottom: 20px; color: var(--themeColor);}
.sec h3 {font-size: 28px; margin-bottom: 20px; color: var(--themeColor);}
.sec h4 {font-size: 24px; margin-bottom: 20px; color: var(--themeColor);}
.sec p {font-size: 16px; margin-bottom: 20px;}

header {position: relative; top: 0; left: 0; width: 100%; z-index: 1;}
header .logo {display: inline-block; width: calc(130px - 4px); vertical-align: top; background: #fff; padding: 10px;}
header .headerTop {background: #003a5d; color: #cedee8; font-size: 13px; padding: 8px 0; text-align: right;}
header .headerTop a {color: inherit; text-decoration: none;}
header .headerTop .container div {display: inline-block; vertical-align: top; }
header .headerTop .container div.phone, header .headerTop .container div.mail {margin-left: 20px;}
header .headerTop .socialLnks {float: left;}
header .headerTop .socialLnks a {display: inline-block; margin: 0 4px;}
header nav {display: inline-block; width: calc(100% - 130px - 4px); vertical-align: top; text-align: right; padding-top: 32px;}
header nav ul {display: block;}
header nav ul li {display: inline-block;}
header nav ul li a {display: block; padding: 8px 12px; color: var(--themeColor); text-decoration: none; font-size: 15px;}
header nav ul li a.book {background: var(--themeRed); color: #fff; border-radius: 6px;}


.tbl {display: table; width: 100%;}
.tbl .r {display: table-row;}
.tbl .c {display: table-cell;}

.banner .bannerSlider {text-shadow: 4px 4px 4px black;}
.banner .bannerSlider ul li {position: relative; text-align: center; color: #fff;}
.banner .bannerSlider ul li .img {display: block; width: 100%; position: relative;}
.banner .bannerSlider ul li .img::after {content: ''; display: block; clear: both;}
.banner .bannerSlider ul li .img img {width: 100%; float: left;}
.banner .bannerSlider ul li .img::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #003a5d; opacity: .3;}
.banner .bannerSlider ul li .bx-caption {position: absolute; top: 50%; width: 100%; transform: translateY(-50%); padding: 0 60px;}
.banner .bannerSlider ul li .bx-caption {font-size: 24px; font-weight: 600;}
.banner .bannerSlider ul li .bx-caption h2 {font-size: 50px; font-weight: 600;}
.banner .bannerSlider .bx-controls .bx-controls-direction a {display: block; width: 60px; height: 60px; text-indent: 100px; overflow: hidden; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); color: #fff; border-radius: 50%; z-index: 51; text-align: center;}
.banner .bannerSlider .bx-controls .bx-controls-direction a::before { text-indent: 0; display: block; position: absolute; top: 0; left: 0; width: 60px; line-height: 60px; font-size: 60px;}
.banner .bannerSlider .bx-controls .bx-controls-direction a.bx-next::before {content: '\f054';}
.banner .bannerSlider .bx-controls .bx-controls-direction a.bx-prev::before {content: '\f053';}
.banner .bannerSlider .bx-wrapper {position: relative;}
.banner .bannerSlider .bx-controls .bx-controls-direction a.bx-next {right: 5%;}
.banner .bannerSlider .bx-controls .bx-controls-direction a.bx-prev {left: 5%;}

.nabh {text-align: center;}
.nabh img {display: inline-block; vertical-align: middle; margin-right: 20px;}
.nabh h2 {text-transform: uppercase; color: var(--themeColor); display: inline-block; vertical-align: middle; text-align: left; font-size: 36px; margin: 0;}
.nabh h2 span {text-transform: none; font-weight: 400; display: block; font-size: 28px; color: #000;}

.intro {background: #f4f4f4;}
/* .intro .introBox {display: block; border: 2px solid #e1e6f7; padding: 5vw; border-radius: 20px;} */
.intro .introBox {margin-bottom: 80px;}
.intro .introBox .head p {font-size: 22px; margin: 0;}
.intro .introBox .head h2 {font-size: 40px; color: #000; font-weight: 500; margin: 0;}
.intro .introBox .head h3 {font-size: 28px; color: #000; font-weight: 500; margin: 0;}
.intro .introBox .head {display: inline-block; vertical-align: middle; width: calc(300px - 4px); padding-right: 25px;}
.intro .introBox .content {display: inline-block; vertical-align: middle; width: calc(100% - 300px - 4px);}
.intro .dr {max-width: 800px; margin: 0 auto;}
.intro .dr img {margin-bottom: 20px; border-radius: 12px; display: inline-block; width: calc(200px - 4px); vertical-align: top; text-align: center;}
.intro .dr .drName {margin-bottom: 20px; border-radius: 12px; display: inline-block; width: calc(100% - 200px - 4px); vertical-align: top; text-align: left; padding-left: 32px;}

/* .facilities {background: var(--themeColor); color: #fff;}
.facilities h3 {color: #fff;}
.facilities .box {display: inline-block; width: calc(45% - 4px); vertical-align: top;}
.facilities .box:nth-child(2n) {margin-left: 10%;}
.facilities .box ul {display: block; list-style: none;}
.facilities .box ul li {display: block; margin-bottom: 20px; position: relative; padding-left: 32px;}
.facilities .box ul li::before {content: '\f00c'; display: block; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; position: absolute; top: 4px; left: 0; color: #fff;}
.facilities .machines {padding-top: 40px;}
.facilities .machines ul {display: block;}
.facilities .machines ul li {display: inline-block; width: calc(100% / 6 - 4px); vertical-align: top; text-align: center;}
.facilities .machines ul li img {display: block; margin: 0 auto 12px; max-width: 100%; border-radius: 12px; padding: 12px; background: #fff;}
.facilities .machines ul li span {display: block;} */

.services ul {display: block; list-style: none;}
.services ul li {display: inline-block; width: calc(33.33% - 4px - 20px); vertical-align: top; text-align: center; margin: 10px; padding: 20px; background: #f4f4f4; border-radius: 12px; min-height: 380px;}
.services ul li h3 {font-size: 18px; font-weight: 600;}
.services ul li p {font-size: 15px; font-weight: 400;}

.map iframe {width: 100%; height: 400px; border: 0; margin-top: 20px;}

footer {background: #001827; color: #d9e5ed; font-size: 15px;}
footer nav {padding: 40px 0;}
footer .copy {padding: 10px 0; text-align: center; background: #000d15; color: #b1b1b1; font-size: 13px;}
footer .address {display: inline-block; width: calc(50% - 4px); vertical-align: top;}
footer .address .logo {display: inline-block; width: calc(100px - 4px); vertical-align: top;}
footer .address .add {display: inline-block; width: calc(100% - 100px - 4px); vertical-align: top; padding-left: 20px;}
footer .address .add h4 {font-weight: 20px; font-weight: 600; margin-bottom: 8px;}
footer .address .add p {font-size: 15px; margin-bottom: 8px;}
footer .address .add p a {color: inherit; text-decoration: none;}
footer .navigation {display: inline-block; width: calc(50% - 4px); vertical-align: top; padding-left: 40px;}
footer .navigation ul {display: block;}
footer .navigation ul li {display: inline-block; width: calc(50% - 4px); vertical-align: top;}
footer .navigation ul li a {color: #d9e5ed; text-decoration: none;}

.whyus ul {display: block; background: #eaeffc; padding: 20px; border-radius: 12px; text-align: center;}
.whyus ul li {display: inline-block; vertical-align: top; padding: 15px 1.5vw;}
.whyus ul li img {height: 60px;}
.whyus ul li span {display: block;}
.whyus ul li strong {font-size: 20px;}
.whyus .cashless {padding-top: 40px; text-align: center;}
.whyus .cashless h4 {font-weight: 400;}

.bookNowBtn {position: fixed; bottom: 20px; right: 20px; display: block; padding: 12px 20px; background: var(--themeRed); color: #fff; font-size: 16px; text-decoration: none; border-radius: 4px; z-index: 100;}

.socialMedia {position: fixed; top: 50%; transform: translateY(-50%); right: 0px; display: block; padding: 0; background: var(--themeRed); color: #fff; font-size: 16px; text-decoration: none; border-radius: 4px; z-index: 100;}
.socialMedia a {display: block; padding: 12px 20px; color: #fff; font-size: 16px; text-decoration: none; border-radius: 4px;}

.gallery {width: 100%; overflow-x: hidden;}
.gslider .bx-viewport {overflow: visible !important;}

.vtestimonials {text-align: center;}
.vtestimonials video {width: 100%; height: 20vw; background: #000;}
.vtestimonials .hw {display: inline-block; width: calc(50% - 4px);}
.vtestimonials .hd2w {display: inline-block; width: calc(25% - 4px);}

.ftLnks {display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 102;}
.ftLnks a {display: table-cell; width: 50%; float: left; text-align: center; padding: 8px 4px; background: var(--themeRed); color: #fff; text-decoration: none;}
.ftLnks a:nth-child(2) {border-left: 1px solid #fff;}

.popForm {position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; z-index: 250; display: none;}
.popForm .popFormInner {position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); padding: 24px; border-radius: 12px; width: 80%; max-width: 300px;}
.popForm .popFormInner .close {position: absolute; top: 0; right: 0; background: #fff; line-height: 40px; width: 40px; text-align: center;}
.popForm .formWrap p {font-size: 16px; margin-bottom: 4px; color: #000;}
.popForm .formWrap .field, .popForm .formWrap .submit  {display: block; margin-bottom: 12px;  color: #000; position: relative;}
.popForm .formWrap .field input[type=text], .popForm .formWrap .field input[type=tel] {color: #000; background: none; border: 0; outline: 0; padding: 12px 8px 12px 44px; width: 100%; border: 1px solid #000; border-radius: 4px;}
.popForm .formWrap .field input[type=text]::placeholder, .popForm .formWrap .field input[type=tel]::placeholder {color: #000;}
.popForm .formWrap .submit input[type=submit] {color: #000; background: none; border: 0; outline: 0; padding: 12px 8px 12px 8px; border: 1px solid #000; border-radius: 4px; cursor: pointer; width: 100%;}
.popForm .formWrap .submit input[type=submit]:hover {background: #000; color: var(--themeColor);}
.popForm .formWrap .field i {position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #000;}
.popForm.active {display: block;}


.ibanner {padding: 80px 0; background: url(../images/Inner-Banner.jpg) center no-repeat; background-size: cover; color: #fff;}
.ibanner h1 {font-size: 48px; font-weight: 500;}
.ibanner p {font-size: 22px; font-weight: 400;}

.about {text-align: center;}
.about .dr .img {margin-bottom: 32px; display: inline-block; vertical-align: middle; padding: 0 32px;}
.about .dr .img img {height: 320px; border-radius: 12px;}
.about .dr .drName {display: inline-block; vertical-align: middle; text-align: left;}

.gallery ul {display: block;}
.gallery ul li {display: inline-block; width: calc(33.33% - 4px);}

.contact .add {display: inline-block; width: calc(50% - 4px); vertical-align: top; padding-right: 32px;}
.contact .pic {display: inline-block; width: calc(50% - 4px); vertical-align: top; text-align: center;}
.contact .pic img {max-height: 300px;}

.article ul, .article ol {margin-left: 16px; margin-bottom: 20px;}
.article .img {text-align: center; margin-bottom: 20px;}

.articles .article {display: inline-block; width: calc(33.33% - 4px); padding: 0 20px; margin-bottom: 32px; vertical-align: top;}
.articles .article a {display: block; text-decoration: none; color: inherit;}
.articles .article h2 {font-size: 18px; margin-bottom: 8px;}
.articles .article p {font-size: 14px;}
.articles .article span {color: var(--themeRed); display: block;}
.articles .article span:hover {color: red;}
.articles .article span::after {content: ' >';}

.menuBtn {display: none;}
@media only screen and (max-width: 980px) {
  header .logo {height: 100px;}
  header .callBook .call {font-size: 18px; padding: 4px 12px;}
  .banner .txt {padding: 132px 0;}
  .banner .txt h1 {font-size: 36px;}
  .banner .txt h2 {font-size: 28px;}
  .banner .formWrap .field, .banner .formWrap .submit { max-width: 200px; margin-bottom: 12px;}
  .whyus ul li img {height: 80px;}

  .intro .dr, .intro .points {width: calc(100% - 4px); margin-left: 0;}
  .facilities .box, .facilities .box:nth-child(2n) {width: calc(100% - 4px); margin-left: 0; padding: 12px 0;}
  .facilities .machines ul li {width: calc(100% / 3 - 4px); margin-bottom: 32px;}
  .whyus ul li {padding: 15px;}

  .menuBtn {display: block; cursor: pointer; font-size: 24px; float: right; margin: 20px 0 0; color: var(--themeColor);}
  header nav {display: none; width: 100%; margin-bottom: 20px;}
  header nav ul li {display: block; text-align: left;}
  header nav.active {display: block;}

  .banner .bannerSlider ul li .bx-caption h2 {font-size: 28px;}
  .banner .bannerSlider ul li .bx-caption {font-size: 16px;}
  .banner .bannerSlider .bx-controls .bx-controls-direction a::before {font-size: 24px;}

  .sec {padding: 50px 0;}

  .nabh img {height: 100px;}
  .nabh h2 {line-height: normal; font-size: 28px;}
  .nabh h2 span {font-size: 20px;}

  .intro .introBox .head {width: 100%; margin-bottom: 20px;}
  .intro .introBox .content {width: 100%;}

  .services ul li {width: calc(50% - 4px - 20px);}

  .vtestimonials .hw {width: calc(100%);}
  .vtestimonials video {height: 48vw;}
  .vtestimonials .hd2w {width: calc(50% - 4px);}

  footer .address, footer .navigation {width: calc(100%);}
  footer .navigation {padding: 0; padding-top: 20px;}

  .ibanner h1 {font-size: 32px;}
  .ibanner p {font-size: 18px;}

  .about .dr .drName {text-align: center;}

  .gallery ul li {width: calc(50% - 4px);}

  .articles .article {width: calc(50% - 4px);}
}

@media only screen and (max-width: 620px) {
  body {font-size: 14px;}

  header .logo {height: 80px; width: auto;}
  header .callBook .call {padding: 4px 4px; font-size: 18px;}
  header .callBook .call i {margin-right: 4px;}
  .whyus ul li {width: calc(100% - 4px); margin-bottom: 20px; text-align: center; border-bottom: 2px solid #fff; padding-bottom: 15px;}
  .whyus ul li:last-child {border-bottom: 0; padding-bottom: 0;}
  .facilities .machines ul li {width: calc(100% / 2 - 4px); margin-bottom: 32px;}
  
  .vtestimonials .hw {width: calc(100% - 4px);}
  .vtestimonials .hd2w {width: calc(50% - 4px);}

  .bookNowBtn {display: none;}
  .ftLnks {display: table;}

  .services ul li {width: 100%;}

  /* .banner .bannerSlider ul li .img {position: static;} */
  .banner .bannerSlider ul li {position: relative;}
  .banner .bannerSlider ul li .bx-caption {position: relative; padding: 100px 60px; transform: none; z-index: 1;}
  .banner .bannerSlider ul li .img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; max-width: none; height: 100%;}
  .banner .bannerSlider ul li .img img {height: 100%; width: auto; max-width: none;}

  header .headerTop .container div.socialLnks, header .headerTop .container div.mail {display: none;}

  .intro .dr img {display: block; margin: 0 auto 20px;}
  .intro .dr .drName {width: 100%; padding-left: 0;}
  .intro .introBox .head p {font-size: 18px;}
  .intro .introBox .head h2 {font-size: 32px;}
  .intro .introBox .head h3 {font-size: 20px;}

  .sec p {font-size: 14px;}
  .sec h2 {font-size: 26px;}
  .sec h4 {font-size: 20px;}

  .whyus ul li strong {font-size: 18px;}

  footer .address .add p {font-size: 13px;}
  footer .navigation ul li a {font-size: 13px;}

  .gallery ul li {width: calc(100%);}
  
  .contact .add, .contact .pic {width: calc(100%);}

  .ibanner h1 {font-size: 28px;}
  .ibanner p {font-size: 16px;}
  
  .articles .article {width: calc(100% - 4px); padding: 0;}
}

@media only screen and (max-width: 460px) {
  header .callBook .call .callSlidingLines {display: none;}
}