@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
.card {
  border-radius: 28px;
  background: #FFF;
  box-shadow: 26px 20px 42px 0px rgba(0, 0, 0, 0.25);
}

* {
  list-style: none;
  text-decoration: none;
}

body {
  font-family: Rubik;
  background-color: #FFFFFF;
}

.navbar-nav .nav-item .nav-link {
  margin: 5px 20px;
  color: #000;
  font-family: Rubik;
  font-style: normal;
  font-weight: 20px;
  line-height: normal;
}
.navbar-nav .nav-item .nav-link:hover {
  color: red;
}

.btn-first {
  padding: 5px 27px !important;
  margin: 7px 50px;
  border-radius: 61px;
  color: white;
  background-color: red;
  font-weight: bold;
}
.btn-first:hover {
  background-color: gray;
  color: white;
}

.btn-second {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  border-radius: 86px;
  border: 1px solid #C9BFBF;
  opacity: 0.8000000119;
  background: linear-gradient(162deg, #E40605 0%, rgba(232, 54, 53, 0) 100%);
  box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .btn-first {
    width: 500px;
  }
}
.splash {
  position: relative;
}
.splash .img-first {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  z-index: 1;
}
.splash .img-second:last-child {
  width: 500px;
  height: auto;
  margin-top: 7%;
  margin-bottom: 7%;
  padding-top: 10%;
  padding-bottom: 7%;
  z-index: 1;
}

.text-learn-second {
  text-decoration: none;
  display: flex;
}

.text-learn-second p {
  display: flex;
  color: black;
  font-family: Rubik;
  font-weight: normal;
  text-align: justify;
}

@media (max-width: 768px) {
  .col-md-3 {
    margin-top: 35%;
    margin-right: 5%;
  }
  .text-learn p {
    margin-left: 10%;
    margin-top: 93%;
    z-index: 775;
    text-decoration: none !important;
  }
}/*# sourceMappingURL=main.css.map */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

.stars input{
  display: none;
}
.stars label{
  float: right;
  font-size: 50px;
  color: lightgoldenrodyellow;
  margin: 0 5px;
  text-shadow: 1px 1px #bbb;
}
.stars label:before{
  content: '★';
}
.stars input:checked ~ label{
  color: gold;
  text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
  color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.stars .result:before{
  position: absolute;
  content: "";
  width: 200px;
  top: 60px;
  left: 170px;
  transform: translateX(-47%);
  bottom: -30px;
  color: #CA3636;
  font-family: Rubik;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  display: none;
}
.stars input:checked ~ .result:before{
  display: block;
}
.stars #five:checked ~ .result:before{
  content: "I love it ";
}
.stars #four:checked ~ .result:before{
  content: "I like it ";
}
.stars #three:checked ~ .result:before{
  content: "It's good ";
}
.stars #two:checked ~ .result:before{
  content: "I don't like it ";
}
.stars #one:checked ~ .result:before{
  content: "I hate it ";
}