body{
	text-align: center;
	font-family: montserrat;
	color: #ffffff;
  src:url('https://fonts.cdnfonts.com/s/57380/VIPER___.woff') format('woff');
}

@font-face{
  src:url('https://fonts.cdnfonts.com/s/57380/VIPER___.woff') format('woff');
   font-weight:normal;
   font-style:normal;
   font-display:swap;
 }

/* BACKGROUND IMAGE */
#background1 .background1{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background2 .background2{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background3 .background3{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background4 .background4{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}

#background5 .background5{
	background-repeat: no-repeat;
	background-size: 68.5% 100%;
	background-position: center;
	position: relative;
	min-height: 881px;
    background-position: 50% 50%;
    width: 1200px;
}



/* CONTENTS IN EACH BACKGROUND */
#background1 .content1_ {
  position: absolute;
  font-size: 36px;
  top: 11.2em;
  left: 15em;
  transform: translate(50%, 0);
  color: #000000;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 500;
  padding: 1px;
  text-align: left;
  z-index: 1;

  /* Add some padding to create a space between text and box edge */
  /* Set the background color to white */
}

#background1 .content2 {
  position: absolute;
  font-size: 36px;
  top: 14.4em;
  left: 19em;
  transform: translate(50%, 0);
  color: #000000;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 500;
  padding: 1px;
  text-align: left;
  z-index: 1;

}

#background1 .content3 {
  position: absolute;
  font-size: 34px;
  top: 16.9em;
  left: 17.2em;
  transform: translate(50%, 0);
  color: #000000;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 500;
  padding: 1px;
  z-index: 1;

}


#background1 .content8 {
  position: absolute;
  font-size: 36px;
  top: 14.7em;
  left: 27.2em;
  text-align: center;
  transform: translate(60%, 0);
  color: #000000 !important;
  font-family: 'FolioTEEBolCon', Helvetica, Arial, sans-serif !important;
  font-style: normal;
  font-weight: 400;
  z-index: 1;

}


#background1 .content4{
  position: absolute;
  font-size: 34px;
  top: 18.1em;
  left: 26.3em;
  transform: translate(-50%, 50%);
  color: #000000;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 500;
  z-index: 1;

}

#background1 .content5{
  position: absolute;
  font-size: 38px;
  bottom: -1.8em;
  left: 23.6em;
  transform: translate(-50%, 50%);
  color: #000000!important;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 500;
  z-index: 1;
}

#background1 .content6{
  position: absolute;
  font-size: 110px;
  bottom: 1.2em;
  left: 7.1em;
  transform: translate(-50%, 50%);
  color: #FFFFFF;
  font-style: italic; /* Set the font style to italic */
  font-family: "Helvetica Neue 77 Bold Condensed Oblique", Helvetica, Arial, sans-serif,italic !important;
  z-index: 1;

}
#background1 .content7{
  position: absolute;
  font-size: 19px;
  bottom: -6.4em;
  left: 47.5em;
  transform: translate(-50%, 50%);
  color: #000000 !important;
  font-family: 'VIPER NORA'!important;
  font-style: normal;
  font-weight: 400;
  z-index: 1;

}

/* BACKGROUND2 */
#background2 .content1 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 18em;
  width: 100%;
  font-size: 52px;
  color: #000;
  text-align: center;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
  z-index: 1;
}

#background2 .top2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 33em;
  width: 100%;
  font-size: 33px;
  color: #ffe600;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  z-index: 1;
}

#background2 .first {
  position: absolute;
  transform: translate(24.8%, 0);
  top: 46.6em;
  width: 100%;
  font-size: 24.3px;
  color: #ffffff;
  text-align: left;
  list-style-type: circle;
  font-family: 'Poppins', Bold;
  z-index: 1;
}

#background2 .top3 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
  top: 37.4em;
  width: 100%;
	font-size: 33px;
  color: #ffe600;
	font-weight: 800;
	text-align: center;
	font-family: 'Poppins', Bold; 
  z-index: 1; /* Add this line to bring the element in front of the background image */

}

#background2 .second {
  position: absolute;
  transform: translate(23.3%, 0);
  top: 60.1em;
  width: 100%;
  font-size: 21.3px;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  list-style-type: circle;
  font-family: 'Poppins', Bold;
  z-index: 1;
}

#background2 .top4 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
  top: 41.5em;
  width: 100%;
	font-size: 33px;
  color: #ffe600;
	font-weight: 800;
	text-align: center;
	font-family: 'Poppins', Bold; 
  z-index: 1; 
}

#background2 .third {
  position: absolute;
  transform: translate(25.4%, 0);
  top: 64.4em;
  width: 100%;
  font-size: 22px;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  list-style-type: circle;
  font-family: 'Poppins', Bold;
  z-index: 1;
}

#background2 .top5 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
  top: 45.8em;
  width: 100%;
	font-size: 33px;
  color: #ffe600;
	font-weight: 800;
	text-align: center;
	font-family: 'Poppins', Bold; 
  z-index: 1; 
}

#background2 .fourth {
  position: absolute;
  transform: translate(24.3%, 0);
  top: 74.3em;
  width: 100%;
  font-size: 21px;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  list-style-type: circle;
  font-family: 'Poppins', Bold;
  z-index: 1;
}

#background2 .top6 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
  top: 49.8em;
  width: 100%;
	font-size: 33px;
  color: #ffe600;
	text-align: center;
  font-family: 'Poppins', sans-serif; 
  font-weight: 200;
  z-index: 1; 
}

#background2 .fifth {
  position: absolute;
  transform: translate(30.2%, 0);
  top: 80.6em;
  width: 100%;
  font-size: 21px;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  list-style-type: circle;
  font-family: 'Poppins', Bold;
  z-index: 1;
}


/* RESOLUTION */
@media (min-width: 481px) and (max-width: 768px) {
  #background1 .content1{
    top: 40.7em;
    left: 26em;
    transform: translate(254px, 0);
  }

  #background2 .top2 {
    left: 77%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width: 769px) and (max-width: 1023px) {

}

@media only screen and (max-width: 1024px) {
  #background2 .content1 {
    top: 58rem;
    left: -15%;
    transform: translate(50%, 0);
    white-space: nowrap; 
  }

  #background2 .top2 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 33em;
    white-space: nowrap; 
  }

  #background2 .first {
    left: 90%;
    transform: translate(-50%, 0);
    top: 46.6em;
    white-space: nowrap; 

  }

  #background2 .top3 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 37.5em;
    white-space: nowrap; 

  }

  #background2 .second {
    left: 84%;
    transform: translate(-50%, 0);
    top: 60.2em;
    white-space: nowrap; 

  }

  #background2 .top4 {
    left: 85%;
    transform: translate(-50%, 0);
    top: 41.5em;
    white-space: nowrap; 

  }

  #background2 .third {
    left: 90%;
    transform: translate(-50%, 0);
    top: 64.2em;
    white-space: nowrap; 

  }

  #background2 .top5 {
    left: 90%;
    transform: translate(-50%, 0);
    top: 45.9em;
    white-space: nowrap; 
  }

  #background2 .fourth {
    left: 90%;
    transform: translate(-50%, 0);
    top: 74.2em;
    white-space: nowrap; 

  }

    #background2 .top6 {
      left: 90%;
      transform: translate(-50%, 0);
      top: 49.9em;
      white-space: nowrap; 
  }

  #background2 .fifth {
    left: 90%;
    transform: translate(-50%, 0);
    top: 80.5em;
    white-space: nowrap; 

  }


  
    
}

@media (min-width: 1025px) and (max-width: 1439px) {
 #background1 .content1 {
    top: 45.85em;
    left: 33.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width: 1440px) and (max-width: 1445px) {
 #background1 .content1 {
    top: 45.85em;
    left: 33.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}

@media (min-width:2560px) and (max-width: 2563px) {
   #background1 .content1 {
    top: 45.85em;
    left: 59.2em;
    transform: translate(0, 0);
  }

  #background2 .top2 {
    left: 50%;
    transform: translate(-50%, 0);
    top: 52em;
    width: 100%;
  }

}