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

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  text-align: center;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Arvo", serif;
  color: #333;
  margin: 1px 0;
}
h6 {
  margin: 1px 0;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: #9fa3a7;
  font-size: 12px;
  letter-spacing: 2px;
}
span {
  text-transform: uppercase;
  font-weight: bold;
}
img {
  display: block;
  width: 100%;
}
a {
  text-decoration: none;
}
/*!========== End Global Area ==========*/
/**============ Grid System =============*/
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "iphone6 iphone6 iphone6 iphone6 iphone6 iphone6 chemicalLabs chemicalLabs chemicalLabs chemicalLabs chemicalLabs chemicalLabs"
    "iphone6 iphone6 iphone6 iphone6 iphone6 iphone6 chemicalLabs chemicalLabs chemicalLabs chemicalLabs chemicalLabs chemicalLabs"
    "keyboard keyboard keyboard imac imac imac imac  imac imac icloud icloud icloud"
    "keyboard keyboard keyboard imac imac imac imac  imac imac icloud icloud icloud"
    "controller controller controller ipad ipad ipad ipad ipad ipad icloud icloud icloud"
    "controller controller controller ipad ipad ipad ipad ipad ipad icloud icloud icloud"
    "twitter twitter twitter experience experience experience tv tv tv tv tv tv"
    "twitter twitter twitter experience experience experience tv tv tv tv tv tv";
}
/*?======= First Block (Iphone) ======= */
.iphone6 {
  grid-area: iphone6;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 80px 20px 0px 20px;
}
.iphone6__content {
  text-align: start;
  width: 40%;
}
.iphone6__content h6 {
  margin-top: -30px;
  margin-bottom: 10px;
}
.iphone6__content h2 {
  font-weight: normal;
  margin: 0;
}
.iphone6__content p {
  font-size: 14px;
  color: #9fa3a7;
}
.iphone6__image {
  width: 40%;
}
.iphone6__image img {
  width: 80%;
  margin: 0 auto;
}
/*?======= Second Block (Chemical Labs) ======= */
.chemicalLabs {
  grid-area: chemicalLabs;
  background-color: #f7f8f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chemicalLabs a {
  color: #27b9c2;
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
}
.chemicalLabs h1 {
  font-size: 48px;
  font-weight: normal;
  max-width: 550px;
  margin: 0;
}
/*?======= Third Block (Keyboard) ======= */
.keyboard {
  grid-area: keyboard;
  background-color: #f05638;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.keyboard h2 {
  color: #fffbfb;
  font-size: 22px;
  max-width: 200px;
}
.keyboard a {
  color: #ffc80a;
  margin: 10px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}
.keyboard a i {
  font-size: smaller;
}
/*?======= Fourth Block (Imac) ======= */
.imac {
  grid-area: imac;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 80px 20px 0 20px;
  text-align: start;
}
.imac__left {
  width: 40%;
}
.imac__left h2 {
  width: 90%;
  margin: 15px 0 25px;
  font-weight: normal;
}
.imac__left .imac__image {
  width: 180%;
  translate: -65% 0;
}

.imac__right {
  width: 40%;
}
.imac__right p {
  font-size: 14px;
  line-height: 26px;
  color: #9fa3a7;
  margin: 0;
  margin-bottom: 20px;
}
.imac__right a {
  font-size: 12px;
  line-height: 26px;
  color: #27b9c2;
  letter-spacing: 3px;
  font-weight: bold;
}
.imac__right a i {
  font-size: smaller;
}
/*?======= Fifth Block (Icloud) ======= */
.icloud {
  grid-area: icloud;
  background-color: #8f76bc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
  /* padding: 50px 0; */
}
.floppy__circle {
  background-color: RGB(129, 102, 176);
  width: 373px;
  height: 373px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.floppy__circle span i {
  color: RGB(255, 200, 10);
}
.floppy__circle span:has(i) {
  padding: 8px 15px;
  background-color: rgba(255, 255, 255, 0.08);
  letter-spacing: 2.4px;
  font-size: 10px;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.floppy__image {
  translate: -5px 15px;
  width: 70%;
  margin-bottom: 5px;
}
.icloud__content {
  max-width: 290px;
  width: 70%;
}
.icloud__content h2 {
  color: #fff;
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
.icloud__content p {
  font-size: 14px;
  line-height: 26px;
  margin: 15px 0 35px;
}
.icloud__button {
  text-transform: uppercase;
  padding: 14px 28px;
  letter-spacing: 2.5px;
  line-height: 26px;
  font-size: 12px;
  font-weight: bolder;
  background-color: #ffc80a;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
/*?======= Sixth Block (Controller) ======= */
.controller {
  grid-area: controller;
  background-color: #f7f8f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 100px;
}
.controller__image {
  width: 80%;
  margin: 0 auto;
  translate: -25px;
}
.controller h2 {
  line-height: 32px;
  margin: 10px 0 20px;
  font-size: 22px;
  font-weight: normal;
  max-width: 180px;
  text-align: center;
}
.controller a {
  color: #27b9c2;
  line-height: 26px;
  font-size: 12px;
  font-weight: bolder;
}
/*?======= seventh Block (Ipad) ======= */
.ipad {
  grid-area: ipad;
  background-color: #93b6b7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.ipad header {
  max-width: 350px;
  font-size: 22px;
  line-height: 32px;
  font-weight: bolder;
  margin-top: 60px;
  margin-bottom: 20px;
}
.ipad header h2 {
  color: #fff;
}
.ipad header span {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: #fa684f;
  color: #fff;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: bolder;
  line-height: 20px;
  letter-spacing: 2px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.ipad__image {
  width: 90%;
  margin: 0 auto;
  translate: -75px 0px;
  z-index: 10;
}
.ipad__backword {
  position: absolute;
  bottom: -150px;
  right: 50px;
  opacity: 0.5;
  font-size: 3100%;
  z-index: 9;
}
/*?======= Eighth Block (Twitter) ======= */
.twitter {
  grid-area: twitter;
  background-color: #39d5f4;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.twitter__circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #34cfed;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.twitter__circle img {
  width: 50px;
}
.twitter__circle h3 {
  color: white;
  font-weight: normal;
  font-size: 22px;
  line-height: 32px;
  margin: 10px 0 20px;
  max-width: 150px;
}
/*?======= Ninth Block (Experience) ======= */
.experience {
  grid-area: experience;
  background-color: #f7f8f9;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  line-height: 32px;
  margin: 10px 0 20px;
}
.experience h3 {
  font-weight: normal;
}
.experience span {
  font-size: 10px;
  color: white;
  line-height: 20px;
  letter-spacing: 2px;
  padding: 0 10px;
  background-color: #7bc424;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
/*?======= Tenth Block (TV) ======= */
.tv {
  grid-area: tv;
  background-color: #2c2c2c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.tv__image {
  width: 30%;
  z-index: 1;
  translate: -20px -30px;
  margin: 0;
}
.tv h3 {
  text-align: start;
  width: 30%;
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  margin: 10px 0 20px;
  font-weight: normal;
}