/*

0   ->   600px :  Phone
600 ->   900px :  Tablet Portrait
900 ->   1200px:  Desktop

[1200px -> 1800px: Is where our design currently apply]

1800+: Big Desktop

$breakpoint argument choices

- phone
- tab-port
- tab-land
- big-desktop


ORDER: Base + Typography > General layout + grid > Page Layout + components
*/
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@200;300;400;500;600;700;800&family=DM+Serif+Display&display=swap");
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.rotate {
  animation: rotation 30s linear infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.scale-x1 {
  transition: all 0.3s;
}
.scale-x1:hover {
  transform: scale(1.05);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #07192c;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #07192c;
}

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

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
}
@media (max-width: 56.25em) {
  body {
    padding: 0;
  }
}

input,
select {
  font-family: inherit;
}

input[type=password]:not(:placeholder-shown) {
  font: small-caption;
  font-size: 1.5rem;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #333;
}

.heading-primary {
  display: inline-block;
  color: #fefefe;
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.2;
}
@media (max-width: 56.25em) {
  .heading-primary {
    font-size: 4.5rem;
  }
}
.heading-primary span {
  color: #d02536;
}
.heading-paragraph {
  color: #fefefe;
  font-size: 1.65rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  line-height: 1.5;
}
@media (max-width: 56.25em) {
  .heading-paragraph {
    font-size: 2rem;
  }
}
.heading-paragraph-dark {
  color: rgba(51, 51, 51, 0.9);
}
.heading-paragraph span {
  color: #d02536;
}
.heading-secondary {
  display: block;
  color: #07192c;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1.3;
}
@media (max-width: 56.25em) {
  .heading-secondary {
    font-size: 3.5rem;
  }
}
.heading-secondary-light {
  color: #fefefe;
}
.heading-secondary span {
  font-weight: 700;
  color: #ec5a25;
}
.heading-tertiary {
  display: block;
  position: relative;
  color: #07192c;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 1.3;
}
@media (max-width: 56.25em) {
  .heading-tertiary {
    font-size: 2.5rem;
  }
}
.heading-tertiary-light {
  color: #fefefe;
}
.heading-tertiary span {
  font-weight: 700;
  color: #103256;
}

.paragraph {
  color: rgba(1, 2, 10, 0.8);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  background-color: rgba(132, 220, 207, 0.35);
  border: 1px dotted #07192c;
  padding: 1.5rem;
  line-height: 1.9;
}
.paragraph .gg-close {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 40px;
}
.paragraph .gg-close::after,
.paragraph .gg-close::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 5px;
  top: 8px;
  left: 1px;
}
.paragraph .gg-close::after {
  transform: rotate(-45deg);
}
.paragraph i {
  color: red;
  background-color: #e0d9d9;
  border-radius: 50%;
  padding: 3px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-left: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 56.25em) {
  .paragraph {
    font-size: 1.75rem;
  }
}
.paragraph-light {
  color: #fefefe;
}

.u-center-text {
  text-align: center !important;
}

.u-left-text {
  text-align: left !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}
@media (max-width: 56.25em) {
  .u-margin-bottom-medium {
    margin-bottom: 3rem !important;
  }
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}
@media (max-width: 56.25em) {
  .u-margin-bottom-big {
    margin-bottom: 5rem !important;
  }
}

.u-margin-top-small {
  margin-top: 4rem !important;
}
@media (max-width: 56.25em) {
  .u-margin-top-small {
    margin-top: 3rem !important;
  }
}

.u-margin-top-big {
  margin-top: 8rem !important;
}

.u-margin-top-medium {
  margin-top: 4rem !important;
}

.u-margin-top-huge {
  margin-top: 10rem !important;
}

.u-margin-right-small {
  margin-right: 2rem !important;
}
@media (max-width: 56.25em) {
  .u-margin-right-small {
    margin-right: 3rem !important;
  }
}

.u-margin-left-small {
  padding-left: 2rem !important;
}
@media (max-width: 56.25em) {
  .u-margin-left-small {
    padding-left: 3rem !important;
  }
}

.u-padding-2 {
  padding: 2rem !important;
}

.u-auto-center {
  margin: 0 auto;
}

.u-bg-light {
  background-color: rgba(7, 25, 44, 0.35) !important;
}

.u-bg-dark {
  background-color: rgba(7, 25, 44, 0.95) !important;
}

.u-default-border-radius {
  border-radius: 3px;
}

.u-shadow-light {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

.u-shadow-light-2 {
  box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.5);
}

.u-font-weight-300 {
  font-weight: 300 !important;
}

.u-font-weight-400 {
  font-weight: 400 !important;
}

.u-font-weight-500 {
  font-weight: 500 !important;
}

.u-fontsize-2-5 {
  font-size: 2.5rem;
}

.alert-box {
  margin: 2rem;
}
@media (max-width: 56.25em) {
  .alert-box {
    margin: 1.5rem 1rem;
  }
}

.alert {
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 56.25em) {
  .alert {
    font-size: 2rem;
  }
}
.alert__success {
  background-color: rgba(126, 239, 104, 0.05);
  color: rgb(87, 216, 62);
  border: 1px solid rgba(126, 239, 104, 0.6);
}
.alert__warning {
  background-color: rgba(253, 38, 38, 0.05);
  color: #fd2626;
  border: 1px solid rgba(253, 38, 38, 0.6);
}
.alert__error {
  background-color: rgba(253, 38, 38, 0.05);
  color: #fd2626;
  border: 1px solid rgba(253, 38, 38, 0.6);
}

.btn, .btn:link, .btn:visited {
  font-family: inherit;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.5rem 4rem;
  display: inline-block;
  transition: all 0.2s;
  position: relative;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.15rem;
  outline: none;
  border: none;
  border-radius: 0.35rem;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048);
  margin: 3rem 0;
  cursor: pointer;
}
@media (max-width: 56.25em) {
  .btn, .btn:link, .btn:visited {
    font-size: 1.5rem;
    padding: 1.5rem 4rem;
  }
}
.btn-white {
  color: #fefefe;
  border: 2px solid #fefefe;
}
.btn-white:hover {
  color: #d02536;
}
.btn-dark {
  color: #07192c;
  border: 2px solid #07192c;
}
.btn-dark:hover {
  background-color: rgba(7, 25, 44, 0.8);
  color: #fefefe;
}
.btn-fill-dark {
  color: #fefefe;
  background-image: linear-gradient(to right bottom, #07192c, #fd2626);
}
.btn-fill-light {
  color: #07192c;
  background-image: linear-gradient(135deg, #d02536, #d02536);
}
.btn-fill-primary {
  color: #d02536;
  background-image: linear-gradient(135deg, #07192c, #07192c);
}
.btn-youtube {
  color: #fefefe !important;
  background-image: linear-gradient(135deg, #d02536, #d02536) !important;
}
.btn-outline-secondary {
  background: transparent;
  color: #fefefe;
  border: 2px solid #d02536;
}
.btn-form {
  background-color: #01020a;
  color: #fefefe;
  border: none;
  width: 100%;
  padding: 2rem 1.5rem;
}
@media (max-width: 56.25em) {
  .btn-form {
    padding: 2.5rem 2.5rem;
  }
}
.btn-form:hover {
  background-color: rgba(1, 2, 10, 0.9);
}
.btn__pill {
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: capitalize;
  border-radius: 1rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  text-decoration: none;
}
@media (max-width: 56.25em) {
  .btn__pill {
    padding: 1.5rem 2.5rem;
    font-size: 1.4rem;
  }
}
.btn__pill-light {
  background-color: #d02536;
}
.btn__pill-light:active {
  background-color: rgba(208, 37, 54, 0.7);
}
.btn__pill-light a {
  text-decoration: none;
  color: #01020a;
}
.btn__pill-dark {
  background-color: #01020a;
  color: #fefefe;
}

.btn-sm, .btn-sm:link, .btn-sm:visited {
  font-family: inherit;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.5rem 4rem;
  transition: all 0.1s;
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.15rem;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 1rem 0;
  cursor: pointer;
}
@media (max-width: 56.25em) {
  .btn-sm, .btn-sm:link, .btn-sm:visited {
    font-size: 1.6rem;
    padding: 2rem 4rem;
  }
}
.btn-sm-light {
  color: #fefefe;
  background-color: #d02536;
}
.btn-icon {
  width: 2rem;
  height: 2rem;
}

.login-with-google-btn {
  transition: background-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  border: 2px solid rgb(70, 122, 235);
  color: #242323;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
}
.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active {
  background-color: #eeeeee;
}
.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}
.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.form {
  flex: 1 1 0;
  margin: 2rem 5rem;
}
@media (max-width: 56.25em) {
  .form {
    flex: 1 0 100%;
    margin: 2rem 1rem;
  }
}
.form__group {
  position: relative;
  margin: 1.5rem auto;
  padding: 1rem 0;
  width: 100%;
}
.form__text {
  font-size: 1.5rem;
  font-weight: 500;
  color: #01020a;
}
@media (max-width: 56.25em) {
  .form__text {
    font-size: 2rem;
  }
}
.form__text-link {
  color: #fd2626;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.form__text-link:active, .form__text-link:hover {
  color: #07192c;
}
.form__input {
  outline: none;
  padding: 2rem 1.5rem;
  width: 100%;
  border-radius: 0.2rem;
  background-color: #fefefe;
  border: 2px solid #333333;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  transition: border 0.2s;
}
@media (max-width: 56.25em) {
  .form__input {
    font-size: 2rem;
  }
}
.form__input::-webkit-input-placeholder {
  font-weight: 300;
  font-size: 1.5rem;
}
@media (max-width: 56.25em) {
  .form__input::-webkit-input-placeholder {
    font-size: 1.5rem;
  }
}
.form__input:focus, .form__input:focus-visible {
  border: 2px solid #2daf13;
}
.form__input:not(:placeholder-shown):invalid {
  border: 2px solid #fd2626;
}
.form__password-showBtn {
  position: absolute;
  top: 35%;
  right: 5%;
  font-size: 1.55rem;
  font-weight: 300;
  color: rgba(51, 51, 51, 0.65);
  border-radius: 3px;
  cursor: pointer;
}
.form__password-showBtn:active {
  color: #333333;
}

.email {
  background-color: rgba(132, 220, 207, 0.35);
  border: 1px dotted #07192c;
  padding: 1.5rem;
}
.email h3 {
  color: rgba(1, 2, 10, 0.9);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 1.9;
}
@media (max-width: 56.25em) {
  .email h3 {
    font-size: 2rem;
  }
}
.email p {
  color: #fefefe;
  background-color: #d02536;
  width: max-content;
  font-size: 1.25rem;
  font-weight: 400;
  padding: 0.75rem 2rem;
  margin: 0.75rem 0;
  border-radius: 2.35rem;
}
@media (max-width: 56.25em) {
  .email p {
    font-size: 1.25rem;
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5rem;
}

.container--flex {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

/*# sourceMappingURL=styles.css.map */


/* Styling the input element */
.accessPass {
  width: 250px; /* Set the width of the input field */
  padding: 10px; /* Add some padding inside the input field */
  border: 2px solid #393636; /* Set the border color and width */
  border-radius: 5px; /* Add rounded corners */
  background-color: #f1f1f1; /* Set the background color */
  font-size: 16px; /* Set the font size */
  color: #333; /* Set the text color */
}

/* Optional: Styling the input on focus */
.accessPass:focus {
  border-color: #393636; /* Change the border color on focus */
  outline: none; /* Remove the default focus outline */
  background-color: #fff; /* Change the background color on focus */
}