* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  font-family: var(--poppins);
}
:root {
  /*-------- colors ---------*/
  --maroon: #7b1113;
  --yellow: #fdb91a;
  --dark: #111111;
  --dark-gray: #3f3f3f;
  --light-gray: #9b9b9b;
  --light: #f1f1f1;
  /*-------- colors ---------*/

  /*-------- fonts ---------*/
  --poppins: "Poppins", sans-serif;
  /*-------- fonts ---------*/
}
/*-------- global ---------*/
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
h3 {
  font-size: 22px;
  font-weight: bold;
  color: var(--dark);
}
h4 {
  font-size: 17px;
  font-weight: 500;
  color: var(--dark);
}
hr {
  width: 90%;
  display: flex;
  align-items: center;
  margin: auto;
}
button.cta-btn {
  border: none;
  border-radius: 2rem;
  padding: 1rem 3rem;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
}
/*-------- global ---------*/

/*-------- main ---------*/
main .container h1 {
  padding-top: 3rem;
  padding-left: 4.7rem;
}

main .container h2 {
  padding-top: 3rem;
  padding-left: 4.7rem;
}

main .container h3 {
  padding-top: 3rem;
  padding-left: 4.7rem;
}

main .container p {
  padding-top: 3rem;
  padding-left: 4.7rem;
  padding-right: 3rem;
}

.container ul {
  list-style: disc outside none;
  text-align: justify;
  overflow-x: visible;
  margin: 3vh 0vh 3vh 0vh; /*top right bottom left*/
  padding: 0vh 0vh 0vh 5.7rem; /*top right bottom left*/
}

.container li {
  overflow-x: visible;
}

.container ol {
  text-align: justify;
  overflow-x: visible;
  margin: 3vh 3vh 3vh 0vh; /*top right bottom left*/
  padding: 0vh 0vh 0vh 5.7rem; /*top right bottom left*/
}

/*-------- main ---------*/

/*-------- table ---------*/
table {
  margin-top: 3rem;
  margin-bottom: 5rem;
  margin-left: 10vh;
  margin-right: 10vh;
  width: 90%;
  border-spacing: 0;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
td,
th {
  padding: 15px 20px;
  text-align: center;
}
th {
  background-color: var(--maroon);
  color: var(--light);
  font-family: var(--poppins);
  font-weight: 500;
  text-transform: uppercase;
}
tr {
  width: 100%;
  background-color: #fafafa;
  font-family: var(--poppins);
}
tr:nth-child(even) {
  background-color: #eeeeee;
}
/*-------- table ---------*/

/*-------- extra-section ---------*/
.extra-section {
  margin-top: 3rem;
  margin-bottom: 5rem;
  margin-left: 10vh;
  width: 90%;
}
/*-------- extra-section ---------*/

/*-------- responsive - 1024px ---------*/
@media only screen and (max-width: 1024px) {
  main .site-banner .site-banner-background {
    height: 40vh;
  }
  main .container h1 {
    width: 90%;
    font-size: 1.3rem;
    padding-left: 3.5rem;
  }
  table {
    width: 90%;
    margin-left: 3.5rem;
  }
  th {
    font-size: 0.7rem;
  }
  tr {
    font-size: 0.7rem;
  }
}
/*-------- responsive - 1024px ---------*/

/*-------- responsive - 768px ---------*/
@media only screen and (max-width: 769px) {
  main .site-banner .site-banner-background {
    height: 40vh;
  }
  main .container h1 {
    width: 90%;
    font-size: 1.3rem;
    padding-left: 3.5rem;
  }
  table {
    width: 90%;
    margin-left: 2.5rem;
  }
  th {
    font-size: 0.7rem;
  }
  tr {
    font-size: 0.7rem;
  }
}
/*-------- responsive - 768px ---------*/

/*-------- responsive - 750px ---------*/
@media only screen and (max-width: 750px) {
  main .site-banner .site-banner-background {
    height: 40vh;
  }
  main .container h1 {
    width: 90%;
    font-size: 1.3rem;
    padding-left: 3.5rem;
  }
  table {
    width: 40%;
    margin-left: 2rem;
  }
  th {
    font-size: 0.7rem;
  }
  tr {
    font-size: 0.7rem;
  }
}
/*-------- responsive - 750px ---------*/

/*-------- responsive - 414px ---------*/
@media only screen and (max-width: 415px) {
  main .site-banner .site-banner-background {
    height: 40vh;
  }
  main .container h1 {
    width: 90%;
    font-size: 1.3rem;
    padding-left: 3rem;
  }
  table {
    width: 90%;
    margin-left: 1.2rem;
    display: flex;
  }
  th {
    padding-left: 0.5rem;
    font-size: 0.5rem;
  }
  tr {
    font-size: 0.6rem;
    display: flex;
    flex-direction: row;
  }
}
/*-------- responsive - 414px ---------*/

/*-------- responsive - 375px ---------*/
@media only screen and (max-width: 376px) {
  main .site-banner .site-banner-background {
    height: 40vh;
  }
  main .container h1 {
    width: 90%;
    font-size: 1.3rem;
    padding-left: 3rem;
  }
  table {
    width: 90%;
    margin-left: 1.2rem;
    display: flex;
  }
  th {
    padding-left: 0.5rem;
    font-size: 0.5rem;
  }
  tr {
    font-size: 0.6rem;
    display: flex;
    flex-direction: row;
  }
}
/*-------- responsive - 375px ---------*/