:root {
--white-color:#FFFFFF;
--black-color:#000000;
--golden-color:#D4BF88;
--grey-color:#5A5A5A;
;
--bg-color:#FDF0E0;
--font-family: 'Lato', sans-serif;
}
/* Improve font rendering for macOS/iOS */
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 62.5%; /* 1rem = 10px */
}
body{
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
font-family: 'Lato', sans-serif;
color:var(--slate-600);
background-color: var(--white);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
padding: 0;
overflow-x: hidden;
}
.h1{
font-size: 56px !important;
}
.h2{
font-size: 36px !important;
}
.h3{
font-size: 24px !important;
}
.h4{
font-size:20px !important;
}
.h5{
font-size: 18px !important;
}
.h6{
font-size: 16px !important;
}
.font-lato {
font-family: var(--font-family-lato);
}
.p18 {
font-size: 18px !important;
font-weight: 400;
line-height: 1.5 !important;
}
.p16 {
font-size: 16px !important;
font-weight: 400;
line-height: 1.5;
}
.p14 {
font-size: 14px !important;
font-weight: 400;
line-height: 1.5 !important;
}
.p12 {
font-size: 12px !important;
font-weight: 400;
line-height: 1.5 !important;
}
.p-7{
padding: 5rem;
}
.mb{
margin-bottom: 70px;
}
.font-faily{
}
a {
text-decoration: none;
}
a:focus{
background-color: none;
}
li{
list-style: none;
}
ul{
margin: 0;
padding:0;
}
.gold{
color:#D4BF88;
}
.nav-link.active {
color:#D4BF88 !important;
}
.nav-link:hover {
color:#D4BF88 !important;
}
.grey{
color:#5A5A5A;
}
.bg-gold{
background-color:#D4BF88;
}
.bg-yellow{
background-color:#FDF0E0;
}
.bg-footer{
background-color: #1E1D23;
}
.bg-form{
background-color: #FDF0E0;
}
.container{
max-width: 1271px !important;
}
.min-container{
max-width: 1170px !important;
margin:auto;
}
.btn-radius {
border-radius: 34px;
}
.help-contact {
padding: 30px 40px;
height: 250px;
max-width: 520px;
}
.help {
padding: 30px 40px;
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
max-width: 733px;
height: 250px;
}
.sec-space{
padding: 80px 0;
}
.inner-impact {
padding: 40px 0;
}
.our-impact {
margin-left: 90px;
}
.service-image{
margin-bottom: 130px;
}
.inner-service {
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
border-radius: 5px;
bottom: -85px;
margin: 25px;
}
.link:hover {
color: #D4BF88 !important;
}
.schedule {
bottom: 87px;
background: white;
border-radius: 10px;
left: 50px;
}
.border-bottom-gray {
position: relative;
}
.border-bottom-gray::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 40%;
border-bottom: 2px solid #D4BF88;
}
.position-lg-absolute {
position: absolute;
}
.about.sec-space {
margin-top: 170px;
}
.help-support {
bottom: -420px;
}
.hours-border-bottom {
border-bottom: 1px solid #D9D9D9;
}
.card {
      position: relative;
      overflow: hidden;
      border: none;
      border-radius: 18px;
      max-width: 413px;
      max-height: 471px;
      margin-bottom: 10px;
      
    }

    .card img {
      transition: transform 0.3s ease-in-out;
    }

    .card:hover img {
      transform: scale(1.1);
    }

    .card-overlay {
      position: absolute;
      bottom: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: #D4BF88;
      display: flex;
      flex-direction: column;
      justify-content: left;
      transition: bottom 0.3s ease-in-out;
      border-radius: 18px;
      padding: 30px;
    }
   
    .card:hover .card-overlay {
      bottom: 0;
    }

    .card-overlay h4 {
      font-size: 20px;
      color: #1E1D23;
      font-weight: 700;
      margin-bottom: 10px;

    }
    .card-overlay h3 {
    color: #1E1D23;
    font-weight: 700;
    margin-bottom: 10px;
    margin-left: 0 !important;
}

    .card-overlay p {
      font-size:16px;
      color: #5A5A5A;
      font-weight: 400;
      line-height: 21px;
      margin-bottom: 15px;
    }
    .card-overlay ul {
      font-size:16px;
      color: #5A5A5A;
      line-height: 23px;
      margin-bottom: 15px;
    }
   

.card-overlay ul li {
    position: relative;
    list-style: none; /* Remove default bullet */
    padding-left: 20px; /* Adjust space for the custom bullet */
}

.card-overlay ul li::before {
    content: "•"; /* Custom bullet symbol */
    position: absolute;
    left: 0;
    top: 0;
}
    .card.hover img {
  transform: scale(1.1);
}

.card.hover .card-overlay {
  bottom: 0;
}

    .line-height{
    	line-height: 28px !important
    }
    .line-height-25{
    	line-height: 25px !important
    }
    .dr-details h3{
    	color: #1E1D23;
    	font-weight: 700;
    	margin-left: 20px;
    }
     .dr-details span{
    	color: #5A5A5A;
    	font-weight: 400;
    	font-size: 20px;
    	margin-left: 20px;
    }

.dr-nazia {
height: 55px;
border-radius: 100%;
}
.service-image img{
width: 100%;
}
.carousel-control-prev {
left: -180px !important;
}
.carousel-control-next {
right: -180px !important;
}
.Services h2{
margin-bottom:45px;
}
.make-appointment-btn:hover {
background-color: #D4BF88 !important; 
color: white !important;
}
.btn-gold:hover{
background-color: #000 !important; 
color: #D4BF88 !important;
border-color: #D4BF88 !important;
}
.btn-gold {
border: 2px solid transparent; /* or a color */
}
button, input, optgroup, select, textarea {
font-family: 'Lato', sans-serif !important;
}
@media (min-width: 320px) and (max-width: 575.89px) {
.sec-space {
padding: 20px;  
}
.consultation{
display: none!important;
}
.appointment-banner{
display: none!important;
}
.p16 {
font-size: 14px !important;
}
.hero-content h1 {
margin-top: 50px;
}
.our-impact {
text-align: center;
margin-left: 0;
margin-bottom: 30px;
}
.schedule {
bottom: 20px;
left: 7px;
}
.p-7 {
padding: 4rem 2rem;
}
.home-banner {
 background-image: none !important; 
 background-color: #2c2c2c !important; 
 height: auto !important;
}
.home-banner h1{
font-size: 30px !important;
}
.h2 {
font-size: 24px !important;
}
.h3 {
font-size: 16px !important; */
}
.about.sec-space {
margin-top: 0;
}
.mb {
margin-bottom: 30px !important;
}
.help {
padding: 20px;
}
.help-contact {
padding: 25px;
}
.consultation{
height: auto !important;
}
.carousel-control-prev {
display: none;
}
.carousel-control-next {
display: none;
}
.home-banner {
height: auto; /* Adjust height */
padding: 20px; /* Add padding for better layout */
}
.hero-content h1 {
font-size: 1.5rem;
}
.hero-content p {
font-size: 1rem;
}
.help-support {
flex-direction: column; /* Stack the support cards */
gap: 20px;
position: static; /* Remove absolute positioning */
}
.help, .help-contact {
width: 100%;
}
.about .row {
flex-direction: column-reverse; /* Stack the columns */
}
.about .col-md-5 {
margin-top: 20px;
}
.about h2 {
font-size: 1.75rem; /* Adjust font size */
}
.about p {
font-size: 0.875rem; /* Adjust font size */
}
.about .d-inline-flex {
flex-direction: column; /* Stack button and doctor info */
align-items: flex-start;
gap: 15px;
}
.about .d-inline-flex img {
width: 50px; /* Smaller image size */
height: 50px;
border-radius: 50%;
}
.help {
height: auto;
}
.min-container {
padding: 20px !important;
}
.p16 {
font-size: 14px !important;
}
button[type="submit"] {
font-size: 16px !important;
}
.h2 {
font-size: 20px !important;
}
/*.card-overlay h4 {  
    font-size: 18px !important;
}
.card-overlay p {
    font-size: 14px !important;
}
.card-overlay ul {
    font-size: 14px !important;
}
.dr-details span {
    margin-bottom: 15px;
    display: block;
}
.card-overlay {
    padding: 15px;
}*/
  .card-overlay {
    overflow-y: auto; /* Allow vertical scrolling */
    scrollbar-width: thin; /* Firefox: Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Firefox: Custom scrollbar colors */
  }

  .card-overlay::-webkit-scrollbar {
    width: 6px; /* Webkit: Scrollbar width */
  }

  .card-overlay::-webkit-scrollbar-track {
    background: #f1f1f1; /* Webkit: Scrollbar track color */
  }

  .card-overlay::-webkit-scrollbar-thumb {
    background: #888; /* Webkit: Scrollbar thumb color */
    border-radius: 10px;
  }

  .card-overlay::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Simulate hover for touch devices on click */
  .card.hover .card-overlay {
    bottom: 0;
  }
 .dr-details h3 {
        margin-left: 10px;
        margin-bottom: 30px;
    }
}
@media(min-width: 576px) and (max-width: 991.98px){
.sec-space {
padding: 20px;
}
.min-container {
padding: 20px !important;
}
.help {
height: auto;
}
.p-7 {
padding: 4rem;
}
.consultation{
height: auto !important;
}
.carousel-control-prev {
display: none;
}
.mb {
margin-bottom: 30px !important;
}
.home-banner h1{
font-size: 40px !important;
}
.h2 {
font-size: 28px !important;
}
.h3 {
font-size: 16px !important; */
}
.about.sec-space {
margin-top: 0;
}
.mb {
margin-bottom: 30px !important;
}
.help {
padding: 20px;
}
.help-contact {
padding: 25px;
}
.consultation{
height: auto !important;
}
.carousel-control-prev {
display: none;
}
.carousel-control-next {
display: none;
}
.home-banner {
height: auto; /* Adjust height */
padding: 20px; /* Add padding for better layout */
}
.hero-content h1 {
font-size: 1.5rem;
}
.hero-content p {
font-size: 1rem;
}
.help-support {
flex-direction: column; /* Stack the support cards */
gap: 20px;
position: static; /* Remove absolute positioning */
}
.about .row {
flex-direction: column-reverse; /* Stack the columns */
}
.about .col-md-5 {
margin-top: 20px;
}
.about h2 {
font-size: 1.75rem; /* Adjust font size */
}
.about p {
font-size: 0.875rem; /* Adjust font size */
}
.about .d-inline-flex {
flex-direction: column; /* Stack button and doctor info */
align-items: flex-start;
gap: 15px;
}
.about .d-inline-flex img {
width: 50px; /* Smaller image size */
height: 50px;
border-radius: 50%;
}
.card-overlay {
    overflow-y: auto; /* Allow vertical scrolling */
    scrollbar-width: thin; /* Firefox: Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Firefox: Custom scrollbar colors */
  }

  .card-overlay::-webkit-scrollbar {
    width: 6px; /* Webkit: Scrollbar width */
  }

  .card-overlay::-webkit-scrollbar-track {
    background: #f1f1f1; /* Webkit: Scrollbar track color */
  }

  .card-overlay::-webkit-scrollbar-thumb {
    background: #888; /* Webkit: Scrollbar thumb color */
    border-radius: 10px;
  }

  .card-overlay::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Simulate hover for touch devices on click */
  .card.hover .card-overlay {
    bottom: 0;
  }
.dr-details span {
    margin-bottom: 15px;
    display: block;
}
 .dr-details h3 {
        margin-left: 10px;
        margin-bottom: 30px;
    }
}
@media(min-width: 992px) and (max-width: 1400px){
.home-banner {
height: 1200px !important;
padding: 40px;
}
.help {
height: auto;
}
.carousel-control-prev {
display: none;
}
.carousel-control-next {
display: none;
}
.sec-space {
padding: 40px;
}
.about.sec-space {
margin-top: 0; 
}
.position-lg-absolute {
position: static !important; /* Or initial/relative, based on your requirement */
}
.card-overlay {
    overflow-y: auto; /* Allow vertical scrolling */
    scrollbar-width: thin; /* Firefox: Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Firefox: Custom scrollbar colors */
  }

  .card-overlay::-webkit-scrollbar {
    width: 6px; /* Webkit: Scrollbar width */
  }

  .card-overlay::-webkit-scrollbar-track {
    background: #f1f1f1; /* Webkit: Scrollbar track color */
  }

  .card-overlay::-webkit-scrollbar-thumb {
    background: #888; /* Webkit: Scrollbar thumb color */
    border-radius: 10px;
  }

  .card-overlay::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Simulate hover for touch devices on click */
  .card.hover .card-overlay {
    bottom: 0;
  }

}




