@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {

  --font-family-primary: "Roboto", sans-serif;

  --font-family-secondary: "Roboto", sans-serif;

  --body-bg:  #F3F6F7;

  --body-color: #707B91;

  --bs-primary: #5842BE;

  --bs-dark: #312A2A;

  --bs-primary-hover:#5842BE;

  --bs-success: #15BA59;

  --bs-secondary-hover: #15BA59;

  --bs-danger: #F21B3F;

  --bs-secondary-hover: #F21B3F;

}

.roboto-thin {

  font-family: "Roboto", sans-serif;

  font-weight: 100;

  font-style: normal;

}



.roboto-light {

  font-family: "Roboto", sans-serif;

  font-weight: 300;

  font-style: normal;

}



.roboto-regular {

  font-family: "Roboto", sans-serif;

  font-weight: 400;

  font-style: normal;

}



.roboto-medium {

  font-family: "Roboto", sans-serif;

  font-weight: 500;

  font-style: normal;

}



.roboto-bold {

  font-family: "Roboto", sans-serif;

  font-weight: 700;

  font-style: normal;

}



.roboto-black {

  font-family: "Roboto", sans-serif;

  font-weight: 900;

  font-style: normal;

}



.roboto-thin-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 100;

  font-style: italic;

}



.roboto-light-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 300;

  font-style: italic;

}



.roboto-regular-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 400;

  font-style: italic;

}



.roboto-medium-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 500;

  font-style: italic;

}



.roboto-bold-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 700;

  font-style: italic;

}



.roboto-black-italic {

  font-family: "Roboto", sans-serif;

  font-weight: 900;

  font-style: italic;

}



body {

  font-family: var(--font-family-secondary);

  font-size: 18px;

  font-weight: 400;

  color: var(--body-color) !important;

  background-color: var(--body-bg);

  line-height: 30px;

}

h1,

h2,

h3,

h4,

h5,

h6,

.h1,

.h2,

.h3,

.h4,

.h5,

.h6 {

  font-family: var(--font-family-primary);

  color: var(--bs-primary);

  font-weight: 400;

}



h1 {

  font-size: 36px;

  line-height: 46px;

}



h2 {

  font-size: 28px;

  line-height: 38px;

}



h3 {

  font-size: 22px;

  line-height: 30px;

}



a {

  outline: none;

  text-decoration: none;

  color: var(--body-color);

}

.theme-btn {

  padding:10px 35px !important;

  background-color: var(--bs-primary);

  color: var(--bs-white) !important;

}

.theme-btn:hover {

  background: var(--bs-primary-hover) !important;

}

a:hover {

  text-decoration: none;

}

.text-primary {

  color: var(--bs-primary) !important;

}

.text-success {

  color: var(--bs-success) !important;

}

.text-body {

  color: var(--body-color) !important;

}

.bg-success {

  background-color: var(--bs-success) !important;

}

label {

  text-align: left;

  color:var(--body-color);

  display: block;

  font-size: 14px;

  font-weight: 500;

  opacity: 0.7;

}
.error {
  line-height: 1.2;
  margin-top: 3px;
}

.form-control {

  border: 1px solid #e1e1e1;

  color: var(--body-color);

  height: 50px;

  line-height: 50px;

  padding: 0 16px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 400;

  font-family: var(--font-family-secondary);

}

.form-control:focus {

  

  box-shadow: none;

}

textarea.form-control {

  height: auto;

}

.form-control::placeholder {

  color: var(--body-color);

  font-size: 15px;

  font-weight: 400;

}

select.form-control {

  background: none;

  border: 1px solid #e1e1e1;

  font-size: 15px;

  height: auto;

  height: 50px;

  line-height: 45px;

}



.btn {

  border-radius: 40px;

  padding:0.6rem 2.5rem;

}

.btn-primary {

  background: var(--bs-primary) !important;

  border-color: var(--bs-primary) !important;

}

.btn-danger {

  background: var(--bs-danger) !important;

  border-color: var(--bs-danger) !important;

}

.btn-success {

  background: var(--bs-success) !important;

  border-color: var(--bs-success) !important;

}

.alert {

  font-size: 14px;

}

html,

body {

  height: 100%;

  margin: 0px;

}

section, article {

  padding: 70px 0;

}

section.main-wrapper {

  padding-top: 40px;

}

.scroll-top-wrapper {

  position: fixed;

  opacity: 0;

  visibility: hidden;

  overflow: hidden;

  text-align: center;

  z-index: 2;

  right: 20px;

  bottom: 20px;

  overflow: hidden;

  padding: 0;

}

.scroll-top-wrapper .scroll-top-inner {

  display: block;

  width: 54px;

  border-radius: 55px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--bs-primary);

  color: #fff;

  border: 2px solid var(--bs-primary);

}

.scroll-top-wrapper:hover .scroll-top-inner {

  background: var(--bs-primary-hover);

}

.scroll-top-wrapper .scroll-top-inner i {

  font-size: 26px;

}

.scroll-top-wrapper.show {

  visibility: visible;

  cursor: pointer;

  opacity: 1;

}

@-webkit-keyframes stickySlideDown {

  0% {

    opacity: 1;

    transform: translateY(-100%);

  }



  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes stickySlideDown {

  0% {

    opacity: 1;

    transform: translateY(-100%);

  }



  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

.form-container {

  padding:30px;

  width:100wh;

}

.display-4 {

  font-size:52px;

  font-weight:800;

  color:#fff;

  margin-bottom:30px;

  color:var(--bs-success)

}

.display-4 span {

  position:relative;

  color:var(--bs-white)

}

.display-4 span:before {

  content:'';

  position:absolute;

  bottom:0;

  left:0;

  width:100%;

  height:4px;

  background:var(--bs-white);

}

.display-4 small {

  font-size:14px;

  letter-spacing:13px;

  font-weight:400;

  display:block;

  color:var(--bs-white);

  text-transform:uppercase;

}

.customModalDesign .modal-title {

  font-size: 26px;

  font-weight: 700;

}

.customModalDesign p, .customModalDesign {

  font-size: 16px;

  line-height: 1.4;

}

.form-content {

  color:var(--bs-white);

}

.form-content p {

  font-size:16px;

  line-height:1.7rem

}

.wrapper {

  background:url(../images/login_bg.jpg) no-repeat center;

  background-size:cover;

  min-height:calc(100vh - 60px);

  border-radius:30px;

  padding:3rem;

  background-position:center;

}

.form-wrapper {

  background:url(../images/form-bg.png) no-repeat center;

  background-size:cover;

  padding:2rem 2rem 1rem;

  border:10px solid rgba(255, 255, 255, 0.3);

  border-radius:20px;

  height:100%;

  color: var(--bs-dark);

  font-size: 15px;

}

.form-wrapper .h4 {

  font-weight: 500;

  margin-bottom: 1rem;

}

.form-wrapper a {

  font-weight:500;

  text-decoration: underline;

}

.form-wrapper label {

  font-size: 14px;

}

.form-wrapper .form-control {

  background:none;

  border:none;

  border-bottom:1px solid #fff;

  padding:1rem 0;

  border-radius:0;

  color:#fff;

}

.form-wrapper .btn {

  border-radius: 40px;

  padding:0.6rem 2.5rem

}

.form-wrapper .form-control:focus {

  color:#fff;

}

.form-wrapper .form-control::placeholder {

  color:#fff;

  font-size: 15px;

}

.form-wrapper .otherLinks {

  font-size: 14px;

  color: var(--bs-dark);

}

.form-wrapper .otherLinks  

.custom-check-group {

  display: block;

  margin-bottom: 36px;

  margin-top: 36px;

}

.custom-check-group input {

  padding: 0;

  height: initial;

  width: initial;

  margin-bottom: 0;

  display: none;

  cursor: pointer;

}

.custom-check-group label {

  position: relative;

  cursor: pointer;

  color:#fff;

}

.custom-check-group label:before {

  content:'';

  -webkit-appearance: none;

  background-color: transparent;

  border: 2px solid var(--bs-success);

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);

  padding: 10px;

  display: inline-block;

  position: relative;

  vertical-align: middle;

  cursor: pointer;

  margin-right: 16px;

  border-radius:5px;

}

.custom-check-group input:checked + label:after {

  content: '';

  display: block;

  position: absolute;

  top: 6px;

  left: 9px;

  width: 6px;

  height: 14px;

  border: solid var(--bs-success);

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}

.custom-check-group input:checked + label {

  color: var(--bs-success);

}

.form-footer {

  margin-top: 2.2rem;

  margin-bottom: 1rem;

}

.block-header small {

  font-size: 18px;

  font-weight: 500;

  color: var(--body-color);

  margin-bottom: 0.5rem;

  display: block;

}

.block-header h1, .block-header h2 {

  margin-bottom: 1rem;

}

.navbar-brand img {

  width: auto;

  height: 25px;

  transition: all 0.2s;

}

.main-nav {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  background-color: var(--bs-white);

  padding-top: 5px;

  padding-bottom: 5px;

  height: 70px;

  z-index: 1024;

  

} 

.main-nav .navbar .nav-item>a {

  display: block;

  position: relative;

  transition: all 1s;

  font-weight: 500;

  padding: 0;

  margin-left: 40px;

  font-size: 18px;

  position: relative;

  color: var(--bs-dark);

}

.main-nav .navbar .nav-item>a::before {

  content: '';

  width: 0;

  height: 2px;

  background: var(--bs-seconary);

  position: absolute;

  bottom: 0;

  left: 0;

  transition: all ease-in 0.2s;

}

.main-nav .navbar .nav-item>a:hover, .main-nav .navbar .nav-item>a.active {

  color: var(--bs-primary) !important;

  text-decoration: underline;

}

.main-nav .navbar .nav-item>a:hover:before, .main-nav .navbar .nav-item>a.active:before {

  width: 100%;

}

.main-nav .navbar .nav-item:last-child>a {

  color: var(--bs-primary);

}

.main-nav .navbar .nav-item:last-child>a:before {

  display: none;

}

.main-nav .navbar .nav-item a:hover,

.main-nav .navbar .nav-item.active a {

  color: var(--bs-white);

  background: var(--bs-dark);

}

.main-nav .navbar .nav-item a:hover,

.main-nav .navbar .nav-item.active a {

  background: transparent;

  color: var(--white);



}

.main-nav .navbar .nav-item:last-child a:hover,

.main-nav .navbar .nav-item.active:last-child a {

  background: none;

  color: var(--bs-dark) !important;

}

.main-nav .navbar .navbar-collapse li:last-child.nav-item {

  display: flex;

}

.main-nav .navbar .navbar-collapse .nav-item:last-child a:nth-child(2) {

  margin:0;

}

header .fixedheader {

  position: fixed;

  width: 100%;

  z-index: 9;

  left: 0;

  top: 0;

  box-shadow:none;

  background: #ffffff;

  animation: slide-down 0.5s;

  border-radius: 0px;

  border-bottom: 1px solid var(--body-color);

}

.fixedheader .navbar-brand  .navbar-brand img  {

  height: 72px;

  width: auto;

}

.HeaderNav.fixedheader #navbarTogglerDemo {

  margin-top: -15px;

  padding-bottom: 0px;

}

.inner-banner {

  background:url(../images/inner-banner.jpg) no-repeat center;

  background-size: cover;

  margin-top: 70px;

  height: 150px;

  position: relative;

  border-bottom: 10px solid var(--bs-primary);

  padding-top: 100px;

}

.banner-content h1 {

  font-weight: 500;

  margin-bottom: 0;

}

.breadcrumb-item {

  font-weight: 500;

  padding-top: 1rem;

  font-size: 16px;

}

.breadcrumb .breadcrumb-item:before, .breadcrumb-item a {

  color: var(--bs-primary);

  font-size: 16px;

}

.breadcrumb-item.active {

  color: var(--bs-dark);

}

.inner-banner::before {

  content:'';

  background: rgb(15,5,62);

  background: -moz-linear-gradient(86deg, rgba(15,5,62,1) 0%, rgba(25,10,91,0) 100%);

  background: -webkit-linear-gradient(86deg, rgba(15,5,62,1) 0%, rgba(25,10,91,0) 100%);

  background: linear-gradient(86deg, rgba(15,5,62,1) 0%, rgba(25,10,91,0) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f053e",endColorstr="#190a5b",GradientType=1);

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

}

.banner-content {

  z-index: 1;

}

.banner-img {

  right:0;

  bottom: -70px;

}

.inner-wrapper {

  background-color: var(--bs-white);

  border-radius: 20px;

  overflow: hidden;

}

.aside-userlink {

  margin: 0;

  padding: 0 0 0 1rem;

}

.aside-userlink li {

  list-style: none;

}

.aside-userlink li a {

  color: var(--bs-primary);

  font-size: 16px;;

  font-weight: 400;

  display: block;

  background: var(--bs-white);

  transition: all ease-in 0.2s;

  padding:10px 20px;

  border-radius: 6px;

}

.aside-userlink li a:hover, .aside-userlink li a.active {

  /* background: var(--bs-primary); */

  /* color: var(--bs-white); */

}

.aside-userlink li a i {

  width: 26px;

  display: inline-block;

}

.userside-container {

  background-color: var(--bs-white);

  padding: 1rem 0 1rem 0.8rem;

  width: 100%;

  position:relative;

  padding-bottom: 40px;

  margin-bottom: 10px;

}

.userside-container:after {

  content:'';

  position: absolute;

  left: 0;

  bottom: 0;

  height: 20px;

  width: calc(100% + 24px);

  background: rgb(243,246,247);

  background: -moz-linear-gradient(86deg, rgba(243,246,247,1) 0%, rgba(249,249,249,1) 100%);

  background: -webkit-linear-gradient(86deg, rgba(243,246,247,1) 0%, rgba(249,249,249,1) 100%);

  background: linear-gradient(86deg, rgba(243,246,247,1) 0%, rgba(249,249,249,1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3f6f7",endColorstr="#f9f9f9",GradientType=1);

}

.user-profile {

  position: relative;

  font-weight: 500;

}

.user-profile .user-photo {

  width: 125px;

  height: 125px;

  border-radius: 50%;

  display: inline-block;

  border:1px solid rgba(0, 0, 0, 0.2);

  padding-top: 5px;

  margin-bottom:0.8rem;

}

.user-profile .user-photo img {

  width:114px;

  height: 114px;

  border-radius: 50%;

  object-fit: cover;

}

.user-profile a {

  color:var(--body-color);

  font-weight: 400;

  margin-top: 0.3rem;

  font-size: 14px;

}

.user-profile .h5 {

  font-weight: 600;

  margin-top: 10px;

}

.wrapper-content {

  background-color: #F9F9F9;

  border-top-left-radius: 20px;

  height: 100%;

}

.wrapper-content .card {

  border-radius: 20px;

  color: var(--body-color);

}

.page-title {

  padding-top: 0.7rem;

  padding-bottom: 0.6rem;

  padding-left: 20px;

  font-size: 28px;

  font-weight: 700;

  display: block;

}

.custom-form-design .card {

  margin-bottom: 1.2rem;

}

.custom-form-design .form-group {

  margin-bottom: 0.6rem;

}

.custom-form-design .h5 {

  font-size: 20px;

  position: relative;

  font-weight: 500;

  margin-bottom: 1.2rem;

  display: inline-block;

}

.custom-form-design .h5 span {

  position: relative;

}

.custom-form-design .h5 span:before {

  content:'';

  height: 3px;

  background-color: var(--bs-primary);

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 100%;

  border-radius: 4px;

}

.custom-form-design .h5 a {

  font-size: 14px;

  font-weight: 500;

  color: var(--bs-danger);

}

.totalCost {

  font-size: 18px;

  font-weight: 600;

  margin-top: 20px;

  margin-bottom: 30px;

}

.custom-detail-row {

  margin-bottom: 0.5rem;

  font-size: 15px;

  color: var(--body-color);

  font-weight: 500;

}

.custom-detail-row:last-child {

  margin-bottom: 0;

}

.custom-detail-row label {

  width: 160px;

  position: relative;

  margin-right: 40px;

  color: var(--body-color);

  font-size: 15px;

  font-weight: 400;

}

.custom-detail-row label span.text-primary {

  font-size: 18px;

}

.custom-detail-row label:after {

  content:':';

  position: absolute;

  right:0;

  top: 0px;

}

.collection-card h4 {

  font-size: 20px;

  font-weight: 600;

  color: var(--bs-dark);

  position:relative;

  margin-bottom: 25px;

}

.collection-card h4:before {

  content:'';

  position: absolute;

  left: 0;

  bottom: -8px;

  background-color: var(--bs-primary);

  width:50px;

  height: 3px;

  border-radius: 3px;

}

.collection-card h5 {

  font-size: 18px;

  font-weight: 600;

  color: var(--bs-primary);

  position:relative;

  margin-bottom: 20px;

}

.collection-card p {

  color: var(--body-color);

  font-size: 16px;

  line-height: 1.5;

  padding-right: 2rem;

}

.collection-card a {

  color: var(--bs-dark);

  font-weight: 600;

  font-size: 16px;

}



.print-link a {

  height: calc(100% + 2rem);

  margin-top: -1rem;

  margin-right: -1rem;

  background-color: var(--bs-primary);

  text-align: center;

  color: var(--bs-white);

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  align-items:center;

  justify-content: center;

  padding: 0 1rem;

  border-top-right-radius: 20px;

  border-bottom-right-radius: 20px;

}

.print-link span {

  line-height: 0;

}

.print-link a {

  font-size: 14px;

}

.print-link a i {

  font-size: 40px;

  margin-bottom: 16px;

  display: block;

}

.list-style-none li {

  list-style: none;

}

.modalCus-width .modal-dialog {

  max-width: 620px;

}

.printReceipt-content {

  font-size: 14px;

}

.printReceipt-content ul li {

  white-space: nowrap;

}

.printReceipt-content .h6 {

  font-weight: 600;

}

.modalCus-width .modal-dialog .collection-card h4 {

  font-size: 16px;

}

.modalCus-width .modal-dialog .collection-card h5 {

  font-size: 14px;

  margin-bottom: 10px;

}

.modalCus-width .modal-dialog .collection-card p {

  font-size: 14px;

  margin-bottom: 10px;

}

.modalCus-width .modal-dialog .collection-card a {

  font-size: 14px;

}

table {

  border-radius: 10px;

  border-color: rgba(0, 0, 0, 0.08) !important;

  width: 100% !important;

  margin-top: 1rem;

}

table th {

  font-size: 15px;

  font-weight: 600;

  color:var(--bs-dark) !important;

  background: #FAF7F7 !important;

  line-height: 1.3;

  vertical-align: top;

  text-align: left !important;

}

table td {

  font-size: 14px;

  color:var(--body-color) !important;

  line-height:1.5;

  vertical-align: top;

  text-align: left !important;

}

table .dropdown-toggle::after {

  display: none;

}

div.dt-container div.dt-search {

  display: flex;

  align-items: center;

}

div.dt-container div.dt-search .form-control {

  height: 40px;

  border-radius: 4px;

}

.dt-length {

  display: flex;

  align-items: center;

}

div.dt-container div.dt-length select {

  height: 40px;

}

div.dt-container div.dt-info {

  font-size: 15px;

  color:var(--body-color)

}

footer {

  background-color: var(--bs-primary);

  margin-top: 2rem;

  font-size: 15px;

  font-weight: 400;

}

footer a {

  color: var(--bs-success);

}

.active>.page-link, .page-link.active {

  background-color: var(--bs-primary);

  border-color: var(--bs-primary);

}

table .dropdown-menu{

  padding:0;

  border:none;

  background: #ECF3F6;

  position: relative;

  min-width: 110px;

  margin-left: -16px !important;

  margin-top: 10px !important;

}

table .dropdown-menu:after {

  content:"\f235";

  position: absolute;

  top: -16px;

  right:15px;

  color: #ECF3F6;

  font-size: 26px;

  display: inline-block;

  font-family: bootstrap-icons !important;

  font-style: normal;

  font-weight: normal !important;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  vertical-align: -.125em;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

table .dropdown-menu .dropdown-item {

  font-size: 13px;

  color: var(--body-color);

}

table .dropdown-menu .dropdown-item:hover, table .dropdown-menu .dropdown-item:focus, table .dropdown-menu .dropdown-item:active {

  background: none;

  color: var(--bs-primary);

}

.page-details .custom-detail-row {

  width: 100%;

  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);

  /* padding-bottom: 0.8rem;

  margin-bottom: 0.8rem; */

}

.custom-detail-row.w-auto label {

  width: auto;

  margin-right: 10px;

}

.custom-detail-row.w-auto label::after {

  margin-left: 5px;

  position:static;

}

.status-row, .content-row  {

  margin: 20px 0 0 0;

  padding: 0;

  position: relative;

}

.status-row:before {

  content:'';

  position: absolute;

  left: 15px;

  top: 25px;

  bottom: 25px;

  width: 2px;

  border-left: 1px dashed var(--bs-success);

  z-index: 1;

}

.status-row li, .content-row li {

  display: flex;

  justify-content: space-between;

  margin-bottom: 2rem;

  position: relative;

  z-index: 2;

  font-size: 16px;

  color: var(--body-color);

}

.content-row li {

  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);

  margin-bottom: 1rem;

  padding-bottom: 1rem;

}

.content-row li:last-child {

  margin-bottom: 0;

  padding-bottom: 0;

  border: none;

}

.content-row li div:nth-child(1) {

  color: var(--bs-dark);

}

.status-row li:last-child {

  margin-bottom: 0;

}

.status-row li .statusCheck {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background-color: var(--bs-primary);

  display: inline-block;

  margin-right: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: var(--bs-white);

  font-size: 26px;

}

.carousel-item {

  height:100vh;

}

.carousel-item:before {

  content:'';

  background:rgba(255, 255, 255, 0.4);

  position: absolute;

  left: 0;

  bottom: 0;

  top: 0;

  right: 0;

}

.home-carousel h1 {

  font-size: 60px;

  color: #000;

  font-weight: 800;

  text-transform: capitalize;

}

.home-carousel p {

  font-size: 20px;

  color: #000;

  font-weight: 500;

  margin-top: 10px;

}

.hideshow-eye .bi {

  position:absolute;

  top:17px;

  right:0;

  color:#fff;

}

input:-webkit-autofill,

input:-webkit-autofill:hover, 

input:-webkit-autofill:focus, 

input:-webkit-autofill:active  {

color : black !important;

-webkit-text-fill-color: #000 !important;

-webkit-box-shadow: 0 0 0 1000px none inset !important;

-webkit-background-clip: text !important;

background-clip: text !important;

font-size:14px !important;

} 





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

  body {

    font-size: 16px;

    line-height: 26px;

  }

  h1 {

    font-size: 50px;

    line-height: 62px;

  }

  .h2, h2 {

    font-size: 36px;

    line-height: 46px;

  }

  .h3 {

    font-size: 28px;

    line-height: 36px;

  }

  .accdetedImg {

    width: 60px;

    height: 60px;

  }

  .cta-btn-outline, .cta-btn-filled {

    padding:8px

  }

  .cta-btn-outline i, .cta-btn-filled i {

    width: 40px;

    height: 40px;

    font-size: 18px;

    margin-right: 6px;

  }

  .services {

    margin-top: 0;

  }

  .service-img img {

    height: 100%;

    object-fit: cover;

  }

  .services .row .col:nth-child(4) .card {

    top: -65px;

  }

  .treatment-col {

    height: 440px;

  }

  .treatment-content .btn {

    font-size: 14px;

    padding: 8px 16px;

  }

  

}



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

  .navbar-toggler {

    background-color: var(--bs-seconary);

    opacity: 1;

  }

  .navbar-toggler:focus {

    box-shadow: none;

    outline: none;

  }

  .navbar-collapse{

    background-color: #000;

    border-radius: 20px;

    /* padding-top: 0.5rem;

    padding-bottom: 0.5rem; */

    margin-bottom: 1rem;

  }

  .main-nav .navbar .navbar-collapse .nav-item {

    width: 100%;

  }

  .main-nav .navbar .navbar-collapse .nav-item > a {

    color: var(--bs-white);

    padding: 0.6rem 0;

    background: none;

  }

  .main-nav .navbar .navbar-collapse .nav-item > a:hover {

    color: var(--bs-seconary);

  }

  .about-images .exp-count {

    position: relative;

    bottom: 0;

    width: 100%;

    border-radius: 20px;

    margin-top: 30px;

    left: 0;

    right: 0;

    border:none;

  }

  .accdetedImg {

    width: 46px;

    height: 46px;

  }

  .cta-btn-outline, .cta-btn-filled {

    width: 100%;

    margin-bottom: 1rem;

  }

  .services .row .col:nth-child(4) .card {

    top: 0;

  }

  .carousel-content {

    max-width: 670px;

    padding:3rem 1rem;

  }

  .services .block-header p {

    width: 100%;

  }

  .clientReview {

    margin-top: 0;

  }

}



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

  h1 {

    font-size: 40px;

    line-height: 52px;

  }

  .h2, h2 {

    font-size: 30px;

    line-height: 46px;

  }

  .h3 {

    font-size: 22px;

    line-height: 30px;

  }

  header {

    height: 118px;

  }

  .block-header small {

    font-size: 14px;

  }

  .main-nav {

    height: 68px;

  }

  .navbar-brand img {

    height: 50px;

  }

  .about-images .exp-count {

    position: absolute;

    bottom: 0;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    margin-top:0;

    right: 30px;

    left: inherit;

    border:8px solid #ffffff;

  }

  .about-images {

    margin-bottom: 40px;

  }

  .cta-btn-outline, .cta-btn-filled {

    padding: 16px 30px;

  }

  .accdetedImg {

    width: 60px;

    height: 60px;

  }

  .footer-quick-links li {

    margin:0 10px;

  }

  .carousel-content p {

    max-width: 86%;

  }

  .carousel-content {

    padding:0rem 1rem 1rem 1rem;

  }

  section, article {

    padding:60px 0;

  }

  .carousel-item {

    height: auto;

    display: block;

  }

  .carousel-item img {

    position: relative;

    opacity: 1;

  }

  .carousel-caption {

    position: relative;

    display: block;

  }

  .socialLinks {

    display: none;

  }

  .inner-banner {

    padding: 3rem 1rem;

  }

  .inner-top-banner {

    background-size: contain;

  }

  .accdetedImg {

    margin-bottom: 5px;

  }

  .card-contact-form {

    margin-top: 20px;

  }

}



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

  section, article, header,footer {

    overflow-x: hidden;

    overflow-y: auto;

  } 

  h1 {

    font-size: 30px;

    line-height: 40px;

  }

  h2 {

    font-size: 26px;

    line-height: 32px;

  }

  h3 {

    font-size: 22px;

    line-height: 30px;

  }

  .about-images .exp-count span {

    font-size: 16px;

  }

  .about-images .exp-count .ex-bold {

    font-size: 38px;

  }

  .about-images .exp-count small {

    letter-spacing: 0;

  }

  .about-images .exp-count {

    width: 130px;

    height: 130px;

    right: 50px;

    border:5px solid #fff;

  }

  .carousel-content h1 {

    font-size: 26px;

    line-height: 36px;

    padding: 0 1.2rem;

  }

  .carousel-indicators.home-carousel-indicators {

    right: 10px;

  }

  .socialLinks {

    left: 10px;

  }

  .footer-quick-links li {

    margin:8px 0;

  }

  .carousel-content .btn {

    font-size: 14px;

    padding: 12px 14px;

  }

  .treatments .block-header h2 {

    margin-bottom: 0;

  }

  .footer-logo img {

    height: 60px;

  }

  .footer-logo {

    padding: 1rem 0;

    width: 175px;

    text-align: center;

  }

  .review-outer-container {

    padding-left: 0;

    padding-right: 0;

  }

}



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

  .row-contact .card .card-body {

    font-size: 14px;

  }

}





























.HeaderNav.fixedheader #navbarTogglerDemo {

  margin-top: -15px;

  padding-bottom: 0px;

}

table.dataTable th:last-child, table.dataTable td:last-child {

  text-align: right;

}

table.dataTable td:last-child .table-action {

  text-align: right;

}

table.dataTable td:last-child .table-action .nav-link {

  display: inline-block !important;

}

.dt-paging .page-link {

  border-radius: 5px;

  padding: 0.3rem 1rem;

  margin:0px 3px;

}

.profilePic {

  width:32px;

  height: 32px;

  border-radius: 50%;

  display: inline-block;

  overflow: hidden;

  position: relative;

  top: 2px;

  border:1px solid #ccc

}



.profilePic img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}











.profile-picdny {

  color: transparent;

  transition: all 0.3s ease;

  justify-content: center;

  align-items: center;

  position: relative;

  transition: all 0.3s ease;

  padding: 5px;

  border:1px solid #ccc;

  display: inline-flex;

  border-radius: 50%;

  margin-bottom: 10px;

}

.profile-picdny input {

  display: none;

}

.profile-picdny img {

  position: absolute;

  object-fit: cover;

  width: 120px;

  height: 120px;

  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);

  border-radius: 100px;

  z-index: 0;

}

.profile-picdny .label {

  cursor: pointer;

  height: 120px;

  width: 120px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.profile-picdny:hover .label {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgba(0, 0, 0, 0.8);

  z-index: 10000;

  color: #fafafa;

  transition: background-color 0.2s ease-in-out;

  border-radius: 100px;

  margin-bottom: 0;

}

.profile-picdny:hover .label .bi {

  position: relative;

  top:7px

}

.profile-picdny span {

  display: inline-flex;

  padding: 0.2em;

  height: 2em;

}

input[type=number]::-webkit-inner-spin-button, 

input[type=number]::-webkit-outer-spin-button { 

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    margin: 0; 

}

.aside-userlink li a.active {

  background: var(--bs-primary) !important;

  color: var(--bs-white) !important;

}