@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

.surgery-page-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
}
.surgery-page-container .page-title {
  font-family: "Host Grotesk";
  font-weight: 600;
  font-size: 90px;
  line-height: 110px;
  text-transform: uppercase;
  padding-bottom: 50px;
  color: #f9f9f9;
  border-bottom: 1px solid rgba(146, 146, 146, 0.3);
}
.surgery-page-container .surgery-links {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.surgery-page-container .surgery-link-item {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(249, 249, 249, 0.22);
  border-radius: 24px;
  color: #f9f9f9;
  font-family: "Host Grotesk";
  font-weight: 500;
  font-size: 22px;
  line-height: 32px;
  text-transform: uppercase;
  transition: 0.3s ease-in-out;
}
.surgery-page-container .surgery-link-item::after {
  content: "";
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: url("../icons/arrow_right_white.svg") center / contain no-repeat;
  transition: 0.3s ease-in-out;
}
.surgery-page-container .surgery-link-item:hover {
  border-color: rgba(249, 249, 249, 0.7);
  background: rgba(249, 249, 249, 0.08);
}
.surgery-page-container .surgery-link-item:hover::after {
  transform: translateX(6px);
}
.surgery-page-container .empty-text {
  color: #919797;
  font-family: "Host Grotesk";
  font-size: 20px;
  line-height: 30px;
}
@media only screen and (max-width: 991px) {
  .surgery-page-container {
    margin: 170px auto 0;
  }
  .surgery-page-container .page-title {
    font-size: 40px;
    line-height: 52px;
  }
  .surgery-page-container .surgery-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 575px) {
  .surgery-page-container {
    margin: 130px auto 0;
  }
  .surgery-page-container .page-title {
    font-size: 32px;
    line-height: 42px;
    padding-bottom: 30px;
  }
  .surgery-page-container .surgery-links {
    margin-top: 40px;
    grid-template-columns: repeat(1, 1fr);
  }
  .surgery-page-container .surgery-link-item {
    min-height: 96px;
    padding: 22px;
    border-radius: 18px;
    font-size: 18px;
    line-height: 28px;
  }
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Helvetica Neue", sans-serif;
  scroll-behavior: smooth;
  outline: none;
}
.p-lr {
  padding-left: 50px;
  padding-right: 50px;
}
ul {
  padding-left: 18px;
}
button {
  border: none;
  background: transparent;
  cursor: pointer;
}
body {
  background: #010101;
  overflow-x: hidden;
}
html {
  overflow-x: hidden;
}
body.hidden {
  overflow: hidden;
}
header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  max-width: 1440px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-logo {
    width: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
    .logoLight {
      display: block;
    }
    .logoDark {
      display: none;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    .language {
      display: flex;
      flex-direction: column;
      align-items: start;
      position: relative;
      .current-lang {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #f9f9f9;
        img {
          width: 24px;
          height: 24px;
          min-width: 24px;
          transition: 0.3s ease-in-out;
        }
      }
      .other-languages {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        position: absolute;
        z-index: 13;
        left: 0;
        top: 46px;
        padding: 4px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        border-radius: 4px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
        gap: 8px;
        transition: 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
        border: 1px solid #fff;
        .lang-item {
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          font-weight: 400;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 6px;
          &:first-child {
            padding-bottom: 8px;
            border-bottom: 1px solid #f2f2f2;
          }
        }
      }
    }
    .language.active {
      .current-lang {
        .downIcon {
          transform: rotate(180deg);
        }
      }
      .other-languages {
        top: 36px;
        opacity: 1;
        visibility: visible;
      }
    }
    .hamburger {
      display: flex;
      align-items: center;
      width: 150px;
      min-width: 150px;
      position: relative;
      border: 1px solid #8a8a8a;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      border-radius: 100px;
      padding: 12px 24px;
      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        text-align: start;
      }
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
        position: absolute;
        top: 50%;
        right: 24px;
        transition: 0.3s ease-in-out;
      }
      .hamburger-icon {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
      .close-icon {
        opacity: 0;
        transform: translateY(-50%) scale(0);
      }
    }
    .hamburger.active {
      .hamburger-icon {
        opacity: 0;
        transform: translateY(-50%) scale(0);
      }
      .close-icon {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }
    }
  }
}

.mobile-menu-left {
  background: #010101;
  position: fixed;
  z-index: 19;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(146, 146, 146, 0.3);
  transition: 0.6s ease-in-out;
  video {
    width: 150%;
  }
}
.mobile-menu-right {
  background: #010101;
  position: fixed;
  z-index: 19;
  top: 0;
  right: -100%;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 90px;
  transition: 0.6s ease-in-out;
  border-left: 1px solid rgba(146, 146, 146, 0.3);

  .mobile-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 20px;
    p {
      font-weight: 400;
      font-size: 26px;
      line-height: 36px;
      color: #bcbcbc;
      transition: 0.3s ease-in-out;
      text-wrap: nowrap;
      font-family: "Host Grotesk";
    }
    .line {
      width: 100%;
      transform: rotate(180deg);
      height: 1px;
      transition: 0.5s ease-in-out;
      opacity: 0;
      background: radial-gradient(
        117.3% 9171.13% at 117.3% 0%,
        #000000 0%,
        #ffffff 100%
      );
    }
    &:hover {
      p {
        font-size: 46px;
        line-height: 53px;
        color: #f9f9f9;
      }
      .line {
        opacity: 1;
      }
    }
  }
  .mobile-submenu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .mobile-submenu-btn {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 20px;
      p {
        font-weight: 400;
        font-size: 26px;
        line-height: 36px;
        color: #bcbcbc;
        transition: 0.3s ease-in-out;
        text-wrap: nowrap;
      }
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
        transition: 0.3s ease-in-out;
      }
      .line {
        width: 100%;
        transform: rotate(180deg);
        height: 1px;
        transition: 0.5s ease-in-out;
        opacity: 0;
        background: radial-gradient(
          117.3% 9171.13% at 117.3% 0%,
          #000000 0%,
          #ffffff 100%
        );
      }
      &:hover {
        p {
          font-size: 46px;
          line-height: 53px;
          color: #f9f9f9;
        }
        img {
          width: 34px;
          height: 34px;
          min-width: 34px;
        }
        .line {
          opacity: 1;
        }
      }
    }
    .mobile-submenu-links {
      background: #010101;
      position: fixed;
      z-index: 20;
      top: 0;
      right: -100%;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
      padding: 120px 20px 120px 90px;
      transition: 0.6s ease-in-out;
      .back-to-dropdown-menu {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        transform: translateX(-8px);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .submenu-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 36px;
        overflow-y: auto;
        max-height: calc(100svh - 320px);
        &::-webkit-scrollbar {
          width: 2px;
          border-radius: 100px;
          background: #787676;
        }
        &::-webkit-scrollbar-thumb {
          background: #f9f9f9;
        }
        .submenu-link {
          display: flex;
          align-items: center;
          width: 100%;
          padding-right: 20px;
          p {
            width: 100%;
            font-weight: 400;
            font-size: 20px;
            line-height: 32px;
            color: #bcbcbc;
            transition: 0.3s ease-in-out;
            font-family: "Host Grotesk";
          }
          &:hover {
            p {
              font-size: 24px;
              line-height: 32px;
              color: #f9f9f9;
            }
          }
        }
      }
    }
  }
}

/* Match hero band to uploaded video background */
.home-hero-container {
  position: relative;
  z-index: 0;
  padding-bottom: 52px;
  isolation: isolate;
}
.home-hero-container::before {
  content: "";
  position: absolute;
  top: -320px;
  right: auto;
  bottom: -125px;
  left: 50%;
  width: 100dvw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(97, 56, 152, 0.42) 0, rgba(55, 23, 91, 0.28) 28%, rgba(13, 5, 30, 0.14) 62%, rgba(0, 0, 0, 0) 90%),
    linear-gradient(90deg, rgba(11, 3, 25, 0.9) 0%, rgba(9, 3, 22, 0.92) 42%, rgba(7, 2, 15, 0.86) 70%, rgba(0, 0, 0, 0.72) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.mobile-menu-left.showed {
  left: 0;
}
.mobile-menu-right.showed {
  right: 0;
}
@keyframes spinReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.home-hero-container {
  max-width: 1440px;
  width: 100%;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .home-hero-inner {
    max-width: 780px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    video {
      max-width: 100%;
      width: auto;
      object-fit: contain;
      height: 410px;
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 76%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 76%, transparent 100%);
      mask-composite: intersect;
    }
    .hero-title {
      margin-top: 30px;
      font-weight: 400;
      font-size: 32px;
      line-height: 48px;
      text-align: center;
      color: #fff;
      font-family: "Host Grotesk";
    }
    .hero-links {
      margin-top: 40px;
      max-width: 510px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      .hero-link {
        padding: 12px 24px;
        border: 1px solid #f9f9f9;
        color: #f9f9f9;
        border-radius: 100px;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #f9f9f9;
        text-align: center;
        transition: 0.3s ease-in-out;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 20px;
          width: 0;
          height: 0;
          border-radius: 100px;
          background: #fff;
          transition: 0.3s ease-in-out;
          z-index: -1;
        }
        &:hover {
          color: #010101;
          &::after {
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.home-about-container {
  max-width: 1440px;
  width: 100%;
  margin: 100px auto 0;
  .home-about-main {
    position: relative;
    width: 100%;
    border-radius: 100px;
    border: 1px solid #1f1e1e;
    padding: 120px 90px 0 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    .home-about-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .home-about-content {
      max-width: 620px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-bottom: 108px;
      .home-about-label {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-transform: uppercase;
        color: #f9f9f9;
      }
      .doctor-fName {
        margin-top: 16px;
        font-weight: 600;
        font-size: 60px;
        line-height: 80px;
        text-transform: uppercase;
        color: #fff;
        font-family: "Host Grotesk";
      }
      .short-desc {
        margin-top: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        overflow: hidden;
        -webkit-box-orient: vertical;
        height: 96px;
        p,
        li,
        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(249, 249, 249, 0.8);
        }
      }
      .doctor-socials {
        margin-top: 24px;
        display: flex;
        align-items: center;
        gap: 20px;
        .social-link {
          width: 20px;
          height: 20px;
          min-width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0.6;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .more {
        margin-top: 40px;
        max-width: 240px;
        width: 100%;
        padding: 12px 24px;
        border: 1px solid #f9f9f9;
        color: #f9f9f9;
        border-radius: 100px;
        transition: 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: relative;
        p {
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          color: #f9f9f9;
          transition: 0.3s ease-in-out;
        }
        img {
          width: 24px;
          height: 24px;
          min-width: 24px;
          transition: 0.3s ease-in-out;
        }
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 20px;
          width: 0;
          height: 0;
          border-radius: 100px;
          background: #fff;
          transition: 0.3s ease-in-out;
          z-index: -1;
        }
        &:hover {
          p {
            color: #010101;
          }
          img {
            filter: invert(1);
          }
          &::after {
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .home-about-doctor-image {
      max-width: 440px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
  }
}
.home-address-contact {
  margin: 50px auto 0;
  max-width: 1440px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  .address-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border: 1px solid #1f1e1e;
    border-radius: 100px;
    padding: 90px 40px 130px;
    .box-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100px;
      z-index: -2;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      z-index: -1;
      background: linear-gradient(
        227.83deg,
        rgba(21, 16, 16, 0.88) 4.13%,
        rgba(31, 30, 30, 0.88) 94.92%
      );
    }
    .box-title {
      font-weight: 500;
      font-size: 50px;
      line-height: 60px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
    .box-address {
      margin-top: 10px;
      font-weight: 400;
      font-size: 30px;
      line-height: 45px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
    .short-desc {
      margin-top: 10px;
      p,
      li,
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(249, 249, 249, 0.8);
      }
    }
    .view-address {
      max-width: 240px;
      width: 100%;
      margin-top: 40px;
      padding: 12px 24px;
      border: 1px solid #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 100px;
      transition: 0.3s ease-in-out;
      position: relative;
      z-index: 2;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: 0;
        height: 0;
        border-radius: 100px;
        background: #fff;
        transition: 0.3s ease-in-out;
        z-index: -1;
      }
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
        transition: 0.3s ease-in-out;
      }
      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #f9f9f9;
        transition: 0.3s ease-in-out;
      }
      &:hover {
        &::after {
          left: 0;
          width: 100%;
          height: 100%;
        }
        p {
          color: #010101;
        }
        img {
          filter: invert(1);
        }
      }
    }
  }
  .contact-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border: 1px solid #1f1e1e;
    border-radius: 100px;
    padding: 90px 40px 130px;
    .box-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 100px;
      z-index: -2;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      z-index: -1;
      background: linear-gradient(
        227.83deg,
        rgba(21, 16, 16, 0.88) 4.13%,
        rgba(31, 30, 30, 0.88) 94.92%
      );
    }
    .box-title {
      font-weight: 500;
      font-size: 50px;
      line-height: 60px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
    .contact-phones {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      .contact-phone-item {
        display: flex;
        align-items: center;
        gap: 6px;
        .phone-label,
        .phone-number {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(249, 249, 249, 0.8);
        }
      }
    }
    .make-appointment {
      margin-top: auto;
      padding: 12px 24px;
      max-width: 240px;
      width: 100%;
      border: 1px solid #f9f9f9;
      color: #f9f9f9;
      border-radius: 100px;
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
      color: #f9f9f9;
      text-align: center;
      transition: 0.3s ease-in-out;
      position: relative;
      z-index: 2;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: 0;
        height: 0;
        border-radius: 100px;
        background: #fff;
        transition: 0.3s ease-in-out;
        z-index: -1;
      }
      &:hover {
        color: #010101;
        &::after {
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.nose-treatment-container {
  margin: 120px auto 0;
  max-width: 1440px;
  width: 100%;
  .section-title {
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
    color: #f9f9f9;
  }
  .treatments {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 20px;
    .treatment-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 50px 40px 0;
      border-radius: 30px;
      .treatment-title {
        font-weight: 600;
        font-size: 30px;
        line-height: 40px;
        text-transform: uppercase;
        color: #f9f9f9;
        font-family: "Host Grotesk";
      }
      .treatment-desc {
        margin-top: 20px;
        p,
        li,
        span {
          font-weight: 400;
          font-size: 20px;
          line-height: 40px;
          color: rgba(249, 249, 249, 0.8);
        }
        ul {
          list-style: none;
          padding-left: 0;
        }
      }
      .treatment-image {
        display: block;
        margin: 24px auto 0;
        width: auto;
        height: auto;
        max-width: 300px;
        max-height: 290px;
        object-fit: contain;
      }
      &:nth-child(3n + 1) {
        background: linear-gradient(180deg, #2c1847 0%, #592072 76.44%);
      }
      &:nth-child(3n + 2) {
        background: linear-gradient(180deg, #0b1648 0%, #394897 76.44%);
      }
      &:nth-child(3n + 3) {
        background: linear-gradient(180deg, #06201c 0%, #436085 100%);
      }
    }
  }
  .nose-info-wrapper {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    .nose-info-card {
      margin-top: -76px;
      max-width: 370px;
      width: 100%;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .nose-info-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: #1e1e1e;
        font-family: "Host Grotesk";
      }
      .nose-info-card-image {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        margin-top: 16px;
        position: relative;
        .card-image {
          width: 100%;
          border-radius: 10px;
          height: 100%;
          object-fit: cover;
        }
        .icon {
          position: absolute;
          top: 16px;
          right: 14px;
          width: 24px;
          height: 24px;
        }
      }
      .nose-info-desc {
        margin-top: 16px;
        ul {
          li {
            &::marker {
              color: #098aae;
            }
          }
        }
        li,
        span,
        p {
          font-weight: 400;
          font-size: 15px;
          line-height: 22px;
          color: #787676;
        }
      }
      &:first-child {
        margin-top: 0;
      }
      &:nth-child(even) {
        margin-left: auto;
      }
    }
    video {
      max-width: 1100px;
      width: 100%;
      position: absolute;
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.home-make-appointment-section {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
  .home-make-appointment-innner {
    width: 100%;
    background: linear-gradient(90deg, #222222 0%, #000000 70%, #000000 100%);
    border-radius: 30px;
    padding: 60px 40px;
    .make-appointment-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 48px;
      color: #f9f9f9;
      position: relative;
      z-index: 3;
      font-family: "Host Grotesk";
    }
    .make-appointment-desc {
      margin-top: 10px;
      z-index: 3;
      position: relative;

      p,
      li,
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(249, 249, 249, 0.86);
      }
    }
    .make-appointment-link {
      z-index: 3;
      margin-top: 40px;
      max-width: 240px;
      display: block;
      padding: 12px 24px;
      border: 1px solid #f9f9f9;
      color: #f9f9f9;
      border-radius: 100px;
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
      color: #f9f9f9;
      text-align: center;
      transition: 0.3s ease-in-out;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: 0;
        height: 0;
        border-radius: 100px;
        background: #fff;
        transition: 0.3s ease-in-out;
        z-index: -1;
      }
      &:hover {
        color: #010101;
        &::after {
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ball-large {
    position: absolute;
    width: 280px;
    top: 0;
    right: 20px;
    animation: spinReverse 25s linear infinite;
  }
  .ball-medium {
    position: absolute;
    width: 125px;
    bottom: 0;
    left: 58%;
    animation: spinReverse 25s linear infinite;
  }
  .ball-small {
    position: absolute;
    width: 80px;
    top: 100px;
    left: 39%;
    animation: spinReverse 25s linear infinite;
  }
}
.select2-results__option--selectable {
  font-size: 16px;
  line-height: 24px;
  padding: 6px;
  height: auto;
}
.select2-container--default .select2-results__option--selected {
  background-color: #000000 !important;
  color: #fff;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #000000 !important;
  color: #fff;
}
.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent #fff transparent;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #fff transparent transparent transparent;
}
.contact-form-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 80px;
  max-width: 1440px;
  margin: 120px auto 0;
  .contact-form-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #f9f9f9;
    position: relative;
    z-index: 2;
  }
  .contact-form-subtitle {
    margin-top: 10px;
    max-width: 680px;
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    color: #f9f9f9;
    position: relative;
    z-index: 2;
    font-family: "Host Grotesk";
  }
  .contact-form {
    margin-top: 50px;
    max-width: 750px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    position: relative;
    z-index: 2;
    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }
    .iti__selected-country-primary {
      padding-left: 0;
    }
    .iti__arrow {
      border-color: #fff;
    }
    .iti__search-input {
      color: #000000;
      &::placeholder {
        color: #000000;
      }
    }
    select,
    input {
      background: transparent;
      border: none;
      padding-bottom: 6px;
      border-bottom: 1px solid #f9f9f9;
      width: 100%;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f9f9f9;
      &::placeholder {
        color: #f9f9f9;
      }
    }
    #phone {
      padding-left: 48px !important;
    }
    .select2-container--default .select2-selection--single {
      background: transparent;
      border: none;
      border-bottom: 1px solid #f9f9f9;
      border-radius: 0;
      color: #f9f9f9;
      .select2-selection__rendered {
        color: #f9f9f9;
        padding-left: 0;
      }
    }

    .send-contact-form {
      border: 1px solid #f9f9f9;
      border-radius: 100px;
      max-width: 240px;
      width: 100%;
      padding: 12px;
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
      color: #f9f9f9;
      display: block;
      transition: 0.3s ease-in-out;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        width: 0;
        height: 0;
        border-radius: 100px;
        background: #fff;
        transition: 0.3s ease-in-out;
        z-index: -1;
      }
      &:hover {
        color: #010101;
        &::after {
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ball-medium {
    position: absolute;
    left: 44%;
    width: 160px;
    z-index: 1;
    top: 75px;
  }
  .ball-small {
    position: absolute;
    left: 60%;
    width: 100px;
    z-index: 1;
    bottom: 0px;
  }
  .contact-video {
    z-index: -1;
    position: absolute;
    right: -550px;
    top: -140px;
    width: 1510px;
  }
}
.insta-gallery-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  .insta-gallery-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    .insta-gallery-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 48px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
    .insta-name {
      font-weight: 600;
      font-size: 26px;
      line-height: 38px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
  }
  .insta-galleries {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    .insta-gallery {
      width: 100%;
      height: 410px;
      border-radius: 4px;
      position: relative;
      .gallery-image {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: cover;
      }
      .gallery-icon {
        position: absolute;
        z-index: 1;
        top: 22px;
        right: 22px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: 0.3s ease-in-out;
        img {
          border-radius: 0;
          object-fit: contain;
        }
      }
      .insta-gallery-content {
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 4px;
        background: rgba(23, 23, 24, 0.7);
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.3s ease-in-out;
        .like-comments-count {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          gap: 40px;
          .like-count,
          .comments-count {
            display: flex;
            align-items: center;
            gap: 10px;
            img {
              width: 32px;
              height: 32px;
              min-width: 32px;
            }
            p {
              font-weight: 400;
              font-size: 24px;
              line-height: 36px;
              color: #fff;
              font-family: "Host Grotesk";
            }
          }
        }
        .content-text {
          margin-top: 40px;
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          text-align: center;
          color: #fff;
          font-family: "Host Grotesk";
        }
        .content-tags {
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          text-align: center;
          color: #fff;
          font-family: "Host Grotesk";
        }
      }
      &:hover {
        .insta-gallery-content {
          opacity: 1;
        }
        .gallery-icon {
          opacity: 0;
        }
      }
    }
  }
}
footer {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  .footer-main {
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    padding: 50px 0;
    .doctor-mail {
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;
      color: #f9f9f9;
      font-family: "Host Grotesk";
    }
    .socials {
      display: flex;
      align-items: center;
      gap: 20px;
      .social-item {
        width: 24px;
        height: 24px;
        min-width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .all-right-reserved {
    padding: 40px 0 50px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #f9f9f9;
    font-family: "Host Grotesk";
  }
}
.team-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: end;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
  .modal-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    justify-content: end;
    .closeModal {
      width: 46px;
      height: 46px;
      min-width: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f9f9f9;
      border-radius: 10px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .info-box {
      max-width: 600px;
      width: 100%;
      max-height: calc(100svh - 60px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background: #f9f9f9;
      padding: 50px;
      border-radius: 30px 0 0 30px;
      .member-image {
        width: 100%;
        height: 308px;
        border-radius: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 30px;
          object-fit: cover;
        }
      }
      .member-fname {
        margin-top: 30px;
        font-family: "Host Grotesk";
        font-weight: 500;
        font-size: 30px;
        line-height: 40px;
        color: #1e1e1e;
      }
      .member-position {
        margin-top: 2px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #919797;
      }
      .short-info {
        margin-top: 30px;
        width: 100%;
        p,
        li,
        span {
          font-family: "Host Grotesk";
          font-weight: 400;
          font-size: 18px;
          line-height: 27px;
          color: #787676;
        }
      }
      .socials {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 50px;
        .social-item {
          width: 36px;
          height: 36px;
          min-width: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #1e1e1e;
          border-radius: 10px;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
}
.team-info-modal.showed {
  opacity: 1;
  visibility: visible;
}

.gallery-page-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .page-title {
    font-family: "Host Grotesk";
    font-weight: 600;
    font-size: 90px;
    line-height: 110px;
    text-transform: uppercase;
    padding-bottom: 50px;
    color: #f9f9f9;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
  }
  .all-galleries {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 20px;
    .gallery-image {
      width: 100%;
      height: 350px;
      border-radius: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 30px;
      }
    }
  }
}
.contact-page-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .page-title {
    font-family: "Host Grotesk";
    font-weight: 600;
    font-size: 90px;
    line-height: 110px;
    text-transform: uppercase;
    padding-bottom: 50px;
    color: #f9f9f9;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
  }
}
.map {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  height: 600px;
  iframe {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    filter: grayscale(1) brightness(0.8);
  }
}
.blog-page-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .page-title {
    font-family: "Host Grotesk";
    font-weight: 600;
    font-size: 90px;
    line-height: 110px;
    text-transform: uppercase;
    padding-bottom: 50px;
    color: #f9f9f9;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
  }
  .all-blogs {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 20px;
    .blog-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border: 1px solid #525252;
      border-radius: 30px;
      padding: 16px 16px 30px;
      .blog-image {
        width: 100%;
        height: 300px;
        border-radius: 30px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 30px;
          transition: 0.3s ease-in-out;
        }
      }
      .blog-card-body {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .share-time {
          font-family: "Host Grotesk";
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #f9f9f9;
        }
        .blog-title {
          margin-top: 20px;
          font-weight: 500;
          font-size: 24px;
          line-height: 36px;
          font-family: "Host Grotesk";
          color: #f9f9f9;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 72px;
        }
        .short-desc {
          margin-top: 4px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 48px;
          p,
          li,
          span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #919797;
          }
        }
        .more {
          margin-top: 30px;
          width: 46px;
          height: 46px;
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 46px;
          background: rgba(249, 249, 249, 0.21);
          border-radius: 10px;
          transition: 0.3s ease-in-out;
          position: relative;
          z-index: 2;
          img {
            width: 24px;
            height: 24px;
            transition: 0.3s ease-in-out;
            position: relative;
            z-index: 2;
          }
          &::after {
            content: "";
            position: absolute;
            width: 0;
            height: 100%;
            background: #f9f9f9;
            border-radius: 10px;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0;
            transition: 0.3s ease-in-out;
          }
        }
      }
      &:hover {
        .blog-image {
          img {
            transform: scale(1.1);
          }
        }
        .blog-card-body {
          .more {
            img {
              filter: invert(100);
            }
            &::after {
              opacity: 1;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    gap: 8px;
    .pagination-item,
    .pagination-points {
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      transition: 0.3s ease-in-out;
      color: #f9f9f9;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
    .pagination-item:hover {
      background: #f9f9f9;
      color: #1e1e1e;
    }
    .pagination-item.active {
      background: #f9f9f9;
      color: #1e1e1e;
    }
  }
}
.blog-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .blog-detail-main {
    max-width: 1210px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    .share-date {
      font-family: "Host Grotesk";
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #f9f9f9;
    }
    .blog-title {
      font-family: "Host Grotesk";
      font-weight: 600;
      font-size: 50px;
      line-height: 60px;
      color: #f9f9f9;
    }
    .short-description {
      width: 100%;
      li,
      p,
      span {
        font-weight: 400;
        font-size: 18px;
        line-height: 27px;
        color: rgba(249, 249, 249, 0.82);
      }
    }
    .blog-image {
      width: 100%;
      border-radius: 30px;
      height: 520px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        object-fit: cover;
      }
    }
    .blog-text {
      img,
      video {
        width: 100%;
        border-radius: 30px;
      }
      p,
      li,
      span {
        font-weight: 400;
        font-size: 18px;
        line-height: 27px;
        color: rgba(249, 249, 249, 0.82);
      }
    }
  }
  .similar-blogs {
    width: 100%;
    margin-top: 120px;
    .similar-blogs-title {
      font-family: "Host Grotesk";
      font-weight: 600;
      font-size: 36px;
      line-height: 48px;
      color: #f9f9f9;
    }
    .similar-blogs-slide {
      margin-top: 50px;
      width: 100%;
      .blog-card {
        width: 433px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid #525252;
        border-radius: 30px;
        padding: 16px 16px 30px;
        .blog-image {
          width: 100%;
          height: 300px;
          border-radius: 30px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 30px;
            transition: 0.3s ease-in-out;
          }
        }
        .blog-card-body {
          width: 100%;
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .share-time {
            font-family: "Host Grotesk";
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #f9f9f9;
          }
          .blog-title {
            margin-top: 20px;
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;
            font-family: "Host Grotesk";
            color: #f9f9f9;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 72px;
          }
          .short-desc {
            margin-top: 4px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 48px;
            p,
            li,
            span {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #919797;
            }
          }
          .more {
            margin-top: 30px;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 46px;
            background: rgba(249, 249, 249, 0.21);
            border-radius: 10px;
            transition: 0.3s ease-in-out;
            position: relative;
            z-index: 2;
            img {
              width: 24px;
              height: 24px;
              transition: 0.3s ease-in-out;
              position: relative;
              z-index: 2;
            }
            &::after {
              content: "";
              position: absolute;
              width: 0;
              height: 100%;
              background: #f9f9f9;
              border-radius: 10px;
              top: 0;
              left: 0;
              z-index: -1;
              opacity: 0;
              transition: 0.3s ease-in-out;
            }
          }
        }
        &:hover {
          .blog-image {
            img {
              transform: scale(1.1);
            }
          }
          .blog-card-body {
            .more {
              img {
                filter: invert(100);
              }
              &::after {
                opacity: 1;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.surgery-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .page-title {
    font-family: "Host Grotesk";
    font-weight: 600;
    font-size: 50px;
    line-height: 60px;
    text-transform: uppercase;
    padding-bottom: 50px;
    color: #f9f9f9;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
    span {
      color: rgba(249, 249, 249, 0.5);
    }
  }
  .tags {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 480px;
    .tag-item {
      padding: 10px 16px;
      border-radius: 100px;
      background: #f9f9f9;
      font-family: "Host Grotesk";
      font-weight: 400;
      font-size: 14px;
      line-height: 21px;
      color: #1e1e1e;
    }
  }
  .surgery-video {
    max-width: 920px;
    width: 100%;
    display: block;
    margin: -40px auto 0;
    position: relative;
    z-index: -1;
  }
  .need-know {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 100px 0;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
    gap: 20px;
    .need-know-label {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #f9f9f9;
      padding: 12px 30px;
      border-radius: 100px;
      .cube {
        width: 8px;
        height: 8px;
        min-width: 8px;
        border-radius: 2px;
        background: #8a38f5;
      }
      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-transform: uppercase;
        color: #f9f9f9;
        width: max-content;
      }
    }
    .need-know-text {
      max-width: 770px;
      p,
      li,
      span {
        font-weight: 400;
        font-size: 30px;
        line-height: 42px;
        color: #f9f9f9;
      }
      p {
        span {
          color: rgba(249, 249, 249, 0.5);
        }
      }
    }
  }
  .surgery-detail-text {
    margin: 100px auto 0;
    max-width: 1210px;
    width: 100%;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Host Grotesk";
      color: #f9f9f9;
    }
    p,
    li,
    span {
      font-weight: 400;
      font-size: 18px;
      line-height: 27px;
      color: rgba(249, 249, 249, 0.82);
    }
  }
}
.about-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .about-image-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 550px;
    width: 550px;
    margin-bottom: 50px;
    margin-left: 50px;
    float: right;
    .about-image {
      width: 100%;
      height: 530px;
      border-radius: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 30px;
      }
    }
    .about-socials {
      width: 100%;
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid rgba(146, 146, 146, 0.3);
      display: grid;
      grid-template-columns: repeat(2, max-content);
      gap: 30px;
      .about-social-item {
        display: flex;
        align-items: center;
        gap: 10px;
        img {
          width: 24px;
          min-width: 24px;
          height: 24px;
        }
        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #f9f9f9;
        }
      }
    }
  }
  .about-content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Host Grotesk";
      color: #f9f9f9;
    }
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: rgba(249, 249, 249, 0.82);
    }
    img,
    video,
    iframe {
      max-width: 100%;
    }
  }
}
.team-page-container {
  max-width: 1440px;
  width: 100%;
  margin: 210px auto 0;
  .page-title {
    font-family: "Host Grotesk";
    font-weight: 600;
    font-size: 90px;
    line-height: 110px;
    text-transform: uppercase;
    padding-bottom: 50px;
    color: #f9f9f9;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
    span {
      display: block;
      color: rgba(249, 249, 249, 0.5);
    }
  }
  .team-hero {
    width: 100%;
    margin-top: 120px;
    .team-hero-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      .down-icon {
        width: 46px;
        min-width: 46px;
        height: 46px;
        background: #f9f9f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        img {
          width: 24px;
          height: 24px;
          transition: 0.3s ease-in-out;
          position: relative;
          z-index: 2;
        }
        &::after {
          content: "";
          position: absolute;
          height: 0;
          width: 100%;
          background: #8a38f5;
          border-radius: 10px;
          top: 0;
          left: 0;
          z-index: -1;
          opacity: 0;
          transition: 0.3s ease-in-out;
        }
        &:hover {
          img {
            filter: invert(100);
          }
          &::after {
            opacity: 1;
            height: 100%;
          }
        }
      }
      .head-title {
        max-width: 370px;
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
        color: #f9f9f9;
      }
    }
    .team-hero-video {
      max-width: 900px;
      width: 100%;
      margin: 100px auto 0;
      display: block;
    }
  }
  .purpose {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 100px 0;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3);
    gap: 20px;
    .purpose-label {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #f9f9f9;
      padding: 12px 30px;
      border-radius: 100px;
      .cube {
        width: 8px;
        height: 8px;
        min-width: 8px;
        border-radius: 2px;
        background: #8a38f5;
      }
      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-transform: uppercase;
        color: #f9f9f9;
        width: max-content;
      }
    }
    .purpose-text {
      max-width: 770px;
      p,
      li,
      span {
        font-weight: 400;
        font-size: 30px;
        line-height: 42px;
        color: #f9f9f9;
      }
      p {
        span {
          color: rgba(249, 249, 249, 0.5);
        }
      }
    }
  }
  .info-about-doctor {
    margin-top: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
    .doctor-image {
      max-width: 600px;
      width: 100%;
      border-radius: 30px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        object-fit: cover;
      }
    }
    .doctor-info-content {
      max-width: 660px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .doctor-name {
        font-family: "Host Grotesk";
        font-weight: 600;
        font-size: 50px;
        line-height: 60px;
        color: #f9f9f9;
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(146, 146, 146, 0.3);
      }
      .short-info {
        margin-top: 30px;
        width: 100%;
        p,
        li,
        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(249, 249, 249, 0.86);
        }
      }
      .make-appointment {
        margin-top: 30px;
        padding: 12px 24px;
        max-width: 240px;
        width: 100%;
        border: 1px solid #f9f9f9;
        color: #f9f9f9;
        border-radius: 100px;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #f9f9f9;
        text-align: center;
        transition: 0.3s ease-in-out;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 20px;
          width: 0;
          height: 0;
          border-radius: 100px;
          background: #fff;
          transition: 0.3s ease-in-out;
          z-index: -1;
        }
        &:hover {
          color: #010101;
          &::after {
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .meet-our-team {
    margin-top: 120px;
    width: 100%;
    .team-title {
      font-family: "Host Grotesk";
      font-weight: 600;
      font-size: 50px;
      line-height: 60px;
      color: #f9f9f9;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(146, 146, 146, 0.3);
      span {
        color: rgba(249, 249, 249, 0.5);
      }
    }
    .our-team {
      width: 100%;
      margin-top: 100px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      .our-team-left {
        min-width: 360px;
        width: 360px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: sticky;
        top: 140px;
        .team-label {
          display: flex;
          align-items: center;
          gap: 10px;
          border: 1px solid #f9f9f9;
          padding: 12px 30px;
          border-radius: 100px;
          .cube {
            width: 8px;
            height: 8px;
            min-width: 8px;
            border-radius: 2px;
            background: #8a38f5;
          }
          p {
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            text-transform: uppercase;
            color: #f9f9f9;
            width: max-content;
          }
        }
        .our-team-text {
          margin-top: 30px;
          width: 100%;
          p,
          li,
          span {
            font-weight: 400;
            font-size: 24px;
            line-height: 36px;
            color: #f9f9f9;
          }
        }
      }
      .our-team-main {
        max-width: 900px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .headof-team-image {
          width: 100%;
          height: 540px;
          background: #f9f9f9;
          border-radius: 30px;
          padding: 14px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            object-fit: cover;
          }
        }
        .our-team-members {
          margin-top: 50px;
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 50px 20px;
          .team-member {
            width: 100%;
            position: relative;
            border-radius: 30px;
            padding: 14px 14px 6px;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .member-card-bg {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 30px;
              z-index: -1;
            }
            .member-image {
              width: 100%;
              height: 300px;
              border-radius: 30px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                border-radius: 30px;
                object-fit: cover;
                transition: 0.3s ease-in-out;
              }
            }
            .member-fname {
              margin-top: 20px;
              font-family: "Host Grotesk";
              font-weight: 500;
              font-size: 24px;
              line-height: 36px;
              color: #1e1e1e;
              display: -webkit-box;
              height: 36px;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
            .member-position {
              margin-top: 2px;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #919797;
              display: -webkit-box;
              height: 48px;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .member-more-btn {
              margin-top: auto;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 16px;
              padding-right: 3px;
              p {
                font-family: "Host Grotesk";
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: #1e1e1e;
              }
              .icon {
                width: 46px;
                height: 46px;
                min-width: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                background: #8a38f5;
                transition: 0.3s ease-in-out;
                position: relative;
                z-index: 2;
                img {
                  width: 24px;
                  height: 24px;
                  transition: 0.3s ease-in-out;
                  position: relative;
                  z-index: 2;
                }
                &::after {
                  content: "";
                  position: absolute;
                  width: 0;
                  height: 100%;
                  background: #f9f9f9;
                  border-radius: 10px;
                  top: 0;
                  left: 0;
                  z-index: -1;
                  opacity: 0;
                  transition: 0.3s ease-in-out;
                }
              }
            }
            &:hover {
              .member-image {
                img {
                  transform: scale(1.1);
                }
              }
              .member-more-btn {
                .icon {
                  img {
                    filter: invert(100);
                  }
                  &::after {
                    opacity: 1;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .why-us {
    margin-top: 120px;
    width: 100%;
    .why-us-title {
      font-family: "Host Grotesk";
      font-weight: 600;
      font-size: 36px;
      line-height: 48px;
      color: #f9f9f9;
    }
    .why-us-boxes {
      width: 100%;
      margin-top: 50px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 20px;
      .why-us-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 40px;
        border-radius: 30px;
        width: 100%;
        border: 1px solid #525252;
        min-height: 460px;
        transition: 0.3s ease-in-out;
        .box-title {
          font-family: "Host Grotesk";
          font-weight: 600;
          font-size: 24px;
          line-height: 36px;
          color: #f9f9f9;
        }
        .box-description {
          width: 100%;
          margin: 20px 0 50px;
          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: rgba(249, 249, 249, 0.86);
          }
        }
        .icon {
          margin-top: auto;
          width: 64px;
          height: 64px;
          min-width: 64px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(249, 249, 249, 0.2);
          border-radius: 100px;
          img {
            width: 30px;
            height: 30px;
          }
        }
        &:hover {
          transform: translate(2px, -4px);
          box-shadow: 3px 6px 12px 0px rgba(249, 249, 249, 0.2);
        }
      }
    }
  }
}

@media only screen and (max-width: 1250px) {
  .p-lr {
    padding-left: 35px;
    padding-right: 35px;
  }
  header {
    .header-logo {
      width: 104px;
    }
  }
  .mobile-menu-left {
    video {
      width: 130%;
    }
  }
  .mobile-menu-right {
    gap: 30px;
    padding: 60px;
    .mobile-menu-link {
      gap: 16px;
      p {
        font-size: 22px;
        line-height: 32px;
      }
      &:hover {
        p {
          font-size: 42px;
          line-height: 50px;
        }
      }
    }
    .mobile-submenu {
      .mobile-submenu-btn {
        gap: 16px;
        p {
          font-size: 22px;
          line-height: 32px;
        }
        img {
          width: 22px;
          height: 22px;
          min-width: 22px;
        }
        &:hover {
          p {
            font-size: 42px;
            line-height: 50px;
          }
          img {
            width: 32px;
            height: 32px;
            min-width: 32px;
          }
        }
      }
      .mobile-submenu-links {
        gap: 30px;
        padding: 100px 20px 100px 60px;
        .back-to-dropdown-menu {
          width: 36px;
          height: 36px;
          min-width: 36px;
        }
        .submenu-links {
          gap: 24px;
          max-height: calc(100svh - 266px);
          .submenu-link {
            padding-right: 16px;
            p {
              font-size: 18px;
              line-height: 28px;
            }
            &:hover {
              p {
                font-size: 22px;
                line-height: 30px;
              }
            }
          }
        }
      }
    }
  }
  .home-hero-container {
    .home-hero-inner {
      max-width: 700px;
      video {
        height: 360px;
      }
      .hero-title {
        margin-top: 24px;
        font-size: 28px;
        line-height: 40px;
      }
      .hero-links {
        margin-top: 36px;
        max-width: 460px;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        .hero-link {
          padding: 10px 20px;
        }
      }
    }
  }
  .home-about-container {
    margin: 80px auto 0;
    .home-about-main {
      padding: 100px 70px 0 30px;
      gap: 30px;
      border-radius: 80px;
      .home-about-bg {
        border-radius: 80px;
      }
      .home-about-content {
        max-width: 520px;
        padding-bottom: 88px;
        .home-about-label {
          font-size: 14px;
          line-height: 20px;
        }
        .doctor-fName {
          margin-top: 12px;
          font-size: 48px;
          line-height: 64px;
        }
        .short-desc {
          margin-top: 12px;
          height: 80px;
          p,
          li,
          span {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .doctor-socials {
          margin-top: 20px;
          gap: 16px;
        }
        .more {
          margin-top: 36px;
          max-width: 200px;
          padding: 10px 20px;
        }
      }
      .home-about-doctor-image {
        max-width: 400px;
      }
    }
  }
  .home-address-contact {
    margin: 40px auto 0;
    .address-box {
      border-radius: 80px;
      padding: 70px 30px 100px;
      .box-bg {
        border-radius: 80px;
      }
      &::after {
        border-radius: 80px;
      }
      .box-title {
        font-size: 40px;
        line-height: 52px;
      }
      .box-address {
        font-size: 26px;
        line-height: 40px;
      }
      .view-address {
        max-width: 200px;
        margin-top: 30px;
        padding: 10px 20px;
      }
    }
    .contact-box {
      border-radius: 80px;
      padding: 70px 30px 100px;
      .box-bg {
        border-radius: 80px;
      }
      &::after {
        border-radius: 80px;
      }
      .box-title {
        font-size: 40px;
        line-height: 52px;
      }
      .contact-phones {
        margin-top: 12px;
        .contact-phone-item {
          .phone-label,
          .phone-number {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .make-appointment {
        max-width: 200px;
        padding: 10px 20px;
      }
    }
  }
  .nose-treatment-container {
    margin: 100px auto 0;
    .section-title {
      font-size: 20px;
      line-height: 30px;
    }
    .treatments {
      margin-top: 40px;
      grid-template-columns: repeat(3, 1fr);
      .treatment-item {
        padding: 40px 30px 0;
        .treatment-title {
          font-size: 28px;
          line-height: 36px;
        }
        .treatment-desc {
          margin-top: 16px;
          p,
          li,
          span {
            font-size: 18px;
            line-height: 28px;
          }
        }
        .treatment-image {
          margin: 20px auto 0;
          max-width: 240px;
          max-height: 230px;
        }
      }
    }
    .nose-info-wrapper {
      margin-top: 100px;
      .nose-info-card {
        margin-top: -56px;
        max-width: 330px;
        .nose-info-title {
          font-size: 18px;
          line-height: 28px;
        }
        .nose-info-card-image {
          height: 180px;
          margin-top: 12px;
          .icon {
            top: 14px;
            right: 12px;
            width: 22px;
            height: 22px;
          }
        }
        .nose-info-desc {
          margin-top: 14px;
          li,
          span,
          p {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      video {
        max-width: 900px;
      }
    }
  }
  .home-make-appointment-section {
    margin: 100px auto 0;
    padding-top: 40px;
    padding-bottom: 40px;
    .home-make-appointment-innner {
      padding: 50px 30px;
      .make-appointment-title {
        font-size: 30px;
        line-height: 42px;
      }
      .make-appointment-link {
        margin-top: 30px;
        max-width: 200px;
        padding: 10px 20px;
      }
    }
    .ball-large {
      width: 200px;
      top: 0;
      right: 20px;
    }
    .ball-medium {
      width: 100px;
      left: 50%;
    }
    .ball-small {
      width: 60px;
      top: 75px;
      left: 36%;
    }
  }
  .contact-form-container {
    padding-top: 60px;
    margin: 100px auto 0;
    .contact-form-title {
      font-size: 14px;
      line-height: 20px;
    }
    .contact-form-subtitle {
      max-width: 600px;
      font-size: 30px;
      line-height: 42px;
    }
    .contact-form {
      margin-top: 40px;
      max-width: 600px;
      gap: 30px;
      .form-items {
        gap: 20px;
      }
      .send-contact-form {
        max-width: 200px;
        padding: 10px;
      }
    }
    .ball-medium {
      left: 42%;
      width: 120px;
      top: 65px;
    }
    .ball-small {
      left: 55%;
      width: 80px;
    }
    .contact-video {
      right: -430px;
      top: -100px;
      width: 1210px;
    }
  }
  .insta-gallery-container {
    margin: 160px auto 0;
    .insta-gallery-head {
      .insta-gallery-title {
        font-size: 30px;
        line-height: 42px;
      }
      .insta-name {
        font-size: 24px;
        line-height: 32px;
      }
    }
    .insta-galleries {
      margin-top: 40px;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px 16px;
      .insta-gallery {
        height: 440px;
        .gallery-icon {
          top: 20px;
          right: 20px;
          width: 30px;
          height: 30px;
          min-width: 30px;
        }
        .insta-gallery-content {
          padding: 20px 16px;
          .like-comments-count {
            gap: 30px;
            .like-count,
            .comments-count {
              img {
                width: 30px;
                height: 30px;
                min-width: 30px;
              }
              p {
                font-size: 20px;
                line-height: 32px;
              }
            }
          }
          .content-text {
            margin-top: 30px;
          }
        }
      }
    }
  }
  footer {
    margin: 100px auto 0;
    .footer-main {
      padding: 40px 0;
      .doctor-mail {
        font-size: 18px;
        line-height: 28px;
      }
      .socials {
        gap: 16px;
      }
    }
    .all-right-reserved {
      padding: 30px 0 40px;
      font-size: 14px;
      line-height: 20px;
    }
  }

  .gallery-page-container {
    margin: 170px auto 0;
    .page-title {
      font-size: 72px;
      line-height: 96px;
      padding-bottom: 40px;
    }
    .all-galleries {
      margin-top: 80px;
      gap: 40px 20px;
      .gallery-image {
        height: 300px;
      }
    }
  }

  .contact-page-container {
    margin: 170px auto 0;
    .page-title {
      font-size: 72px;
      line-height: 96px;
      padding-bottom: 40px;
    }
  }
  .map {
    margin: 100px auto 0;
    height: 500px;
  }

  .blog-page-container {
    margin: 170px auto 0;
    .page-title {
      font-size: 72px;
      line-height: 96px;
      padding-bottom: 40px;
    }
    .all-blogs {
      margin-top: 80px;
      gap: 40px 20px;
      .blog-card {
        .blog-image {
          height: 240px;
        }
        .blog-card-body {
          .share-time {
            font-size: 14px;
            line-height: 20px;
          }
          .blog-title {
            font-size: 20px;
            line-height: 32px;
            height: 64px;
          }
          .short-desc {
            height: 40px;
            p,
            li,
            span {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .more {
            margin-top: 26px;
            width: 42px;
            height: 42px;
            min-width: 42px;
            img {
              width: 22px;
              height: 22px;
            }
          }
        }
      }
    }
    .pagination {
      margin-top: 80px;
      .pagination-item,
      .pagination-points {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .blog-detail-container {
    margin: 170px auto 0;
    .blog-detail-main {
      max-width: 100%;
      gap: 40px;
      .share-date {
        font-size: 14px;
        line-height: 20px;
      }
      .blog-title {
        font-size: 40px;
        line-height: 52px;
      }
      .short-description {
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
      .blog-image {
        height: 440px;
      }
      .blog-text {
        p,
        li,
        span {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
    .similar-blogs {
      margin-top: 100px;
      .similar-blogs-title {
        font-size: 30px;
        line-height: 44px;
      }
      .similar-blogs-slide {
        margin-top: 40px;
        .blog-card {
          width: 403px;
          .blog-image {
            height: 280px;
          }
          .blog-card-body {
            .share-time {
              font-size: 14px;
              line-height: 20px;
            }
            .blog-title {
              font-size: 20px;
              line-height: 32px;
              height: 64px;
            }
            .short-desc {
              height: 40px;
              p,
              li,
              span {
                font-size: 14px;
                line-height: 20px;
              }
            }
            .more {
              margin-top: 26px;
              width: 42px;
              height: 42px;
              min-width: 42px;
              img {
                width: 22px;
                height: 22px;
              }
            }
          }
        }
      }
    }
  }
  .surgery-detail-container {
    margin: 170px auto 0;
    .page-title {
      font-size: 40px;
      line-height: 52px;
      padding-bottom: 40px;
    }
    .tags {
      margin-top: 40px;
      gap: 12px;
      max-width: 480px;
      .tag-item {
        padding: 8px 14px;
      }
    }
    .surgery-video {
      max-width: 820px;
    }
    .need-know {
      padding: 80px 0;
      .need-know-label {
        gap: 8px;
        padding: 10px 24px;
      }
      .need-know-text {
        max-width: 620px;
        p,
        li,
        span {
          font-size: 24px;
          line-height: 36px;
        }
      }
    }
    .surgery-detail-text {
      margin: 80px auto 0;
      max-width: 100%;
      p,
      li,
      span {
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
  .about-container {
    margin: 170px auto 0;
    .about-image-socials {
      min-width: 450px;
      width: 450px;
      margin-bottom: 40px;
      margin-left: 40px;
      .about-image {
        height: 430px;
      }
      .about-socials {
        margin-top: 24px;
        padding-top: 24px;
        gap: 24px;
      }
    }
  }
  .team-page-container {
    margin: 170px auto 0;
    .page-title {
      font-size: 72px;
      line-height: 96px;
      padding-bottom: 40px;
    }
    .team-hero {
      margin-top: 100px;
      .team-hero-head {
        .down-icon {
          width: 44px;
          min-width: 44px;
          height: 44px;
          img {
            width: 22px;
            height: 22px;
          }
        }
        .head-title {
          max-width: 300px;
          font-size: 20px;
          line-height: 32px;
        }
      }
      .team-hero-video {
        max-width: 800px;
        margin: 80px auto 0;
      }
    }
    .purpose {
      padding: 80px 0;
      .purpose-label {
        gap: 8px;
        padding: 10px 24px;
      }
      .purpose-text {
        max-width: 680px;
        p,
        li,
        span {
          font-size: 26px;
          line-height: 36px;
        }
      }
    }
    .info-about-doctor {
      margin-top: 100px;
      gap: 30px;
      .doctor-image {
        max-width: 520px;
      }
      .doctor-info-content {
        max-width: 580px;
        .doctor-name {
          font-size: 40px;
          line-height: 52px;
          padding-bottom: 24px;
        }
        .short-info {
          margin-top: 24px;
        }
        .make-appointment {
          margin-top: 24px;
          padding: 10px 20px;
          max-width: 200px;
        }
      }
    }
    .meet-our-team {
      margin-top: 100px;
      .team-title {
        font-size: 40px;
        line-height: 52px;
        padding-bottom: 40px;
      }
      .our-team {
        margin-top: 80px;
        gap: 30px;
        .our-team-left {
          min-width: 280px;
          width: 280px;
          .team-label {
            gap: 8px;
            padding: 10px 24px;
          }
          .our-team-text {
            margin-top: 24px;
            p,
            li,
            span {
              font-size: 20px;
              line-height: 32px;
            }
          }
        }
        .our-team-main {
          max-width: 840px;
          .headof-team-image {
            height: 500px;
            padding: 12px;
          }
          .our-team-members {
            margin-top: 40px;
            gap: 40px 20px;
            .team-member {
              padding: 12px 12px 4px;
              height: 460px;
              .member-image {
                height: 280px;
              }
              .member-fname {
                margin-top: 16px;
                font-size: 20px;
                line-height: 32px;
                height: 32px;
              }
              .member-position {
                font-size: 14px;
                line-height: 20px;
                height: 40px;
              }
              .member-more-btn {
                padding-right: 0;
                .icon {
                  width: 44px;
                  height: 44px;
                  min-width: 44px;
                  img {
                    width: 22px;
                    height: 22px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .why-us {
      margin-top: 80px;
      .why-us-title {
        font-size: 30px;
        line-height: 40px;
      }
      .why-us-boxes {
        margin-top: 40px;
        gap: 40px 20px;
        .why-us-box {
          padding: 30px;
          min-height: 400px;
          .box-title {
            font-size: 20px;
            line-height: 32px;
          }
          .box-description {
            margin: 16px 0 40px;
            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .icon {
            width: 60px;
            height: 60px;
            min-width: 60px;
            img {
              width: 28px;
              height: 28px;
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1100px) {
  .team-page-container {
    .meet-our-team {
      .our-team {
        .our-team-main {
          .our-team-members {
            .team-member {
              .member-more-btn {
                .icon {
                  transform: translateX(8px);
                }
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 992px) {
  .mobile-menu-left {
    border: none;
    width: 100%;
    video {
      filter: brightness(0.4);
    }
  }
  .mobile-menu-right {
    background: transparent;
    width: 100%;
    gap: 30px;
    padding: 60px 30px;
    border: none;
    .mobile-submenu {
      .mobile-submenu-links {
        width: 100%;
        padding: 100px 10px 100px 30px;
      }
    }
  }
  .home-about-container {
    .home-about-main {
      .home-about-content {
        .doctor-fName {
          font-size: 40px;
          line-height: 60px;
        }
        .short-desc {
          -webkit-line-clamp: 2;
          height: 40px;
        }
      }
    }
  }
  .home-address-contact {
    grid-template-columns: repeat(1, 1fr);
    .contact-box {
      .make-appointment {
        margin-top: 30px;
      }
    }
  }
  .nose-treatment-container {
    .treatments {
      grid-template-columns: repeat(1, 1fr);
      .treatment-item {
        padding: 40px 30px 0;
        .treatment-image {
          margin: 20px 0 0 auto;
        }
      }
    }
  }
  .contact-form-container {
    padding-top: 0;
    .contact-form {
      max-width: 500px;
      gap: 30px;
    }
    .ball-medium {
      display: none;
    }
    .ball-small {
      display: none;
    }
    .contact-video {
      right: -380px;
      top: -60px;
      width: 1010px;
    }
  }
  .insta-gallery-container {
    .insta-galleries {
      grid-template-columns: repeat(3, 1fr);
      .insta-gallery {
        height: 320px;
      }
    }
  }

  .gallery-page-container {
    .all-galleries {
      grid-template-columns: repeat(2, 1fr);
      .gallery-image {
        height: 300px;
      }
    }
  }
  .blog-page-container {
    .all-blogs {
      grid-template-columns: repeat(2, 1fr);
      .blog-card {
        .blog-image {
          height: 280px;
        }
      }
    }
  }

  .surgery-detail-container {
    .surgery-video {
      max-width: 650px;
    }
    .need-know {
      flex-direction: column;
      .need-know-text {
        max-width: 100%;
      }
    }
  }
  .about-container {
    .about-image-socials {
      min-width: 370px;
      width: 370px;
      .about-image {
        height: 350px;
      }
    }
  }
  .team-page-container {
    .purpose {
      flex-direction: column;
      .purpose-text {
        max-width: 100%;
      }
    }
    .info-about-doctor {
      flex-direction: column;
      align-items: flex-start;
      .doctor-image {
        max-width: 100%;
      }
      .doctor-info-content {
        max-width: 100%;
      }
    }
    .meet-our-team {
      .our-team {
        flex-direction: column;
        .our-team-left {
          min-width: 0;
          width: 100%;
          position: initial;
        }
        .our-team-main {
          max-width: 100%;
          .headof-team-image {
            height: auto;
          }
          .our-team-members {
            .team-member {
              .member-more-btn {
                .icon {
                  transform: translateX(0);
                }
              }
            }
          }
        }
      }
    }
    .why-us {
      .why-us-boxes {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
@media only screen and (max-width: 768px) {
  .p-lr {
    padding-left: 20px;
    padding-right: 20px;
  }
  header {
    .header-logo {
      width: 84px;
    }
    .header-right {
      .hamburger {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        p {
          display: none;
        }
        img {
          width: 20px;
          height: 20px;
          min-width: 20px;
          right: 50%;
        }
        .hamburger-icon {
          transform: translate(50%, -50%) scale(1);
        }
        .close-icon {
          transform: translate(50%, -50%) scale(0);
        }
      }
      .hamburger.active {
        .hamburger-icon {
          transform: translate(50%, -50%) scale(0);
        }
        .close-icon {
          transform: translate(50%, -50%) scale(1);
        }
      }
    }
  }
  .mobile-menu-left {
    video {
      width: 150%;
    }
  }
  .mobile-menu-right {
    gap: 20px;
    padding: 60px 20px;
    border: none;
    .mobile-menu-link {
      gap: 16px;
      p {
        font-size: 20px;
        line-height: 30px;
      }
      &:hover {
        p {
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
    .mobile-submenu {
      .mobile-submenu-btn {
        gap: 16px;
        p {
          font-size: 20px;
          line-height: 30px;
        }
        img {
          width: 20px;
          height: 20px;
          min-width: 20px;
        }
        &:hover {
          p {
            font-size: 20px;
            line-height: 30px;
          }
          img {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }
        }
      }
      .mobile-submenu-links {
        gap: 20px;
        padding: 100px 10px 40px 20px;
        .back-to-dropdown-menu {
          width: 32px;
          height: 32px;
          min-width: 32px;
        }
        .submenu-links {
          gap: 16px;
          max-height: calc(100svh - 192px);
          .submenu-link {
            padding-right: 12px;
            p {
              font-size: 16px;
              line-height: 24px;
            }
            &:hover {
              p {
                font-size: 16px;
                line-height: 24px;
              }
            }
          }
        }
      }
    }
  }
  .home-hero-container {
    .home-hero-inner {
      max-width: 100%;
      video {
        height: 310px;
      }
      .hero-title {
        font-size: 24px;
        line-height: 36px;
      }
      .hero-links {
        max-width: 410px;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
  .home-about-container {
    margin: 60px auto 0;
    .home-about-main {
      padding: 40px 0 0 20px;
      gap: 20px;
      border-radius: 24px;
      overflow: hidden;
      .home-about-bg {
        border-radius: 24px;
      }
      .home-about-content {
        max-width: 420px;
        padding-bottom: 28px;
        .home-about-label {
          font-size: 12px;
          line-height: 16px;
        }
        .doctor-fName {
          margin-top: 10px;
          font-size: 24px;
          line-height: 32px;
        }
        .short-desc {
          display: none;
        }
        .doctor-socials {
          display: none;
        }
        .more {
          margin-top: 24px;
          max-width: 120px;
          padding: 8px 16px;
        }
      }
      .home-about-doctor-image {
        max-width: 200px;
      }
    }
  }
  .home-address-contact {
    margin: 30px auto 0;
    .address-box {
      border-radius: 30px;
      padding: 30px 20px 40px;
      .box-bg {
        border-radius: 30px;
      }
      &::after {
        border-radius: 30px;
      }
      .box-title {
        font-size: 32px;
        line-height: 44px;
      }
      .box-address {
        font-size: 18px;
        line-height: 28px;
      }
      .view-address {
        max-width: 160px;
        margin-top: 24px;
      }
    }
    .contact-box {
      border-radius: 30px;
      padding: 30px 20px 40px;
      .box-bg {
        border-radius: 30px;
      }
      &::after {
        border-radius: 30px;
      }
      .box-title {
        font-size: 32px;
        line-height: 44px;
      }
      .make-appointment {
        margin-top: 24px;
        max-width: 160px;
      }
    }
  }
  .nose-treatment-container {
    margin: 80px auto 0;
    .section-title {
      font-size: 18px;
      line-height: 28px;
    }
    .treatments {
      margin-top: 30px;
      .treatment-item {
        padding: 30px 20px 0;
        .treatment-title {
          font-size: 24px;
          line-height: 32px;
        }
        .treatment-desc {
          p,
          li,
          span {
            font-size: 16px;
            line-height: 24px;
          }
        }
        .treatment-image {
          max-width: 220px;
          max-height: 210px;
        }
      }
    }
    .nose-info-wrapper {
      margin-top: 80px;
      gap: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      .nose-info-card {
        margin-top: 0;
        max-width: 100%;
        height: 100%;
        .nose-info-title {
          font-size: 16px;
          line-height: 24px;
        }
        .nose-info-card-image {
          height: 160px;
        }
      }
      video {
        display: none;
      }
    }
  }
  .home-make-appointment-section {
    margin: 80px auto 0;
    padding-top: 0;
    padding-bottom: 0;
    .home-make-appointment-innner {
      padding: 40px 20px;
      .make-appointment-title {
        font-size: 24px;
        line-height: 32px;
      }
      .make-appointment-link {
        margin-top: 24px;
        max-width: 160px;
      }
    }
    .ball-large {
      width: 160px;
      top: 13%;
      right: 20px;
    }
    .ball-medium {
      display: none;
    }
    .ball-small {
      display: none;
    }
  }
  .contact-form-container {
    margin: 80px auto 0;
    .contact-form-title {
      font-size: 12px;
      line-height: 16px;
    }
    .contact-form-subtitle {
      max-width: 100%;
      font-size: 24px;
      line-height: 32px;
    }
    .contact-form {
      margin-top: 30px;
      max-width: 100%;
      gap: 20px;
      .form-items {
        gap: 20px;
      }
      .send-contact-form {
        max-width: 160px;
      }
    }
    .contact-video {
      right: -360px;
      top: -100px;
      width: 950px;
      filter: brightness(0.5);
    }
  }
  .insta-gallery-container {
    margin: 120px auto 0;
    .insta-gallery-head {
      .insta-gallery-title {
        font-size: 24px;
        line-height: 32px;
      }
      .insta-name {
        font-size: 20px;
        line-height: 30px;
      }
    }
    .insta-galleries {
      margin-top: 30px;
      grid-template-columns: repeat(2, 1fr);
      .insta-gallery {
        height: 400px;
        .insta-gallery-content {
          .content-text {
            margin-top: 24px;
          }
        }
      }
    }
  }
  footer {
    margin: 80px auto 0;
    .footer-main {
      padding: 30px 0;
      flex-direction: column;
      .doctor-mail {
        font-size: 16px;
        line-height: 24px;
      }
    }
    .all-right-reserved {
      padding: 20px 0 30px;
    }
  }
  .team-info-modal {
    justify-content: center;
    .modal-info {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: 20px;
      padding-right: 20px;
      .closeModal {
        width: 40px;
        height: 40px;
        min-width: 40px;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .info-box {
        max-width: 100%;
        max-height: calc(100svh - 120px);
        padding: 24px 20px;
        border-radius: 30px;
        .member-image {
          height: auto;
        }
        .member-fname {
          margin-top: 24px;
          font-size: 24px;
          line-height: 32px;
        }
        .member-position {
          font-size: 14px;
          line-height: 20px;
        }
        .short-info {
          margin-top: 24px;
          p,
          li,
          span {
            font-size: 16px;
            line-height: 24px;
          }
        }
        .socials {
          gap: 12px;
          margin-top: 30px;
          .social-item {
            width: 30px;
            height: 30px;
            min-width: 30px;
            img {
              width: 18px;
              height: 18px;
            }
          }
        }
      }
    }
  }

  .gallery-page-container {
    margin: 130px auto 0;
    .page-title {
      font-size: 48px;
      line-height: 64px;
      padding-bottom: 30px;
    }
    .all-galleries {
      margin-top: 60px;
      gap: 30px 20px;
      .gallery-image {
        height: 320px;
      }
    }
  }

  .contact-page-container {
    margin: 130px auto 0;
    .page-title {
      font-size: 48px;
      line-height: 64px;
      padding-bottom: 30px;
    }
  }
  .map {
    margin: 80px auto 0;
    height: 400px;
  }
  .blog-page-container {
    margin: 130px auto 0;
    .page-title {
      font-size: 48px;
      line-height: 64px;
      padding-bottom: 30px;
    }
    .all-blogs {
      margin-top: 60px;
      gap: 30px 20px;
      .blog-card {
        .blog-image {
          height: 240px;
        }
      }
    }
    .pagination {
      margin-top: 60px;
    }
  }
  .blog-detail-container {
    margin: 130px auto 0;
    .blog-detail-main {
      gap: 30px;
      .blog-title {
        font-size: 32px;
        line-height: 44px;
      }
      .blog-image {
        height: 360px;
      }
    }
    .similar-blogs {
      margin-top: 80px;
      .similar-blogs-title {
        font-size: 24px;
        line-height: 36px;
      }
      .similar-blogs-slide {
        margin-top: 30px;
        .blog-card {
          width: 373px;
          .blog-image {
            height: 240px;
          }
        }
      }
    }
  }
  .surgery-detail-container {
    margin: 130px auto 0;
    .page-title {
      font-size: 32px;
      line-height: 44px;
      padding-bottom: 30px;
    }
    .tags {
      margin-top: 36px;
      gap: 10px;
      max-width: 1000%;
      .tag-item {
        padding: 8px 12px;
      }
    }
    .surgery-video {
      max-width: 100%;
      margin-top: -30px;
    }
    .need-know {
      padding: 60px 0;
      .need-know-label {
        padding: 10px 20px;
      }
      .need-know-text {
        max-width: 100%;
        p,
        li,
        span {
          font-size: 20px;
          line-height: 32px;
        }
      }
    }
    .surgery-detail-text {
      margin: 60px auto 0;
    }
  }
  .about-container {
    margin: 130px auto 0;
    .about-image-socials {
      min-width: 0;
      width: 100%;
      margin-bottom: 0;
      margin-left: 0;
      float: initial;
      .about-image {
        height: auto;
      }
      .about-socials {
        margin-top: 20px;
        padding-top: 20px;
        gap: 20px;
      }
    }
    .about-content {
      width: 100%;
      margin-top: 60px;
    }
  }
  .team-page-container {
    margin: 130px auto 0;
    .page-title {
      font-size: 48px;
      line-height: 64px;
      padding-bottom: 30px;
    }
    .team-hero {
      margin-top: 80px;
      .team-hero-head {
        .down-icon {
          width: 42px;
          min-width: 42px;
          height: 42px;
          img {
            width: 20px;
            height: 20px;
          }
        }
        .head-title {
          max-width: 300px;
          font-size: 20px;
          line-height: 32px;
        }
      }
      .team-hero-video {
        max-width: 100%;
        margin: 60px auto 0;
      }
    }
    .purpose {
      padding: 60px 0;
      .purpose-label {
        padding: 10px 20px;
      }
    }
    .info-about-doctor {
      margin-top: 80px;
      gap: 20px;
      .doctor-info-content {
        .doctor-name {
          font-size: 32px;
          line-height: 44px;
          padding-bottom: 20px;
        }
        .short-info {
          margin-top: 20px;
        }
        .make-appointment {
          margin-top: 20px;
          max-width: 160px;
        }
      }
    }
    .meet-our-team {
      margin-top: 80px;
      .team-title {
        font-size: 32px;
        line-height: 44px;
        padding-bottom: 30px;
      }
      .our-team {
        margin-top: 60px;
        gap: 20px;
        .our-team-left {
          .team-label {
            padding: 10px 20px;
          }
          .our-team-text {
            margin-top: 20px;
            p,
            li,
            span {
              font-size: 18px;
              line-height: 28px;
            }
          }
        }
        .our-team-main {
          .our-team-members {
            margin-top: 30px;
            gap: 30px 20px;
            .team-member {
              height: 380px;
              .member-image {
                height: 220px;
              }
              .member-fname {
                font-size: 18px;
                line-height: 28px;
                height: 28px;
              }
              .member-more-btn {
                .icon {
                  width: 36px;
                  height: 36px;
                  min-width: 36px;
                  img {
                    width: 20px;
                    height: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .why-us {
      margin-top: 60px;
      .why-us-title {
        font-size: 24px;
        line-height: 32px;
      }
      .why-us-boxes {
        margin-top: 30px;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        .why-us-box {
          padding: 20px;
          min-height: 400px;
          .box-title {
            font-size: 18px;
            line-height: 28px;
          }
          .box-description {
            margin: 12px 0 30px;
          }
          .icon {
            width: 56px;
            height: 56px;
            min-width: 56px;
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1100px) {
  .team-page-container {
    .meet-our-team {
      .our-team {
        .our-team-main {
          .our-team-members {
            .team-member {
              .member-more-btn {
                .icon {
                  transform: translateX(8px);
                }
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 575px) {
  .home-hero-container {
    margin-top: 40px;
    .home-hero-inner {
      video {
        height: 240px;
      }
      .hero-title {
        margin-top: 10px;
      }
      .hero-links {
        max-width: 100%;
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
  .nose-treatment-container {
    .nose-info-wrapper {
      grid-template-columns: repeat(1, 1fr);
      .nose-info-card {
        height: auto;
        .nose-info-card-image {
          height: 200px;
        }
      }
    }
  }
  .contact-form-container {
    .contact-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }
    }
    .contact-video {
      right: -320px;
      top: -50px;
      width: 900px;
    }
  }
  .insta-gallery-container {
    .insta-gallery-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .insta-galleries {
      grid-template-columns: repeat(1, 1fr);
      .insta-gallery {
        height: 450px;
      }
    }
  }

  .gallery-page-container {
    .all-galleries {
      grid-template-columns: repeat(1, 1fr);
      .gallery-image {
        height: auto;
      }
    }
  }

  .map {
    height: 300px;
  }

  .blog-page-container {
    .all-blogs {
      grid-template-columns: repeat(1, 1fr);
      .blog-card {
        .blog-image {
          height: 260px;
        }
      }
    }
  }
  .blog-detail-container {
    .blog-detail-main {
      .blog-image {
        height: 300px;
      }
    }
    .similar-blogs {
      .similar-blogs-slide {
        .blog-card {
          width: 323px;
          .blog-image {
            height: 200px;
          }
        }
      }
    }
  }
  .team-page-container {
    .team-hero {
      .team-hero-head {
        flex-direction: column;
        align-items: flex-start;
        .head-title {
          max-width: 100%;
        }
      }
    }
    .meet-our-team {
      .our-team {
        .our-team-main {
          .our-team-members {
            grid-template-columns: repeat(1, 1fr);
            .team-member {
              height: 400px;
              .member-image {
                height: 240px;
              }
              .member-more-btn {
                .icon {
                  transform: translateX(0px);
                }
              }
            }
          }
        }
      }
    }
    .why-us {
      .why-us-boxes {
        grid-template-columns: repeat(1, 1fr);
        .why-us-box {
          min-height: 0;
        }
      }
    }
  }
}