@font-face {
  font-family: Cairo;
  src: local("Cairo"),
       local("Cairo-Bold"),
       url('../fonts/Cairo-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: Cairo;
  src: local("Cairo"),
       local("Cairo-Regular"),
       url('../fonts/Cairo-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: Cairo;
  src: local("Cairo"),
       local("Cairo-Light"),
       url('../fonts/Cairo-Light.ttf');
  font-weight: 300;
}
@font-face {
  font-family: Cairo;
  src: local("Cairo"),
       local("Cairo-SemiBold"),
       url('../fonts/Cairo-SemiBold.ttf');
  font-weight: 600;
}
/***********lato**********/

@font-face {
  font-family: Lato;
  src: local("Lato"),
       local("Lato-Bold"),
       url('../fonts/Lato/Lato-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: Lato;
  src: local("Lato"),
       local("Lato-Hairline"),
       url('../fonts/Lato/Lato-Hairline.ttf');
  font-weight: 500;
}
@font-face {
  font-family: Lato;
  src: local("Lato"),
       local("Lato-Regular"),
       url('../fonts/Lato/Lato-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: Lato;
  src: local("Lato"),
       local("Lato-Light"),
       url('../fonts/Lato/Lato-Light.ttf');
  font-weight: 300;
}
/***********roboto**********/

@font-face {
  font-family: Lato;
  src: local("Roboto"),
       local("Roboto-Bold"),
       url('../fonts/Roboto/Roboto-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: Roboto;
  src: local("Roboto"),
       local("Roboto-Hairline"),
       url('../fonts/Roboto/Roboto-Hairline.ttf');
  font-weight: 500;
}
@font-face {
  font-family: Roboto;
  src: local("Roboto"),
       local("Roboto-Regular"),
       url('../fonts/Roboto/Roboto-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: Roboto;
  src: local("Roboto"),
       local("Roboto-Light"),
       url('../fonts/Roboto/Roboto-Light.ttf');
  font-weight: 300;
}