:root {
  --white: #fff;
  --text: #333333;
  --primary: #008b94;
  --aqua: #c4e7ea;
  --deep-sea: #007079;
  --red: #c12121;
  --light-white: #edf3f5;
  --gray: #d8d8d8;
  --light-yellow: #fcf8df;
  --dark-gray: #666666;
  --golden: #ff8a43;
}

.border-text {
  border-bottom: 2px solid white;
}
/** hero section (its common in almost all pages) **/

.nh-hero {
  height: 100dvh;
}

.nh-hero-inner {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  background-size: cover;
  background-position: center;
  clip-path: path("M0 0H100%V85% C75% 105% 25% 105% 0 85% Z");
  padding-bottom: 133px;
}

.nh-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(56, 70, 63, 0.18) 0%,
    rgba(56, 70, 63, 0) 50%,
    rgba(56, 70, 63, 0.4) 75%,
    rgba(56, 70, 63, 0.25) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.nh-hero-heading {
  color: var(--white);
  /* text-decoration: underline; */
  font-size: 48px;
  line-height: 150%;
}

.home-red-note {
  height: 74px;
  width: fit-content;
  background: var(--white);
  border: 1px solid var(--red);
  right: 0px;
  bottom: 130px;
}
.red-note-left {
  width: 57px;
  background: var(--red);
}
.red-note-right {
  padding: 16px 64px 16px 32px;
}

.red-note {
  color: var(--red);
  max-width: 290px;
}

/* information section */

.information-section {
  padding-top: 140px;
  padding-bottom: 130px;
}

.filter-button {
  padding: 16px 32px;
  background: var(--light-white);
}

.filter-button:not(:last-child) {
  border-right: 1px solid #d8d8d880;
}
.filter-button.filter-active {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  position: relative;
  border: none;
}

.filter-button.filter-active::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="8" viewBox="0 0 11 8"><path d="M5.5,0,11,8H0Z" transform="translate(11 8) rotate(180)" fill="%23008b94"/></svg>')
    no-repeat center;
  background-size: contain;
}
.br-left {
  border-radius: 4px 0px 0px 4px;
}
.br-right {
  border-radius: 0px 4px 4px 0px;
}

.filter-result-bar {
  padding: 26px 24px 26px 48px;
  border: 1px solid var(--gray);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03);
}
.filter-result-button {
  padding: 6px 24px;
  border: 1px solid var(--primary);
  border-radius: 20px;
}

/* service section */
.service-button {
  padding: 25px 24px 25px 42px;
  gap: 55px;
  background: var(--light-yellow);
  border-radius: 41px;
  min-width: 312px;
  letter-spacing: 0px;
  justify-content: space-between;
}

.services-container {
  gap: 88px;
}
.services-section {
  gap: 116px;
}
.services-strip {
  background: var(--light-white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.service-tag {
  padding: 6px 24px;
  background: var(--white);
  border-radius: 4px;
}
.service-foot-logo {
  position: absolute;
  top: -43px;
  left: -47px;
}
.service-number {
  left: 0;
  top: -123px;
}
.services-strip-images {
  top: -32px;
}
.service-img {
  object-fit: cover;
  width: 647px;
  height: 439px;
}
.service-spacer {
  width: 647px;
  height: 496px;
  background: var(--gray);
}

/* care section */

.care-section {
  padding-top: 184px;
  padding-bottom: 113px;
}

.care-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.care-img {
  height: 460px;
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  border: 1px solid var(--white);
}
.care-logo {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background: var(--white);
  height: 112px;
  width: 112px;
  border-radius: 100%;
  bottom: -56px;
}

.care-card-bottom {
  padding: 0px 20px;
}

.card-bottom-section {
  padding-top: 40px;
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}
/* card-bottom-section */
.card-bottom-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.care-bottom-img-left {
  object-fit: cover;
  height: 225px;
  width: 192px;
}

.care-bc-right {
  max-width: 387px;
  width: 100%;
}
.care-bc-arrow {
  right: 0px;
  bottom: 0px;
  height: 40px;
  width: 40px;
}

.care-bottom-left {
  padding-bottom: 40px;
}
.care-bottom-right {
  margin-left: 57px;
}

.care-bottom-img-right {
  object-fit: cover;
  height: 80px;
  width: 80px;
}

.card-bc-hr {
  height: 1px;
  width: 100%;
  background: var(--gray);
}

.card-br-pb-32 {
  padding-bottom: 32px;
}
.card-br-padding {
  padding-top: 32px;
  padding-bottom: 40px;
}

.feature-section {
  padding-top: 160px;
  padding-bottom: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* min-height: 1016px; */
  gap: 66px;
}

.feature-slide-button {
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 100%;
  border: 1px solid var(--aqua);
  cursor: pointer;
}

.feature-slider .swiper-slide {
  width: 70%;
  max-width: 1200px;
  border-radius: 16px;
  box-shadow: 0px 10px 30px rgba(64, 105, 101, 0.1);
  background: var(--white);
}

.feature-slide-right {
  width: 40%;
}
.feature-slide-left {
  width: 60%;
  padding: 72px 80px 72px 96px;
}
.feature-slide-img {
  object-fit: cover;
  height: 443px;
  width: 100%;
  border-radius: 0px 8px 8px 0px;
}
.feature-logo {
  top: -30px;
  left: -47px;
}

/* event section */
.event-section {
  padding-top: 128px;
  padding-bottom: 160px;
  gap: 72px;
}

.event-slider {
  width: 100%;
}
.event-slider .swiper-slide {
  max-width: 337.5px;
}
.event-slide-img {
  width: 100%;
  height: 214px;
  object-fit: cover;
  border-radius: 8px;
}

.event-slide-logo {
  bottom: 0;
  right: 0;
}
.event-slide-button {
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 6px 24px;
  border-radius: 20px;
}
/* column section */
.column-section {
  padding-bottom: 160px;
  gap: 87px;
}
.category-filter {
  height: 44px;
  padding: 12px 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--white);
  border-right: 1px solid var(--white);
  background: var(--light-white);
}
.category-filter-active {
  background: var(--primary);
  color: var(--white);
}
.swiper {
  width: 100%;
  overflow: hidden;
}

.column-slide {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 40px;
}

.column-slide-img {
  width: 100%;
  height: 238px;
  object-fit: cover;
}

.profile-photo {
  width: 57px;
  height: 57px;
  border-radius: 100%;
}

.clinical-section {
  padding-top: 213px;
  padding-bottom: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  margin-top: 253px;
}
.clinical-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #33333357;
  z-index: 1;
}
.clinical-section > * {
  position: relative;
  z-index: 3;
}

.clinical-section-top-layer {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 181px;
  z-index: 2;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.75) 40%,
    rgba(255, 255, 255, 0.35) 70%,
    rgba(255, 255, 255, 0) 100%
  );
}

.cl-img {
  border-radius: 16px;
  object-fit: cover;
  position: relative;
}

.cl-image-container {
  position: absolute;
  top: 0;
  left: -71px;
}
.cl-img-parent {
  position: relative;
  top: -463px;
}
.cl-img-1 {
  height: 351px;
  width: 413px;
  top: 40px;
}
.cl-img-2 {
  height: 302px;
  width: 430px;
}
.cl-img-3 {
  height: 244px;
  width: 285px;
  top: 130px;
}
.cl-img-4 {
  height: 378px;
  width: 536px;
  top: 30px;
}

@media (max-width: 600px) {
  .column-slide {
    grid-template-columns: 1fr;
    column-gap: 16px;
    row-gap: 20px;
  }

  .nh-hero-heading {
    font-size: 32px;
  }
  .home-red-note {
    height: auto;
    min-height: 74px;
    bottom: 20px;
  }
  .information-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .filter-button {
    padding: 16px 10px;
  }
  .service-number {
    left: 16px;
  }
  .care-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .care-card-container {
    gap: 32px;
  }
  .care-bottom-right {
    margin-left: 0px;
  }
  .feature-slide-left {
    width: 100%;
    padding: 24px 10px;
  }
  .feature-slide-right {
    width: 100%;
  }
  .feature-slider .swiper-slide {
    width: 100%;
  }
  .feature-slider {
    padding: 0px 16px;
  }
  .feature-slide-img {
    border-radius: 8px 8px 8px 8px;
  }
  .event-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .category-filter {
    height: 44px;
    width: auto;
    padding: 12px 17px;
  }
  .column-section {
    padding-bottom: 80px;
    gap: 87px;
  }
  .cl-image-container-mb {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cl-image-container-mb img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  .clinical-section {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  .column-slide {
    grid-template-columns: 1fr;
    column-gap: 16px;
    row-gap: 20px;
  }

  .nh-hero-heading {
    font-size: 32px;
  }
  .home-red-note {
    height: auto;
    min-height: 74px;
    bottom: 20px;
  }
  .information-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .filter-button {
    padding: 16px 10px;
  }
  .service-number {
    left: 16px;
  }
  .care-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .care-card-container {
    gap: 32px;
  }
  .care-bottom-right {
    margin-left: 0px;
  }
  .feature-slide-left {
    width: 100%;
    padding: 24px 10px;
  }
  .feature-slide-right {
    width: 100%;
  }
  .feature-slider .swiper-slide {
    width: 100%;
  }
  .feature-slider {
    padding: 0px 16px;
  }
  .feature-slide-img {
    border-radius: 8px 8px 8px 8px;
  }
  .event-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .category-filter {
    height: 44px;
    width: auto;
    padding: 12px 17px;
  }
  .column-section {
    padding-bottom: 80px;
    gap: 87px;
  }
  .cl-image-container-mb {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cl-image-container-mb img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  .clinical-section {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .column-slide {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 35px;
  }
  .home-red-note {
    height: auto;
    min-height: 74px;
    bottom: 32px;
  }
  .filter-result-bar {
    padding: 26px 24px 26px 24px;
    border: 1px solid var(--gray);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.03);
  }
  .service-number {
    left: 16;
  }
  .feature-slide-left {
    width: 100%;
    padding: 24px 10px;
  }
  .feature-slide-right {
    width: 100%;
  }
  .column-section {
    padding-bottom: 80px;
    gap: 87px;
  }
  .cl-image-container-mb {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .cl-image-container-mb img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  .clinical-section {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) and (max-width: 1201px) {
}