/* Start of Hero Section Styles */
.heroscreenshot {
  min-height: 600px;
  position: relative;
}
.heroscreenshot .carousel-item {
  position: relative;
  min-height: 600px;
}
.heroscreenshot .carousel-item .row {
  position: relative;
  z-index: 1;
}
.herobgscreenshot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: top;
}
.heroheadline {
  font-size: 60px;
  color: #173f3f;
  font-family: var(--font-marcellus);
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.02;
  max-width: 500px;
}
.herodesc {
  font-size: 17px;font-weight: 500;
  color: var(--default-color);
  max-width: 420px;
}
.btnappointmentbtn-appointment {
  background: #fff;
  color: #5cc8c1;
  border: 2px solid #5cc8c1;
  border-radius: 0;
  font-weight: 600;
  padding: 0.7rem 2rem 0.7rem 1.5rem;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(44,183,183,0.08);
  transition: background .2s, color .2s;
}
.btnappointment:hover {
  background: #5cc8c1;
  color: #fff;
}
.btnappointment .arrow {
  font-size: 1.3em;
  margin-left: 0.5em;
  vertical-align: middle;
}
.heroimgsliderwrap { width: 560px; max-width:100%; }
.carousel-inner {
  width: 100%;
}
.carousel-indicators {
  justify-content: center;
  margin-top: 1.2rem;
  position: static;
}
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #92C7CC;
  border: none;
  margin: 0 6px;
  opacity: 1;
  transition: background .2s;
}
.carousel-indicators .active {
  background: #45C0AC;
}
.heroscreenshot .appointmenttop,
.heroscreenshot .secondappointmenttop,
.heroscreenshot .thirdappointmenttop{
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20;
}

.heroscreenshot .appointmenttop .appointmentbox,
.heroscreenshot .secondappointmenttop .appointmentbox,
.heroscreenshot .thirdappointmenttop .appointmentbox{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
}
.heroimgsecondary {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  position: absolute;
  left: 80px;
  top: 90px;
  transform: rotate(8deg);
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(44,183,183,0.13);
}
.contentbox{padding: 2rem 0px 1rem 16%;}
.herorightinfo {
  min-width: 290px;
  padding-right: 24%;
  display: flex;flex-direction: column;
  justify-content: flex-end;
}
.googlereviews{
text-align: right;padding-right: 25%;
}
.googlereviews .stars {
  color: #fbbc04;
  font-size: 1.1em;
  letter-spacing: 1px;
}
.btnsocial {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid #42858B;
  color: #42858B;
  border-radius: 30px;
  font-size: 14px; font-weight: 600;
  padding: 0.86em 1.5em;
  margin: 5px 0px;width: 85%;
  display: flex;justify-content: center;
  align-items: center;
  gap: 0.5em;float: right;
  transition: background .2s, color .2s;
  box-shadow: 0px 15px 15px 0px #0000000D;
}
.btnsocial:hover {
  background: #5cc8c1;
  color: #fff;
}
.sliderrow{position: relative; min-height: 600px;}
.sliderrow > .row{position: static !important;}
.heroscreenshot .sliderrow .secondappointmenttop{
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 50 !important;
}
.heroscreenshot .sliderrow .secondappointmenttop .appointmentbox{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}
.bannercolumn{padding-left: 12%;padding-top: 50px;display: flex;flex-direction: column;align-items: flex-end;padding-bottom: 5rem;padding-right: 4rem;}
.bannerheading{font-size: var(--font-xxl);font-family: var(--font-marcellus);font-weight: 400;padding-bottom: var(--spacing-xl);line-height: 1.02;}
.bannercolumn p{font-size: 17px; font-weight: 500; color: var(--default-color);line-height: 1.8;}
.trustedtop{color:var(--default-color);font-size: 14px;letter-spacing: 6%;font-weight: 600;text-transform: uppercase;}
.trustedtop br{display: none;}
.bannersocialtop{margin-top:5rem;text-align: right;}
.consultbox {
  background: none; margin-top: 70px;
  font-size: 1.05rem;
}
.contactnumbers {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  margin-left: auto;
  padding: 0px 72px 0px 10px;
  background: transparent;
  color: #1e1e1e;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  overflow: hidden;
}

.contactnumbers .contacttext {
  display: block;
   color: #1e1e1e;
  margin: 0;
}

.contactnumbers::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #45C0AC;
  background-image: url("../images/home/bannerphone.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
.fwtext{font-size: 24px;font-family: var(--font-marcellus); font-weight: 400;line-height: 1.2;
  color: #1e1e1e;}

/* Hero image placements and appointment/consult elements */
.heroimgsliderwrap { width: 560px; max-width:100%; margin-left:auto; margin-right:auto;position: relative;}
.heroimgstack { position: relative; width:100%; height:560px; margin: 0 auto; }
.heroimgmain{
  position:relative;
width:608px;
  height:560px;
  object-fit:cover;
  z-index:3;
}
.heroimgsecondary{
  position:absolute;
  width:320px;
  height:220px;
  object-fit:cover;
  border-radius:8px;
  left:210px;
  top:110px;
  transform:rotate(12deg);
  border:8px solid #fff;
  box-shadow:0 12px 36px rgba(44,183,183,0.12);
  z-index:2;
}
.carousel-inner{position: relative;}
.carousel-indicators { justify-content:center; margin-top:0rem;position: absolute !important;margin-bottom: 25px;}

/* Left CONSULT vertical tab */
.consulttab{
  position:relative;
  flex:0 0 90px;
  width:90px;
  height:100%;
  background: #E7F4FA;
  color: #98A0B0;
  font-size:12px;
  font-weight:500;
  letter-spacing:10%;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Appointment box overlapping left */
.appointmentbox{
  position:absolute;
  left:12px;
  bottom:0px;
  display:flex;
  align-items:center;
  background:#fff;
  width:460px;
  height:90px;
  box-shadow: 0px 5px 30px 0px #0000000D;
  z-index:9;
}
.appointmenttext{ flex:1; color:#44bfb2; font-weight:600;letter-spacing: 2px;font-size: 16px;
  padding:0 20px 0 30px;text-transform: uppercase;line-height:1;white-space:nowrap;}
.appointmentarrow{ background: #45C0AC;color:#fff; width:80px; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.6rem }

/* Social and phone tweaks */
.btn-social{ border-radius:28px; padding:.45rem .9rem; background:#fff; border:1px solid #dff7f5; color:#5cc8c1; display:inline-flex; align-items:center; gap:.5rem }
.btn-social img{ border-radius:50%; background:#fff; padding:4px }
.phone-box{ display:inline-block; background:#3fc3b7; color:#fff; padding:.6rem; border-radius:6px; margin-left:8px }

@media (max-width:991px){
.appointmentbox{ left:20px; width:260px }
.appointmenttext{ font-size:12px; letter-spacing:1px; padding-left:14px; }
.statsbox{ flex-direction:column; max-width:320px }
.statstitle{ font-size:20px }
}

@media (max-width: 991px){
  .heroscreenshot .carousel-item{min-height: 100%;}
  .sliderrow{min-height: 100dvh;}
  .heroscreenshot .appointmenttop .appointmentbox,
  .heroscreenshot .secondappointmenttop .appointmentbox,
  .heroscreenshot .thirdappointmenttop .appointmentbox{left: 20px;}
}

@media (max-width: 767px){
  .heroscreenshot .carousel-item{min-height: auto;}
  .sliderrow{min-height: auto;}
  .heroscreenshot .appointmenttop,
  .heroscreenshot .secondappointmenttop,
  .heroscreenshot .thirdappointmenttop{position: relative;}
  .heroscreenshot .firstsliderrow{min-height: 100% !important; }
  .heroscreenshot .firstsliderrow .appointmenttop{
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
  }
  .heroscreenshot .sliderrow{min-height: 100% !important;}
  .heroscreenshot .sliderrow .secondappointmenttop,
  .heroscreenshot .sliderrow .thirdappointmenttop{
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Stats section (screenshot) */
.statssection{ margin-right: 5.7%; margin-left: 5.7%;padding: 3rem 5%; background: var(--grey-bg);margin-bottom: 60px;}
.statssection p.para{font-size: 17px;line-height: 1.8;font-weight: 500;color: var(--secondary-color);margin-bottom: 0; margin-top: 1rem;}
.statstitle{ font-family:'Playfair Display', serif; font-size:28px; max-width:940px; margin:0 auto; color:#173f3f; line-height:1.4 }
.statstitle .accent{ color:var(--brand); }
.statsbox{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items:stretch; justify-content:space-between;gap:25px; max-width:940px; margin-top:35px;padding:0 }
.statpanel{ flex:1; background:#fff; padding:30px; display:flex;border: 1px solid #C8D8DF;
  align-items:center; justify-content:space-between;transition: all 0.3s ease;}
.statpanel:hover{transform: translateY(-5px);}
.statleft .statnum, .statcenter .statnum{color:var(--brand);font-size:50px; font-weight:600; }
.statleft .statlabel, .statcenter .statlabel{color:#767676;letter-spacing: 5%; font-weight: 500;text-transform: uppercase;font-size:16px;text-align: left; }
.statright{ display:flex; gap:12px; padding:16px 20px }
.statright .statlabel{color:#767676;letter-spacing: 5%; font-weight: 500;text-transform: uppercase;font-size:16px;text-align: left; }
.statbadge{ width:64px; height:64px; object-fit:contain }


/* Skin Treatments section styles */
.skinsection {
  position: relative;
  padding: 60px 5% 0px 5%;
  overflow: hidden;
  min-height: 680px;
  isolation: isolate;
}

.skinsection .bannerImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

.skinsection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 34, 34, 0.5) 0%, rgba(34, 34, 34, 0.18) 48%, rgba(34, 34, 34, 0.12) 100%);
  z-index: -1;
}

.skinlayout {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.skin-left-panel {
  width: min(100%, 44%);
  position: relative;
  z-index: 4;
  padding: 70px 70px;
  box-shadow: 0px 5px 30px 0px #00000012;
}

.skin-left-panel h2 {
  font-family: var(--font-marcellus);
  font-weight: 400;
  font-size: 60px;
  line-height: 0.92;
  color: #1f1f1f;
  margin-bottom: 12px;
}

.skin-left-panel .small-title {
  display: block;
  font-size: 45px;
  letter-spacing: 0.02em;
  margin-top: 6px;
}

.skin-left-panel p {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 500;
  color: var(--secondary-color);
  margin-bottom: 0;
}

.skinactions {
  display: flex;
  align-items: center;
  gap: 0px;
}

.btn-appointment-outline {
  border: 1px solid #61d2c8;
  color: #61d2c8;
  background: #fff;
  padding: 10px 18px;
  border-radius: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skin-visual {
  position: absolute;
  right: 0;
  bottom: -20%;
  transform: translateY(-50%);
  width: min(60vw, 59%);
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  z-index: 9;
  overflow: hidden;
}

.skin-main {
  width: 100%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  transition: background-image 0.35s ease;
}

.skin-thumb-track {
  position: relative;
  right: auto;
  bottom: auto;
  display: flex;
  gap: 30px;
  z-index: 9999;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.skin-thumb {
  width: 246px;
  height: 305px;
  border: 0;
  padding: 0;
  background: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  cursor: grab;
}

.skin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.skin-thumb .treatment-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 26px 12px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.78) 100%);
  color: #fff;
  font-family: var(--font-marcellus);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.skin-thumb:hover img,
.skin-thumb.is-active img {
  transform: scale(1.06);
}
/* .skin-thumb.is-active {
  outline: 1px solid rgba(255, 255, 255, 0.9);
} */

.skinsection .skin-nav {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fdfdfd;
  color: #a6a6a6;
  font-size: 30px;
  line-height: 1;
  margin-left: 12rem;
  box-shadow: none;
}

/* Body Treatments section styles */
.bodysection{ position:relative; padding:60px 0% 60px 0%; background:#fff }
.body-left-panel{padding:0px 0px 20px 0px;position:relative;display: flex;gap: 50px;padding-left: 5%;padding-right: 5%;}
.body-left-panel p{ font-size: 17px;color: var(--secondary-color);line-height: 1.8;font-weight: 500;}
.bodytitle{ font-family:var(--font-marcellus); font-size:100px; margin:0; line-height:1.1; color:#111 }
.bodytitle .smalltitle{ font-family: var(--font-marcellus); font-size:55px; display:block; letter-spacing:1px }
.body-right-img{ width:100%;background-size:cover; background-position:center; box-shadow:0 8px 28px rgba(0,0,0,0.08) }
.body-thumbs{ gap:25px; display:flex; align-items:flex-start; width: 750px;}
.bodyleftpanel{padding:0px 0px 20px 0px;position:relative;display: flex;gap: 20px;padding-left: 4%;}
.bodyrow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(46%, 48%);
  align-items:center;
  gap:20px;
}
.bodythumbsleft{min-width:0;}
.bodythumbsright{min-width:0;}

.body-thumbs.carousel-inner{
  display:block;
  width:100%;
  max-width:1130px;
  overflow:hidden;
}
.body-thumbs.carousel-inner .carousel-item{
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  cursor: grab;
}
.body-thumbs-row{display:flex;gap:15px;align-items:flex-start;}
.thumb-card{ width:220px;cursor: grabbing; flex:0 0 220px;transition: all 0.3s ease; background:transparent; overflow:hidden; position:relative }
.thumb-card:hover{ transform: translateY(-5px);}
.body-thumbs.carousel-inner .thumb-card{
  width: calc((100% - 50px) / 3);
  flex: 0 0 calc((100% - 50px) / 3);
  cursor: grab;
}
.thumb-card img{ width:100%;object-fit:cover; display:block;height: 280px;}
.thumb-card .treatment-caption{ position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.65)); color:#fff; font-weight:400; font-size:24px;text-align: center; }
.thumb-nav{ width:64px; height:64px; border-radius:50%; border:2px solid #e9eef0; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.08); font-size:30px; margin-left:30px }
.spacetop{margin-top: 5rem;}
.body-middle{ padding-left:36px }
.body-middle .text-muted{ color:#6b6b6b; line-height:1.7 }

/* View details button style matching screenshot (teal with subtle offset outline) */
.view-details{
  background:var(--brand);
  color:#fff;
  padding:.6rem 1.1rem;
  font-weight:800;
  display:inline-block;
  position:relative;
  border:2px solid var(--brand);
}
.view-details::after{
  content:'';
  position:absolute;
  left:-12px;
  top:10px;
  width:100%;
  height:100%;
  border:2px solid rgba(92,200,193,0.3);
  z-index:-1;
}

/* HAIR section styles (screenshot replica) */
.hairsection {
  position: relative;
  overflow: hidden;
  padding: 100px 5% 0px 5%;
}

.hairsection .bannerImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  object-position: top center;
}

.hairsection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 21, 19, 0.28);
  z-index: -1;
}

.hair-layout {
  position: relative;
}

.hair-right-panel {
  width: min(100%, 620px);
  min-height: 560px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  padding: 64px 52px;
}

.hair-right-panel h2 {
  font-size: 68px;
  line-height: 0.92;
  color: #1f1f1f;
  font-family: var(--font-marcellus);
  margin-bottom: 10px;
}

.hair-right-panel .small-title {
  display: block;
  font-size: 52px;
  margin-top: 6px;
}

.hair-right-panel p {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 500;
  color: var(--secondary-color);
}

.hair-thumbs {
  position: absolute;
  left: 20px;
  bottom: 80px;
  gap: 25px;
  z-index: 2;
}


.hair-thumbs .thumbcard {
  width: 280px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.hair-thumbs .thumbcard:hover{
  transform: translateY(-5px);
}

.hair-thumbs .thumbcard img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.hair-thumbs .treatment-caption {
  font-family: var(--font-marcellus);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  height: 76px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));
  padding: 16px 14px 10px;
  text-align: center;
  margin-top: -76px;
  position: relative;
}

.hair-count {
  position: absolute;
  left: 230px;
  bottom: 20px;
  background: #2f9ef4;
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  padding: 7px 18px;
  border-radius: 4px;
  z-index: 3;
}

/* Personalised treatments age tab section */
.personalisedsection {
  background: #fff;
  padding: 3rem 0% 6rem 5%;
}

.personalised-wrap {
  margin: 0 auto;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.personalised-image-wrap {
  width: 50%;
  position: relative;
  z-index: 1;
}

.personalised-image {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.personalised-card {
  width: 54%;
  margin-left: -50px;
  margin-bottom: -40px;
  background: #fff;
  box-shadow: 0px 10px 70px 0px #0000001F;
  position: relative;
  z-index: 2;
}

.personalised-inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 540px;
}

.age-tabs {
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-right: 1px solid #efefef;
}

.age-tab {
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--default-color);
  font-family: var(--font-montserrat);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}

.age-tab.is-active {
  background: #56c5b8;
  color: #fff;
  font-weight: 700;
}

.age-tab.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #56c5b8;
}

.personalised-content {
  padding: 30px 32px 28px;
}

.personalised-content h2 {
  margin: 0 0 12px 0px;
  font-family: var(--font-marcellus);
  font-size: 45px;
  line-height: 1.2;
  color: var(--default-color);
}

.personalised-content p {
  margin: 0 0 2rem 0px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--secondary-color);
  max-width: 520px;
}

.personalised-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.personalised-links a {
   color: var(--default-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  font-family: var(--font-marcellus);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.personalised-links a:hover {
  color: #56c5b8;
}

/* Why Patients Choose section */
.whysection{ background:#f4fbfb;}
.whytitle{ font-family:var(--font-marcellus); font-size:32px; margin:8px 0 6px; color:#222 }
.whysubtitle{ color:var(--brand); font-size:22px; margin-bottom:10px }
.whycards{margin-top: 3rem; gap:25px; flex-wrap:nowrap; overflow:visible;display: flex;align-items: stretch;justify-content: space-between;margin-bottom: 3rem;}
.whycard{ background:#fff;border: 1px solid #45C0AC; padding:30px 30px;
  transition: all 0.3s ease;width:270px; box-shadow:0 6px 18px rgba(0,0,0,0.03);
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  margin-left:-28px }
.whycard:hover{transform: translateY(-5px) !important;}
.whycard:first-child{ margin-left:0 }
.whyicon{ margin-bottom:18px }
.whycard p{ margin:0; color:#1e1e1e; font-size:17px; line-height:1.8;font-weight: 500; }

/* vertical offsets to mimic screenshot stagger */
.whycard:nth-child(1){ transform:translateY(40px) }
.whycard:nth-child(2){ transform:translateY(-16px) }
.whycard:nth-child(3){ transform:translateY(40px) }
.whycard:nth-child(4){ transform:translateY(-8px) }
.whycard:nth-child(5){ transform:translateY(40px) }


/* Start of Mini desktop Screen */
@media screen and (max-width: 1500.98px) and (min-width: 1401px) {
.skin-thumb-track {gap: 20px;}
.skin-thumb {width: 240px;height: 300px;}
}

/* Start of Mini desktop Screen */
@media screen and (max-width: 1400.98px) and (min-width: 1300px) {
.btnsocial{width: 90%;}
.skin-thumb-track {gap: 20px;}
.skin-thumb {width: 220px;height: 280px;}
.skin-visual {width: min(60vw, 58%);}
.thumb-card {width: 200px;flex: 0 0 200px;}
.body-thumbs {gap: 20px;}
.hair-right-panel {width: min(100%, 560px);padding: 54px 40px;}
.personalised-content{padding: 30px 60px 30px 60px;}
}

/* Start of Mini desktop Screen */
@media screen and (max-width: 1300.98px) and (min-width: 1200px) {
.heroheadline {font-size: 50px; margin-bottom: 12px;}
.heroscreenshot {min-height: 500px;}
.heroscreenshot .carousel-item {min-height: 500px;}
.sliderrow {min-height: 500px;}
.heroimgstack {width: 100%;height: 500px;}
.bannercolumn {padding-left: 8%;}
.bannerheading {font-size: 50px;padding-bottom:15px;}
.btnsocial{width: 95%;}
.contentbox {padding: 0rem 0px 1rem 12%;}
.contactnumbers {margin-top: 10px;padding: 0px 72px 0px 10px;font-size: 16px;}
.appointmentbox{height: 80px;}
.herodesc {font-size: 16px;}
.mainHeading br{display: none;}
.skin-thumb-track {gap: 20px;}
.skin-thumb {width: 220px;height: 280px;}
.skin-left-panel {padding: 40px 40px;}
.statssection {margin-right: 3.5%;margin-left: 3.5%;padding: 3rem 3%;margin-bottom: 2rem;}
.skinsection .skin-nav {margin-left: 10rem;}
.skinsection {min-height: 648px;padding:3rem 3% 0px 3%;}
.skin-left-panel h2 {font-size: 50px;}
.bodysection {padding: 40px 0% 40px 0%;}
.body-left-panel {gap: 30px;padding-left: 3%;padding-right: 3%;}
.bodytitle {font-size: 80px;}
.bodytitle .smalltitle {font-size: 50px;}
.thumb-card .treatment-caption {padding: 12px;font-size: 20px;}
.hairsection {padding: 80px 3% 0px 3%;}
.hair-thumbs .thumbcard { width: 240px;}
.hair-thumbs .treatment-caption {font-size: 20px;padding: 12px 12px 10px 12px;}
.hair-right-panel {padding: 50px 40px;}
.hair-thumbs {left: 10px;}
.hair-right-panel h2{font-size: 50px;}
.hair-right-panel .small-title {font-size: 40px;}
.whycard {padding: 15px;}
.personalisedsection {padding: 2rem 3% 5rem 3%;}
.personalised-content h2 {font-size: 40px;}
.testimonials-title {font-size: 40px;}
.testimonialssection {padding: 3rem 3% 3rem 3%;}
}

/* Start of Mini desktop Screen */
@media screen and (max-width: 1200.98px) and (min-width: 1101px) {
.heroheadline {font-size: 40px; margin-bottom: 12px;}
.heroscreenshot {min-height: 440px;}
.heroscreenshot .carousel-item {min-height: 440px;}
.sliderrow {min-height: 440px;}
.heroimgstack {width: 100%;height: 440px;}
.bannercolumn {padding-left: 8%;padding-top: 40px;padding-bottom: 3rem;padding-right: 2rem;}
.bannerheading {font-size: 40px;padding-bottom:15px;}
.btnsocial{width:100%;padding:0.76rem 1rem}
.contentbox {padding: 0rem 0px 1rem 12%;}
.contactnumbers {margin-top: 10px;padding: 0px 72px 0px 10px;font-size: 16px;}
.appointmentbox{height: 80px;}
.herodesc {font-size: 16px;line-height: 1.6;}
.bannercolumn p {font-size: 16px;line-height: 1.6;}
.mainHeading br{display: none;}
.heroheadline {font-size: 40px; margin-bottom: 12px;}
.bannercolumn {padding-left: 8%;}
.bannerheading {font-size: 40px;padding-bottom:15px;}
.btnsocial{width: 95%;}
.contentbox {padding: 0rem 0px 1rem 12%;}
.contactnumbers {margin-top: 10px;padding: 0px 72px 0px 10px;font-size: 16px;}
.appointmentbox{height: 80px;}
.herodesc {font-size: 16px;}
.mainHeading br{display: none;}
.googlereviews {padding-right: 8%;}
.bannersocialtop {margin-top: 3rem;}
.consultbox {margin-top: 40px;font-size: 1rem;}

.statssection {margin-right: 3.5%;margin-left: 3.5%;padding: 2rem 2%;margin-bottom: 2rem;}
.skin-thumb-track {gap: 15px;}
.skin-thumb {width: 190px;height: 250px;}
.skin-left-panel {padding: 30px 30px;}
.skin-visual {width: min(53vw, 630px);}
.statssection {margin-right: 3.5%;margin-left: 3.5%;padding: 3rem 3%;margin-bottom: 2rem;}
.skinsection .skin-nav {margin-left: 8rem;}
.skinsection {min-height: 600px;padding:2rem 3% 0px 3%;}
.skin-left-panel h2 {font-size: 40px;}
.skin-left-panel .small-title {font-size: 35px;}
.skin-thumb .treatment-caption {padding: 20px 12px 14px 12px;font-size: 20px;}
.skin-left-panel p {font-size: 16px;line-height: 1.6;}
.bodysection {padding: 40px 0% 40px 0%;}
.body-left-panel {gap: 30px;padding-left: 3%;padding-right: 3%;}
.bodytitle {font-size: 60px;}
.bodytitle .smalltitle {font-size: 35px;}
.thumb-card .treatment-caption {bottom: -7px;}
.body-left-panel p {font-size: 16px;line-height: 1.6;}
.thumb-card .treatment-caption {padding: 12px;font-size: 20px;}
.hairsection {padding: 40px 3% 0px 3%;}
.hair-thumbs .thumbcard { width: 240px;}
.hair-thumbs .treatment-caption {font-size: 20px;padding: 12px 12px 10px 12px;}
.hair-right-panel {padding: 30px 30px;min-height: 440px;}
.hair-thumbs {left: 10px;bottom: 40px;}
.hair-right-panel h2{font-size: 40px;}
.hair-right-panel p {font-size: 16px;line-height: 1.6;}
.hair-right-panel .small-title {font-size: 35px;}
.whycard {padding: 15px;}
.whycard p {font-size: 16px;line-height: 1.6;}
.whycards {margin-top: 2rem;gap: 28px;margin-bottom: 2rem;}
.age-tabs {padding: 25px 0;gap: 10px;}
.personalisedsection {padding: 2rem 3% 2rem 3%;}
.personalised-inner {grid-template-columns: 100px 1fr;min-height: 480px;}
.personalised-card {margin-bottom: 30px;}
.personalised-content h2 {font-size: 35px;}
.personalised-content p {margin: 0 0 1rem 0px;font-size: 16px;}
.personalised-links a {font-size: 16px;line-height: 1.6;}
.personalised-content {padding: 25px 25px 20px 25px;}
.testimonials-title {font-size: 35px;}
.testimonialssection {padding: 2rem 3% 2rem 3%;}
.testimonials-watermark {left: -90px;font-size: clamp(50px, 13vw, 220px);}

}

/* Start of IPad Pro Screen */
@media screen and (max-width: 1100.98px) and (min-width: 992px) {
  /* .whycards{ flex-wrap:wrap; justify-content:center }
  .whycard{ margin:10px; transform:none } */
  .heroheadline {font-size: 35px; margin-bottom: 12px;}
.heroscreenshot {min-height: 400px;}
.heroscreenshot .carousel-item {min-height: 400px;}
.consulttab{font-size: 11px;}
.sliderrow {min-height: 400px;padding-right: 6%;}
.heroimgstack {width: 100%;height: 400px;}
.bannercolumn {padding-left: 6%;padding-top: 20px;padding-bottom: 1.5rem;padding-right: 2rem;}
.bannerheading {font-size: 35px;padding-bottom:15px;}
.btnsocial{width:100%;padding:0.76rem 1rem}
.contentbox {padding: 0rem 0px 1rem 10%;width: 100%;}
.contactnumbers {margin-top: 10px;padding: 0px 60px 0px 10px;font-size: 16px;}
.appointmentbox{height: 60px;}
.appointmenttext {font-size: 15px;padding: 0 20px 0 20px;}
.herodesc {font-size: 15px;line-height: 1.5;}
.bannercolumn p {font-size: 15px;line-height: 1.5;}
.mainHeading br{display: none;}
.heroheadline {font-size: 35px; margin-bottom: 8px;}
.bannercolumn {padding-left: 8%;}
.bannerheading {font-size: 35px;padding-bottom:15px;}
.btnsocial{width: 95%;}
.contentbox {padding: 0rem 0px 1rem 12%;}
.contactnumbers {margin-top: 10px;padding: 0px 72px 0px 10px;font-size: 16px;}
.appointmentbox{height: 80px;}
.herodesc {font-size: 15px;}
.mainHeading br{display: none;}
.googlereviews {padding-right: 0%;}
.bannersocialtop {margin-top: 1.5rem;}
.consultbox {margin-top: 20px;font-size: 1rem;}

.statssection {margin-right: 3.5%;margin-left: 3.5%;padding: 2rem 2%;margin-bottom: 2rem;}
.skin-thumb-track {gap: 15px;}
.statsbox {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 15px;margin-top: 25px;}
.skin-thumb {width: 170px;height: 230px;}
.skinlayout {min-height: 500px;}
.skin-left-panel {padding: 25px 20px;}
.skin-visual {width: min(53vw, 630px);}
.statssection {margin-right: 3.5%;margin-left: 3.5%;padding: 2rem 3%;margin-bottom: 2rem;}
.skinsection .skin-nav {margin-left: 7rem;}
.skinsection {min-height: 500px;padding:2rem 3% 0px 3%;}
.skin-left-panel h2 {font-size: 35px;}
.skin-left-panel .small-title {font-size: 30px;}
.skin-thumb .treatment-caption {padding: 20px 12px 14px 12px;font-size: 20px;}
.skin-left-panel p {font-size: 16px;line-height: 1.6;}
.bodysection {padding: 40px 0% 40px 0%;}
.body-left-panel {gap: 20px;padding-left: 3%;padding-right: 3%;}
.bodytitle {font-size: 50px;}
.body-thumbs {gap: 10px;width: 50%;}
.bodytitle .smalltitle {font-size: 35px;}
.thumb-card .treatment-caption {bottom: -7px;}
.body-left-panel p {font-size: 16px;line-height: 1.6;}
.thumb-card .treatment-caption {padding: 12px;font-size: 20px;}
.hairsection {padding: 40px 3% 0px 3%;}
.hair-thumbs .thumbcard { width: 210px;}
.hair-thumbs .treatment-caption {font-size: 20px;padding: 12px 12px 10px 12px;}
.hair-right-panel {padding: 30px 30px;min-height: 440px;}
.hair-thumbs {left: 10px;bottom: 40px;}
.hair-right-panel h2{font-size: 35px;}
.hair-right-panel p {font-size: 16px;line-height: 1.6;}
.hair-right-panel .small-title {font-size: 30px;}
.whycard {padding: 15px;}
.whycard p {font-size: 16px;line-height: 1.6;}
.whycards {margin-top: 2rem;gap: 28px;margin-bottom: 2rem;}
.age-tabs {padding: 25px 0;gap: 10px;}
.personalisedsection {padding: 2rem 3% 2rem 3%;}
.personalised-inner {grid-template-columns: 100px 1fr;min-height: 480px;}
.personalised-card {margin-bottom: 30px;}
.personalised-content h2 {font-size: 35px;}
.personalised-content p {margin: 0 0 1rem 0px;font-size: 16px;}
.personalised-links a {font-size: 16px;line-height: 1.6;}
.personalised-content {padding: 25px 25px 20px 25px;}
.testimonials-title {font-size: 35px;}
.testimonialssection {padding: 2rem 3% 2rem 3%;}
.testimonials-watermark {left: -90px;font-size: clamp(50px, 13vw, 220px);}

}

/* Start of IPad Screen */
@media screen and (max-width: 991.98px) and (min-width: 768px) {
/* Start of bannersection */
.heroscreenshot {min-height: 310px;}
.heroscreenshot .carousel-item {min-height: 310px;}
.sliderrow {min-height: 310px;}
.heroimgstack {width: 100%;height: 310px;}
.contentbox{padding: 0rem 0px 2rem 0%;text-align: left; margin-top: -20px;}
.heroheadline{font-size: 26px;line-height: 1.2;margin-bottom: 5px;}
.heroheadline br{display: none;}
.mainHeading br{display: none;}
.heroscreenshot .sliderrow{min-height: 100%;padding: 0px 2%;}
.herodesc {font-size: 14px;line-height: 1.6;max-width: 100%;text-align: left;}
/* .heroimgstack {width: 100%;height: 100%;} */
.herorightinfo {
  min-width: 100%;
  padding-right: 0%;
  align-items: start;
  gap: 10px;
}
.consultbox {
  grid-column: 1;
  background: none;
  text-align: left !important;
  margin-top: 10px;
  font-size: 14px; margin-left: 10px;
  margin-bottom: 0px;
}
.bannersocialtop {
  grid-column: 2;
  margin-top: 16px;
  text-align: right;
  display: flex;width: 100%;
  margin-right: 0px;
  flex-direction: column;
  align-items: flex-end;
}
.btnsocial {font-size: 11px;font-weight: 500;padding: 0.56em 10px;margin: 3px 0px;width: 100%;gap: 0.2em;float: none;}
.fwtext {font-size: 16px;line-height: 1.2;}
.contactnumbers {margin-top: 10px;padding: 0px 0px 0px 42px;font-size: 16px;font-weight: 600;line-height: 1.2;}
.contactnumbers::after {width: 38px;background-size: 16px 16px;left:0px}
.contacttext {font-size: 14px;line-height: 20px;}
.trustedtop {font-size: 11px;letter-spacing: 0%;}
.trustedtop br{display: none;}
.googlereviews{padding-right: 0%;line-height: 20px;}
.fw-bold {display: block;}
.appointmentbox{width: 300px;height: 70px;}
.heroscreenshot .appointmenttop .appointmentbox,
.heroscreenshot .secondappointmenttop .appointmentbox,
.heroscreenshot .thirdappointmenttop .appointmentbox{left: 10px !important;width: calc(100% - 20px);max-width: 320px;}
.consulttab {flex: 0 0 40px;width: 40px;height: 100%;font-size: 10px;letter-spacing: 2%;}
.carousel-indicators {margin-bottom: 15px;}
.bannerheading{font-size: 26px;line-height: 1.2;margin-bottom: 5px;padding-bottom: 10px;text-align: left;}
.bannerheading br{display: none;}
.bannercolumn {padding-left: 2%;padding-top: 1.5rem;padding-bottom: 0rem;padding-right: 2%;}
.bannercolumn p{font-size: 15px;line-height: 1.6;max-width: 100%; margin: 0 auto;
  text-align: left;letter-spacing: 2%;}

/* Start of skin section */
.statssection {margin-right: 4%;margin-left: 4%;padding: 1.5rem 1%;margin-bottom: 10px;}
.statssection p{ margin-bottom: 5px;}
.titleheading {letter-spacing: 2%;font-size: 15px;}
.statsbox {grid-template-columns: 1fr 1fr 1fr;gap: 8px;max-width: 100%;margin-top: 16px;min-width: 0;}
.statpanel {padding: 15px;}
.statleft .statnum, .statcenter .statnum {font-size: 24px;}
.statright {gap: 8px;padding: 10px;}
.statleft .statlabel, .statcenter .statlabel {letter-spacing: 2%;font-size: 14px;width: 60%;}
.statlabel{text-align: left;}
.statlabel br{display: none;}
.statright .statlabel {letter-spacing: 2%;font-size: 14px;}

/* Start of skin section */
.skinsection {padding: 2rem 2%;min-height: 660px;}
.skinlayout {min-height:auto;display: block;width: 100%;}
.skin-visual {bottom: -10%;width: 100%;min-height: 110px;margin-top: 10px;}
.skin-thumb-track {gap: 10px;}
.skin-thumb {width: 232px;height: 280px;flex:0 0 232px}
.skinsection .skin-nav {width: 54px;height: 54px;min-width: 48px;margin-left: 4rem;}
.skin-left-panel p {font-size: 15px;line-height: 1.6;letter-spacing: 2%;}
.skin-left-panel {width: 100%;padding: 1.25rem;}
.skin-left-panel h2 {font-size: 35px;}
.skin-left-panel .small-title {font-size: 30px;}

  .skin-visual {position: relative;width: 100%;right: auto;top: auto;transform: none;margin-top: 12px;}
  .skin-main {height: 320px;}
  .skin-thumb-track {position: static;margin-top: 10px;overflow-x: auto;padding-bottom: 0px;}

/* Start of body section */
.bodysection {padding: 2rem 0%;}
.bodyleftpanel {padding: 0px 0px 10px 0px;gap: 10px;padding-left: 3%;}
.body-left-panel {padding: 0px 0px 15px 0px;display: block;gap: 10px;padding-left: 3%;padding-right: 3%;}
.body-left-panel h2{font-size: 45px; margin-bottom: 5px;}
.bodytitle .smalltitle {font-size: 35px;letter-spacing: 1px;}
.body-left-panel p {font-size: 16px;line-height: 1.6;letter-spacing: 2%;}
.bodyrow{display: block;}
.body-thumbs {gap: 10px;display: flex;align-items: flex-start;width: 100%;}
.spacetop{margin-top: 1rem;}
.mlleft{margin-left: 2rem;}
.body-thumbs .thumb-card{flex: 0 0 230px;}
.thumb-card img{height: 280px;object-position: top;}
.thumb-card .treatment-caption{ font-size:20px;padding: 12px 10px;bottom: -10px;}
.bodythumbsleft .thumb-nav{ width:54px; height:54px;margin-left:10px;position: absolute;right: 2rem;top:45%; transform: translateY(-50%); }
.body-right-img{ display:none }


/* Start of hair section */
.hairsection {min-height: 720px; padding: 2rem 0;}
.hairsection .row{display: flex;flex-direction: column-reverse;}
.hair-thumbs .thumbcard img {width: 100%;height: 260px;}
.hair-right-panel {margin: 0px auto;min-height: auto;padding: 2rem 20px;}
.hair-thumbs .thumbcard {width: 210px;}
.hair-thumbs .treatment-caption {font-size: 18px;height: 68px;align-items: center;display: flex;justify-content: center;padding: 10px 10px 10px 10px;margin-top: -68px;line-height: 1.25;}
.hair-thumbs {position: absolute;left: 21%;top: 20px;gap: 20px;margin: 0px auto 0 auto;}
.hair-right-panel h2 {font-size: 45px;}
.hair-right-panel .small-title {font-size: 35px;}
.hair-right-panel p {font-size: 16px;line-height: 1.6;}


/* Start of Why Patients Choose */
.whycards {margin-top: 0rem;gap: 0px;margin-bottom: 0rem;flex-wrap: nowrap;overflow-x: auto;justify-content: flex-start;overflow-y: hidden;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory;padding-bottom: 50px;}
.whycard {flex: 0 0 260px;width: 260px;margin-left: 0;scroll-snap-align: start;margin:0px;padding: 18px;}
.whycard p {font-size: 15px;line-height: 1.6;}
.whycard:nth-child(2) {transform: translateY(10px);}
.whycard:nth-child(4) {transform: translateY(10px);}

/* Start of personalisedsection */
.personalisedsection {padding: 2rem 4% 2rem 4%;}
.personalised-content {padding: 20px 15px 15px 15px;}
.personalised-wrap {gap: 0px;display: block;}
.personalised-inner {display: block;min-height: 100%;}
.personalised-content h2 {font-size: 28px;}
.personalised-content p {margin: 0 0 1rem 0px;font-size: 15px;max-width: 100%;}
.personalised-links a {font-size: 16px;line-height: 1.6;}
.personalised-links {gap: 5px;}
.personalised-image-wrap, .personalised-card {width: 100%;max-width: 100%;}
.personalised-card {width: 100%;margin-left: 0px;margin-bottom: 0px;}
.age-tab {width: 54px;height: 54px;font-size: 18px;position: relative;}
.age-tabs {justify-content: flex-start;padding:12px;gap: 0px 20px;align-items: flex-start;height: 80px;border-bottom: 0px;flex-direction: row;border-bottom: #ddd 1px solid;}
.age-tab.is-active::after {content: "";position: absolute;display: block;left: 50%;right: auto;top: auto;bottom: -14px;
  transform: translateX(-50%);width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;
  border-top: 10px solid #56c5b8;}

}

/* Start of Mini IPad Screen */
@media screen and (max-width: 767.98px) and (min-width: 600px) {
.section {padding: 2rem 3%;}
.heroscreenshot .row,
.bodysection .row,
.hairsection .row {--bs-gutter-x: 0;margin-left: 0;margin-right: 0;}

/* Start of bannersection */
.heroscreenshot {min-height: 1050px;}
.contentbox{padding: 2rem 0px 0rem 0%;text-align: center;}
.heroheadline{font-size: 44px;line-height: 1.2;margin-bottom: 5px;max-width: 100%;}
.heroheadline br{display: none;}
.heroscreenshot .sliderrow{min-height: 100%;}
.herodesc {font-size: 18px;line-height: 1.8;max-width: 92%;text-align: center; margin: 0 auto;}
.heroimgstack {width: 100%;height: 100%;}
.herorightinfo {
  min-width: 100%;
  padding-right: 0%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px;
}
.consultbox {
  grid-column: 1;
  background: none;
  text-align: left !important;
  margin-top: -95px;
  font-size: 18px; margin-left: 10px;
  margin-bottom: 115px;
}
.bannersocialtop {
  grid-column: 2;
  margin-top: 5px;
  text-align: right;
  display: flex;
  margin-right: 10px;
  flex-direction: column;
  align-items: flex-end;
}
.btnsocial {font-size: 14px;font-weight: 500;padding: 0.56em 10px;margin: 3px 0px;width: 68%;gap: 0.2em;float: none;}
.fwtext {font-size: 18px;line-height: 1.2;}
.contactnumbers {margin-top: 8px;padding: 0px 0px 0px 42px;font-size: 18px;font-weight: 600;line-height: 1.4;}
.contactnumbers::after {width: 38px;background-size: 16px 16px;left:0px}
.contacttext {font-size: 14px;line-height: 20px;}
.trustedtop {font-size: 12px;letter-spacing: 2%;}
.trustedtop br{display: block;}
.googlereviews{padding-right: 0%;position: absolute;right:20px;line-height: 20px;top:36%;transform: translateY(-50%);}
.fw-bold {display: block;}
.appointmentbox{width: 300px;height: 70px;}
.heroscreenshot .appointmenttop .appointmentbox,
.heroscreenshot .secondappointmenttop .appointmentbox,
.heroscreenshot .thirdappointmenttop .appointmentbox{left: 10px !important;width: calc(100% - 20px);max-width: 320px;}
.consulttab {flex: 0 0 40px;width: 40px;height: 100%;font-size: 10px;letter-spacing: 2%;}
.carousel-indicators {margin-bottom: 88px;}
.bannerheading{font-size: 44px;line-height: 1.2;margin-bottom: 5px;padding-bottom: 10px;text-align: center;}
.bannerheading br{display: none;}
.bannercolumn {padding-left: 2%;padding-top: 1.5rem;padding-bottom: 0rem;padding-right: 2%;}
.bannercolumn p{font-size: 16px;line-height: 1.8;max-width: 92%; margin: 0 auto;
  text-align: center;letter-spacing: 2%;}

/* Start of skin section */
.statssection {margin-right: 3%;margin-left: 3%;padding: 3rem 0%;margin-bottom: 10px;}
.statssection p{ margin-bottom: 5px;}
.titleheading {letter-spacing: 2%;font-size: 15px;}
.statsbox {grid-template-columns: 1fr;gap: 12px;max-width: 60%;margin-top: 16px;min-width: 0;}
.statpanel {padding: 15px;}
.statleft .statnum, .statcenter .statnum {font-size: 35px;}
.statright {gap: 12px;padding: 10px;}
.statleft .statlabel, .statcenter .statlabel {letter-spacing: 2%;font-size: 16px;width: 60%;}
.statlabel{text-align: left;}
.statlabel br{display: none;}
.statright .statlabel {letter-spacing: 2%;font-size: 14px;}

/* Start of skin section */
.skinsection {padding: 2rem 2%;min-height: 660px;}
.skinlayout {min-height:auto;display: block;width: 100%;}
.skin-visual {bottom: -10%;width: 100%;min-height: 110px;margin-top: 10px;}
.skin-thumb-track {gap: 10px;}
.skin-thumb {width: 190px;height: 230px;flex:0 0 190px}
.skinsection .skin-nav {width: 54px;height: 54px;min-width: 48px;margin-left: 4rem;}
.skin-left-panel p {font-size: 15px;line-height: 1.6;letter-spacing: 2%;}
.skin-left-panel {width: 100%;padding: 1.25rem;}
.skin-left-panel h2 {font-size: 35px;}
.skin-left-panel .small-title {font-size: 30px;}

.skin-visual {position: relative;width: 100%;right: auto;top: auto;transform: none;margin-top: 12px;}
.skin-main {height: 320px;}
.skin-thumb-track {position: static;margin-top: 10px;overflow-x: auto;padding-bottom: 0px;}

/* Start of body section */
.bodysection {padding: 2rem 0%;}
.bodyleftpanel {padding: 0px 0px 10px 0px;gap: 10px;padding-left: 3%;}
.body-left-panel {padding: 0px 0px 15px 0px;display: block;gap: 10px;padding-left: 3%;padding-right: 3%;}
.body-left-panel h2{font-size: 30px; margin-bottom: 5px;}
.bodytitle .smalltitle {font-size: 30px;letter-spacing: 1px;}
.body-left-panel p {font-size: 16px;line-height: 1.6;letter-spacing: 2%;}
.bodyrow{display: block;}
.body-thumbs {gap: 10px;display: flex;align-items: flex-start;width: 100%;}
.spacetop{margin-top: 1rem;}
.mlleft{margin-left: 2rem;}
.body-thumbs .thumb-card{flex: 0 0 190px;}
.thumb-card img{height: 240px;object-position: top;}
.thumb-card .treatment-caption{ font-size:20px;padding: 12px 10px;bottom: -10px;}
.bodythumbsleft .thumb-nav{ width:54px; height:54px;margin-left:10px;position: absolute;right: 2rem;top:45%; transform: translateY(-50%); }
.body-right-img{ display:none }


/* Start of hair section */
.hairsection {min-height: 700px; padding: 2rem 10px;}
.hairsection .row{display: flex;flex-direction: column-reverse;}
.hair-thumbs .thumbcard img {width: 100%;height: 260px;}
.hair-right-panel {margin: 0px auto;min-height: auto;padding: 2rem 20px;}
.hair-thumbs .thumbcard {width: 210px;}
.hair-thumbs .treatment-caption {font-size: 18px;height: 68px;align-items: center;display: flex;justify-content: center;padding: 10px 10px 10px 10px;margin-top: -68px;line-height: 1.25;}
.hair-thumbs {position: absolute;left: 14%;top: 20px;gap: 20px;margin: 0px auto 0 auto;}
.hair-right-panel h2 {font-size: 30px;}
.hair-right-panel .small-title {font-size: 30px;}
.hair-right-panel p {font-size: 16px;line-height: 1.6;}

/* Start of Why Patients Choose */
.whycards {margin-top: 0rem;gap: 0px;margin-bottom: 0rem;flex-wrap: nowrap;overflow-x: auto;justify-content: flex-start;overflow-y: hidden;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory;padding-bottom: 50px;}
.whycard {flex: 0 0 270px;width: 270px;margin-left: 0;scroll-snap-align: start;margin:0px;padding: 20px;}
.whycard p {font-size: 15px;line-height: 1.6;}
.whycard:nth-child(2) {transform: translateY(10px);}
.whycard:nth-child(4) {transform: translateY(10px);}

/* Start of personalisedsection */
.personalisedsection {padding: 2rem 3% 2rem 3%;}
.personalised-content {padding: 5px 15px 15px 15px;}
.personalised-wrap {gap: 0px;flex-direction: column;}
.personalised-image {width: 100%;height: auto;}
.personalised-inner {display: block;min-height: 100%;}
.personalised-content h2 {font-size: 28px;}
.personalised-content p {margin: 0 0 1rem 0px;font-size: 15px;max-width: 100%;}
.personalised-links a {font-size: 16px;line-height: 1.6;}
.personalised-links {gap: 5px;}
.personalised-image-wrap, .personalised-card {width: 100%;max-width: 100%;}
.personalised-card {width: 100%;margin-left: 0px;margin-bottom: 0px;}
.age-tab {width: 54px;height: 54px;font-size: 18px;position: relative;}
.age-tabs {justify-content: flex-start;padding:10px;gap: 0px 10px;align-items: flex-start;height: 80px;border-bottom: 0px;flex-direction: row;}
.age-tab.is-active::after {content: "";position: absolute;display: block;left: 50%;right: auto;top: auto;bottom: -14px;
  transform: translateX(-50%);width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;
  border-top: 10px solid #56c5b8;}
}

/* Start of IPhone/Mobile */
@media screen and (max-width: 599.98px) and (min-width: 320px) {
.heroscreenshot .row,
.bodysection .row,
.hairsection .row {--bs-gutter-x: 0;margin-left: 0;margin-right: 0;}

/* Start of bannersection */
.heroscreenshot {min-height: 740px;}
.contentbox{padding: 1.5rem 0px 0rem 0%;text-align: center;}
.heroheadline{font-size: 35px;line-height: 1.2;margin-bottom: 5px;}
.heroheadline br{display: none;}
.heroscreenshot .sliderrow{min-height: 100%;}
.herodesc {font-size: 15px;line-height: 1.6;max-width: 92%;text-align: center; margin: 0 auto;}
.heroimgstack {width: 100%;height: 100%;}
.herorightinfo {
  min-width: 100%;
  padding-right: 0%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px;
}
.consultbox {
  grid-column: 1;
  background: none;
  text-align: left !important;
  margin-top: -95px;
  font-size: 14px; margin-left: 10px;
  margin-bottom: 115px;
}
.bannersocialtop {
  grid-column: 2;
  margin-top: 5px;
  text-align: right;
  display: flex;
  margin-right: 10px;
  flex-direction: column;
  align-items: flex-end;
}
.btnsocial {font-size: 11px;font-weight: 500;padding: 0.56em 10px;margin: 3px 0px;width: 100%;gap: 0.2em;float: none;}
.fwtext {font-size: 16px;line-height: 1.2;}
.contactnumbers {margin-top: 5px;padding: 0px 0px 0px 42px;font-size: 16px;font-weight: 600;line-height: 1.2;}
.contactnumbers::after {width: 38px;background-size: 16px 16px;left:0px}
.contacttext {font-size: 14px;line-height: 20px;}
.trustedtop {font-size: 12px;letter-spacing: 2%;}
.trustedtop br{display: block;}
.googlereviews{padding-right: 0%;position: absolute;right:10px;line-height: 20px;top:36%;transform: translateY(-50%);}
.fw-bold {display: block;}
.appointmentbox{width: 300px;height: 70px;}
.heroscreenshot .appointmenttop .appointmentbox,
.heroscreenshot .secondappointmenttop .appointmentbox,
.heroscreenshot .thirdappointmenttop .appointmentbox{left: 10px !important;width: calc(100% - 20px);max-width: 320px;}
.consulttab {flex: 0 0 40px;width: 40px;height: 100%;font-size: 10px;letter-spacing: 2%;}
.carousel-indicators {margin-bottom: 88px;}
.bannerheading{font-size: 35px;line-height: 1.2;margin-bottom: 5px;padding-bottom: 10px;text-align: center;}
.bannerheading br{display: none;}
.bannercolumn {padding-left: 2%;padding-top: 1.5rem;padding-bottom: 0rem;padding-right: 2%;}
.bannercolumn p{font-size: 15px;line-height: 1.6;max-width: 92%; margin: 0 auto;
  text-align: center;letter-spacing: 2%;}

/* Start of skin section */
.statssection {margin-right: 2.5%;margin-left: 2.5%;padding: 3.5rem 2% 1.5rem;margin-bottom: 10px;}
.statssection p{ margin-bottom: 5px;}
.titleheading {letter-spacing: 2%;font-size: 15px;}
.statsbox {grid-template-columns: 1fr;gap: 10px;max-width: 100%;margin-top: 16px;min-width: 0;}
.statpanel {padding: 15px;}
.statleft .statnum, .statcenter .statnum {font-size: 30px;}
.statright {gap: 10px;padding: 12px;}
.statleft .statlabel, .statcenter .statlabel {letter-spacing: 2%;font-size: 15px;width: 70%;}
.statlabel{text-align: left;}
.statlabel br{display: none;}
.statright .statlabel {letter-spacing: 2%;font-size: 15px;}

/* Start of skin section */
.skinsection {padding: 1.5rem 0;min-height: 740px;}
.skinlayout {min-height:auto;display: block;width: 100%;}
.skin-visual {bottom: -10%;width: 100%;min-height: 110px;margin-top: 10px;transform: translateY(80%);}
.skin-thumb-track {gap: 10px;}
.skin-thumb {width: 170px;height: 190px;flex:0 0 170px}
.skinsection .skin-nav {width: 54px;height: 54px;min-width: 48px;margin-left: 4rem;}
.skin-left-panel p {font-size: 15px;line-height: 1.6;letter-spacing: 2%;}
.skin-left-panel {width: 100%;padding: 1.25rem;}
.skin-left-panel h2 {font-size: 45px;}
.skin-left-panel .small-title {font-size: 35px;}
.skin-thumb .treatment-caption{font-size: 20px;}

/* Start of body section */
.bodysection {padding: 1.5rem 0%;}
.bodyleftpanel {padding: 0px 0px 10px 0px;gap: 10px;padding-left: 2%;}
.body-left-panel {padding: 0px 0px 15px 0px;display: block;gap: 10px;padding-left: 2%;padding-right: 2%;}
.body-left-panel h2{font-size: 45px; margin-bottom: 5px;}
.bodytitle .smalltitle {font-size: 35px;letter-spacing: 1px;}
.body-left-panel p {font-size: 15px;line-height: 1.6;letter-spacing: 2%;}
.bodyrow{display: block;}
.body-thumbs {gap: 10px;display: flex;align-items: flex-start;width: 100%;}
.spacetop{margin-top: 1rem;}
.mlleft{margin-left: 2rem;}
.body-thumbs .thumb-card{flex: 0 0 180px;}
.thumb-card img{height: 230px;object-position: top;}
.thumb-card .treatment-caption{ font-size:20px;padding: 12px 10px;bottom: -10px;}
.bodythumbsleft .thumb-nav{ width:54px; height:54px;margin-left:10px;position: absolute;right: 1.4rem;top:40%; transform: translateY(-50%); }

/* Start of hair section */
.hairsection {min-height: 740px; padding: 1.5rem 0;}
.hairsection .row{display: flex;flex-direction: column-reverse;}
.hair-thumbs .thumbcard img {width: 100%;height: 220px;}
.hair-right-panel {margin-top: 0px;min-height: auto;padding: 1.5rem 20px;}
.hair-thumbs .thumbcard {width: 162px;}
.hair-thumbs .treatment-caption {font-size: 18px;height: 68px;align-items: center;display: flex;justify-content: center;padding: 10px 10px 10px 10px;margin-top: -68px;line-height: 1.25;}
.hair-thumbs {position: absolute;left: 0px;top: 20px;gap: 10px;margin: 0px auto 0 auto;}
.hair-right-panel h2 {font-size: 45px;}
.hair-right-panel .small-title {font-size: 35px;}
.hair-right-panel p {font-size: 15px;line-height: 1.6;}


/* Start of Why Patients Choose */
.whycards {margin-top: 0rem;gap: 0px;margin-bottom: 0rem;flex-wrap: nowrap;overflow-x: auto;justify-content: flex-start;overflow-y: hidden;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory;padding-bottom: 50px;}
.whycard {flex: 0 0 260px;width: 260px;margin-left: 0;scroll-snap-align: start;margin:0px;padding: 18px;}
.whycard p {font-size: 15px;line-height: 1.6;}
.whycard:nth-child(2) {transform: translateY(10px);}
.whycard:nth-child(4) {transform: translateY(10px);}

/* Start of personalisedsection */
.personalisedsection {padding: 1rem 3% 1rem 3%;}
.personalised-content {padding: 5px 15px 15px 15px;}
.personalised-wrap {gap: 0px;flex-direction: column;}
.personalised-image {width: 100%;height: auto;}
.personalised-inner {display: block;min-height: 100%;}
.personalised-content h2 {font-size: 28px;}
.personalised-content p {margin: 0 0 1rem 0px;font-size: 15px;max-width: 100%;}
.personalised-links a {font-size: 16px;line-height: 1.6;}
.personalised-links {gap: 5px;}
.personalised-image-wrap, .personalised-card {width: 100%;max-width: 100%;}
.personalised-card {width: 100%;margin-left: 0px;margin-bottom: 0px;}
.age-tab {width: 54px;height: 54px;font-size: 18px;position: relative;}
.age-tabs {justify-content: flex-start;padding:10px;gap: 0px 10px;align-items: flex-start;height: 80px;border-bottom: 0px;flex-direction: row;}
.age-tab.is-active::after {content: "";position: absolute;display: block;left: 50%;right: auto;top: auto;bottom: -14px;
  transform: translateX(-50%);width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;
  border-top: 10px solid #56c5b8;}
}