/*GENERAL RESET*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Rubik", sans-serif;
  color: #444;
}

nav {
  font-size: 20px;
  font-weight: 700;
  /* background-color: green; */

  display: flex;
  justify-content: space-between; /*To push every item in one side!*/

  /*An example about how the linear-gradient works!*/
  /* background-image: linear-gradient(to right, red, blue); => it starts from red color at the left and goes to the right side till end with blue color*/

  /*To make a small space between top of the page and nav => ONLY PADDING WORKS!*/
  padding-top: 32px;
  /* margin-top: 32px; */
  /*using margin-top will not work here because of the container class which has more priority than nav element here and in there we set the top and bottom margin to 0! */
}

h1 {
  font-size: 52px;
  margin-bottom: 32px;
  line-height: 1.05;
}

p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 48px;
}

/*We start always with link and then visited separately- hover and then active separately*/
.btn:link,
:visited {
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #fff;
  text-decoration: none;

  display: inline-block; /*Default is inline - but in order to apply paddings, we have to change the display from inline to inline-block*/
  padding: 16px 32px; /*TOP-BOTTOM  LEFT-RIGHT*/
  border-radius: 9px;
}

h2 {
  font-size: 44px;
  margin-bottom: 48px;
}

section {
  padding: 96px 0; /*TOP-BOTTOM  LEFT-RIGHT*/
  background-color: #f7f7f7;
  /*Instead of repeating the below statements, we can create a container class as a common class and use it whenever we need to center its content!*/
  /* margin: 0 auto;
  width: 1200px; */

  /*THIS BELOW METHOD THAT I USED ALREADY TO CENTER THE ITEMS, DOESN'T WORK HERE*/
  /* display: flex;
  justify-content: center; */
}

/*THIS IS THE COMMON CLASS TO CENTER THE CONTENT OF HEADER AND SECTION AND I HAVE TO ADD THIS CLASS TO THESE TWO PARTS IN HTML FILE => TAKE A LOOK AT THE HTML FILE PLEASE!*/
.container {
  /*NOTE: NOT ONLY WE NEED THE MARGIN AND AUTO, RATHER, WE NEED THE WIDTH TOO, OTHERWISE, IT WILL NOT WORK! TO MEMORIZE: WE NEED THESE THREE ITEMS TO CENTER THE CONTENS: MARGIN - AUTO - WIDTH*/
  margin: 0 auto;
  width: 1200px;
  /* background-color: red; */
}

header {
  /* background-color: orangered; */

  /* height: 100%; Percent will not work here. We need vh => view port height instead of percent!*/

  height: 100vh; /*100 view port height => it means 100% of avaialbe view port => it means that covers all the page(the page that i see on the monitor)!*/

  /* height: 50vh; I see the header section only in the half of the page */

  /* height: 150vh; I see the header section in the one and half of the page */

  /* width: 100vw; 100 view port width - We don't need to mention this here, because header is a block element and as default it covers all the 100% available width! */

  /* width: 50vw; It covers 50 percent of the view port width => it means it covers only 50% of the width(not height) of the page that we are seeing in the monitor and not 100% */

  /* margin: 0 auto;
  width: 1200px; */

  /*THIS BELOW METHOD THAT I USED ALREADY TO CENTER THE ITEMS, DOESN'T WORK HERE*/
  /* display: flex;
  justify-content: center; */

  position: relative; /*We need this here because of the below items in header-container class!*/

  /*WE NEED THE LINEAR-GRADIENT TO MAKE THE BACKGROUND IMAGE DARKER! => A KIND OF STRANGE TRICK!
  IT MEANS WE HAVE TWO BACKGROUND IMAGES NOW => FIRST IS LINEAR-GRADIENT() AND SECOND IS URL() WHICH IS ACTUALLY A STACK HERE AND THE LINEAR-GRADIENT() AS FIRST LAYER IS PLACED ON THE TOP OF SECOND LAYER WHICH IS URL() AND IS IN BOTTOM!*/
  /* background-image: url(hero.jpg); */
  background-image: linear-gradient(
      /*FROM THIS COLOR*/ rgba(34, 34, 34, 0.6),
      rgba(34, 34, 34, 0.6) /*TO THIS COLOR*/
        /*in our case, both of them are the same , but actually they can be different!*/
    ),
    url(hero.jpg);
  background-size: cover;
  /* color: #d2bdbd;  ONLY FOR TEST*/
  /*Not exactly the white color, due to the contast between the text and the background image!*/
  color: #fff;
}

/*to keep the nav on top of the page and arrange other items in a column using display:flex*/
/*THIS IS MY SOLUTION USING DISPLAY:FLEX*/
/*//////////////////////////////////////////////////*/
.header-section-without-nav {
  display: flex;
  flex-direction: column;
  /* to bring items in a column, otherwise they are in a row! */
  margin-top: 150px;
  /* width: 600px; OR the following:*/
  width: 50%;
  /* background-color: violet;  */
}
/*//////////////////////////////////////////////////*/

/*THIS IS JONAS SOLUTION USING ABSOLUTE POSITIONING*/
/*//////////////////////////////////////////////////*/
.header-container {
  /* width: 1200px;
  position: absolute; */

  /*In relation to PARENT size:*/
  /* left: 50%;
  top: 50%; */

  /*Now, the items are in right and bottom side of the page and we have to use transform => translate property to bring it half to the left side and also half to the top side of the page! */

  /*In relation to ELEMENT size:*/
  /*first -50%: movement horizontally half to the left - 
    second -50%: movement vertically half to the top*/
  /* transform: translate(-50%, -50%); */

  /* background-color: violet; */

  /* text-align: center; */
}

/*We make the width half of the above width to squeeze the text and header to the right side - It is useful because of the photo of the lady behind that - we can see the face of the lady clear!*/
.header-container-inner {
  /* width: 50%; */
  /*600px*/
  /* background-color: blue; */
}
/*//////////////////////////////////////////////////*/