@font-face {
  font-family: '1';
  src: url('../fonts/1.ttf');
}
body{
  font-family: '1' !important;
  color: black !important;
  font-weight: bold;
}

.btn2 {
	width:100%;
  --btn2-color: rgb(255, 0, 0);
  position: relative;
  padding: 5px 5px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  line-height: 1;
  color: black;
  background: none;
  border: none;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn2::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 0%;
  height: 100%;
  background: var(--btn2-color);
  border-radius: 24px;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn2 span,
.btn2 span span {
  display: inline-flex;
  vertical-align: middle;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn2 span {
  transition-delay: 0.05s;
  color: black !important;
    font-weight: bold;
}

.btn2 span:first-child {
  padding-right: 7px;
}

.btn2 span span {
  margin-left: 8px;
  transition-delay: 0.1s;
}

.btn2 ul {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transform: translateY(-50%);
}

.btn2 ul li {
  flex: 1;
}

.btn2 ul li a {

  font-family: '1' !important;
  display: inline-flex;
  vertical-align: middle;
  transform: translateY(55px);
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn2 ul li a :hover {
  opacity: 0.8;
  
}

.btn2:hover::before {
  transform: scale(1.2);


}

.btn2:hover span,
.btn2:hover span span {
  transform: translateY(-55px);
}

.btn2:hover ul li a {
  transform: translateY(0);

  
}

.btn2:hover ul li:nth-child(1) a {
  transition-delay: 0.15s;
}

.btn2:hover ul li:nth-child(2) a {
  transition-delay: 0.2s;
}

.btn2:hover ul li:nth-child(3) a {
  transition-delay: 0.25s;
}

thead{
	background-color: black ;
	color: white !important;
}
.card2{
 width: 24%;
  margin: 5px; 
  float: right;
  border-top-left-radius:20px ;
  border-top-right-radius:20px ;
  

}
.card2 h6{
  font-weight: bold !important;
  font-size: 12px ;
}
.card_main{
  height: 150px;
  border-radius: 20px;
  float: right;
  color: white;
  width: 24%;
  margin: 1px;
}


.card_main i{
      font-size: 68px;
    margin-top: 30px;
}

.card_main h3{
      font-size: 48px !important;
      font-weight: bold !important;
      color: white !important;
}
.card_main h4{
      font-size: 28px !important;
      font-weight: bold !important;
      color: white !important;
}

@media only screen and (min-width: 768px) {
 .s{
  width: 100% !important;
 } 

}