/* custom style */
:root
{
    --mainWhite: #ffffff;
    --mainBlack: #000000;
    --mainGrey: rgb(216, 214, 214);
    --mainBlue: rgb( 4,61,95); /* #043D5F*/
    --lightBlue: rgb(37, 162, 199) /*#25A2C7*/
    --mainYellow: #fdb40e;
    /*--mainBlue: #ff0000;*/
    --blackcoffee: rgb(48, 41, 47);
} 

.features-title::after{
  content: "";
  background: var(--blackcoffee);
  display: block;
  height: 3px;
  width: 170px;
  margin: 8px auto 1px;
}

h2.features-title{
  color: #c90000;
  font-weight: bold;
}

section h1{
  color: #c90000;
  font-weight: bold;
}

/* price section */
.price{
  background-image: linear-gradient(var(--blackcoffee), var(--mainBlue));
}

.card-price{
  background-image: linear-gradient(var(--mainBlue), var(--blackcoffee));
  border: 2px solid var(--mainBlue);
  box-shadow: 5px 5px 10px #222;
  transition: all .5s;
  padding-bottom: 10%;
  padding-top: 5%;
}

.card-price:hover{
  transform: translateY(-2px);
}

.sangari-body{
  color:#ffffff!important;
}
.sangari-body hr{
  background-color: #ffffff;
  width: 100px;
  color:#ffffff!important;
}

.card-title h4{
  font-size: 4rem;
  text-shadow: 2px 2px 5px #000;
  color:#ffffff!important;
}

.sangari-price h3{
  font-size: 3.5rem;
  color: #c90000;
  text-shadow: 2px 2px 5px #000;
}

.sangari-price h3 span{
  font-size: 1.2rem;
}

.popular{
 background: var(--blackcoffee);
}

.popularcard{
  margin-top: -50px;
} 

/*button style*/
.cta-btn{
  background-color: var(--mainBlue);
  color: #ffffff;
  border: 2px solid var(--mainBlue);
  padding: 7px 20px;
  transition: all .5s;
  border-radius: 50px;  
  text-decoration: none!important;
}

.cta-btn:hover{
  opacity: 0.7;
  color: #ffffff;
}