@font-face {

  font-family: 'Poppins';

  src: url('../fonts/Poppins-Bold.woff2') format('woff2'),

    url('../fonts/Poppins-Bold.woff') format('woff');

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'Poppins';

  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),

    url('../fonts/Poppins-SemiBold.woff') format('woff');

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'Poppins';

  src: url('../fonts/Poppins-Medium.woff2') format('woff2'),

    url('../fonts/Poppins-Medium.woff') format('woff');

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'Poppins';

  src: url('../fonts/Poppins-Regular.woff2') format('woff2'),

    url('../fonts/Poppins-Regular.woff') format('woff');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'Lato';

  src: url('../fonts/Lato-Bold.woff2') format('woff2'),

    url('../fonts/Lato-Bold.woff') format('woff');

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: 'Lato';

  src: url('../fonts/Lato-Regular.woff2') format('woff2'),

    url('../fonts/Lato-Regular.woff') format('woff');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

:root {

  --dark-blue: #0C4367;

  --teal: #0EC5D3;

  --light-bg: #f5f5f5;

  --dark-green: #004d40;

}

body {

  margin: 0;

}

body,

p {

  font-family: 'Lato';

  font-size: 16px;

  padding: 0;

  line-height: 1.6;

  margin-top: 0;

}

h1,

h2,

h3,

h4 {

  font-family: 'Poppins';

  font-weight: 600;

  color: var(--dark-blue);

  line-height: 1.1;

  margin: 0;

}

* {

  box-sizing: border-box;

}

.container {

  max-width: 1340px;

  width: 100%;

  padding: 0 20px;

  margin: 0 auto;

}

h1 {

  /* font-size: clamp(2rem, 1.625rem + 1.6667vw, 3.125rem); */

  font-size: clamp(2rem, 1.2083rem + 3.5185vw, 4.375rem);

}

h2 {

  /* font-size: clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem); */

  font-weight: 400;

}

h3 {

  font-size: clamp(1.5rem, 1.375rem + 0.5556vw, 1.875rem);

}

h4 {

  font-size: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);

}

h2{

  font-size: clamp(1.75rem, 1.2917rem + 2.037vw, 3.125rem);

}

.founder-name{transform: skew(-15deg); letter-spacing: 0.5px; font-size: 20px;}

.full-image img {

  height: 100% !important;

  object-fit: cover;

  border-radius: 20px;

}

a {

  text-decoration: none;

  transition: 0.3s;

}

.header{background: var(--teal); padding: 10px 0;}

#site-header { /* position: fixed; */ width: 100%; top: 0; left: 0; transition: max-width 0.3s ease; z-index: 1000; }

#site-header.sticky { position: fixed; top: 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 10px 0; transition: max-width 0.3s ease;}

#site-header.sticky .logo img{max-width: 65px;}

.header .logo{display: flex; align-items: center; justify-content: center; flex-direction: column;}

.logo-tagline{text-align: center; font-size: 10px; color: #fff; font-weight: 600; line-height: 1.2;}

.header .logo img{max-width: 85px;}

.header .row{display: flex; align-items: center; justify-content: space-between;}

.header .row .navbar{display: flex; align-items: center; gap: 15px;}

.header .row .navbar .desktop-nav ul{display: flex; align-items: center;}

.header .row .navbar .desktop-nav ul li{padding: 0 15px;}

.header .row .navbar .desktop-nav ul li a{color: #fff; font-weight: 600;}

.header .row .navbar .desktop-nav ul li a:hover{color: var(--dark-blue);}

.header .custom-btn{background: var(--dark-blue); padding: 12px 20px; font-size: 14px; border: 2px solid transparent;}

.header .custom-btn:hover{background: transparent; border: 2px solid var(--dark-blue); color: var(--dark-blue);}

.user-login{width: 45px; height: 45px; object-fit: contain; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: none;}

.user-login img{width: 35px; height: 35px; object-fit: contain;}

.subtitle img{filter: brightness(0) saturate(100%) invert(23%) sepia(4%) saturate(6467%) hue-rotate(164deg) brightness(99%) contrast(87%); width: 24px; }

.subtitle{display: flex; align-items: center; gap: 10px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; color: var(--teal);}

.services-sec .subtitle, .team-sec .subtitle{justify-content: center;}

.about-section .row{grid-template-columns: 300px 1fr;}

.tagline-under{letter-spacing: 1.7px;}
ul.sub-menu .current-menu-item a{background-color: #fff !important; color: var(--dark-blue) !important;}
.wpcf7-response-output{color: #fff;}

ul{

  margin: 0;

  padding: 0;

  list-style: none;

}

.custom-btn {

  padding: 16px 40px;

  border-radius: 10px;

  background: var(--teal);

  color: #fff;

  min-width: 100px;

  text-align: center;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  font-size: 17px;

}

.custom-btn img{

  width: 18px;

  height: 18px;

  object-fit: contain;

  margin-left: 5px;

  transition: 0.3s;

  filter: brightness(0) saturate(100%) invert(98%) sepia(13%) saturate(112%) hue-rotate(12deg) brightness(116%) contrast(100%);

}

.custom-btn:hover {

  background: var(--dark-blue);

}

.custom-btn:hover img{

  transform: rotate(45deg);

}

img {

  max-width: 100%;

  height: auto;

}

.home-hero-sec{

  /* background: url(../images/dentist2.webp) no-repeat; */

  /* background-size: cover; */

  /* background-position: center; */

  /* min-height: calc(100vh - 120px); */

  /* min-height: 100vh; */

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  position: relative;

}

.home-hero-sec .slide .slide-img{

  position: relative;

  left: -1px;

}

.home-hero-sec .slide .slide-img::before{

position: absolute;

  content: '';

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to right, rgba(14, 107, 143, 1), rgba(0, 0, 0, 0));

}

/* .home-hero-sec .owl-nav{display: none;} */

.home-hero-sec button.owl-prev{position: absolute; left: 50px; top: 50%; transform: translateY(-50%); background-color: rgba(0, 191, 200, 0.5) !important; width: 50px; height: 50px; display: flex; border-radius: 50%; justify-content: center; align-items: center; background-image: url(../images/left-chevron.svg) !important; background-repeat: no-repeat !important;

    background-size: 10px !important;

    background-position: center !important;}

.home-hero-sec button span{display: none;}

.home-hero-sec button.owl-next{position: absolute; right: 50px; top: 50%; transform: translateY(-50%);  background-color: rgba(0, 191, 200, 0.5) !important; width: 50px; height: 50px; display: flex; border-radius: 50%; justify-content: center; align-items: center; background-image: url(../images/right-chevron.svg) !important; background-repeat: no-repeat !important;

    background-size: 10px !important;

    background-position: center !important;}

.home-hero-sec .owl-dots{display: none;}

/* .home-hero-sec:before{

  position: absolute;

  content: '';

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to right, rgba(14, 107, 143, 1), rgba(0, 0, 0, 0));

} */

.home-hero-sec .row{

  position: relative;

  max-width: 600px;

  width: 100%;

  color: #fff;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.home-hero-sec h1{

  color: #fff; 

  font-size: clamp(2rem, 1.2083rem + 3.5185vw, 4.375rem);

  line-height: 1.1;

}

.home-hero-sec span{

  font-size: 18px;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 10px;

}

.home-hero-sec .slide{

  position: relative;

}

.home-hero-sec .slide-content{

  position: absolute;

  top: 0;

  left: 0;

  /* transform: translateY(-50%); */

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  /* max-width: 500px; */

}

.home-hero-sec span img{

  width: 24px;

}

.home-hero-sec a{

  justify-self: flex-start;

}

.home-hero-sec .custom-btn.outline{

  background: transparent;

  border: 2px solid #fff;

}

.home-hero-sec .custom-btn.outline:hover{

  background: var(--teal);

  border: 2px solid transparent;

}

.home-hero-sec .btn-wrapper{

  display: flex;

  gap: 15px;

}

.home-hero-sec .custom-btn.hover-outline{

  border: 2px solid transparent;

}

.home-hero-sec .custom-btn.hover-outline:hover{

  background: transparent;

  border: 2px solid #fff;

}

.home-hero-sec .item img {

  height: calc(100vh - 150px);

  object-fit: cover;

  object-position: center;

}

/* CSS */

.section-padding {

  padding: clamp(3rem, calc(5vw + 2rem), 6rem) 0;

}

.section-padding-top {

  padding: clamp(3rem, calc(5vw + 2rem), 6rem) 0 0;

}

.section-padding-bottom {

  padding: 0 0 clamp(3rem, calc(5vw + 2rem), 6rem);

}

.clinic-section .row,

/* .about-section .row, */

.journey-section .row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}

.about-section .row{display: flex; gap: 60px; align-items: flex-start;}

.about-right.full-image{width: 35%; background: #fff; padding: 30px 0 0; border-radius: 20px; aspect-ratio: 0.8; object-fit: cover;}

.about-right.full-image img{width: 100%; aspect-ratio: 0.8; object-position: top; object-fit: cover;}

.about-left{width: 65%;}

.journey-section .row{

  align-items: center;

}

.btn-wrapper {

  justify-self: flex-start;

}

.clinic-section .clinic-image {

  display: flex;

  gap: 20px;

}

.clinic-section .clinic-image .img-1{

padding-top: 40px;

}

.clinic-section .clinic-image img{

  aspect-ratio: 0.6;

  border-radius: 20px;

  object-fit: cover;

}

/* .clinic-text p {

  line-height: 1.8;

  color: #333;

  margin-bottom: 16px;

} */

.dentophobia-box {

  background-color: #e0f2f1;

  padding: 20px 24px;

  border-left: 5px solid #00796b;

  margin-top: 30px;

  border-radius: 8px;

}

.dentophobia-box h2 {

  font-size: 1.5rem;

  /* color: #00695c; */

  margin-bottom: 12px;

}

.journey-image .parent {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: repeat(2, 1fr);

    gap: 20px;

}

.journey-image .div1 {

    grid-row: span 2 / span 2;

    padding-top: 60px;

}

.journey-image .div2 {

    padding-right: 60px;

}

.journey-image .div3 {

    grid-column-start: 2;

    grid-row-start: 2;

    padding-bottom: 50px;

}

.journey-image img{

  border-radius: 20px;

  aspect-ratio: 1.2;

  object-fit: cover;

}

/* CSS */

.about-section {

  background: var(--light-bg);

}

/* .container {

  max-width: 1240px;

  margin: 0 auto;

} */

.about-left h3 {

  color: var(--teal);

  font-weight: 400;

  margin-bottom: 10px;

}

.tagline {

  font-size: 1.2rem;

  /* color: #333; */

  margin-bottom: 24px;

  font-weight: 700;

}

.mission-vision {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  margin-bottom: 24px;

}

.block.mission {

  background: var(--dark-blue);

  /* background: #004d40; */

}

.block.vision {

  background: var(--teal);

}

.block {

  padding: 16px 20px;

  border-radius: 10px;

  color: #fff;

}

.block h4 {

  margin-bottom: 6px;

  /* color: #004d40; */

  color: #fff;

}

/* .story {

  background-color: #f1f8e9;

  padding: 16px 20px;

  border-left: 5px solid #8bc34a;

  margin-bottom: 20px;

  border-radius: 6px;

} */

.paying-it-forward-sec {

  position: relative;

  color: #fff;

  min-height: 400px;

  padding: 30px 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.paying-it-forward-sec:before {

  position: absolute;

  content: '';

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 141, 191, 0.5);

}

.paying-it-forward-sec .row {

  position: relative;

}

.paying-it-forward-sec h3 {

  color: #fff;

}

.paying-it-forward-sec h4 {

  color: #fff;

}

.paying-it-forward-sec p {

  font-size: 18px;

  max-width: 1000px;

}

.bottom-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 100px;

}

.services-sec h2 {

  text-align: center;

  margin-bottom: 30px;

}

.services-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  gap: 20px;

}

.services-grid figure {

  aspect-ratio: 1.5;

}

.services-grid img {

  width: 100%;

  aspect-ratio: 1.5;

  object-fit: cover;

}

.services-grid .content {

  padding: 20px 20px 30px;

  background: var(--light-bg);

      display: flex;

    flex-direction: column;

    flex: 1;

}

figure {

  margin: 0;

  overflow: hidden;

}

.services-grid .card {

  border-radius: 10px;

  overflow: hidden;

  background-color: var(--light-bg);

  display: flex;

    flex-direction: column;

}

.services-grid .card h4 {

  margin-bottom: 10px;

  font-size: 21px;

}

.services-grid .card p {

  margin: 0;

  margin-bottom: 15px;

  line-height: 1.4;

}

.services-grid .card a {

  background: var(--teal);

  color: #fff;

  font-weight: 400;

  padding: 8px 20px;

  border-radius: 6px;

  display: inline-flex;

  font-size: 14px;

  margin-top: auto;

    align-self: flex-start;

}

.services-grid .card a:hover {

  background: var(--dark-blue);

}

/* counter section css */

.counter-section {

  background-color: var(--teal);

  padding: 20px 0 30px;

}

.counter-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  color: #fff;

}

.counter-box {

  display: flex;

  align-items: center;

  
  text-align: center;

  padding: 20px;

  flex-direction: column;

}

.counter-number {

  font-size: 60px;

  font-weight: 700;

}

.counter-label {

  margin-top: 10px;

  font-size: 18px;

  letter-spacing: 0.5px;
  line-height: 1.3;

}

/* team section css start*/

.team-grid{

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  gap: 30px;

}

.team-grid .content{

  text-align: center;

  padding-top: 20px;

  background: rgba(245, 245, 245, 1);

  width: calc(100% - 30px);

  /* left: 50%; */

  /* transform: translateX(-50%); */

  z-index: 9;

  margin: -30px auto 0;

}

.team-sec h2{text-align: center; margin-bottom: 50px;}

.team-sec .card{

  position: relative;

}

.team-sec .card .content{

  position: relative;

  /* bottom: 15px; */

  padding: 15px;

  border-radius: 10px;

}

.team-sec .card figure {

  border-radius: 20px;

  aspect-ratio: 1;

}

.team-sec .card img {

  aspect-ratio: 1;

  object-fit: cover;

  object-position: top;

}

.team-sec .card p {

  color: #808080;

  margin: 5px 0 8px;

  line-height: 1.3;

  font-size: 15px;

}

.team-sec .card h4 {

  font-weight: 500;

  font-size: 18px;

}
.booking-btn{border: none; cursor: pointer; font-family: 'Lato';}

.team-sec .card .booking-btn {

  padding: 4px 20px 4px;

    background: var(--teal);

    border-radius: 4px;

    color: #fff;

    display: inline-flex;

    align-items: center;

    font-size: 14px;

    width: 100%;

    text-align: center;

    justify-content: center;

}
footer .sub-menu{display: none;}

.team-sec .card .booking-btn img{

  width: 18px;

  height: 18px;

  object-fit: contain;

  margin-left: 8px;

}

.team-sec .card .booking-btn:hover {

  background: var(--dark-blue);

}

/* testimonial section css start */

.testimonial-sec{

  background: var(--teal);

}

.testimonial-sec .row{

  padding: 0 40px;

}

.testimonial-sec h2{

  text-align: center;

  margin-bottom: 50px;

  color: #fff;

}

.testimonial-sec .card{

  background: var(--light-bg);

  padding: 30px;

  border-radius: 10px;

  height: 100%;

}

.testimonial-sec .owl-item, .testimonial-sec .item{

  height: 100%;

}

.testimonial-sec .card .client-name{

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.testimonial-sec .card .name{

  font-size: 26px;

  color: #000;

  font-weight: 700;

}

.testimonial-sec .icon{

  width: 34px;

}

.testimonial-sec .icon img{

  filter: brightness(0) saturate(100%) invert(48%) sepia(55%) saturate(1636%) hue-rotate(146deg) brightness(101%) contrast(100%);

}

.testimonial-sec .owl-prev, .testimonial-sec .owl-next{

  background-color: var(--dark-blue) !important;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.testimonial-sec .owl-nav button span{

  display: none;

}

.testimonial-sec .owl-nav button{

  background-repeat: no-repeat !important;

  background-size: 10px !important;

  background-position: center !important;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  transition: 0.3s;

}

.testimonial-sec .owl-nav button:hover{opacity: 0.9;}

.testimonial-sec .owl-prev{

  background-image: url(../images/left-chevron.svg) !important;

  left: -30px;

}

.testimonial-sec .owl-next{

  background-image: url(../images/right-chevron.svg) !important;

  right: -30px;

}

.testimonial-sec .owl-dots{

  position: absolute;

  text-align: center;

  margin-top: 30px;

  left: 50%;

  transform: translateX(-50%);
  width: 70%;

}

.testimonial-sec .owl-dot{

  width: 12px;

  height: 12px;

  background-color: var(--dark-blue) !important;

  border-radius: 10px;

  opacity: 0.5;

  margin: 4px;

}

.testimonial-sec .owl-dot.active{

  opacity: 1;

  width: 40px;

}

.testimonial-sec .owl-stage, .testimonial-sec .owl-stage-outer{

  display: flex;

}

.services-sec .btn-wrapper{text-align: center; margin-top: 50px; width: 100%;}

/* about page css */

.inner-hero-sec{position: relative; min-height: 350px; text-align: center; display: flex; align-items: center; justify-content: center;}

.inner-hero-sec:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5);}

.inner-hero-sec.about{background: url(../images/dentist2.webp) no-repeat; background-size: cover; background-position: center;}

.inner-hero-sec .row{position: relative;}

.inner-hero-sec h1{text-align: center; color: #fff;}

.about-us-sec .row{display: flex; align-items: center; gap: 60px; background: var(--dark-blue); padding: 60px; border-radius: 20px;}

.about-us-sec .media-col{width: 40%; position: relative;}

.about-us-sec .content-col{width: 60%;}

.about-us-sec .media-col img{background: #fff; padding: 30px 0 0; border-radius: 15px; aspect-ratio: 0.8; object-position: top; object-fit: cover;}

.about-us-sec h2{color: #fff;}

.about-us-sec p{color: #fff;}

.about-us-sec .customers{position: absolute; background: var(--teal); padding: 20px; border-radius: 15px; bottom: 60px; right: 0;}

.about-us-sec h4{font-size: 40px; font-weight: 700;}

.about-us-sec .customers p{margin: 0; font-weight: 600; font-size: 18px;}

.about-us-sec .custom-btn{border: 2px solid transparent;}

.about-us-sec .custom-btn:hover{background: transparent; border: 2px solid var(--teal);}



.dental-needs-sec .row{display: flex; align-items: center; gap: 60px;}

.dental-needs-sec .media-col{width: 50%;}

.dental-needs-sec .content-col{width: 50%;}

.dental-needs-sec .media-col .clinic-image{display: flex; gap: 20px;}

.dental-needs-sec .media-col .clinic-image .img-2{padding-top: 100px;}

.dental-needs-sec .media-col .clinic-image img{aspect-ratio: 0.6; border-radius: 20px; object-fit: cover;}

/* .dental-needs-sec .media-col .clinic-image .img-2{} */

.bg-cta-sec{background: url(../images/female-dentist.webp) no-repeat; background-size: cover; background-position: center; position: relative;}

.bg-cta-sec .row{position: relative;}

.bg-cta-sec:before{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(90deg, #000000, rgba(0, 0, 0, 0.1));}

/* .bg-cta-sec .content-col p{max-width: 650px;} */

.bg-cta-sec .content-col h2{max-width: 720px; color: #fff; font-weight: 400;}

.bg-cta-sec .content-col p{font-size: 18px; color: #fff; max-width: 750px;}

.bg-cta-sec .custom-btn{margin-top: 20px;}

.about-journey-sec .row{display: flex; gap: 40px; align-items: center;}

.about-journey-sec .media-col img{border-radius: 20px; aspect-ratio: 2; object-fit: cover;}

.about-journey-sec .content-col, .about-journey-sec .media-col{width: 50%;}

.about-journey-sec .custom-btn{margin-top: 10px;}

.about-journey-sec .content-col.left-col p{font-size: 18px;}

.inner-page h2{font-weight: 600; margin-bottom: 20px;}

.footer-cta-sec{padding: 45px 0; background: var(--teal);}

.footer-cta-sec .row{display: flex; align-items: center; justify-content: space-between; gap: 30px;}

.footer-cta-sec h2{color: #fff; font-size: 40px; margin-bottom: 10px;}

.footer-cta-sec .custom-btn{background: var(--dark-blue); border: 2px solid transparent; padding: 15px 30px;}

.footer-cta-sec .custom-btn:hover{background: transparent; border: 2px solid var(--dark-blue); color: var(--dark-blue);}

.footer-cta-sec p{color: #fff; margin: 0; font-size: 18px;}

.mission-vision-content{display: flex; flex-direction: column; gap: 20px;}

.mission-vision-content li{background: rgba(14, 197, 211, 0.2); padding: 15px 25px; border-radius: 10px; display: flex; align-items: center; gap: 15px;}

.mission-vision-content li img{width: 55px; height: 55px; object-fit: contain; flex: 0 0 55px;}

.mission-vision-content li .media{width: 75px; height: 75px; flex: 0 0 75px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff;}

.mission-vision-content h4{font-size: 20px; color: #fff;}

.mission-vision-content p{margin: 0; color: #fff;}







/* wall of fame page css */

.wall-fame-sec{background: url(../images/bricks-wall.webp)repeat; /* position: relative; */ background-position: center;}

/* .wall-fame-sec:before{position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(12, 67, 103, 0.98); left: 0; top: 0;} */

/* .wall-fame-sec .row{position: relative;} */

.fames{display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;}

.fames .item{display: inline-block;

    padding: 30px;

    border-width: 20px;

    border-style: solid;

    border-color: #3B1F1C #4B2E2B #5C3A36 #4B2E2B;

    background: #f5f5f5;

    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E4DF), to(#CDCDC6));

    background-image: -webkit-linear-gradient(#E5E4DF, #CDCDC6);

    background-image: -moz-linear-gradient(#E5E4DF, #CDCDC6);

    background-image: -o-linear-gradient(#E5E4DF, #CDCDC6);

    background-image: linear-gradient(#E5E4DF, #CDCDC6);

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 5px 2px rgba(0, 0, 0, .1), 0 10px 20px rgba(0, 0, 0, .8);

    position: relative;

    overflow: hidden;}

.fames li img{transition: 0.3s;}

.fames li:hover img{transform: scale(1.3);}

.wall-fame-sec h2{color: #fff; text-align: center; margin-bottom: 50px; text-shadow: 0 0 10px rgba(0,0,0,0.5);}





/* services page css */

.inner-hero-sec.service{background: url(../images/teeth-treatment.webp) no-repeat; background-size: cover; background-position: center;}

.dental-implant{background: url(../images/dental-implants.webp) no-repeat; background-size: cover; background-position: center;}

.what-dental-implant .row{grid-template-columns: 1fr 2fr; align-items: center;}

.advantage-implant  .media-col img{border-radius: 20px;}

.advantage-implant .content-col h3{margin-bottom: 20px;}

.list ul{margin-bottom: 20px;}

.list ul li{position: relative; padding-left: 30px; line-height: 1.3; margin-bottom: 10px;}

.list ul li::before{background: url(../images/arrow-right-icon.svg) no-repeat; background-size: 100%; width: 13px; height: 13px; content: ''; position: absolute; left: 8px; top: 6px;}

.grid-row{display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px;}

.procedure-sec{background-color: var(--dark-blue); }

.title-center{text-align: center;}

.procedure-sec .title-center{margin-bottom: 50px; color: #fff;}

.procedure-sec p, .procedure-sec li, .procedure-sec h3{color: #fff;}

.procedure-sec .grid-row-center{padding: 80px 0;}

.procedure-sec li::before{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7499%) hue-rotate(106deg) brightness(96%) contrast(103%);}

.procedure-sec .steps p strong{color: var(--teal); font-size: 20px;}

.grid-row img{border-radius: 20px;}

.grid-row .content-col{display: flex; flex-direction: column; justify-content: center;}





/* gum treatment page css */

.gum-treatment{background: url(../images/gum-treatment-bg.webp) no-repeat; background-size: cover; background-position: center;}

.section-header{text-align: center; margin-bottom: 50px;}

.section-header p{text-align: center;}

.treatment-sec{background-color: var(--light-bg);}

.treatment-sec .section-header p{max-width: 800px; margin: auto;}

.treatment-sec .section-header .title-center{margin-bottom: 20px;}

.flex-row{display: flex; gap: 60px;}

.treatment-sec .flex-row{background-color: var(--dark-blue); padding: 40px; border-radius: 20px; align-items: center; gap: 40px;}

.treatment-sec .flex-row .media-col{width: 30%;}

.treatment-sec .flex-row .content-col{width: 70%;}

.treatment-sec .flex-row h3{color: #fff; margin-bottom: 10px;}

.treatment-sec .flex-row p{color: #fff;}

.treatment-sec .flex-row-wrapper{display: flex; flex-direction: column; gap: 20px;}

.grid-row h2{margin-bottom: 10px;}





/* teeth-whitening page css */

.teeth-whitening{background: url(../images/teeth-whitening-img.webp) no-repeat; background-size: cover; background-position: center;}

.light-bg{background-color: var(--light-bg);}



/* dental bridges page css */

.dental-bridges{background: url(../images/dental-bridges-bg.webp) no-repeat; background-size: cover; background-position: center;}

.dental-bridges-benefit img{aspect-ratio: 1.2; object-fit: cover;}



/* cosmetic-dentistry page css */

.cosmetic-dentistry{background: url(../images/cosmetic-dentistry-bg.webp) no-repeat; background-size: cover; background-position: center;}



/* root-canal page css */

.root-canal{background: url(../images/root-canal-bg.webp) no-repeat; background-size: cover; background-position: center;}

.what-root-canal img{aspect-ratio: 1.5; object-fit: cover;}

.root-canal-treatment img{aspect-ratio: 1.7; object-fit: cover;}



/* contact page css */

.contact-info-col{width: 40%; background-color: var(--light-bg); border-radius: 20px; padding: 60px;}

.contact-form-col{width: 60%; background-color: var(--dark-blue); border-radius: 20px; padding: 60px 60px 20px;}

.contact-info-col ul{display: flex; flex-direction: column; gap: 30px;}
.contact-info-col h4{margin-bottom: 30px;}
.footer-col.contact-info li{color: var(--dark-blue);
    display: flex
;
    align-items: flex-start;
    gap: 10px;}

.contact-info-col li{display: flex
;
    gap: 20px;
    align-items: center;
    color: #000;
    font-size: 18px;}
.contact-info-col li a{display: flex; gap: 20px; align-items: center; color: #000; font-size: 18px; transition: 0.3s; word-break: break-word;}
.contact-info-col li a:hover .icon{background-color: var(--teal); transition: 0.3s;}
.contact-info-col li a:hover .icon img{filter: brightness(0) saturate(100%) invert(21%) sepia(50%) saturate(859%) hue-rotate(157deg) brightness(97%) contrast(96%);}

.contact-info-col li a .icon{width: 70px; height: 70px; flex: 0 0 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--dark-blue); transition: 0.3s;}

.contact-info-col li a img{width: 30px; height: 30px; transition: 0.3s;}
.contact-form-col h3{color: #fff; margin-bottom: 30px;}
.contact-form label{color: #fff; margin-bottom: 4px; display: inline-block;}
.contact-form .form-control{color: #000; width: 100%; height: 50px; padding: 6px 12px; border-radius: 10px; border: none; font-family: 'Lato';}
.contact-form .form-control:focus{outline: none;}
.contact-form textarea:focus{outline: none;}
.contact-form textarea{color: #000; width: 100%; height: 150px; padding: 6px 12px; border-radius: 10px; border: none; font-family: 'Lato';}
.contact-form .form-control-submit{background-color: var(--teal); color: #fff; font-size: 18px; font-family: 'Lato'; cursor: pointer; transition: 0.3s; border: 2px solid transparent; width: 200px; padding: 16px 30px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px;}
.contact-form .form-control-submit:hover{background-color: transparent; border: 2px solid var(--teal);}



/* gallery page css */

.gallery-sec .grid{display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 40px; column-gap: 20px;}

.gallery-sec .grid .item{display: flex; flex-direction: column;}

.gallery-sec .grid .item h4{margin-top: auto; text-align: center; padding-top: 10px;}

.gallery-sec .grid .item img{/* aspect-ratio: 1.5; */ border-radius: 10px; object-fit: cover;}

.gallery-sec .section-header-2{padding-top: 80px;}



/* .gallery-sec .grid .item */









/* footer css */

.footer{background: url(../images/teeth-treatment.webp) no-repeat; background-size: cover; background-position: center; position: relative; padding: 50px 0;}

.footer::before{position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.98); left: 0; top: 0;}

.footer .row{display: flex; position: relative; justify-content: space-between; gap: 20px;}

.footer .quick-links li{margin-bottom: 6px;}

.footer .quick-links li a:hover{color: var(--teal);}

.opening-hours ul li{display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}

.opening-hours ul{max-width: 250px;}

.footer .footer-col{color: var(--dark-blue);}

.footer .footer-col h4{color: var(--dark-blue); margin-bottom: 20px;}

.footer .footer-col li a{color: var(--dark-blue); display: flex; align-items: flex-start; gap: 10px;}
.footer .footer-col li a br{display: none;}

.footer .footer-col{width: 25%;}

.footer .contact-info ul{display: flex; flex-direction: column; gap: 10px;}

.footer .contact-info ul li img{width: 24px; flex: 0 0 24px;}
.footer .contact-info ul li .icon{display: flex;}

.footer .soical-media{display: flex; align-items: center; gap: 10px; margin-top: 50px;}

.footer .soical-media li a{border: 2px solid var(--teal); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}

.footer .soical-media li img{width: 22px; height: 22px;}

.footer .soical-media li a:hover{ background: var(--dark-blue);}

.footer .contact-info a:hover{color: var(--teal);}

.footer .contact-info img{transition: 0.3s;}

.footer .contact-info a:hover img{filter: brightness(0) saturate(100%) invert(23%) sepia(82%) saturate(307%) hue-rotate(161deg) brightness(93%) contrast(94%);}

.footer-logo img{max-width: 100px;}

/* mobile menu css */
/* Base */
.menu-toggle {
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  filter: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(7500%) hue-rotate(104deg) brightness(105%) contrast(100%);
}

/* Off-canvas container */
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: -280px; /* hidden initially */
  width: 280px;
  height: 100%;
  background: #fff;
  /* box-shadow: 2px 0 10px rgba(0,0,0,0.15); */
  transition: left 0.3s ease;
  z-index: 1002;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.offcanvas-menu.active {
  left: 0;
}

.offcanvas-menu .close-menu {
  font-size: 28px;
  border: none;
  background: none;
  align-self: flex-end;
  cursor: pointer;
  margin-bottom: 20px;
  color: #000;
}

/* Menu links */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-list li {
  margin: 15px 0;
}
.mobile-nav-list a {
  text-decoration: none;
  font-size: 16px;
  color: var(--dark-blue);
  position: relative;
  display: block;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.alert.alert-success.msg{background-color: #fff; padding: 7px 45px 7px 15px; color: green; font-weight: 600; display: inline-block; margin-bottom: 25px; position: relative;}
.alert.alert-success.msg:after{background: url(../images/check-circle-success.svg) no-repeat; position: absolute; content: ''; width: 24px; height: 24px; background-size: 100%; right: 15px;}

.offcanvas-menu .logo-tagline{color: var(--dark-blue);}
.tagline-upper{font-size: 11px; letter-spacing: 1px;}
.tagline-under{font-size: 9px; color: var(--dark-blue);}

.desktop-nav li.menu-item-has-children{position: relative;}
.desktop-nav li.menu-item-has-children .sub-menu{display: none !important; min-width: 220px; position: absolute; top: 20px; z-index: 99; padding-top: 5px;}
.desktop-nav li.menu-item:hover .sub-menu{  display: flex !important; flex-direction: column;}
.desktop-nav li.menu-item .sub-menu li{padding: 0 !important; width: 100%;}
.desktop-nav li.menu-item .sub-menu li a{padding: 10px 15px; background-color: var(--dark-blue); color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;}
.desktop-nav li.menu-item .sub-menu li a:hover{background-color: #fff;}
.contact-info-col li p{margin-bottom: 0;}

html,body{overflow-x: hidden;}
/* popop css */
.appointment-popup h4{color: #fff; margin-bottom: 10px; font-size: 18px; font-weight: 500;}
.appointment-popup{font-family: 'Lato' !important; position: relative; z-index: 9999;}
.appointment-popup input::placeholder{font-family: 'Lato' !important;}
.appointment-popup textarea{font-family: 'Lato' !important;}
.appointment-popup input[type="radio"]{width: 20px; height: 20px;}
.appointment-popup .radio-btn{margin-top: 20px;}
.appointment-popup .radio-btn label{display: flex; align-items: center; gap: 5px;}

.appointment-popup h3{color: #fff; margin-bottom: 30px;}
.appointment-popup .btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
}

.appointment-popup .btn:hover {
  background-color: #2980b9;
}

/* Overlay */
.appointment-popup .overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9;
}

/* Popup Box */
.appointment-popup .popup {
  background: var(--dark-blue);
  padding: 40px 30px;
  border-radius: 10px;
  width: 100%;
  max-width: 700px;
  position: relative;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-in-out;
  height: 90vh;
  overflow-y: auto;
}

/* Close Button */
.appointment-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}
.appointment-popup button[type="submit"]{border: none !important; font-family: 'Lato' !important; transition: 0.3s; cursor: pointer;}
.appointment-popup button[type="submit"]:hover{background-color: #fff !important; color: #000 !important;}

@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.8);}
  to {opacity: 1; transform: scale(1);}
}


.appointment-popup .form-group{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  margin-bottom: 20px;
}
.appointment-popup input{width: 100%; background-color: #fff; border: none; border-radius: 8px; height: 45px; padding: 6px 12px; font-size: 16px; color: #000; transition: 0.3s; border: 2px solid transparent;}
.appointment-popup input:focus, .appointment-popup textarea:focus{outline: none; border: 2px solid var(--teal); transition: 0.3s;}
.appointment-popup textarea{width: 100%; height: 110px; border-radius: 8px; padding: 6px 12px; font-size: 16px; color: #000; transition: 0.3s; border: 2px solid transparent;}
.appointment-popup label{color: #fff; margin-bottom: 5px;}
.appointment-popup .grid{display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px;}
/* li.menu-item-has-children{position: relative;} */
.desktop-nav li.menu-item-has-children a{margin-right: 10px; position: relative;}
.desktop-nav li.menu-item-has-children:after{content: ''; position: absolute; background: url(../images/chevron-down-icon.svg) no-repeat; width: 22px; height: 22px; background-size: 100%; right: 0; top: 3px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7413%) hue-rotate(1deg) brightness(107%) contrast(100%);}




/* responsive css */
@media(min-width: 1025px){
  .mobile-nav{display: none;}
  .menu-toggle{display: none;}
}
@media(max-width: 1024px){
  .desktop-nav{display: none;}
  .desktop-btn{display: none;}
  .home-hero-sec button.owl-prev{top: 100%; transform: translate(-50px, -90px); left: 44%;}
  .home-hero-sec button.owl-next{top: 100%; transform: translate(50px, -90px); right: 44%;}
  .contact-info-col{padding: 40px 30px;}
  .contact-form-col{padding: 40px 30px 0;}
  .contact-sec .flex-row{gap: 20px;}
  .contact-info-col li a .icon{width: 50px; height: 50px; flex: 0 0 50px;}
  .contact-info-col li a img { width: 24px; height: 24px;}
  .fames {grid-template-columns: repeat(3, 1fr);}
  
  .offcanvas-menu li.menu-item-has-children .sub-menu a{position: relative; padding-left: 10px; padding-top: 10px;}
  .offcanvas-menu li.menu-item-has-children .sub-menu li{margin: 0;}
  .offcanvas-menu li.menu-item-has-children .sub-menu li a{font-size: 14px;}
  .offcanvas-menu li.menu-item-has-children > a::after{transform: translateY(-50%); filter: brightness(0) saturate(100%) invert(0%) sepia(86%) saturate(7445%) hue-rotate(255deg) brightness(79%) contrast(112%); content: ''; position: absolute; background: url(../images/chevron-down-icon.svg) no-repeat; width: 22px; height: 22px; background-size: 100%; right: 0; top: 14px; transition: transform 0.3s ease;}
  .offcanvas-menu li.menu-item-has-children.open > a::after {transform: translateY(-50%) rotate(180deg);}

  /* .menu-item-has-children > a {
    position: relative;
    padding-right: 20px;
    cursor: pointer;
} */

/* Add arrow icon */
/* .menu-item-has-children > a::after {
    content: "▼";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: transform 0.3s ease;
} */

/* Rotate arrow when open */
.offcanvas-menu .menu-item-has-children.open > a::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Hide submenu by default */
.offcanvas-menu .menu-item-has-children > .sub-menu {
    display: none;
}

/* Show submenu when open */
.offcanvas-menu .menu-item-has-children.open > .sub-menu {
    display: block;
}


}


@media(max-width: 991px){
  .clinic-section .row, .journey-section .row{display: flex; gap: 20px;}
  .clinic-section .row{flex-direction: column-reverse;}
  .journey-section .row{flex-direction: column-reverse;}
  .about-section .row{flex-direction: column; gap: 20px;}
  .about-right.full-image, .about-left{width: 100%;}
  .services-grid{grid-template-columns: repeat(2, 1fr);}
  .counter-grid{grid-template-columns: repeat(2, 1fr);}
  .team-grid{grid-template-columns: repeat(2, 1fr);}
  .footer .footer-col{width: calc(50% - 20px);}
  .footer .row{flex-wrap: wrap;}

  .dental-needs-sec .row{flex-direction: column-reverse; gap: 20px;}
  .dental-needs-sec .media-col .clinic-image .img-2 { padding-top: 20px; }
  .dental-needs-sec .content-col, .dental-needs-sec .media-col{width: 100%;}
  .about-journey-sec .row{flex-direction: column;}
  .about-journey-sec .content-col, .about-journey-sec .media-col{width: 100%;}
  .contact-sec .flex-row{flex-direction: column-reverse;}
  .contact-info-col, .contact-form-col{width: 100%;}
  .fames {grid-template-columns: repeat(2, 1fr);}
  .gallery-sec .grid{grid-template-columns: repeat(3, 1fr);}
  .grid-row, .what-dental-implant .row{grid-template-columns: 1fr;}
  .media-col{order: -1;}
  .grid-row{gap: 20px;}
}

@media(max-width: 767px){
  .mission-vision{grid-template-columns: repeat(1, 1fr); gap: 12px;}
  .journey-image .div2 { padding-right: 0px; }
  .bottom-content{flex-direction: column; padding-top: 50px;}
  .services-grid{grid-template-columns: repeat(1, 1fr);}
  /* .counter-grid { grid-template-columns: repeat(1, 1fr); } */
  .counter-number{font-size: 40px;}
  .counter-label{font-size: 16px; margin-top: 0;}
  .counter-box{padding: 10px;}
  .team-grid { grid-template-columns: repeat(1, 1fr); }
  .testimonial-sec .row { padding: 0 20px; }
  .testimonial-sec .owl-dots{margin-top: 15px;}
  .footer .footer-col{width: calc(100% - 20px);}
  .footer .row{gap: 40px;}
  .footer-cta-sec .row{flex-direction: column; justify-content: center; align-items: center;}
  .footer-cta-sec h2{font-size: 35px; text-align: center;}
  .footer-cta-sec p{text-align: center;}
  .contact-info-col li a{font-size: 16px;}
  .contact-info-col { padding: 40px 20px; }
  .contact-form-col { padding: 40px 20px 0; }
  .contact-info-col ul{gap: 20px;}
  .header .logo img { max-width: 60px; }
  .fames {grid-template-columns: repeat(1, 1fr);}
  .gallery-sec .grid{grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 25px;}
  .home-hero-sec .item img{height: calc(80vh - 150px);}
  .clinic-section .clinic-image {gap: 12px; }
  .journey-image .parent{gap: 12px;}
  .treatment-sec .flex-row{flex-direction: column; padding: 20px; gap: 20px;}
  .treatment-sec .flex-row .media-col, .treatment-sec .flex-row .content-col{width: 100%;}
  .appointment-popup .grid{grid-template-columns: 1fr;}
   .logo-tagline{font-size: 7px;}
   .offcanvas-menu .logo-tagline{font-size: 10px;}
}