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

@font-face {
  font-family: "Allura";
  font-weight: 400;
  src: url("assets/fonts/allura-regular-webfont.woff2") format("woff2"),
    url("assets/fonts/allura-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Cormorant Upright";
  font-weight: 400;
  src: url("assets/fonts/cormorantupright-regular-webfont.woff2")
      format("woff2"),
    url("assets/fonts/cormorantupright-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Quintessential";
  font-weight: 400;
  src: url("assets/fonts/quintessential-regular-webfont.woff2") format("woff2"),
    url("assets/fonts/quintessential-regular-webfont.woff") format("woff");
}

html {
  /* -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none; */
  font-size: 62.5%;
}

body {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* min-height: 100vh; */
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
  /* background: #0b1d2a; */
}

.aWr6,
.aWr6:hover {
  text-decoration: none;
  outline: none;
  cursor: default;
  color: #333333;
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
}

.aWr7,
.aWr7:hover {
  text-decoration: none;
  outline: none;
  cursor: default;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.4rem;
  font-family: "Cormorant Upright", serif;
}

.wr1 {
  height: 100vh;
  height: 100svh;
  background: #1f1f1f;
  display: grid;
  grid-template-columns: [col] 50% [col] 50%;
  grid-template-rows: [row] 100%;
}

.wr1_logoAndCompany {
  grid-column: col;
  grid-row: row;
  /* width: 100%;
  height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}

.wr1_company {
  font-size: 3.8rem; /* 38px */
  font-family: "Allura", cursive;
  background-image: -webkit-linear-gradient(
    217deg,
    #9696ff 20%,
    #6666ff,
    #9696ff 81%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  padding-top: 0.3em;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* padding-top: 10px; */

  /* border: 1px solid green; */
}

/* wr1 line */
.wr1_line {
  border-left: 2px solid #6666ff;
  height: 52%;
  position: absolute;
  left: 49%;
  top: 24%;
}

.wr1_textAndButtons {
  grid-column: col 2;
  grid-row: row;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid green; */
}

.wr1_text1 {
  font-size: 3rem;
  font-family: "Allura", cursive;
  background-image: -webkit-linear-gradient(
    10deg,
    #9494ff 0%,
    #6666ff 50%,
    #8080ff 60%,
    #6666ff 65%,
    #9494ff 73%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-bottom: 0.1em;
}

.wr1_text2 {
  font-size: 2.4rem;
  font-family: "Cormorant Upright", serif;
  background-image: -webkit-linear-gradient(
    10deg,
    #9494ff 0%,
    #6666ff 50%,
    #8080ff 60%,
    #6666ff 65%,
    #9494ff 73%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-bottom: 0.3em;
}

.wr1_buttons {
  /* display: flex;
  justify-content: center;
  text-align: center;
  color: white; */

  padding-top: 1.6em;
  padding-bottom: 2.6em;
  /* border: 1px solid blue; */
}

.insideBorder {
  padding: 1px 44px;
  border: 1px solid #6600ff;
  border-radius: 20px;
}

.btnS {
  /* width: 80px; */
  width: 160px;
  height: 36px;
  font-size: 1.95rem;
  font-family: "Quintessential", cursive;
  color: #8282ff;
  border-radius: 20px;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6600ff;

  cursor: pointer;

  margin-bottom: 1.2em;
  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

.btnE {
  width: 160px;
  height: 38px;
  font-size: 2.2rem;
  font-family: "Cormorant Upright", serif;
  color: #8282ff;
  border: none;
  border-radius: 20px;
  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);
  cursor: pointer;

  /* border: 1px solid red; */
}

.wr2 {
  background: #1f1f1f;
  /* background: black; */
  /* display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] 1vh [row] 15vh [row] auto [row] 20vh; */
}

.wr2_logo {
  text-align: center;
  padding-top: 5px;
  /* padding-bottom: 1px; */
  /* padding-bottom: 5px; */
  /* border: 1px solid red; */
}

.wr2_company {
  font-size: 3.8rem; /* 38px */
  font-family: "Allura", cursive;
  background-image: -webkit-linear-gradient(
    10deg,
    #9696ff 33%,
    #6666ff,
    #9696ff 69%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* padding-top: 10px; */

  /* border: 1px solid green; */
}

.wr2_dubaiAndText {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
  /* border: 1px solid green; */
}

.wr2_text1 {
  font-family: "Allura", cursive;
  font-size: 3rem; /* 30px */
  color: #f5f6f9;
  margin-right: 0.1em;
  padding-bottom: 0.3em;
}

.wr2_text2 {
  font-family: "Allura", cursive;
  font-size: 3rem; /* 30px */
  background-image: -webkit-linear-gradient(
    10deg,
    #9494ff 0%,
    #6666ff 50%,
    #8080ff 60%,
    #6666ff 65%,
    #9494ff 73%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.3em;
  /* border: 1px solid red; */
}

.wr2_sydney {
  display: flex;
  align-items: center;
  justify-content: left;
  padding-bottom: 10px;
  /* border: 1px solid maroon; */
}

.wr3 {
  background: #1f1f1f;
  padding-bottom: 10px;
}

.wr3_bot {
  text-align: center;
  padding-top: 5px;
  filter: drop-shadow(0 0 0.75rem #65659a);
}

.wr3_line_container {
  /* width: 50%;
  height: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid maroon; */
}

/* line */
hr {
  width: 35%;
  height: 2px;
  /* background: linear-gradient(to right, blue, #290066); */
  background: linear-gradient(to right, #9696ff, #6666ff);
  /* background-color: #004eff; */
  border: none;
}

.wr3_house {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  /* border: 1px solid maroon; */
}

.wr3_houseInterior2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  /* border: 1px solid maroon; */
}

.wr3_houseInterior1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  /* border: 1px solid maroon; */
}

.wr4 {
  /* height: 70vh; */
  background: linear-gradient(to bottom, #1f1f1f, #f5f6f9);
}

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

.wr4_img img {
  padding-bottom: 0.8em;
}
/* wr5 end */

.wr5 {
  background-color: #f5f6f9;
}

.wr5_header {
  padding-left: 2.1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.wr5_subheaderTop {
  color: #6600ff;
  /* padding-bottom: 0.3em; */
  font-size: 2.8rem;
  font-family: "Allura", cursive;
}

.wr5_subheaderBot {
  color: black;
  /* padding-bottom: 0.3em; */
  padding-bottom: 0.5em;
  font-size: 2.36rem;
  font-family: "Cormorant Upright", serif;
}

/* wr5 st */
.wr5_line_container {
  /* width: 50%;
  height: 100%; */
  /* width: 100%; */
  display: flex;
  align-items: center;
  justify-content: left;
  /* border: 1px solid maroon; */
}

/* wr5 line */
.wr5_hr {
  width: 30%;
  height: 2px;
  /* background: linear-gradient(to right, blue, #290066); */
  background: #6600ff;
  /* background-color: #004eff; */
  border: none;
}

.wr5_text1 {
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 1em;
  font-size: 1.7rem;
}

.wr5_text1 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 1.5em; /* between paragraphs */
}

.wr5_text2 {
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-bottom: 1em;
  font-size: 1.7rem;
}

.wr5_text2 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 1.5em; /* between paragraphs */
}

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

.wr5_img img {
  padding-bottom: 0.8em;
}
/* wr5 end */

/* wr6 1 col 6 rows */
.wr6 {
  /* background-color: white; */
  background-color: #f5f6f9;
  /* width: 100%; */
  /* height: 100vh; */
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] auto [row] auto [row] auto [row] auto [row] auto [row] 15vh;
  /* min-width: 100vw; */
  /* min-height: 100vh; */
}

.wr6_logoAndCompany {
  grid-column: col;
  grid-row: row;
  /* width: 100%;
  height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8em;

  /* border: 1px solid red; */
}

.wr6_company {
  font-size: 3.3rem;
  font-family: "Cormorant Upright", serif;
  background-image: -webkit-linear-gradient(
    217deg,
    #6666ff 25%,
    #6600ff,
    #6666ff 87%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  padding-top: 0.3em;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* border: 1px solid green; */
}

.wr6_line_container {
  grid-column: col;
  grid-row: row 2;
  width: 100%;
  /* width: 50%;
  height: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid maroon; */
}

/* wr6 line */
.wr6_hr {
  width: 70%;
  height: 2px;

  background: linear-gradient(to right, #8e8eff, #6600ff);
  border: none;
}

.wr6_text1 {
  grid-column: col;
  grid-row: row 3;
  /* width: 100%; */
  /* height: 30%; */

  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.4rem;
  font-family: "Cormorant Upright", serif;
}

.wr6_text1 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.8em; /* between paragraphs */
}

.wr6_number {
  text-align: center;
  font-size: 2rem;
  font-family: "Times New Roman", serif;
}

.wr6_button {
  grid-column: col;
  grid-row: row 4;
  /* padding: 1em; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnL {
  width: fit-content;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #9b9bff;
  border-radius: 15px;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6666ff;

  cursor: pointer;
  padding: 0.25em 0.7em;
  /* margin-bottom: 0.5em; */
  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

.copyright {
  grid-column: col;
  grid-row: row 5;
  padding: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.wr6_polWr {
  grid-column: col;
  grid-row: row 6;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 0.75rem #65659a);
}

.wr6_pol {
  /* grid-column: col / span 3;
  grid-row: row / span 2; */
  /* width: 100%; */
  grid-column: col;
  grid-row: row 6;
  width: 100%;
  height: 100%;

  clip-path: polygon(5% 100%, 27% 36%, 89% 0%, 100% 26%, 100% 100%, 0% 100%);

  background: linear-gradient(45deg, #6600ff, #6666ff);
}

/* wr7 st; 1 col 4 rows */
.wr7 {
  height: 100vh;
  height: 100svh;
  background-color: #f5f6f9;
  /* width: 100%; */
  /* height: 100vh; */
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] auto [row] auto [row] auto [row] auto;
  /* min-width: 100vw; */
  /* min-height: 100vh; */
}

.wr7_center {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wr7_logoAndCompany {
  grid-column: col;
  grid-row: row 1;
  /* width: 100%;
  height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}

.wr7_company {
  font-size: 3.3rem;
  font-family: "Cormorant Upright", serif;
  background-image: -webkit-linear-gradient(
    217deg,
    #6666ff 25%,
    #6600ff,
    #6666ff 87%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  padding-top: 0.3em;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* border: 1px solid green; */
}

.wr7_line_container {
  grid-column: col;
  grid-row: row 2;
  width: 100%;
  height: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid maroon; */
}

/* wr7 line */
.wr7_hr {
  width: 70%;
  height: 2px;

  background: linear-gradient(to right, #8e8eff, #6600ff);
  border: none;
}

.wr7_text1 {
  grid-column: col;
  grid-row: row 3;
  /* width: 100%; */
  /* height: 30%; */

  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.4rem;
  font-family: "Cormorant Upright", serif;
}

.wr7_text1 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.8em; /* between paragraphs */
}

.wr7_button {
  grid-column: col;
  grid-row: row 4;
  /* padding: 1em; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnH {
  width: fit-content;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #9b9bff;
  border-radius: 15px;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6666ff;

  cursor: pointer;
  padding: 0.25em 0.7em;
  /* margin-bottom: 0.5em; */
  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

/* wr7 end */

/* wr8 st; 1 col 3 rows */

.wr8 {
  height: 100vh;
  height: 100svh;
  width: 100%;
  background: black;
  display: grid;
  grid-template-columns: [col] 100%;
  grid-template-rows: [row] auto [row] auto [row] auto;
}

.wr8_center,
.wr9_center {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wr8_logoAndCompany {
  grid-column: col;
  grid-row: row;
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.6em;

  /* border: 1px solid red; */
}

.wr8_company,
.wr9_company {
  font-size: 3.3rem;
  font-family: "Cormorant Upright", serif;
  background-image: -webkit-linear-gradient(
    217deg,
    #6666ff 25%,
    #6600ff,
    #6666ff 87%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  padding-top: 0.3em;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* border: 1px solid green; */
}

.wr8_inputsAndButton1 {
  grid-column: col;
  grid-row: row 2;
  width: 100%;
  /* border: 1px solid red; */
  /* padding: 1em; */
}

.wr8_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wr8_wrInput {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* border: 1px solid green; */
}

.wr8_input {
  font-family: "Times New Roman", serif;
  font-size: 1.85rem;
  outline: none;
  border: none;
  border-bottom: 1px solid #707780;
  border-radius: 0;
  background-color: black;
  width: 80%;
  /* height: fit-content; */
  padding-top: 1.5em;
  padding-bottom: 0.3em;
  padding-left: 0.3em;
  color: white;
  /* border: 1px solid blue; */
}

.wr8_input::placeholder {
  opacity: 1;
  /* color: #b8b8bb; */
  color: #a2adba;
}

.wr8_Wrbutton1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2.7em;
}

.wr8_button1,
.wr9_button {
  width: 80%;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #9b9bff;
  border-radius: 10px;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6600ff;

  cursor: pointer;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
  /* margin-bottom: 0.5em; */
  /* filter: drop-shadow(0 0 0.75rem #65659a); */

  /* border: 1px solid green; */
}

.wr8_text1AndButton2 {
  grid-column: col;
  grid-row: row 3;
  /* padding: 1em; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2.4em;
  /* border: 1px solid green; */
}

.wr8_text1 {
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  /* color: lightgray; */
  color: #c1cddc;
  margin-right: 0.7em;
}

.wr8_button2 {
  border: none;
  font-size: 2.21rem;
  font-family: "Times New Roman", serif;
  font-size: 2.72rem;
  font-family: "Cormorant Upright", serif;
  color: #a3a3ff;
  cursor: pointer;
}

/* wr8 end */

/* wr9 st; 1 col 2 rows */

.wr9 {
  height: 100vh;
  height: 100svh;
  width: 100%;
  background: black;
  display: grid;
  grid-template-columns: [col] 100%;
  grid-template-rows: [row] auto [row] auto;
}

.wr9_logoAndCompany {
  grid-column: col;
  grid-row: row;
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding-bottom: 1.6em; */

  /* border: 1px solid red; */
}

/* .wr9_line_container {
  grid-column: col;
  grid-row: row 2;
  width: 100%;
  height: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* wr9 line (transparent to 6600ff to transparent) , use later to beautify */
/* .wr9_hr {
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, black, #6600ff, black);
  border: none;
} */

.wr9_buttons {
  grid-column: col;
  grid-row: row 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.6em;
  /* border: 1px solid blue; */
}

.wr9_wrButton {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3em;
  /* padding-bottom: 2.6em; */
  /* border: 1px solid red; */
  /* padding: 1em; */
}

/* wr9 end */

/* ,.nst napp st */

/* nH st */

.nH {
  height: 100vh;
  height: 100svh;
  background: #1f1f1f;
  display: grid;
  grid-template-columns: [col] 50% [col] 50%;
  grid-template-rows: [row] 100%;
}

.nH_logoAndCompany {
  grid-column: col;
  grid-row: row;
  /* width: 100%;
  height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}

.nH_company {
  font-size: 3.8rem; /* 38px */
  font-family: "Allura", cursive;
  background-image: -webkit-linear-gradient(
    217deg,
    #9696ff 20%,
    #6666ff,
    #9696ff 81%
  );

  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  padding-top: 0.3em;
  padding-left: 0.15em;
  padding-right: 0.15em;

  /* border: 1px solid green; */
}

/* nH line */
.nH_line {
  border-left: 2px solid #6666ff;
  height: 52%;
  position: absolute;
  left: 49%;
  top: 24%;
}

.nH_textAndButtons {
  grid-column: col 2;
  grid-row: row;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 1px solid green; */
}

.nH_text1 {
  font-size: 3rem;
  font-family: "Allura", cursive;
  background-image: -webkit-linear-gradient(
    10deg,
    #9494ff 0%,
    #6666ff 50%,
    #8080ff 60%,
    #6666ff 65%,
    #9494ff 73%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-bottom: 0.1em;
}

.nH_text2 {
  font-size: 2.4rem;
  font-family: "Cormorant Upright", serif;
  background-image: -webkit-linear-gradient(
    10deg,
    #9494ff 0%,
    #6666ff 50%,
    #8080ff 60%,
    #6666ff 65%,
    #9494ff 73%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-bottom: 0.3em;
}

.nH_buttons {
  /* display: flex;
  justify-content: center;
  text-align: center;
  color: white; */

  padding-top: 1.6em;
  padding-bottom: 2.6em;
  /* border: 1px solid blue; */
}

.n_btn {
  width: 160px;
  height: 36px;
  border-radius: 20px;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  color: #8282ff;
  font-size: 1.95rem;
  font-family: "Quintessential", cursive;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6600ff;

  cursor: pointer;

  margin-bottom: 1.2em;
  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

/* nH end */

/* cornflower blue */
.btnCblue {
  width: fit-content;
  border-radius: 20px;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #f5f6f9;

  background: linear-gradient(217deg, transparent, #82a3ff, transparent),
    radial-gradient(circle at bottom left, #3a4973, transparent),
    radial-gradient(circle at top right, #3a4973, transparent);

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #82a3ff;

  padding: 0.25em 2.2em;
  cursor: pointer;

  filter: drop-shadow(0 0 0.75rem #82a3ff);
  /* border: 1px solid green; */
}

/* biol blue */
.btnBblue {
  width: fit-content;
  border-radius: 20px;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #f5f6f9;

  background: linear-gradient(217deg, transparent, #01a2ea, transparent),
    radial-gradient(circle at bottom left, #01508b, transparent),
    radial-gradient(circle at top right, #01508b, transparent);

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #01a2ea;

  padding: 0.25em 2.2em;
  cursor: pointer;

  filter: drop-shadow(0 0 0.75rem #01acf1);
  /* border: 1px solid green; */
}

.btnFmag {
  width: fit-content;
  border-radius: 20px;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #f5f6f9;

  background: linear-gradient(217deg, transparent, #ff00ff, transparent),
    radial-gradient(circle at bottom left, #330033, transparent),
    radial-gradient(circle at top right, #330033, transparent);

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #ff00ff;

  padding: 0.25em 2.2em;
  cursor: pointer;

  filter: drop-shadow(0 0 0.75rem #ff99ff);
  /* border: 1px solid green; */
}

.btnFred {
  width: fit-content;
  border-radius: 20px;
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #f5f6f9;

  background: linear-gradient(217deg, transparent, #dc143c, transparent),
    radial-gradient(circle at bottom left, #37050f, transparent),
    radial-gradient(circle at top right, #37050f, transparent);

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #dc143c;

  padding: 0.25em 2.2em;
  cursor: pointer;

  filter: drop-shadow(0 0 0.75rem #d11339);
  /* border: 1px solid green; */
}

.btnFooter {
  width: fit-content;
  border-radius: 20px;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #9b9bff;

  background: linear-gradient(217deg, transparent, #4ea9e6, transparent),
    radial-gradient(circle at bottom left, #3d84b2, transparent),
    radial-gradient(circle at top right, #3d84b2, transparent);

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #4ea9e6;

  padding: 0.25em 2.2em;
  cursor: pointer;

  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

/* cC st (centeredContent template) ; wrapper 1col 3rows */
.cC {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] 5vh [row] auto [row] 10vh;
  background-color: #1f1f1f;
  /* background-color: #f5f6f9; */
}

.cCTop {
  grid-column: col;
  grid-row: row;
  width: 100%;
  height: 100%;
  /* position: relative; */
  /* width: 100%; */
  /* height: 75%; */
  /* border: 1px solid red; */
}

.cC_line_container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid green; */
}

/* cC hr line (transparent to 6600ff to transparent) */
.cC_hr {
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, black, #6600ff, black);
  border: none;
}

.cC_buttons {
  grid-column: col;
  grid-row: row 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.6em;
  /* border: 1px solid blue; */
}

.cC_wrButton {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3em;
  /* padding-bottom: 2.6em; */
  /* border: 1px solid red; */
  /* padding: 1em; */
}

.cC_button {
  width: 80%;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #9b9bff;
  border-radius: 10px;

  background: linear-gradient(217deg, transparent, #1f004d, transparent),
    radial-gradient(circle at bottom left, #6600ff, transparent),
    radial-gradient(circle at top right, #6600ff, transparent);

  border: 1px solid #6600ff;

  cursor: pointer;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
  /* margin-bottom: 0.5em; */
  /* filter: drop-shadow(0 0 0.75rem #65659a); */

  /* border: 1px solid green; */
}

.cCFooter {
  grid-column: col;
  grid-row: row 3;
  /* text-align: center; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid blue; */
}

/* cC end */

/* ocm st (one col main) ; wrapper 1col 3rows */
.ocm {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] 6vh [row] auto [row] auto;
  background-color: #f5f6f9;
}

.ocmMain {
  grid-column: col / span 3;
  grid-row: row 2;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  height: fit-content;
  align-self: center;
  /* border: 1px solid blue; */
}

.audio {
  padding-top: 0.1em;
}

/* templates st */
/* .polTop2 { */
/* pol top 1 col */
.polTop {
  /* grid-column: col; */
  grid-column: col / span 3;
  grid-row: row;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: polygon(8% 0%, 92% 0%, 62% 100%, 25% 70%);

  background: linear-gradient(45deg, #3d84b2, #4ea9e6, #3d84b2);
  /* border: 1px solid red; */
}

/* hr top 2 cols */
/* .hrTop2 */
/* hr top 1 col */
.hrTop {
  grid-column: col / span 2;
  grid-row: row;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}

/* hr colors */
.hr_blue {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    to right,
    black,
    #01508b,
    #01a2ea,
    #01acf1,
    #01a2ea,
    #01508b,
    black
  );
  /* background: linear-gradient(to right, black, #53b3f2, black); */
  border: none;
}

.hr_Cblue {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    to right,
    black,
    #3a4973,
    #5b72b2,
    #82a3ff,
    #5b72b2,
    #3a4973,
    black
  );
  /* background: linear-gradient(to right, black, #53b3f2, black); */
  border: none;
}

.hr_mag {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    to right,
    black,
    #330033,
    #730073,
    #ff00ff,
    #730073,
    #330033,
    black
  );
  /* background: linear-gradient(to right, black, #53b3f2, black); */
  border: none;
}

.hr_red {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    to right,
    black,
    #420612,
    #8f0d27,
    #dc143c,
    #8f0d27,
    #420612,
    black
  );
  /* background: linear-gradient(to right, black, #53b3f2, black); */
  border: none;
}

/* entertaining / instructions */
.text1 {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
}

.text1 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.3em; /* between paragraphs */
}

/* taught */
.text2 {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.7rem;
}

.text2 p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.3em; /* between paragraphs */
}

/* text related (smaller font) */
.textR {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
}

.textR p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.1em; /* between paragraphs */
}

/* text related smallest (smallest font) */
.textRSmt {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.5rem;
}

.textRSmt p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.1em; /* between paragraphs */
}

/* text significantly smaller (smaller font & smaller line height) */
.textSmr {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
}

.textSmr p {
  line-height: 1.4; /* within paragraph */
  margin-bottom: 0.2em; /* between paragraphs */
}

/* text smallest */
.textSmt {
  padding-left: 0.8em;
  padding-right: 0.8em;
  /* padding-bottom: 1em; */
  font-family: "Times New Roman", serif;
  font-size: 1.5rem;
}

.textSmt p {
  line-height: 1.5; /* within paragraph */
  margin-bottom: 0.3em; /* between paragraphs */
}

.footer {
  grid-column: col / span 3;
  grid-row: row 3;
  display: flex;
  align-items: start;
  justify-content: center;
  /* border: 1px solid blue; */
}

/* templates end */

/* ocm end ; used in: xx ; wrapper 1col 3rows */

/* tcm st (two col main) ; wrapper 2cols 4rows */
.tcm {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 44vw [col] 56vw;
  grid-template-rows: [row] 6vh [row] auto [row] auto [row] auto;

  /* background-color: #1f1f1f; */
  background-color: #f5f6f9;
}

.tcmMainLeft {
  grid-column: col;
  grid-row: row 2;
  height: fit-content;
  align-self: center;
  /* border: 1px solid red; */
}

.tcmMainRight {
  grid-column: col 2;
  grid-row: row 2;
  /* padding: 0.5em; */
  height: fit-content;
  align-self: center;
  text-align: center;

  /* border: 1px solid green; */
}

.tcmMainBot {
  grid-column: col / span 2;
  grid-row: row 3;
  display: flex;
  /* align-items: start; */

  /* padding: 0.5em; */
  /* height: fit-content; */
  align-self: center;
  justify-content: center;
  /* text-align: center; */

  /* border: 1px solid green; */
}

.tcmFooter {
  grid-column: col / span 2;
  grid-row: row 4;
  display: flex;
  align-items: start;
  justify-content: center;
  /* border: 1px solid blue; */
}

/* to do the drop shadow to pol of tcm */
.tcm_polWr {
  grid-column: col / span 2;
  grid-row: row;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 0.75rem #01acf1);
}

/* tcm end ; used in: xx ; wrapper 2cols 4rows */

/* mxm st (max main) ; wrapper 1col 2rows */
.mxm {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] auto [row] auto;
  background-color: #f5f6f9;
}

.mxmMain {
  grid-column: col / span 2;
  grid-row: row;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  height: fit-content;
  align-self: center;
  /* border: 1px solid blue; */
}

.mxmFooter {
  grid-column: col / span 2;
  grid-row: row 2;
  display: flex;
  align-items: start;
  justify-content: center;
  /* border: 1px solid blue; */
}

/* mxm end ; used in: xx ; wrapper 1col 2rows */

/* ocmSmt st ; smaller row1 */
.ocmSmt {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] 3vh [row] auto [row] auto;
  background-color: #f5f6f9;
}
/* ocmSmt end ; smaller row1 */

/* tcmH st (two col main highest image) ; wrapper 2cols 5rows */
.tcmH {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 51vw [col] 49vw;
  grid-template-rows: [row] 5vh [row] auto [row] auto [row] auto [row] auto;

  /* background-color: #1f1f1f; */
  background-color: #f5f6f9;
}

.tcmHMainTop {
  grid-column: col / span 2;
  grid-row: row 2;
  display: flex;
  align-self: center;
  justify-content: center;
  /* border: 1px solid red; */
}

.tcmHMainLeft {
  grid-column: col;
  grid-row: row 3;
  height: fit-content;
  align-self: center;

  /* border: 1px solid green; */
}

.tcmHMainRight {
  grid-column: col 2;
  grid-row: row 3;
  /* padding: 0.5em; */
  height: fit-content;
  align-self: center;
  text-align: center;

  /* border: 1px solid blue; */
}

.tcmHMainBot {
  grid-column: col / span 2;
  grid-row: row 4;
  display: flex;
  /* align-items: start; */

  /* padding: 0.5em; */
  /* height: fit-content; */
  align-self: center;
  justify-content: center;
  /* text-align: center; */

  /* border: 1px solid green; */
}

.tcmHFooter {
  grid-column: col / span 2;
  grid-row: row 5;
  display: flex;
  align-items: start;
  justify-content: center;
  /* border: 1px solid blue; */
}
/* tcmH end ; used in: eiffel ; wrapper 2cols 5rows */

/* onm st (only main) ; wrapper 1col 1row */
.onm {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 100vw;
  grid-template-rows: [row] auto;
  background-color: #f5f6f9;
}

.onmMain {
  grid-column: col / span 2;
  grid-row: row / span 2;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  height: fit-content;
  align-self: center;
  /* border: 1px solid blue; */
}

/* onm end ; used in: xx ; wrapper 1col 1row */

/* prc st (practice section) */

/* btn version 2 (transparent background, border and font same color) */
.btn2 {
  width: fit-content;
  border-radius: 20px;
  /* font-size: 1.95rem;
  font-family: "Quintessential", cursive; */
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  font-size: 2.22rem;
  font-family: "Cormorant Upright", serif;
  color: #3d84b2;
  background: #f5f6f9;

  /* background: linear-gradient(120deg, #6be0e2, #00b3b3); */
  /* background: linear-gradient(to right, black, #6600ff, black); */

  border: 1px solid #3d84b2;

  margin: 0.5em;
  padding: 0.25em 1.4em;
  cursor: pointer;

  /* filter: drop-shadow(0 0 0.75rem #65659a); */
  /* border: 1px solid green; */
}

/* prc message */
.prcM {
  font-size: 1.8rem;
  font-family: "Times New Roman", serif;
  padding-left: 0.8em;
  padding-bottom: 0.8em;
}

/* prc end ; used in: xx */

/* conv st */

.conv {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: black;

  /* border: 1px solid maroon; */
}

.leftBox {
  align-self: start;
  margin-left: 5px;
  margin-bottom: 5px;
  background-color: #d3eafc;
}

.rightBox {
  align-self: end;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: #dfe2eb;
}

.conv_p {
  margin: 0;
  padding: 3px 5px 3px 5px;

  /* border: 1px solid brown; */
}

/* conv fi */

/* ,.nn napp end */

.center {
  text-align: center;
}

/* arrows animation */
.arrows {
  width: 30px;
  height: 40px;
  /* position: absolute; */
  /* left: 50%; */
  /* margin-left: -15px; */
}

.arrows path {
  stroke: #6666ff;
  fill: transparent;
  stroke-width: 3px;
  animation: arrow 2.5s infinite;
  -webkit-animation: arrow 2.5s infinite;
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*Safari and Chrome*/
@-webkit-keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s; /* Safari, Chrome */
  /* stroke: #6666ff; */
}

.arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s; /* Safari, Chrome */
  /* stroke: #6638ff; */
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s; /* Safari, Chrome */
  /* stroke: #6600ff; */
}

/* text animation */
.superWrapper {
  display: flex;
  flex-direction: column;
}
.wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}
.wrapper p {
  /* margin: 0; */
  /* padding: 0; */
  height: 30px;
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
}
.wrapper .static-txt {
  color: white;
  /* font-size: 20px; */
  /* font-size: 1.7rem; */ /* 17px */
  font-size: 1.62rem; /* 16.2px */
  font-weight: 300;
}

.wrapper .dynamic-txts {
  margin-left: 6px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}

.dynamic-txts li {
  background-image: -webkit-linear-gradient(
    25deg,
    #9494ff 15%,
    #6666ff 45%,
    #8080ff 60%,
    #6666ff 67%,
    #9494ff 78%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-image: -webkit-linear-gradient(
    10deg,
    #6666ff 0%,
    #6600ff 30%,
    #6666ff 70%
  );
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  /* color: #6600ff; */
  list-style: none;
  /* font-size: 20px; */
  font-size: 1.62rem; /* 16.2px */
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 11s steps(5) infinite;
  /* border: 1px solid green; */
}
/* .dynamic-txts li span {
  position: relative;
} */

@keyframes slide {
  100% {
    top: -150px;
  }
}

/* .dynamic-txts li span::after {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #1f1f1f;
  border-left: 2px solid #6600ff;
  animation: typing 6s steps(29) infinite;
}

@keyframes typing {
  100% {
    left: 100%;
    margin: 0 -35px 0 35px;
  }
} */

/* ideas */
/* background: linear-gradient(120deg, #9494ff, #6666ff); */
/* background: linear-gradient(to right, black, #6600ff, black); */

/* nMas st */
/* three column table ; used in verbos irregulares table */
.thrcTable {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] 38vw [col] 28vw [col] 34vw;
  /* grid-template-columns: 3fr 1fr 2fr; */
  /* grid-template-columns: repeat(3, 1fr); */

  /* grid-template-rows: [row] auto [row] auto [row] auto [row] auto [row] auto [row] auto; */
  background-color: #f5f6f9;
  height: fit-content;
  /* margin: 0.6em; */

  /* border-top: 1px solid black;
  border-right: 1px solid black; */
  /* border: 1px solid green; */
}

.thrcTable > span {
  /* padding: 0.3em 0.6em; */
  padding-left: 0.3em;
  padding-right: 0.3em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  line-height: 1.3;
  /* border: 1px solid red; */
  /* border-left: 1px solid black;
  border-bottom: 1px solid black; */
}

.textTable {
  font-family: "Times New Roman", serif;
  font-size: 1.6rem;
}

/* nMas end */

/* thrcm st (three col main) ; used in: xx ; wrapper 3col 3rows ; Note: not used yet, use later if need 3col*/
.thrcm {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: [col] auto [col] auto [col] auto;
  grid-template-rows: [row] 6vh [row] auto [row] auto;
  background-color: #f5f6f9;
}

.thrcmMain {
  grid-column: col / span 3;
  grid-row: row 2;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  height: fit-content;
  align-self: center;
}

.thrcmFooter {
  grid-column: col / span 3;
  grid-row: row 3;
  display: flex;
  align-items: start;
  justify-content: center;
}
/* thrcm end (three col main) ; used in: xx ; wrapper 3col 3rows */