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

html {
  /* min-height: 100%; */
  /* min-height: 100vh; */
  font-size: 62.5%;
  /*0.625*16px = 10px => 1rem = 10px*/
  /*ODER*/
  /* font-size: 0.625em; */
  /* => 0.625*16px = 10px => 1rem = 10px */
  /* font-size: 0.4rem;  */
  /* 0.4*16px = 6.4px*/
  /* font-size: 0.64rem; */
}

body {
  /* It would be the BEST to have a second font as sans-serif here till the first font(Montserrat) will download from google server and then it will be used! */
  font-family: "Montserrat", sans-serif;
  /* font-size: 0.4em; */
  /* font-size: 0.64rem; */

  background-image: url(/images/waves-cropped.png),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
    url(/images/pexels-cesar-galeao-3289711-gray.jpg);

  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 50% 50%, 100% 100%, 100% 100%;
  background-position: 100% 100%, 0% 60%, 100% 60%;
}

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* .block-skewed-left {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
} */

.main-content {
  background-image: linear-gradient(
    to right,
    rgb(226, 29, 60) 100%,
    rgba(0, 0, 0, 0.5) 100%,
    transparent 100%
  );

  /* width: 40%; */
  /* width: 40vw; */
  /* flex: 1 0 40%; */
  /* flex: 1 0 auto; */
  flex: 1 0 45vw;
  height: 100vh;
  /* width: 410px; */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: center; THE PROBLEM IS THAT: THIS COMMAND BRINGT ALL THE HEADER, MAIN-OFFER AND FOOTER IN THE MIDDLE, BUT WE WANT THTA, WE WANT ONLY THE MAIN-OFFER COMES IN THE MIDDLE! */

  /* row-gap: 75px; */
  row-gap: 2rem;
  column-gap: 2rem;
}

header {
  display: inline-block;
}

/* .main-content:nth-of-type(even) {
  background-color: green;
  } */

/* .page:first-child {
    background-color: greenyellow;
    } */

.countdown {
  /* width: 60%; */
  /* width: 60vw; */
  /* flex: 1 0 auto; */
  /* flex: 0 1 60%; */
  flex: 1 0 55vw;
  color: #fff;
  text-align: center;

  display: flex;
  flex-direction: column;
  /* align-self: center;  */
  /*to bring the DEAL ENDS IN and 2 DAYS in the middle of the image of the man!*/
  /* OR USING THE FOLLOWING: */
  justify-content: center;
}

.logo {
  /* width: 275px; */
  width: 27.5rem;
  /* margin-top: 15px; */
  margin-top: 1.5rem;
  /* margin-left: 15px; */
  margin-left: 1.5rem;

  /* justify-self: self-start; */
}

.main-offer {
  /* width: 400px; */
  /* margin: 75px 15px; */
  margin: 0;
  padding: 0;

  align-self: center; /*ONLY MAIN-OFFER COMPONENTS WILL BE ALIGNED IN CENTER!*/

  /* margin-top: 3rem; */
  /* margin: 0 0 0 5rem; */
  /* font-size: 1rem; */
}

.main-heading {
  /* margin: 0 0 0 50px; */
  margin: 0;

  /* font-size: 28px; */
  font-weight: normal;
  font-style: italic;
  color: white;
  /* letter-spacing: 3.5px; */
  letter-spacing: 0.05em; /*0.05 * 16px = 0.8px*/
}

.main-heading > span {
  font-weight: bold;
  text-transform: uppercase;
}

.main-offer-price {
  display: block; /*we have to chnage the display to block, otherwise the below margin will not work!*/
  /* margin-top: 18px; */
  margin-top: 1.8rem;
  /* font-size: 120px; */
  font-size: 8rem;
  /* letter-spacing: 0.1em; 0.1 * 16px = 1.6px */
  letter-spacing: 0.05em; /*0.05 * 16px = 0.8px*/
  text-align: center;
}

.btn {
  display: block;
  /* width: 250px; */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.5rem;
  text-align: center;

  /* background-color: #000; */
  background-color: rgb(169, 109, 31);
  color: #fff;

  /* padding: 20px 60px; */
  padding: 2rem 6rem;
  /* border-radius: 125px; */
  border-radius: 12.5rem;
  margin: 0 auto;
  /* margin-top: 25px; */
  margin-top: 2.5rem;
  cursor: pointer;
  border: none;

  transition: all 0.3s;
}

.button-link {
  text-decoration: none;
}

.btn:hover {
  /* background-color: rgb(182, 123, 45); */
  /* transform: rotate(360deg) scale(1.5); */
  transform: scale(1.05);
  /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]; */
  /* box-shadow: 0px 0px 5px 0px #000; */
  box-shadow: 0px 0px 0.5rem 0px #000;
}

.footer {
  /* margin: 0 0 30px 25px; */
  margin: 0rem 0 1rem 1.5rem;

  /* flex: 1 0; */
  /* flex: 1 0 auto; */
  /*footer takes all the remaining space => it will grow to take the remaining space but not shrink!*/
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end; */
  /*footer goes at the end of the page!*/

  /* align-items: flex-end; => this send the footer at the end of the page too but when we have the flex-direction:row! */
  /* margin-bottom: 30px; */
}

/* .footer .paragraph {
  margin-left: 15px;
} */

.footer .paragraph {
  font-size: 1rem;
}

.links {
  /* margin-top: 10px; */
  margin-top: 1rem;
  font-size: 1.2rem;
}

.links li {
  display: inline-block;
  transition: all 0.5s;
}

.item:hover {
  /* box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.4); */
  box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
  /* transform: rotate(45deg) scale(1.01); */
  transform: scale(1.1);
}

.link:hover {
  background-color: rgb(82, 40, 85);
  color: #55c57a;
  font-weight: bold;
}

.links li:last-child {
  /* margin-left: 30px; */
  margin-left: 3rem;
}

.countdown-heading {
  /* first method: */
  /* display: flex;
  justify-content: center;
  margin: 0; */

  /* second method: */
  /* width: 400px;
  margin: 0 auto; */

  /* Third method: */
  margin: 0;
  /* text-align: center; */
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.05em;
  /* font-size: 28px; */
  font-size: 2.8rem;
}

.countdown-paragraph {
  /* text-align: center; */
  margin: 0;
  text-transform: uppercase;
  /* font-size: 58px; */
  font-size: 5.8rem;
}

.countdown-paragraph > span {
  font-weight: bold;
}

/* MEDIA QUERIES: */
/* for screens wider than 375px  */
@media screen and (min-width: 375px) {
  .main-heading {
    font-size: 2.5rem;
  }

  .btn {
    font-size: 2rem;
  }

  .main-offer-price {
    text-align: center;
    font-size: 9rem;
  }
}

/* for screens wider than 425px  */
@media screen and (min-width: 425px) {
  .main-heading {
    font-size: 3rem;
  }

  .btn {
    font-size: 2.5rem;
  }

  .main-offer-price {
    text-align: center;
    font-size: 9.5rem;
  }
}

/* for screens wider than 768px  */
@media screen and (min-width: 768px) {
  body {
    background-image: url(/images/waves-cropped.png),
      linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
      url(/images/pexels-cesar-galeao-3289711-gray.jpg);

    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 50% 50%, 70% 100%, 66% 100%;
    background-position: 100% 100%, 100% 0, 100% 0;
  }

  .page {
    flex-direction: row;
  }

  .page .block-skewed-left {
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
  }

  .main-heading {
    font-size: 2.2rem;
  }

  .btn {
    font-size: 1.5rem;
  }

  .main-offer-price {
    text-align: center;
    font-size: 9rem;
  }

  /* .footer .paragraph span {
    display: contents;
  } */
}

/* for screens wider than 1024px  */
@media screen and (min-width: 1024px) {
  .main-heading {
    font-size: 3rem;
  }

  .btn {
    font-size: 2rem;
  }

  .main-offer-price {
    text-align: center;
    font-size: 10rem;
  }
}

/* for screens wider than 1440px  */
@media screen and (min-width: 1440px) {
  .main-heading {
    font-size: 4rem;
  }

  .btn {
    font-size: 3rem;
  }

  .main-offer-price {
    text-align: center;
    font-size: 11rem;
  }

  .footer .paragraph {
    font-size: 1.5rem;
  }

  .links {
    font-size: 1.5rem;
  }
}