*{
    margin: 0;
    padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
}

li a {
  display: block;
  color: whitesmoke;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: darksalmon;
}
#img1{
 
  background-image: url(images/t1.png);
  width: 70%;  
 height: 300px;
 flex-basis:70%; 
  background-size: 300px 300px;
  margin-right: 430px;
  border-radius: 20px;




}
#img2{

 background-image: url(images/w1.png);
 width: 70%;  
 height: 300px;
 flex-basis:50%; 
  background-size: 300px 300px;
  margin-right: 430px;
  border-radius: 20px;
}
#img3{

 background-image: url(images/back.png);
 width: 100%;
 height: 400px;
 paddingle: 10px;

}




p{

  flex-basis: 50%;
  font-size: 25px;


    
}

.container{        
                display: flex;      
                  gap:1em; 
                  border-style: solid;
                  border-width: 10px;
                  border: 30px 30px 30px 30px;
                  border-radius: 30px;
                  border-color: dimgrey;
                  padding-left: 10px;
                  padding-right: 10px;
                  padding-top: 5px;

               }

 h1{

    text-align: center;
    }

p1{


  font-size: 25px;
  align-items: left;
  
  margin-left: 10px;

}
.ccontainer {

  text-align: center;
  font-size: 40px;
  color: whitesmoke; /* Change text color as needed */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.end{
   height: 400px;
 width: 98.%;
 padding-left: 10px;
 padding-right: 10px;
 background-image: url(images/bg.png);

}
.red {
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-family: fantasy;
  color: white;

}