/* 

1. General Styles
2. Header
3. Hero
4. Video Section
5. Event Section
6. Client Project Section
7. Student Project Gallery
8. Testimonial Section
9. Portfolio Section
10. About Section
11. Footer
12. Tablet Styles
13. Desktop Styles

*/

/* 1. ---General Styles--- */

.hidden {
  display: none;
}

p {
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  line-height: 22px;
  margin: 5px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  margin: 10px 0;
}

a {
  transition: all 0.5s ease-in-out;
  text-decoration: none;
}

input,
textarea {
  display: block;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
}

.montserrat-thin {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.montserrat-xlight {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.montserrat-light {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.montserrat-book {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.montserrat-medium {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.montserrat-black {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.montserrat-ultra {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  margin: 0;
}

main {
  background-color: white;
  margin: 0;
}

footer {
  background-color: #e2231a;
  width: 100%;
}

/* 2. ---Header--- */

header a {
  text-decoration: none;
}

header {
  padding: 0 20px;
  background-color: #e2231a;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

header nav {
  display: none;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.logo-fanshawe {
  height: 50px;
  width: auto;
  display: flex;
  align-items: center;
}

.logo-fanshawe:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

ul a {
  color: white;
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

#hamburger-icon {
  margin: auto 0;
  display: block;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
  display: none;
  position: absolute;
  background-color: #b3272d;
  opacity: 90%;
  top: 50px;
  left: 0;
  height: calc(30vh - 50px);
  width: 100%;
}

.mobile-menu li {
  margin: 10px;
}

/* 3. ---Hero--- */

#home-hero {
  height: 500px;
  background-image: url(../images/hero-image.jpeg);
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.718);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#home-hero-heading {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#home-hero-heading h3:first-child {
  font-weight: 200;
  font-size: 28px;
}

.cr-red {
  color: #e2231a;
}

#home-hero-heading h3:nth-child(2) {
  font-weight: bold;
  font-size: 36px;
  font-style: italic;
}

.bold {
  font-weight: bold;
}

/* ---4. Video Section--- */

:root {
  --plyr-color-main: #e2231a;
  --plyr-control-icon-size: 15px;
  --plyr-control-radius: 20px;
  --plyr-control-family: "Montserrat", sans-serif;
  --plyr-control-spacing: 15px;
}

#video-section {
  margin: 20px 0;
}

#player-container {
  margin: 20px 0;
}

#video-section {
  /* background: linear-gradient(180deg, #fff 50%, #b3272d 50%); */
  background: linear-gradient(180deg, #fff 30%, #e2231a 0%);
}

#video-description h2 {
  margin: 25px 0;
}

/* ---5. Event Section--- */

#event-section {
  margin: 20px 0;
}

.black {
  color: #000;
}

.event-info-box {
  background-color: #b3272d;
  margin: 10px 0;
  padding: 10px;
}

.event-info-box:hover {
  background-color: #e2231a;
}

.event-details-img {
  margin: 10px 0;
}

.line {
  margin-top: 15px;
  border-top: solid 2px #fff;
  padding-top: 15px;
}

/* ---6. Client Project - Finalist Section--- */

.finalist {
  margin: 15px 0;
}

.finalist img {
  border-radius: 15px;
}

.finalist h3,
.finalist h4 {
  color: #646469;
  text-align: center;
}

.finalist h4 {
  font-size: small;
}

/* ---7. Student Project Gallery--- */

#project-gallery-section {
  background: linear-gradient(180deg, #e2231a 15%, #fff 0%);
  margin: 20px 0;
}

#project-gallery-section h2 {
  margin: 20px 0;
}

#project-gallery-section ul {
  list-style: none;
  padding-left: 0;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery li {
  display: flex;
  flex-grow: 1;
  height: 18vh;
  /* 18% of the total viewpoint height */
}

.gallery img {
  max-width: 100%;
  min-width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* ---8. Testimonial Section--- */

#testimonial-section {
  margin: 50px 0;
}

.testimonial-div {
  background-color: #e8e8e8;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
}

.testimonial-div p {
  font-size: x-small;
  color: #646469;
  text-align: justify;
  line-height: 16px;
}

.testimonial-div h4 {
  font-size: x-small;
  text-align: right;
}

/* ---9. Portfolio Section--- */

#portfolio-section {
  padding: 2rem;
  background-color: #f4f4f4;
  margin: 50px 0;
}

#portfolio-section h2 {
  margin-left: 7%;
}

.portfolio-box {
  background-color: #646469;
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.portfolio-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  background-color: #474749;
}

.portfolio-box h3 {
  color: #fff;
  padding-top: 1rem;
  margin: 0;
  text-align: center;
  font-size: small;
}

.portfolio-box a {
  display: block;
  padding: 0.5rem 0 1rem;
  color: #fff;
  text-align: center;
  font-weight: lighter;
  font-size: small;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  transition: background-color 0.3s;
}

/* ---10. About Section--- */

#about-section {
  margin: 50px 0;
  background: linear-gradient(180deg, #e2231a 28%, #fff 0%);
}

#about-section h3:first-child {
  color: #fff;
  margin: 20px 0;
}

#about-section h3 {
  font-size: x-large;
  font-weight: bold;
}

#about-section p {
  margin: 16px 0;
}

.more-button {
  background-color: #b3272d;
  border-radius: 10px;
  color: white;
  padding: 10px;
  font-weight: bold;
}

.more-button:hover {
  transform: scale(1.1);
  transition: 0.3s;
  background-color: #e2231a;
}

/* ---11 . Footer--- */

footer img {
  width: 50px;
  height: auto;
  display: block;
  margin: auto;
  padding: 20px 0;
}

footer img:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

footer p {
  text-align: center;
  padding-bottom: 10px;
  margin: 0 0;
}

/* 12. ---Tablet Grid--- */
@media screen and (min-width: 768px) {
  header nav {
    display: block;
  }

  #hamburger-icon {
    display: none;
  }

  /* ---1. Hero--- */
  #home-hero-heading h3:first-child {
    font-size: 32px;
  }

  #home-hero-heading h3:nth-child(2) {
    font-size: 48px;
  }

  #home-hero-heading p {
    font-size: 16px;
  }

  /* ---4. Video Section--- */

  #video-section {
    background: linear-gradient(180deg, #fff 40%, #e2231a 0%);
  }

  /* ---5. Event Section--- */

  .line {
    margin: 12px 0;
    border-top: none;
    border-right: solid 3px #fff;
    padding-top: 15px;
    padding-right: 15px;
  }

  /* ---7. Student Project Gallery--- */

  #project-gallery-section {
    background: linear-gradient(180deg, #e2231a 30%, #fff 0%);
  }

  .gallery img {
    border-radius: 25px;
  }

  /* ---8. Testimonial Section--- */

  #testimonial-section {
    margin: 70px 0;
  }

  /* ---9. Portfolio Section--- */

  #portfolio-section {
    margin: 70px 0;
  }

  /* ---10. About Section--- */

  #about-section img {
    width: 50%;
  }
}

/* 13. ---Desktop Grid--- */
@media screen and (min-width: 1200px) {

  /* ---1. Hero--- */
  #home-hero-heading h3:first-child {
    font-size: 40px;
  }

  #home-hero-heading h3:nth-child(2) {
    font-size: 56px;
  }

  #home-hero-heading p {
    font-size: 20px;
  }

  /* ---4. Video Section--- */

  #video-section {
    background: linear-gradient(180deg, #fff 45%, #e2231a 0%);
  }

  /* ---7. Student Project Gallery--- */

  #project-gallery-section {
    background: linear-gradient(180deg, #e2231a 35%, #fff 0%);
  }

  .gallery img {
    border-radius: 30px;
  }
}