/* Universal Styles */

@font-face {
  font-family: "Montserrat-Bold";
  src: url("../../assets/fonts/montserrat/Montserrat-Bold.otf")
    format("opentype");
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("../../assets/fonts/montserrat/Montserrat-Regular.otf")
    format("opentype");
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

html body {
  font-size: 16px;
  text-align: center;
  min-height: 100%;
  color: rgb(63, 63, 63);
  font-family: "Montserrat-Regular", Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.main {
  top: 4rem;
}

.container {
  padding: 0 1.5rem;
}

.container-media {
  width: 60%;
  margin-right: 1.5rem;
}

.container-media img {
  width: 100%;
  margin-bottom: 2rem;
}

.container-media video {
  width: 100%;
  margin-bottom: 2rem;
}

.text-align-left {
  text-align: left;
}
.container-article {
  width: 40%;
}

.vertical-text {
  margin: auto 0;
}

.text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: "Montserrat-Bold", Arial, Helvetica, sans-serif;
}

.text h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: "Montserrat-Bold", Arial, Helvetica, sans-serif;
}

.text p {
  line-height: 1.5rem;
}

.text h4 {
  line-height: 1.5rem;
  margin: 0.5rem 0;
}

h4 a {
  color: rgb(84, 150, 227);
}

/* Header section */

.navbar {
  display: flex;
  justify-content: space-between;
  line-height: 4em;
}

.logo {
  display: flex;
}

.logo-span {
  font-family: "Montserrat-Bold", Arial, Helvetica, sans-serif;
  color: rgb(63, 63, 63);
}

.logo p {
  font-size: 2rem;
  color: rgb(216, 216, 216);
}

.navbar-links {
  display: flex;
}

.navbar-links a {
  margin-left: 1rem;
  text-decoration: none;
}

.navbar-mobile {
  display: none;
}

/* Banner section */

.banner {
  background-color: rgb(216, 216, 216);
  display: flex;
  padding-top: 2rem;
}

.banner-content {
  width: 40%;
}

.banner h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: "Montserrat-Bold", Arial, Helvetica, sans-serif;
}

.banner p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-family: "Montserrat-Bold", Arial, Helvetica, sans-serif;
  line-height: 1.5rem;
}

.banner button {
  font-size: 1rem;
  padding: 0.5rem;
  width: 65%;
  background-color: rgb(61, 61, 61);
  border: none;
}

button:hover {
  background-color: rgb(155, 155, 155);
}

.banner-text {
  width: 65%;
}

button a {
  color: white;
}

/* Information & thesis section */

.article {
  background-color: rgb(243, 245, 245);
  display: flex;
  padding-bottom: 2rem;
}

.article-left {
  margin-top: 2rem;
}

.article-right {
  margin-top: 1rem;
}

.article-right-content {
  display: flex;
  padding: 1rem;
  border: 1px solid #d8d8d8;
}

.article-right-content:hover {
  background-color: rgb(216, 216, 216);
}

.article-right-img {
  max-width: 35%;
}

.article-right-img img {
  width: 100%;
}

.article-vertical-text {
  margin: auto 0;
  padding: 1rem;
  max-width: 58%;
}

.mobile-image {
  display: none;
}

/* Start learning section */

.learning {
  background-color: rgb(234, 235, 236);
  padding: 2rem 4.5rem;
}

.course-countainer {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px 32px;
  box-sizing: border-box;
}

.learning-container {
  background-color: white;
  width: 100%;
}

.learning-container:hover {
  box-shadow: 0 0 20px 9px rgb(155, 155, 155);
}

.learning-container img {
  width: 100%;
}

.learning-text {
  padding: 1rem 1rem 1.5rem;
}

.learning-text p {
  margin: 0.5rem 0;
}

/* thesis section */

.thesis {
  background-color: rgb(243, 245, 245);
  padding-top: 2rem;
}

.thesis-right-content {
  display: flex;
  padding: 1rem;
}

.thesis-right-content:hover {
  background-color: rgb(216, 216, 216);
}

.thesis-left {
  margin-top: 1rem;
}

.thesis-right {
  margin-top: 0;
}

.thesis-right-img {
  max-width: 35%;
  margin-right: 1rem;
}

.thesis-right-img img {
  width: 100%;
}

/* footer section */

.footer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.footer-container {
  border-top: 1px grey solid;
  padding: 1rem 1.5rem 2rem;
}

/* Mobile section */

@media screen and (max-width: 799px) {
  /* Universal Styles */
  .container {
    padding: 0;
  }

  .container-article {
    width: 100%;
  }

  .container-media {
    width: 100%;
    margin: 0;
  }

  .mobile-display {
    display: none;
  }

  .mobile-image {
    display: block;
  }

  /* Header section */
  .logo {
    display: none;
  }

  .navbar-links {
    display: none;
  }

  .navbar-mobile {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 4rem;
    padding: 0 1.5rem;
  }

  .navbar-mobile img {
    vertical-align: middle;
  }

  /* Banner section */

  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    max-width: 100%;
  }

  .banner-content {
    width: 95%;
    padding: 0 1rem 2rem;
  }

  .banner button {
    width: 100%;
  }

  .banner-text {
    width: 100%;
  }

  .banner button {
    max-width: 100%;
  }

  /* Information section */

  .article-left {
    display: none;
  }

  .article-right-content {
    display: block;
    border: none;
    padding: 0;
  }

  .article-right-img {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .article-vertical-text {
    padding: 0 1rem 2rem;
  }

  /* learning section */

  .learning {
    background-color: rgb(255, 255, 255);
    padding: 2rem 1rem;
  }

  .course-countainer {
    display: block;
  }

  .learning-container {
    background-color: rgb(234, 235, 236);
  }

  .learning-text p,
  .learning-container img {
    display: none;
  }

  .learning-text {
    margin: 0.5rem auto;
  }

  /* thesis section */

  .thesis-right-content {
    display: block;
  }

  .thesis-right-content:hover {
    background-color: rgb(216, 216, 216);
  }

  .article-text {
    display: none;
  }

  .thesis-right {
    display: none;
  }

  /* footer section */

  .footer-container {
    border-top: none;
    background-color: rgb(243, 245, 245);
    padding: 1rem;
  }
}