/* Home Page */
.hero.hero-banner {
  background-image:
    linear-gradient(#000000d9, #0000 11%),
    linear-gradient(90deg, #00000000 13%, #fff0 77%);
  background-position:
    0 0,
    0 0;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-attachment: scroll, scroll;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero {
  min-height: 100vh;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
}

.hero-content-box {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 80%;
  display: flex;
}

.home-tag {
  font-size: 22px;
  line-height: 1.3;
  color: #000;
}

.hero-header-wrapper {
  z-index: 2;
  justify-content: flex-start;
  align-items: center;
  min-height: 84vh;
  display: flex;
  position: relative;
  top: 86px;
}

.hero-banner-header {
  margin-bottom: 30px;
  font-size: 5.8em;
  line-height: 1.1em;
}

.hero-content {
  color: #fff;
  background-image: none;
  border-radius: 5px;
  margin-bottom: 40px;
  margin-right: 0;
  padding: 0;
  font-family:
    DM Serif Text,
    sans-serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 500;
  line-height: 45px;
  transform: none;
}

.separator-line {
  background-image: radial-gradient(circle, #b2832c 51%, #fff0);
  width: 40%;
  height: 3px;
  margin-bottom: 35px;
}

.content-wrapper.black-bg {
  background-color: #fff;
  /* background-image:
    linear-gradient(151deg, #9a6d237d, #fff0 12%),
    radial-gradient(circle, #a47a2c, #fff0),
    linear-gradient(351deg, #a47a2c, #f5de74); */
  padding-top: 30px;
  padding-bottom: 30px;
}

.content-wrapper.gold-bg {
  background-color: #ede7e0;
  /*   background-image:
    linear-gradient(151deg, #9a6d237d, #fff0 12%),
    radial-gradient(circle, #a47a2c, #fff0),
    linear-gradient(351deg, #a47a2c, #f5de74); */
  padding-top: 30px;
  padding-bottom: 30px;
}

.email-box {
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-style: italic;
  display: flex;
}

.mid-content-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  display: flex;
}

.white-heading.center,
.dark-heading.center {
  text-align: center;
}

.center {
  text-align: center;
}

.white-heading {
  color: #fff;
}

.dark-heading {
  color: #000;
}

.email-box .offer-info p {
  color: #000;
  font-family: "montserrat", sans-serif;
}

.mid-flex {
  justify-content: center;
  align-items: center;
  display: flex;
}

.mid-content.first-consult-info {
  font-size: 25px;
  line-height: 32px;
}

.mid-content {
  color: #fff;
  text-align: center;
  font-size: 18px;
}

.offer-info {
  text-align: center;
  margin-top: 10px;
}

.off {
  color: #fff;
  font-size: 45px;
  font-style: normal;
  font-weight: 900;
  line-height: 54px;
  text-decoration: underline;
}

.newsletter-field-wrapper {
  background-color: #fff;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  min-width: 800px;
  height: 68px;
  margin-bottom: 10px;
  padding: 8px 0 8px 19px;
  display: flex;
  position: relative;
  border: solid 1px #000;
}

.newsletter-field {
  background-color: #fff0;
  border: 1px solid #fff0;
  flex: 1;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  font-size: 22px;
  display: flex;
}

.submit-button.submit.news {
  font-family: "montserrat", sans-serif;
  color: #fff;
  background-color: #000;
  background-image: none;
  border: 2px solid #000;
  padding: 17px 20px 16px;
  margin-right: -1px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.submit-button.submit.news:hover {
  color: #fff;
  background-color: #d1ab59;
  border-color: #d1ab59;
}

.submit-button.submit {
  width: auto;
}

.submit-button {
  color: #000;
  background-color: #eeaa18;
  background-image: linear-gradient(337deg,
      #9a6d23 12%,
      #ffec7c 70%,
      #d1ab59 86%,
      #ffec7c);
  border-radius: 12px;
  width: 49%;
  padding-top: 17px;
  padding-bottom: 17px;
  font-family: "montserrat", sans-serif;
  font-size: 25.4px;
  font-weight: 500;
  line-height: 35.4px;
}

.submit {
  color: #fff;
  background-color: #d1ab59;
  border-radius: 100px;
  padding-left: 40px;
  padding-right: 40px;
  font-family: "montserrat", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 35px;
}

.content-wrapper.gray-bg {
  /*  background-image: linear-gradient(108deg, #724b14 8%, #d3ad5a);
  background-repeat: repeat;
  background-size: auto; */
  padding-top: 25px;
  padding-bottom: 25px;
  box-shadow: 10px 16px 10px -10px #00000026;
}

.provider-box {
  color: #3d3d3d;
  background-color: #fff;
  border: 1px solid #c07e03;
  border-radius: 15px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 40px;
  font-size: 17px;
  display: flex;
  position: relative;
  box-shadow: 0 6px 7px 3px #f0e0c3;
}

._15-sec-wrap {
  grid-column-gap: 13px;
  grid-row-gap: 13px;
  display: flex;
}

.separator-line.vectra-line-copy {
  background-image: radial-gradient(circle, #fff 51%, #fff0);
  flex-flow: column;
  width: auto;
  height: 3px;
  margin-bottom: 0;
  display: flex;
  position: relative;
  top: -6px;
}

.vectra-banner-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.provider-box.provider3-1 {
  box-shadow: none;
  background-color: #fff0;
  background-image: none;
  border-style: none;
  border-color: #000;
  width: 100%;
  display: block;
}

.vectra-promotion {
  color: #000;
  text-align: center;
  margin-bottom: 0;
  font-size: 50px;
  line-height: 60px;
}

.vectra-promotion.promotion-info-2 {
  filter: none;
  color: #d1ab59;
  overflow-wrap: normal;
  font-size: 41px;
  line-height: 1;
}

.text-span-2 {
  color: #fff;
  border-bottom: 3px #fff;
  font-size: 40px;
  text-decoration: none;
}

.content-wrapper.queensland-wrapper {
  padding-bottom: 10px;
  position: relative;
}

.mapping-wrapper {
  box-shadow:
    0 0px 0px 0 rgba(0, 0, 0, 0.1),
    0 -26px 18px -24px rgba(0, 0, 0, 0.1);
  padding-top: 50px;
}

.flex-wrapper.right-flex {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.vectra-info {
  background-color: #eee8e1;
  border: 1px solid #d1ab59;
  border-radius: 15px;
  padding: 18px;
}

.image-box.skeen-image-1 {
  background-image: url(../images/dermcheck.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 48%;
  height: 790px;
  display: flex;
  position: static;
  inset: -9% auto auto 0%;
}

.vectra-heading-box {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 50px;
}

.text-span {
  color: #d1ab59;
}

.vectra-info-wrapper {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.vectra-info-box {
  box-shadow: 0 2px 7px 0 #14142b0f;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d1ab59;
  border-radius: 19px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 20%;
  height: 190px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 17px;
  font-size: 16px;
  display: flex;
}

.vectra-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.content-wrapper.black-content-wrapper {
  background-color: #000;
  background-image:
    linear-gradient(153deg, #eee8e1 14%, #fff0 93%),
    linear-gradient(333deg, #d1ab59, #fff);
  display: flex;
  position: relative;
}

.mid-box {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.vectra-image-wrapper {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.vectra-1 {
  background-image: url(../images/vectra-image-1.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: 48%;
  height: 500px;
}

.vectra-2 {
  background-image: url(../images/melanoma-patient-female.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  width: 48%;
  height: 500px;
}

/* Vectra Section */
.vectra-boxes-wrap {
  gap: 30px;
  padding-bottom: 30px;
}

.vectra-btn-wrap {
  text-align: center;
  display: block;
  max-width: 100%;
  padding: 0 20px;
}

.vectra-content {
  text-align: center;
  z-index: 2;
  padding: 30px 20px;
  background: #0000008a;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.4s ease-in-out;
}

.vectra-content p {
  color: #fff;
  line-height: 1.2;
  height: 70px;
}

.vectra-thumb {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
}

.vectra-content h3 {
  font-size: 23px;
  height: 30px;
}

.vectra-box {
  position: relative;
  min-height: 380px;
  display: flex;
  border: solid 1px #d1ab59;
  border-radius: 30px;
  overflow: hidden;
  width: 100%;
}

.vectra-img1 {
  background-image: url(../images/vectra-thumb.png);
}

.vectra-img2 {
  background-image: url(../images/sideview-skin.jpg);
}

.vectra-img3 {
  background-image: url(../images/vectra-machine-img.png);
}

.vectra-box:hover .vectra-content {
  opacity: 1;
}

.hero-banner .fontmont,
.hero-banner .bg-color,
.hero-content {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.144);
}

.logo-hero-wrap {
  width: 100%;
  position: relative;
  gap: 10px;
  margin-bottom: 30px;
}

.logo-hero-wrap img {
  width: auto;
  max-height: 100px;
  object-fit: contain;
}

.logo-hero-wrap {
  position: relative;
  bottom: 0;
  justify-content: space-between;
  flex-flow: wrap;
}

/* Services Slider */
.slider-wrapper._100 {
  width: 100%;
  max-width: 100%;
  margin: auto;
}

.service-box {
  color: #000;
  text-align: center;
  background-color: #f1f1f1;
  /*  border: 2px solid #b77f1e; */
  border-radius: 13px;
  flex-flow: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.slider-box {
  /*   width: 23%;
  margin-left: 10px;
  margin-right: 10px; */
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: 90%;
}

.swiper-button-prev {
  left: calc(50% - 60px) !important;
}

.swiper-button-next {
  right: calc(50% - 60px) !important;
}

.slider-box:hover {
  /* transform: translate3d(0px, -10px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d; */
  opacity: 1;
  will-change: transform;
}

.slider-image-box {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  height: 190px;
  transition: 0.4s ease-in-out;
  position: relative;
}

.slider {
  background-color: #ddd0;
  height: auto;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 20px;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.service-heading._2 {
  height: auto;
  font-size: 22px;
  display: block;
}

.service-heading._2.font-size {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  display: flex;
  font-family: "montserrat", sans-serif;
  margin-bottom: 30px;
}

.slider-content.service-slider-content {
  margin-bottom: 10px;
  font-family: "montserrat", sans-serif;
  padding: 20px;
}

.slider-content {
  justify-content: flex-start;
  font-size: 16px;
  line-height: 24px;
}

.slider-content-box.services-heading {
  border-radius: 1px;
  flex-flow: column;
  height: auto;
  padding: 10px 15px 20px;
  display: flex;
  margin-top: 30px;
}

.slider-content-box {
  height: 280px;
  padding-top: 25px;
  padding-left: 0;
}

.slider-par {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.4s linear;
  width: 100%;
  padding: 20px;
  left: 0;
  z-index: 10;
}

.service-box:hover .slider-image-box {
  opacity: 0;
}

.service-box:hover .slider-par {
  opacity: 1;
}

.mask.full-view {
  margin-left: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}

.gold-button-wrapper.mid-btn {
  justify-content: center;
  align-items: center;
}

.homeskin-bg {
  background-image: url(../images/skin-tones-img.jpg);
  min-height: 70vh;
  display: flex;
  background-size: cover;
  justify-content: center;
  align-items: center;
  background-position: center center;
  position: relative;
  text-align: center;
}

.homeskin-bg::after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.292);
  mix-blend-mode: multiply;
}

.homeskin-bg p {
  font-size: 20px;
  max-width: 780px;
  z-index: 10;
  text-align: center;
}

.homeskin-bg h2 {
  font-weight: 500;
  z-index: 10;
  text-align: center;
}

.slider-image-box.service-new1 {
  background-image: url(../images/medical-skin-img.jpg);
}

.slider-image-box.service-new2 {
  background-image: url(../images/cosmetic-skin.jpg);
}

.slider-image-box.service-new4 {
  background-image: url(../images/skincancer-img.jpg);
}

.slider-image-box.service-new5 {
  background-image: url(../images/vectra-slide-thumb.png);
  background-position: 50%;
  background-size: 114%;
}

/* Contact Us */
.hero.hero-banner.inside.default {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    linear-gradient(#000, #000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100%,
    0 0;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, repeat;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto 500px,
    auto;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
}

.hero.hero-banner.inside.default.contact-us {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/skeen-doctor-banner.jpeg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    -70% 0,
    0 0;
  background-attachment: scroll, scroll, scroll, scroll, fixed, scroll;
}

.contact-heading-content {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  display: flex;
}

.flex-wrapper.top-flex {
  justify-content: space-between;
  align-items: flex-start;
}

.in-touch-info {
  margin-bottom: 20px;
  font-weight: 400;
}

.contact-info-box {
  flex-flow: column;
  width: 45%;
  display: flex;
}

.contact-address {
  margin-top: 20px;
  margin-bottom: 0;

  font-size: 17px;
  font-weight: 700;
  line-height: 30px;
}

.contact-tel-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.contact-email {
  margin-top: 0;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  line-height: 30px;
}

.contact-tel {
  color: #000;
  margin-top: 0;
  font-family: Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 30px;
}

.contact-tel.tel {
  background-image: url(../images/cont-phone.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 30px;
  padding-left: 36px;
  background-position: -3px;
}

.contact-tel.open {
  background-image: url(../images/cont-open.svg);
  background-position: 0 4px;
  background-repeat: no-repeat;
  background-size: 23px;
  padding-left: 36px;
}


.email.mail {
  background-image: url(../images/cont-email.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 30px;
  padding-left: 35px;
  background-position: -3px;
}

.email {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}

.contact-email {
  margin-top: 0;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  line-height: 30px;
}

.contact-email._20mar {
  background-image: url(../images/cont-location.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 30px;
  margin-bottom: 20px;
  padding-left: 33px;
  background-position: -3px;
}

.operating-hourse-field {
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: flex;
}

.days {
  font-size: 18px;
  line-height: 30px;
  padding-left: 15px;
  padding-right: 15px;
}

.social-box.socmed-div {
  border-bottom-color: #d1d1d1;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 0;
  display: flex;
}

.social-box {
  justify-content: space-between;
  margin-bottom: 0;
  display: flex;
  width: 100%;
}

.social.clock-icon {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  margin-left: 0;
  margin-right: 5px;
}

.social {
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-right: 5px;
  display: block;
  margin-left: 5px;
}

.operating-box.arrangement {
  background-color: #f1f1f1;
  border: 0 #000;
  border-radius: 10px;
  padding: 20px 25px 10px;
}

.operating-box {
  margin-top: 0;
  margin-bottom: 40px;
  display: flex;
}

.hhds-logo {
  max-width: 200px;
  width: 100%;
  object-fit: contain;
}

.operation-heading {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
}

.after-hours-info {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 30px;
}

.contact-form-box {
  width: 50%;
  background: #f1f1f1;
  padding: 30px;
  border-radius: 16px;
}

.career-form-box.reg-form {
  box-shadow: none;
  background-color: #f1f1f1;
  /* border: 1px solid #c28f2c; */
  border-radius: 10px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.career-form-box {
  width: 100%;
  padding: 37px;
}

.career-reg-form-title {
  text-align: left;
  margin-bottom: 20px;
}

.form-box {
  justify-content: space-between;
  margin-bottom: 37px;
  display: flex;
}

.half-form-field {
  width: 49%;
}

.form-box.inquiries {
  flex-flow: column;
}

.contact-text-field {
  color: #7e7a7a;
  background-color: #bd9b9b00;
  border: 1px #000;
  border-bottom: 2px solid #ecece7;
  height: 40px;
  margin-bottom: 0;
  padding-left: 0;
  font-family: "montserrat", sans-serif;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}

.contact-text-field.message {
  height: 110px;
  margin-bottom: 35px;
  font-size: 16px;
  width: 100%;
}

.field-label {
  text-align: left;
  margin-bottom: 20px;
  font-family: "montserrat", sans-serif;

  font-size: 17px;
  font-weight: 500;
  display: block;
}

.contact-text-field:hover,
.contact-text-field:focus {
  border-bottom-color: #d5a02e;
  box-shadow: none;
  outline: none;
}

.social.social-div.fb {
  margin-right: 2px;
}

.social.social-div {
  color: #000;
  width: 30px;
  height: 30px;
  margin-left: 0;
  margin-right: 10px;
}

.social.social-div.ig {
  padding: 3px;
}

.social.social-div.linkedin {
  padding: 2px;
}

/* Careers Page */
.field-label.career {
  text-align: left;
  margin-bottom: 3px;
  font-size: 18px;
  line-height: 28px;
}

.form-box.career {
  flex-flow: column;
  margin-bottom: 10px;
}

.career-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  width: 28%;
  background: #f1f1f1;
  border-radius: 50px;
}

.career-box h3 {
  font-size: 20px;
  font-family: "montserrat", sans-serif;
  font-weight: 700;
  color: #d1ab59;
  line-height: 1.3;
  height: 50px;
  margin-bottom: 10px;
}

.career-box p {
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.career-box-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.shadow-down {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1), 0 13px 7px -7px rgba(0, 0, 0, 0.1) !important;
}

/* Hero Banners */
.hero.hero-banner.inside.default.mission-and-vision {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/doctor-hand-shake.jpeg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100% 0;
  background-attachment: scroll, scroll, scroll, scroll, fixed;
  position: relative;
}

.hero.hero-banner.inside.default.skin-cancer-management {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/skincancer-hero.jpg);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    10% 20%;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover;
}

.hero.hero-banner.inside.default.medical-services {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/medical-services-hero.jpg);
  background-attachment: scroll, scroll, scroll, scroll, fixed;
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    10% 20%;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover;
}

.hero.hero-banner.inside.default.laser-and-tech {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/medical-services-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    50%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
}

.hero.hero-banner.inside.default.cosmetic-services {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/cosmetic-hero.jpg);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    -50% 0;
  background-attachment: scroll, scroll, scroll, scroll, fixed;
}

.hero.hero-banner.inside.default.skin-cancer-diagnosis-and-management {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/skincancer-hero.jpg);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    140%;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto 380px;
}

.hero.hero-banner.inside.default.lip-cancer {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/lip-cancer-hero.png);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    -54%;
}

.hero.hero-banner.inside.default.skin-cancer-surgery {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/cancer-surgery-hero.png);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    -70%;
}

.hero.hero-banner.inside.default.advanced-technologies {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/laser-vectra-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    171%,
    100% 40%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto 500px,
    auto;
}

.hero.hero-banner.inside.default.stretch-marks {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/stretch-marks-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    -110%,
    0 0;
}

.hero.hero-banner.inside.default.melasma {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/melasma-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    420% 0,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto 450px,
    auto;
}

.hero.hero-banner.inside.default.fillers {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/fillers-hero-img.png),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    440% 80%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.aesthetic-treatments {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/cosmetic-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.men {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/mens-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100% 65%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto 468%,
    auto;
}

.hero.hero-banner.inside.default.stem-cell {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/stemcells-img.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    106% 10%,
    0 0;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, repeat;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    64%,
    auto;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
}

.hero.hero-banner.inside.default.cosmetic-skin-lesions {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/skin-lesion-hero.png);
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto 380px;
}

.hero.hero-banner.inside.default.children-dermatology {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png),
    url(../images/children-dermatology-hero.jpg), linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100% 0,
    0 0;
  background-size: auto, auto, auto, cover, auto, auto;
}

.hero.hero-banner.inside.default.acne {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/acne-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.eczema-and-dermatitis {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/eczema-derma-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -5vw 19%,
    100% 0,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    1000px,
    auto;
}

.hero.hero-banner.inside.default.psoriasis {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/psoriasis-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    270%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.scar-revision {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/scar-revision-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    420%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.patch-testing {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/patch-testing-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    470%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.excessive-sweating {
  background-image:
    linear-gradient(#000000d9 4%, #fff0 25%),
    url(../images/sub-background2.png),
    linear-gradient(57deg, #000 3%, #fff0 76%),
    url(../images/side-sub-background.png),
    url(../images/excessive-sweating-hero.png);
  background-position:
    0 0,
    100% 0,
    0 0,
    0 -15px,
    0 -30%;
  background-repeat: repeat, no-repeat, repeat, repeat, no-repeat;
  background-size:
    auto,
    auto 617px,
    auto,
    1920px 617px,
    120%;
  background-attachment: scroll, scroll, scroll, fixed, fixed;
}

.hero.hero-banner.inside.default.birthmarks {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/birthmarks-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    0 19%,
    100% 0,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    cover,
    auto 500px,
    auto;
}

.hero.hero-banner.inside.default.rhinophyma {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/rhinophyma-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100% 0,
    0 0;
}

.hero.hero-banner.inside.default.vitiligo {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/vitiligo-hero.jpg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    260%,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    cover,
    auto;
}

.hero.hero-banner.inside.default.privacy-policy {
  background-image:
    linear-gradient(#0000, #0000), linear-gradient(#000000d9 4%, #0000 17%),
    linear-gradient(86deg, #000000e0, #000000cf 14%, #00000073 57%, #fff0 84%),
    url(../images/hero-left-img.png), url(../images/skeen-doctor-banner.jpeg),
    linear-gradient(#0000, #0000);
  background-position:
    0 0,
    0 0,
    0 0,
    -7vw 19%,
    100% 0,
    0 0;
  background-size:
    auto,
    auto,
    auto,
    auto 55vw,
    auto,
    auto;
}

.image-box.excessive-image {
  background-image: url(../images/excessive-sweating-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  min-height: 500px;
}

.image-box.acne-image-box-1 {
  background-image: url(../images/acne-img-right.jpg);
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 270px;
  position: static;
  left: 54px;
}

/* Our Story Page */
.image-box {
  border-radius: 15px;
  width: 46%;
  height: 100%;
}

.content-vid {
  max-width: 100%;
  min-height: 380px;
}

.image-box.l1.about {
  background-image: url(../images/lets-be-aware.jpg);
  background-position: 100% 70%;
  background-repeat: no-repeat;
  background-size: 110%;
  width: 48%;
  height: 320px;
  position: static;
}

.pagesub-title {
  font-size: 26px;
  line-height: normal;
}

.content-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.4;
}

.basic-ul {
  font-size: 17px;
  line-height: 1.4;
}

.full-width-box.tmargin30 {
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  display: flex;
}

.image-box.l1.vectra-360 {
  background-color: #fff;
  background-image: url(../images/vectra-img.png);
  background-position: 50% 150%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 570px;
  position: static;
}

.image-box.l1.about-2 {
  background-image: url(../images/advance-cosmetic-img.jpg);
  background-position: 69%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 500px;
  position: static;
}

/* Mission and Vision Page */
.sub-navigation-sub-title {
  color: #d5a02e;
  font-family: Roboto, sans-serif;
  font-size: 25px;
  line-height: 31px;
}

.flex-wrapper.vm-flex {
  justify-content: space-between;
  align-items: flex-start;
}

.image-box.full.mission-vission {
  min-height: 650px;
  margin-bottom: 39px;
}

.image-box.full.mission-vission.mission {
  background-image:
    linear-gradient(#00000080, #00000080),
    url(../images/mission-thumb-skeen.jpg);
  background-position:
    0 0,
    50% 25%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  width: 98%;
  min-height: 420px;
  margin-bottom: 20px;
}

.image-box.full.mission-vission.right {
  background-image: url(../images/vision-thumb-skeen.jpg);
  background-position: 50% 36%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 98%;
  min-height: 420px;
  margin-bottom: 20px;
}

.vision-img {
  min-height: 500px;
  object-fit: cover;
  object-position: center center;
}

.vm-box {
  width: 50%;
  padding-left: 0;
}

.vm-box._0-10-margin {
  width: 50%;
}

.vm-content {
  height: 110px;
  font-size: 16px;
}

.content-box.image-background.overlay-bg.team {
  background-image:
    linear-gradient(0deg, #000c, #0000 50%),
    linear-gradient(#0000004d, #0000004d), url(../images/skeen-team-thumb.jpg);
  background-position:
    0 0,
    0 0,
    50%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
  justify-content: flex-end;
  align-items: flex-end;
  width: 50%;
  min-height: 450px;
  padding: 60px 10% 4% 5%;
  display: flex;
  position: relative;
}

.content-box.image-background.overlay-bg.gallery {
  background-image:
    linear-gradient(0deg, #000c, #0000 50%),
    linear-gradient(#0000004d, #0000004d),
    url(../images/gallery-skeen-thumb.jpg);
  background-position:
    0 0,
    0 0,
    75%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
  justify-content: flex-end;
  align-items: flex-end;
  width: 50%;
  min-height: 450px;
  margin-bottom: 0;
  padding: 60px 10% 4% 5%;
  display: flex;
}

.content-box.image-background {
  background-color: #222;
  min-height: 550px;
}

.separator-line.vertical {
  background-image: linear-gradient(#05050500 6%,
      #eec350 20%,
      #b2832c 31%,
      #8f600a 55%,
      #f5ad2a 75%,
      #e8dac1 86%,
      #fff0);
  width: 3px;
  height: 430px;
}

.separator-line.vertical.team {
  position: absolute;
  inset: 11px 0% 82% auto;
}

.seperator-content-box {
  color: #fff;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.sepa-content {
  color: #fff;
  text-align: left;
}

.white-heading.h4 {
  margin-top: 0;
  font-size: 50px;
}

.button-icon {
  background-color: #fff;
  background-image: url(../images/button-icon.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 8px;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  margin-left: 17px;
}

.mission-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  background: #f1f1f1;
  border-radius: 50px;
}

/* FAQ Page */
.faq-box {
  border: 1px solid #0000000d;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25%;
  padding: 30px;
  display: flex;
}

.faq-heading {
  text-transform: none;
  margin-bottom: 30px;
  font-size: 50px;
  line-height: 60px;
}

.faq-sub-heading {
  height: 70px;
  margin-bottom: 20px;
  font-family:
    DM Serif Text,
    sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  display: flex;
}

.faq-info {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 24px;
}

.faq-top {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
  display: flex;
}

.faq-icon-box {
  filter: brightness(50%) grayscale();
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
  margin-bottom: 0;
  margin-right: 20px;
}

.faq-icon-box.gold {
  filter: saturate(50%);
  margin-bottom: 0;
}

/* Skin Cancer */
.content-wrapper._0tpadding.light-bg {
  background-color: #eee8e1;
  padding-top: 40px;
}

.list-spacing {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-list-unstyled li,
.service-list li {
  background-image: url(../images/check-li.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 20px;
  margin-bottom: 10px;
  padding-left: 40px;
  font-size: 16px;
  line-height: 26px;
}

.image-box.services.categories.skin-cancer-management {
  width: 48%;
  height: 700px;
  position: static;
}

.image-box.services.categories {
  background-image: url(../images/skincancer-sec-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 40%;
  height: 570px;
  position: relative;
  left: -41px;
}

.cosmetic-image-square img {
  transition: transform 0.5s ease;
}

.cosmetic-box:hover .cosmetic-image-square img {
  transform: scale(1.1);
  will-change: transform;
}

.cosmetic-box:hover .brix---heading-h3-size {
  color: #b47a1a;
}

.list-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}

.choose-heading {
  color: #000;
  text-align: left;
}

.full-width-box {
  flex: 0 auto;
  width: 100%;
  margin-top: 0;
}

.container.center-alignment {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cosmetic-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  display: flex;
}

.cosmetic-box {
  background-color: #fff;
  border-radius: 20px;
  width: 32%;
  height: 450px;
  text-decoration: none;
  box-shadow: 0 2px 5px #0003;
  will-change: transform;
}

.cosmetic-image-square {
  border-radius: 16px 16px 0 0;
  height: 220px;
  overflow: hidden;
  transform: translate(0);
  position: relative;
}

.brix---heading-h3-size {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: Roboto, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
}

.brix---heading-link-dark {
  color: #211f54;
  text-decoration: none;
  transition: color 0.3s;
}

.brix---text-300-medium {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.brix---mg-bottom-24px-2 {
  margin-bottom: 24px;
  padding: 30px 20px 0;
}

/* Medical Services */
.image-box.services.categories.medical-services {
  background-image: url(../images/vitiligo-handshake.jpg);
  flex-flow: wrap;
  width: 48%;
  height: 500px;
  display: block;
  position: static;
}

.list-spacing.left {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: row;
  padding-left: 0;
}

.brix---avatar-image-link._2.cosmetic-image {
  padding-top: 0;
  top: -240px;
  position: relative;
}

/* Advance Imaging Technology */
.image-box.services.categories.laser-and-technology {
  background-image: url(../images/viewmyconsult.png);
  background-position: 60%;
  width: 48%;
  height: 420px;
  margin-bottom: 10px;
  position: static;
}

.image-box.services.categories.vectra-image-box {
  background-image: url(../images/vectra-img.png);
  width: 48%;
  height: 310px;
  margin-bottom: 10px;
  top: -25px;
  left: -6px;
}

.mid-treatment-heading,
.mid-info {
  text-align: center;
}

.quote-box.ai-box {
  justify-content: flex-start;
  align-items: center;
  width: 23%;
  height: 280px;
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 15px;
}

.quote-box {
  text-align: center;
  border: 2px solid #b77f1e;
  border-radius: 13px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 24%;
  height: 250px;
  padding: 17px;
  font-size: 16px;
  display: flex;
}

.approach-icon {
  width: 70px;
  min-width: 70px;
  height: 70px;
  min-height: 70px;
  margin-bottom: 10px;
}

.treatment-heading {
  height: auto;
  font-size: 21px;
  line-height: 23px;
}

/* Cosmetic Services */
.image-box.services.categories.cosmetic-services {
  background-image: url(../images/face-procedures.jpg);
  width: 44%;
  height: 480px;
  position: static;
}

.black-content-info.margin-b {
  margin-bottom: 25px;
}

.black-content-info {
  color: #000;
}

/* Skin Cancer Diagnosis */
.image-box.skin-cancer-image-box {
  background-image: url(../images/cancer-diagnosis-img.jpg);
  background-position: 75%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  width: 48%;
  height: 100%;
  position: static;
  left: 44px;
}

.content-filler-wrapper {
  flex-flow: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
  display: flex;
}

.flex-wrapper.fill {
  align-items: stretch;
}

.flex-wrapper.bmargin40 {
  margin-bottom: 0;
}

/* Lip Cancer */
.image-box.lip-image-box {
  background-image: url(../images/lip-cancer-img2.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
}

.filler-icon {
  justify-content: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: flex;
}

/* Skin Cancer Surgery */
.image-box.skin-cancer-surgery-box {
  background-image: url(../images/melasma-img2.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  min-height: auto;
  position: static;
  left: 54px;
}

.scs--choose-box {
  justify-content: flex-start;
  margin-bottom: 20px;
  font-size: 17px;
  display: flex;
}

.choose-info {
  line-height: 30px;
}

/* Laser Treatments */
.list-3 {
  flex-flow: wrap;
  justify-content: space-between;
  display: flex;
  width: 100%;
}

.rhino-list {
  width: 48%;
}

.image-box.laser-image-box {
  background-image: url(../images/laser-treatments-featimg.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
  position: static;
  left: 44px;
}

/* Technology */
.image-box.advance-laser {
  background-image: url(../images/vectra-machine.png);
  background-position: 47%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 930px;
}

.service-list.service-list-specialist {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  margin-top: 20px;
  margin-bottom: 40px;
  line-height: 26px;
  list-style-type: none;
  display: flex;
}

.service-list {
  margin-bottom: 20px;
  font-size: 18px;
  display: none;
}

.service-list.service-list-specialist.vectra {
  background-color: #eee8e1;
  border-radius: 15px;
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 40px;
}

.list-item-5 {
  text-align: left;
  margin-bottom: 10px;
  list-style-type: none;
}

.technology-wrapper-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.technology-box-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  border: 2px solid #b77f1e;
  border-radius: 13px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 24%;
  height: 360px;
  margin-bottom: 0;
  padding: 20px;
  font-size: 16px;
  display: flex;
}

.technology-heading-2 {
  height: auto;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 25px;
}

.technology-par {
  margin-bottom: 20px;
}

.technolog-image-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.technology-image {
  object-fit: cover;
  border-radius: 20px;
  width: 48%;
  height: 570px;
}

/* Stretchmarks */
.image-box.stretch-image-box {
  background-image: url(../images/stretch-marks-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 590px;
  margin-bottom: 40px;
  position: static;
  left: 54px;
}

.image-box.melasma-image-box {
  background-image: url(../images/melasma-img.jpg);
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  position: static;
  left: 40px;
}

/* Fillers Page */
.image-box.filler-image-box {
  background-image: url(../images/fillers-img.jpg);
  background-position: 50% 28%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  margin-bottom: 0;
  position: static;
  left: 54px;
}

/* Aesthetics Treatments */
.image-box.aesthetic-image-box {
  background-image: url(../images/cosmetic-treatments-img.jpg);
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  width: 48%;
  height: 520px;
}

.aesthetic-box .cosmetic-image-square {
  height: 280px;
}

.aesthetic-box {
  height: 440px;
  min-height: 440px;
}

/* Cosmetic Mens */
.image-box.mens-image-box {
  background-image: url(../images/cosmetic-mens-img.png);
  background-position: 50% 29%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  position: static;
  left: 40px;
  height: 99%;
}

/* Stem Cell */
.image-box.stem-cell-image-box {
  background-image: url(../images/face-routine-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 92%;
  position: static;
  left: 40px;
}

.content-filler-wrapper.margin {
  margin-bottom: 0;
}

/* Skin Lesion */
.image-box.cosmetic-image-box {
  background-image: url(../images/skin-lesion-img-box.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
  margin-bottom: 0;
  position: static;
  left: 44px;
}

/* Children Dermatology */
.image-box.children-derma {
  background-image: url(../images/children-dermatology-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 530px;
  margin-bottom: 40px;
}

.children-flex {
  width: 100%;
  display: flex;
}

.list-condition {
  color: #333;
  background-image: url(../images/check-li.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 25px;
  margin-bottom: 8px;
  padding-left: 33px;
  font-size: 17px;
  line-height: 28px;
  text-decoration: none;
}

.list-wrapper.rmargin {
  margin-right: 40px;
}

/* Acne */
.image-box.acne-image-box-2 {
  background-image: url(../images/acne-img-left.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 750px;
  position: relative;
}

/* Eczema Page */
.image-box.eczema-image-box {
  background-image: url(../images/eczema-derma-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 500px;
}

.quote-box.approach-box {
  width: 32%;
  height: 170px;
  margin-right: 10px;
  font-size: 15px;
}

/* Psoriasis Page */
.image-box.psoriasis-image {
  background-image: url(../images/psoriasis-img.jpg);
  background-position: 0 68%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  width: 48%;
  height: 510px;
}

.gold-button.services {
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 22px;
}

.hero-button.book-now {
  font-size: 20px !important;
}

/*  Scar Revision */
.image-box.scars-image {
  background-image: url(../images/scar-revision-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  width: 48%;
  min-height: 400px;
}

.quote-box.variety-bo {
  justify-content: flex-start;
  align-items: center;
  width: 18.3%;
  height: 340px;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 15px;
}

.link {
  color: #333;
  text-decoration: none;
}

.image-box.scar-revision-box {
  background-image: url(../images/scar-img-2.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 47%;
  height: 790px;
}

.content-text-box {
  width: 81.7304%;
  min-width: 100%;
  margin-bottom: 10px;
}

/* Patch Testing */
.image-box.patch-image {
  background-image: url(../images/patch-testing-img.jpg);
  background-position: 38%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
  position: static;
  left: 45px;
}

/* Excessive Sweating */
.image-box.excessive-image2 {
  background-image: url(../images/excessive-sweating-hero.png);
  background-position: 65%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  min-height: 820px;
}

/* Birthmarks */
.image-box.birthmarks-image {
  background-image: url(../images/birthmarks-img.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
}

/* Rhinophyma */
.list-spacing.rhino {
  flex-flow: wrap;
  display: flex;
}

.image-box.rhino-image-box {
  background-image: url(../images/skeen-bag.jpg);
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 100%;
  position: static;
  left: 54px;
}

.image-box.rosacea-image-box {
  background-image: url(../images/eye-rejuvenation-thumb.png);
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 400px;
  margin-bottom: 40px;
  position: static;
  left: 54px;
}

.image-box.rhino-image-2 {
  background-image: url(../images/nice-face.jpg);
  background-position: 50% 25%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 48%;
  height: 560px;
  position: static;
  left: 54px;
}

/* Vitiligo */

.image-box.vitiligo-image {
  background-image: url(../images/vitiligo-img.jpg);
  background-position: 0 0;
  background-size: cover;
  width: 48%;
  height: 565px;
  position: static;
  left: 54px;
}

.commitment-par {
  background-color: #eee8e1;
  border: 1px solid #d1ab59;
  border-radius: 15px;
  padding: 18px;
}

.quote-box.vitiligo-box {
  width: 23%;
  height: 240px;
  margin-bottom: 20px;
  margin-right: 10px;
  font-size: 15px !important;
}

/* Privacy Policy */
.fw-accordion .accordion-item {
  width: 100%;
  min-width: 100%;
  margin-bottom: 0;
}

.fw-accordion {
  max-width: 100%;
}

.fw-accordion .accordion-body {
  padding-left: 30px;
  padding-right: 30px;
}

/* Preloader CSS */
#page-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999999999999999;
  overflow: hidden;
}

/* INNER WRAPPER */
.preloader-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   CENTER STACK ALL ELEMENTS
========================= */
.p-img,
.t-1,
.t-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* TEXT STYLE (edit as needed) */
.t-1,
.t-2 {
  font-size: 5.8em;
  font-weight: 500;
  letter-spacing: 1px;
  color: #fff;
  white-space: nowrap;
  font-family:
    DM Serif Text,
    sans-serif;
}

/* =========================
   TEXT FADE SEQUENCE
========================= */
@keyframes fadeSequence {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* =========================
   IMAGE FIRST APPEAR
========================= */
@keyframes zoomFadeFirst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }

  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  55% {
    opacity: 1;
  }

  75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0;
  }
}

/* =========================
   IMAGE FINAL APPEAR
========================= */
@keyframes zoomFadeFinal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  65% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* =========================
   APPLY NEW TIMING
========================= */
.p-img {
  animation:
    zoomFadeFirst 3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    zoomFadeFinal 2s ease forwards;
  animation-delay: 0s, 7s;
}

/* Text 1 */
.t-1 {
  animation: fadeSequence 2s ease forwards;
  animation-delay: 3s;
}

.t-2 {
  animation: fadeSequence 2s ease forwards;
  animation-delay: 5s;
  text-align: center;
  line-height: 1.2;
}

/* =========================
   PRELOADER EXIT
========================= */
.preloader-hide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s ease,
    visibility 0.7s;
}

/* Optional: prevent scroll while loading */
body.loading {
  overflow: hidden;
}

/* Back top */
.btop {
  position: absolute;
  right: 30px;
  /* bottom: 20px; */
  width: 20px;
  height: 20px;
}

/* Menu Icon */
#menu-icon ul {
  display: flex;
  justify-content: center;
  margin: 0 0 5px 0;
  list-style: none;
  padding-left: 0;
}

#menu-icon ul li:first-of-type {
  margin: 0;
}

#menu-icon ul li {
  width: 8px;
  height: 8px;
  background: #000;
  margin: 0 0 0 5px;
  transition: all 1s ease;
}

#menu-icon span {
  display: block;
  color: #000;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

div#menu-icon {
  margin-top: -5px;
  cursor: pointer;
}

.navbar-toggler.collapsed #menu-icon ul li {
  background-color: #000 !important;
}

.navbar-toggler[aria-expanded="true"] #menu-icon ul li {
  background-color: #d1ab59 !important;
}

.navbar-toggler[aria-expanded="true"] #menu-icon ul .center {
  background-color: #f1f1f1 !important;
}

/* Services Thumb */
.services-thumb {
  width: 100%;
  height: 250px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  border-radius: 30px;
}