/*
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
:root {
  --col-pr: #845ec2;
  --col-sc: #ff6f91;
  --col-pr-tint: #f3eff9;
  --col-sc-tint: #fff1f4;
  --gray-dark: #0d0913;
  --gray-mid: #918f94;
  --gray-light: #f3eff9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Outfit', sans-serif;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100vw;
  /* height: 100vh;
  overflow-y: scroll; */
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
}

/* ==================================== */
/* ===== GENERAL ELEMENTS ===== */
/* ==================================== */

.gradient-box {
  background: linear-gradient(to bottom right, var(--col-pr), var(--col-sc));
}

.gradient-text {
  background: linear-gradient(to right, var(--col-pr), var(--col-sc));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ======== Text Style ======== */
.sec-s-head {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--col-sc);
}

.sec-l-head {
  font-size: 4.8rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--gray-dark);
}

.project-heading {
  display: inline-block;

  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;

  text-transform: capitalize;
  margin-bottom: 1.6rem;
}

.paragraph {
  display: inline-block;
  font-size: 2.4rem;
  line-height: 1.5;

  color: var(--gray-mid);
}

.hidden {
  display: inline;
}

.read-more-btn {
  display: none;
  border: none;
  background-color: transparent;
  color: var(--col-sc);
}

.btn-shadow {
  box-shadow: 0px 1.1899203062057495px 1.4943184852600098px 0px #0000000d;

  box-shadow: 0px 2.859543800354004px 3.591055154800415px 0px #00000013;

  box-shadow: 0px 5.384267330169678px 6.761638164520264px 0px #00000017;

  box-shadow: 0px 9.604613304138184px 12.061606407165527px 0px #0000001b;

  box-shadow: 0px 17.964372634887695px 22.55990982055664px 0px #00000021;

  box-shadow: 0px 43px 54px 0px #0000002e;

  transition: all 0.3s ease;
}

.btn-shadow:hover {
  cursor: pointer;
  transform: scale(1.05);
  gap: 3.6rem;
}

.btn-shadow:active {
  transition: none;
  box-shadow: 0px 0.6182806491851807px 1.2022124528884888px 0px #00000016;

  box-shadow: 0px 1.56367826461792px 3.040485382080078px 0px #00000020;

  box-shadow: 0px 3.1897568702697754px 6.202304840087891px 0px #00000028;

  box-shadow: 0px 6.570296287536621px 12.775575637817383px 0px #00000031;

  box-shadow: 0px 18px 35px 0px #00000047;

  transform: scale(0.98);
}