@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* 
h1 {
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

h2 {
	font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
}

h3 {
	font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
}

p {
	font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
} */
:root {
  --primary-bg-color: #fefae8;
  --secondary-bg-color: #f6f4f4;
  --tertiary-bg-color: #252020;
  --white: white;
  --bg-dashboard: #ffffff;
  --primary-accent-color: #f5b317;
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --banner-color-1: #c67708;
  --banner-color-2: #f5b317;
  --banner-color-3: #fdf3c4;
  --admin-link-hover-color: #6f3614;
  --admin-link-hover-bg-color: #f2eeee;
  --admin-link-unread-bg-color: #d4d4d4;
  --admin-link-hover-border-color: #6f351446;
  --feature-icon-bg-color: #ffffff;
  --primary-text-color: #161212;
  --secondary-text-color: #fff;
  --main-border: 1px solid black;
  --sm-lapdesks-margin: 50px;
  --lg-desktops-margin: 100px;
  --xl-desktops-margin: 200px;
  --fs-h2: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
  --fs-h1: clamp(2rem, 5vw + 1rem, 4.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --fs-body: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  --fs-small: clamp(0.875rem, 0.8vw + 0.25rem, 2rem);
  --fs-xsmall: clamp(0.5rem, 0.6vw + 0.2rem, 1rem);
  /* Line heights (for readability) */
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --space-xs: clamp(0.5rem, 1vh, 1rem);
  --space-sm: clamp(1rem, 2vh, 2rem);
  --space-md: clamp(2rem, 4vh, 4rem);
  --space-lg: clamp(3rem, 6vh, 6rem);
  --space-xl: clamp(4rem, 8vh, 8rem);
  --space-xxl: clamp(6rem, 10vh, 12rem);
  --spacevw-xs: clamp(0.5rem, 1vw, 1rem);
  --spacevw-sm: clamp(1rem, 2vw, 2rem);
  --spacevw-md: clamp(2rem, 4vw, 4rem);
  --spacevw-lg: clamp(3rem, 6vw, 6rem);
  --spacevw-xl: clamp(4rem, 8vw, 8rem);
  --spacevw-xxl: clamp(6rem, 10vw, 12rem);
  --container-max: 1200px;
  --container-padding: clamp(1rem, 4vw, 3rem);
  --img-xs: clamp(4rem, 10vw, 6rem);
  --img-sm: clamp(6rem, 15vw, 10rem);
  --img-md: clamp(10rem, 25vw, 16rem);
  --img-lg: clamp(16rem, 35vw, 24rem);
  --img-xl: clamp(24rem, 45vw, 32rem);
  --ratio-square: 1 / 1;
  --ratio-landscape: 16 / 9;
  --ratio-portrait: 3 / 4;
  --ratio-banner: 21 / 9;
  --img-radius: clamp(0.5rem, 1vw, 1.5rem);
  --img-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --img-border: 2px solid rgba(255, 255, 255, 0.1);
  --learner-content-width: min(1500px, 100%);
}

:root {
  --font-double-xs: clamp(0.3617rem, 0.3205rem + 0.2058vw, 0.48rem);
  --font-xs: clamp(0.8681rem, 0.6135rem + 1.2729vw, 1.6rem);
  --font-small: clamp(1rem, 0.7083rem + 1.6667vw, 1.7rem);
  --font-medium: clamp(1.25rem, 0.8152rem + 2.1739vw, 2.5rem);
  --font-large: clamp(1.5rem, 0.9348rem + 2.8261vw, 3.125rem);
  --font-xl: clamp(1.8rem, 1.0674rem + 3.663vw, 3.9063rem);
  --font-double-xl: clamp(2.16rem, 1.2129rem + 4.7353vw, 4.8828rem);
  --font-triple-xl: clamp(2.592rem, 1.3706rem + 6.107vw, 6.1035rem);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-moz-selection {
  background-color: var(--tertiary-bg-color);
  color: var(--secondary-text-color);
}

::selection {
  background-color: var(--tertiary-bg-color);
  color: var(--secondary-text-color);
}

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1,
h2,
h3 {
  color: var(--primary-text-color);
  font-weight: bolder;
  font-family: "Poppins", Arial, Helvetica, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h2 {
  color: var(--primary-text-color);
}

ul li,
button,
a,
p,
td,
th,
tr {
  font-family: "Inter", sans-serif;
  color: var(--primary-text-color);
}

h1.features__heading,
h1.learning-methods__heading,
h1.testimonials__heading {
  font-size: clamp(2rem, 5vw, 3rem);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  margin-block: 30px;
  text-align: center;
}

.content-border {
  border-bottom: var(--main-border);
}

.invalid-feedback {
  position: absolute;
  font-size: 8px;
  bottom: -10%;
  left: 5%;
  font-size: 10px;
  background-color: white;
  width: auto;
  padding-inline: 5px;
}

input.invalid-field {
  border: 2px solid rgb(170, 56, 56);
}

a {
  text-decoration: none !important;
}

div:where(.swal2-container) div:where(.swal2-loader) {
  width: 3em !important;
  height: 3em !important;
  border-width: 5px !important;
  border-color: var(--primary-accent-color) rgba(0, 0, 0, 0) var(--primary-accent-color) rgba(0, 0, 0, 0) !important;
  /* border-color: var(--primary-accent-color) !important; */
}

div[aria-labelledby=swal2-title] {
  border: var(--main-border) !important;
  border-radius: 10px !important;
  background-color: var(--secondary-bg-color) !important;
  width: min(310px, 100%);
  color: var(--primary-text-color) !important;
  font-weight: 700 !important;
}
div[aria-labelledby=swal2-title] h2.swal2-title {
  color: var(--primary-text-color) !important;
}

div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] {
  width: min(300px, 100%) !important;
}
@media screen and (max-width: 27.5em) {
  div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] {
    width: min(200px, 100%) !important;
    height: min(250px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    gap: 10px !important;
  }
  div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] > * {
    padding: 0 !important;
    margin: 0 !important;
  }
}
div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] div[class="swal2-icon swal2-error swal2-icon-show"] {
  border-color: var(--primary-text-color);
}
div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] div[class="swal2-icon swal2-error swal2-icon-show"] .swal2-x-mark .swal2-x-mark-line-left,
div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] div[class="swal2-icon swal2-error swal2-icon-show"] .swal2-x-mark .swal2-x-mark-line-right {
  background-color: var(--primary-text-color) !important;
}
div[class="swal2-popup swal2-modal swal2-icon-error swal2-show"] div.swal2-actions button[class="swal2-confirm swal2-styled"] {
  background-color: var(--primary-accent-color);
  color: var(--primary-text-color);
  border: var(--main-border);
}

.input-container {
  height: 100%;
  position: relative;
}
@media screen and (max-width: 23.4375em) {
  .input-container {
    height: 100%;
  }
}
.input-container .invalid-feedback {
  position: absolute;
  font-size: 8px;
  bottom: -10%;
  left: 5%;
  font-size: 9px;
  background-color: var(--secondary-bg-color);
  width: auto;
  font-weight: 900;
  padding-inline: 5px;
  white-space: nowrap;
  color: rgb(134, 81, 81);
  border-radius: 10px;
}
.input-container input {
  width: 100%;
  height: 100%;
  background-color: white !important;
}
.input-container input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--secondary-bg-color) inset;
}
.input-container input.invalid-field {
  border: 2px solid rgb(134, 81, 81) !important;
}
.input-container input.invalid-field::-moz-placeholder {
  color: rgb(134, 81, 81);
  opacity: 0.3;
}
.input-container input.invalid-field::placeholder {
  color: rgb(134, 81, 81);
  opacity: 0.3;
}
.input-container input:focus {
  border: 2px solid var(--primary-accent-color) !important;
}

.password-container #showhide-pass-btn {
  font-size: 25px;
  position: absolute;
  top: 30%;
  right: 10px;
  opacity: 0.9;
  cursor: pointer;
}

.wrapper {
  padding: 16px;
}

.wrapper-2 {
  padding: 30px;
}

.user-menu {
  position: relative;
}

.admin-profile .user-photo[aria-label=alternate-image] p {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.15);
  font-size: 16px;
  font-weight: 600;
  display: grid;
  place-content: center;
  letter-spacing: 1px;
  /* 	background-color: #42d0e2ff; */
}

.admin-profile .user-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: all 200ms ease;
  border: 1px solid var(--admin-link-hover-border-color);
  /* &:hover {

  } */
}

.admin-profile .user-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

div.user-dropdown-menu {
  position: absolute;
  top: 45px;
  right: 0%;
  z-index: 100;
  height: 200px;
  width: 150px;
  background-color: var(--secondary-bg-color);
  border: 1px solid var(--admin-link-hover-border-color);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transition: opacity 100ms ease-in-out;
  overflow: hidden;
}
div.user-dropdown-menu ul.user-menu-list {
  font-size: 16px;
  font-weight: 700;
  padding-left: 0;
  height: 100%;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* li {
  } */
}
div.user-dropdown-menu ul.user-menu-list li:last-child {
  border-top: 1px solid var(--admin-link-hover-border-color);
  margin-top: auto;
}
div.user-dropdown-menu ul.user-menu-list li a {
  cursor: pointer;
  display: flex;
  justify-content: baseline;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 7px 20px;
  transition: all 100ms ease-in-out;
}
div.user-dropdown-menu ul.user-menu-list li a:hover {
  background-color: var(--admin-link-hover-bg-color);
  color: var(--admin-link-hover-color);
}
div.user-dropdown-menu ul.user-menu-list li a i {
  font-size: 20px;
}

div.user-dropdown-menu[aria-expanded=false] {
  display: none;
}

div.user-dropdown-menu[aria-expanded=true] {
  display: block;
}
@starting-style {
  div.user-dropdown-menu[aria-expanded=true] {
    opacity: 0;
  }
}

.notification-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}
.notification-btn svg {
  background-color: none;
  transition: all 200ms ease;
  /* 	&:hover {
  	fill: var(--primary-accent-color);
  } */
}
.notification-btn .notif-sign {
  position: absolute;
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--primary-accent-color);
  border-radius: 50%;
  left: 15px;
  top: 2px;
}

.notification-btn {
  /* svg {
  	fill: var(--primary-accent-color);
  } */
}
.notification-btn .notification-dropdown {
  color: black !important;
  position: absolute;
  top: 40px;
  right: 0;
  width: 280px;
  background-color: var(--secondary-bg-color);
  padding-top: 10px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--admin-link-hover-border-color);
  display: none;
  overflow: hidden;
  cursor: auto;
  opacity: 1;
  transition: all 200ms ease;
}
@media screen and (max-width: 27.5em) {
  .notification-btn .notification-dropdown {
    position: fixed;
    top: 66px;
    left: 0;
    border-radius: 0;
    width: 100%;
    min-height: calc(100vh - 66px);
    border-radius: 0;
    border: none;
  }
}
.notification-btn .notification-dropdown i.bx.bx-plus {
  display: none;
}
.notification-btn .notification-dropdown[aria-expanded=true] {
  display: block;
}
@starting-style {
  .notification-btn .notification-dropdown[aria-expanded=true] {
    opacity: 0;
  }
}
.notification-btn .notification-header {
  padding: 10px 15px;
}
.notification-btn .notification-header h4 {
  color: black !important;
}
.notification-btn .notification-footer {
  text-align: center;
}
@media screen and (max-width: 27.5em) {
  .notification-btn .notification-footer {
    background-color: transparent;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.notification-btn .notification-footer a {
  font-weight: 400;
  padding-block: 5px;
  display: inline-block;
  text-align: center;
}
@media screen and (max-width: 27.5em) {
  .notification-btn .notification-footer a {
    padding: 5px 8px;
    border: 1px solid var(--admin-link-hover-border-color);
  }
}
.notification-btn button.mark-read {
  border: 1px solid var(--admin-link-hover-border-color);
  padding: 5px;
  font-weight: 400;
  color: var(--primary-text-color);
  font-size: 10px;
  cursor: pointer;
}
.notification-btn .notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--admin-link-hover-border-color);
  border-bottom: 1px solid var(--admin-link-hover-border-color);
}
.notification-btn .notification-item {
  display: flex;
  gap: 5px;
  padding: 5px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--admin-link-hover-border-color);
}
.notification-btn .notification-list .notification-item:last-child {
  border-bottom: none;
}
.notification-btn .notification-item.unread {
  background: var(--admin-link-unread-bg-color);
  color: var(--admin-link-hover-color);
}
.notification-btn .notif-icon i {
  padding-top: 3px;
  font-size: 20px;
}
.notification-btn .notif-content .notif-text {
  font-size: 14px;
  margin: 0;
}
.notification-btn .notif-content .notif-time {
  font-size: 12px;
}

html[data-role=admin] .notification-dropdown {
  z-index: 5;
}
@media screen and (max-width: 27.5em) {
  html[data-role=admin] .notification-dropdown {
    top: 0;
    height: 100vh;
  }
  html[data-role=admin] .notification-dropdown .notification-header {
    margin-bottom: 20px;
  }
  html[data-role=admin] .notification-dropdown i.bx.bx-plus {
    display: block;
    position: absolute;
    font-size: 50px;
    top: 10px;
    right: 5px;
    transform: rotate(45deg);
    cursor: pointer;
  }
}

.typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 4px solid #000;
  font-weight: 700;
  font-size: 4rem;
  animation: typing 3.5s steps(40, end) forwards, blink 0.75s step-end infinite;
}

/* typing */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* cursor blink */
@keyframes blink {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: transparent;
  }
}/*# sourceMappingURL=common.css.map */