*,
*::after,
*::before {
  margin: 0;
  padding: 0; }

body {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

@media (max-width: 1200px) {
  html {
    font-size: 56.5%; } }

@media (max-width: 900px) {
  html {
    font-size: 54%; } }

@media (min-width: 1800px) {
  html {
    font-size: 75%; } }

.nav-big {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh;
  padding: 0 2rem;
  box-shadow: 0px -10px 25px #3C3B37; }
  .nav-big__img {
    height: 12rem; }
  .nav-big__link {
    font-size: 1.4rem;
    text-decoration: none;
    color: #3C3B37; }
  .nav-big__input {
    width: 30%;
    height: 4.6rem;
    border: 1px solid #3C3B37;
    padding-left: 2rem;
    border-radius: 50px; }
  .nav-big__btn-login {
    width: 10rem;
    height: 4rem;
    background-color: white;
    color: #0F7C90;
    border: 1px solid #3C3B37;
    border-radius: 5px; }
  .nav-big__btn-signup {
    width: 10rem;
    height: 4rem;
    background-color: #0F7C90;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 2rem; }

.nav-small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 10vh;
  border-bottom: 1px solid #3C3B37; }
  .nav-small__udemy {
    width: 10rem; }
  .nav-small__icon > img {
    margin-left: 2rem; }

@media (max-width: 1080px) {
  .nav-big__link_2 {
    display: none; } }

@media (max-width: 920px) {
  .nav-big__link_3 {
    display: none; } }

@media (max-width: 800px) {
  .nav-big {
    display: none; } }

@media (min-width: 800px) {
  .nav-small {
    display: none; } }

.header {
  position: relative;
  margin: 0 10rem; }
  .header__img {
    margin: 0 auto;
    height: 50vh; }
  .header__content {
    background-color: white;
    position: absolute;
    top: 6.4rem;
    left: 4.8rem;
    width: 40rem;
    height: max-content;
    padding: 2rem; }
    @media (max-width: 500px) {
      .header__content {
        left: 0;
        width: 30rem; } }
    .header__content > h1 {
      font-weight: 900;
      font-size: 4rem;
      color: #3C3B37;
      margin-bottom: 1rem; }
    .header__content > p {
      font-size: 2rem;
      color: #3C3B37;
      margin-bottom: 1.4rem; }
  .header__input {
    width: 100%;
    box-sizing: border-box;
    height: 4.6rem;
    padding: 1rem;
    border: 1px solid #3C3B37;
    display: flex;
    justify-content: space-between; }
    .header__input > input {
      border: none; }

@media (max-width: 1520px) {
  .header {
    margin: 0; }
    .header__img {
      width: 100%;
      object-fit: cover; } }

.get-started {
  margin-top: 5rem;
  background: url(https://udemy-images.udemy.com/browse_components/shared-assets/purple-intersect.svg) repeat-x #6e1a52;
  background-size: auto 120%;
  background-position: 0 -2.4rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: white; }
  .get-started > h1 {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1rem; }
    @media (max-width: 500px) {
      .get-started > h1 {
        font-size: 1.8rem; } }
  .get-started > p {
    font-size: 1.7rem;
    margin-bottom: 1.5rem; }
    @media (max-width: 500px) {
      .get-started > p {
        font-size: 1.2rem; } }
  .get-started > button {
    background-color: #6e1a52;
    color: white;
    padding: 1.5rem 3rem;
    border: 1.5px solid white;
    border-radius: 5px; }
    @media (max-width: 500px) {
      .get-started > button {
        padding: 1rem 2rem; } }
    .get-started > button:hover {
      cursor: pointer; }

.categories {
  margin-top: 5rem; }
  .categories > .container {
    margin: 0 10rem; }
    @media (max-width: 1520px) {
      .categories > .container .categories > .container {
        margin: 0 3rem; } }
    @media (max-width: 800px) {
      .categories > .container {
        margin: 0 2rem; } }
    .categories > .container > h1 {
      font-size: 2.4rem;
      font-weight: 900;
      color: #3C3B37;
      margin-bottom: 1rem; }
    .categories > .container > p {
      font-size: 1.6rem;
      color: #3C3B37;
      font-weight: lighter;
      margin-bottom: 3rem;
      letter-spacing: 1px; }

.tabs {
  font-size: 2rem;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 3rem;
  border-bottom: 1px solid #3C3B37; }
  @media (max-width: 550px) {
    .tabs {
      flex-wrap: wrap;
      border-bottom: none; } }
  .tabs > div {
    padding-bottom: 2rem; }
    @media (max-width: 550px) {
      .tabs > div {
        padding-bottom: 0;
        padding: 1rem;
        border-radius: 16px; } }

.tabs > div:hover {
  cursor: pointer; }

.tab-item {
  font-size: 1.8rem;
  font-weight: 600;
  color: #3C3B37; }
  @media (max-width: 800px) {
    .tab-item {
      font-size: 1.4rem; } }
  .tab-item:not(:last-child) {
    margin-right: 4rem; }
    @media (max-width: 800px) {
      .tab-item:not(:last-child) {
        margin-right: 2rem; } }

.tab-content {
  height: max-content;
  padding: 3rem;
  background-color: #fff7f0;
  color: #3C3B37; }

.content {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 550px) {
    .content {
      flex-direction: column;
      align-items: center; } }
  @media (max-width: 800px) {
    .content > img {
      height: 20rem; } }
  .content__text {
    width: 60%; }
    @media (max-width: 800px) {
      .content__text {
        width: 50%; } }
    @media (max-width: 550px) {
      .content__text {
        width: 80%;
        text-align: center;
        margin-bottom: 3rem; } }
    .content__text > h1 {
      font-size: 2rem;
      margin-bottom: 1.5rem; }
    .content__text > p {
      font-size: 1.6rem;
      font-weight: 400;
      letter-spacing: 0.6px;
      line-height: 20px;
      margin-bottom: 4rem; }
    .content__text > button {
      border: none;
      outline: none;
      color: blue;
      font-size: 1.5rem; }

#tab-1-content,
#tab-2-content,
#tab-3-content,
#tab-4-content,
#tab-5-content,
#tab-6-content,
#tab-7-content {
  display: none; }

.show {
  display: block !important; }

.border {
  border-bottom: 1.6px solid #000; }
  @media (max-width: 550px) {
    .border {
      border-bottom: none;
      border: 1.6px solid #3d3d3d; } }

.topic {
  margin: 5rem 0; }
  .topic > h1 {
    font-size: 2.3rem;
    font-weight: 700;
    margin: 4rem;
    text-align: center; }

.top-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 3rem; }
  .top-categories__card {
    border: 1px solid #dcdacb;
    margin: 0 1.6rem 1.6rem 0; }
    .top-categories__card:hover {
      cursor: pointer; }
    .top-categories__card > h1 {
      color: #3C3B37;
      font-size: 2rem;
      padding: 3rem 2rem; }

@media (max-width: 1332px) {
  .top-categories__card > img {
    width: 25rem; } }

.features {
  margin: 5rem 0; }
  .features > h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #3C3B37;
    margin: 0 0 5rem 20rem; }
    @media (max-width: 1200px) {
      .features > h2 {
        margin-left: 10rem; } }
    @media (max-width: 800px) {
      .features > h2 {
        margin-left: 2rem; } }
  .features__btn {
    margin: 2rem 0 0 20rem;
    padding: 1rem 2rem;
    color: white;
    background-color: #0F7C90;
    border: none;
    outline: none;
    font-size: 1.6rem;
    border-radius: 5px; }
    @media (max-width: 1200px) {
      .features__btn {
        margin-left: 10rem; } }
    @media (max-width: 800px) {
      .features__btn {
        margin-left: 2rem; } }
  .features__container {
    margin: 0 20rem;
    display: flex;
    justify-content: space-between; }
    @media (max-width: 1200px) {
      .features__container {
        margin: 0 10rem; } }
    @media (max-width: 800px) {
      .features__container {
        margin: 2rem;
        flex-wrap: wrap; }
        .features__container > div:not(:last-child) {
          margin-right: 2rem; } }
    .features__container__row > h3 {
      font-size: 1.8rem;
      font-weight: 700;
      color: #3C3B37;
      display: inline-block;
      margin-bottom: 2rem; }
    .features__container__row__content {
      margin-bottom: 4rem; }
      .features__container__row__content > h3 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #0F7C90; }
      .features__container__row__content > p {
        font-size: 1.5rem; }

.instructor__container {
  margin: 0 20rem;
  display: flex;
  justify-content: space-between; }
  @media (max-width: 1200px) {
    .instructor__container {
      margin: 0 10rem; } }
  @media (max-width: 650px) {
    .instructor__container {
      margin: 0 2rem; } }
  @media (max-width: 500px) {
    .instructor__container {
      flex-direction: column;
      align-items: center; } }
  @media (max-width: 1200px) {
    .instructor__container > img {
      width: 40%;
      object-fit: cover; } }
  @media (max-width: 500px) {
    .instructor__container > img {
      margin-bottom: 3rem; } }
  .instructor__container__content {
    width: 50%;
    text-align: center; }
    @media (max-width: 500px) {
      .instructor__container__content {
        width: 80%; } }
    .instructor__container__content > h1 {
      font-size: 4rem;
      color: #3C3B37;
      margin-bottom: 2rem; }
    .instructor__container__content > p {
      font-size: 1.6rem;
      margin-bottom: 3rem; }
    .instructor__container__content > button {
      padding: 2rem 4rem;
      background-color: #0F7C90;
      color: white;
      border: none;
      outline: none; }
      .instructor__container__content > button:hover {
        cursor: pointer; }

.info {
  margin: 5rem 0; }
  .info__1 {
    height: 25rem;
    padding: 5rem 0;
    box-sizing: border-box;
    border-top: 1px solid #dcdacb;
    border-bottom: 1px solid #dcdacb;
    margin: 0 20rem;
    text-align: center; }
    @media (max-width: 1200px) {
      .info__1 {
        margin: 0 2rem; } }
    @media (max-width: 830px) {
      .info__1 {
        border-bottom: none; } }
    .info__1 > h1 {
      font-size: 3rem;
      color: #3C3B37;
      margin-bottom: 3rem;
      letter-spacing: 2px; }
      @media (max-width: 500px) {
        .info__1 > h1 {
          font-size: 2rem; } }
    .info__1__icon {
      display: flex;
      justify-content: center;
      flex-wrap: wrap; }
      .info__1__icon > img:not(:last-child) {
        margin-right: 4rem; }
  .info__2 {
    height: 30rem;
    margin: 10rem 0;
    background-color: #003640; }
    @media (max-width: 550px) {
      .info__2 {
        height: max-content; } }
    .info__2__container {
      display: flex;
      justify-content: space-between;
      margin: 0 20rem; }
      @media (max-width: 1200px) {
        .info__2__container {
          margin: 0 10rem; } }
      @media (max-width: 700px) {
        .info__2__container {
          margin: 0 2rem; } }
      @media (max-width: 550px) {
        .info__2__container {
          flex-direction: column;
          align-items: center; } }
      .info__2__container__content {
        margin-top: 6rem;
        color: white; }
        @media (max-width: 550px) {
          .info__2__container__content {
            text-align: center;
            margin-bottom: 3rem;
            width: 80%; } }
        .info__2__container__content > h1 {
          font-size: 3.4rem;
          margin-bottom: 1rem; }
        .info__2__container__content > p {
          width: 65%;
          font-size: 2rem;
          margin-bottom: 1.3rem; }
          @media (max-width: 550px) {
            .info__2__container__content > p {
              width: 100%; } }
        .info__2__container__content > button {
          padding: 1.6rem 2rem;
          color: white;
          background-color: #0F7C90;
          border: none;
          font-size: 1.5rem;
          font-weight: 700; }
      .info__2__container > img {
        margin-top: -4rem;
        object-fit: cover; }
        @media (max-width: 1200px) {
          .info__2__container > img {
            width: 40%; } }
        @media (max-width: 550px) {
          .info__2__container > img {
            margin-top: 0;
            margin-bottom: 6rem; } }
  .info__3 {
    margin: 15rem 0 4rem; }
    @media (max-width: 550px) {
      .info__3 {
        margin: 4rem 0; } }
    .info__3__container {
      margin: 0 20rem;
      display: flex;
      justify-content: space-between; }
      @media (max-width: 1200px) {
        .info__3__container {
          margin: 0 10rem; } }
      @media (max-width: 700px) {
        .info__3__container {
          margin: 0 2rem; } }
      @media (max-width: 550px) {
        .info__3__container {
          flex-direction: column;
          align-items: center; } }
      @media (max-width: 550px) {
        .info__3__container > img {
          margin-bottom: 3rem; } }
      .info__3__container__content {
        width: 50%;
        color: #3C3B37; }
        @media (max-width: 550px) {
          .info__3__container__content {
            text-align: center;
            width: 80%; } }
        .info__3__container__content > h1 {
          font-size: 4rem;
          font-weight: 800; }
        .info__3__container__content > p {
          font-size: 2rem; }

.footer {
  margin: 5rem 4rem;
  border-top: 1px solid #dedede;
  padding-top: 5rem; }
  .footer__column {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .footer__column > div:not(:last-child) {
      margin-right: 3rem; }
    .footer__column-1 {
      align-items: flex-start; }
    .footer__column-2 {
      align-items: center; }
    .footer__column:not(:last-child) {
      margin-bottom: 2rem; }
    .footer__column > img {
      width: 10rem; }
    .footer__column > span {
      font-size: 1.4rem; }
  .footer__btn > input {
    padding: 1rem 1.5rem; }
  .footer__row {
    display: flex;
    flex-direction: column; }
    .footer__row > a {
      text-decoration: none;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: #0F7C90; }