body {
  background-color: #F4F5F8;
  height: 100%;
  width: 100%;
}

body p {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .5px;
}

body a {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .5px;
  text-decoration: none;

}

.profile-Name{
  font-family: 'Roboto', sans-serif;
  letter-spacing: .5px;
}


.profile-Link{
  font-family: 'Roboto', sans-serif;
  letter-spacing: .5px;
  text-decoration: none;
}

/* hover Design for View Profile Model */

.profile-Link {
  /*margin-top: 20px;*/
  text-decoration: none; /* Remove default underline */
  position: relative;
  color: #2F857E; /* Set the default text color */
  transition: color 0.3s; /* Add a smooth transition for color change */
  font-weight: bold;

}

.profile-Link:hover {
  color: #2F857E; /* Change text color on hover */
  font-weight: bold;
}

.profile-Link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* Set the thickness of the bottom border */
  background-color: #2F857E; /* Set the color of the bottom border */
  transition: width 0.3s; /* Add a smooth transition for the width change */
}

.profile-Link:hover::after {
  width: 100%;
  color: #2F857E;/* Expand the bottom border on hover */
}




/* Header CSS Design Start */
header {
  background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99;

}

.innerheaderwidth {
  max-width: 1398px;
  margin: 0 auto;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}
.upper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
}

.logo img {
  height: 60px;
  width: auto;
}


/* Custom CSS Hover Effect */
.hover {
  transition: transform 0.3s ease;
}

.hover:hover {
  transform: scale(1.01);
}




/* Right Header design Start Here */

.right-header {
  display: flex;
}

.header-bold {
  color: #0F6A6C;
  font-weight: 700;
  margin-bottom: unset;
  &:hover{
    color: #0F6A6C;
    text-decoration: none;

  }
}

.header-title {
  font-size: 12px;
  display: flex;
  justify-content: center;
  margin-bottom: unset;
}

.header-elements {
  margin-bottom: 5px;
  margin-right: 15px;
  /*margin-left: 15px;*/
}

.right-header-border {
  color: #0F6A6C;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border: 2px solid #0F6A6C;
  border-radius: 25px;
  padding: 5px 10px;
}

.call-action {
  display: flex;
  align-items: center;
  &:hover{
    text-decoration: none;
  }
}


.login-icon {
  margin-top: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.login-icon i {
  font-size: 25px;
  color: #0F6A6C;
  transition: transform 0.3s ease;
}

.login-icon i:hover {
  transform: scale(1.1);
  /* Apply scale transform on hover */
}

.phone-icon {
  height: 14px;
  width: auto;
  margin-right: 5px;
}
/* After Login User Icon Design Here */

.userProfileMobile{
  display: none;
}

.user-profile {
  display: flex;
  flex-direction: column;
  /* Display elements vertically */
  align-items: center;
  /* Center elements vertically */
  overflow: hidden;
  position: relative;
}


.user-profile-picture {
  width: 30px;
  /*width: 30px;*/
  /* Adjust the size of the profile picture as needed */
  height: 30px;
  /* Adjust the size of the profile picture as needed */
  border-radius: 50%;
  /* Rounded shape for the profile picture */
  background-color: #ccc;
  /* Default background color for the user icon */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Adjust the spacing between picture and name */
}

.user-profile-picture img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;

  /* Ensure the image fills the circular space */
}

.user-profile p {
  color: #0F6A6C;
  font-weight: bold;
  font-size: 14px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right Header Design End Here */

/* Search Bar CSS */
.search-bar {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 40px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  border-radius: 45px;
  overflow: hidden;
  /* Ensures the border-radius is applied properly */
}


.search-bar input[type="text"] {
  flex: 1;
  padding: 10px;
  padding-left: 30px;
  color: #2F857E;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

.search-bar button[type="submit"] {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
}

.fa-search {
  color: #2F857E;
  font-size: 20px;
  padding-right: 20px;
}

.search-bar input[type="text"]::placeholder {
  color: #2F857E;
  opacity: 50%;
}

/* Search Bar CSS End */

/* CSS for the login page pop-up container */
.popup {
  display: none;
  /* Initially hide the pop-up */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  /* Semi-transparent background overlay */
  z-index: 9999;
  /* Ensure it appears above other content */
}

/* CSS for the login page pop-up content */
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  /* Add a background color for the popup content */
}



/* Header Design Ends Here */

.loginPageContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Set a high z-index value to ensure it appears on top of other elements */
}



/* <!-- login-page code --> */
.login-page {
  display: flex;
  width: 800px;
  height: 600px;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../assets/images/login_background.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  border: 5px solid white;
  border-radius: 50px;
  background-color: #C5DCDA;
}

.login-page::before {
  content: "";
  position: absolute;
  background-image: url('../assets/images/login_background.webp');
  opacity: 0.5;
  /* 0.5 represents 50% opacity */
  z-index: -1;
  /* Ensure the pseudo-element is behind the content */
  backdrop-filter: blur(10px);
  /* Apply blur to the pseudo-element */
}


.login-page-logo {
  margin-top: 50px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.login-page-logo :hover {
  transform: scale(1.01);
  /* Apply a scale transformation on hover */
}

.signup-button {
  position: absolute;
  text-decoration: none;
  font-size: 20px;
  top: 80px;
  right: 80px;
  padding: 10px 20px;
  color: #2F857E;
  border: none;
  border-radius: 5px;
}

.signup-button:hover {
  color: white;
}


.container {
  padding: 20px;
  text-align: center;
  color: #2F857E;
}

.login-tagline {
  margin-bottom: 20px;
}

.login-tagline p {
  margin: 5px;
}

.input-box {
  margin-bottom: 20px;
  padding: 10px;
  width: 400px;
  color: #2F857E;
  background-color: white;
  border: 1px solid #2F857E;
  outline: none;
  border-radius: 40px;
  margin-left: auto;
  /* Center horizontally */
  margin-right: auto;
  /* Center horizontally */
}

.phone-number-country-code {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 20px;
  height: 40px;
  border-radius: 40px;
}

.phone-number-country-code:hover {
  transform: scale(1.01);
  /* Apply scale transform on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* Add gray shadow on hover */
}


.country-code-selection-input{
  padding: 10px;
  width: 150px;
  height: 40px;
  color: #2F857E;
  background-color: white;
  border: 1px solid #2F857E;
  outline: none;
  border-right: none;
  border-radius: 40px 0px 0px 40px ;
}

.phone-number-input{
  padding: 10px;
  width: 250px;
  height: 40px;
  color: #2F857E;
  background-color: white;
  border: 1px solid #2F857E;
  outline: none;
  border-radius: 0px 40px 40px 0px ;
}

.phone-number-input::placeholder {
  color: #2F857E;
  /* Set placeholder color */
}

select.countrySelect option {
  color: #2F857E;
  /* Change to your desired color */
}

select.countrySelect option:checked {
  font-weight: bold;
}


.input-box::placeholder {
  color: #2F857E;
  /* Set placeholder color */
}

/* Hover effect */
.input-box:hover {
  transform: scale(1.01);
  /* Apply scale transform on hover */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* Add gray shadow on hover */
}

.social-logos {
  display: flex;
  margin-bottom: 20px;
  margin-left: 0px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  opacity: 1;
  transition: opacity 0.3s ease;
  /* Add transition for smooth hover effect */
}

.social-logos img {
  height: 30px;
  width: 30px;
}

.social-link:hover .social-logo {
  opacity: 0.8;
}

.login-design-site {
  display: flex;
  margin-top: 20px;
}


.login-button {
  padding: 10px 30px;
  background-color: white;
  color: #2F857E;
  border: none;
  font-size: 20px;
  border-radius: 40px;
  cursor: pointer;
}

.forget-password {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.forget-password p {
  font-size: 16px;
}


.forgot-password-button {
  margin-left: 10px;
  color: #2F857E;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
}

.login-button:hover {
  background-color: #25766E;
  color: white;
}

.forgot-password-button:hover {
  color: white;
}




/* Signup Page CSS Start*/

.signup-with {
  text-align: left;
  margin-bottom: 10px;
}


.signup-button-bellow {
  padding: 10px 30px;
  /*margin-left: auto;*/
  background-color: white;
  color: #2F857E;
  border: none;
  font-size: 20px;
  border-radius: 40px;
  display: flex;
  float: left;

}

.signup-button-bellow:hover {
  background-color: #25766E;
  color: white;
}

.signup-site-design {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.signup-site-design p {
  margin-left: 10px;
}

.already-account {
  background-color: transparent;
  border: none;
  color: #25766E;
  text-align: center;
  margin-left: 10px;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
}

.already-account:hover {
  color: white;
}


/* User Profile Design Start Here */
/* CSS for the login page pop-up content */

/*.userPopup {*/
/*  display: none;*/
/*  !* Initially hide the pop-up *!*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-color: rgba(0, 0, 0, 0.1);*/
/*  !* Semi-transparent background overlay *!*/
/*  z-index: 9999;*/
/*  !* Ensure it appears above other content *!*/
/*}*/

.userPopup{
  position: absolute;
  display: none;
  width: 300px;
  min-height: 550px;
  top: 51%;
  z-index: 99;
  right: 1%;
  /*background-color: rgba(0, 0, 0, 0.1);*/

}

/*.userProfileDashboard {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0;*/
/*  margin-right: 82px;*/
/*  margin-top: 70px;*/
/*  width: 300px;*/
/*  min-height: 550px;*/
/*}*/

.userPopup::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(47, 133, 126, 0.2);
  /* 20% opacity */
  backdrop-filter: blur(35px);
  border-radius: 50px;
  z-index: -99;
  filter: brightness(1.3);
}

.userPopup::after {
  content: '';
  background-color: rgba(47, 133, 126, 1.0);
  z-index: -999;
  filter: brightness(1.2);
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  cursor: pointer;
  color: white;
  border: 2px solid white;
  padding: 15px 15px;
  border-radius: 50%;
}
.close:hover {
  background-color: #5F9EA0;
}

.close:hover {
  background-color: rgba(95, 158, 160, 0.7);
}

.dashboard-menu {
  padding: 20px;
  height: 100%;
}
/* After Login User Icon Design Here */
.dashboard-user-profile {
  display: flex;
  /* Display elements vertically */
  align-items: center;
  /* Center elements vertically */
  overflow: hidden;
  position: relative;
  height: 70px;
  width: 70px;
}

.dashboard-user-profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* Ensure the image fills the circular space */
}


.dashboard-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.name-id p {
  font-size: 14px;
  /*margin-top: 5px;*/
}

.star-point {
  display: flex;
  gap: 10px;
  align-items: center;
}

.progress-bar {
  height: 5px;
  width: 100%;
  background-color: white;
  border: none;
  outline: none;
  border-radius: 20px;
  margin-top: 10px;
}

.golden-progress-bar {
  height: 100%;
  width: 150px;
  background-color: #DFA400;
  border-radius: 20px;
}

.progress-tag {
  text-align: center;
  font-weight: 50;
  font-size: 12px;
  color: #DFA400;
  margin-top: 5px;
}

.menu-item-user-dashboard {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 10px;
}

.menu-item-user-dashboard a {
  font-size: 16px;
  font-weight: 700;
}

.menu-item-user-dashboard:hover {
  background-color: #2F857E;
  border-radius: 25px;
  color: #fff;
}

.user-dashboard-icon path,
.user-dashboard-icon circle,
.user-dashboard-icon line,
.user-dashboard-icon rect {
  transition: stroke 0.2s;
}

.menu-item-user-dashboard:hover .user-dashboard-icon path,
.menu-item-user-dashboard:hover .user-dashboard-icon circle,
.menu-item-user-dashboard:hover .user-dashboard-icon line,
.menu-item-user-dashboard:hover .user-dashboard-icon rect {
  stroke: white;
}

.effect-fill path,
.effect-fill circle,
.effect-fill line,
.effect-fill rect {
  transition: fill 0.2s;
}

.menu-item-user-dashboard:hover .effect-fill path,
.menu-item-user-dashboard:hover .effect-fill circle,
.menu-item-user-dashboard:hover .effect-fill line,
.menu-item-user-dashboard:hover .effect-fill rect {
  fill: white;
}
.mobileBar{
  display: none;
}
.menu-item-user-dashboard:hover svg {
  color: white;
  font-weight: 700;
  transition: color 0.2s;
}
.menu-item-user-dashboard i {
  color: #2F857E;
  font-weight: 700;
  transition: color 0.2s;
  width: 19px;
}
.menu-item-user-dashboard:hover i {
  color: white;
  font-weight: 700;
  transition: color 0.2s;
}
.menu-item-user-dashboard:hover a {
  color: white;
  font-weight: 700;
  transition: color 0.2s;
}
.logout {
  margin-top:15px;
}


.forget-button-send-otp {
  justify-content: center;
  margin-bottom: 20px;
}

.forget-password-login-direct {
  display: flex;
  align-items: center;
}

.forget-password-login-direct p,
.forget-password-login-direct button {
  font-size: 16px;
}


/* OTP Code Input Page Design */
.otp-code-input-container {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  margin-top: 40px;
}

.otp-code-input-container input {
  width: 50px;
  height: 50px;
  outline: none;
  border: 2px solid #2F857E;
  text-align: center;
  color: #0F6A6C;
  font-size: 20px;
  font-weight: bold;
}

.otp-instruction p {
  font-size: 14px;
  color: black;
  margin-bottom: 20px;

}

.resend-code {
  color: red;
  cursor: pointer;
}

.resend-code:hover {
  color: white;
}

.mobile-view-header {
  display: none;
}

.wellax-header-moto {
  display: none;
}

.search-icon {
  color: #2F857E;
  /*font-size: 20px;*/
  padding-right: 5px;
  width: 50px; /* adjust to your preferred width */
  height: 50px; /* adjust to your preferred height */
}
.custom-searchicon{
  height: 25px;
  width: auto;
}

@media screen and (max-width: 1400px) {
  .innerheaderwidth {
    max-width: 1398px;
    margin: 0 auto;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
  }

}
@media screen and (max-width: 1199px) {
  .innerheaderwidth {
    max-width: 1199px;
  }
  .header-title {
    font-size: 10px;
  }
  .right-header-border {
    font-size: 11px;
    height: 27px;
    padding: 3px 8px;
  }
  .user-profile p {
    font-size: 11px;
  }
  .logo img {
    height: 55px;
  }
  .search-bar {
    width: 600px;
  }

}

@media screen and (max-width: 600px) {

  header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 138px;
    z-index: 1;
  }
  body {
    zoom: 0%;
  }


  /*.userProfileDashboard {*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  right: 0;*/
  /*  margin-right: 70px;*/
  /*  margin-top: 100px;*/
  /*  width: 330px;*/
  /*  height: 550px;*/
  /*}*/

  .upper-header {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    height: 137px;
    margin-left: 20px;
    margin-right: 20px;
    flex-direction: row-reverse;
    align-items: normal;
  }
  .userProfileDesktop{
    display: none;
  }
  .userProfileMobile{
    display: block;
  }

  .user-profile {
    display: flex  ;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: 5px 4px 5px 0px;
    align-items: flex-start;
  }

  .user-profile-picture {
    margin-left: 0;
    width: 30px;
    height: 30px;
    /* padding-left: 10px; */
  }
  .profileNameP{
    width: 100%;
  }

  .logomain{
    display: none;
  }
  /*.logo img {*/
  /*  height: 48px;*/
  /*  width: auto;*/
  /*}*/


  /* Search Bar CSS */
  /*.search-bar {*/
  /*  width: 400px;*/
  /*  height: 48px;*/
  /*}*/
  .search-bar {
    width: 75%;
    height: 40px;
    top: 119px;
  }

  .search-bar input[type="text"] {
    flex: 1;
    padding: 8px;
    padding-left: 20px;
    padding-right: 9px;
    color: #2F857E;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .search-bar button[type="submit"] {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
  }

  .fa-search {
    color: #2F857E;
    font-size: 20px;
    padding-right: 20px;
  }

  .search-icon {
    color: #2F857E;
    /*font-size: 20px;*/
    padding-right: 10px;
    width: 50px; /* adjust to your preferred width */
    height: 50px; /* adjust to your preferred height */
  }

  /*.custom-searchicon{*/
  /*  height: 25px;*/
  /*  width: 25px;*/
  /*}*/
  .custom-searchicon {
    height: 22px;
    width: auto;
  }

  /*.search-icon img {*/
  /*  border: 2px solid red;*/
  /*}*/
  .search-bar input[type="text"]::placeholder {
    font-size: 16px;
  }

  .mobile-view-header {
    display: block;
    width: 30%;

  }

  .header-menu-button {
    text-align: left;
  }
  svg#headerFeaturePopupButton {
    display: none;
  }
  .mobileBar{
    display: flex;
    font-size: 35px;
    color: #0F6A6C;
    justify-content: start;
    margin-bottom: 9px;
    position: relative;
    height: 35px;

  }
  .mobileBar::before{
    display: block;
    content: '';
    position: absolute;
    width: 35px;
    height: 4px;
    background-color: #0F6A6C;
    top: 11%;
    border-radius: 1px;

  }
  span.middelBarIcon {
    height: 4px;
    background-color: #0F6A6C;
    width: 24px;
    display: block;
    margin-top: 12.6px;
    border-radius: 1px;
  }
  .mobileBar::after{
    display: block;
    content: '';
    position: absolute;
    width: 35px;
    height: 4px;
    background-color: #0F6A6C;
    bottom: 26%;
    border-radius: 1px;

  }


  .login-icon {
    display: block;
    margin: 5px 5px 5px 0px;
  }

  .wellax-header-moto {
    display: block;
  }

  .wellax-header-moto p {
    display: block;
    font-size: 12px;
    color: white;
  }

  /*header style to super admin */
  /*.right-header {*/
  /*  display: none;*/
  /*}*/

  .mobile-right-header-offer {
    margin-right: 0px;
    height: 48px;
    margin-top: 0.5vh;
    border: 3px solid #25766E;
    /* font-size: 16px; */
    border-radius: 25px;
    background-color: white;
    padding: 13px 10px;
  }

  .header-feature-popup {
    display: none;
    position: absolute;
    width: 40%;
    height: 350px;
    z-index: 999;
    border-radius: 25px;
    top: 0;
    margin-top: 40px;
  }

  .header-feature-popup::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(47, 133, 126, 0.2);
    /* 20% opacity */
    backdrop-filter: blur(10px);
    z-index: 99;
    border-radius: 25px;
    filter: brightness(1.1);
    border: 2px solid white;
  }

  .header-feature-popup-content {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 10px;
    position: relative;
    z-index: 9999;
  }

  .login-icon i {
    font-size: 40px;
  }


  /* Header Menu slider CSS MObile version */
  /* The side navigation menu */
  .sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    right: auto;
    left: 0;
    /* background-color: rgba(47, 133, 126, 0.2); */
    /*background-color: #f2f2f2;*/
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition: 0.4s;
    /* 0.5 second transition effect to slide in the sidenav */
    /*backdrop-filter: blur(10px);*/
    background-color: rgba(47, 133, 126, 0.2);
    backdrop-filter: blur(35px);
    filter: brightness(1.3);
    border-top-right-radius: 50px;

  }
  .sidenav .menu-item-user-dashboard {
    padding: 5px 26px;

  }
  .sidenav .menu-item-user-dashboard a{
    color: #2F857E;
    padding: 4px 8px 4px 2px;
    font-size: 18px;
    width: 100%;

  }
  .sidenav .menu-item-user-dashboard:hover a{
    color: #fff;
  }
  /*.sidenav::before{*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background-color: rgba(47, 133, 126, 0.2);*/
  /*  backdrop-filter: blur(35px);*/
  /*  z-index: -99;*/
  /*  filter: brightness(1.3);*/
  /*}*/

  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: flex;
    transition: 0.3s;
    text-align: left;
  }

  /* When you mouse over the navigation links, change their color */

  /* Position and style the close button (top right corner) */
  /*.sidenav .closebtn {*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  right: 25px;*/
  /*  font-size: 36px;*/
  /*  margin-left: 50px;*/
  /*}*/
  .sidenav .closebtn {
    position: absolute;
    top: 11px;
    right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
    cursor: pointer;
    color: white;
    border: 2px solid #ffffff;
    padding: 15px 15px;
    border-radius: 50%;
  }

  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left .5s;
    padding: 20px;
  }

  .header-bold {
    color: #0F6A6C;
    font-size: 9px;
  }

  /*.right-header-border {*/
  /*  display: block;*/
  /*  text-align: left;*/
  /*  padding: 0;*/
  /*  margin-bottom: 5px;*/
  /*  height: 48px;*/
  /*}*/

  /*.right-header-border {*/
  /*  height: 50px;*/
  /*  border-radius: 70px !important;*/
  /*  display: block;*/
  /*  text-align: left;*/
  /*  padding: 0;*/
  /*  margin-bottom: 5px;*/
  /*}*/
  .right-header-border {
    height: 28.5px;
    font-size: 12px;
    border-radius: 70px !important;
    /* display: block; */
    text-align: center;
    padding: 6px;
    margin-bottom: 10px;
    display: flex;
  }

  .login-page {
    width: auto;
    height: max-content;
  }

  .signup-button {
    font-size: 16px;
    top: 40px;
    right: 10px;
    padding: 10px 10px;
  }

  .bottom-container {
    position: absolute;
    /* bottom: 0; */
    top: 91%;
    width: 100%;
    justify-content: center;
    text-align: end;
    font-size: 8px;
    font-weight: 900;
    display: flex;
  }

  .user-container {
    display: flex;
    justify-content: flex-start;
  }

  .phone-icon {
    height: 13px;
    width: auto;
    margin-right: 5px;
  }

  .header-elements {
    margin-bottom: 5px;
    margin-right: 0;
    margin-left: 5px;
  }

}
@media screen and (max-width: 350px) {
    .logo img {
        height: 45px;
        width: auto;
    }
}

  /* Apply styles when the device is in portrait mode */
  /*@media screen and (orientation: portrait) {*/
  /*  body {*/
  /*    !* Add any styles or rules you want to apply in portrait mode *!*/
  /*  }*/
  /*}*/
  /*!* Apply styles when the device is in landscape mode *!*/
  /*@media screen and (orientation: landscape) {*/
  /*  body {*/
  /*    !* Add any styles or rules you want to apply in landscape mode *!*/
  /*    transform: rotate(-90deg); !* Example: rotate the content 90 degrees in landscape mode *!*/
  /*  }*/
  /*}*/
  /*@media only screen and (max-width: 767px) {*/
  /*  !* Styles for portrait mode go here *!*/
  /*  !* Optional: Add styles to handle landscape mode (though this block is empty to disable landscape mode) *!*/
  /*  @media (orientation: landscape) {*/
  /*    body {*/
  /*      !* Optional: Add styles for landscape mode if needed *!*/
  /*      display: none; !* For example, hide the content in landscape mode *!*/
  /*    }*/
  /*  }*/
  /*}*/
  /*@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {*/
  /*  !* Your CSS rules for mobile landscape mode go here *!*/
  /*  header {*/
  /*    !*background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.png);*!*/
  /*    !*background-size: cover;*!*/
  /*    !*background-repeat: repeat;*!*/
  /*    !*background-position: center center;*!*/
  /*    !*position: relative;*!*/
  /*    width: 160vw;*/
  /*  }*/
  /*}*/


/*@media only screen and (min-width: 660px) and (max-width: 670px) and (orientation: landscape) {*/
/*  !* Your CSS rules for mobile landscape mode go here *!*/
/*  header {*/
/*    !*background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.png);*!*/
/*    !*background-size: cover;*!*/
/*    !*background-repeat: repeat;*!*/
/*    !*background-position: center center;*!*/
/*    !*position: relative;*!*/
/*    width: 187vw;*/
/*  }*/
/*}*/


/*@media only screen and (max-width: 844px)  {*/
/*  !* Your CSS rules for mobile landscape mode go here *!*/
/*  header {*/
/*    !*background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.png);*!*/
/*    !*background-size: cover;*!*/
/*    !*background-repeat: repeat;*!*/
/*    !*background-position: center center;*!*/
/*    !*position: relative;*!*/
/*    width: 139vw;*/
/*  }*/
/*}*/

/*@media only screen and (max-width: 896px) and (orientation: landscape) {*/
/*  !* Your CSS rules for mobile landscape mode go here *!*/
/*  header {*/
/*    !*background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.png);*!*/
/*    !*background-size: cover;*!*/
/*    !*background-repeat: repeat;*!*/
/*    !*background-position: center center;*!*/
/*    !*position: relative;*!*/
/*    width: 131vw;*/
/*  }*/
/*}*/

/*@media only screen and (max-width: 900px) and (orientation: landscape) {*/
/*  !* Your CSS rules for mobile landscape view with max width 900px go here *!*/

/*  header {*/
/*    !*background-image: linear-gradient(rgba(244, 245, 248, 0.8), rgba(71, 140, 141, .8)), url(../assets/images/header.png);*!*/
/*    !*background-size: cover;*!*/
/*    !*background-repeat: repeat;*!*/
/*    !*background-position: center center;*!*/
/*    !*position: relative;*!*/
/*    width: 136vw;*/
/*  }*/
/*  !* Add more styles as needed *!*/
/*}*/

/*@media (orientation: portrait) {*/
/*  !* Styles for portrait orientation *!*/
/*  body {*/
/*    !* Optional: Add styles for portrait orientation *!*/
/*  }*/
/*}*/

/*@media (orientation: landscape) {*/
/*  !* Styles for landscape orientation *!*/
/*  body {*/
/*    !* Optional: Add styles for landscape orientation *!*/
/*  }*/
/*}*/

/*@media screen and (orientation: landscape) {*/
/*  body {*/
/*    transform: rotate(0deg);*/
/*  }*/
/*}*/