body {
  background-color:#f2eee9;
  margin: 0;
}

.headerJs{
display: flex;
justify-content: center;
  }

#innerText{
  background: linear-gradient(to right,#e64f2e, #55a820, #ec07d2 );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  font-family: 'Shadows Into Light Two', cursive;
  font-size: 70px;
  font-weight: 700;
  margin: 0;
padding-top: 50px;
}

.header {
  text-align: center;
  padding: 10px 20px;
   background-color:#f2eee9;
  font-family: 'Shadows Into Light Two', cursive;

}


 h2 {
  font-family: 'Shadows Into Light Two', cursive;
font-size: 50px; 
  color: #b34d6d;
  margin-bottom: 10px;
}

 h3 {
  font-weight: 400;
  font-size: 30px; 
  color: #444;
  margin: 8px 0;
  font-family: 'Shadows Into Light Two', cursive;
}


 .days {
  margin-top: 15px;
  font-size: 40px; 
  font-weight: bold;
  color: #2a7c68;
  font-family: 'Shadows Into Light Two';
  
}

.header::after {
  content: "🌸";
  display: block;
  font-size: 2rem;
  animation: bloom 3s infinite ease-in-out;
}


@keyframes bloom {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}
 
.container{
  display: flex;
  background-color: #57806C;
  padding: 10px;
}
.item{
  height: 90vh;
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 10px;
  border-radius: 15px;
  background-color: #fff;
  flex: 1;
  font-family: 'Shadows Into Light Two';
  font-weight: 300;
  color:#57806C;
}

h4{
position: absolute;
font-size: 0;
top: 15px;
left: 40px;
background-color: #fff;
text-align: center;
}

h5{
font-size: 35px; 
font-family: 'Shadows Into Light Two', cursive;
color:#57806C;
text-align: center;
}

.text{
position: absolute;
background-color: #fff;
font-size: 0px;
top: 100px;
left: 40px;
text-align: center;

}  

.price{
  position: absolute;
  background-color: #fff;
  bottom: 20px;
  right: 40px;
  font-size: 0px;
 
}
  .selected {
    flex:3;
  }
.selected h4{
font-family: 'Shadows Into Light Two';
font-size: 30px;
transition: all 1s ease-in;
border-radius: 15px;
padding: 5px;
color:#57806C;
margin-bottom: 5px;

}
.selected .text{
  font-size: 20px;
  transition: all 1s ease-in;
  border-radius: 15px;
  padding: 5px;
  margin-right: 20px;
  color:#57806C; 
  font-family: 'Shadows Into Light Two';

  }
.selected .price{
  font-family: 'Shadows Into Light Two';
  font-size: 30px;
  transition: all 1s ease-in;
  border-radius: 15px;
  padding: 5px;
  font-weight: 400;
  color:#57806C;
  
}
.text-input{
border: none;
background-color: #f2eee9;

}

.contact{
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: auto;
  justify-content: flex-start;
 font-family: 'Shadows Into Light Two', cursive;
color:#57806C;
padding: 10px;
}

label{
  font-weight: 300;
  font-size: 20px;
  font-family: 'Lora', serif;
  color:#57806C;
  margin-bottom: 10px;
 
}

.buttonSubmit{
  display: flex;
  justify-content: flex-end;
 font-family: 'Shadows Into Light Two', cursive;
color:#57806C;
}

button{
background-color:#57806C;
color: #ece3d8;
font-size: 30px;
flex: 1;
 margin-top: 10px;
margin-bottom: 10px;
border: none;
border-radius: 15px;
padding: 10px;
font-family: 'Shadows Into Light Two', cursive;

}

  .one {
    background-image: url(1.jpg)
    }
    
    .two {
    background-image:url(2.jpg)
    }
    
    .three {
    background-image: url(3.jpg)
    }
    .four {
    background-image: url(4.jpg)
    }
    
    .five {
    background-image: url(5.jpg)
    }
    
    .six {
    background-image: url(6.jpg)
    }
    
    
    @media all and (max-width: 820px) {

     .selected h4{
  font-size:25px ;
      left: 5px;
      right: 5px;
      }

 .text{
     top: 200px; 
    left: 5px;
    right: 5px;
        }  

      .price{
        bottom: 120px;
       left: 10px;
      }

      h3{
      margin: 15px;
      text-align: center;
      }
    }

    @media all and (max-width: 500px) {
#innerText, .days{
  font-size: 50px;
}
h2 {
  font-size: 30px;
}
h3{
  font-size: 25px;
}
h5{
  font-size: 30px;
  padding: 1px;
}

.item{
  height: 70vh;
  margin: 3px;
  border-radius: 8px;
}

.selected h4{
  font-size:18px ;
  margin-top: 5px;
}

.selected .text{
  font-size:15px ;
  top: 100px; 
  margin-right: 5px;
  } 

  
.selected .price{
  bottom: 10px;
  left: 5px;
  font-size:15px;
  text-align: center;
   }
.contact{
   width: 400px; 
  padding: 5px;
  }
.contact{
padding: 3px;

}    
label{
font-size: 15px;

}
.text-input{
  padding: 5px;
  }
textarea{
  padding: 5px;
  }
  button{
  font-size: 25px;
  }

}