.heroSection {
  position: relative;
  /* padding-bottom: 2rem; */
  background: url("../images/bannertopbg.webp") no-repeat center center / cover;
  padding-top: 100px;
}
.header.scrolled .branding {
  background: #0f4a49;
  transition: background-color 0.3s ease, padding 0.3s ease,
    box-shadow 0.3s ease;
}
.header .branding {
  position: absolute;
}
.heroSection::after {
  content: "";
  display: none;
  clear: both;
}
.herobgimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.wrapper {
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: 60% 36%;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.slideContentLeft {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--spacing-lg);
}
.abtop{margin-top: 58px;}
.abcontent {
  width: 90%; margin-top: var(--spacing-lg);
}
.abcontent .mainheading{color: #fff; line-height: 52px;}
.profile{font-size:22px;color: #fff;font-weight: 600;padding-bottom: var(--spacing-sm);}
.degree{font-size:18px;color: #fff;font-weight: 600;padding-bottom: var(--spacing-sm);}
.abcontent p {
  font-size: 1rem;line-height: 1.8;
  font-weight: 400;
  color: #fff;padding-top: var(--spacing-sm);
}
.mtops{margin-top: var(--spacing-xl);}
.doctorpic{text-align: right;}
.doctorpic img{width: 100%;height: auto;}
.knowmoreabout{
  border-bottom: 1px solid #ddd;
}
.border_top{
  border-top: 1px solid #ddd;
}
.another{
  background-color: rgba(241, 244, 246, 1);
}
/* Start of knowmoreaboutdoctorsection */
.knowmoreaboutdoctorsection{text-align: center;padding-top: 60px; position: relative;z-index: 1;}
.knowmoreaboutdoctorsection h1 span{color: var(--accent-color);}
.knowmoreaboutdoctorsection p{font-size: 1rem;line-height: 1.8;}
.awardsection{background: rgba(246, 246, 246, 1);padding: 3rem 0%;}
.flexcontainers{display: flex;gap: 1.5rem;align-items: center;justify-content: center;}
.awardcolumn {overflow: hidden;flex: 0 1 calc(35% - 1.5rem);justify-content: center;position: relative;box-sizing: border-box; transition-duration: .2s;transition-property: transform; background-color: #fff;margin-top: var(--spacing-md);}

.wrapperbox {padding-top: 100px;margin-top: 0px;padding-bottom: 0px;max-width: 1000px;margin: 0 auto;}
.cards {top: 30px;position: sticky;border-radius: 20px;border: 2px solid var(--surface-color);text-align: center;min-height: 100% !important;
  box-shadow: 0px 10px 25px 0px #0000001A;background-color: white;color: #333;padding: 60px;border-radius: 10px;margin-bottom: 80px;}
.cards .carheading {padding: 0 0 20px 0; font-family: var(--heading-font);font-size: 28px;}
.ccircle{width: 72px; height: 72px; border-radius: 50%;display: flex;align-items: center;justify-content: center;position: absolute;
background-color: var(--surface-color);content: "";top: 0%;left: 50%;transform: translate(-50%, -50%);}
.ccircle img{filter: brightness(0) invert(1);}
.cards p span {color: var(--accent-color);}
.cards:nth-child(1n) {top: 165px;}
.cards:nth-child(2n) {top: 165px;}
.cards:nth-child(3n) {top: 165px;}
.cards:nth-child(4n) {top: 165px;}
.cards:last-child{margin-bottom: 0px;position: relative !important;top:-80px !important;}

.acgallerysection{background: #F1F4F6;padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);}
.gallery-scroll-wrapper {
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  width: 100%;
 overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
 .gallery-scroll-wrapper::-webkit-scrollbar {
    display: none;
 }

.acgalleryrow {
  display: flex;
  scroll-snap-align: start;
  gap: 1rem;
  min-width: 2000px;
  cursor: grab;
}

.acgalleryrow::-webkit-scrollbar {
  display: none;
}

.acgallerycolumn {
  flex: 0 0 calc(100% / 4.5);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border ease-in-out 0.3s;
}

.acgalleryrow {
  scroll-snap-type: x mandatory;
}

.acgallerycolumn img {
  width: 100%;
  height: auto;
  padding: 5px;
  scroll-snap-align: start;
  transition: border 0.3s ease-in-out;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
}

/* Start of whychoosedermacircles */
.whychoosedermacircles{padding: 3rem 0px;}
.whychoosedermacircleslist{ margin-top: 10px;}
.whychoosedermacircleslist ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.whychoosedermacircleslist ul li {
  flex: 0 0 48%;
  border-bottom:#ddd 1px solid;
  padding: 15px 0 15px 30px;position: relative;
}
.whychoosedermacircleslist ul li::before{
    content: "";
    position: absolute;
    left: 0;
    /* transform: translateY(-50%); */
    width: 22px;
    height: 22px;
background: url(../images/listicon.webp) no-repeat left center;
    background-size: 20px 20px, cover;
}

.certificatescroll {overflow-x: hidden;display: flex;flex-wrap: wrap;justify-content: space-between; margin-top: 1rem;}
.certificate {flex: 0 0 calc(33.33% - 1.5rem); }
.certificate img{width: 100%;padding: 8px; border: #ddd 2px solid;}
.certificate:hover img{border: var(--accent-color) 1px solid;}

/* Start of mission/vision section */
.missionvissionsection{background: rgba(241, 244, 246, 1);
  padding: var(--spacing-xl);
}

.missionvissionsection .mcontainer {
  display: flex;
  gap: 0px;
  padding: 10px;
  align-items: flex-start;
}
.leftsection{min-height:300px;overflow: hidden;}
.leftsection img {
  width: 100%;object-fit: cover;
  max-width: 600px;min-height: 300px;
}

.rightsection {
  display: flex;
  gap: 0px;
  align-items: flex-start;
  flex: 1;min-height: 554px;
  padding: 6rem 3rem 3rem 3rem;justify-content: space-between;
  background: #fff;border: 1px solid rgba(204, 204, 204, 1);border-left: 0px;
}
.accard {max-width: 320px;position: relative;padding: 0rem 1.5rem 0 1.5rem;}
.accard:first-child{padding-right: 0px;}
.vscroll p{height: 240px;overflow-y: auto;overflow-x: hidden; }
.vscroll p::-webkit-scrollbar {width: 6px;}
.vscroll p::-webkit-scrollbar-thumb {background-color: #999;border-radius: 3px;}
.vscroll p::-webkit-scrollbar-track {background-color: #f1f1f1;}

.cicon {
  width: 80px;
  height: 80px;
  background-color: var(--accent-color);
  border-radius: 50%;
  padding: 10px;display: flex;align-items: center;justify-content: center;
  object-fit: contain;
  margin-bottom: 20px;
}

.accard h3 {
  margin: 10px 0 10px;
  font-size: 22px; font-weight: 600;
  color: #1a1a1a;
}

.accard p {
  font-size: 18px;
  color: var(--default-color);
  line-height: 1.8;
}
.accard:first-child::before{ background-color: unset; width: 0px;}
.accard::before {
  width: 1px;
  content: "";
  position: absolute;
  top:0px; left:-30px;
  background-color: #ddd;
  height: 100%;
}

/* Optional Custom CSS */
.nav-tabs {margin: 0 auto;text-align: center;width: 100%;display: flex;justify-content: center;border-bottom: 0px;border-radius: 0px;}
.nav-tabs .nav-link{color: var(--default-color);border: 1px solid #ccc;margin: 0 5px; border-radius: 0px;}
.nav-tabs .nav-link.active {background-color: #d6b183; border-color: #d6b183;color: var(--default-color);position: relative;}
/* Bottom Arrow for Active Tab */
.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -8px; /* Distance below tab */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #d6b183; /* Same as active tab background */
}
.tab-content { margin-top: 2.5rem;}
    .card {
      border: none;
      box-shadow: 0px 7px 30px 0px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      border-radius: 0px;
      padding: 1.5rem;
    }
    .card:hover {
      transform: translateY(-5px);
    }
    .circle-placeholder {
      width: 90px;
      height: 90px;
      background-color: #f0f0f0;
      border-radius: 50%;
      margin: 0 0 15px 0px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .card-title {
      font-weight: bold;
      font-size: 1rem;
    }

/* Start of whydoctorsection */
.whyleft{text-align: center;width: 100%; margin: 0 auto;}
.whydoctorsection .content {
 background: rgba(241, 244, 246, 1);
padding: 40px;
}

.whydoctorsection .content .formheading {
  font-weight: 600;padding-bottom: var(--spacing-sm);
  font-size: 40px;
}
.whydoctorsection .content .mainheading{line-height: 1.4;}
.whydoctorsection .content .mainheading span{color: var(--accent-color);display: block;}
.whydoctorsection .content p{text-align: left;line-height: 1.9;}


/* Strat of area */
.servicecategorypage{padding: var(--spacing-lg 0px) 0px;}
.servicecategorypage .mainheading{text-align: center;}
.servicecategorypage .mainheading span{color: var(--accent-color);}
.flex-container {display: flex; flex-wrap: wrap;gap:1.5rem;justify-content: center;}
  .servicecategorypage{padding: 3rem 5%;}
  .serviceitem {border-radius: 1px;overflow: hidden;flex: 0 1 calc(33.333% - 1.5rem);justify-content: center;
    box-sizing: border-box; transition-duration: .2s;transition-property: transform;}
  .serviceitem .serviceimg {
      border-radius: 1px;
      overflow: hidden;position: relative;
    }

    .serviceitem .serviceimg img {
      transition: 0.6s;
    }

  .details {
      background: rgba(255, 255, 255, 1);
      padding: 22px 30px 30px;
      margin: -50px 40px 50px 0px;
      transition: all ease-in-out 0.3s;
      position: relative;
      border-top: rgba(227, 195, 157, 1) 5px solid;
      box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
      /* box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.08); */
    }
  .details .sheading {
      font-weight: 600;
      margin: 5px 0 10px 0;
      font-size: 20px;
      color: #222;text-decoration: none;
      transition: ease-in-out 0.3s;
    }

  .details div {
      color: color-mix(in srgb, var(--default-color), transparent 10%);
      line-height: 24px;
      font-size: 15px;
      margin-bottom: 12px;
    }

    .viewallbtn {
      background-color: transparent;
      color: #414042; font-size: 16px;
      padding: 6px 1.2rem;
      border: #a9a9a9 1px solid;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;cursor: pointer;
      transition: 0.3s;text-decoration: none;
    }
    .viewallbtn:hover {
      background-color:#F04E30;
      color: #fff;
      border: #F04E30 1px solid;
    }

  button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  font-family: inherit;
}

/* "Learn More" button specific styles */
button.learn-more {
  width: 10rem;
  height: auto;
}

/* Circular background styles */
button.learn-more .circle {
  transition: all 0.45s;
  position: relative;
  display: block;
  margin: 0;float: right;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--accent-color);
  border-radius: 1.625rem;
}

/* Icon base styles */
button.learn-more .circle .icon {
  transition: all 0.45s;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}

/* Arrow icon styles */
button.learn-more .circle .icon.arrow {
  transition: all 0.45s;
  right: 0.9rem;
  width: 1rem;
  height: 0.125rem;
  background: none;
}

/* Arrow icon before pseudo-element (creates arrowhead) */
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

/* Button text styles */
button.learn-more .button-text {
  transition: all 0.45s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 1.65rem 0 0rem;
  color: #1e1e1e;
  font-weight: 500;
  line-height: 0.6;
  text-align: center;
}

/* Hover effects for the button */
button:hover .circle {
  width: 100%;
  /* box-shadow: 0 0 10px tomato; */
}

button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(0rem, 0);
}

button:hover .button-text {
  color: #fff;
}

/* Start of Mini Desktop Screen */
@media screen and (max-width:1500px) and (min-width:1401px){
.rightsection {padding: 5rem 2rem 3rem 2rem;}
.accard {max-width: 310px;padding: 0rem 1.5rem 0 1.5rem;}
.accard::before { left: -10px;}
}

/* Start of Mini Desktop Screen */
@media screen and (max-width:1400.98px) and (min-width:1301px){
.rightsection {padding: 5rem 1rem 3rem 1rem;}
.accard {max-width: 300px;padding: 0rem 1rem 0 1rem;}
.accard::before { left: -10px;}
}

/* Start of Mini Desktop Screen */
@media screen and (max-width:1300.98px) and (min-width:1201px){
.leftsection img {max-width: 500px;}
.rightsection {padding: 2.2rem 1rem 2rem 1rem;min-height: 455px;}
.accard {max-width: 300px;padding: 0rem 1rem 0 1rem;}
.accard::before { left: -10px;}
.accard p {font-size: 16px;line-height: 1.6;}
}

/* Start of Mini Desktop Screen */
@media screen and (max-width:1200.98px) and (min-width:1101px){
.leftsection img {max-width: 500px;}
.rightsection {padding: 2.2rem 1rem 2rem 1rem;min-height: 455px;}
.accard {max-width: 235px;padding: 0rem 1rem 0 1rem;}
.accard::before { left: -10px;}
.accard p {font-size: 16px;line-height: 1.6;}
.cards .carheading {padding: 0 0 15px 0;font-size: 24px;}
.cards p{font-size: 16px;line-height: 1.6;}
.whychoosedermacircles p{font-size: 16px;}
.whychoosedermacircleslist ul li {flex: 0 0 48%;padding: 8px 0 8px 30px;font-size: 16px;}
.certificate {flex: 0 0 calc(33.33% - 1rem);}
}


/* Start of IPad Pro Screen */
@media screen and (max-width:1100.98px) and (min-width:992px){
.leftsection img {max-width: 350px;}
.rightsection {padding: 2.2rem 2rem 2rem 2rem;min-height: 400px; border-left: 1px solid rgba(204, 204, 204, 1);}
.accard {max-width: 400px;padding: 0rem 2rem 0 2rem;}
.accard::before { left: 10px;}
.accard p {font-size: 16px;line-height: 1.6;}
.cards .carheading {padding: 0 0 15px 0;font-size: 24px;}
.cards p{font-size: 16px;line-height: 1.6;}
.whychoosedermacircles p{font-size: 16px;}
.whychoosedermacircleslist ul li {flex: 0 0 48%;padding: 8px 0 8px 30px;font-size: 16px;}
.certificate {flex: 0 0 calc(33.33% - 1rem);}
.wrapperbox {max-width: 800px;}
.acgalleryrow {min-width: 1200px;}
.vscroll{width: 320px;}
.missionvissionsection .mcontainer {flex-direction: column;align-items: center;justify-content: center;}
}

/* Start of IPad Screen */
@media screen and (max-width:991.98px) and (min-width:768px){
.heroSection{background-color: var(--darkbluebg);}
.heroSection .none{display: none;}
.leftsection img {max-width: 300px;}
.rightsection {padding: 1.5rem;min-height: 400px; border-left: 1px solid rgba(204, 204, 204, 1);}
.accard {max-width: 280px;padding: 0rem 1.5rem 0 1.5rem;}
.accard::before { left: 10px;}
.accard p {font-size: 16px;line-height: 1.6;}
.cards .carheading {padding: 0 0 15px 0;font-size: 24px;}
.cards p{font-size: 16px;line-height: 1.6;}
.whychoosedermacircles p{font-size: 16px;}
.whychoosedermacircleslist ul {gap: 5px;display: block;}
.whychoosedermacircleslist ul li {padding: 8px 0 8px 30px;font-size: 16px;}
.certificate {flex: 0 0 calc(33.33% - 1rem);}
.wrapperbox {max-width: 580px;}
.acgalleryrow {min-width: 1024px;}
.vscroll{width: 280px;}
.missionvissionsection .mcontainer {flex-direction: column;align-items: center;justify-content: center;}
.abcontent {width: 100%;margin-top: 0;}
.abcontent .mainheading {line-height: 44px;}
.mtops {margin-top: var(--spacing-md);}
.wrapperbox {padding-top: 60px;}
}

/* Start of Mini IPad Screen */
@media screen and (max-width:767px) and (min-width:600px){
.heroSection{ overflow: hidden;background-color: var(--darkbluebg);}
.heroSection .row{display: flex;flex-direction: column-reverse;}
.abcontent {margin-top: 1.5rem;text-align: center;width: 100%;}
.leftsection img {max-width: 300px;}
.acgallerysection {padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);}
.rightsection {padding: 1.5rem;min-height: 400px; border-left: 1px solid rgba(204, 204, 204, 1);}
.accard {max-width: 240px;padding: 0rem 1.5rem 0 1.5rem;}
.accard::before { left: 10px;}
.accard p {font-size: 16px;line-height: 1.6;}
.cards .carheading {padding: 0 0 15px 0;font-size: 24px;}
.cards p{font-size: 16px;line-height: 1.6;}
.whychoosedermacircles {padding: 2rem 0px;}
.whychoosedermacircles p{font-size: 16px;}
.whychoosedermacircleslist ul {gap: 5px;display: block;}
.whychoosedermacircleslist ul li {padding: 8px 0 8px 30px;font-size: 16px;}
.certificate {flex: 0 0 calc(33.33% - 1rem);}
.wrapperbox {max-width: 580px;}
.acgalleryrow {min-width: 1024px;}
.vscroll{width: 240px;}
.missionvissionsection {padding: var(--spacing-lg);}
.missionvissionsection .mcontainer {flex-direction: column;align-items: center;justify-content: center;}
.abcontent {width: 100%;margin-top: 1rem;}
.abcontent .mainheading {line-height: 44px;}
.mtops {margin-top: var(--spacing-md);justify-content: center;}
.wrapperbox {padding-top: 60px;}
.cards:nth-child(1n) {top: 130px;}
.cards:nth-child(2n) {top: 130px;}
.cards:nth-child(3n) {top: 130px;}
.cards:nth-child(4n) {top: 130px;}
}


/* Start of Iphone/Mobile Screen */
@media screen and (max-width:599.98px) and (min-width:320px){
.heroSection{background-color: var(--darkbluebg);overflow: hidden;padding-top: 90px;}
.heroSection .row{display: flex;flex-direction: column-reverse;}
.abcontent {margin-top: 1.5rem;text-align: center;width: 100%;}
.mtops {margin-top:12px;}
.doctorpic{text-align: center;}
.doctorpic img{width: 94%;}
.abcontent p{font-size: 15px;line-height: 1.7; margin-bottom: 0px;}
.herobgimage {height: auto;}
.breadcrumb{justify-content: center;}
.abcontent .mainheading{ line-height: 32px;}
.knowmoreaboutdoctorsection {padding-top: 0rem;}
.knowmoreaboutdoctorsection p {font-size: 15px;line-height: 1.7;margin-bottom: 0px;}
.wrapperbox {padding-top: var(--spacing-xl);margin-top: 25px;padding-bottom: 0px;max-width: 90%;}
.cards {top: 30px;padding: 50px 15px 15px 15px;margin-bottom: 50px;font-size: 15px;}
.cards .carheading {padding: 0 0 10px 0;font-size: 18px;}
.cards:nth-child(1n) {top: 130px;}
.cards:nth-child(2n) {top: 130px;}
.cards:nth-child(3n) {top: 130px;}
.cards:nth-child(4n) {top: 130px;}
.cards:last-child{margin-bottom: 0px;position: relative !important;top:-96px !important;}
.acgalleryrow {padding-bottom: 0px;gap: 0px 8px;min-width: 100%;}
.gallery-scroll-wrapper {overflow-x: auto;width: 100%;}
.gallery-scroll-wrapper::-webkit-scrollbar{display: none;}

.acgallerycolumn {flex: 0 0 calc(100% / 2.2);gap: 8px;}
.acgallerycolumn img {width: 100%;height: auto;display: block;object-fit: cover;padding: 3px;}
.acgallerysection {padding: var(--spacing-lg) 0 var(--spacing-lg) 0;}
.acgallerysection.row{padding-left: 0px !important; padding-right: 0px !important;}
.whychoosedermacircles {padding:1rem 0px;}
.whychoosedermacircles p{line-height: 1.7;font-size: 15px;margin-bottom: 10px;}
.whychoosedermacircleslist ul{margin-bottom: 0px;display: block;}
.whychoosedermacircleslist ul li {padding: 8px 0 8px 21px;font-size: 15px;}
.whychoosedermacircleslist ul li::before {background-size: 16px 16px, cover;width: 20px;}
.certificatescroll {display: flex;flex-wrap: nowrap;overflow-x: auto;gap: 8px;scroll-behavior: smooth;padding-bottom: 8px;}
.certificate {flex: 0 0 auto;width: 88%;max-width: auto;}
.missionvissionsection .mcontainer {display: block;}
.rightsection {
    display: block;
    gap: 0px;
    align-items: flex-start;
    flex: 1;
    min-height: auto;
    padding: 1rem;
    justify-content: space-between;
    background: #fff;
    border: 1px solid rgba(204, 204, 204, 1);
}
.missionvissionsection {padding: 10px;}
.accard::before{display: none;}
.accard {max-width: 100%;padding: 0rem 0rem 0 0rem;}
.accard h3 {margin: 10px 0 5px 0px;font-size: 20px;}
.accard p {font-size: 15px; line-height: 1.7;}
.vscroll p {height: auto;overflow-y: unset;overflow-x: unset;}
.abtop {margin-top: 15px;}
}