:root {
      --white: white;
      --tan: tan;
      --black: black;
  }

  p {
      font-size: 0.85rem !important;
  }

  /* CSS RESET*/
  html {
      scroll-behavior: smooth;
  }

  /*
  1. Use a more-intuitive box-sizing model.
*/
  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  /*
    2. Remove default margin
  */
  * {
      margin: 0;
  }

  /*
    3. Allow percentage-based heights in the application
  */
  html,
  body {
      height: 100%;
  }

  li {
      list-style-type: none;
      display: inline;
      margin: 10px;

  }

  /*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
  body {
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;

      font-family: 'Montserrat', sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Tiro Devanagari Hindi', serif;
  }

  h1 {
      font-size: 3rem !important;
  }

  h2 {
      font-size: 2rem !important;
  }

  /* h3 {
      font-size: 2rem!important;
  } */

  h4,
  h5 {
      font-size: 1rem !important;
  }

  .h6 {
      font-size: 0.8rem !important;
  }

  p {

      font-family: 'Montserrat', sans-serif;
  }

  /*
    6. Improve media defaults
  */
  img,
  picture,
  video,
  canvas,
  svg {
      display: block;
      max-width: 100%;
  }

  /*
    7. Remove built-in form typography styles
  */
  input,
  button,
  textarea,
  select {
      font: inherit;
  }

  /*
    8. Avoid text overflows
  */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      overflow-wrap: break-word;
  }

  /*
    9. Create a root stacking context
  */
  #root,
  #__next {
      isolation: isolate;
  }

  /* Define the keyframes */
  @keyframes myAnimation {
      0% {
          font-size: 3.5rem;
          margin-left: 75px;
      }

      100% {
          font-size: 4.5rem;
          margin-left: 0px;
      }
  }

  @keyframes myAnimation1 {
      0% {
          font-size: 70%;
          margin-left: 100px;
      }

      100% {
          font-size: 100%;
          margin-left: 0px;
      }
  }

  /* Apply the animation to an element */
  .main-transition {
      animation-name: myAnimation;
      animation-duration: 1.8s;
  }

  .main-transition1 {
      animation-name: myAnimation1;
      animation-duration: 1.8s;
  }

  /* Columns */
  .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 0px;
  }

  .active-pg {
      color: var(--tan) !important;
  }

  .active-pg1 {
      color: var(--black) !important;
      background-color: var(--tan) !important;
  }

  .col-1 {
      grid-column: auto/span 1;
  }

  .col-2 {
      grid-column: auto/span 2;
  }

  .col--2 {
      grid-column: auto/span 2;
  }

  .col-3 {
      grid-column: auto/span 3;
  }

  .col--3 {
      grid-column: auto/span 3;
  }

  .col-s-3 {
      grid-column: auto/span 3;
  }


  .col-s-2 {
      grid-column: auto/span 2;
  }

  .col-4 {
      grid-column: auto/span 4;
  }

  .col--4 {
      grid-column: auto/span 4;
  }

  .col-5 {
      grid-column: auto/span 5;
  }

  .col-6 {
      grid-column: auto/span 6;
  }

  .col---6 {
      grid-column: auto/span 6;
  }

  .col--6 {
      grid-column: auto/span 6;
  }

  .col-7 {
      grid-column: auto/span 7;
  }

  .col-8 {
      grid-column: auto/span 8;
  }

  .col--8 {
      grid-column: auto/span 8;
  }

  .col-9 {
      grid-column: auto/span 9;
  }

  .col---9 {
      grid-column: auto/span 9;
  }

  .col-10 {
      grid-column: auto/span 10;
  }

  .col-11 {
      grid-column: auto/span 11;
  }

  .col-12 {
      grid-column: auto/span 12;
  }

  .grid {
      display: grid;
      justify-content: center;
      align-content: center;
  }

  .center {
      display: grid;
      align-items: center;
      align-content: center;
  }

  .flex-2 {
      display: flex;
  }

  /*Home Page, Header, Footer*/
  .Logo {
      width: auto;
      height: 150%;
      margin-left: 3vw;
  }

  .Logo:hover {
      cursor: pointer;
  }

  .navbar {
      overflow: hidden;
      display: flex;
      align-items: center;
  }

  /* Links inside the navbar */
  .navbar a {
      display: inline-flex;
      flex-direction: row;
      color: var(--white);
      font-size: 1rem;
      text-align: center;
      padding: 1rem;
      text-decoration: none;
  }

  .navbar a:hover {
      color: var(--tan);
      ;
  }

  button a {
      text-decoration: none;
      color: inherit;
  }



  .odd-fa-f-radius {
      padding: 8px 8px 8px 11px !important;
  }

  .odd-fa-insta-radius {
      padding: 8px 6px 8px 10.5px !important;
  }

  .odd-fa-youtube-radius {
      padding: 9.5px 8px 7px 8px !important;
  }

  .social-list li {
      margin-bottom: 20px;
      background-color: lightgray;
      border-radius: 50%;
      padding: 0.4rem;
  }

  .social-list {
      padding-inline-start: 0px;
  }

  .social-list a {
      text-decoration: none;
  }

  i {
      color: var(--black);
  }


  .hide {
      display: none !important;
      visibility: hidden;
  }

  .fade {
      display: flex;
      visibility: visible;
      opacity: 1;
      animation-name: fadeInOpacity;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
      animation-duration: 2s;
  }

  @keyframes fadeInOpacity {
      0% {
          opacity: 0;
      }

      100% {
          opacity: 1;
      }
  }


  /* The dropdown container */
  .dropdown {
      float: left;
      overflow: hidden;
      color: var(--black);
  }

  /* Dropdown button */
  .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      background-color: inherit;
      font-family: inherit;
      /* Important for vertical align on mobile phones */
      margin: 0;
      /* Important for vertical align on mobile phones */
      align-items: center;
      padding: 0;
  }

  .dropdown:hover .dropbtn {
      color: var(--black);
      text-decoration: none;
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: hsla(0, 4%, 26%, 0.8);
      min-width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
  }

  /* Links inside the dropdown */
  .dropdown-content a {
      float: none;
      color: var(--white);
      padding: 1rem;
      text-decoration: none;
      display: block;
      text-align: left;
  }

  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
      background-color: var(--tan);
      color: var(--black);
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
      display: block;
  }

  /* Drop Down Icon */

  /* 3dot drop down */

  .hamburger {
      display: none;
      visibility: hidden;
  }

  .dropdown-3 {
      position: relative;
      display: inline-block;
      right: 1rem;
  }

  /* Style for the button */
  .dropdown-btn-2 {
      background-color: transparent;
      border: none;
      cursor: pointer;
  }

  .dropdown-btn-2 i {
      font-size: 15px;
      color: #000;
  }

  /* Style for the button */
  .dropdown-btn-2 {
      background-color: transparent;
      border: none;
      cursor: pointer;
  }

  .dropdown-btn-2 i {
      font-size: 15px;
      color: #000;
  }

  /* button one */
  header button {
      background-color: inherit;
      border: none;
  }

  .button-one {
      --button-color: rgb(190, 145, 31);
  }

  .button-one .line {
      transition: y 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
      transform-origin: center;
  }

  .button-one[aria-expanded="true"] .line {
      transition: y 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
  }

  .button-one[aria-expanded="true"] :is(.top, .bottom) {
      y: 45;
  }

  .button-one[aria-expanded="true"] .top {
      rotate: 45deg;
  }

  .button-one[aria-expanded="true"] .middle {
      opacity: 0;
  }

  .button-one[aria-expanded="true"] .bottom {
      rotate: -45deg;
  }

  .booking__btn1 {
      margin: 10px 0 0.5rem 5rem;
      border: 2px solid lightgray;
      padding: 2px 25px;
      border-radius: 0.75rem;
      background-color: transparent;
      color: lightgray;
      font-weight: bold;
  }

  .booking__btn1:hover {
      border: 2px solid var(--tan);
      color: var(--tan);
      cursor: pointer;
      background-color: hsla(0, 4%, 26%, 0.4);
  }

  .main__ {
      min-height: 100vh;
      background-image: url('BackgroundImages/renewalmain1.jpg');
      background-position: center;
      background-size: cover;
      z-index: -2;
  }

  .booking__btn2 {
      border: 2px solid hsl(0, 4%, 26%);
      padding: 8px 40px;
      border-radius: 1rem;
      color: hsl(0, 4%, 26%);
      background-color: transparent;
      margin-top: 1.75rem;
      margin-bottom: 1.75rem;
      font-weight: bold;
  }

  .booking__btn2:hover {
      border: 2px solid var(--tan);
      color: var(--tan);
      cursor: pointer;
      background-color: var(--black);
  }

  .main__intro {
      font-size: 4.5rem !important;
      width: 50%;
      color: var(--black);
      line-height: 4rem;
      font-weight: lighter;
      font-style: italic;
      font-family: 'Times New Roman', serif;
      padding-top: 20rem;
  }

  .main__intro1 {
      font-size: 4.5rem !important;
      width: 50%;
      color: var(--tan);
      font-weight: bolder;
      line-height: 4rem;
      font-weight: lighter;
      font-family: 'Times New Roman', serif;
  }

  .main__all {
      margin-left: 6rem;
  }

  header {
      padding: 5px;
      height: 60px;
      width: 100%;
      background-color: var(--black);
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      top: 0;
      z-index: 6;
  }

  .main__quote {
      background-color: var(--tan);
      color: var(--black);
      min-height: 200px;
      height: 130px;
      text-align: center;
      display: grid;
      align-content: center;
  }

  .main__quote-h2 {
      padding: 1rem 0rem;
      font-size: 1.2rem !important;
  }

  .main__quotehr {
      border: 1px solid var(--black);
      width: 45%;
      margin: auto auto;
  }

  .main__quote h1 {
      padding: 0.7rem;
  }

  .thirdpg {
      height: auto;
      width: 60%;
      margin: auto auto;
      display: flex;
      align-items: center;
  }

  .thirdpg1 {
      background-color: var(--black);
  }

  .thirdpg__div {
      display: grid;
      gap: 1rem;
      padding: 4rem 0;
  }

  .thirdpg h2 {
      font-size: 2.3rem;
      color: var(--white);
      text-align: center;
      padding-top: 1rem;
  }

  .thirdpg__p {
      color: var(--white);
      padding: 0rem 1rem 1rem;
      text-align: center;
  }

  .treat-images {
      color: var(--white);
      text-align: center;
  }

  .treat-images img {
      padding: 1rem;
  }

  .thirdpg__button {
      border: 1px solid hsl(0, 4%, 26%);
      padding: 8px 40px;
      border-radius: 1rem;
      color: var(--white);
      background-color: transparent;
      width: 30%;
      margin: auto auto;
      border-radius: 1rem;
      font-weight: bold;
  }

  .thirdpg__button:hover {
      background-color: var(--black);
      color: var(--tan);
      border: 1px solid var(--tan);
      cursor: pointer;
  }

  .fourthpg {
      height: auto;
      padding: 10rem 2rem;
      background-color: var(--white);
  }

  .fourthpg__content {
      margin: auto auto;
      width: 80%;
  }

  .fourthpg__h3 {
      font-size: 2rem;
      color: var(--black);
      margin-bottom: 2%;
  }

  .fourthpg__p {
      margin-bottom: 2%;
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
      font-size: 0.85rem;
  }

  .fourthpg__button {
      border: 1px solid hsl(0, 4%, 26%);
      padding: 8px 40px;
      border-radius: 1rem;
      color: hsl(0, 4%, 26%);
      background-color: transparent;
      margin-top: 1.75rem;
      width: 50%;
      font-weight: bold;
      font-size: 0.9rem;
  }

  .fourthpg__button a {
      text-decoration: none;
      color: var(--black);

  }

  .fourthpg__button:hover {
      background-color: var(--black);
      color: var(--tan);
      border: 1px solid var(--tan);
      cursor: pointer;
  }


  .fifthpg {
      background-color: var(--black);
      height: auto;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin: auto auto;
      text-align: center;
      align-content: center;
      gap: 1rem;
      color: var(--white);
      padding: 2.5rem 2rem 2rem;
  }

  .fifth_box {
      height: 150px;
      width: 200px;
      background-color: var(--white);
      color: var(--black);
      position: relative;
      top: -6rem;
      left: 6rem;
      text-align: center;
      gap: 0.75rem;
      line-height: 1.75rem;
      display: grid;
      align-content: center;
      padding: 2rem;
  }

  .fifth_box p {
      font-size: 2rem !important;
  }

  .fifth_hr {
      width: 40%;
      border: 2px solid var(--white);
  }

  .fifthpg__h3 {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      color: var(--black);
      font-size: 2.5rem;
  }

  .fifthpg h4 {
      margin-top: 1.5rem;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: var(--black);
  }

  .products {
      padding: 1.5rem;
  }

  .fifthpg__img {
      margin: 1rem;
      height: auto;
      width: 400px;
  }

  .fifthpg__button {
      border: 2px solid hsl(0, 4%, 26%);
      padding: 8px 40px;
      border-radius: 1rem;
      color: var(--white);
      margin-top: -6rem;
      margin-bottom: 2rem;
      width: 20rem;
      margin-left: auto;
      margin-right: auto;
      background-color: var(--black);
      font-weight: bold;
  }

  .fifthpg__button:hover {
      background-color: var(--black);
      color: var(--tan);
      border: 2px solid var(--tan);
      cursor: pointer;
  }

  .col-lg-4 {
      grid-column: auto/span 4;
  }

  .hr {
      width: 50%;
      margin: auto auto;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 1px solid var(--tan);
  }

  .mainpage__f-sect {
      display: grid;
      align-content: center;
      height: auto;
      padding: 1.5rem 1rem;
      background: var(--white);
  }

  .mainpage__f-sect p {
      text-align: center;
      color: var(--black);
      font-size: 0.85rem;
      width: 90%;
      margin: auto auto;
      padding: 1rem 0;
  }

  .home-credit {
      background-color: var(--tan);
      display: grid;
      align-items: center;
      padding: 3rem 4rem;
  }

  .home-credit p {
      width: 90%;
      margin: auto;
      padding: 0.5rem 0.5rem 1rem;
  }


  .flex-1 {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
  }

  .newsletter {
      display: grid;
      align-items: center;
      padding: 3rem 7rem;
      background-color: var(--black);
      color: var(--white);
      font-size: 1rem;
  }

  .newsletter input[type="email"] {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 0.2rem;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
      box-shadow: 2px 2px 8px lightgray;
  }

  .news-btn {
      padding: 0.5rem 2.5rem;
      background-color: var(--tan);
      color: var(--white);
      border: 1px solid var(--tan);
      border-radius: 0.5rem;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      float: right;
      margin-bottom: 0.2rem;
      box-shadow: 2px 2px 8px var(--tan);
  }

  .newsletter input[type="email"] {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }

  .news-btn:hover {
      background-color: var(--white);
      color: var(--tan);
      cursor: pointer;
  }

  /* Footer */
  .end {
      background-color: hsl(0, 4%, 26%);
      color: lightgray;
      min-height: 25vh;
      padding: 2rem 5rem;
      text-align: left;
      gap: 2rem;
  }

  .end h3 {
      color: darkgray;
  }

  .end h4 {
      font-size: 0.8rem;
  }

  .quicklinks p {
      display: grid;
      margin: 0px;
      text-align: left;
      font-size: 0.85rem;
  }

  .quicklinks a:hover {
      text-decoration: underline;
      color: var(--tan);
      font-weight: bold;
      cursor: pointer;
  }

  /* About Page */
  .vision {
      background-color: var(--white);
      color: var(--black);
      padding: 1rem 2rem 5rem;
  }

  .vision1 {
      background-color: var(--white);
      padding: 1rem 4rem 4rem;
      width: 70%;
      margin: auto;
      border-bottom: 3px solid var(--black);
  }

  .mission1 {
      background-color: var(--white);
      padding: 2rem 4rem 1rem;
      width: 70%;
      margin: auto;
      border-top: 3px solid var(--black);
  }

  .luncheon {
      background-color: var(--white);
      padding: 6rem 4rem;
      margin: auto;
      gap: 2rem;
      display: grid;
      align-items: center;
  }

  .vision p,
  .mission p,
  .luncheon p {
      padding-top: 1rem;
      text-align: justify;
      hyphens: auto;
      font-size: 0.85rem;
  }

  .luncheon img {
      padding: 1rem;
      height: auto;
  }

  .mission {
      background-color: var(--white);
      color: var(--black);
      padding: 5rem 2rem 1rem;
  }

  .vision h3,
  .mission h3,
  .luncheon h2 {
      font-size: 1.5rem;
      padding-bottom: 0.5rem;
  }

  .services-info1 {
      padding: 4rem 5rem 5rem;
      display: grid;
      align-items: center;
  }

  .services-info1 p {
      text-align: center;
      padding-bottom: 1rem;
      width: 85%;
      margin: auto;
      font-size: 0.85rem;
  }

  .services-info-img {
      display: grid;
      align-items: center;
  }

  .services-info {
      padding: 2rem 0rem 4rem;
      display: grid;
      align-content: center;
      align-items: center;

  }

  .services-info1 h3 {
      font-size: 2rem;
      text-align: center;
      padding-bottom: 2rem;
  }

  .services-info p {
      padding: 0.5rem;
      display: grid;
      align-items: center;
      text-align: justify;
      width: 80%;
      margin: auto;
      font-size: 0.85rem;
  }

  .values-table {
      display: grid;
      align-items: center;
      background-color: var(--tan);
  }

  .values-table1 {
      padding: 3rem 6rem 7rem;
      background-color: var(--tan);
  }

  .values-table h3 {
      font-size: 2rem;
      padding-bottom: 1rem;
      text-align: center;
      color: var(--white);
  }

  .values-table p {
      padding-top: 1rem;
      color: var(--black);
      width: 85%;
      margin: auto;
      text-align: justify;
      hyphens: auto;
      font-size: 0.85rem;
  }

  .values-table h5 {
      text-align: center;
      font-size: 1rem;
      color: var(--white);
      padding-top: 1.5rem;
  }

  .aboutmain__ {
      height: 3.8rem;
      background-color: var(--black);
      z-index: -2;
  }

  .about-img h2 {
      font-size: 2rem;
      color: var(--white);
      padding: 1vh 0vw 1vh 10vw;
  }

  .about-img {
      background-color: var(--black);
      font-size: 2rem;
      color: var(--white);
  }

  .about_brief {
      height: auto;
      background-color: var(--black);
      display: grid;
      align-content: center;
      border: 5px solid var(--black);
      border-top-color: var(--white);
      padding: 2rem;
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
  }

  .about_brief p {
      color: var(--white);
      width: 80%;
      margin: auto auto;
      line-height: 1.7rem;
      padding-bottom: 0.8rem;
      font-size: 0.85rem;
  }

  .about_brief_p1 p {
      color: var(--white);
      width: 95%;
      margin: auto auto;
      z-index: 2;
      padding-bottom: 0.8rem;
      font-size: 0.85rem;
  }

  .about_brief-img {
      width: 60%;
      margin: auto;
      padding: 0.5rem;
  }

  .about_brief-img-1 {
      width: 90%;
      margin: auto;
      padding: 0.5rem;
  }

  .news-img-1 {
      padding: 0.5rem;
      width: 100%;
  }

  .about_brief-img2 {
      margin: auto;
      padding: 0.5rem;
      height: 100%;
  }

  .about__background1 {
      background-color: var(--tan);
      color: var(--black);
      display: grid;
      align-content: center;
      padding: 1.5rem;
  }

  .about__background {
      color: var(--black);
      display: grid;
      align-content: center;
      padding: 1.5rem;
  }

  .about__background2 {
      width: 80%;
      margin: auto auto;
      font-size: 1.5rem;
      padding: 2rem;
      display: grid;
      justify-content: center;
      align-content: center;
  }

  .about__background2 p {
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
      padding: 0.5rem;
      line-height: 1.5rem;
  }

  .about__name1 {
      margin-bottom: 1rem;
  }

  .hr_about {
      border: 2px solid var(--tan);
      margin-top: 1rem;
      margin-bottom: 1rem;
  }

  .about__image1 {
      width: 60%;
      margin: auto auto;
  }

  .about__image2 {
      width: 85%;
      margin: auto auto;
      position: relative;
      left: -5rem;
  }

  .about__image3 {
      width: 40%;
      margin: auto auto;
      position: relative;
      right: 8rem;
      top: 3rem;
  }

  .about__image4 {
      width: 40%;
      margin: auto auto;
      position: relative;
      left: 5rem;
      top: -1rem;
      border: 8px solid var(--white)
  }

  .about_brief1 {
      min-height: 25vh;
      height: auto;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: var(--black);
      display: grid;
      align-content: center;
      padding: 2rem;
  }

  .about_brief1 h2,
  .about_brief1 h3 {
      color: var(--white);
      width: 80%;
      margin: auto auto;
      font-size: 1rem !important;
      text-align: center;
  }

  /*Redirect Page*/

  .background-booking-1 {
    height: 80vh;
    background-color: var(--tan);
    
    display: grid;
    align-items: center;
}
  /*Book An Appointment Page*/
  .background-booking {
      height: 80vh;
      background-color: var(--tan);
      background-image: url(BackgroundImages/comingsoonbackground.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      align-items: center;
  }

  .background-booking-h2 {
      background-color: var(--white);
      width: 100%;
      opacity: 0.7;
  }

  .background-booking h2 {
      color: var(--tan);
      font-size: 5rem !important;
      text-align: center;
  }

  .bookapt {
      padding: 1.5rem 2rem 3rem;
      display: grid;
      grid-auto-flow: dense;
      grid-gap: 2px;
      background-color: var(--white);
      background-position: center;
      background-size: cover;
      color: var(--black);
  }

  .form-row p {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 0.85rem;
  }

  .book-form textarea {
      margin-top: 1rem;
  }

  .book-form {
      justify-content: space-around;
      width: 90%;
      margin: auto auto;
  }

  .book-form input[type="button"] {
      display: block !important;
      background-color: var(--black);
      border: 1px solid var(--white);
      color: var(--white);
      padding: 0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin-top: .75rem;
      border-radius: 1rem;
      cursor: pointer;
      float: right;
      width: 20%;
      font-weight: bold;
  }

  .book-form input[type="button"]:hover {
      color: var(--black);
      background-color: var(--white);
      border: 1px solid var(--black);
      cursor: pointer;
  }

  .glass-effect1 {
      border-radius: 1rem;
      padding: 1.5rem 1rem;
      margin: auto auto;
      width: 80%;
  }

  .book-form input {
      margin-bottom: 0.5rem;
  }

  .flex1 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 1rem;
  }

  /* Contact Us Page*/
  .contact-1 {
      background-color: var(--white);
      border-top: 5px solid var(--tan);
  }

  .map-background-bleed {
      background-color: var(--tan);
      color: var(--white);
      padding: 4rem;
  }

  .contact-img h2 {
      font-size: 2rem;
      color: var(--tan);
      padding: 1vh 0vw 1vh 10vw;
  }

  .contact_pg {
      background-color: var(--white);
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  .form-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 1rem;
      text-align: left;
  }

  .form-group {
      display: inline-block;
      width: 100%;
      margin-top: .5rem;
  }

  .full-width {
      width: 100%;
  }

  .p-4 {
      padding: 3rem 4rem;
  }

  .form {
      padding: 2rem 7rem;
      width: 100%;
  }

  .form-2 {
      padding: 2rem 2rem;
      width: 100%;
  }

  .gap-1 {
      gap: 1.5rem;
  }

  .form-group-2 {
      display: inline-block;
      width: 100%;
      margin-top: .5rem;
  }

  .form-group label {
      display: block;
      margin-bottom: 0.2rem;

  }

  .form-group-2 label {
      display: block;
      margin-bottom: 0.2rem;

  }

  input[type="date"],
  input[type="time"],
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea {
      width: 100%;
      padding: 0.5rem;
      border: #ccc;
      border-bottom: 1px solid var(--black);
      outline: var(--white) !important;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
  }

  .form button {
      display: block !important;
      background-color: var(--black);
      border: 2px solid var(--white);
      color: var(--white);
      padding: 0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin-top: .75rem;
      border-radius: 1rem;
      cursor: pointer;
      float: right;
      width: 20%;
      font-weight: bold;
  }

  .form button:hover {
      background-color: var(--white);
      color: var(--black);
      border: 2px solid var(--black);
      cursor: pointer;
  }

  .form-2 button {
      display: block !important;
      background-color: var(--black);
      border: 2px solid var(--white);
      color: var(--white);
      padding: 0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin-bottom: .75rem;
      border-radius: 1rem;
      cursor: pointer;
      float: right;
      width: auto;
      font-weight: bold;
  }

  .form-2 button:hover {
      background-color: var(--white);
      color: var(--black);
      border: 2px solid var(--black);
      cursor: pointer;
  }

  .form2-btn {
      display: block !important;
      background-color: var(--black);
      border: 2px solid var(--white);
      color: var(--white);
      padding: 0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin-top: -2rem;
      margin-bottom: .75rem;
      border-radius: 1rem;
      cursor: pointer;
      float: right;
      width: auto;
      font-weight: bold;
  }

  .form2-btn:hover {
      background-color: var(--white);
      color: var(--black);
      border: 2px solid var(--black);
      cursor: pointer;
  }

  #map {
      height: 400px;
      width: 100%;
      background-color: aqua;
  }

  .cont-center {
      padding: 0 7rem;
      margin: auto auto;
  }

  .cont-center1-h3 {
      width: 100%;
  }

  iframe {
      width: 100%;
      height: 70vh;
      border: 0;
  }

  /* Treatments Page*/
  .a-c {
      display: grid;
      align-items: center;
      padding-bottom: 5rem;
  }

  .treat-info {
      width: 90%;
      margin: auto;
      text-align: justify;
      hyphens: auto;
      padding-bottom: 0.5rem;
  }

  .col-s-4 {
      grid-column: auto/span 4;
  }

  .col-s-6 {
      grid-column: auto/span 4;
  }

  .col-s-61 {
      grid-column: auto/span 8;
  }

  .col-s-8 {
      grid-column: auto/span 8;
  }

  .grid-1 {
      display: grid;
      justify-content: center;
      align-content: center;
  }

  .grid-1-img {
      padding-bottom: 2rem;
      margin: auto;
  }

  .treat {
      padding: 0.5rem 0rem 0.5rem 0rem;
  }

  .right {
      text-align: right !important;
      padding-bottom: 0 !important;

  }

  .treat_button {
      display: grid;
      border: 2px solid var(--black);
      padding: 8px 20px;
      border-radius: 1rem;
      margin-bottom: 2rem;
      width: 50%;
      margin: auto;
      background-color: var(--white);
      font-weight: bold;
  }

  .treat_button:hover {
      color: var(--tan);
      background-color: var(--black);
      border: 2px solid var(--tan);
      cursor: pointer;
  }

  .treat_button1 {
      display: grid;
      border: 2px solid var(--black);
      padding: 8px 20px;
      border-radius: 1rem;
      margin-bottom: 2rem;
      width: 40%;
      margin: auto;
      background-color: var(--tan);
      font-weight: bold;
  }

  .treat_button1:hover {
      color: var(--tan);
      background-color: var(--black);
      border: 2px solid var(--tan);
      cursor: pointer;
  }

  .credit {
      background-color: var(--tan);
      display: grid;
      align-items: center;
      margin: 2rem 0rem
  }

  .credit p {
      width: 80%;
      padding: 0.5rem 0.5rem 1rem;
  }

  .credit img {
      width: 80%;
      height: 20% !important;
  }


  .treat-1 h2 {
      padding: 1vh 0vw 1vh 10vw;
      font-size: 2rem;
      color: var(--tan);
  }

  .treat-1 p {
      margin: auto;
      width: 80%;
      text-align: justify;
      font-size: 0.85rem;
      hyphens: auto;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
  }

  .treat-2 {
      border: 5px solid var(--white);
      border-top-color: var(--tan);
      padding: 4rem 2rem 2rem;
  }

  .treat h3 {
      text-align: center;
      margin: auto auto;
      font-size: 1.5rem;
      padding: 0.5rem;
  }

  .treat11 {
      padding: 2rem 4rem 4rem;
      height: auto;
  }

  .treat-11 {
      padding: 3rem 2rem;
  }

  .treat-mainbtn {
      background-color: #fff;
      border: 2px solid var(--tan);
      border-radius: 0.5rem;
      padding: 0rem 3rem;
      margin: auto auto;
      display: block;
  }

  .treat-mainbtn:hover {
      color: var(--tan);
      background-color: var(--black);
      cursor: pointer;
      transition: 0.5s;
  }

  .treat h4 {
      width: 80%;
      margin: auto auto;
      font-size: 1.1rem;
      padding-top: 0.5rem;
  }

  .treat p {
      width: 80%;
      margin: auto auto;
      text-align: justify;
      font-size: 0.85rem;
  }

  .treat-type {
      max-height: 10rem;
      height: 8rem;
      background-color: var(--white);
      color: var(--white);
      width: 85%;
      margin: 1rem;
      border: 2px solid var(--white);
      box-shadow: 2px 2px 8px lightgray;
      border-radius: 1rem;
  }

  .treat img {
      height: auto;
      width: auto;
      padding: 1.5rem;
  }

  .hr-treats hr {
      margin-top: 2rem;
      border: 2px solid var(--tan);
      margin-bottom: 0.5rem
  }

  .hr-treats-1 hr {
      border: 2px solid var(--tan);
      width: 70%;
      margin: 1rem auto 1rem;
  }

  .type-1 h2 {
      color: var(--tan);
      padding: 1rem;
  }

  .type-1 {
      padding: 4rem 2rem;
      gap: 2rem;
      text-align: center;
  }

  .type-1 img {
      margin: auto auto;
      padding: 2.5rem;
      height: 400px;
      width: auto;
  }

  .type-2 {
      display: grid;
      justify-content: center;
  }

  .treat-btn {
      border: none;
      background-color: var(--tan);
      margin: 0.3rem;
      border-radius: 0.2rem;
  }

  .treat-btn:hover {
      color: var(--white);
      cursor: pointer;
  }

  .type-22 {
      margin: auto auto;
      padding-bottom: 1.5rem;
      width: 90%;
  }

  .type-2 h5,
  .type-22 h5 {
      padding: 0.5rem;
      text-align: start;
  }

  .float-r {
      float: right;
  }

  .treat-img {
      display: grid;
      align-items: center;
      padding: 1rem;
      height: auto;
      width: auto;
      margin: auto auto;
  }

  .treatment-info {
      display: grid;
      align-content: center;
      justify-content: center;
      padding: 0.5rem 1rem;
  }

  .treatment-info h2 {
      font-size: 1.5rem;
      padding: 0rem 0rem 0.5rem 1rem;
  }

  .treatment-info p {
      padding: 1rem;
      font-size: 0.85rem;
      text-align: justify;
      hyphens: auto;
  }

  .secret {
      display: none;
  }

  .grid-2 {
      display: grid;
      align-content: center;
  }

  .FAQ_section {
      background-color: #d2b48c;
      color: var(--white);
      text-align: center;
      padding: 1rem 0rem;
      font-size: 1.5rem;
  }

  .FAQ_questions {
      padding: 4rem;
  }

  .FAQ-header {
      border: 1px solid var(--tan);
      color: var(--black);
      background-color: var(--tan);
      padding: 0.5rem 0.5rem;
      margin: 0.5rem;
      border-radius: 0.5rem;
      text-align: center;
  }

  .FAQ-header:hover {
      background-color: var(--white);
      cursor: pointer;
  }

  .FAQ-header1 {
      padding: 0.2rem 1rem 1rem;
      margin-bottom: 1rem;
  }

  .FAQ-sub-head {
      border-radius: 0.5rem;
      color: var(--tan);
      padding: 0.5rem;
      margin: 0.5rem;
      border: 1px solid var(--tan);
  }

  .FAQ-answer {
      padding: 0.5rem;
      width: 85%;
      margin: auto;
      margin-bottom: 1.8rem;
  }

  .FAQ-sub-head:hover {
      background-color: var(--tan);
      color: var(--white);
      cursor: pointer;
  }

  /* Products Page*/
  .prod-1 h2 {
      padding: 1vh 0vw 1vh 10vw;
      font-size: 2rem;
      color: var(--black);
  }

  .prod-2 {
      display: grid;
      justify-content: center;
      align-items: center;
      border: 5px solid var(--white);
      border-top-color: var(--black);
      height: auto;
      padding: 2rem;
  }

  .prod-2 img {
      width: auto;
      margin: auto auto;
      height: 400px;
  }

  .prod-2 p {
      width: 70%;
      margin: auto auto;
      text-align: justify;
      hyphens: auto;
      font-size: 0.85rem;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
  }

  .prod-info {
      display: flex;
      justify-content: space-between;
      background-color: var(--black);
      color: var(--white);
      min-height: 100px;
      padding: 0.5rem 1rem 2rem;
  }

  .col {
      flex: 1 0 0%;
  }

  .justify-content-between {
      justify-content: space-between !important;
  }

  .prod-info2 h2 {
      text-align: center !important;
      padding-top: 3rem;
      color: var(--white);
      background-color: var(--black)
  }

  .prod-info2 h4 {
      text-align: center !important;
      padding: 0.2rem 0.3rem;
      color: var(--white);
      background-color: var(--black)
  }

  .prod-info-1 h3 {
      text-align: center;
      padding: 1rem 0.25rem;
  }

  .prod-info-1 {
      display: grid;
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
      word-spacing: -0.05em;
      align-items: center;
  }

  .prod-info-1 img {
      padding-top: 0.5rem;
      aspect-ratio: 3/2;
      object-fit: contain;
      height: auto;
      width: 160px;
      margin: auto auto;
  }

  .prod-info-1:hover {
      align-items: center;
      border-radius: 0.5rem;
      border: 1px solid var(--tan);
      padding: 0rem 1.2rem;
      box-shadow: 2px 2px 5px var(--tan);
      gap: 0.2rem;
      transition: 0.15s;
  }

  .products-grid h2 {
      padding: 2rem;
  }

  .prod-details {
      width: 70%;
      margin: 0.75rem auto;
      padding: 1rem;
      text-align: center;
  }

  .prod-details:hover {
      box-shadow: 2px 2px 5px rgb(97, 96, 96);
      border-radius: 1rem;
  }

  .prod-details img {
      height: 200px;
      width: auto;
      margin: auto auto;
      padding: 1rem;
  }

  /*Events Page*/
  .poster {
      padding: 2rem;
      height: auto;
      width: auto;
      display: grid;
      justify-content: center;
  }

  .poster img {
      padding: 2rem;
  }

  .upcoming-event {
      padding: 2rem 4rem;
  }

  .upcoming-event h2 {
      font-size: 1.5rem;
      text-align: center;
      margin: 2rem;
  }

  .upcoming-event h3 {
      line-height: 2rem;
      padding-bottom: 1rem
  }

  .upcoming-event h3,
  .partnership h3 {
      font-size: 2rem;
      width: 80%;
      margin: auto;
  }

  .upcoming-event p,
  .partnership p {
      width: 90%;
      margin: auto;
      padding-bottom: 1rem;
      text-align: justify;
      hyphens: auto;
      font-size: 0.85rem;
  }

  .partnership {
      padding: 2rem 3rem;
      background-color: var(--tan);
      display: grid;
      align-items: center;
  }

  .space {
      padding-bottom: 1rem;
  }

  .form-group1 {
      display: inline-block;
      width: 90%;
      margin-top: .5rem;
  }

  .full-width {
      width: 100%;
  }

  .event-img {
      overflow-x: auto;
  }

  .event-img img {

      height: 250px;
      width: auto;
  }

  .p-4 {
      padding: 3rem 4rem;
  }

  .form1 {
      padding: 1rem 2rem;
  }

  .form-group1 label {
      display: block;
      margin-bottom: 0.2rem;
  }

  .form-group1 input {
      margin-right: 2rem;
  }

  .form1-btn {
      display: block !important;
      background-color: var(--black);
      border: 2px solid var(--black);
      color: var(--white);
      padding: 0.5rem 0.5rem;
      text-align: center;
      text-decoration: none;
      font-size: 1rem;
      margin-top: .75rem;
      border-radius: 0.5rem;
      cursor: pointer;
      float: right;
      width: 70%;
      font-weight: bold;

  }

  .form1-btn:hover {
      cursor: pointer;
      color: var(--black);
      background-color: var(--white);
      border: 2px solid var(--black);
  }


  .form1 input[type="text"],
  .form1 input[type="email"],
  .form1 input[type="number"],
  .form1 textarea {
      width: 100%;
      padding: 0.5rem;
      border: #ccc;
      border-bottom: 1px solid var(--black);
      outline: var(--white) !important;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
      background-color: var(--tan);
      color: var(--white);
      font-weight: bold;
  }

  .past-head {
      font-size: 2rem;
      text-align: center;
      padding: 1.5rem 2rem 0rem;
  }

  .past-head1 {
      font-size: 2rem !important;
      text-align: center;
      padding: 1.5rem 2rem 0remimportant;
  }

  .past-events-1 {
      padding: 2rem;
      border: 1px solid var(--tan);
      margin: 0rem 1rem 1rem;
      background-color: var(--tan);
      color: var(--white);
      border-radius: 1rem;
      box-shadow: 2px 2px 8px rgb(165, 97, 42);
  }

  .past-events-1 h2,
  .past-events-1 h4 {
      text-align: center;
  }

  .past-events-1 h2 {
      font-size: 2rem;
  }

  .past-events-1 p {
      padding: 0rem 0.2rem;
      font-size: 0.85rem;
  }

  .past-events-1 h4 {
      padding-bottom: 1rem;
  }

  .past-events-1 img {
      margin: auto;
      padding: 1rem;
  }

  .past-events1 {
      padding: 2rem 1rem 1rem;
      display: grid;
      align-items: center;
      justify-content: center;
  }

  .past-events1 p {
      padding: 0rem 0.5rem;
      font-size: 0.85rem;

  }

  .hr-events {
      border: 1px solid var(--tan);
      width: 30%;
      margin: auto;

  }

  .hr-events1 {
      border: 1px solid var(--tan);
      margin: 1rem 0.5rem;

  }

  .event-btn {
      display: block !important;
      background-color: var(--tan);
      border: 2px solid var(--tan);
      color: var(--white);
      padding: 0.2rem 0.8rem;
      text-align: center;
      text-decoration: none;
      font-size: 1rem;
      border-radius: 0.5rem;
      font-weight: bold;
      margin: auto;
  }

  .event-btn:hover {
      cursor: pointer;
      color: var(--black);
      background-color: var(--white);
      border: 2px solid var(--black);
  }

  .events {
      padding: 0.5rem 2rem;
      margin: 2rem;
      box-shadow: 5px 5px 10px var(--tan);
  }

  /*Gallery page*/
  .gallery {
      border-top: 5px solid var(--tan);
      text-align: center;
      background-image: url('BackgroundImages/comingsoonbackground.png');
      background-position: center;
      background-size: cover;
      height: auto;
      color: var(--tan);
      display: grid;
      align-items: center;
      padding: 2rem;
  }

  .gal-title h2 {
      font-size: 2rem;
      color: var(--tan);
      padding: 1vh 0vw 1vh 10vw;
  }

  .row-g {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
  }

  /* Create four equal columns that sits next to each other */
  .column {
      flex: 25%;
      max-width: 25%;
      padding: 0 4px;
  }

  .column blockquote {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
      .column {
          flex: 50%;
          max-width: 50%;
      }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
      .column {
          flex: 100%;
          max-width: 100%;
      }
  }

  /*News Page*/
  .news-body p {
      padding-bottom: 0.5rem;
      font-size: 0.85rem;
  }

  .modal-body p {
      padding-bottom: 1rem;
      text-align: justify;
      hyphens: auto;
      font-size: 0.85rem;
  }

  .news {
      background-image: url('BackgroundImages/comingsoonbackground.png');
      background-position: center;
      background-size: cover;
      height: auto;
      display: grid;
      align-items: center;
      padding: 1rem 1rem;
      border-top: 5px solid var(--white);
  }

  .news-title h2 {
      font-size: 2rem;
      color: var(--white);
      padding: 1vh 0vw 1vh 10vw;
      background-color: var(--black);
  }

  .news-img {
      padding: 1rem;
  }

  .news-modal-img {
      height: 300px;
      width: 100%;
      margin: auto auto;
      padding: 1rem;
      background-position: center;
      background-size: cover;
      overflow: hidden;
  }

  .news-info {
      width: 80%;
      margin: auto auto;
  }

  .news-info h3 {
      font-size: 3rem !important;
      line-height: 2.8rem
  }

  .news-button {
      border: 2px solid hsl(0, 4%, 26%);
      padding: 8px 40px;
      border-radius: 1rem;
      color: hsl(0, 4%, 26%);
      background-color: transparent;
      margin-top: 1.75rem;
      width: 60%;
      font-weight: bold;
      cursor: pointer;
  }

  .news-date {
      text-align: right;
      font-size: 0.7rem;
      padding: 0.5rem;
  }

  .news-sub {
      padding: 4rem 2rem;
  }

  #scroll-to-top-btn {
      display: none;
      /* Hide button by default */
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: rgb(221, 157, 72);
      color: var(--white);
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 0.5rem;
  }

  #scroll-to-top-btn:hover {
      background-color: var(--tan);
  }

  /*MEDIA SCREENS CSS*/
  @media screen and (max-width:400px) {
      .fifth_box {
          height: 125px;
          width: 175px;
          font-size: 1.5rem;
          line-height: 1.5rem;
      }

      .fifth_hr {
          border: 1px solid var(--white);
          ;
      }
  }

  /*Payment Page*/
  .payment {
      background-color: var(--tan);
      height: 80vh;
  }

  .payment-text {
      padding: 2rem;
  }

  .payment-text p {
      padding: 0.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
  }

  .payment-btn:hover {
      color: var(--black);
      background-color: var(--white);
      border: 1px solid var(--black);
      cursor: pointer;
  }

  .payment-btn {
      display: block !important;
      background-color: var(--black);
      border: 1px solid var(--white);
      color: var(--white);
      padding: 0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      margin-top: 0.75rem;
      border-radius: 1rem;
      cursor: pointer;
      float: right;
      width: 40%;
      margin: 1.5rem auto;
      font-weight: bold;
  }

  @media screen and (max-width:500px) {
      .poster {
          height: auto;
          width: auto;
      }

      .gap-1 {
          gap: 0rem !important
      }

      .background-booking h2 {
          font-size: 3rem !important;
      }

      .col-1 {
          grid-column: auto/span 12;
      }

      .payment-btn {
          width: auto;
      }

      /* General*/

      .treat_button {
          width: 60%;
          margin: auto;
      }

      .col-s-4 {
          grid-column: auto/span 12;
      }

      .FAQ_questions {
          padding: 1rem;
      }

      .FAQ_section h2 {
          font-size: 1.5rem;
      }

      .treat11 {
          padding: 2rem 2rem 4rem;
      }

      .fifth_box {
          left: 30%;
      }

      .col-2 {
          grid-column: auto/span 12;
      }

      .col-3 {
          grid-column: auto/span 12;
      }

      .col--3 {
          grid-column: auto/span 12;
      }

      .col-s-3 {
          grid-column: auto/span 12;

      }

      .col-4 {
          grid-column: auto/span 12;
      }

      .col--4 {
          grid-column: auto/span 12;
          margin-left: 2rem;
      }

      .col-5 {
          grid-column: auto/span 12;

      }

      .col-6 {
          grid-column: auto/span 12;
      }

      .col--6 {
          grid-column: auto/span 12;
          margin-left: 2rem;
      }

      .col---6 {
          grid-column: auto/span 12;
      }

      .col-7 {
          grid-column: auto/span 12;
      }

      .col-8 {
          grid-column: auto/span 12;
      }

      .col--8 {
          grid-column: auto/span 12;
      }

      .col-9 {
          grid-column: auto/span 12;
      }

      .col---9 {
          grid-column: auto/span 12;
      }

      .dropdown-content {
          right: 2.8rem;
          top: 0.2rem;
      }

      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
          display: block;
      }

      .dropdown-3 .dropdown-content {
          display: none;
      }

      .dropdown .menu-items {
          display: none;
      }

      .dropdown-content1 {
          display: block;
      }

      /* Show the dropdown content and sub-dropdown content on click */
      .dropdown-3.active .dropdown-content {
          display: block;
      }

      .dropdown.active .menu-items {
          display: block;
      }

      .navbar a {
          padding-left: 0px;
          text-decoration: none;
      }

      .hamburger {
          display: block;
          visibility: visible;
      }

      .navbar {
          display: none;
          visibility: hidden;
      }

      /* Home Page 500px*/
      .main__all {
          margin-left: 2rem;
          padding-top: 8vh;
      }

      .fifthpg h4 {
          font-size: 1.2rem;
      }

      .main__quote h2 {
          font-size: 90% !important;
          padding: 0.6rem 0rem;
      }

      @keyframes myAnimation {
          0% {
              font-size: 1.5rem;
              margin-left: 35px;
          }

          100% {
              font-size: 3rem;
              margin-left: 0px;
          }
      }

      @keyframes myAnimation1 {
          0% {
              font-size: 70%;
              margin-left: 35px;
          }

          100% {
              font-size: 100%;
              margin-left: 0px;
          }
      }

      .main__intro,
      .main__intro1 {
          font-size: 3rem !important;
          width: 80%;
      }

      .main__quotehr {
          width: 60%;
          border: 1px solid var(--black);
      }

      .booking__btn2 {
          background-color: var(--black);
          color: var(--white);
      }

      .fourthpg {
          padding: 2rem;
      }

      .fourthpg__img {
          padding-bottom: 1rem;
      }

      .fourthpg__h3 {
          text-align: center;
      }

      .thirdpg__button {
          width: auto;
      }

      .fourth-pg-1 {
          padding: 0.5rem;
      }

      .fourthpg__button {
          width: auto;
      }

      .thirdpg__div {
          padding: 2rem 1rem;
      }

      .thirdpg__p {
          padding: 1rem;
          text-align: justify;
          hyphens: auto;
      }

      .thirdpg {
          width: 80%;
      }

      .fifth_box {
          left: 15%;
      }

      .fifthpg__img {
          margin: 0rem;
      }

      .fifthpg__button {
          width: auto;
      }

      .treat-images {
          gap: 0rem;
      }

      .space {
          padding: 1rem 0rem;
      }

      .col-lg-4 {
          grid-column: auto/span 12;
      }

      /*About Page 500px*/
      .about__image3 {
          right: 2rem;
          width: 70%;
      }

      .about__image4 {
          width: 50%;
          left: 4rem;
      }

      .about__background2 {
          padding: 0.5rem;
          width: 90%;
      }

      .about__background2 p {
          padding: 0.5rem;
          width: 90%;
          margin: auto;
      }

      .about_brief {
          padding: 0.5rem;
      }

      .about_brief1 {
          padding: 0.5rem;
      }

      .about_brief1 h2 {
          font-size: normal;
      }

      .about_brief1 h3 {
          font-size: small;
      }

      .about_brief p {
          width: 90%;
      }

      .about_brief-img1 {
          height: auto;
      }

      .about_brief-img11 {
          height: 100%;
      }

      .mission1,
      .vision1 {
          padding: 1rem;
          width: 90%;
          margin: auto;
      }

      .mission {
          padding: 0rem 1rem;
          width: 100%;
          margin: auto;
      }

      .vision {
          padding: 0rem 1rem 1.5rem;
          width: 100%;
          margin: auto;
      }

      .values-table1 {
          padding: 2.5rem 1rem;
      }

      .services-info {
          padding-bottom: 0rem;
          padding-top: 0rem;
      }

      .services-info1 {
          padding: 2rem 1rem;
      }

      .about_brief-img2 {
          padding: 1rem 1rem 2rem;
          height: 100%;
      }

      .about_brief-img {
          width: auto;
          height: auto;
      }

      .about_brief-img-1 {
          padding: 2rem 1rem 2rem;
          height: 100%;
      }

      .about__name {
          font-size: 1.8rem;
          padding-bottom: 0.5rem;
          text-align: center;
      }

      .about__name1 {
          text-align: center;
      }

      .luncheon {
          padding: 2rem;
          display: flex;
          flex-wrap: wrap;
      }

      .luncheon h2 {
          text-align: center;
      }

      .luncheon img {
          padding: 0rem;
      }

      /*Book Appointment Page 500px*/
      .bookapt {
          padding: 0.5rem;
          margin: auto auto;
      }

      .glass-effect1 {
          width: 95%;
          margin-bottom: 0.5rem;
      }

      .book-form input[type="button"] {
          float: none;
          margin: auto auto;
          margin-top: 1rem;
          width: auto;
      }

      .book-form textarea {
          margin-top: 1rem;
          min-height: 9rem;
      }

      .form-row {
          margin-bottom: 0rem;
      }

      .flex1 {
          gap: 0.5rem;
          margin-bottom: 1rem;
      }

      .form button {
          width: auto;
          margin: auto auto;
          margin-top: 1rem;
          float: none;
      }

      /*Contact Page 500px*/
      .cont-center {
          padding: 0rem;
      }

      .contact-img h2 {
          padding-left: 4rem;
          transition: 0.2s
      }

      .form {
          padding: 2rem 0rem;
          width: auto;
      }

      .form-group {
          display: inline-block;
          width: 100%;
      }

      .end {
          gap: 0rem;
      }

      .glass-effect {
          margin: 0;
      }

      button[type="submit"] {
          width: 100%;
      }

      .cont-cent1-details {
          width: auto;
          padding-left: 1rem;
      }

      /*Events Page 500px*/
      .upcoming-event {
          padding: 1rem;
      }

      .upcoming-event h2 {
          margin: 0.5rem;
          padding: 1rem 0rem;
          font-size: 1.5rem !important;
      }

      .upcoming-event h3 {
          font-size: 1.1rem;
          text-align: center;
          width: 100%;
      }

      .hr-events {
          width: 70%;
      }

      .main-event img {
          padding: 1rem 0.5rem;
      }

      .col--2 {
          grid-column: auto/span 6;
      }

      .partnership h3 {
          font-size: 1.5rem;
          text-align: center;
      }

      .partnership {
          padding: 2rem 1rem;
      }

      .partnership p {
          padding: 1rem;
      }

      .form1 {
          padding-top: 0rem;
          padding-right: 1rem;
      }

      .form-group1 input {
          margin-right: 0rem;
      }

      .form1-btn {
          width: 100%;
          justify-content: center;
          display: grid !important;
          margin: 0.5rem auto;
      }

      .past-head {
          padding: 1rem;
          font-size: 1.5rem;
      }

      .past-events1 {
          padding: 1rem;
      }

      .past-events1 p {
          width: 100%;
          padding: 1rem 0rem;
      }

      .past-events-1 h2 {
          font-size: 1.8rem !important;
      }

      .event-btn {
          margin-top: 0rem;
          margin-right: 0rem;
      }

      .past-events-1 {
          padding: 1rem;
          margin: 0rem 0.5rem 1rem;
      }

      .glass-effect .p-4 {
          padding: 3rem 2rem;
      }

      /*Gallery Page 500px*/
      .gallery {
          padding-top: 0rem;
      }

      .gallery-menu {
          padding-bottom: 1rem;
      }

      .gallery h1 {
          font-weight: bold;
          font-size: 2rem;
      }

      .gallery h2 {
          padding-top: 2rem;
          font-weight: bold;
          font-size: 1.5rem;
      }

      .gallery h4 {
          font-size: 1rem;
      }

      .gallery-menu li {
          display: flex;
          flex-wrap: wrap;
      }

      .col-s-2 {
          grid-column: auto/span 12;
      }

      .col-10 {
          grid-column: auto/span 12;
      }

      /*News Page 500px*/
      .news {

          text-align: center;
      }

      .news-body p {
          text-align: justify;
          hyphens: auto;
          padding-bottom: 0.5rem;
      }

      .mb-4 {
          margin-bottom: 0rem !important;
      }

      .news h1 {
          font-weight: bold;
          font-size: 2rem;
      }

      .news h2 {
          padding-top: 2rem;
          font-weight: bold;
          font-size: 1.5rem;
      }

      .news-info h3 {
          font-size: 1.5rem;

      }

      .hr-treats hr {
          margin-top: 1rem;
          margin-bottom: 0.5rem
      }

      .news-button {
          margin-top: 1rem;
      }

      .news-img img {
          padding-top: 1rem;
      }

      .news h4 {
          font-size: 1rem;
      }

      .reverse {
          flex-wrap: wrap;
          flex-direction: column-reverse;
          display: flex;
      }

      .news-img {
          width: auto;
      }

      .news-sub {
          padding: 0.5rem;
      }

      .news-button {
          width: 90%;
      }

      .news-sub {
          padding: 0rem;
      }

      /*Products Page*/
      .prod-info {
          display: list-item;
      }

      .prod-2 p {
          padding: 1rem 0rem 1.5rem;
          width: 90%;
      }

      .prod-2 img {
          height: auto;
          width: auto;
      }

      .prod-2 {
          padding-top: 1rem;
      }

      /*Treatments Page 500px*/

      .col-s-6 {
          grid-column: auto/span 4;
      }

      .col-s-61 {
          grid-column: auto/span 8;
      }

      .col-s-4 {
          grid-column: auto/span 12;
      }

      .col-s-8 {
          grid-column: auto/span 12;
      }

      .type-1 {
          gap: 0rem;
      }

      .type-1 img {
          height: auto;
          width: auto;
          padding: 0.5rem;
      }

      .treat img {
          padding: 0.5rem;
          width: auto;
          height: auto;
      }

      .type-22 {
          padding-left: 2vw;
      }

      .type-2 {
          padding-left: 2vw;
      }

      .treat1 {
          display: flex;
          flex-direction: column-reverse;
      }

      .treat-2 {
          padding: 1.5rem 0.5rem;
      }

      .treatment-info h2 {
          padding-top: 0rem;
          font-size: 1.2rem;
      }

      .treatment-info p {
          padding: 0.5rem;
      }

      .reverse-wrap {
          display: flex;
          flex-wrap: wrap-reverse;
          justify-content: center;
      }

      .treat-mainbtn {
          padding: 0rem 1rem;
      }

      .treat {
          margin: auto auto;
      }

      .home-credit {
          padding: 2rem;
      }

      .home-credit h2 {
          text-align: center;
      }

      .treat_button1 {
          width: auto;
      }

      .newsletter {
          padding: 2rem;
      }

      .newsletter .col-7 {
          padding-bottom: 1.5rem;
      }

      .credit img {
          padding: 1rem;
          height: auto;
          width: 90%;
          margin: auto;
      }

      .credit p {
          margin: auto;
          width: 90%;
          text-align: justify;
          hyphens: auto;
      }

      .credit h2 {
          margin-left: 8%;
      }

      .credit {
          padding: 1rem;
      }
  }

  @media (min-width:500px) and (max-width:780px) {

      .col-s-2 {
          grid-column: auto/span 12;
      }

      .col-10 {
          grid-column: auto/span 12;
      }

      .gallery-menu {
          margin-top: 0% !important;
          padding-bottom: 0.5rem;
      }

      .gallery-menu li {
          padding: 0.5rem 0.5rem !important;
      }

      .newsletter .col-5 {
          grid-column: auto/span 12 !important;
      }

      .newsletter .col-7 {
          grid-column: auto/span 12 !important;
      }
  }

  @media (min-width:500px) and (max-width:1000px) {
      .poster {
          height: auto;
          width: auto;
          padding-bottom: 1.5rem
      }

      .gap-1 {
          gap: 0rem !important
      }

      .payment-btn {
          width: auto;
      }

      .newsletter .col-7 {
          padding-bottom: 1.5rem;
      }

      .newsletter {
          padding: 2rem 3rem;
      }

      .newsletter .col-5 {
          grid-column: auto/span 5;
      }

      .newsletter .col-7 {
          grid-column: auto/span 7;
      }

      .credit img {
          padding: 2rem;
          height: auto;
          width: 70%;
          margin: auto;
      }

      .credit p {
          margin: auto;
      }

      .credit h2 {
          margin-left: 12%;
      }

      .credit {
          padding: 2rem;
      }

      .col-1 {
          grid-column: auto/span 12;
      }

      /* General*/
      .end {
          padding: 2rem 4rem;
          gap: 0rem;
      }

      .col-2 {
          grid-column: auto/span 12;
      }

      .col-3 {
          grid-column: auto/span 6;
      }

      .col--3 {
          grid-column: auto/span 12;
      }

      .col-s-3 {
          grid-column: auto/span 12;
      }

      .col-4 {
          grid-column: auto/span 12;
      }

      .col-5 {
          grid-column: auto/span 12;
      }

      .col-6 {
          grid-column: auto/span 12;
      }

      .col---6 {
          grid-column: auto/span 6;
      }

      .col-7 {
          grid-column: auto/span 12;
      }

      .col-8 {
          grid-column: auto/span 12;
      }

      .col-9 {
          grid-column: auto/span 12;
      }

      .col---9 {
          grid-column: auto/span 12;
      }

      .flex {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
      }

      .dropdown-content {
          right: 2.8rem;
          top: 0.2rem;
      }

      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
          display: block;
      }

      .dropdown-3 .dropdown-content {
          display: none;
      }

      .dropdown .menu-items {
          display: none;
      }

      dropdown-content1 {
          display: block;
      }

      /* Show the dropdown content and sub-dropdown content on click */
      .dropdown-3.active .dropdown-content {
          display: block;
      }

      .dropdown.active .menu-items {
          display: block;
      }

      .navbar a {
          padding-left: 0px;
          text-decoration: none;
      }

      .hamburger {
          display: block;
          visibility: visible;
      }

      .navbar {
          display: none;
          visibility: hidden;
      }

      /*Home Page 1000px*/
      .fifthpg h4 {
          font-size: 1.2rem;
      }

      .fourthpg__content {
          margin-top: 1rem;
      }

      .main__all {
          margin-left: 2rem;
      }

      @keyframes myAnimation {
          0% {
              font-size: 2.5rem;
              margin-left: 65px;
          }

          100% {
              font-size: 4.5rem;
              margin-left: 0px;
          }
      }

      @keyframes myAnimation1 {
          0% {
              font-size: 70%;
              margin-left: 65px;
          }

          100% {
              font-size: 100%;
              margin-left: 0px;
          }
      }

      .main__intro1,
      .main__intro {
          width: 70%
      }

      .logo {
          left: -10px;
      }

      .main__quote h2 {
          font-size: 100%;
          padding: 1rem;
      }

      .fourthpg__img {
          padding-bottom: 1rem;
      }

      .thirdpg__button {
          width: auto;
      }

      .fourthpg__button {
          width: 70%;
          margin: auto auto;
          margin-top: 1rem;
      }

      .thirdpg {
          width: 80%;
          ;
      }

      .fifth_box {
          left: 30%;
      }

      .fifthpg__img {
          margin: 0rem;
      }

      .fifthpg__button {
          width: auto;
      }

      .col-lg-4 {
          grid-column: auto/span 12;
      }

      /*About Page 1000px*/
      .about__image3 {
          right: 4rem;
          width: 50%;
      }

      .luncheon {
          width: 80%;
          margin: auto;
      }

      .luncheon img {
          padding: 1rem;
          height: auto;
      }

      .about_brief-img,
      .about_brief-img-1,
      .about_brief-img2 {
          width: 80%;
          margin: auto;
      }


      .about_brief-img-1 {
          padding-bottom: 2rem;
      }

      .about_brief_p1 p {
          font-size: normal;
          width: 80%;
          margin: auto auto;
          line-height: 1.7rem;
          padding-bottom: 0.8rem;
      }

      .values-table p {
          text-align: center;
          padding-bottom: 0.5rem;
      }

      .about_brief-img2 {
          height: 100%;
          padding-bottom: 2.5rem;
      }

      .services-info1 p {
          padding-bottom: 2rem;
      }

      .services-info {
          padding-bottom: 0rem;
          padding-top: 0rem;
      }

      .mission1 {
          padding: 1.5rem 0rem 1rem;
      }

      .vision1 {
          padding: 1rem 0rem 2rem;
      }

      .vision {
          padding-top: 0.5rem;
      }

      .mission {
          padding-bottom: 0.5rem;
          padding-top: 1rem;
      }

      .reverse-wrap {
          display: flex;
          justify-content: center;
          flex-wrap: wrap-reverse;
      }

      /*Book Appointment Page 1000px*/
      .book-form input[type="button"] {
          float: none;
          margin: auto auto;
          margin-top: 1rem;
          width: auto;
      }

      .form-row {
          margin-bottom: 0rem;
      }

      .flex1 {
          gap: 0.5rem;
          margin-bottom: 1rem;
      }

      .glass-effect1 {
          width: 90%;
          margin-bottom: 0.5rem;
      }

      .book-form textarea {
          margin-top: 1rem;
          min-height: 9rem;
      }

      /*Contact Page 1000px*/
      .form {
          padding: 2rem 0rem;
          width: auto;
      }

      .form button {
          width: auto;
          margin: auto auto;
          margin-top: 1rem;
          float: none;
      }

      .form-group {
          display: inline-block;
          width: 100%;
      }

      .cont-center {
          padding: 0rem;
      }

      .map-div {
          padding-bottom: 2rem;
      }

      button[type="submit"] {
          width: 100%;
      }

      .cont-cent1-details {
          width: auto;
          padding-left: 1rem;
      }

      /*Events Page 1000px*/

      .upcoming-event h3 {
          padding-bottom: 1rem;
          font-size: 1.5rem;

      }

      .upcoming-event p {
          font-size: large;
      }

      .event-img {
          padding: 0.5rem 1rem;
          margin: auto;
      }

      .event-img img {
          padding: 0rem;
          margin: auto;
      }

      .col--2 {
          grid-column: auto/span 4;
      }

      .form1-btn {
          margin-top: 2rem;
          width: 100%;
      }

      .past-events1 h5 {
          padding-bottom: 0.5rem;
          ;
      }

      .past-events1 p {
          padding: 0.25rem;
          width: 100%;
      }

      .event-btn {
          margin-top: 0.75rem;
      }

      /*Gallery 1000px*/
      .gallery-menu li {
          display: inline-flex;
          flex-wrap: wrap;
          background-color: var(--tan);
          padding: 0.2rem 0.5rem;
          margin: 0.2rem;
          color: var(--white);
          line-height: 1.75rem;
      }

      /*News page 1000px*/
      .reverse {
          flex-wrap: wrap;
          flex-direction: column-reverse;
          display: flex;
      }

      .news {
          text-align: center;
      }

      /*Products Page 1000px*/
      .prod-info {
          display: list-item;
      }

      .prod-2 p {
          padding: 1rem 0rem 3rem;
          width: 90%;
          font-size: 1rem;
      }

      .prod-2 {
          padding-top: 1rem;
      }

      .prod-2 img {
          height: auto;
          width: auto;
      }

      /*Treatments Page 1000px*/
      .treat-info {
          width: 85%;
          margin: auto auto;
      }

      .type-2 {
          width: 85%;
      }

      .col--6 {
          grid-column: auto/span 6;
      }

      .col-s-6 {
          grid-column: auto/span 2;
      }

      .col-s-61 {
          grid-column: auto/span 10;
      }

      .col-s-4 {
          grid-column: auto/span 4;
      }

      .col-s-8 {
          grid-column: auto/span 10;
      }

      .col--8 {
          grid-column: auto/span 6;
      }

      .treat img {
          padding: 1rem;
      }

      .type-22 {
          padding-left: 6vw;
      }

      .type-1 img {
          height: auto;
          width: auto;
      }

      .treat1 {
          display: flex;
          flex-direction: column-reverse;
      }

      .treat_button {
          width: 50%;
          margin: auto;
      }

  }

  #snackbar {
      visibility: hidden;
      /* Hidden by default. Visible on click */
      min-width: 250px;
      /* Set a default minimum width */
      margin-left: -125px;
      /* Divide value of min-width by 2 */
      background-color: green;
      /* Black background color */
      color: #fff;
      /* White text color */
      text-align: center;
      /* Centered text */
      border-radius: 2px;
      /* Rounded borders */
      padding: 16px;
      /* Padding */
      position: fixed;
      /* Sit on top of the screen */
      z-index: 1000000000;
      /* Add a z-index if needed */
      right: 1%;
      /* Center the snackbar */
      top: 3.8rem;
      /* 30px from the bottom */
  }

  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
      visibility: visible;
      /* Show the snackbar */
      /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
                    However, delay the fade out process for 2.5 seconds */
      -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
      animation: fadein 0.5s, fadeout 0.5s 4.5s;
  }

  #Negative-snackbar {
      visibility: hidden;
      /* Hidden by default. Visible on click */
      min-width: 250px;
      /* Set a default minimum width */
      margin-left: -125px;
      /* Divide value of min-width by 2 */
      background-color: green;
      /* Black background color */
      color: #fff;
      /* White text color */
      text-align: center;
      /* Centered text */
      border-radius: 2px;
      /* Rounded borders */
      padding: 16px;
      /* Padding */
      position: fixed;
      /* Sit on top of the screen */
      z-index: 1000000000;
      /* Add a z-index if needed */
      right: 1%;
      /* Center the snackbar */
      top: 3.8rem;
      /* 30px from the bottom */
  }

  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #Negative-snackbar.show {
      visibility: visible;
      /* Show the snackbar */
      /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
                    However, delay the fade out process for 2.5 seconds */
      -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
      animation: fadein 0.5s, fadeout 0.5s 4.5s;
  }

  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
      from {
          top: 0;
          opacity: 0;
      }

      to {
          top: 30px;
          opacity: 1;
      }
  }

  @keyframes fadein {
      from {
          top: 0;
          opacity: 0;
      }

      to {
          top: 1%;
          opacity: 1;
      }
  }

  @-webkit-keyframes fadeout {
      from {
          top: 1%;
          opacity: 1;
      }

      to {
          top: 0;
          opacity: 0;
      }
  }

  @keyframes fadeout {
      from {
          top: 1%;
          opacity: 1;
      }

      to {
          top: 0;
          opacity: 0;
      }
  }

  .gallery-menu {
      margin-top: 5%;
      justify-content: center;
      height: auto;
      font-size: 1.2rem;
      display: flex;
      line-height: 2.5rem;
  }

  .gallery-menu ul {
      padding: 2px;
  }

  .gallery-menu li {
      display: flex;
      gap: 0.5rem;
      background-color: var(--tan);
      padding: 0.2rem 0.5rem;
      margin: 0.2rem;
      color: var(--white);
  }

  li:hover {
      color: var(--black) !important;
      background-color: var(--tan) !important;
      cursor: pointer;
  }


  .gallery-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: var(--tan);
      box-shadow: 0 0 3px 0 rgba(44, 44, 44, 0.3);
      width: 95%;
      margin: 0 auto;
      padding: 10px;
  }

  .gallery-item {
      flex-basis: 32.7% !important;
      margin-bottom: 0.6rem;
      opacity: .85;
      cursor: pointer;
  }

  .gallery-item:hover {
      opacity: 1;
  }

  .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .gallery-content {
      font-size: .8em;
  }

  .lightbox {
      position: fixed;
      display: none;
      background-color: rgba(0, 0, 0, 0.8);
      width: 100%;
      height: 100%;
      overflow: auto;
      top: 0;
      left: 0;
  }

  .lightbox-content {
      position: relative;
      width: 60%;
      height: auto;
      margin: 5% auto;
  }

  .lightbox-content img {
      border-radius: 7px;
      box-shadow: 0 0 3px 0 rgba(225, 225, 225, .25);
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .lightbox-prev,
  .lightbox-next {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 7px;
      top: 45%;
      cursor: pointer;
  }

  .lightbox-prev {
      left: 0;
  }

  .lightbox-next {
      right: 0;
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
      opacity: .8;
  }

  @media (max-width: 767px) {
      .gallery-container {
          width: 100%;
      }

      .gallery-item {
          flex-basis: 49.80%;
          margin-bottom: 3px;
      }

      .lightbox-content {
          width: 80%;
          height: 60%;
          margin: 15% auto;
      }
  }

  @media (max-width: 480px) {
      .gallery-item {
          flex-basis: 100%;
          margin-bottom: 1px;
      }

      .lightbox-content {
          width: 90%;
          margin: 20% auto;
      }
  }



  /* modal css */
  .modal {
      --bs-modal-zindex: 1055;
      --bs-modal-width: 500px;
      --bs-modal-padding: 1rem;
      --bs-modal-margin: 0.5rem;
      --bs-modal-color: ;
      --bs-modal-bg: #fff;
      --bs-modal-border-color: var(--bs-border-color-translucent);
      --bs-modal-border-width: 1px;
      --bs-modal-border-radius: 0.5rem;
      --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      --bs-modal-inner-border-radius: calc(0.5rem - 1px);
      --bs-modal-header-padding-x: 1rem;
      --bs-modal-header-padding-y: 1rem;
      --bs-modal-header-padding: 1rem 1rem;
      --bs-modal-header-border-color: var(--bs-border-color);
      --bs-modal-header-border-width: 1px;
      --bs-modal-title-line-height: 1.5;
      --bs-modal-footer-gap: 0.5rem;
      --bs-modal-footer-bg: ;
      --bs-modal-footer-border-color: var(--bs-border-color);
      --bs-modal-footer-border-width: 1px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--bs-modal-zindex);
      display: none;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      outline: 0
  }

  .modal-dialog {
      position: relative;
      width: auto;
      margin: var(--bs-modal-margin);
      pointer-events: none
  }

  .modal.Modalfade .modal-dialog {
      transition: transform .3s ease-out;
      transform: translate(0, -50px)
  }

  @media (prefers-reduced-motion:reduce) {
      .modal.Modalfade .modal-dialog {
          transition: none
      }
  }

  .modal.show .modal-dialog {
      transform: none
  }

  .modal.modal-static .modal-dialog {
      transform: scale(1.02)
  }

  .modal-dialog-scrollable {
      height: calc(100% - var(--bs-modal-margin) * 2)
  }

  .modal-dialog-scrollable .modal-content {
      max-height: 100%;
      overflow: hidden;
  }

  .modal-dialog-scrollable .modal-body {
      overflow-y: auto
  }

  .modal-dialog-centered {
      display: flex;
      align-items: center;
      min-height: calc(100% - var(--bs-modal-margin) * 2)
  }

  .modal-content {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      color: var(--bs-modal-color);
      pointer-events: auto;
      background-color: var(--bs-modal-bg);
      background-clip: padding-box;
      border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
      border-radius: var(--bs-modal-border-radius);
      outline: 0
  }

  .modal-backdrop {
      --bs-backdrop-zindex: 1050;
      --bs-backdrop-bg: #000;
      --bs-backdrop-opacity: 0.5;
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--bs-backdrop-zindex);
      width: 100vw;
      height: 100vh;
      background-color: var(--bs-backdrop-bg)
  }

  .modal-backdrop.Modalfade {
      opacity: 0
  }

  .modal-backdrop.show {
      opacity: var(--bs-backdrop-opacity)
  }

  .modal-header {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: space-between;
      padding: var(--bs-modal-header-padding);
      border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
      border-top-left-radius: var(--bs-modal-inner-border-radius);
      border-top-right-radius: var(--bs-modal-inner-border-radius)
  }

  .modal-header .btn-close {
      padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
      margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto
  }

  .modal-title {
      margin-bottom: 0;
      line-height: var(--bs-modal-title-line-height)
  }

  .modal-body {
      position: relative;
      flex: 1 1 auto;
      padding: var(--bs-modal-padding)
  }

  .modal-footer {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
      background-color: var(--bs-modal-footer-bg);
      border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
      border-bottom-right-radius: var(--bs-modal-inner-border-radius);
      border-bottom-left-radius: var(--bs-modal-inner-border-radius)
  }

  .modal-footer>* {
      margin: calc(var(--bs-modal-footer-gap) * .5)
  }

  @media (min-width:576px) {
      .modal {
          --bs-modal-margin: 1.75rem;
          --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
      }

      .modal-dialog {
          max-width: var(--bs-modal-width);
          margin-right: auto;
          margin-left: auto
      }

      .modal-sm {
          --bs-modal-width: 300px
      }
  }

  @media (min-width:992px) {

      .modal-lg,
      .modal-xl {
          --bs-modal-width: 800px
      }
  }

  @media (min-width:1200px) {
      .modal-xl {
          --bs-modal-width: 1140px
      }
  }

  .modal-fullscreen {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0
  }

  .modal-fullscreen .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0
  }

  .modal-fullscreen .modal-footer,
  .modal-fullscreen .modal-header {
      border-radius: 0
  }

  .modal-fullscreen .modal-body {
      overflow-y: auto
  }

  @media (max-width:575.98px) {
      .modal-fullscreen-sm-down {
          width: 100vw;
          max-width: none;
          height: 100%;
          margin: 0
      }

      .modal-fullscreen-sm-down .modal-content {
          height: 100%;
          border: 0;
          border-radius: 0
      }

      .modal-fullscreen-sm-down .modal-footer,
      .modal-fullscreen-sm-down .modal-header {
          border-radius: 0
      }

      .modal-fullscreen-sm-down .modal-body {
          overflow-y: auto
      }
  }

  @media (max-width:767.98px) {
      .modal-fullscreen-md-down {
          width: 100vw;
          max-width: none;
          height: 100%;
          margin: 0
      }

      .modal-fullscreen-md-down .modal-content {
          height: 100%;
          border: 0;
          border-radius: 0
      }

      .modal-fullscreen-md-down .modal-footer,
      .modal-fullscreen-md-down .modal-header {
          border-radius: 0
      }

      .modal-fullscreen-md-down .modal-body {
          overflow-y: auto
      }
  }

  @media (max-width:991.98px) {
      .modal-fullscreen-lg-down {
          width: 100vw;
          max-width: none;
          height: 100%;
          margin: 0
      }

      .modal-fullscreen-lg-down .modal-content {
          height: 100%;
          border: 0;
          border-radius: 0
      }

      .modal-fullscreen-lg-down .modal-footer,
      .modal-fullscreen-lg-down .modal-header {
          border-radius: 0
      }

      .modal-fullscreen-lg-down .modal-body {
          overflow-y: auto
      }
  }

  @media (max-width:1199.98px) {
      .modal-fullscreen-xl-down {
          width: 100vw;
          max-width: none;
          height: 100%;
          margin: 0
      }

      .modal-fullscreen-xl-down .modal-content {
          height: 100%;
          border: 0;
          border-radius: 0
      }

      .modal-fullscreen-xl-down .modal-footer,
      .modal-fullscreen-xl-down .modal-header {
          border-radius: 0
      }

      .modal-fullscreen-xl-down .modal-body {
          overflow-y: auto
      }
  }

  @media (max-width:1399.98px) {
      .modal-fullscreen-xxl-down {
          width: 100vw;
          max-width: none;
          height: 100%;
          margin: 0
      }

      .modal-fullscreen-xxl-down .modal-content {
          height: 100%;
          border: 0;
          border-radius: 0
      }

      .modal-fullscreen-xxl-down .modal-footer,
      .modal-fullscreen-xxl-down .modal-header {
          border-radius: 0
      }

      .modal-fullscreen-xxl-down .modal-body {
          overflow-y: auto
      }
  }

  /* close button in model */
  .btn-close {
      box-sizing: content-box;
      width: 1em;
      height: 1em;
      padding: .25em .25em;
      color: #000;
      background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
      border: 0;
      border-radius: .375rem;
      opacity: .5
  }

  .btn-close:hover {
      color: #000;
      text-decoration: none;
      opacity: .75
  }

  .btn-close:focus {
      outline: 0;
      box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
      opacity: 1
  }

  .btn-close.disabled,
  .btn-close:disabled {
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      opacity: .25
  }

  .btn-close-white {
      filter: invert(1) grayscale(100%) brightness(200%)
  }

  /* margin bottom */
  .mb-4 {
      margin-bottom: 2rem;
  }

  .invisible {
      display: none;
  }


  .card {
      box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
      margin-bottom: 1rem;
  }

  .card {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: #fff;
      background-clip: border-box;
      border: 0 solid rgba(0, 0, 0, .125);
      border-radius: 0.25rem;
  }

  .collapse:not(.show) {
      display: none
  }

  .collapsing {
      height: 0;
      overflow: hidden;
      transition: height .35s ease;
  }

  @media (prefers-reduced-motion:reduce) {
      .collapsing {
          transition: none
      }
  }