@font-face{

  font-family:"helvetica";

  src:url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("woff"),

  url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("opentype"),

  url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("truetype");

}



body {

  font-family: "helvetica", sans-serif;

  margin: 0; 

  box-sizing: border-box;

  min-height: 100vh;

}



.container {

  display: flex;

  justify-content: space-between;

  gap: 50px; 

  padding: 145px 60px 0;

  margin: auto 70px;

}



.box {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 15em; 

  height: 33.75em; 

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  overflow: hidden; 

  position: relative; 

  transition: transform 0.5s ease-in-out, background-image 0.3s ease-in-out; 

}



.box1 {

  background-image: url('img/1.jpg');

}

.box1:hover{

  background-image: url('img/1-2.jpg');

  transform: scale(1.1);

}



.box2 {

  background-image: url('img/2.jpg');

}

.box2:hover {

  background-image: url('img/2-2.jpg');

  transform: scale(1.1);

}



.box3 {

  background-image: url('img/3.jpg');

}

.box3:hover {

  background-image: url('img/3-2.jpg');

  transform: scale(1.1);

}



.box4 {

  background-image: url('img/4.jpg'); 

}

.box4:hover {

  background-image: url('img/4-2.jpg');

  transform: scale(1.1);

}



.textbox1, .textbox2, .textbox3, .textbox4{

  text-align: center;

  color: white;

  opacity: 0;

}



.box1:hover .textbox1{

  opacity: 1;

}



.box2:hover .textbox2{

  opacity: 1;

}



.box3:hover .textbox3{

  opacity: 1;

}



.box4:hover .textbox4{

  opacity: 1;

}



.next{

  position: fixed;

  right: 9%;

  top: 4em;

}