/* CSS Reset*/

/*
  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;
  }
  /*
    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;
  }
  /* Columns */
  .row {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 0px;
  } 
  .col-1{
      grid-column: auto/span 1;
  
  }.col-2{
      grid-column: auto/span 2;
  
  }.col-3{
      grid-column: auto/span 3;
  
  }
  .col-4{
      grid-column: auto/span 4;
  
  }
  .col-5{
      grid-column: auto/span 5;
  
  }
  .col-6{
      grid-column: auto/span 6;
  
  }.col-7{
      grid-column: auto/span 7;
  
  }.col-8{
      grid-column: auto/span 8;
  
  }.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;
  }
  
  /* First Section*/
  .Logo{
      width:auto;
      height:150%;
      margin-left:3vw;
  }
  .Logo:hover{
      cursor: pointer;
  }
  .navbar {
      overflow: hidden;
      font-family: Arial;
      display: flex;
      align-items: center;
  }
  
  /* Links inside the navbar */
  .navbar a {
      display:inline-flex;
      flex-direction: row;
      color:white;
      font-size: 1rem;
      text-align: center;
      padding: 1rem;
      text-decoration: none;
  }
  
  .navbar a:hover{
      color:gold;
  }
  
  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:black;
  }
  
  /* The dropdown container */
  .dropdown {
      float: left;
      overflow: hidden;
      color: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:black;
      /*font-size:20px;
      transition-duration:.5s;*/
      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: 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: gold;
      color: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 gold;
      color:gold;
      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 gold;
      color:gold;
      cursor: pointer;
      background-color: black;
      }
  .main__intro{
      margin-top:6rem;
      font-size:4rem;
      width:50%;
      color:black;
      line-height: 4rem;
      font-weight: lighter;
      font-style: italic; 
  }
  .main__intro1{
      font-size:4.5rem;
      width:50%;
      color:goldenrod;
      font-weight: bolder;
      line-height: 4rem;
      font-weight: lighter;
  }
  .main__all{
      margin-left:6rem;
  }
  header{
      padding:5px;
      height:60px;
      width:100%;
      background-color: hsla(0, 4%, 26%, 0.4);
      display:inline-flex;
      justify-content:space-between;
      align-items:center;
      position:fixed;
      top:0;
      z-index:6;
      
  }
  .logo{
      width:15%;
      height:15%;
      position:relative;
      top:80px;
      left:-50px;
  }
  
  /* Second Section*/
  .main__quote{
      background-image: url('BackgroundImages/goldbg2.jpg');
      background-position:center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color:black;
      min-height:150px;
      height:150px;
      font-family:serif;
      text-align: center;
      display: grid;
      align-content: center;
      font-size: 1.75rem!important;
  }
  .main__quotehr{
      border:2px solid black;
      width:45%;
      margin:auto auto;
  }
  .main__quote h1{
      padding:0.5rem;
  }
  /* Third Section*/
  .thirdpg{
      height:auto;
      width:60%;
      margin:auto auto;
      display:flex;
      align-items: center;
  }
  .thirdpg1{
      background-image: url('BackgroundImages/backgrr2.png');
      background-position:center;
      background-size: cover;
      background-repeat: no-repeat;
  }
  .thirdpg__div{  
      display:grid; 
       gap:2rem;
  }
  .thirdpg h2{
      font-size:2.3rem;
      color:white;
      text-align: center;
      padding-top:1rem;
  }
  .thirdpg__p{
      color:white;
      padding:1rem;
      text-align:center; 
      font-size: large;
  }
  .treat-images{
      gap:2rem;
  }
  .thirdpg__button{
      border:2px solid hsl(0, 4%, 26%);
      padding:8px 40px;
      border-radius:1rem;
      color:white;
      background-color: transparent;
      width:40%;
      margin:auto auto;
      border-radius:1rem;
      font-weight: bold;
  }
  .thirdpg__button:hover{
      background-color: black;  
      color:gold;
      border:2px solid gold;
      cursor:pointer;
  }
  
  
  /* Fourth Section*/
  .fourthpg{
      height:auto;
      background-color: white;  
  }
  .fourth-pg-1{
      padding:4rem;
  }
  
  .fourthpg__img{
      max-height:600px;
      width:80%;
      margin:auto auto;
  }
  
  .fourthpg__content{
      margin:auto auto;
      width:80%;
  }
  .fourthpg__h3{
      font-size: 2rem;
      color:black;
      margin-bottom:2%;
  }
  .fourthpg__p{
      margin-bottom:2%;
      text-align: justify;
  }
  .fourthpg__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;
  }
  .fourthpg__button a{
      text-decoration:none;
      color:black;
      
  }
  .fourthpg__button:hover{
      background-color: black;  
      color:gold;
      border:2px solid gold;
      cursor:pointer;
  }
  
  /* Fifth Section*/
  .fifthpg{
      background-image: url('BackgroundImages/backgrr1.png');
      background-position: center;
      background-size: cover;
      height:auto;
      display:flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin:auto auto;
      text-align: center;
      align-content: center;
      gap:1rem;
      color:white;
      padding:2rem;
      padding-top:2.5rem;
  }
  .fifth_box{
      height:150px;
      width:200px;
      background-color: black;
      color:white;
      position: relative;
      top:-6rem;
      left:6rem;
      font-size: 2rem;
      text-align: left;
      gap: 0.75rem;
      line-height: 1.75rem;
      display: grid;
      align-content: center;   
      padding:2rem;
       box-shadow: 5px 5px 8px goldenrod;
  }
  .fifth_hr{
      width:40%;
      border:2px solid white;
  }
  .fifthpg__h3{
      margin-top:1.5rem;
      margin-bottom:1rem;
      color:black;
      font-size: 2.5rem;    
  }
  .fifthpg h4{
      margin-top:1.5rem;
      font-size: 1.5rem;
      margin-bottom:1rem;
      color: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:white;
      margin-top:-6rem;
      margin-bottom:2rem;
      width:20rem;
      margin-left:auto;
      margin-right:auto;
      background-color:black;
      font-weight: bold;
  }
  .fifthpg__button:hover{
     background-color:black;  
      color:gold;
      border:2px solid gold;
      cursor:pointer;
  }
  .col-lg-4{
      grid-column: auto/span 4;
  
  }
  
  /* Quote */
  .hr{
      width:50%;
      margin: auto auto;
      margin-top:1rem;
      margin-bottom:1rem;
      border: 1px solid goldenrod;
  }
  .mainpage__f-sect{
      display:grid;
      align-content: center;
      height:auto;
      padding:1rem;
      background: white;
      
  }
  .mainpage__f-sect p{
      text-align:center;
      color:black;
      font-size: 1.5rem;
      width:80%;
      margin: auto auto;
  }
  
  
  
  /* 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;
  }
  .quicklinks p{
      display:grid;
      margin:0px;
      text-align: left;
      
  }
  .quicklinks a:hover{
      text-decoration: underline;
      color:gold;
      font-weight: bold;
      
  }
  
  
  /* About Page */
  /* About - First Section */
  .aboutmain__{
      height:3.8rem;
      background-color: black;
      z-index:-2;
  }
  .about-img h2{
      font-size: 2rem;
      color:white;
      padding: 1vh 0vw 1vh 10vw;
  }
  .about-img {
      background-color: black;
      font-size: 2rem;
      color:white;
  }
  .about_brief{
      min-height:30vh;
      height:auto;
      background-color: black;
      display:grid;
      align-content: center;
      border:5px solid black;
      border-top-color:white;
      padding:2rem;
      text-align: justify;
  
  }
  .about_brief p{
      color:white;
      width:80%;
      margin:auto auto;
      z-index:2;
      font-size: large;
  }
  .about_brief_p1 p{
      color:white;
      width:95%;
      margin:auto auto;
      font-size: large;
      z-index:2;
      
  }
  
  .about_brief-img{
      height:auto;
      width:100%;
      padding:1rem;
      
  }
  
  .about-images{
      height:60px;
      background-image: url('BackgroundImages/gold.jpg');
      background-position:bottom;
      background-size: cover;
  }
  .about__background1{
      background-image: url('BackgroundImages/abt%20background1.png');
      color:black;
      display: grid;
      align-content: center;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      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{
      font-size:large;
      text-align: justify;
      padding:0.5rem;
  }
  .hr_about{
      border:2px solid goldenrod;
      margin-top:1rem; 
      margin-bottom:1rem;
  }
  .about__image1{
  width:50%;
  margin:auto auto;
  
  }
  .about__image2{
  width:65%;
  margin:auto auto;
   position:relative;
      left:-5rem;
  }
  
  .about__image3{
      width:50%;
      margin:auto auto;
      position:relative;
      right:8rem;
      top:rem;
      
      
  }.about__image4{
      width:50%;
      margin:auto auto;
      position:relative;
      left:5rem;
      top:-1rem;
      
  }
  
  /* About - Second Section */
  
  .about_brief1{
      background-image: url('BackgroundImages/backgroundddd.png');
      min-height:25vh;
      height:auto;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #000;
      display:grid;
      align-content: center;
      padding:2rem;
  }
  .about_brief1 h2, .about_brief1 h3{
      color:white;
      width:80%;
      margin:auto auto;
      font-size:large;
      text-align: center;
  }
  /* About - Third Section */
  /* About - Footer - - Same as others */
  
  /* Contact Us Page*/
  .contact-1{
      padding:1rem 2rem;
        color:white;
  }
  .glass-effect { 
      background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3)); 
      -webkit-backdrop-filter: blur(30px); 
     
     
      border-radius: 32px;
      padding:1.5rem 4rem;
      margin: 0 2rem 5rem 2rem;
  }
  .contact-img h2{
      font-size: 2rem;
      color:white;
      padding:1.4vh 0vw 0vh 10vw;
  }
  .contact_pg{
      background-image:url('BackgroundImages/contback2.png');
      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: 48%;
  }
  .full-width {
    width: 100%;
  }
  
  .form{
      padding:2rem 3rem;
      width:50vw;
  }
  .form-group label {
      display: block;
      margin-bottom: 0.2rem;
  }
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea {
      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;
  }
  textarea {
      height: 15rem;
  }
  .form button {
      display: block!important;
      background-color: transparent;
      border:2px solid white;
      color:white;
      padding:0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin-top:.75rem;
      border-radius: 1rem;
      cursor: pointer;
      float:right;
      width:30%;
      font-weight: bold;
  }
  .form button:hover {
     background-color: hsla(0, 4%, 26%, 0.4);  
      color:gold;
      border:2px solid gold;
      cursor:pointer;
  }
  
  
  #map {
      height: 400px;
      width: 100%;
      background-color: aqua;
  }
  
  
  .cont-center{
      width:90%;
      margin:auto auto;
  }
  .cont-center1-h3 {
      width:100%;
  }
  
  
  iframe{
      width:100%;
      height:70vh;
      border:0;
  }
  
  
  
  
  /* Treatment Page*/
  .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;
  }
  .treat-1 h2{ 
      padding:5vh 0vw 1vh 10vw;
      font-size: 2rem;
      color:white;
      background-image:url('BackgroundImages/contback2.png');
      height:auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .treat-1 p{ 
      margin:auto;
      width:80%;
      font-size: large;
      text-align:justify;
  }
  .treat-2{
      border:5px solid white;
      border-top-color:goldenrod;  
      padding:2rem;
  }
  .treat h3{ 
      width:80%;
      margin:auto auto;
      font-size: 1.8rem;
      padding-top:1rem;
      
  }
  .treat h4{ 
      width:80%;
      margin:auto auto;
      font-size: 1.1rem;
      padding-top:0.5rem;
      
  }
  .treat p{ 
      width:80%; 
      font-size: large;
      margin:auto auto;
      text-align: justify; 
  }
  .treat-type{
      max-height:10rem;
      height:8rem;
      background-color:white;
      color:white;
      width:85%;
      margin:1rem;
      border:2px solid white;
      box-shadow: 2px 2px 8px lightgray;
      border-radius: 1rem;
  }
  .treat img{
      height:400px;
      width:auto;
      
  }
  .type p{
      text-align: justify;
  }
  
  .hr-treats hr{
      margin-top:1rem;
      border:2px solid goldenrod;
  }
  .hr-treats-1 hr{
      border:2px solid goldenrod;
      width:70%;
      margin:auto auto;
  }
  .type-1 h2{
      color: goldenrod;
  }
  .type{
      padding:.75rem;
      text-align:left;
  }
  .type h4{
      padding:.75rem;
      text-align:center;
  }
  .type-1{
      padding:2rem;
      gap:2rem;
      text-align:center;
  }
  .type-1 img{
      margin: auto auto;
      padding:2.5rem;
      height:400px;
      width:auto;
  }
  .type-2{
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      width:85%;
      margin:auto auto;
      padding-left: 4vw;
  }
  .type-22{
      margin: auto auto;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      width:85%;
      padding-left: 6vw;
  }
  .type-2 h5, .type-22 h5{
      padding-bottom: .5rem;
  }
  .float-r{
  float:right;
  }
  
  /* Products Page*/
  .prod-1 h2{
      padding:5vh 0vw 1vh 10vw;
      font-size: 2rem;
      color:black;
      background-color: url('BackgroundImages/contback2.png');
      height:auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .prod-2{
      display: grid;
      justify-content: center;
      align-items: center;
      border:5px solid white;
      border-top-color: black;
      height:auto;
      padding:2rem;
  }
  .prod-2 img{
      width:auto;
      margin:auto auto;
      height:400px;
  }
  .prod-2 p{
      width:70%;
      margin:auto auto;
      font-size: large;
      text-align: justify;
  }
  .prod-info{
      display:flex;
      justify-content: space-between;
      background-color: black;
      color:white;
      min-height:100px;
      align-content: center;
      padding:1rem;
  }
  .prod-info-1 img{
      padding-top:1rem;
  }
  .col{
      flex: 1 0 0%;
    }
    .justify-content-between {
      justify-content: space-between !important;
    }
    .prod-info2 h1 {
      text-align: center!important;
      padding:1rem 1rem 0rem 1rem;
      color:white;
      background-color: black
  }
  .prod-info2 h4{
      text-align: center!important;
      padding:0.2rem;
      color:white;
      background-color: black
  }
  .prod-info-1 h3{
      text-align: center;
      padding:1rem 0.25rem;
  }
  .prod-info-1{
      text-align: justify;
  }
  .prod-info-1 img{
      height:100px;
      width:auto;
      margin:auto auto;
  }
  .prod-info-1:hover{
      background-image: url('BackgroundImages/contback2.png');
      border-radius: 0.5rem;
      border:1px solid gold;
      padding:0rem 1.2rem;
      box-shadow: 2px 2px 5px gold;
      gap:0.2rem;
      transition: 0.15s;
  }
  
  /*.products-grid > div{
      padding:3rem 3rem ;
  }*/
  .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);
 
  }
  .prod-details img{
      height:200px;
      width:auto;
      margin:auto auto;
      padding: 1rem;
  }
  /*Gallery page*/
  .gallery{
      text-align:center;
      background-image: url('BackgroundImages/comingsoonbackground.png');
      background-position: center;
      background-size: cover;
      height:auto;
      color:darkgoldenrod;
      display:grid;
      align-items: center;
      padding:2rem;
  }
  
  
  
  .gal-title{
      font-size: 1.5rem;
      color:goldenrod;
      padding: 1.2vh 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{
      background-image: url('BackgroundImages/comingsoonbackground.png');
      background-position: center;
      background-size: cover;
      height:auto;
      
      display:grid;
      align-items: center;
      padding:1rem 1rem;
  }
  .news-title{
    font-size: 1.5rem;
    color:white;
    padding: 1vh 0vw 1vh 10vw;
    background-color: black;
    border-bottom:5px solid goldenrod;
  }
  .news-img{
    height:auto;
    width:400px;
    margin: auto auto;
    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;
  }
  .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-button-modal{
    border:2px solid hsl(0, 4%, 26%);
    padding:8px 40px;
    border-radius:1rem;
    color:hsl(0, 4%, 26%);
    background-color: transparent;
    cursor: pointer;
  } */
  .news-date{
    text-align: right;
    font-size: 0.7rem;
    padding:0.5rem;
  }
  .news-sub{
    padding: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: white;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 0.5rem;
    }
    
    #scroll-to-top-btn:hover {
      background-color: gold;
    }
    
  
  /*Book An Appointment Page*/
  .bookapt{
      padding:2rem;
      display:grid;
      grid-auto-flow: dense;
      grid-gap:2px;
      background-image: url('BackgroundImages/apt\ background.webp');
      background-position: center;
      background-size: cover;
      color:white;
      font-size: large;
  }
  .book-form{
      justify-content: space-around;
      width:90%;
      margin:auto auto;
  }
  .book-form input[type="submit"]{
  display: block!important;
      background-color: transparent;
      border:2px solid white;
      color:white;
      padding:0.5rem 1rem;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin-top:.75rem;
      border-radius: 1rem;
      cursor: pointer;
      float:right;
      font-weight: bold;
  padding:0.5rem 3rem;
  }
  .book-form input[type="submit"]:hover{
      background-color: hsla(0, 4%, 26%, 0.4);  
      color:gold;
      border:2px solid gold;
      cursor:pointer;
      }
  .glass-effect1 { 
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); 
      -webkit-backdrop-filter: blur(30px); 
     
     
      border-radius: 1rem;
      padding:1.5rem 1rem;
      margin: auto auto;
      width:80%;
  }
  .flex1{
      display:flex;
      flex-direction: row;
      flex-wrap:wrap;
      gap:2rem;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @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 white;
      }
      
  
  
  
  }
  
  
  
  
  
  
  
  
  
  
  
  @media screen and (max-width:500px){
      
  /* General*/
  
  .fifth_box{
      left:30%;
  }
  .col-2{
      grid-column: auto/span 12;
  
  } 
  .col-3{
      grid-column: auto/span 12;
  
  }    
  .col-5{
      grid-column: auto/span 12;
  
  }
  .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;
  
      }
      
      
  .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 */
  .main__all{
      margin-left:2rem;
      padding-top:8vh;
  }
  .fifthpg h4{
      font-size: 1.2rem;
  }
  .logo{
      left:-10px;
  }
  .main__quote h1{
      font-size: 90%;
  }
  .main__intro, .main__intro1{
      font-size: 3rem;
      width:80%;
  }
  .main__quotehr{
      width:60%;
      border:1px solid black;
  }
  .booking__btn2{
      background-color:black;
      color:white;
  }
  .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{
      width: 80%;;
  }
  .fifth_box{
      left:20%;
  }
  .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*/
  .about__image3{
      right:2rem;
      width:60%;
  }
  .about__background2{
      padding:0.5rem;
      width:90%;
  }
  .about_brief{
      padding: 0.5rem;
  }
  .about_brief1{
      padding: 0.5rem;
  }
  
  .about_brief p{
      width:90%;
  }
  
  
  
  
  
  
  
  /*Contact Page*/
  .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;
  }
      
  .contact-1 {
      padding: 1rem 1rem;
  }
  .glass-effect { 
      border-radius: 0.75rem;
      padding:1.5rem 1rem;
      margin: 0;
  }
  button[type="submit"] {
   
      width: 100%;
  }
  .cont-cent1-details{
      width:60%;
      padding-left:1rem;
  }
  
  
  /*Products Page*/
  .prod-info{
      display:list-item;
  }
  .prod-2 p{
     padding:2rem 0;
     width:85%;
  }
  .prod-2 img{
      height:auto;
      width:auto;
  } 
  
  /*Treatments Page*/
  .col-s-6{
      grid-column: auto/span 4;
  }
  .col-s-61{
      grid-column: auto/span 8;
  }
  .col-s-4{
      grid-column: auto/span 4;
  }
  .col-s-8{
      grid-column: auto/span 8;
  }
  .type-1{
      gap:0rem;
  }
  .type-1 img{
      height:auto;
      width:auto;
  }
  .treat img{
      padding: 1rem;
  }
  .type-22{
      padding-left:12vw;
  }.type-2{
      padding-left:12vw;
  }
  .treat1 {
      display:flex;
      flex-direction: column-reverse;
  }
  .treat-2{
      padding:0.5rem;
  }

  /*News Page*/
  .news{

    text-align:center;
  }
  .news h1{
      font-weight: bold;
      font-size: 2rem;
  }
  .news h2{
      padding-top: 2rem;
      font-weight: bold;
      font-size: 1.5rem;
  }
  .news h4{
      font-size: 1rem;
  }
  .reverse{
    
    flex-wrap: wrap;
    flex-direction: column-reverse;
    display: flex;

  }
  
  
  /*Gallery Page*/
  .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;
  }
  /*Book Apt*/
  .bookapt{
      padding:0.5rem;
      margin:auto auto;
  }
  .glass-effect1{
      width:95%;
      margin-bottom:0.5rem;
  }
  .book-form input[type="submit"]{
  float:none;
  margin:auto auto;
  margin-top:1rem;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }    
      
  @media (min-width:500px) and (max-width:1000px){
        
  /* General*/
  .end{
      padding:2rem;
      gap:0rem;
  }
  
  .col-2{
      grid-column: auto/span 12;
  
  } 
  .col-3{
      grid-column: auto/span 6;
  }    
  .col-5{
      grid-column: auto/span 12;
  
  }
  
  .col-6{
      grid-column: auto/span 12;
  }
  .col-7{
       grid-column: auto/span 12;
  
  }
  .col-8{
      grid-column: auto/span 12;
  
  }
  .col-9{
       grid-column: auto/span 12;
  
      }
  .flex{
      display:flex;
      flex-direction: column;
      flex-wrap:wrap;
  }
      
      
      
  /* First Section*/
      
  .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*/
  .fifthpg h4{
      font-size: 1.2rem;
  }
  .main__all{
      margin-left:2rem;
  }
  .main__intro1, .main__intro{
      width:70%
  }
  .logo{
      left:-10px;
  }
  .main__quote h1{
      font-size: 120%;
  }
  .fourthpg__img{
     padding-bottom:1rem;
  }
  .thirdpg__button{
      width:auto;
  }
  .fourthpg__button{
      width:auto;
  }
  .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*/
  .about__image3{
      right:4rem;
      width:50%;
  }
  /*Contact Page*/
  .form{
      padding:2rem 0rem;
      width:auto;
  }
  .form-group {
      display: inline-block;
      width: 100%;
  }   
  .contact-1 {
      padding: 1rem 1rem;
  }
  .glass-effect { 
      border-radius: 1rem;
      padding:1.75rem 1.25rem;
      margin: 0;
  }
  .map-div{
      padding-bottom: 2rem;
  }
  button[type="submit"] {
      width: 100%;
  }
  .cont-cent1-details{
      width:60%;
      padding-left:1rem;
  }
  /*Products Page*/
  .prod-info{
      display:list-item;
  }
  .prod-2 p{
      padding:2rem 0;
   }
  .prod-2 img{
      height:auto;
      width:auto;
  } 
  /*Treatments Page*/
  .col-s-6{
      grid-column: auto/span 2;
  }
  .col-s-61{
      grid-column: auto/span 10;
  }
  .col-s-4{
      grid-column: auto/span 2;
  }
  .col-s-8{
      grid-column: auto/span 10;
  }
  .treat img{
      padding:1rem;
  }
  .type-22{
      padding-left:6vw;
  }
  .type-1 img{
      height:auto;
      width:auto;
  }
  .treat1 {
      display:flex;
      flex-direction: column-reverse;
  }
  
  
  
  
  
  /*news page*/
  .reverse{
    
    flex-wrap: wrap;
    flex-direction: column-reverse;
    display: flex;

  }
  
  .news{

    text-align:center;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    }
    
    
    
    
  
  
  
  #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: 1; /* 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: 1; /* 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-container {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              background-color: tan;
              box-shadow: 0 0 3px 0 rgba(44, 44, 44, 0.3);
              width: 90%;
              margin: 0 auto;
              padding: 10px;
          }
          .gallery-item {
              flex-basis: 32.7%;
              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: 70%;
              height: 70%;
              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.fade .modal-dialog{
            transition:transform .3s ease-out;
            transform:translate(0,-50px)
        }
        @media (prefers-reduced-motion:reduce){
            .modal.fade .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.fade{
            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;
        }