@charset "UTF-8";
/* 
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);
} */
.header {
  background-color: var(--secondary-bg-color);
  border-bottom: var(--main-border);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 0;
  /* @include util.breakpoint(xl-desktops, none) {
  	display: grid;
  	grid-template-columns: 1fr 90rem 1fr;
  } */
}
.header_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 64px;
  width: min(1600px, 100%);
  margin-inline: auto;
}
@media screen and (max-width: 64em) {
  .header_nav {
    padding: 10px 24px;
  }
}
@media screen and (max-width: 27.5em) {
  .header_nav {
    padding: 10px 10px;
  }
}
.header_nav {
  /* 
  @include util.breakpoint(sm-tablets, none) {
  	margin-inline: 40px;
  	padding: 10px !important;
  }

  @include util.breakpoint(lg-tablets, none) {
  	padding: 10px !important;
  }



  @include util.breakpoint(lg-desktops, none) {
  	padding: 10px !important;
  	margin-inline: var(--lg-desktops-margin);
  }

  @include util.breakpoint(xl-desktops, none) {
  	padding: 10px !important;
  	margin-inline: 0 !important;
  	grid-column: 2/3;
  } */
}
.header_nav_logo img {
  width: 7rem;
  height: auto;
}
.header_nav_buttons {
  display: flex;
  gap: 10px;
}
.header_nav_buttons button {
  font-weight: 800;
  font-size: 10px;
  padding: 13px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: white;
  letter-spacing: 0.8px;
}
@media screen and (max-width: 27.5em) {
  .header_nav_buttons button {
    padding: 9px;
  }
}
.header_nav_buttons .header__nav_login-btn {
  border: var(--main-border);
}
.header_nav_buttons .header__nav_signup-btn {
  background-color: var(--primary-accent-color);
}

/* .hero {
	background: var(--primary-bg-color);
	height: 100vh;
	height: 100dvh;
} */
/* .hero {
	background: var(--primary-bg-color);
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	padding-top: 42px;

	@include util.breakpoint(lg-tablets, lg-tablets) {
	}

	@include util.breakpoint(sm-lapdesks, lg-tablets) {
		display: grid;
		place-content: center;
	}

	@include util.breakpoint(xl-desktops, none) {
		display: grid;
		place-content: center;
		margin-top: 50px;
	}
}

.hero-container {
	display: grid;
	gap: 10px;

	grid-auto-rows: auto;
	justify-content: center;
	align-items: center;
	text-align: center;

	@include util.breakpoint(sm-lapdesks, none) {
		margin-inline: var(--sm-lapdesks-margin);

		text-align: left;
		display: grid;
		row-gap: 20px;
		grid-template-rows: auto 100px auto;
		grid-template-areas:
			"mt mt ha ha ha ha ha"
			"pr pr ha ha ha ha ha"
			"ca ca ha ha ha ha ha";
	}

	@include util.breakpoint(lg-desktops, none) {
		margin-inline: var(--lg-desktops-margin);
		grid-template-rows: auto 70px auto;
		grid-template-areas:
			"mt ha ha ha ha ha"
			"pr ha ha ha ha ha"
			"ca ha ha ha ha ha";
	}

	@include util.breakpoint(xl-desktops, none) {
		padding: 0 !important;
		margin-inline: var(--xl-desktops-margin);
		grid-template-rows: auto 100px auto;
		row-gap: 10;
		grid-template-areas:
			"mt ha ha ha ha ha ha"
			"pr ha ha ha ha ha ha"
			"ca ha ha ha ha ha ha";
	}

	.hero-art {
		align-self: center;
		justify-self: center;
		margin-block: 20px;

		@include util.breakpoint(sm-lapdesks, none) {
			grid-area: ha;
			height: 100%;
			width: 100%;
		}

		@include util.breakpoint(xl-desktops, none) {
			grid-area: ha;
		}

		img {
			width: clamp(300px, 10vw, 500px);
			height: auto;
			image-rendering: optimizeQuality;

			@include util.breakpoint(sm-tablets, none) {
				width: 400px;
			}

			@include util.breakpoint(lg-tablets, none) {
				width: 430px;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				width: 500px;
				height: auto;
			}

			@include util.breakpoint(xl-desktops, none) {
				width: 700px;
				height: auto;
			}
		}
	}

	&__main-text {
		line-height: 1.2;
		font-size: var(--fs-h1);
		margin-block-end: 15px;
		white-space: nowrap;

		span {
			color: var(--primary-accent-color);
		}

		@include util.breakpoint(sm-lapdesks, none) {
			font-size: clamp(3rem, -5.0392rem + 12.549vw, 4.1rem);
			align-self: end;
			grid-area: mt;
			margin: 0;
		}

		@include util.breakpoint(xl-desktops, none) {
			font-size: clamp(3rem, -5.0392rem + 12.549vw, 5rem);
			align-self: end;
			word-break: keep-all;
		}
	}

	&__para {
		font-weight: 450;
		margin-inline: 30px;
		font-family: var(--secondary-font);
		font-size: var(--fs-small);

		@include util.breakpoint(lg-tablets, none) {
			margin-inline: 60px;
			font-size: var(--font-small);
		}

		@include util.breakpoint(sm-lapdesks, none) {
			grid-area: pr;
			font-size: 1.2rem;
			grid-column: 1/2;
			margin: 0;
		}

		@include util.breakpoint(xl-desktops, none) {
			font-size: 1.5rem;
		}
	}

	.create-account {
		align-self: center;
		justify-self: center;

		background-color: var(--primary-accent-color);
		color: var(--primary-text-color);
		text-decoration: none;

		padding: 15px;

		margin-block: 15px;
		border-radius: 5px;
		border: var(--main-border);

		text-transform: uppercase;
		font-weight: 800;
		font-size: 13px;
		cursor: pointer;
		@include util.hovereffect(3px);

		@include util.breakpoint(sm-lapdesks, none) {
			font-size: 1rem;
			grid-area: ca;
			justify-self: baseline;
			align-self: baseline;
			margin-top: 10px;
			height: 50px;
			width: 200px;
		}

		@include util.breakpoint(xl-desktops, none) {
			align-self: baseline;
		}
	}
} */
.hero {
  width: 100%;
  height: 100vh;
  background: #fcf6df;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  border: none;
  /* @include util.breakpoint-down(xl-tablets) {
  		height: 70vh;
  	} */
}
.hero__container {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  /* @include util.breakpoint-down(xl-tablets) {
  	display: block;
  	margin-inline: auto;
  } */
}
.hero__art {
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero__art img {
  width: 260px;
  height: auto;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1rem;
}
.hero__title {
  font-size: clamp(2.4rem, 4vw, 4.5rem) !important;
  line-height: 1.15;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
  word-break: keep-all;
  /* .highlight {
  	color: #f4b700;
  } */
}
@media screen and (max-width: 80em) {
  .hero__title {
    font-size: clamp(3rem, 4vw, 4.5rem) !important;
    line-height: 1.2;
  }
}
@media screen and (max-width: 64em) {
  .hero__title {
    font-size: clamp(2.5rem, 3vw, 4rem) !important;
    line-height: 1.2;
  }
}
@media screen and (max-width: 48em) {
  .hero__title {
    font-size: clamp(2rem, 2vw, 3.5rem) !important;
    line-height: 1.2;
    text-align: center;
  }
}
@media screen and (max-width: 37.5em) {
  .hero__title {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
    line-height: 1.2;
  }
}
.hero__subtitle {
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  line-height: 1.6;
  max-width: 520px;
  color: #2c2c2c;
}
@media screen and (max-width: 48em) {
  .hero__subtitle {
    text-align: center;
  }
}
.hero__cta {
  background: var(--primary-accent-color);
  border: none;
  border-radius: 6px;
  font-weight: 700;
  padding: 0.9rem 1rem;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 900;
  font-size: calc(var(--fs-body) - 7px) !important;
}
@media screen and (max-width: 48em) {
  .hero__content {
    text-align: left;
  }
}
@media screen and (max-width: 37.5em) {
  .hero__content {
    text-align: center;
  }
}
@media screen and (min-width: 48em) {
  .hero__container {
    flex-direction: row;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    text-align: left;
    gap: 3rem;
  }
  .hero__art {
    width: 50%;
  }
  .hero__art img {
    width: 100%;
    max-width: 600px;
  }
  .hero__content {
    width: 50%;
    align-items: flex-start;
  }
}
@media screen and (min-width: 80em) {
  .hero {
    padding: 5rem 4rem;
  }
  .hero__title {
    font-size: 4.5rem;
  }
  .hero__subtitle {
    font-size: 1.4rem;
  }
  .hero__art img {
    max-width: 650px;
  }
}

/* .hero {
	background: #fcf5db;
	padding: 4rem 2rem;
	height: 100vh;

	.hero-container {
		max-width: 1600px; // keep layout same at large view
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 3rem;

		// TEXT BLOCK
		&__content {
			max-width: 650px;
			flex: 1;
		}

		&__title {
			font-size: clamp(2.4rem, 4vw, 4.5rem);
			line-height: 1.15;
			font-weight: 800;
			color: #1a1a1a;
			white-space: normal; // prevent weird breaks
			word-break: keep-all; // keeps words intact

			.highlight {
				color: #f4b700;
			}
		}

		&__para {
			margin-top: 1.5rem;
			font-size: 1.25rem;
			line-height: 1.6;
			max-width: 480px;
			color: #292929;
		}

		&__cta {
			margin-top: 2.5rem;
			background: #ffbf00;
			border: 3px solid #000;
			border-radius: 6px;
			font-weight: 700;
			padding: clamp(0.6rem, 2vw, 0.9rem) clamp(1.3rem, 3vw, 2rem);
			text-transform: uppercase;
			cursor: pointer;
			box-shadow: 4px 4px 0 #000;
			transition: 120ms ease;

			&:hover {
				box-shadow: none;
			}
		}

		// IMAGE SIDE
		.hero-art {
			flex: 1;
			display: flex;
			justify-content: center;

			img {
				width: 100%;
				max-width: 600px; // ensures same size on 1280px & above
				height: auto;
			}
		}
	}


	@include util.breakpoint-down(lg-tablets) {
		// 768px
		.hero-container {
			flex-direction: column-reverse;
			text-align: center;

			.hero-art img {
				max-width: 420px;
			}

			&__content {
				max-width: 100%;
			}
		}
	}

	@include util.breakpoint-down(sm-phones) {
		// 375px
		.hero-container {
			padding: 2rem 1rem;
		}

		&__title {
			font-size: clamp(1.9rem, 6vw, 2.5rem);
		}

		&__cta {
			font-size: 0.85rem;
			padding: 0.55rem 1.2rem;
			box-shadow: 3px 3px 0 #000;
		}
	}
}
 */
/* .features {

	@include util.breakpoint(sm-lapdesks, none) {
		display: grid;
		place-content: center;
		grid-template-columns: 1fr auto auto 1fr;
		grid-template-rows: auto;
	}

	@include util.breakpoint(xl-desktops, none) {
		height: 100vh;
		display: grid;
		place-content: center;
		grid-template-columns: 1fr 1fr calc(85rem - 30rem) 1fr;
		grid-template-rows: auto;
	}
	&__heading {
		grid-column: 2/3;
		justify-self: center;
		align-self: center;
		margin-inline: 10px;

		span {
			color: var(--primary-accent-color);
		}
	}

	&__block {
		display: flex;
		flex-direction: column;
		gap: 20px;

		@include util.breakpoint-down(lg-phones) {
			gap: 15px;
		}

		@include util.breakpoint(sm-tablets, none) {
			gap: 40px;
		}

		@include util.breakpoint(lg-tablets, sm-tablets) {
			gap: 45px;
		}

		@include util.breakpoint(sm-lapdesks, sm-tablets) {
			gap: 20px;
		}

		@include util.breakpoint(xl-desktops, none) {
			grid-column: 3/4;
			gap: 15px;
		}
	}

	&__item {

		overflow: hidden;
		display: grid;
		grid-auto-rows: auto;
		grid-template-areas:
			"ic"
			"hd"
			"bl";

		color: var(--secondary-text-color);
		padding: 30px;
		border-radius: 10px;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.103);
		border: var(--main-border);
		color: #000;
		position: relative;
		z-index: -1;

		@include util.breakpoint-down(lg-tablets) {
			&::after {
				content: "";
				width: 100%;
				height: 100%;
				background-color: transparent;
				backdrop-filter: blur(5px);
				position: absolute;
				z-index: -1;
			}
		}

		@include util.breakpoint-down(lg-tablets) {
			padding: 5px;
			font-size: var(--fs-small);
		}

		@include util.breakpoint(lg-tablets, none) {
			grid-template-rows: repeat(3, auto);
			grid-template-areas:
				"ic hd hd"
				"ic bl bl"
				"ic bl bl";
		}

		@include util.breakpoint(sm-lapdesks, none) {
			margin-inline: 20px;
		}

		.features__icon-container {
			width: var(--img-md);
			margin-block: 10px;
			margin-inline: auto;
			grid-area: ic;

			@include util.breakpoint-down(lg-tablets) {
				width: 100px;
				position: relative;
			}

			.features__icon {
				width: 100%;
				object-fit: cover;
				height: auto;

				@include util.breakpoint-down(lg-tablets) {
					position: absolute;
					width: 300px;
					height: auto;
					z-index: -1;

				}
			}

			@include util.breakpoint(lg-tablets, none) {
				width: var(--img-sm);
				margin-inline: 1.2rem;
				align-self: center;
				justify-self: center;
			}
		}

		&_heading {
			grid-area: hd;
			font-weight: 900;

			font-size: var(--fs-h3);
			text-transform: uppercase;
			padding-block: 10px;
			text-align: center;

			@include util.breakpoint-down(lg-tablets) {
				font-size: var(--fs-small);
				margin-bottom: 0;
			}

			@include util.breakpoint(lg-tablets, none) {
				margin-block: var(--space-sm);
				font-size: calc(var(--font-small) - 5px);
				justify-self: center;
				align-self: center;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				margin-top: 20px;
				font-size: calc(var(--fs-h3) - 1.1rem);
			}

			@include util.breakpoint(xl-desktops, none) {
				font-size: calc(var(--fs-h3) - 0.7rem);
			}
		}

		&_bullets {
			grid-area: bl;

			margin-top: 10px;
			list-style-type: disc;
			margin-inline: 2rem;

			@include util.breakpoint-down(lg-tablets) {
				margin: 0;
				padding-inline: 30px;
				padding-bottom: 20px;
			}

			@include util.breakpoint(lg-tablets, none) {
				padding-left: 0;
				justify-self: center;
				align-self: baseline;
			}

			li {
				padding-block: 5px;
				font-weight: 700;
				@include util.breakpoint(lg-tablets, none) {
					font-size: calc(var(--font-small) - 8px);
					margin-block: 10px;
				}

				@include util.breakpoint(sm-lapdesks, none) {
					margin-top: 20px;
					font-size: calc(var(--font-small) - 10px);
				}
			}
		}
	}
}
 */
.why-choose {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 3rem;
  padding: 4rem 64px;
  width: min(1800px, 100%);
  margin-inline: auto;
  z-index: -1;
}
@media screen and (max-width: 48em) {
  .why-choose {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 2rem;
    padding: 4rem 30px;
  }
}
@media screen and (max-width: 27.5em) {
  .why-choose {
    padding: 30px 15px;
  }
}
@media screen and (max-width: 23.4375em) {
  .why-choose {
    padding: 30px 5px;
  }
}

/* LEFT HEADING */
.why-heading h2 {
  white-space: nowrap;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
  color: var(--primary-text-color);
}

/* RIGHT SIDE — BOX CONTAINER */
.why-boxes {
  display: flex;
  flex-direction: column;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  /* @include util.breakpoint-down(lg-desktops) {
  	width: 500px;
  } */
}
@media screen and (max-width: 37.5em) {
  .why-boxes {
    width: 100%;
  }
}
@media screen and (max-width: 23.4375em) {
  .why-boxes {
    padding: 10;
  }
}

/* SINGLE BOX */
.why-box.show {
  animation: whyBoxAnim 1000ms forwards;
  animation-delay: 200ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  z-index: -1;
}

.why-box:nth-child(2).show {
  animation: whyBoxAnim1 1000ms forwards;
  animation-delay: 200ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  z-index: -1;
}

.why-box {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 3rem clamp(2rem, 4vw, 5rem);
  opacity: 0;
}
@media screen and (max-width: 80em) {
  .why-box {
    padding-block: 2rem;
  }
}
@media screen and (max-width: 64em) {
  .why-box {
    align-items: center;
    flex-direction: column;
    padding-block: 20px;
    padding-inline: 30px;
    gap: 25px;
  }
  .why-box h3 {
    text-align: center;
  }
}
@media screen and (max-width: 48em) {
  .why-box {
    flex-direction: column;
    gap: 1rem;
    padding: 1.8rem 1.4rem;
    text-align: left;
  }
}
@media screen and (max-width: 27.5em) {
  .why-box {
    gap: 2rem;
  }
}

/* ICON CIRCLE */
.icon-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fce38c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media screen and (max-width: 80em) {
  .icon-wrap {
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 64em) {
  .icon-wrap {
    width: 100px;
    height: 100px;
  }
}
.icon-wrap i {
  font-size: var(--fs-h2);
  color: #9b6c39;
}
@media screen and (max-width: 80em) {
  .icon-wrap i {
    font-size: calc(var(--fs-h2) - 1px);
  }
}
@media screen and (max-width: 27.5em) {
  .icon-wrap i {
    font-size: calc(var(--fs-h1));
  }
}

.why-box:first-child .why-content h3,
.why-box:first-child .why-content ul li {
  color: var(--secondary-text-color) !important;
}

/* RIGHT CONTENT */
.why-content h3 {
  font-size: calc(var(--fs-body) - 2px);
  font-weight: 600;
  margin-bottom: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* @include util.breakpoint-down(lg-phones) {
  	font-size: calc(var(--fs-h3) - 0.2rem);
  } */
}

.why-content ul {
  list-style: disc;
  margin-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
@media screen and (max-width: 27.5em) {
  .why-content ul {
    margin: 0;
  }
}
@media screen and (max-width: 23.4375em) {
  .why-content ul {
    padding-left: 25px;
    gap: 0.5rem;
  }
}

.why-content li {
  font-size: var(--fs-body);
  color: var(--primary-text-color);
  line-height: 1.45;
  opacity: 0.95;
  font-weight: 300;
}
@media screen and (max-width: 23.4375em) {
  .why-content li {
    font-size: calc(var(--fs-body) - 2px);
  }
}

@keyframes whyBoxAnim {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes whyBoxAnim1 {
  from {
    opacity: 0;
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* .learning-methods {
	@include util.breakpoint-down(lg-tablets) {
		&__heading {
		}

		&__block {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding-inline: 20px;

			.learning-methods__item {
				overflow: hidden;
				height: 200px;

				&_image-container {
					width: 200px;
					position: relative;

					.learning-img {
						width: 100%;
						height: auto;
						object-fit: cover;
						position: absolute;
						z-index: -1;
					}
				}
			}
		}
	}
} */
/* .learning-methods {
	background-color: var(--secondary-bg-color);
	padding-block: 20px 70px !important;
	padding-inline: 25px;

	@include util.breakpoint(sm-lapdesks, none) {
	}

	@include util.breakpoint(lg-desktops, none) {
		padding-bottom: var(--space-lg) !important;
	}

	@include util.breakpoint(xl-desktops, none) {
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 89rem 1fr;
		padding-block: 20px 80px !important;
	}

	&__heading {
		margin: 0 !important;
		padding: var(--space-md);
		span {
			color: var(--primary-accent-color);
		}

		@include util.breakpoint(xl-desktops, none) {
			grid-column: 2/3;
			margin-block: var(--space-md) !important;
		}
	}

	&__block {
		display: grid;

		gap: 20px;

		@include util.breakpoint-down(lg-tablets) {
			grid-auto-rows: 300px;
		}

		@include util.breakpoint(sm-tablets, none) {
			grid-template-columns: 30px 1fr 30px;
		}

		@include util.breakpoint(lg-tablets, none) {
			grid-template-columns: 50px 1fr 50px;
			row-gap: 40px;
		}

		@include util.breakpoint(sm-lapdesks, none) {
			margin-inline: 60px;
			display: flex;
			padding-bottom: 50px !important;
		}

		@include util.breakpoint(lg-desktops, none) {
			margin-inline: 100px;
			grid-auto-rows: auto;
			grid-template-columns: 1fr 1fr;
			grid-template-areas:
				"l1 l3"
				"l2 l3";
			gap: 30px;
		}

		@include util.breakpoint(xl-desktops, none) {
			margin-inline: 0;
			grid-column: 2/3;
			grid-template-rows: 1fr;
			grid-auto-columns: repeat(3, auto);
			align-items: stretch;
		}

		.learning-methods__item:nth-child(1) {
			@include util.breakpoint(lg-desktops, none) {
				grid-area: l1;
			}
		}
		.learning-methods__item:nth-child(2) {
			@include util.breakpoint(lg-desktops, none) {
				grid-area: l2;
			}
		}
		.learning-methods__item:nth-child(3) {
			@include util.breakpoint(lg-desktops, none) {
				grid-area: l3;
				align-self: center;
			}
		}

		.learning-methods__item {
			text-align: center;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			transition: transform 0.2s cubic-bezier(0.83, 0, 0.17, 1);
			border-radius: 10px;
			overflow: hidden;
			border: var(--main-border);
			&:hover {
				transform: translateY(-4px);
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
			}

			@include util.breakpoint(sm-tablets, none) {
				grid-column: 2/3;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				padding: 20px !important;
				background-color: white;
			}
			@include util.breakpoint(xl-desktops, none) {
				display: grid;
				grid-template-rows: repeat(3, auto);
			}

			&_image-container {
				flex-grow: 2;
				height: auto;
				width: 100%;
				overflow: hidden;

				@include util.breakpoint(sm-lapdesks, none) {
					height: 300px;
				}

				@include util.breakpoint-down(lg-tablets) {
					height: 150px;
				}

				.learning-img {
					width: 100%;
					height: auto;
					object-position: bottom;
					object-fit: cover;

					@include util.breakpoint(sm-lapdesks, none) {
						object-position: center;
					}
				}
			}

			&_text-container {
				background-color: rgb(255, 255, 255);
				padding-block: 10px;
				padding-inline: 15px;
				padding-block: 1rem;
				flex-grow: 1;

				@include util.breakpoint-down(lg-tablets) {
					height: 100%;
				}

				@include util.breakpoint(sm-lapdesks, none) {
					height: 100%;
				}

				@include util.breakpoint(xl-desktops, none) {
					padding-block: 10px !important;
				}

				.learning-methods__item_heading {
					font-size: var(--fs-h3);
					margin-bottom: 5px;

					@include util.breakpoint-down(lg-tablets) {
						font-size: calc(var(--fs-h3) - 5px);
					}

					@include util.breakpoint(sm-lapdesks, none) {
						font-size: calc(var(--fs-h3) - 15px);
					}

					@include util.breakpoint(xl-desktops, none) {
						font-size: calc(var(--fs-h3) - 15px);
					}
				}

				.learning-methods__item_description {
					font-size: calc(var(--fs-body) + 1px);

					@include util.breakpoint-down(lg-tablets) {
						font-size: calc(var(--fs-small));
					}

					@include util.breakpoint(sm-lapdesks, none) {
						font-size: calc(var(--fs-small));
					}

					@include util.breakpoint(xl-desktops, none) {
						font-size: calc(var(--fs-small) - 4px);
					}
				}
			}
		}
	}
} */
/* background-color: var(--secondary-bg-color);

	&__heading {
		span {
			color: var(--primary-accent-color);
		}
	}

	&__block {
		display: grid;

		@include util.breakpoint(sm-tablets, none) {
		}
	}


	&__item:nth-child(3) {
		padding-bottom: 0;
		margin-bottom: 30px;
	}

	&__item {
		padding: 30px;
		padding-left: 30px;
		display: grid;

		&_image-container {
			width: 100%;
			height: 100px;

			.learning-img {
				width: 100%;
				display: block;
				object-fit: cover;
			}
		}

		&_heading {
			font-size: 17px;
			text-transform: uppercase;
			margin-bottom: 10px;

			span {
				color: var(--primary-accent-color);
			}

			.bullet {
				position: absolute;
				width: 25px;
				height: 25px;
				background-color: var(--primary-accent-color);
				border-radius: 50%;
				left: -14.5%;
				top: 50%;
				transform: translateY(-50%);

				&::after {
					content: "";
					position: absolute;
					width: 2px;
					height: 80px;
					background-color: var(--primary-accent-color);
					border-radius: 50%;
					left: 50%;
					transform: translateX(-50%);
					top: 100%;
				}
			}
		}
	} */
/* 	&::after {
				content: "";
				position: absolute;
				width: 25px;
				height: 25px;
				background-color: var(--primary-accent-color);
				border-radius: 50%;
				left: -14.5%;
				top: 50%;
				transform: translateY(-50%);
			} */
.how-learn-wrapper {
  position: relative;
  z-index: -1;
}
.how-learn-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-bg-color);
  top: 0;
  left: 0;
  z-index: -2;
}

.how-learn {
  padding: 6rem 64px;
  width: min(1600px, 100%);
  margin-inline: auto;
  overflow: hidden;
}
@media screen and (max-width: 48em) {
  .how-learn {
    padding: 4rem 30px;
  }
}
@media screen and (max-width: 27.5em) {
  .how-learn {
    padding: 30px 15px;
  }
}
@media screen and (max-width: 23.4375em) {
  .how-learn {
    padding: 30px 10px;
  }
}
.how-learn .how-learn-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--primary-text-color);
  margin-bottom: 3rem;
}
.how-learn .how-learn-items {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
@media screen and (max-width: 48em) {
  .how-learn .how-learn-items {
    flex-direction: column;
    gap: 2rem;
  }
}
.how-learn .how-item.show {
  animation: learningAnim 1000ms forwards;
  animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}
@media screen and (max-width: 27.5em) {
  .how-learn .how-item.show {
    animation: learningAnimMobile 500ms forwards;
  }
}
.how-learn .how-item:nth-child(2).show {
  animation-delay: 500ms;
}
.how-learn .how-item:nth-child(3).show {
  animation-delay: 1000ms;
}
.how-learn .how-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 28%;
  position: relative;
  opacity: 0;
  z-index: -1;
  overflow: hidden;
}
@media screen and (max-width: 48em) {
  .how-learn .how-item {
    max-width: 100%;
  }
}
@media screen and (max-width: 27.5em) {
  .how-learn .how-item {
    flex-direction: row;
    gap: 5px;
  }
}
.how-learn .how-item:last-child .bullet::after {
  display: none;
}
.how-learn .how-item .bullet {
  width: 20px;
  height: 20px;
  background: #c67708;
  border-radius: 50%;
  margin-bottom: 1rem;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 27.5em) {
  .how-learn .how-item .bullet {
    padding: 10px;
  }
}
.how-learn .how-item .bullet:after {
  z-index: 0;
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  width: 1800%;
  height: 2px;
  background: repeating-linear-gradient(to right, #cc8800, #cc8800 4px, transparent 4px, transparent 12px);
  transform: translateY(-50%);
  opacity: 0.6;
  /* @media screen and (max-width: 1276px) {
  	width: calc(20rem , 10vw, 30rem);
  } */
}
@media screen and (max-width: 27.5em) {
  .how-learn .how-item .bullet:after {
    left: 46%;
    top: 300%;
    width: 2px;
    height: 300%;
    background: repeating-linear-gradient(to bottom, #cc8800, #cc8800 4px, transparent 4px, transparent 12px);
  }
}
.how-learn .how-item .bullet:after {
  /* @include util.breakpoint-down(lg-phones) {

  } */
  /* @include util.breakpoint-down(sm-phones) {
  	width: 1500%;
  } */
}
.how-learn .how-item .how-text h3 {
  font-size: calc(var(--fs-body) + 3px);
  font-weight: 700;
  color: var(--primary-text-color);
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}
.how-learn .how-item .how-text p {
  font-size: calc(var(--fs-small) + 1px);
  line-height: 1.4;
  font-weight: 400;
}

@keyframes learningAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes learningAnimMobile {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .testimonials {
	background-color: var(--primary-bg-color);

	@include util.breakpoint(sm-lapdesks, none) {
		padding: var(--space-md) !important;
	}

	@include util.breakpoint(xl-desktops, none) {
		display: grid;
		grid-template-columns: 1fr 85rem 1fr;
		height: 90vh;
		row-gap: 3rem;
		place-content: center;
	}

	&__heading {
		text-align: center;
		span {
			color: var(--primary-accent-color);
		}

		@include util.breakpoint(xl-desktops, none) {
			grid-column: 2/3;
			align-self: end;
			margin-block: 0 !important;
		}
	}

	&__block {
		display: grid;
		grid-auto-rows: auto;
		place-content: center;
		gap: 20px;

		@include util.breakpoint-down(lg-tablets) {
			display: flex;
			flex-direction: column;
		}

		@include util.breakpoint(sm-tablets, sm-tablets) {
			gap: 40px;
		}
		@include util.breakpoint(lg-tablets, lg-tablets) {
			row-gap: 9px;
			column-gap: 15px;
			grid-template-rows: repeat(4, 200px);
			grid-template-columns: repeat(4, 1fr);
			grid-template-areas:
				"t1 t1 t2 t2"
				"t1 t1 t2 t2"
				"t3 t3 t3 t3"
				"t3 t3 t3 t3";
		}

		@include util.breakpoint(sm-lapdesks, none) {
			grid-template-rows: auto;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas: "t1 t2 t3";
		}

		@include util.breakpoint(xl-desktops, none) {
			grid-column: 2/3;
			grid-template-rows: auto;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas: "t1 t2 t3";
		}

		.testimonials__item-1 {
			@include util.breakpoint(lg-tablets, none) {
				grid-area: t1;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				grid-area: t1;
			}

			@include util.breakpoint(xl-desktops, none) {
				grid-area: t1;
			}
		}
		.testimonials__item-2 {
			background-color: var(--primary-accent-color);

			@include util.breakpoint(lg-tablets, none) {
				grid-area: t2;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				grid-area: t2;
			}

			@include util.breakpoint(xl-desktops, none) {
				grid-column: span 1;
				grid-area: t2;
			}
		}
		.testimonials__item-3 {
			@include util.breakpoint(lg-tablets, none) {
				grid-area: t3;
			}

			@include util.breakpoint(sm-lapdesks, none) {
				grid-area: t3;
			}

			@include util.breakpoint(xl-desktops, none) {
				grid-area: t3;
			}
		}
	}

	&__item {
		display: grid;
		place-content: center;
		grid-auto-rows: auto;

		gap: 5px;
		text-align: center;
		height: 400px;

		background-color: white;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		padding: 20px;
		border-radius: 30px;
		border: var(--main-border);

		@include util.breakpoint-down(lg-phones) {
			height: max-content;
		}

		&_quote {
			@include util.breakpoint(lg-tablets, none) {
				margin-inline: 10px;
			}

			@include util.breakpoint(xl-desktops, none) {
				margin-inline: 25px;
			}
		}

		&_role {
			font-weight: 600;

			@include util.breakpoint-down(lg-phones) {
				margin-block: 0;
			}
		}

		&_name {
			font-weight: 900;

			@include util.breakpoint-down(lg-phones) {
				margin-block: 0;
			}
		}

		&_image {
			margin-block: 2.5rem 5px;
			grid-row: 3/4;
			border-radius: 50%;
			height: auto;
			width: min(150px, 30%);
			aspect-ratio: 1/1;
			object-fit: cover;
			justify-self: center;
			border-radius: 50%;
			border: var(--main-border);

			@include util.breakpoint-down(lg-phones) {
				margin-block: 0;
			}

			@include util.breakpoint(lg-tablets, none) {
				margin-block: 10px;
			}
		}
	}
} */
/* .testimonials {
	padding: 100px 0;
	background: #fff8e7;

	.testimonial-container {
		padding-inline: 64px;
		width: min(1600px, 100%);
		margin-inline: auto;

		@include util.breakpoint-down(lg-tablets) {
			padding-inline: 30px;
		}

		@include util.breakpoint-down(lg-phones) {
			padding-inline: 15px;
		}

		@include util.breakpoint-down(sm-phones) {
			padding-inline: 10px;
		}
	}

	.section-title {
		font-size: var(--fs-h2);
		text-align: center;
		font-weight: 800;
		line-height: 1.4;
		color: var(--primary-text-color);
		margin-bottom: 60px;
	}

	.testimonials__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		column-gap: 40px;
		row-gap: 10px;




		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		margin: 0 auto;
		width: 100%;
		@media (max-width: 992px) {
			grid-template-columns: 1fr;
			max-width: 600px;
		}
	}

	.testimonial-item {
		text-align: center;
	}

	.testimonial-card {
		background-color: var(--secondary-bg-color);
		border: 1px solid rgba(0, 0, 0, 0.185);
		padding: 40px;
		min-height: 250px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: 0 0 0 1px #f0e4d1;
		transition: 0.3s ease;
	}

	.testimonial-title {
		font-size: calc(var(--fs-body) + 3px);
		font-weight: 600;
		margin-bottom: 15px;
	}

	.testimonial-text {
		font-size: 16px;
		line-height: 1.6;
		color: #555;
	}

	.testimonial-profile {
		margin-top: 30px;

		.profile-img {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 12px;
		}

		.profile-name {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 4px;
		}

		.profile-role {
			font-size: 15px;
			color: #777;
		}
	}
} */
.testimonials {
  padding: 100px 0;
  background: #fff8e7;
  position: relative;
  z-index: -1;
}
.testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-bg-color);
  z-index: -1;
}
.testimonials .testimonial-container {
  padding-inline: 64px;
  width: min(1600px, 100%);
  margin-inline: auto;
}
@media screen and (max-width: 48em) {
  .testimonials .testimonial-container {
    padding-inline: 30px;
  }
}
@media screen and (max-width: 27.5em) {
  .testimonials .testimonial-container {
    padding-inline: 15px;
  }
}
@media screen and (max-width: 23.4375em) {
  .testimonials .testimonial-container {
    padding-inline: 10px;
  }
}
.testimonials .section-title {
  font-size: var(--fs-h2);
  text-align: center;
  font-weight: 800;
  line-height: 1.4;
  color: var(--primary-text-color);
  margin-bottom: 60px;
}
.testimonials .testimonials__scroll-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.testimonials .testimonials__scroll {
  display: flex;
  gap: 40px;
  width: -moz-max-content;
  width: max-content;
  padding-block: 10px;
  position: relative;
  z-index: 1;
  animation: marquee 25s linear infinite;
}
.testimonials .testimonials__scroll:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.testimonials .testimonial-item {
  text-align: center;
  max-width: 450px;
}
.testimonials .testimonial-card {
  background-color: var(--secondary-bg-color);
  border: 1px solid rgba(0, 0, 0, 0.185);
  padding: 40px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px #f0e4d1;
  transition: 0.3s ease;
}
.testimonials .testimonial-title {
  font-size: calc(var(--fs-body) + 3px);
  font-weight: 600;
  margin-bottom: 15px;
}
.testimonials .testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}
.testimonials .testimonial-profile {
  margin-top: 30px;
}
.testimonials .testimonial-profile .profile-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 12px;
}
.testimonials .testimonial-profile .profile-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.testimonials .testimonial-profile .profile-role {
  font-size: 15px;
  color: #777;
}

.footer {
  background-color: var(--tertiary-bg-color);
  padding: 30px;
}
@media screen and (min-width: 64.0625em) {
  .footer {
    padding: 0 !important;
    padding-top: 50px;
  }
}
@media screen and (min-width: 90.0625em) {
  .footer {
    padding: 0 !important;
    padding: 0px;
  }
}
.footer .footer__upper {
  text-align: center;
  display: grid;
  place-content: center;
}
@media screen and (min-width: 64.0625em) {
  .footer .footer__upper {
    padding: 0 !important;
    padding-top: 40px !important;
  }
}
@media screen and (min-width: 90.0625em) {
  .footer .footer__upper {
    padding: 0 !important;
    padding-block: 40px !important;
  }
}
.footer .footer__upper .footer__content-heading {
  color: var(--secondary-text-color);
}
@media screen and (min-width: 90.0625em) {
  .footer .footer__upper .footer__content-heading {
    padding: 0 !important;
    font-size: var(--fs-h1);
    padding-block: 40px;
  }
}
.footer .footer__upper .footer__content-heading span {
  color: var(--primary-accent-color);
}
.footer .footer__upper .footer__link {
  text-decoration: none;
  color: var(--primary-text-color);
  background-color: var(--primary-accent-color);
  padding: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  justify-self: center;
  margin-block: 15px;
}
.footer .footer__lower {
  padding-block: 5px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
  color: var(--secondary-text-color);
  font-size: 12px;
  gap: 5px;
  border-top: 2px solid rgba(255, 255, 255, 0.432);
}
@media screen and (min-width: 64.0625em) {
  .footer .footer__lower {
    padding: 0 !important;
    flex-direction: row;
    gap: 20px;
    margin-top: 40px;
  }
}
@media screen and (min-width: 90.0625em) {
  .footer .footer__lower {
    padding: 0 !important;
    flex-direction: row;
    gap: 20px;
    margin-top: 40px;
  }
}
.footer .footer__lower {
  /* @include util.breakpoint-down(lg-phones) {
  	gap: 0px !important;
  } */
}
.footer .footer__lower_para {
  font-size: var(--fs-small);
  color: var(--secondary-text-color);
}
@media screen and (min-width: 64.0625em) {
  .footer .footer__lower_para {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
}
.footer .footer__lower a {
  margin-block: 20px;
  margin-inline: 10px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 50%;
  display: inline-block;
  padding: 7px;
  background-color: #2d2a2a;
}
.footer .footer__lower a img {
  width: 20px;
  height: auto;
}

.desktop-login-view {
  display: none;
  /* @include util.breakpoint-up(sm-lapdesks) {
  	display: block;
  	grid-column: span 7;
  	background-color: var(--primary-accent-color);
  	overflow: hidden;
  	border: var(--main-border);
  	border-left: none;
  	border-width: 2px;
  	border-radius: 0 5px 5px 0;

  	img {
  		width: 100%;
  		height: auto;
  		object-fit: cover;
  		image-rendering: crisp-edges;
  	}
  } */
}

/* .login-form form#login_form {
	@include util.breakpoint-up(sm-lapdesks) {
		border-radius: 5px 0 0 5px;
	}
} */
.login-form, .signup-form {
  display: grid;
  visibility: hidden;
  background-color: white;
  width: 100vw;
  height: 100svh;
  height: 100vh;
  position: fixed;
  top: -200%;
  left: 0;
  padding: clamp(2rem, 5vw, 3rem);
  transition: allow-discrete 500ms cubic-bezier(0.83, 0, 0.17, 1);
}
@media screen and (max-width: 23.4375em) {
  .login-form, .signup-form {
    overflow-y: scroll;
  }
}
@media screen and (min-width: 37.5625em) {
  .login-form, .signup-form {
    padding: 0 !important;
    grid-template-columns: 1fr repeat(6, 100px) 1fr;
  }
}
@media screen and (min-width: 64.0625em) {
  .login-form, .signup-form {
    padding: 0 !important;
    grid-template-columns: 1fr repeat(6, 100px) 1fr;
  }
}
.login-form, .signup-form {
  /* @include util.breakpoint-up(sm-lapdesks) {
  	grid-template-columns: 1fr repeat(13, 100px) 1fr;
  } */
}
.login-form form, .signup-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 20px;
  width: 100%;
}
@media screen and (min-width: 37.5625em) {
  .login-form form, .signup-form form {
    padding: 0 !important;
    padding: 2rem !important;
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.096);
    border-radius: 10px;
    border: 2px solid #3d3d3d;
    grid-column: 3/7;
  }
}
@media screen and (min-width: 48.0625em) {
  .login-form form, .signup-form form {
    padding: 50px !important;
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 64.0625em) {
  .login-form form, .signup-form form {
    padding: 0 !important;
    position: relative;
    grid-column: 3/7;
    align-content: center;
    justify-content: center;
    padding: var(--space-md) !important;
    border: 2px solid #3d3d3d;
  }
}
.login-form form .close-btn, .login-form form .signup-form .close-btn-signup, .signup-form form .close-btn, .signup-form form .close-btn-signup {
  position: absolute;
  background-color: var(--primary-accent-color);
  border: var(--main-border);
  border-width: 2px;
  border-radius: 5px;
  padding: 1;
  top: 20px;
  right: 5%;
  cursor: pointer;
  width: 30px;
  height: auto;
}
@media screen and (min-width: 64.0625em) {
  .login-form form .close-btn, .login-form form .signup-form .close-btn-signup, .signup-form form .close-btn, .signup-form form .close-btn-signup {
    padding: 0 !important;
    position: absolute;
  }
}
.login-form form .login-heading, .signup-form form .login-heading {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
@media screen and (min-width: 64.0625em) {
  .login-form form .login-heading, .signup-form form .login-heading {
    padding: 0 !important;
  }
}
.login-form form .login-heading .form-logo, .signup-form form .login-heading .form-logo {
  margin-top: 5px;
  display: block;
}
.login-form form .input-fields, .signup-form form .input-fields {
  display: grid;
  gap: 1rem;
  width: inherit;
  margin-block-end: 20px;
  /* 	label {
  	margin-bottom: 2px;
  	font-weight: 500;
  	font-size: 14px;
  	margin-top: 10px;
  } */
}
.login-form form .input-fields input, .signup-form form .input-fields input {
  padding-left: 15px;
  border: 2px solid #3d3d3d;
  border-radius: 5px;
  font-size: 16px;
  height: 56px;
  outline: none;
  background-color: white;
}
.login-form form .input-fields input:-webkit-autofill, .signup-form form .input-fields input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}
.login-form form .input-fields input::-moz-placeholder, .signup-form form .input-fields input::-moz-placeholder {
  color: rgba(122, 122, 122, 0.4196078431);
}
.login-form form .input-fields input::placeholder, .signup-form form .input-fields input::placeholder {
  color: rgba(122, 122, 122, 0.4196078431);
}
.login-form form .input-fields input[type=email]:focus, .signup-form form .input-fields input[type=email]:focus,
.login-form form .input-fields input[type=password]:focus,
.signup-form form .input-fields input[type=password]:focus {
  border: 2px solid var(--primary-accent-color);
}
.login-form form .input-fields .forgot-password-btn, .signup-form form .input-fields .forgot-password-btn {
  justify-self: end;
  text-decoration: none;
  color: var(--primary-accent-color);
}
.login-form form .input-fields .login-btn, .signup-form form .input-fields .login-btn, .signup-form form#signup_form .input-fields .signup-btn {
  background-color: var(--primary-accent-color);
  color: var(--primary-text-color);
  text-transform: uppercase;
  font-weight: 900;
  border-radius: 5px;
  height: 56px;
  border: none;
  border: var(--main-border);
  border-width: 2px;
  cursor: pointer;
}
.login-form form .input-fields .no-acc-text, .signup-form form .input-fields .no-acc-text, .signup-form form#signup_form .input-fields .have-acc {
  justify-self: center;
}
.login-form form .input-fields .no-acc-text .sign-up-btn, .signup-form form .input-fields .no-acc-text .sign-up-btn, .signup-form form#signup_form .input-fields .have-acc .sign-up-btn {
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-accent-color);
}
.login-form form .sso-container, .signup-form form .sso-container {
  width: 100%;
  background-color: #fff6d8;
  border-radius: 5px;
}
.login-form form .sso-container a, .signup-form form .sso-container a {
  display: flex;
  align-items: center;
  justify-content: baseline;
  text-decoration: none;
  width: 100%;
  color: var(--primary-text-color) !important;
  border: 2px solid #3d3d3d;
  padding: 12px 17.5px;
  border-radius: 5px;
}
.login-form form .sso-container a img, .signup-form form .sso-container a img {
  width: 30px;
  height: auto;
}
.login-form form .sso-container a .sso-text, .signup-form form .sso-container a .sso-text {
  font-weight: 900;
  margin: auto;
}
.login-form form .or-divider, .signup-form form .or-divider {
  text-align: center;
  width: 100%;
  border-bottom: 0.01px solid #c2c2c2;
  line-height: 0.1em;
  margin-block: 20px;
}
.login-form form .or-divider span, .signup-form form .or-divider span {
  background-color: white;
  font-weight: 500;
  padding-inline: 15px;
}

.login-form.show, .show.signup-form {
  display: block;
  place-content: center;
  visibility: visible;
  top: 0;
}
@media screen and (min-width: 37.5625em) {
  .login-form.show, .show.signup-form {
    padding: 0 !important;
    display: grid;
  }
}
@media screen and (min-width: 64.0625em) {
  .login-form.show, .show.signup-form {
    padding: 0 !important;
    display: grid;
  }
}

@starting-style {
  .login-form.show, .show.signup-form {
    top: -200%;
  }
}
/* .signup-form {
	position: fixed;
	z-index: 1;
	height: 100vh;
	width: 100%;
	background-color: white;
	top: 0;
	left: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	#signup_form {
		box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.096);
		border-radius: 10px;
		border: 2px solid #3d3d3d;
		width: max-content;
		position: relative;

		.close-btn-signup {
			@extend .close-btn;
			position: absolute;
			right: 3%;


		}

		.signup-heading {
			font-size: calc(var(--fs-h3) - 10px);
		}
	}

	.input-fields {
		.input-container {
		}
	}
} */
.signup-form.show {
  visibility: visible;
  place-content: center;
  top: 0;
}
@media screen and (min-width: 37.5625em) {
  .signup-form.show {
    padding: 0 !important;
    display: grid;
  }
}
@media screen and (min-width: 64.0625em) {
  .signup-form.show {
    padding: 0 !important;
    display: grid;
  }
}

@starting-style {
  .signup-form.show {
    top: -200%;
  }
}
.desktop-signup-view {
  display: none;
  /* @include util.breakpoint-up(sm-lapdesks) {
  	display: block;
  	background-color: var(--primary-accent-color);
  	overflow: hidden;
  	border: var(--main-border);
  	border-left: none;
  	border-width: 2px;
  	border-radius: 0 5px 5px 0;
  	height: 720px;

  	img {
  		width: 100%;
  		height: auto;
  		object-fit: cover;
  		image-rendering: crisp-edges;
  	}
  } */
}

/* .signup-form form#signup_form {
	@include util.breakpoint-up(sm-lapdesks) {
		border-radius: 5px 0 0 5px;
	}
} */
.signup-form {
  top: -200%;
  left: 0;
  visibility: hidden;
}
@media screen and (max-width: 23.4375em) {
  .signup-form {
    padding: 18px !important;
  }
}
@media screen and (min-width: 37.5625em) {
  .signup-form {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (min-width: 48.0625em) {
  .signup-form {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (min-width: 64.0625em) {
  .signup-form {
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}
.signup-form form#signup_form {
  height: 45rem !important;
  /* 	max-width: auto; */
  /* max-width: 200px; */
}
@media screen and (min-width: 37.5625em) {
  .signup-form form#signup_form {
    padding: 0 !important;
    padding: 40px 33px !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
}
@media screen and (min-width: 48.0625em) {
  .signup-form form#signup_form {
    padding: 0 !important;
    padding: 40px 33px !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
}
@media screen and (min-width: 64.0625em) {
  .signup-form form#signup_form {
    padding: 0 !important;
    padding: 40px 33px !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
}
.signup-form form#signup_form .signup-heading {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.signup-form form#signup_form .signup-heading .form-logo {
  width: 100px;
  height: auto;
}
.signup-form form#signup_form .input-fields {
  display: grid;
  grid-auto-rows: 50px;
  place-content: center;
  grid-template-areas: "fn fn ln ln" "sx no no no" "em em em em" "pa pa pa pa" "cp cp cp cp" "sn sn sn sn";
}
@media screen and (min-width: 37.5625em) {
  .signup-form form#signup_form .input-fields {
    grid-auto-columns: 80px;
    /* grid-auto-rows: 50px;
    gap: 15px; */
  }
}
@media screen and (max-width: 23.4375em) {
  .signup-form form#signup_form .input-fields {
    grid-auto-rows: 50px;
    gap: 15px;
  }
}
.signup-form form#signup_form .input-fields .input-container {
  height: 100%;
  position: relative;
}
@media screen and (max-width: 23.4375em) {
  .signup-form form#signup_form .input-fields .input-container {
    height: 100%;
  }
}
.signup-form form#signup_form .input-fields .input-container .invalid-feedback {
  position: absolute;
  font-size: 8px;
  bottom: -10%;
  left: 5%;
  font-size: 9px;
  background-color: white;
  width: auto;
  font-weight: 900;
  padding-inline: 5px;
  white-space: nowrap;
}
.signup-form form#signup_form .input-fields .input-container input {
  width: 100%;
  height: 100%;
  background-color: white !important;
}
.signup-form form#signup_form .input-fields .input-container input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}
.signup-form form#signup_form .input-fields .input-container input.invalid-field {
  border: 2px solid rgb(245, 69, 69);
}
.signup-form form#signup_form .input-fields .input-container input.invalid-field::-moz-placeholder {
  color: rgb(255, 0, 0);
  opacity: 0.3;
}
.signup-form form#signup_form .input-fields .input-container input.invalid-field::placeholder {
  color: rgb(255, 0, 0);
  opacity: 0.3;
}
.signup-form form#signup_form .input-fields .input-container input:focus {
  border: 2px solid var(--primary-accent-color) !important;
}
.signup-form form#signup_form .input-fields .fn-container {
  grid-area: fn;
}
.signup-form form#signup_form .input-fields .fn-container .invalid-feedback {
  font-size: 8px;
}
.signup-form form#signup_form .input-fields .ln-container {
  grid-area: ln;
}
.signup-form form#signup_form .input-fields .ln-container .invalid-feedback {
  font-size: 8px;
}
.signup-form form#signup_form .input-fields select#nameSuffix {
  grid-area: sx;
  border: 2px solid #3d3d3d;
  border-radius: 5px;
  padding-inline: 10px;
  background-color: white;
  height: 100%;
  width: 100%;
  font-weight: 500;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.signup-form form#signup_form .input-fields select#nameSuffix:focus {
  border: 2px solid var(--primary-accent-color);
}
.signup-form form#signup_form .input-fields .number-container {
  grid-area: no;
}
.signup-form form#signup_form .input-fields .email-container {
  grid-area: em;
}
.signup-form form#signup_form .input-fields .password-container {
  grid-area: pa;
}
.signup-form form#signup_form .input-fields .confirmpass-container {
  grid-area: cp;
}
.signup-form form#signup_form .input-fields .password-container #showhide-pass-btn,
.signup-form form#signup_form .input-fields .confirmpass-container #showhide-pass-btn {
  position: absolute;
  top: 25%;
  right: 10px;
  font-size: 25px;
  opacity: 0.9;
  cursor: pointer;
}
.signup-form form#signup_form .input-fields .signup-btn {
  margin-top: 5px;
  grid-area: sn;
}
.signup-form form#signup_form .have-acc {
  margin-top: 5px;
  text-align: center;
}
.signup-form form#signup_form .have-acc .log-in-btn {
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-accent-color);
}

.swal2-popup.swal2-modal.swal2-icon-error.swal2-show {
  border: var(--main-border) !important;
  border-radius: 5px !important;
}
.swal2-popup.swal2-modal.swal2-icon-error.swal2-show .swal2-actions .swal2-confirm {
  background-color: var(--primary-accent-color) !important;
  color: var(--primary-text-color) !important;
  border: var(--main-border) !important;
}/*# sourceMappingURL=login.css.map */