:root {
  --red: rgb(144, 5, 5);
}

:root {
  --purple: rgb(75, 2, 75);
}

/*! -------------- 1- NAVBAR ---------------- */
.navbar {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 8px 8px 8px black;
}

.navbar-brand {
  box-shadow: 2px 2px 5px rgb(247, 247, 247);
  border-radius: 10px;
  padding: 1rem;
}

.nav-link {
  transition: all 0.5s;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.nav-link:hover {
  color: rgb(144, 5, 5);
  text-decoration: underline;
  transform: scale(1.1);
}

/*! ------------- 2- CAROUSEL --------------- */

.carousel-item {
  max-height: calc(100vh - 88px);
}

.carousel-item h5 {
  color: var(--red);
  font-size: 2.5rem;
  text-shadow: 3px 3px 3px black;
}

.carousel-item p {
  text-shadow: 3px 3px 3px black;
  font-weight: 600;
}

.carousel-item .btn {
  width: 8rem;
  margin: 1rem;
  color: rgb(255, 255, 255);
  box-shadow: 2px 2px 10px white;
  outline: 4px solid rgb(88, 4, 4);
  background-color: rgb(88, 4, 4);
  transition: all 0.3s ease;
}

.carousel-item .btn:hover {
  background-color: rgb(87, 3, 3);
  outline-offset: 5px;
  transform: scale(1.1);
  color: white;
}

.carousel-indicators button {
  background-color: rgb(78, 1, 1) !important;
  height: 0.4rem !important;
  width: 3rem !important;
  margin-right: 0.5rem !important;
}

/*! ------------ 3- ABOUT SECTION ----------- */

#about i {
  color: rgb(97, 6, 6);
}

#about p {
  text-shadow: 1px 1px 2px black;
}

#about h4 {
  text-shadow: 1px 1px 2px darkred;
}

#aboutt:hover {
  transform: scale(1.1);
  cursor: pointer;
  transition: all 0.5s ease;
}

/*! ------------- 4- INSTRUCTORS -------------*/

section#instructors .card {
  transition: transform 0.5s;
  cursor: pointer;
}
section#instructors .card:hover {
  transform: scale(1.05);
}

section#instructors .socials i {
  transition: all 0.5s;
}

section#instructors .socials i:hover {
  opacity: 0.5;
  cursor: pointer;
  transform: scale(1.2);
}

/*! ----------- 4- STUDENTS SECTION ----------*/

#students .btn {
  width: 10rem;
  margin: auto;
  color: rgb(255, 255, 255);
  box-shadow: 2px 2px 10px white;
  outline: 4px solid rgb(88, 4, 4);
  background-color: rgb(88, 4, 4);
  transition: all 0.3s ease;
}

#students .btn:hover {
  background-color: rgb(87, 3, 3);
  outline-offset: 5px;
  transform: scale(1.1);
  color: white;
}
/*! ----------- 5- COURSES SECTION ----------- */

section#courses .nav-link.active {
  color: white;
  box-shadow: 2px 2px 3px white;
  background-color: rgb(88, 4, 4);
}

section#courses .nav-link {
  color: white;
  box-shadow: 2px 2px 3px white;
  margin-right: 1rem;
}

/*! ----------- 6- CONTACT SECTION ------------ */
section#contact i {
  color: var(--red);
  font-size: 2rem;
}

#submit {
  width: 10rem;
  margin: auto;
  color: rgb(255, 255, 255);
  box-shadow: 2px 2px 10px white;
  outline: 4px solid rgb(88, 4, 4);
  background-color: rgb(88, 4, 4);
  transition: all 0.3s ease;
}

#submit:hover {
  background-color: rgb(87, 3, 3);
  outline-offset: 5px;
  transform: scale(1.1);
  color: white;
}

input,
textarea {
  box-shadow: 2px 2px 3px black;
}

/** -------------- UP-BUTTON ------------------ */
.up-btn {
  color: white;
  position: fixed;
  background-color: var(--red);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  bottom: 1rem;
  right: 1rem;
  text-align: center;
  padding: 0.6rem;
  font-size: 1.2rem;
}
.up-btn:hover {
  transform: scale(1.1);
  outline: 4px solid darkred;
  outline-offset: 5px;
  transition: all 0.3s ease;
}
/*! --------------- 7- FOOTER ----------------- */
footer i {
  font-size: 2rem;
  padding: 1rem;
  color: rgb(240, 240, 240);
  text-shadow: 1px 1px 2px black;
  box-shadow: 1px 1px 2px rgb(255, 255, 255);
  border-radius: 50%;
  margin-right: 1.5rem;
  transition: color 0.5s;
}

footer i:hover {
  color: var(--red);
}

footer {
  background-color: var(--purple);
  box-shadow: 2px 2px 10px black;
}