/*
Table Of Contents
=========================
- Default Typography
- Custom Typography
=========================
*/

/*
--------------------------
- Default Typography
--------------------------
*/


/*
--------------------------
- Custom Typography
--------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Onest:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* 
.onest {
  font-family: "Onest", sans-serif;
}
.open-sans {
  font-family: "Open Sans", sans-serif;
}
.exo {
  font-family: "Exo", sans-serif;
  font-weight: <weight>;
  font-style: normal;
}
.lato {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/


body {
  font-family: var(--font-onest);
  font-style: normal;
  font-weight: 400;
  color: var(--heading);
}
/* variable color code */
:root {
  --white: #ffffff;
  --black: #000000;
  /* --blue: #0966AE;
  --orange: #F15A23;
  --peel: #F69334;
  --yellow: #FEC905; */

  --blue: rgba(9, 102, 174, 1);
  --orange: rgba(241, 90, 35, 1);
  --peel: rgba(246, 147, 52, 1);
  --yellow: rgba(254, 201, 5, 1);

  --dark: #101010;
  --darkBright: #1a1a1a;
  --heading: #f5f5f5;
  --para: #bdc3c7;
  
  
  /* font variable */
  --font-open: "Open Sans", sans-serif;
  --font-onest: "Onest", sans-serif;
  --font-exo: "Exo", sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-rubik: "Rubik", sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-exo);
}
p {
  font-family: var(--font-onest);
  margin: 0px;
  padding: 0px;
}
span {
  font-family: var(--font-onest);
}
ul {
    margin: 0;
    list-style-type: none;
}
a,
a:visited {
    text-decoration: none;
    font-family: var(--font-onest);
    font-weight: normal;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    outline: 0;
}
a {
    color: var(--black);
    font-family: var(--font-onest);
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
}
a:hover,
a:active {
    text-decoration: none;
    outline: 0;
}
a:focus {
    text-decoration: none;
    outline: 0;
}
button {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.container::after,
.container::before,
.row::after,
.row::before,
.navbar::after,
.navbar::before,
.nav::after,
.nav::before {
  display: none;
}