@font-face {
  font-family: "SFpro";
  src: url("./font/SF-Pro.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Chronicle";
  src: url("./font/Chronicle\ Display\ Light\ Italic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Silk";
  src: url("./font/Silk\ Serif\ Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.font1 {
  font-family: "SFpro", sans-serif;
}
.font2 {
  font-family: "Chronicle", sans-serif;
}
.font3 {
  font-family: "Silk", sans-serif;
}

body{
    background-image: url('./images/banner.webp');
    background-repeat: no-repeat;
        background-position: center;
    background-size: cover
}
@media only screen and (min-width: 320px) and (max-width: 479px){ 
    body{
 background-image: url('./images/mob-bg.webp') ;
    background-repeat: no-repeat;
        background-position: center;
    background-size: cover
}
 }