@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
/* global Variable */
:root {
  --main: #ef2006;
  --black: #000;
  --white: #fff;
  --font_family: "Poppins";
  --color-bg: #1f2641;
  --color-bg1: #2e3267;
  --color-bg2: #424890;
  --color-primary: #6c63ff;
  --color-success: #00bf8e;
  --color-warning: #f7c94b;
  --color-danger: #f75842;
  --container-width-lg: 80%;
  --container-width-md: 90%;
  --container-width-sm: 94%;

  --transition: all 400ms ease;
}

.wrapper2 {
  font-family: var(--font_family);
  letter-spacing: 0.375em;
  max-width: 25em;
  font-size: 2em;
  font-weight: 300;
  border-bottom: 0.0625em solid goldenrod;
  margin: 0.75rem 0 0 1rem;
}
.wrapper2 span {
  font-size: 0.95rem;
  font-weight: bolder;
  color: #00bf8e;
  width: 100%;
}
/* about US page ends */

/* For each course */

.faqs {
  background: var(--color-bg1) !important;
  box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
  margin: -2rem 0 2rem;
  font-family: var(--font_family);
}
.faqs_container {
  display: grid;
  grid-template-columns: (1fr, 1fr);
  gap: 1rem;
}
.faq {
  padding: 2rem;
  display: flex;
  width: 18.75rem;
  align-items: center;
  /* text-align: center; */
  margin: 1rem 0 -1.7rem;
  transition: width 1s ease-in-out;
  gap: 0.2rem;
  height: fit-content;
  background: var(--color-primary) !important;
  cursor: pointer;
}
.faq h4 {
  font-size: 1rem;
  line-height: 2.2;
}
.faq_icon {
  align-self: flex-start;
  font-size: 1.2rem;
}
.faq p {
  margin-top: 0.8rem;
  display: none;
}
.faq .row-span {
  margin-top: 0.8rem;
  display: none;
}
.faq.open {
  width: 100%;
}
.faq.open .row-span {
  display: block;
  width: 100%;
}
.faq.open p {
  display: block;
  color: var(--black);
  font-size: 1.5rem;
}
/* table design starts*/

.row-span td,
th {
  border-bottom: 2px groove goldenrod;
  padding: 10px;
  text-align: left;
  margin-bottom: 1.875rem;
  color: var(--black);
  font-weight: 600;
}
.row-span {
  width: 100%;
  min-width: 20rem; /*this is to make sure it doesn't shrink beyond 400px*/
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 0 2.5rem rgba(68, 1, 35, 0.7); /*creates the shade*/
  background: lightgrey;
}
/* tr:nth-child(even) {
  background: lightgrey;
} */
tr:nth-child(even):hover {
  background: slateblue;
}
tr:nth-child(odd):hover {
  background: rgb(247, 90, 247);
}
/* table design ends*/

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