@font-face {
  font-family: head;
  src: url(../fonts/Yeager-Bold.otf);
}

@font-face {
  font-family: para;
  src: url(../fonts/paragraph.woff2);
}

@font-face {
  font-family: sfpro;
  src: url(../fonts/sf-pro-icons_regular\ \(2\).woff2);
}


.heading{
     text-align: center;
     font-family: sfpro;
     font-size: 50px;
     font-weight: 800 !important;
     margin-top: 50px;
}

.headingfornav{
  font-size: 45px;
  font-weight: 600;
  margin-top: 50px;
  text-transform: uppercase;
  text-align: center;
}

button {
     position: relative;
     display: inline-block;
     margin: 15px;
     padding: 8px 15px;
     text-align: center;
     font-size: 18px;
     letter-spacing: 1px;
     text-decoration: none;
     color: orangered;
     background: transparent;
     cursor: pointer;
     transition: ease-out 0.5s;
     border: 2px solid orangered;
     border-radius: 10px;
     box-shadow: inset 0 0 0 0 orangered;
     font-family: para;
   }
   
   button:hover {
     color: white;
     box-shadow: inset 0 -100px 0 0 orangered;
   }
   
   button:active {
     transform: scale(0.9);
   }



   

   #scrollsection {
    height: auto;
    width: 80vw;
    margin: auto;
    /* padding: 0 clamp(4rem, 12vw, 20rem); */
    display: grid;
    place-content: center;
 }
  #scrollsection p {
    font-size: 30px;
    text-align: justify;
 }