:root {
  --navy: rgba(0, 48, 146, 1);
  --navy-light: rgba(21, 93, 238, 1);
  --color-bttnCard: rgb(255, 0, 119);
  --color-bttnCard-hover: rgb(255, 0, 80);
  --blue-dark: rgb(126, 146, 236);
  --teal: rgba(0, 135, 158, 1);
  --blue-light: rgba(21, 241, 221, 0.2);
  /* --textColor-light: rgb(240, 245, 225); */
  --light: rgba(255, 242, 219, 1);
  --textColor-dark: rgb(124, 10, 10);
  --boxSadow: 3px 3px 8px rgba(128, 128, 128, 0.5);
  /* --border-dark: 2px solid rgb(0, 0, 255); */
  --border-light: 2px solid rgba(21, 241, 221, 0.2);
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--navy);

  .titleItem {
    border: var(--border-light);
    border-radius: 50px;
    color: var(--light);
    background: linear-gradient(
      0.25turn,
      var(--teal),
      var(--navy-light),
      var(--navy-light),
      var(--teal)
    );
  }
}
.rateHome {
  background-color: var(--navy);
}
.rateHome p {
  margin: 0;
  color: var(--light);
  font-size: 30px;
  font-weight: bold;
}
.rateTotal {
  font-size: 12px;
  color: white;
  padding: 0 0;
  margin: 0;
}
.starGold {
  color: gold;
}
.starWhite {
  color: white;
}
.img2 i {
  font-size: 1.5em;

  line-height: 1em;
  border-radius: 50%;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;

  border: 2px solid #fff;
  margin-top: -30px;
}
#blinking-button {
  padding: 8px 30px;
  border-radius: 48px 0px;
  border: 0px solid #6c8003;
}
@keyframes blink {
  0%,
  100% {
    background-color: var(--light);
    color: var(--color-bttnCard);
  }
  50% {
    background-color: var(--color-bttnCard);
    color: var(--light);
  }
}
#blinking-button {
  background-color: #8eddbe;
  color: white;
  animation: blink 2s linear infinite;
}

.topTitle {
  color: var(--color-bttnCard);
  font-size: 15px;
  font-weight: bolder;
}
.topText {
  color: var(--navy);
  font-weight: bolder;
}
.colD {
  background-color: var(--navy);
  color: var(--textColor-dark);
  border-radius: 0.3em;
}
.colHero {
  border-radius: 10px;
  border: var(--navy);
  box-shadow: var(--boxSadow);
  background-color: var(--light);
}
.colSal {
  border-radius: 10px;
  background: white;
}
.itemTitle {
  background: linear-gradient(
    0.25turn,
    var(--teal),
    var(--navy-light),
    var(--navy-light),
    var(--teal)
  );
  color: var(--light);
  border-radius: 30px;
  border: var(--border-light);
}
button {
  background-color: var(--navy);
  color: var(--light);
  border-radius: 10px;
  border: var(--border-light);
  box-shadow: var(--boxSadow);
}
button:hover {
  cursor: pointer;
}
.cardImg {
  width: 100%;
  border-radius: 10px;
  padding: 0;
  margin: 0;
}
.rowCard {
  border-radius: 10px;
  border: var(--navy);
  box-shadow: var(--boxSadow);
  background-color: var(--light);
}
.col1 {
  display: inline-block;

  width: 40%;
}

.titleCard {
  color: var(--textColor-dark);
  font-weight: bolder;
}
.col2 {
  display: block;

  width: 40%;
}

.col2sm {
  display: block;

  width: 50%;
}
.col3 {
  font-size: 5px;
  display: block;
  align-self: center;
  width: 20%;
}
.cardText {
  font-size: 14px;
}
.btnCard {
  width: 80%;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  height: 30px;
  color: var(--color-bttnCard);
  border: none;
  transition: 0.5s;
}
.fbIcon {
  color: var(--navy-light);
  font-size: 2em;
}
.fbIcon:hover {
  color: rgb(0, 179, 255);

  transition: 0.7s;
}
.blinkCard {
  animation: blink 2.5s linear infinite;
}
.btnCard:hover {
  /* font-size: 20px; */
  color: var(--color-bttnCard-hover);
  padding-right: 25px;
}
.carImg {
  width: 50%;
  margin: 20px;
}

footer {
  height: 130px;
}
@media (max-width: 775px) {
  .carImg {
    width: 80%;
  }
  .col2 {
    width: 60%;
  }
  .col3 {
    width: 0;
  }
}