/* ===== Global Styles ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

:root {
  --dark-blue: #252b42;
}

.btn-orange {
  background: orange;
  color: white;
  transition: 0.3s ease;
}

.btn-outline-orange {
  color: orange;
}

.btn-orange:hover,
.btn-outline-orange:hover {
  background: rgb(252, 176, 36);
  color: white;
}

/* ===== Intro ===== */

.intro {
  max-width: 350px;
  margin: auto;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 5px;
}

.intro h1 {
  font-size: 42px;
  font-weight: 700;
  color: orange;
}

.intro p {
  font-size: 16px;
}

/* ===== Card ===== */

.card {
  text-align: left;
  color: black;
  width: 100%;
  max-width: 300px;
  margin: 10px auto;
}

.card h5 {
  font-size: 30px;
}

.card p {
  color: black;
  margin-bottom: 10px;
}

/* ===== Container ===== */

.container-fluid{
  background: var(--dark-blue);
}

/* ===== Main Sections ===== */

.header,
.features,
.course-cards,
.review-cards {
  max-width: 1100px;
  margin: auto;
}

/* ===== NavBar ===== */

.navbar .logo {
  font-size: 30px;
}

.navbar a {
  color: white;
  transition: 0.4s ease;
}

.navbar a:hover {
  color: orange;
}

.navbar-toggler {
  border-color: white;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar form button {
  color: white;
  margin: 0 5px;
}

.login{
  border: 1px solid orange;
  margin-left: 0 !important;
}

/* ===== Features ===== */

.features .card {
  transition: all 0.5s ease-in-out;
  margin: 10px auto;
}

.features .card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 123, 255, 0.4);
}

.features .card i {
  font-size: 30px;
}

/* ===== Flex Cards ===== */

.course-cards, .review-cards {
  display: flex;
  flex-wrap: wrap;
}

/* ===== Courses ===== */

.courses .intro{
  padding-top: 15px;
}

.courses .intro h1 i{
  color: orange;
  font-size: 40px;
}

.courses .course-cards .card .rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.courses .course-cards .card .rank h4 {
  color: #252b42;
}

.courses .course-cards .card .rank span {
  background: black;
  font-size: 15px;
  padding: 5px 15px;
  border-radius: 20px;
}

.courses .course-cards .card .rank span i {
  font-size: 15px;
  color: yellow;
}

.courses .course-cards .card .time {
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 0;
}

.courses .course-cards .card .time i {
  color: #252b42;
  font-size: 20px;
}

/* ===== Review ===== */

.review {
  background: white;
  min-height: 100vh;
}

.review .intro {
  margin-bottom: 40px;
}

.review .intro h1, .review .intro p {
  color: black;
}

.review .intro h1 i {
  color: orange;
}

.review .review-cards .card {
  text-align: center;
  border: none;
  max-width: 250px;
}

.review .review-cards .stars {
  text-align: center;
  margin-bottom: 10px;
}

.review .review-cards .stars i {
  color: yellow;
  font-size: 20px;
  margin: 0 3px;
}

.review .review-cards .persons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.review .review-cards .persons .image img {
  width: 50px;
  height: 50px;
}

.review .review-cards .persons .person h5 {
  font-size: 20px;
  color: black;
}

.review .review-cards .persons .person h6 {
  font-size: 15px;
  color: orange;
}

/* ===== Contact ===== */

.contact, .courses {
  background: var(--dark-blue);
  min-height: 100vh;
}

.contact h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

.contact p {
  margin-bottom: 30px;
  color: #ddd;
}

.contact .contact-form input,
.contact .contact-form textarea {
  border-radius: 10px;
  padding: 12px;
  border: none;
}

.contact .contact-form input:focus,
.contact .contact-form textarea:focus {
  border: 2px solid orange;
  box-shadow: none;
}

/* ===== Footer ===== */

footer{
  background: white;
  color: black;
}

footer p{
  color: black;
}

footer a:hover{
  color: black !important;
}

footer h5{
  color: black;
}

footer .btn-outline-warning, footer .btn-outline-warning i {
    color: #000 !important;
    border-color: #000 !important;
  }
  footer .btn-outline-warning:hover {
    background-color: orange !important;
    color: #fff !important;
    border-color: orange !important;
  }

  footer .social a{
    width: 42px;
  }