/*Font for titles*/
@font-face {
  font-family: "Title";
  src: url("./fonts/Gotham-Black.otf");
  font-style: normal;
  line-height: normal;
}
/*Font for descriptions*/
@font-face {
  font-family: "Description";
  src: url("./fonts/GothamBook.ttf");
  font-style: normal;
  line-height: normal;
}
/*Body properties*/
body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background-image: url("../assets/background.png");
  background-size: contain;
  background-repeat: no-repeat;
}
/*P title and description equal properties*/
p.title,
p.description {
  color: #fff;
  font-style: italic;
}
/*Specific font for title*/
p.title {
  font-family: "Title";
}
/*Specific font for description*/
p.description {
  font-family: "Description";
}

/*P title properties*/
#title_0 {
  font-size: 71.202px;
  font-weight: 350;
  top: 57px;
  left: 191px;
  position: absolute;
  z-index: 5;
  margin-top: 0px;
}

#title_1 {
  font-size: 64px;
  font-weight: 450;
  top: 831px;
  left: 105px;
  width: 543px;
  height: 149px;
  overflow: hidden;
  text-align: center;
  position: absolute;
  z-index: 5;
  margin-top: 0px;
}

/*P description properties*/
#description_0,
#description_1,
#description_2 {
  font-size: 32px;
  font-weight: 150;
  left: 20px;
  position: absolute;
  z-index: 5;
  margin-top: 0px;
  width: 344px;
  height: 38px;
  overflow: hidden;
  white-space: nowrap;
}

#description_0 {
  top: 109px;
}

#description_1 {
  top: 147px;
}

#description_2 {
  top: 186px;
}
/*Main content properties*/
.main-content {
  display: flex;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}
/*Equal content properties*/
.content-item-0,
.content-item-1,
.content-item-3 {
  position: relative;
  overflow: hidden;
}
/*Specific content properties*/
.content-item-0 {
  width: 505px;
  height: 300px;
  margin-top: 57px;
  margin-left: 63px;
}

.content-item-1 {
  width: 380px;
  height: 244px;
  margin-top: 116px;
  margin-left: 167px;
}

#content-item-2 {
  position: absolute;
  margin-top: 30px;
  margin-left: 1160px; 
  object-fit: cover; 
}

.content-item-2::before,
.content-item-2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%; 
}

.content-item-2::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.content-item-2::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

#description_4 ul {
  color: #fff;
  font-family: "Description";
  font-size: 26px;
  font-weight: 150;
  font-style: italic;
  padding-left: 0;
}

#description_4 ul li {
  color: #fff; 
  font-family: "Description";
  font-size: 26px;
  font-weight: 150;
  font-style: italic;
  padding-left: 0;
}

/*Equal image, description_box and main image properties*/
.image_icon,
.description_box {
  position: absolute;
}
/*Specific properties*/
.image_icon {
  width: 166px;
  height: 166px;
  top: 21px;
  right: 568px;
  z-index: 4;
}

.description_box {
  width: 541px;
  height: 155px;
  top: 831px;
  left: 97px;
  z-index: 3;
}

/*content-item-3 properties*/
.content-item-3 {
  position: absolute;
  width: 1138px;
  height: 685px;
  margin-top: 395px;
  margin-left: 51px;
}
/*Equal title properties*/
#title_2,
#title_3,
#title_4,
#title_5 {
  font-size: 30px;
  position: absolute;
  left: 184px;
}

#title_6,
#title_7,
#title_8,
#title_9 {
  font-size: 30px;
  position: absolute;
  left: 723px;
}
/*Specific properties*/
#title_2,
#title_6 {
  top: 35px;
}

#title_3,
#title_7 {
  top: 190px;
}

#title_4,
#title_8 {
  top: 335px;
}

#title_5,
#title_9 {
  top: 485px;
}
/*Equal description properties*/
#description_3,
#description_4,
#description_5,
#description_6 {
  font-size: 26px;
  position: absolute;
  left: 184px;
  width: 372px;
  height: 85px;
  overflow: hidden;
}

#description_7,
#description_8,
#description_9,
#description_10 {
  font-size: 26px;
  position: absolute;
  left: 723px;
  width: 372px;
  height: 60px;
  overflow: hidden;
}
/*Specific properties*/
#description_3,
#description_7 {
  top: 75px;
}

#description_4,
#description_8 {
  top: 230px;
}

#description_5,
#description_9 {
  top: 375px;
}

#description_6,
#description_10 {
  top: 525px;
}
/*Icon equal description properties*/
.icon {
  position: absolute;
  width: 116px;
  height: 116px;
  border: none;
}

#icon_1,
#icon_2,
#icon_3,
#icon_4 {
  left: 50px;
}

#icon_5,
#icon_6,
#icon_7,
#icon_8 {
  left: 589px;
}

#icon_1,
#icon_5 {
  top: 57px;
}

#icon_2,
#icon_6 {
  top: 206px;
}

#icon_3,
#icon_7 {
  top: 356px;
}

#icon_4,
#icon_8 {
  top: 506px;
}