@import url("https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap");

:root {
  --primary-color: #4e3b04;
  --secondary-color: #64690c /*#584b0f*/;
  --accent-color1: #9da507;
  --accent-color2: #b3cde4;
  --accent-color3: #eef3f9;
  --rotate: rotate(-45deg);
}

* {
  margin: 0px;
  padding: 0px;
  font-family: "sora";
}

body {
  height: 100vh;
  width: 100%;
  /* overflow: hidden; */
}

.main {
}

:focus,
:active {
  box-shadow: none !important;
}

/*======================= Admin login page  ========================*/
/* start here */
.login {
  height: 100vh;
  width: 100%;
  background-color: var(--secondary-color);
}

.login-key-icon {
  font-size: 50px;
}

.admin-form {
  background-color: var(--primary-color);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  color: white;
  width: 400px;
}

form input {
  border: none;
  background-color: transparent;
  box-shadow: none;
}

form input:focus {
  border: none !important;
  box-shadow: none !important;
}

.inputs-container {
  background-color: white;
  height: 50px !important;
  /* border: 2px solid #75759d; */
  /* border-radius: 20px !important; */
  /* overflow: hidden; */
}

.inputs-container .icon {
  background-color: var(--accent-color1);
  color: white;
}

.inputs-container .icon i {
  font-size: 20px;
}

form .login-btn {
  background-color: rgb(6, 216, 6);
  color: white !important;
  border: none;
  font-size: 20px;
  width: 150px;
}

/* end here */

/*======================= dashboard page ========================*/
/* start here */
.main-container {
  /* background-color: var(--secondary-color); */
}

/* ---------------------------------dashboard navbar-------------------- */
/* start here */
.dashboard-navbar {
  background-color: var(--primary-color);
  border-radius: 0px 0px 10px 0px;
  height: 100vh;
  width: 5%;
  transition: all 0.3s ease-in-out;
}

.side-bar {
  width: 20% !important;
}
.com-logo-name {
  height: 33% !important;
}
.collapse-side-bar {
  width: 20% !important;
}

.com-logo {
  height: 80px;
  width: 80px;
  background: white;
  transition: all 0.3s ease-in-out;
}

.com-logo img {
  height: 60px;
  transition: all 0.3s ease-in-out;
}

.com-name h3 {
  font-family: cinzel;
  color: white;
}

.com-name h6 {
  font-family: cinzel;
  color: white;
  letter-spacing: 4px;
}

.side-navbar ul {
  list-style: none;
}

.side-navbar ul li {
  margin: 5px 0px;
  transition: all 0.3s ease-in-out;
  border-radius: 50px 0px 0px 50px !important;
  position: relative !important;
  width: 100%;
}

.side-navbar ul li:hover {
  background-color: #2e2302;
}

.side-navbar ul li .link {
  font-size: 16px;
  color: white;
  transition: all 0.3s ease-in-out;
}

.active {
  border-radius: 50px 0px 0px 50px !important;
  background-color: white;
}

.active::before {
  content: "";
  position: absolute;
  right: -1px;
  top: -16px;
  height: 15px;
  width: 30px;
  background-color: var(--primary-color);
  border-bottom-right-radius: 20px;
  box-shadow: 10px 5px 0px white;
  transition: all 0.3s ease-in-out;
}
.active::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -21px;
  height: 20px;
  width: 30px;
  background-color: var(--primary-color);
  border-top-right-radius: 20px;
  box-shadow: 10px -5px 0px white;
  transition: all 0.3s ease-in-out;
}

.active:hover {
  /* border-radius: 50px 0px 0px 50px !important; */
  background-color: white !important;
}

.active .link {
  border-radius: 50px 0px 0px 50px !important;
  color: var(--primary-color) !important;
}

.link span {
  transition: display 0.3s ease-in-out;
}

.side-navbar ul li a {
  color: var(--primary-color) !important;
}

.side-navbar ul .profile {
  margin-top: 70px;
  background-color: transparent;
}

.side-navbar ul .profile .link {
  background-color: #95ff0a !important;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-color: white;
}

.side-navbar ul .profile .link a {
  /* margin-top: 70px; */
  /* background-color: transparent; */
  color: white !important;
}

.change-pass-btn button {
  background-color: var(--primary-color);
  border: 2px solid white !important;
  font-size: 16px;
  color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.change-pass-btn button:hover {
  background-color: #2e2302;
  color: white;
}

/* end here */

/* ---------------------------------page section -------------------- */
/* start here */

/* page header */
.page-section {
  height: 100vh;
  overflow-y: auto;
}

.dashboard-header {
  background-color: var(--accent-color1);
}

.dashboard-header button {
  border: 2px solid white;
  color: white;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 10px var(--primary-color);
}

.dashboard-header button:hover {
  color: white;
}

.hambar button {
  height: 40px;
  width: 40px;
  background-color: #95ff0a;
  border: 2px solid white !important;
}

/* page content */

.dashboard-cards .card {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  color: white;
  /* border: 2px solid var(--primary-color); */
}

.dashboard-cards .card .card-header {
  background-color: transparent !important;
}

.dashboard-cards .card .card-icon {
  height: 60px;
  width: 60px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.courses-card {
  background-color: var(--accent-color1);
}

.member-card {
  background-color: var(--primary-color);
}

.service-card {
  background-color: #95ff0a;
}
.enquiry-card {
  background-color: rgb(49, 0, 128) !important;
}

/* ======================= Courses page start here==================== */
/* start here */
.submit-btn button {
  border: 2px solid white;
  color: white;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 10px var(--primary-color);
}

.form {
  border: 1px solid var(--accent-color1) !important;
}

.form-title {
  background-color: var(--accent-color1);
}

/*---------------- view section-------------- */

.view-info {
  border: 1px solid var(--accent-color1) !important;
}

.view-info .view-title {
  background-color: var(--accent-color1);
}

.edit-btns button {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) !important;
  color: white;
}

.edit-btn {
  background-color: rgb(216, 240, 6);
}

.delete-btn {
  background-color: red;
}

.member-img img,
.gallery-img img {
  height: 50px;
}

/* Video section    */
.yogaup_video iframe {
  height: 100px !important;
  width: 200px !important;
}
.yogaup_video {
  /* background-color: red !important; */
}