@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Righteous&display=swap');

.red-neo{
    border-radius: 34px;
background: linear-gradient(145deg, #b20505, #d40606);
box-shadow:  35px 35px 70px #a80505,
             -35px -35px 70px #e40707;
}
.black-neo{
    border-radius: 34px;
background: linear-gradient(145deg, #171717, #6a6a6a ,0.2);
box-shadow:  10px 10px 10px #000000,
             -10px -10px 10px #6969695c;
}


.blink{

}
/* .headings {
    font-family: 'Bebas Neue', cursive;
    
    font-weight: bold;
    text-align: center;
    
    font-size: 7vmax;

}
.learning-head{

    font-family: 'Cinzel', serif;
    font-size: 4vmax;

}

.para {
    font-family: 'Cinzel', serif;
    color: wheat;
    font-size: 1.5rem;
    line-height: 6.5rem;
}

.boxheading {
  
    font-family: 'Rubik Glitch', cursive;
    font-weight: 100;
    font-size: 5vw;
    line-height: 1;
    font-size: 10rem;

    color: #f7221b;
    text-align: center;
   
}

@media only screen and (max-width: 340px){
    .boxheading{
        
        font-size: 15vw;
    }
   
    .learning-head{

    font-family: 'Cinzel', serif;
    font-size: 1.2rem;

}
} */


:root {
  --clr-primary: #F22B0C;
  --clr-secondary: #9c9c9c;
}

.sub-heading {
  max-width: 76ch;
  margin: 25px auto 0;
  line-height: 1.8;
  font-size: 18px;
  color: var(--clr-secondary);
}

.section-heading {
  text-transform: uppercase;
  font-size: 90px;
  color: var(--clr-secondary);
}

.blue-heading {
  /* font-family: 'Oswald', sans-serif; */
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  font-size: 100px;
  line-height: 0.9;
  color: var(--clr-primary);
  margin: 0.4em 0;
  
}

.para {
  font-size: 20px;
  line-height: 1.8;
  color: var(--clr-secondary);
}


@media (max-width: 1200px) {
  .blue-heading {
    font-size: 100px;
  }

  .section-heading {
    font-size: 60px;
  }

 
}

@media (max-width: 992px) {
  .blue-heading  {
    font-size: 72px;
  }

  .para {
    font-size: 18px;
  }

  .sub-heading {
    font-size: 16px;
  }
}



@media (max-width: 576px) {
  .blue-heading  {
    font-size: 36px;
  }

  .section-heading {
    font-size: 45px;
  }
}





















.btn {
    width: fit-content;
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  background-color: black;
  border: none;
}

.btn-secondary{
    width: fit-content;
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  background-color: rgb(119, 119, 119);
  border: none;

}
.btn a{
    text-decoration: none;
    color: white;
}

.btn:hover {
    width: fit-content;
  background-color: #0d0d0d;
}

.btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}
.btn-secondary a{
 text-decoration: none;
    color: white;
}

.btn-secondary a:hover{
    color: black;
}
.btn-secondary:hover {
    width: fit-content;
  background-color: #ffffff;
}

