/*
COLORS

primary: #495057;
primary-light: #868e96;
primary-dark: #343a40;
secondary: #1c7ed6;
secondary-light: #228be6;
secondary-dark: #1971c2;
tertiary: #fab005;
tertiary-light: #fcc419;
tertiary-dark: #f59f00;

*/
:root {
  --color-primary: #495057;
  --color-primary-light: #868e96;
  --color-primary-dark: #212529;
  --color-secondary: #1c7ed6;
  --color-secondary-light: #228be6;
  --color-secondary-dark: #1971c2;
  --color-tertiary: #fab005;
  --color-tertiary-light: #fcc419;
  --color-tertiary-dark: #f59f00;
  --color-gray-light: #e9ecef;
  --color-gray-light-2: #dee2e6;
  --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, .3); }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  /* here we need 10 px default but the browser has it 
    16 px so to make it percentage we 10/16*100=62.5% */
  font-size: 62.5%;
  font-family: Lato; }

body {
  background-color: #e9ecef;
  box-sizing: border-box;
  padding: 3rem 4rem; }

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translate(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

.navigation-bar {
  border-radius: .2rem;
  height: 8rem;
  width: 100%;
  background-color: var(--color-primary-dark);
  font-size: 2rem;
  padding: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }
  .navigation-bar .logo {
    flex: 0 0 75%; }
    .navigation-bar .logo__name {
      font-size: 4rem;
      background-image: linear-gradient(to right bottom, var(--color-tertiary), var(--color-tertiary-dark));
      -webkit-background-clip: text;
      color: transparent;
      font-weight: 700;
      letter-spacing: 1.2rem;
      text-transform: uppercase;
      margin: 0 3rem; }
  .navigation-bar__buttons {
    display: flex;
    flex-direction: row;
    margin: 2rem; }
    .navigation-bar__buttons__about {
      font-weight: 400;
      border: solid;
      padding: 1rem 0;
      border-color: transparent;
      color: white;
      margin: 0 6rem;
      flex: 0 0 10%;
      text-decoration: none;
      text-transform: uppercase; }
    .navigation-bar__buttons__contact {
      font-weight: 400;
      border: solid;
      padding: 1rem 3rem;
      border-color: #fcc419;
      margin: 0 0;
      color: white;
      margin-right: 4rem;
      flex: 0 0 10%;
      text-decoration: none;
      text-transform: uppercase; }

.header {
  height: 100vh;
  position: relative; }
  .header__text-box {
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .header__text-box-heading {
      transform: translateY(-20%);
      font-size: 9rem;
      font-weight: 300;
      color: var(--color-gray-light);
      animation-name: moveInLeft;
      animation-duration: 1s;
      animation-timing-function: ease-out;
      backface-visibility: hidden; }
    .header__text-box-sub-heading {
      transform: translateY(-20%);
      background-image: linear-gradient(to right bottom, var(--color-tertiary), var(--color-tertiary-dark));
      -webkit-background-clip: text;
      color: transparent;
      animation: moveInRight 1s ease-out;
      font-size: 4rem; }
    .header__text-box--button {
      font-size: 2.3rem;
      font-weight: 400;
      color: var(--color-gray-light);
      text-decoration: none;
      margin-top: 3rem;
      border-radius: 200px;
      padding: 2rem 9rem;
      background-image: linear-gradient(to right bottom, var(--color-secondary-light), var(--color-secondary-dark));
      transition: all 0, .2s;
      cursor: pointer; }
      .header__text-box--button:hover {
        transform: translateY(-0.3rem);
        box-shadow: 0 1rem 2rem rgba(var(color-primary-dark), 0.2); }
      .header__text-box--button:focus {
        transform: translateY(0.1rem); }
  .header__image {
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute; }

.instruct-features {
  width: 100%;
  height: 60vh; }

.service {
  background-image: linear-gradient(to bottom, #10181c, var(--color-primary-dark));
  display: flex;
  flex-direction: column;
  padding: 3rem 8rem;
  align-items: center; }
  .service-heading {
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 1.6px;
    color: var(--color-gray-light); }
  .service-explain {
    display: flex;
    margin: 2rem 6rem;
    margin-top: 5rem;
    width: 100%;
    justify-content: space-between;
    align-items: center; }
    .service-explain--1, .service-explain--2, .service-explain--3 {
      position: relative; }
      .service-explain--1__text-box, .service-explain--2__text-box, .service-explain--3__text-box {
        position: absolute;
        top: 0;
        left: 0;
        padding: 2rem 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%; }
        .service-explain--1__text-box-heading, .service-explain--2__text-box-heading, .service-explain--3__text-box-heading {
          font-size: 3rem;
          font-weight: 400;
          padding: 1.5rem 1rem;
          letter-spacing: 1.7px;
          text-decoration: none;
          color: var(--color-gray-light-2);
          transform: translateY(60rem);
          opacity: 0;
          transition: all .5s;
          backface-visibility: hidden; }
        .service-explain--1__text-box-para, .service-explain--2__text-box-para, .service-explain--3__text-box-para {
          font-size: 2.5rem;
          font-weight: 300;
          text-decoration: none;
          padding: 2rem 0rem;
          color: var(--color-gray-light-2);
          transform: translateY(60rem);
          opacity: 0;
          transition: all .5s;
          backface-visibility: hidden; }
        .service-explain--1__text-box:hover .service-explain--1__text-box-heading, .service-explain--2__text-box:hover .service-explain--1__text-box-heading, .service-explain--3__text-box:hover .service-explain--1__text-box-heading, .service-explain--1__text-box:hover .service-explain--2__text-box-heading, .service-explain--2__text-box:hover .service-explain--2__text-box-heading, .service-explain--3__text-box:hover .service-explain--2__text-box-heading, .service-explain--1__text-box:hover .service-explain--3__text-box-heading, .service-explain--2__text-box:hover .service-explain--3__text-box-heading, .service-explain--3__text-box:hover .service-explain--3__text-box-heading {
          transform: translateY(20rem);
          opacity: 1; }
        .service-explain--1__text-box:hover .service-explain--1__text-box-para, .service-explain--2__text-box:hover .service-explain--1__text-box-para, .service-explain--3__text-box:hover .service-explain--1__text-box-para, .service-explain--1__text-box:hover .service-explain--2__text-box-para, .service-explain--2__text-box:hover .service-explain--2__text-box-para, .service-explain--3__text-box:hover .service-explain--2__text-box-para, .service-explain--1__text-box:hover .service-explain--3__text-box-para, .service-explain--2__text-box:hover .service-explain--3__text-box-para, .service-explain--3__text-box:hover .service-explain--3__text-box-para {
          transform: translateY(20rem);
          opacity: 1; }

.image {
  filter: brightness(50%); }

.features {
  height: 70vh;
  position: relative; }
  .features__text-box {
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: start; }
    .features__text-box-heading {
      transform: translateY(-20%);
      font-size: 12rem;
      font-weight: 300;
      color: var(--color-gray-light);
      backface-visibility: hidden;
      padding-top: 8rem;
      padding-left: 15rem; }
    .features__text-box-sub-heading {
      transform: translateY(-20%);
      background-image: linear-gradient(to right bottom, var(--color-secondary), var(--color-secondary-dark));
      -webkit-background-clip: text;
      color: transparent;
      padding-top: 2rem;
      padding-left: 15rem;
      font-size: 4rem; }
      .features__text-box-sub-heading-info {
        padding-top: 3rem;
        font-size: 2.7rem;
        color: #ced4da;
        display: block;
        /* or inline-block */
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        max-width: 90rem;
        line-height: 1.4;
        transform: translateY(120%);
        opacity: 0;
        transition: all .5s; }
  .features__image {
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute; }
  .features:hover .features__text-box-sub-heading-info {
    transform: translateY(0);
    opacity: 1; }