globals.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Montserrat", sans-serif;
}

/* --------------------- */
/* --- BASE INFOS --- */
/* --------------------- */
:root{
  --sh-black: #161C2D;
  --sh-gray: #9e9e9e;
  --sh-white: #ffffff;
  --sh-purple: #473BF0;
  --sh-purple-dark: #2e24b6;
  --sh-green: #68D585;
}

h1{
  font-size: 48px;
  font-weight: 700;
}

h2{
  font-size: 36px;
  font-weight: 700;
}

h3{
  font-size: 32px;
  font-weight: 700;
}

h4{
  font-size: 22px;
  font-weight: 700;
}

p{
  font-size: 18px;
  font-weight: 400;
}

a,
button{
  font-weight: 700;
}

.container.m-10{
  margin: 80px auto;
}

/* --------------------- */
/* --- BUTTONS --- */
/* --------------------- */
.shPurpleBtn{
  background-color: var(--sh-purple);
  color: var(--sh-white);
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 8px;
}

.shPurpleBtn:hover{
  background-color: var(--sh-purple-dark);
}

.shPurpleOutlineBtn{
  background-color: transparent;
  color: var(--sh-purple) !important;
  text-decoration: none;
  font-weight: 700 !important;
  border: 0;
}

.shPurpleOutlineBtn img{
  margin-left: 15px;
}

.shPurpleOutlineBtn:hover{
  color: var(--sh-purple-dark) !important;
}

/* --------------------- */
/* --- HEADER SECTION --- */
/* --------------------- */
.shHeader{
  font-size: 18px;
}

.shBrand{
  font-size: 40px;
  color: var(--sh-black);
  text-decoration: none;
}

.shBrand:hover{
  color: var(--sh-purple);
}


/* --------------------- */
/* --- BANNER SECTION --- */
/* --------------------- */
.shBanner{
  padding-top: 60px;
}

.shBanner h1{
  padding-top: 100px;
  width: 80%;
  line-height: 1.5;
}

.shBanner p{
  width: 70%;
  margin-bottom: 40px;
}

.shBanner img{
  height: 500px;
  margin-left: 40px;
}

/* --------------------- */
/* --- WATCH BUTTON SECTION --- */
/* --------------------- */
.shWatchBtn{
  background-color: var(--sh-black);
  color: var(--sh-white);
  padding: 40px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.shWatchBtn img{
  width: 25px;
  margin-right: 20px;
}

.shWatchBtn p{
  margin: 0;
  margin-right: 8px;
  font-size: 20px;
}

.shWatchBtn a{
  text-decoration: underline;
  font-weight: 400;
  color: var(--sh-white);
  font-size: 20px;
}

/* --------------------- */
/* --- CHOOSE SECTION --- */
/* --------------------- */
.shChoose .container .row .col-6{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}

.shChoose .container .row .col-6 p{
  margin: 0;
}
.shChoose .container .row .col-6 img{
  width: 20px;
  height: 20px;
  margin-right: 15px;
}

.shChoose .container .row .col-md-6:last-child{
  padding-top: 60px;
}

/* --------------------- */
/* --- GROW SECTION --- */
/* --------------------- */
.shGrow{
  height: 600px;
  color: var(--sh-white);
}

.shGrow-bg{
  width: 100% !important;
  z-index: -10;
}

.shGrow .container{
  margin-top: -600px;
}

.shGrow p{
  color: var(--sh-gray);
}

.p-10{
  padding: 80px 0;
}
.p-25{
  padding: 200px 0;
}

/* --------------------- */
/* --- GROW SECTION --- */
/* --------------------- */
.shContact{
  background-color: var(--sh-green);
}

/* --------------------- */
/* --- FOOTER --- */
/* --------------------- */
.shFooter{
  background-color: var(--sh-black);
  color: var(--sh-white);
}

.shFooter a{
  color: var(--sh-gray);
  text-decoration: none;
  font-weight: 400;
}

.shFooter a:hover{
  color: var(--sh-purple);
}

.shFooter p{
  color: var(--sh-gray);
  margin: 0 0 0;
}

.shFooter .socials img{
  margin-right: 15px;
  width: 25px;
}