/* parallax --------------------------------------- */
.parallax-container {
	position: relative;
	margin-bottom: 4rem;
}

.parallax {
	/* The image used */
	background-image: url("images/test3.jpg");

	/* Set a specific height */
	min-height: 500px;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.parallax-text {
	position: absolute;
	top: 50%;
	width: 60%;
	text-align: center;
	left: 50%;
	transform: translate(-50%, -50%);
}

.parallax-text p {
	font-size: 3rem;
   font-weight: 600;
	color: rgb(255, 255, 255);
   background-color: rgba(0, 0, 0, 0.623);
   border-radius: .5rem;
}

/* numbers ========================== */
.numbers-container{
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 6rem;
   padding: 2rem 0;
}

.numbers-box{
   width: 11rem;
   text-align: center;
}

.numbers-img{
   width: 50%;
}

.numbers-box p{
   font-size: 1.2rem;
}

@media (max-width: 480px) {
   .parallax-text {
      width: 90%;
   }

   .parallax-text p {
      font-size: 2rem;
   }

   /* numbers ======== */
   .numbers-container{
      flex-direction: column;
      align-items: center;
      gap: 1.3rem;
   }

   .numbers-box{
      width: 9rem;
      text-align: center;
   }
  
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
	.parallax{
      min-height: 400px;
   }
}