@font-face {
  font-family: Outfit;
  src: url("https://static.smartstock.africa/font/Outfit.ttf");
}

@font-face {
  font-family: Jost;
  src: url("https://static.smartstock.africa/font/jost.ttf");
}

:root {
  /* Backgrounds (based on light gray) */
  --bg-dark: hsl(0 0% 85%); /* slightly darker than #e6e6e6 */
  --bg: hsl(0 0% 90%); /* #e6e6e6 */
  --bg-light: hsl(0 0% 95%);
  --bg-lighter: hsl(0 0% 98%);

  /* Subtle overlays */
  --shade-1: hsl(0 0% 0% / 5%);
  --shade-2: hsl(0 0% 0% / 15%);

  /* Text (based on your dark purple) */
  --text: hsl(254 49% 28%); /* #33256a */
  --text-muted: hsl(254 30% 45%);

  /* Highlight (soft orange background tint) */
  --highlight: hsl(32 93% 85%);

  /* Borders */
  --border: hsl(254 40% 35%);
  --border-muted: hsl(0 0% 75%);

  /* Brand Colors */
  --primary: hsl(254 49% 28%); /* #33256a */
  --secondary: hsl(32 93% 54%); /* #f7911e */

  /* Shadows (kept neutral for flexibility) */
  --shadow-s:
    inset 0px 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;

  --shadow-m:
    inset 0px 1px 2px #ffffff30, 0 2px 4px #00000030, 0 4px 8px #00000015;

  --shadow-l:
    inset 0px 1px 2px #ffffff30, 0 4px 6px #00000030, 0 6px 10px #00000015;

  /* Spacing */
  --padding-s: 4px;
  --padding-m: 8px;
  --padding-l: 16px;

  --margin-s: 4px;
  --margin-m: 8px;
  --margin-l: 16px;

  /* Fonts */
  --Outfit: Outfit;
  --Jost: Jost;

  /* Contrast */
  --text-contrast: white;
  --text-contrast-reverse: black;
  --text-contrast-shade: hsl(0 0% 20%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg);
}

.nooverflow {
  overflow: hidden;
}

.flex {
  display: flex;
}

.fullflex {
  flex: 1;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-v {
  align-items: center;
}
.center-h {
  justify-content: center;
}

body {
  color: var(--text);
  min-height: 100vh;
  flex-direction: column;
}

.fullheight {
  height: 100dvh !important;
}

header {
  height: 3rem;
  padding: 0px var(--padding-m);
  font-family: var(--Outfit);
  justify-content: space-between;
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--primary);
}

.headerIconElement {
  padding: var(--padding-s);
  gap: 12px;
  font-family: var(--Outfit);
  box-shadow: var(--shadow-s);
  border-radius: 16px;
  border: 1px solid var(--highlight);
  padding-left: var(--padding-m);
  padding-right: var(--padding-m);
  background: var(--bg-light);
  user-select: none;
  cursor: pointer;
}

.headerIconElement:hover,
.headerMenuIconElement:hover {
  box-shadow: var(--shadow-m);
}

.headerIconElement:active,
.headerMenuIconElement:active {
  box-shadow: var(--shadow-s);
}

.headerTextElement {
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
}

.CTAButton {
  padding: 4px;
  background: var(--highlight);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding-left: var(--padding-m);
  padding-right: var(--padding-m);
  cursor: pointer;
  user-select: none;
}

.headerMenuIconElement {
  cursor: pointer;
  display: none;
}

.headerMenuElement {
  position: absolute;
  right: 0;
  height: 100vh;
  top: 0;
  background: var(--bg);
  box-shadow: var(--shadow-m);
  font-family: var(--Outfit);
  width: 0px;
  overflow: hidden;
}

.headerMenuIconElement {
  padding: var(--padding-s);
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
  z-index: 1;
  border-radius: 4px;
}

.showUp {
  width: 12rem;
}

.headerMenu {
  font-weight: 300;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--padding-l);
  padding-top: calc(3rem + 8px);
  text-wrap-mode: nowrap;
}

path {
  stroke: var(--text);
}

.noStroke {
  stroke: none !important;
}

.sectionHeader {
  font-family: var(--Jost);
  font-weight: 1000;
  font-size: 120%;
  letter-spacing: 1px;
  padding: var(--padding-s);
  background: var(--primary);
  color: var(--text-contrast);
  padding-left: var(--padding-m);
  padding-right: var(--padding-m);
  border-radius: 4px;
}

.introSectionContainer {
  background: var(--primary);
}

.introSectionHolder {
  background: var(--primary);
  container-name: introSection;
  container-type: inline-size;
}

.introSection {
  padding: var(--padding-l);
}

.introText {
  font-size: 64px;
  color: var(--text-contrast);
  font-family: var(--Jost);
  font-variant: small-caps;
  font-weight: 500;
  max-width: 596px;
  margin: var(--margin-m);
  line-height: 1;
}

.introButton {
  margin: var(--margin-m);
  padding: var(--padding-l);
  background: var(--secondary);
  border-radius: 4px;
  font-family: var(--Outfit);
  font-weight: 700;
  color: black;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
}

.introDisplay {
  padding: var(--padding-m);
  margin: var(--margin-m);
}

.introImage {
  background: var(--secondary);
  border-radius: 5px;
  overflow: hidden;
}

#introImage {
  filter: drop-shadow(0px 12px 5px hsla(0 0% 0%/ 40%));
}

.statsSectionContainer {
  padding: var(--padding-l);
}

.statsSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.stats {
  width: max-content;
  padding: var(--padding-m);
  border-radius: 4px;
  font-family: var(--Jost);
  text-align: center;
  box-shadow: var(--shadow-m);
}

.statsHeader {
  font-size: 18px;
  font-weight: 600;
}

.introTextSection {
  font-family: var(--Jost);
  font-weight: 700;
  font-size: 120%;
  color: var(--text-muted);
}

#subjects {
  font-size: 100%;
  padding: var(--padding-m);
  border-radius: 50px;
  width: 25rem;
  font-family: var(--Outfit);
  padding-left: var(--padding-l);
  border: 1px solid var(--border);
  outline: none;
  font-weight: 300;
  letter-spacing: 1px;
}

.introInput {
  position: relative;
  align-items: center;
}

.searchIcon {
  height: 80%;
  position: absolute;
  right: 10px;
}

#achievementsSection {
  align-items: center;
  flex-direction: column;
  padding: var(--padding-l) 0px;
}

.achievementsSectionContainer {
  justify-content: space-evenly;
  padding: var(--padding-l) 0px;
  width: 100%;
}

.achievements {
  text-align: center;
  padding: var(--padding-m);
  background: var(--bg);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.achievementNumber {
  font-family: var(--Jost);
  font-size: 120%;
  font-weight: 1000;
  color: var(--text-muted);
}

.achievementText {
  font-family: var(--Outfit);
  font-weight: 300;
}

#FAQSection,
.footerContent {
  flex-direction: column;
}

.FAQSectionContainer {
  padding: var(--padding-l);
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.FAQ {
  background: var(--bg-light);
  width: 50%;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.FAQuestion {
  font-family: var(--Jost);
  font-size: 120%;
  font-weight: 500;
  color: var(--text-muted);
  padding: var(--padding-s);
  background: var(--bg);
  padding-left: var(--padding-m);
}

.FAQanswer {
  font-size: 80%;
  font-family: var(--Outfit);
  padding: var(--padding-m);
}

footer {
  background: var(--primary);
  padding: var(--padding-m);
  color: var(--text-contrast);
  font-size: 80%;
  font-family: var(--Outfit);
  padding-bottom: var(--padding-l);
  margin-top: auto;
}

.footerContent {
  padding: var(--padding-s);
}

.footerHeader {
  font-family: var(--Jost);
  text-decoration: underline;
  font-size: 16px;
}

.headerText {
  cursor: pointer;
  font-weight: 500;
  color: white;
}

.headerText:hover {
  text-decoration: underline;
}

a {
  color: var(--text);
  text-decoration: none;
}

#loginForm {
  position: relative;
  justify-content: center;
  background: linear-gradient(
    0deg,
    var(--bg-light) 20%,
    var(--bg-lighter) 100%
  );
}

.formInput {
  font-size: 16px;
  font-family: var(--Jost);
  padding: var(--padding-m) var(--padding-l);
  outline: none;
  border-radius: 4px;
  border: 1px solid hsl(0 0% 0% / 40%);
  background: white;
  min-width: 400px;
  letter-spacing: 1px;
}

.loginPhoto {
  position: absolute;
  bottom: -105px;
  z-index: 0;
  mask-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 1) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  --webkit-mask-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 1) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

#loginImage {
  width: 100%;
}

.loginPage {
  margin: auto;
  position: relative;
  z-index: 1;
}

.loginHeader {
  text-align: center;
  font-size: 18px;
  font-family: var(--Outfit);
  font-weight: 600;
}

.loginSubHeader {
  text-align: center;
  font-size: 16px;
  font-family: var(--Outfit);
  font-weight: 400;
  color: var(--secondary);
}

.loginFooter {
  margin: var(--margin-m) 0px;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.loginContent {
  flex-direction: column;
  gap: 12px;
  margin-top: var(--margin-l);
}

.loginButton,
.accountButton,
.otpButton {
  background: var(--primary);
  padding: var(--padding-m) var(--padding-l);
  color: white;
  font-family: var(--Jost);
  border-radius: 4px;
  letter-spacing: 1px;
  cursor: pointer;
}

.loginButton {
  opacity: 0.5;
  pointer-events: none;
}

.loginText {
  text-align: center;
  font-family: var(--Jost);
  margin-top: var(--margin-l);
}

.loginTextLink {
  font-size: 80%;
  color: var(--text-muted);
}

.linkText:hover {
  text-decoration: underline;
}

#otpGrid {
  display: flex;
  gap: 12px;
}

.tutorlyOtp {
  font-family: var(--Jost);
  width: 4ch;
  border: navajowhite;
  font-size: 100%;
  border-radius: 4px;
  outline: none;
  text-align: center;
  padding: var(--padding-s) var(--padding-m);
  font-weight: 800;
  box-shadow: var(--shadow-m);
  border: 1px solid hsl(0 0% 0% / 40%);
}

#tutorlyProfile {
  margin-left: auto;
  margin-right: auto;
  background: var(--shade-1);
  padding: var(--padding-l);
  border-left: 1px solid var(--shade-2);
  border-right: 1px solid var(--shade-2);
  min-width: 50vw;
}

.profileHeader {
  font-size: 120%;
  font-family: var(--Jost);
  background: var(--shade-2);
  padding: var(--padding-m);
  letter-spacing: 1px;
  color: var(--text-contrast-reverse);
}

.profileContent {
  padding: var(--padding-l);
}

.accountInputHolder {
  margin: var(--margin-s);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aitText {
  font-family: var(--Outfit);
}

.tutorlyInput {
  width: 100%;
  font-size: 100%;
  padding: var(--padding-m);
  border-radius: 4px;
  border: none;
  font-family: var(--Outfit);
  outline: none;
  padding-left: var(--padding-l);
  background: var(--shade-1);
  color: var(--text-contrast-reverse);
  font-weight: 200;
  letter-spacing: 1px;
  border: 1px solid var(--shade-2);
}

.tutorlyInput:focus {
  background: var(--shade-2);
}

.tutorlyInput::placeholder {
  color: var(--text-contrast-shade);
  opacity: 0.5;
}

.warning {
  animation: showWarning 2s ease;
}

@keyframes showWarning {
  0% {
    background: var(--shade-1);
  }
  30% {
    background: var(--primary);
  }
  100% {
    background: var(--shade-1);
  }
}

.accHolder {
  margin: var(--margin-l) 0px;
}

.imageRequirements {
  font-size: 80%;
  font-family: var(--Jost);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imageHolder {
  margin: var(--margin-l);
}

.imageSkeletal {
  aspect-ratio: 1/1;
  height: 150px;
  background: var(--bg-lighter);
  border-radius: 50%;
  flex-direction: column;
  font-size: 80%;
  font-family: var(--Outfit);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-m);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#profilePhoto {
  position: absolute;
  z-index: 1;
}

ul {
  list-style: none;
  text-align: center;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: var(--margin-l);
}

.profileFooter {
  margin-top: auto;
}

.profileButton {
  padding: var(--padding-l);
  background: var(--primary);
  border-radius: 5px;
  font-family: var(--Outfit);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-contrast);
  text-align: center;
  cursor: pointer;
}

.aitInputDefault {
  height: 100%;
  font-family: var(--Jost);
  padding: var(--padding-m);
}

.aitChildInput {
  position: relative;
}

.aitDropdown {
  position: absolute;
  height: 100%;
  background: var(--shade-2);
  right: 0px;
  padding-left: var(--padding-m);
  padding-right: var(--padding-m);
}

.rotate {
  transform: rotate(180deg);
}

.yearValues,
.timeValues {
  height: 0;
  position: absolute;
  overflow-y: scroll;
  scrollbar-width: thin;
  background: var(--bg);
  font-family: var(--Jost);
  padding-left: var(--padding-l);
  width: 11ch;
  padding-right: var(--padding-l);
  right: 0;
}

.timeValues {
  width: 9rem;
  text-align: center;
}

.showValues {
  height: 40vh;
}

.aitInput {
  justify-content: space-between;
  position: relative;
  margin: 0px var(--margin-m);
}

.year,
.time-slot {
  padding: var(--padding-s);
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.year:hover,
.time-slot:hover {
  background: var(--bg-light);
}

.yearInput {
  width: 10ch;
}

.timeInput {
  width: 9rem;
}

.yearText {
  margin-right: var(--margin-m);
  font-family: var(--Jost);
  color: var(--text-contrast-reverse);
}

.disable {
  opacity: 0.4;
  pointer-events: none;
  font-size: 80%;
  cursor: not-allowed;
}

.aitFileInput {
  padding: var(--padding-m);
  border: 2px dashed var(--shade-2);
  border-radius: 12px;
  margin: var(--margin-m);
  background: var(--shade-1);
  font-family: var(--Jost);
  font-size: 80%;
  cursor: pointer;
}

#degreeFile {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.upElement {
  position: relative;
  z-index: 2;
}

.dayChoosing {
  justify-content: space-between;
  font-family: var(--Jost);
  margin: 0px var(--margin-m);
}

.day {
  padding: var(--padding-s);
  background: var(--shade-2);
  border-radius: 5px;
  padding-left: var(--padding-m);
  padding-right: var(--padding-m);
  border: 1px solid var(--shade-2);
  cursor: pointer;
  user-select: none;
}

.day:hover {
  box-shadow: var(--shadow-m);
}

.selected {
  background: var(--highlight);
}

.sectionHeader,
.introHeader {
  text-align: center;
}

#mainProfile {
  container-name: tutorly-container;
  container-type: inline-size;
}

#tutorlyProfileBox {
  flex-direction: column;
}

.tutorlyProfileDetails {
  width: 100%;
}

.tutorlyProfile,
.tutorAvailability,
.tutorReviews {
  margin: var(--margin-l);
  padding: var(--padding-l);
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border-muted);
  box-shadow: var(--shadow-s);
}

.tutorAvailability {
  justify-content: space-between;
  flex-direction: column;
}

.tutorlyProfilePhoto {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
  align-items: center;
  display: flex;
  justify-content: center;
  border: 2px solid var(--border-muted);
}

#tutorlyPP {
  height: 100%;
}

.tutorname {
  font-size: 120%;
  font-family: var(--Jost);
  font-weight: 600;
  letter-spacing: 1px;
}

.tutorEmail {
  font-family: var(--Outfit);
  font-weight: 300;
  color: var(--text-contrast-shade);
  font-size: 80%;
}

.tutorStats {
  background: var(--bg-dark);
  padding: var(--padding-m);
  margin: var(--margin-m);
  border-radius: 8px;
  gap: 10px;
  width: 50%;
  justify-content: space-around;
}

.tutorStat {
  font-family: var(--Jost);
}

.tutorlyProfileAbout,
.tutorlyProfileHook {
  width: 100%;
  margin: var(--margin-m) var(--margin-m);
  font-family: var(--Jost);
}

.review {
  padding: var(--padding-m);
  background: var(--bg-light);
  border-radius: 4px;
  font-family: var(--Jost);
}

.tutorlyReview {
  background: var(--bg-lighter);
  box-shadow: var(--shadow-m);
  border-radius: 4px;
  width: max-content;
}

.tRHeader {
  display: flex;
  align-items: center;
  background: hsl(0 0% 0% /10%);
  padding: var(--padding-s);
  justify-content: space-between;
}

.trHeader {
  font-weight: 500;
  font-family: var(--Jost);
}

.trContent {
  opacity: 0.9;
  padding: var(--padding-m);
  font-size: 80%;
}

.paHeader {
  font-weight: 600;
}

.tutorlyProfileAbout {
  width: 100%;
  margin: var(--margin-m) var(--margin-m);
  font-family: var(--Jost);
}

.tutorlyDivInput {
  background: var(--bg-dark);
  height: 5rem;
  border-radius: 4px;
  border: 1px solid var(--border-muted);
  outline: none;
  text-wrap-mode: wrap;
  padding: var(--padding-m);
  color: var(--text-contrast-reverse);
}

.tutorlySaveButton {
  align-self: end;
  padding: var(--padding-s) var(--padding-m);
  margin: var(--margin-s);
  background: var(--primary);
  color: var(--text-contrast);
  font-weight: 500;
  border-radius: 4px;
  margin-right: 0px;
  cursor: pointer;
}

.saveDisabled {
  pointer-events: none;
  opacity: 0.5;
}

.avHeader {
  text-align: center;
  font-family: var(--Jost);
}

.avDays,
.avTime {
  font-family: var(--Outfit);
  color: var(--text-contrast-reverse);
  font-size: 80%;
  gap: 10px;
  padding: var(--padding-m);
  justify-content: space-around;
}

.avTime {
  justify-content: center;
}

.projectTitle {
  padding: 4px;
  font-size: 80%;
  color: hsl(0 0% 0% / 85%);
}

.tutorlyButtonConfirmation {
  padding: var(--padding-m);
  margin: var(--margin-m);
  background: var(--secondary);
  color: black;
  font-family: var(--Jost);
  border-radius: 4px;
  padding-left: var(--padding-l);
  padding-right: var(--padding-l);
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  text-align: center;
}

.displayProfile {
  width: max-content;
}

.displayTutorStats {
  width: 100%;
}

#field {
  flex: 1;
}

#displaySection {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--bg-light);
  z-index: 10;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: none;
}

.displayButton {
  width: 100%;
  text-align: center;
}

#bookingSection {
  flex: 1;
}

.tutor {
  margin: auto;
}

.tutorBookingInformation {
  background: var(--bg);
  padding: var(--padding-l);
  border-radius: 16px;
  margin: var(--margin-m);
}

.btppContainer {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  height: 100px;
}

.btppImage {
  height: 100%;
}

.btProfileDetails {
  margin: var(--margin-m);
}

.btProfileName {
  font-family: var(--Jost);
  font-size: 32px;
  font-weight: 800;
}

.btProfileAbout {
  font-family: var(--Outfit);
  font-size: 14px;
}

.tutorPaymentBookingInformation {
  justify-content: end;
}

.tpbiContainer {
  height: 100%;
  justify-content: space-between;
  padding: var(--padding-m);
  background: var(--bg-light);
  margin: var(--margin-m);
  border-radius: 16px;
  width: max-content;
}

.tbpiButton {
  margin: var(--margin-m);
  padding: var(--padding-m);
  background: var(--secondary);
  border-radius: 4px;
  font-family: var(--Outfit);
  font-weight: 700;
  color: black;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
}

@container tutorly-container (width>1000px) {
  #tutorlyProfileBox {
    flex-direction: row;
  }
  .tutorlyProfilePhoto {
    height: 50px;
    width: 50px;
    position: absolute;
  }

  .tutorReviews {
    width: 100%;
  }

  .tutorStats {
    width: 100%;
    font-size: 80%;
  }

  .flex-large {
    flex: 1;
    display: flex;
  }
  .tutorlyProfile {
    padding: var(--padding-m);
    flex: 1;
    align-items: unset;
    flex-direction: row;
  }
  .tutorlyDivInput {
    font-size: 100%;
    height: 100%;
  }
  .paContent {
    height: 100%;
  }
}

@media (max-width: 1024px) {
  .introSection {
    flex-direction: column-reverse;
    align-items: center;
  }
  .introText {
    font-size: 48px;
    text-align: center;
  }
}

@media (max-width: 724px) {
  .headerIconElement {
    margin-left: auto;
    margin-right: auto;
  }
  #introImage {
    width: 80vw;
  }
  .introText {
    font-size: 24px;
  }
  .introButton {
    padding: var(--padding-m);
  }

  .loginHeader {
    font-size: 16px;
  }
  .headerTextElement,
  .headerElement {
    display: none;
  }
  .headerMenuIconElement {
    display: flex;
    position: absolute;
    right: 10px;
  }
  #subjects {
    width: 20rem;
  }

  .FAQ {
    width: 80%;
  }
  .achievementText {
    font-size: 80%;
  }

  .loginPhoto {
    bottom: -10px;
  }
  #tutorlyProfile {
    width: 100vw;
    margin-left: unset;
    margin-right: unset;
  }
  #tutorlyProfile {
    padding: var(--padding-m);
  }
  .profileContent {
    padding: var(--padding-s);
  }
  .dayChoosing {
    font-size: 80%;
  }
  .tutorlyInput {
    padding: var(--padding-s);
    padding-left: var(--padding-m);
  }
  .yearText,
  .timeInput {
    font-size: 80%;
  }

  .timeInput {
    width: 7rem;
  }
  .tutorlyProfile {
    padding: var(--padding-s);
    margin: 0px;
    box-shadow: none;
    border-radius: 0px;
    padding-left: var(--padding-l);
    padding-right: var(--padding-l);
    flex-direction: column;
  }
  .tutorStats {
    width: 100%;
    font-size: 80%;
    padding: var(--padding-s);
    margin-left: var(--margin-l);
    margin-right: var(--margin-l);
  }
  .tutorlyDivInput {
    font-size: 80%;
  }
  .avDays,
  .avTime {
    font-size: 80%;
    gap: 5px;
    font-weight: 400;
  }
  #tutorlyDetailsBox {
    flex-direction: column;
  }
  #displaySection {
    width: 100%;
    border: none;
    height: 100%;
  }
}